/* =====================================================================
   Pages — 페이지별 레이아웃
   01 Landing · 02 Pride · 03 Message · 04 Highlights · 05 Information
   ===================================================================== */

/* ---------- 01 Landing --------------------------------------------- */
.hero {
  position: relative;
  height: var(--hero-h);
  background: var(--c-hero);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.hero__title {
  position: absolute; left: 22px; top: 36px;
  color: var(--c-hero-title);
  pointer-events: none;
}
.hero__edition { display: block; margin-top: 20px; color: var(--c-hero-title); }
.hero__eyebrow {
  position: absolute; right: var(--gutter); bottom: 16px;
  color: var(--c-on-hero); pointer-events: none;
}
.hero__hint {
  position: absolute; left: 24px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--c-ink); color: var(--c-paper);
  font: 500 var(--fs-caption)/1.5 var(--font-kr);
  pointer-events: none; transition: opacity .4s;
}
.hero__hint::before { content: ""; width: 8px; height: 8px; background: var(--c-accent); }
.hero.is-touched .hero__hint { opacity: 0; }

.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; border-bottom: var(--line) solid var(--c-line); }
.glance__cell {
  position: relative;
  display: block;
  min-height: 128px;
  padding: 20px var(--gutter);
  border-right: var(--line) solid var(--c-line);
  border-bottom: var(--line) solid var(--c-line);
  transition: background-color .2s;
}
.glance__cell:hover { background: color-mix(in srgb, var(--c-accent-soft) 45%, transparent); }
.glance__cell:nth-child(4n) { border-right: 0; }
.glance__cell:nth-child(n+5) { border-bottom: 0; }
.glance__cell::before {            /* Grid/Joint — 교차점의 사각 표시 */
  content: ""; position: absolute; left: -3.5px; top: -3.5px;
  width: var(--joint); height: var(--joint); background: var(--c-line);
}
.glance__cell:nth-child(4n+1)::before, .glance__cell:nth-child(-n+4)::before { display: none; }

/* ---------- 02 Pride ----------------------------------------------- */
.vision .t-heading { white-space: pre-line; }
.vision__goal ul { margin-top: 16px; display: grid; gap: 6px; }

.history { padding: 24px var(--gutter) 32px; border-bottom: var(--line) solid var(--c-line); }
.history__strip { position: relative; margin-top: 48px; }
.year-strip {
  display: grid; grid-template-columns: repeat(37, minmax(0, 1fr));
  gap: 1px; padding: 1px; background: var(--c-ground);
  max-width: 1333px;
}
.year-strip button { aspect-ratio: 1; background: var(--c-cell); }
.year-strip button[data-n="1"] { background: var(--c-accent-soft); }
.year-strip button[data-n="2"] { background: var(--c-accent); }
.year-strip button[data-n="3"], .year-strip button[data-n="4"] { background: var(--c-accent-deep); }
.year-strip button.is-active { outline: 2px solid var(--c-ink); outline-offset: -1px; position: relative; z-index: 1; }
.year-strip__labels { display: grid; grid-template-columns: repeat(37, minmax(0, 1fr)); max-width: 1333px; margin-top: 8px; color: var(--c-muted); }
.year-strip__labels span { grid-row: 1; white-space: nowrap; }   /* 시작 칸은 html 의 style 로 지정 */
.history__tip.tooltip { position: absolute; bottom: calc(100% + 8px); transform: none; transition: left .15s; white-space: nowrap; max-width: none; }
.history__strip { padding-top: 8px; }
.eras { margin-top: 0; }
.era__title { display: flex; gap: 8px; align-items: baseline; }
.era { display: grid; gap: 12px; align-content: start; padding-bottom: 36px; }
.era__title { color: var(--c-accent-text); }
.era li { display: grid; gap: 2px; padding: 2px 0; border-radius: 0; transition: background-color .2s; }
.era li .t-label-en { color: var(--c-accent-text); }
.era li.is-hit { background: var(--c-accent-soft); }

.schools .cell { min-height: 260px; display: grid; gap: 4px; align-content: start; }
.schools .t-label-en { color: var(--c-muted); margin-bottom: 28px; }
.schools p { color: var(--c-muted); }

/* ---------- 03 Message --------------------------------------------- */
.vision .cell, .vision__goal { display: grid; gap: 8px; align-content: start; }
.vision .t-heading { margin-top: 8px; }
.message .cell:first-child { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.signature { display: flex; align-items: center; gap: 16px; }
.signature img { height: 46px; width: auto; }
.message__body { white-space: pre-line; max-width: 672px; }
.portrait { aspect-ratio: 312 / 420; }

/* ---------- 04 Highlights ------------------------------------------ */
.hl-intro .t-heading { white-space: pre-line; }
.hl-intro__text { white-space: pre-line; max-width: 672px; }
.hl-theme__lead { margin-top: 8px; color: var(--c-muted); }
.hl-items li {
  display: grid; grid-template-columns: 400px 1fr; gap: 24px;
  padding: 10px 0; border-bottom: var(--line) solid var(--c-accent-soft);
}
.hl-intro .cell, .hl-theme .cell { min-width: 0; }
.hl-theme .cell:first-child { display: grid; gap: 8px; align-content: start; }
.hl-items li[data-slide] { cursor: pointer; position: relative; transition: background-color .2s; }
.hl-items li[data-slide]::before {             /* 사진이 있는 항목 표시 */
  content: ""; position: absolute; left: -14px; top: 18px; width: 6px; height: 6px; background: var(--c-accent-soft);
}
.hl-items li[data-slide]:hover { background: color-mix(in srgb, var(--c-accent-soft) 35%, transparent); }
.hl-items li.is-current::before { background: var(--c-accent); }
.hl-items li.is-current .t-title { color: var(--c-accent-text); }
.hl-items li .t-caption { color: var(--c-accent-text); padding-top: 3px; }

/* ---------- 05 Information ----------------------------------------- */
.info-blocks .org .t-title { color: var(--c-accent-text); }
.org__tag { margin-top: 8px; font: 600 20px/1.4 var(--font-kr); letter-spacing: -0.01em; }
.org__desc { color: var(--c-muted); }
.aside-stats { display: grid; gap: 14px; align-content: start; }
.alumni-school { border-bottom: var(--line) solid var(--c-line); }
.alumni-school__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px var(--gutter); background: var(--c-accent-soft);
}
.alumni-school__head small { color: var(--c-accent-text); font: 500 var(--fs-caption)/1 var(--font-kr); }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip b { font-weight: 600; }
.map-chip { padding: 4px 10px; background: var(--c-paper); border: var(--line) solid var(--c-accent-soft); font: 500 var(--fs-caption)/1.5 var(--font-kr); }
.map-chip.is-hit { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* 푸터 경계는 푸터의 상단 선 하나로 표시합니다. */
main > .grid:last-child,
main > .glance:last-child,
main > .list-block:last-child > .alumni-school:last-child { border-bottom: 0; }

/* ---------- 반응형 -------------------------------------------------- */
@media (max-width: 1024px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance__cell:nth-child(4n) { border-right: var(--line) solid var(--c-line); }
  .glance__cell:nth-child(2n) { border-right: 0; }
  .glance__cell:nth-child(n+5) { border-bottom: var(--line) solid var(--c-line); }
  .glance__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .glance__cell::before { display: none; }
  .hl-items li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .hero__title { left: 14px; top: 16px; }
  .hero__title .t-display-xl { font-size: var(--fs-display-l); line-height: var(--lh-display-l); }
  .hero__edition { margin-top: 8px; font-size: 24px; }
  .hero__eyebrow { display: none; }
  .hero__hint { left: 16px; }
  .glance__cell { min-height: 132px; padding: 18px 16px; }
  .glance .stat__num { font-size: 28px; }
  .glance .stat__label { font-size: 14px; }

  .history { padding: 24px 16px 0; }
  .history__strip { margin-top: 88px; }
  .year-strip { grid-template-columns: repeat(37, minmax(0, 1fr)); gap: 0; padding: 0; }
  .year-strip button { aspect-ratio: auto; height: 18px; box-shadow: inset -1px 0 var(--c-ground); }
  .year-strip__labels span:nth-child(even) { display: none; }
  .schools .cell { min-height: 0; }
  .schools .t-label-en { margin-bottom: 12px; }
  .vision .cell, .vision__goal { display: grid; gap: 8px; align-content: start; }
.vision .t-heading { margin-top: 8px; }
.message .cell:first-child { gap: 24px; }
  .portrait { order: -1; }
}