/* UNOC 2028 B안 — 약속이 모이는 바다
 * 색 · 글꼴 · 간격 · 모서리 · 버튼 · 글라스는 EpicSemtle DS 2026 토큰을 그대로 쓴다.
 * DS에 없는 연출용 값(대형 연도 숫자, 빛 입자 크기 등)은 아래 '연출 전용' 주석으로 표시한다. */

/* 연출 고정색: 사진 위 · 어두운 장면처럼 모드와 무관해야 하는 색은 DS 팔레트(Light 기준) 값을 고정해 쓴다.
 * DS 다크 모드는 팔레트 단계까지 반전하므로 var(--color-blue-950)를 쓰면 다크 범위에서 밝아진다. */
:root {
  --gold: #ffd2af;      /* amber-200 · 윤슬 금빛 */
  --gold-deep: #ff9d43; /* amber-400 */
  --deep: #001226;      /* blue-950 · 깊은 바다 */
  --deep-2: #001f40;    /* blue-900 */
  --deep-3: #003166;    /* blue-800 */
  --deep-4: #004a99;    /* blue-700 */
  --sea-1: #47bbf1;     /* sky-400 */
  --sea-2: #0063cc;     /* blue-600 */
}
:root, [data-theme] {
  --bg: var(--color-brand-role-bg-gray-page);
  --bg-2: var(--color-brand-role-bg-gray-layer-2);
  --ink: var(--color-layout-text-title);
  --body: var(--color-layout-text-body);
  --cap: var(--color-layout-text-caption);
  --line: var(--color-layout-stroke-subtle);
  --brand: var(--color-brand-role-fill);
  --brand-text: var(--color-brand-role-text);
  --f-title: var(--font-family-title);
  --f-base: var(--font-family-base);
  --f-num: var(--font-family-numeric);
  --wrap: var(--responsive-page-content-max-width);
  --pad: var(--responsive-page-min-gutter);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
body {
  background: var(--bg); color: var(--body);
  font-family: var(--f-base); font-size: var(--responsive-font-size-body-16); line-height: var(--responsive-line-height-body-16);
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-brand-role-input-stroke-focus); outline-offset: 3px; border-radius: var(--corner-2xs); }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: var(--responsive-spacing-16); top: -100px; z-index: 100; background: var(--bg); color: var(--ink); padding: var(--responsive-spacing-8) var(--responsive-spacing-16); border-radius: var(--corner-m); }
.skip:focus { top: var(--responsive-spacing-16); }

/* 공통 제목 — Type Set(Section) 크기 토큰 + 제목 서체 */
.cap { font-size: var(--responsive-font-size-label); line-height: var(--responsive-line-height-body-16); color: var(--brand-text); letter-spacing: .02em; margin-bottom: var(--responsive-spacing-16); display: inline-flex; align-items: center; gap: var(--responsive-spacing-8); }
.cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 0 4px var(--color-amber-a12, rgb(240 135 15 / .12)); }
.sec-title { font-family: var(--f-title); font-weight: 400; color: var(--ink); font-size: var(--responsive-font-size-display-small); line-height: var(--responsive-line-height-display-small); letter-spacing: -.01em; }
.sec-title b { font-weight: 800; }
.sec-body { margin-top: var(--responsive-page-title-gap-medium); font-size: var(--responsive-font-size-description-20); line-height: var(--responsive-line-height-description-20); font-weight: 300; color: var(--body); max-width: var(--responsive-page-content-reading); }

/* ═══ 헤더 ═══ */
.gnb { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--ink); transition: color .4s var(--ease); }
.gnb__in { height: 72px; display: flex; align-items: center; gap: var(--responsive-spacing-32); padding-inline: var(--pad); max-width: 1600px; margin: 0 auto; position: relative; }
.gnb::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease);
  background: var(--color-glass-strong-surface); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 -1px 0 var(--line); }
.gnb.is-solid::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: var(--responsive-spacing-12); }
.brand__sym { position: relative; width: 40px; height: 40px; flex: none; }
.brand__sym img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.brand__sym .sym-w { opacity: 0; }
[data-theme="dark"] .brand__sym .sym-w { opacity: 1; }
[data-theme="dark"] .brand__sym .sym-c { opacity: 0; }
.brand__txt { display: grid; line-height: 1.15; }
.brand__txt b { font-family: var(--f-title); font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.brand__txt small { font-size: 11px; font-weight: 500; opacity: .72; white-space: nowrap; }
.gnb__nav { display: flex; gap: var(--responsive-spacing-32); margin-left: auto; font-size: var(--responsive-font-size-body-16); font-weight: 500; }
.gnb__nav a { position: relative; padding-block: var(--responsive-spacing-8); }
.gnb__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.gnb__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.gnb__util { display: flex; align-items: center; gap: var(--responsive-spacing-12); margin-left: auto; }
.gnb__nav + .gnb__util { margin-left: 0; }
.lang { display: inline-flex; font-family: var(--f-num); font-size: 13px; font-weight: 600; gap: 2px; }
.lang a { padding: 6px 8px; opacity: .55; border-radius: var(--corner-xs); }
.lang a[aria-current] { opacity: 1; }
.menu-btn { display: none; }

/* 진행 레일 */
.rail { position: fixed; right: var(--responsive-spacing-24); top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: var(--responsive-spacing-16); }
.rail a { position: relative; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .3; color: var(--ink); transition: opacity .3s, transform .3s var(--ease), background .3s; }
.rail a.on { opacity: 1; transform: scale(1.35); background: var(--gold-deep); box-shadow: 0 0 12px var(--gold); }
.rail a span { position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font-size: var(--responsive-font-size-caption); opacity: 0; pointer-events: none; transition: .3s var(--ease); color: inherit; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* ═══ 01 히어로 ═══ */
.hero { position: relative; height: 420vh; background: var(--deep); color: var(--ink); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.h-sky { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 110%, var(--deep-2) 0%, var(--deep) 55%, var(--color-gray-950) 100%); }
.h-glint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; mix-blend-mode: screen; filter: saturate(.8); }
.h-lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-coast { position: absolute; inset: 0; visibility: hidden; --hy: 40%; --r: 0px; --f: 0px;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--hy) - var(--r) - var(--f)), #000 calc(var(--hy) - var(--r)), #000 calc(var(--hy) + var(--r)), transparent calc(var(--hy) + var(--r) + var(--f)));
          mask-image: linear-gradient(180deg, transparent calc(var(--hy) - var(--r) - var(--f)), #000 calc(var(--hy) - var(--r)), #000 calc(var(--hy) + var(--r)), transparent calc(var(--hy) + var(--r) + var(--f))); }
/* 바다가 펼쳐지기 직전 빛나는 수평선 한 줄 */
.h-dawn { position: absolute; left: 0; right: 0; height: 2px; top: 40%; opacity: 0; pointer-events: none; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--gold) 18%, #fff 50%, var(--gold) 82%, transparent);
  box-shadow: 0 0 24px 4px rgb(255 186 130 / .55), 0 0 80px 18px rgb(255 186 130 / .18); }
.h-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: 50% 50%; }
.h-shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 18 38 / .62) 0%, rgb(0 18 38 / .28) 32%, transparent 52%); }
.h-veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 46% 34% at 50% 60%, rgb(0 18 38 / .5), transparent 72%), linear-gradient(0deg, rgb(0 18 38 / .82) 0%, rgb(0 18 38 / .55) 34%, rgb(0 18 38 / .12) 62%, transparent 78%); }

.h-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding-inline: var(--pad); pointer-events: none; }
.h-kicker { font-size: var(--responsive-font-size-body-16); color: var(--gold); letter-spacing: .12em; margin-bottom: var(--responsive-spacing-24); opacity: 0; }
.h-line { font-family: var(--f-title); font-weight: 300; font-size: var(--responsive-font-size-hero); line-height: var(--responsive-line-height-hero); letter-spacing: -.02em; }
.h-line span { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(10px); }
.h-copy--a .h-line span:last-child { font-weight: 800; }
.h-copy--b { opacity: 1; }
.h-copy--a { top: 60%; }
.h-copy--b { top: 62%; }
.h-line--b { font-size: var(--responsive-font-size-hero-small); line-height: var(--responsive-line-height-hero-small); }
.h-line--gold { color: var(--gold); font-weight: 700; }

.h-final { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: center; padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2)); pointer-events: none; }
.h-final > * { pointer-events: auto; }
.h-final__kicker { font-size: var(--responsive-font-size-description-20); color: var(--gold); margin-bottom: var(--responsive-spacing-16); }
.h-final__title { font-family: var(--f-title); font-weight: 300; font-size: calc(var(--responsive-font-size-hero) * 1.45); /* 연출 전용: Hero 토큰 × 1.45 */ line-height: 1.04; letter-spacing: -.03em; }
.h-final__title .w { display: inline-block; }
.h-final__title .gold { color: var(--gold); font-weight: 800; }
.h-final__body { margin-top: var(--responsive-spacing-24); max-width: 560px; font-size: var(--responsive-font-size-description-18); line-height: var(--responsive-line-height-description-18); font-weight: 300; color: var(--body); }
.h-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--responsive-spacing-12); margin-top: var(--responsive-spacing-32); }
.h-facts li { display: inline-flex; align-items: center; gap: var(--responsive-spacing-8); padding: var(--responsive-spacing-12) var(--responsive-spacing-16); border-radius: var(--corner-l);
  background: var(--color-white-a10); border: 1px solid var(--color-white-a20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: var(--responsive-font-size-body-15); }
.h-facts li > span { color: var(--gold); font-size: 18px; }
.h-facts b { font-weight: 600; margin-right: 4px; color: var(--ink); }
.h-facts em { font-style: normal; font-size: var(--responsive-font-size-caption); color: var(--cap); margin-left: 6px; }
.h-cta { display: flex; flex-wrap: wrap; gap: var(--responsive-spacing-12); margin-top: var(--responsive-spacing-40); }

.h-hint { position: absolute; left: 50%; bottom: var(--responsive-spacing-32); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-family: var(--f-num); font-size: 11px; letter-spacing: .3em; color: var(--color-white-a50); }
.h-hint i { width: 1px; height: 48px; background: linear-gradient(var(--gold), transparent); animation: hint 2s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ═══ 02 누가 약속하나요: 화면을 고정한 채 카드가 한 장씩 나타난다 ═══ */
.people { position: relative; background: var(--bg); }
.people__pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--responsive-spacing-40); padding-top: 72px; padding-bottom: var(--responsive-spacing-32); }
.people .sec-body { margin-top: var(--responsive-spacing-16); }
.people__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--responsive-page-item-gap); padding-top: 56px; }
.people__line { position: absolute; left: 50%; top: 0; width: 100vw; margin-left: -50vw; height: 56px; overflow: visible; pointer-events: none; }  /* 금빛 선은 브라우저 좌우 끝까지 */
.people__line path { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gold)); }
.pcard { position: relative; min-width: 0; }
.pcard:nth-child(odd) { margin-top: 36px; }   /* 첫 자식은 svg라 카드 2·4번이 아래로: 물결 리듬 */
.pcard__dot { position: absolute; left: 50%; top: -46px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--line); transition: background .5s, box-shadow .5s, transform .5s var(--ease); z-index: 2; }
.pcard:nth-child(odd) .pcard__dot { top: -56px; }
.pcard.lit .pcard__dot { background: var(--gold-deep); box-shadow: 0 0 0 6px rgb(255 186 130 / .25), 0 0 24px 4px var(--gold); transform: scale(1.15); }
.pcard figure { position: relative; aspect-ratio: 4 / 5; border-radius: var(--corner-2xl); overflow: hidden; background: var(--bg-2); }
.pcard figure img { width: 100%; height: 100%; object-fit: cover; }
.pcard:nth-of-type(1) figure img { object-position: 50% 30%; }
.pcard--me figure img { object-position: 88% 50%; }
.pcard .credit { position: absolute; right: 10px; bottom: 8px; font-size: var(--responsive-font-size-micro); color: #fff; background: rgb(0 0 0 / .4); padding: 2px 8px; border-radius: var(--corner-xs); }
.pcard__body { padding-top: var(--responsive-spacing-16); }
.pcard__no { font-family: var(--f-num); font-weight: 600; font-size: var(--responsive-font-size-label); color: var(--gold-deep); letter-spacing: .08em; }
.pcard__body h3 { margin-top: 4px; font-family: var(--f-title); font-weight: 800; color: var(--ink); font-size: var(--responsive-font-size-heading-3); line-height: var(--responsive-line-height-heading-3); }
.pcard__body p { margin-top: 6px; font-size: var(--responsive-font-size-body-15); line-height: var(--responsive-line-height-body-15); color: var(--body); font-weight: 300; }
.pcard--me figure { outline: 2px solid var(--brand); outline-offset: 5px; }
@media (max-width: 1199px) { .people__row { gap: var(--responsive-spacing-16); } }
@media (max-width: 767px) {
  .people__pin { min-height: 0; padding-block: var(--responsive-page-section-gap-medium); }
  .people__row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; row-gap: var(--responsive-spacing-32); }
  .people__line, .pcard__dot { display: none; }
  .pcard:nth-child(odd) { margin-top: 0; }
  .pcard--me { grid-column: 1 / 3; } .pcard--me figure { aspect-ratio: 16 / 9; }
}
/* ═══ 03 아카이브 ═══ */
.archive { background: var(--bg-2); padding-block: var(--responsive-page-section-gap-large); }
.archive__head { margin-bottom: var(--responsive-page-section-gap-medium); }
.archive__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--responsive-spacing-64); }
.yr { position: sticky; top: 22vh; align-self: start; }
.yr__num { display: flex; font-family: var(--f-num); font-weight: 700; color: var(--ink);
  font-size: clamp(96px, 13vw, 200px); /* 연출 전용: DS 미등록 대형 숫자 */ line-height: 1; letter-spacing: -.04em; }
.yr__col { display: inline-block; height: 1em; overflow: hidden; }
.yr__col > span { display: flex; flex-direction: column; transition: transform .9s var(--ease); }
.yr__col > span i { font-style: normal; height: 1em; }
.yr__col.hl { color: var(--brand-text); }
.yr__lab { margin-top: var(--responsive-spacing-16); font-size: var(--responsive-font-size-heading-4); line-height: var(--responsive-line-height-heading-4); color: var(--ink); font-weight: 500; }
.yr__bar { margin-top: var(--responsive-spacing-32); height: 2px; background: var(--line); position: relative; max-width: 360px; border-radius: 2px; overflow: hidden; }
.yr__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand), var(--gold-deep)); transform: scaleX(0); transform-origin: left; }
.arc-list { display: grid; gap: var(--responsive-page-section-gap-medium); }
.arc { background: var(--bg); border-radius: var(--corner-3xl); overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--color-glass-elevation-shadow-5); }
.arc__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.arc__img img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.arc__img figcaption { position: absolute; right: var(--responsive-spacing-12); bottom: var(--responsive-spacing-12); font-size: var(--responsive-font-size-micro); color: var(--color-white-a90, #fff); background: rgb(0 0 0 / .4); padding: 2px 8px; border-radius: var(--corner-xs); }
.arc__body { padding: var(--responsive-spacing-40); }
.arc__meta { display: flex; flex-wrap: wrap; gap: var(--responsive-spacing-8); margin-bottom: var(--responsive-spacing-16); }
.arc__meta span { font-size: var(--responsive-font-size-label); color: var(--body); padding: 4px 12px; border-radius: var(--corner-full); background: var(--color-layout-subtle-gray-default); }
.arc__decl { font-family: var(--f-title); font-weight: 700; color: var(--ink); font-size: var(--responsive-font-size-heading-1); line-height: var(--responsive-line-height-heading-1); letter-spacing: -.01em; }
.arc__decl .wd { opacity: .16; transition: none; }
.arc__note { margin-block: var(--responsive-spacing-16) var(--responsive-spacing-24); font-size: var(--responsive-font-size-body-16); color: var(--body); font-weight: 300; }
.arc__body .epic-button--text { margin-left: 0; }
.arc--next { background: linear-gradient(160deg, var(--deep-2), var(--deep)); }
.arc--next .arc__decl .wd { opacity: .2; }
.arc__img--next { background: radial-gradient(80% 90% at 50% 100%, var(--deep-3), var(--deep) 70%); }
.arc__img--next canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc__next { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--f-title); font-weight: 800; font-size: var(--responsive-font-size-heading-1); color: var(--gold); letter-spacing: .02em; text-shadow: 0 0 30px rgb(255 186 130 / .6); }

/* ═══ 04 공동개최 ═══ */
.cohost { position: relative; height: 260vh; background: var(--deep); color: var(--ink); }
.cohost__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(72px + var(--responsive-spacing-32)) var(--responsive-spacing-48); }
.cohost__head { text-align: center; padding-inline: var(--pad); }
.cohost .cap { color: var(--gold); }
.cohost .sec-body { margin-inline: auto; font-size: var(--responsive-font-size-description-18); }
.cohost__stage { position: relative; margin: var(--responsive-spacing-40) auto var(--responsive-spacing-32); width: min(92vw, 1400px); }
.shore { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.shore--kr { left: 0; border-radius: var(--corner-3xl) 0 0 var(--corner-3xl); }
.shore--cl { right: 0; border-radius: 0 var(--corner-3xl) var(--corner-3xl) 0; background: linear-gradient(200deg, var(--deep-4) 0%, var(--deep-2) 55%, var(--deep) 100%); }
.shore--kr img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.shore__ph { position: absolute; inset: 0; }
.shore__ph i { position: absolute; left: -20%; right: -20%; height: 40%; border-radius: 50%; border-top: 1px solid var(--color-white-a20); animation: drift 9s ease-in-out infinite; }
.shore__ph i:nth-child(1) { top: 56%; } .shore__ph i:nth-child(2) { top: 64%; animation-delay: -3s; opacity: .7; } .shore__ph i:nth-child(3) { top: 72%; animation-delay: -6s; opacity: .45; }
@keyframes drift { 50% { transform: translateX(6%) scaleY(1.2); } }
.shore__lab { position: absolute; bottom: var(--responsive-spacing-24); left: var(--responsive-spacing-24); display: grid; gap: 2px; font-size: var(--responsive-font-size-caption); color: var(--body); }
.shore--cl .shore__lab { left: auto; right: var(--responsive-spacing-24); text-align: right; }
.shore__lab b { font-family: var(--f-title); font-size: var(--responsive-font-size-heading-2); line-height: 1.2; color: var(--ink); }
.horizon { position: absolute; left: -4%; right: -4%; top: 48%; height: 2px; pointer-events: none; }
.horizon i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gold) 15%, #fff 50%, var(--gold) 85%, transparent); box-shadow: 0 0 18px 2px var(--gold); transform: scaleX(0); }
.pairs { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--responsive-spacing-8) var(--responsive-spacing-40); padding-inline: var(--pad); font-size: var(--responsive-font-size-body-16); color: var(--body); }
.pairs li { display: inline-flex; gap: var(--responsive-spacing-12); align-items: baseline; opacity: 0; transform: translateY(16px); }
.pairs b { font-family: var(--f-num); font-weight: 600; color: var(--cap); }
.pairs li.on { color: var(--ink); font-weight: 600; }
.pairs li.on b { color: var(--gold); }

/* ═══ 05 부산 ═══ */
.busan { background: var(--bg); padding-block: var(--responsive-page-section-gap-large); }
.busan__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-64); align-items: end; margin-bottom: var(--responsive-page-block-gap); }
.busan__head .sec-body { margin-top: 0; margin-bottom: var(--responsive-spacing-24); }
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 300px 300px; gap: var(--responsive-page-item-gap); }
.tile { position: relative; overflow: hidden; border-radius: var(--corner-2xl); clip-path: inset(18% 18% 18% 18% round var(--corner-3xl)); opacity: 0; background: var(--bg-2); }
.t1 { grid-row: 1 / 3; } .t2 { grid-column: 2 / 4; }
.tile__media { position: absolute; inset: -6%; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; animation: kb 18s ease-in-out infinite alternate; }
.t2 .tile__media img { animation-delay: -6s; } .t3 .tile__media img { animation-delay: -11s; } .t4 .tile__media img { animation-delay: -3s; }
@keyframes kb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(0 18 38 / .7)); transition: opacity .4s; }
.tile__txt { position: absolute; left: var(--responsive-spacing-24); bottom: var(--responsive-spacing-24); right: var(--responsive-spacing-24); z-index: 2; color: var(--color-layout-text-always-white); }
.tile__txt span { font-size: var(--responsive-font-size-label); color: var(--gold); }
.tile__txt h3 { font-family: var(--f-title); font-weight: 700; font-size: var(--responsive-font-size-heading-3); line-height: var(--responsive-line-height-heading-3); margin-top: 4px; }
.tile__badge { position: absolute; z-index: 2; right: var(--responsive-spacing-16); top: var(--responsive-spacing-16); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--corner-full); font-size: var(--responsive-font-size-caption); color: #fff; background: var(--color-white-a20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .9; }
.tile:hover .tile__media img { animation-play-state: paused; }
.tile:hover::after { opacity: .6; }

/* ═══ 06 공지 ═══ */
.notice { background: var(--bg-2); padding-block: var(--responsive-page-section-gap-large); }
.notice__head { display: flex; align-items: end; justify-content: space-between; gap: var(--responsive-spacing-24); margin-bottom: var(--responsive-page-block-gap); }
.ncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--responsive-page-card-gap); }
.ncard { position: relative; display: flex; flex-direction: column; gap: var(--responsive-spacing-12); padding: var(--responsive-spacing-32); min-height: 260px; background: var(--bg); border-radius: var(--corner-2xl); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; opacity: 0; transform: translateY(40px); }
.ncard:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px var(--color-glass-elevation-shadow-5); border-color: var(--color-brand-role-layout-stroke-default); }
.ncard__meta { display: flex; align-items: center; gap: var(--responsive-spacing-12); font-family: var(--f-num); font-size: var(--responsive-font-size-label); color: var(--cap); }
.ncard__meta em { font-style: normal; font-family: var(--f-base); color: var(--brand-text); background: var(--color-brand-role-subtle); padding: 2px 10px; border-radius: var(--corner-full); }
.ncard h3 { font-size: var(--responsive-font-size-heading-4); line-height: var(--responsive-line-height-heading-4); font-weight: 600; color: var(--ink); }
.ncard p { font-size: var(--responsive-font-size-body-15); line-height: var(--responsive-line-height-body-15); color: var(--body); font-weight: 300; }
.ncard__go { margin-top: auto; align-self: flex-end; transition: transform .45s var(--ease), background-color 120ms ease; }
.ncard:hover .ncard__go { transform: translateX(4px); background: var(--epic-button-bg-hover); }
.sample-note { margin-top: var(--responsive-spacing-16); font-size: var(--responsive-font-size-caption); color: var(--cap); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--responsive-spacing-8); margin-top: var(--responsive-page-block-gap); padding-top: var(--responsive-spacing-32); border-top: 1px solid var(--line); }
.links__lab { font-weight: 600; color: var(--ink); margin-right: var(--responsive-spacing-16); }

/* ═══ 07 클로징 ═══ */
.closing { position: relative; min-height: 110vh; display: flex; align-items: center; overflow: hidden; background: var(--deep); color: var(--ink); }
.closing__bg { position: absolute; inset: -10% 0; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.closing__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 18 38 / .72), rgb(0 18 38 / .2) 60%, transparent); }
.closing__lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing__in { position: relative; z-index: 2; }
.closing__title { font-family: var(--f-title); font-weight: 300; font-size: calc(var(--responsive-font-size-hero) * 1.25); /* 연출 전용 */ line-height: 1.08; letter-spacing: -.03em; display: grid; }
.closing__title .cl { display: block; overflow: hidden; }
.closing__title .gold { color: var(--gold); font-weight: 800; }
.closing__sub { margin-top: var(--responsive-spacing-24); font-size: var(--responsive-font-size-description-20); color: var(--body); }
.closing .h-cta { opacity: 1; transform: none; }

/* ═══ 푸터 ═══ */
.foot { background: var(--bg); color: var(--body); padding-block: var(--responsive-spacing-64) var(--responsive-spacing-48); border-top: 1px solid var(--line); }
.foot__top { display: flex; justify-content: space-between; align-items: center; gap: var(--responsive-spacing-24); padding-bottom: var(--responsive-spacing-32); border-bottom: 1px solid var(--line); color: var(--ink); }
.foot__nav { display: flex; gap: var(--responsive-spacing-32); font-weight: 500; }
.foot__mid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--responsive-spacing-16); padding-block: var(--responsive-spacing-24); font-size: var(--responsive-font-size-body-15); }
.foot__mid b { color: var(--ink); margin-right: var(--responsive-spacing-12); }
.foot__policy { display: flex; gap: var(--responsive-spacing-16); }
.foot__policy a:first-child { color: var(--ink); font-weight: 600; }
.foot__bot { display: grid; gap: 6px; font-size: var(--responsive-font-size-caption); color: var(--cap); }

/* ═══ 반응형 ═══ */
@media (max-width: 1199px) {
  .gnb__nav { display: none; }
  .gnb__nav + .gnb__util { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .archive__grid { grid-template-columns: 1fr; gap: var(--responsive-spacing-32); }
  .yr { position: sticky; top: 72px; z-index: 3; background: var(--bg-2); padding-block: var(--responsive-spacing-16); display: flex; align-items: end; gap: var(--responsive-spacing-24); }
  .yr__num { font-size: 72px; }
  .yr__bar { display: none; }
  .busan__head { grid-template-columns: 1fr; gap: var(--responsive-spacing-24); }
  .rail { display: none; }
}
@media (max-width: 767px) {
  .gnb__in { height: 60px; gap: var(--responsive-spacing-12); }
  .lang { display: none; }
  .brand__txt small { display: none; }
  .hero { height: 340vh; }
  .h-final__title { font-size: calc(var(--responsive-font-size-hero) * 1.3); }
  .h-facts li { width: 100%; }
  .cohost { height: 220vh; }
  .shore__lab b { font-size: var(--responsive-font-size-heading-4); }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; }
  .t1 { grid-row: auto; grid-column: 1 / 3; } .t2 { grid-column: auto; }
  .t4 { grid-column: 1 / 3; }
  .ncards { grid-template-columns: 1fr; }
  .notice__head { flex-direction: column; align-items: start; }
  .foot__top { flex-direction: column; align-items: start; }
  .foot__nav { gap: var(--responsive-spacing-16); flex-wrap: wrap; }
}

/* ═══ 움직임 줄이기: 같은 내용을 정적인 최종 구도로 ═══ */
.rm .hero { height: auto; }
.rm .hero__stage { position: relative; height: 100vh; }
.rm .h-copy, .rm .h-hint, .rm .h-lights, .rm .h-dawn { display: none; }
.rm .h-coast, .rm .h-shade, .rm .h-veil { opacity: 1; visibility: visible; -webkit-mask-image: none; mask-image: none; }
.rm .h-final * , .rm .h-final__title .w { opacity: 1 !important; transform: none !important; }
.rm .arc__decl .wd { opacity: 1; }
.rm .cohost { height: auto; } .rm .cohost__pin { position: relative; height: auto; min-height: 100vh; }
.rm .horizon i { transform: none; } .rm .pairs li { opacity: 1; transform: none; }
.rm .tile { clip-path: none; opacity: 1; } .rm .tile__media img, .rm .shore__ph i { animation: none; }
.rm .ncard { opacity: 1; transform: none; }

.rm .yr__col > span { transition: none; }

.yr__num { font-variant-numeric: tabular-nums; }

/* ═══ 히어로 D-Day 카운트다운: 상단 중앙 ═══ */
.dday { position: absolute; left: 0; right: 0; top: max(96px, 14vh); margin-inline: auto; width: max-content; z-index: 4; transform-origin: 50% 0;
  display: grid; justify-items: center; text-align: center; color: var(--ink); opacity: 0; pointer-events: none; }
.dday__lab { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-num); font-weight: 700; font-size: 13px; letter-spacing: .32em; color: var(--gold); }
.dday__lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 12px var(--gold); animation: blink 2s ease-in-out infinite; }
.dday__lab span { font-family: var(--f-base); font-weight: 400; font-size: 11px; letter-spacing: 0; color: var(--cap); padding: 3px 10px; border-radius: var(--corner-full); border: 1px solid rgb(255 255 255 / .18); }
@keyframes blink { 50% { opacity: .25; } }
.dday__big { display: flex; align-items: baseline; line-height: .9; margin-top: clamp(4px, 1vh, 12px); font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  filter: drop-shadow(0 6px 28px rgb(0 18 38 / .55)); }
.dday__d { font-size: clamp(40px, 7vh, 84px); font-weight: 500; color: var(--gold); margin-right: .06em; }
.dday__big b { font-size: clamp(96px, 18vh, 210px); /* 연출 전용: DS 미등록 대형 숫자 */ font-weight: 700;
  background: linear-gradient(180deg, #fff 30%, var(--gold) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dday__hms { display: flex; align-items: baseline; gap: 6px; margin-top: clamp(4px, 1vh, 10px); font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.dday__hms b { font-size: clamp(20px, 2.6vh, 28px); font-weight: 600; display: inline-block; min-width: 1.3em; }
.dday__hms b.tick { animation: tick .45s var(--ease); }
@keyframes tick { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.dday__hms small { font-family: var(--f-base); font-size: 12px; color: var(--cap); }
.dday__hms em { width: 1px; height: 14px; background: rgb(255 255 255 / .25); margin-inline: 10px; align-self: center; }
.dday__bar { width: 260px; margin-top: 12px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .12); overflow: hidden; }
.dday__bar i { display: block; height: 100%; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); transform-origin: center; transform: scaleX(0); transition: transform 1s linear; }
/* 마지막 장면: 타이틀 블록을 아래로 내려 D-Day와 겹치지 않게 */
.h-final { justify-content: flex-end; padding-bottom: clamp(32px, 7vh, 80px); }
.h-final__title { font-size: min(calc(var(--responsive-font-size-hero) * 1.45), 11vh); }
@media (max-width: 767px) {
  .dday { top: 88px; }
  .dday__lab span, .dday__bar { display: none; }
  .dday__lab { font-size: 11px; }
  .dday__d { font-size: 28px; } .dday__big b { font-size: 64px; }
  .dday__hms b { font-size: 16px; } .dday__hms em { margin-inline: 6px; }
  .h-final { padding-bottom: 32px; }
  .h-final__title { font-size: calc(var(--responsive-font-size-hero) * 1.15); }
  .h-facts { margin-top: var(--responsive-spacing-16); gap: 8px; }
  .h-facts li { padding: 10px 14px; }
  .h-cta { margin-top: var(--responsive-spacing-24); }
}
.rm .dday { opacity: 1; transform: none; }

/* 마지막 장면: D-Day와 같은 가운데 축으로 정렬 */
.h-final { align-items: center; text-align: center; }
.h-final__body { margin-inline: auto; max-width: 620px; }
.h-facts, .h-final .h-cta { justify-content: center; }
.h-final__title { white-space: nowrap; }
.m-br { display: none; }
@media (max-width: 767px) {
  .h-final__title { white-space: normal; }
  .m-br { display: inline; }
}

/* 정보 줄: 버튼처럼 보이지 않게 상자 없이 구분선으로만 나눈다 */
.h-facts { gap: 0; margin-top: var(--responsive-spacing-24); }
.h-facts li { padding: 0 var(--responsive-spacing-24); border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  gap: var(--responsive-spacing-12); font-size: var(--responsive-font-size-body-16); color: var(--ink); position: relative; }
.h-facts li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: rgb(255 255 255 / .28); }
.h-facts li > span { display: none; }
.h-facts b { font-weight: 500; margin-right: 0; font-size: var(--responsive-font-size-label); letter-spacing: .04em; color: var(--gold); }
@media (max-width: 767px) {
  .h-facts { flex-direction: column; gap: 6px; }
  .h-facts li { width: auto; padding: 0; justify-content: center; }
  .h-facts li + li::before { display: none; }
}

/* 마지막 장면: D-Day + 타이틀 묶음을 한 덩어리로 화면 세로 가운데에 */
.h-final { justify-content: center; padding-top: var(--dd-space, 180px); padding-bottom: 0; }
@media (max-width: 767px) { .h-final { padding-bottom: 0; } }
/* "D-"를 숫자 높이의 세로 가운데에 */
.dday__big { align-items: center; }
.dday__d { line-height: 1; transform: translateY(.06em); }

/* ═══ 섹션 제목 텍스트 모션: 한 줄씩 밀려 올라온다 ═══ */
.sec-title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.sec-title .ln__in { display: block; will-change: transform; }
.cohost .sec-title .ln { display: block; }

/* ═══ 선이 닿는 순간: 점이 튀어나오고 금빛 고리가 퍼진다 ═══ */
.pcard__dot { opacity: 0; transform: scale(0); background: var(--gold-deep);
  transition: opacity .2s, transform .6s cubic-bezier(.34, 1.8, .64, 1), box-shadow .6s; }
.pcard.lit .pcard__dot { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px rgb(255 186 130 / .28), 0 0 22px 4px var(--gold); }
.pcard__dot::before, .pcard__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-deep); opacity: 0; pointer-events: none; }
.pcard.lit .pcard__dot::before { animation: ring 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
.pcard.lit .pcard__dot::after { animation: ring 1.4s .12s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ring { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(4.2); } }
/* 카드 윗면에 닿는 빛 */
.pcard figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgb(255 210 175 / .55), rgb(255 210 175 / 0) 45%); }
.pcard.lit figure::after { animation: flash 1.2s ease-out forwards; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.rm .pcard__dot { opacity: 1; transform: none; }

/* 카드: 주체(작게) → 행동(크게) → 설명 */
.pcard__no { display: inline-block; font-family: var(--f-base); font-weight: 600; letter-spacing: .02em; }
.pcard__body h3 { font-size: var(--responsive-font-size-heading-5); line-height: var(--responsive-line-height-heading-5); margin-top: 6px; }
.pcard__body p { margin-top: 8px; }
.people .sec-body { max-width: 760px; }
.people__outro { font-family: var(--f-title); font-weight: 400; color: var(--ink); text-align: center; margin-top: var(--responsive-spacing-8);
  font-size: var(--responsive-font-size-heading-3); line-height: var(--responsive-line-height-heading-3); }
.people__outro b { font-weight: 800; color: var(--brand-text); }
@media (max-width: 767px) { .people__outro { text-align: left; margin-top: var(--responsive-spacing-24); } }
/* 사람 섹션: 넓은 화면은 제목(왼쪽) · 설명(오른쪽) 두 단, 세로가 짧은 화면은 카드 비율을 낮춘다 */
@media (min-width: 1200px) {
  .people__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--responsive-spacing-64); align-items: center; }
  .people__head .cap { grid-column: 1 / 3; justify-self: start; }
  .people__head .sec-body { margin: 0; padding: 0; }
}
.people__pin { gap: var(--responsive-spacing-32); }
@media (min-width: 768px) and (max-height: 1000px) {
  .pcard figure { aspect-ratio: 1 / 1; }
  .people__row { padding-top: 48px; }
  .pcard:nth-child(odd) { margin-top: 26px; }
  .people__outro { font-size: var(--responsive-font-size-heading-4); line-height: var(--responsive-line-height-heading-4); }
}

/* 4단계: 동사(크게) 위에 번호 · 부제(작게) */
.pcard__body h3 { font-size: var(--responsive-font-size-heading-3); line-height: var(--responsive-line-height-heading-3); }
@media (max-width: 767px) { .pcard--me { grid-column: auto; } }
/* 다크 모드 상단 바: 페이지 바탕에 가까운 짙은 반투명 */
/* 상단 바: 항상 페이지와 구분되는 유리 바. 밑으로 지나가는 내용은 블러로 비친다(밝은 · 다크 동일) */
.gnb::before { opacity: 1 !important; background: rgb(255 255 255 / .62);
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .08), 0 10px 28px -18px rgb(16 24 40 / .35); }
.gnb[data-theme="dark"]::before, html[data-theme="dark"] .gnb::before { background: rgb(54 54 54 / .5); /* DS gray-775(#363636) 반투명 */
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .12), 0 10px 28px -16px rgb(0 0 0 / .6); }

/* 카드 펼침: 둥근 창(figure)의 높이가 위에서 아래로 늘어난다. 자리(frame)는 미리 잡아 두고 사진은 원래 크기로 고정 */
.pcard__frame { position: relative; aspect-ratio: 4 / 5; }
.people .pcard figure { position: absolute; left: 0; right: 0; top: 0; height: 100%; aspect-ratio: auto; border-radius: var(--corner-2xl); overflow: hidden; clip-path: none !important; }
.people .pcard figure img { position: absolute; left: 0; top: 0; width: 100%; height: var(--fh, 100%); object-fit: cover; }
@media (min-width: 768px) and (max-height: 1000px) { .pcard__frame { aspect-ratio: 1 / 1; } }
@media (max-width: 767px) { .pcard__frame { aspect-ratio: 4 / 5; } }

/* ═══ 배경 오로라: 아주 연한 색 덩어리가 천천히 흐른다(연출 전용 색, DS 팔레트 Light 값) ═══ */
.people__pin { position: relative; }
.people__pin > *:not(.people__aura) { position: relative; z-index: 1; }
.people__aura { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; pointer-events: none; opacity: .3; }
.people__aura i { position: absolute; width: 56vw; height: 56vw; border-radius: 50%; filter: blur(90px); will-change: transform; }
.people__aura i:nth-child(1) { left: -12vw; top: -18vw; background: radial-gradient(circle, #8fd8ff 0%, transparent 68%); animation: aura1 26s ease-in-out infinite alternate; }  /* sky-250 */
.people__aura i:nth-child(2) { right: -14vw; top: -10vw; background: radial-gradient(circle, #b5c6ff 0%, transparent 68%); animation: aura2 31s ease-in-out infinite alternate; } /* indigo-200 */
.people__aura i:nth-child(3) { left: 18vw; bottom: -26vw; background: radial-gradient(circle, #ffd2af 0%, transparent 68%); animation: aura3 23s ease-in-out infinite alternate; } /* amber-200 */
.people__aura i:nth-child(4) { right: 4vw; bottom: -30vw; background: radial-gradient(circle, #a7e9d4 0%, transparent 68%); animation: aura4 35s ease-in-out infinite alternate; } /* 민트 */
@keyframes aura1 { to { transform: translate(22vw, 14vw) scale(1.15); } }
@keyframes aura2 { to { transform: translate(-18vw, 18vw) scale(.9); } }
@keyframes aura3 { to { transform: translate(16vw, -16vw) scale(1.2); } }
@keyframes aura4 { to { transform: translate(-24vw, -10vw) scale(1.1); } }
html[data-theme="dark"] .people__aura { opacity: .14; mix-blend-mode: screen; }
.rm .people__aura i { animation: none; }

/* ═══ 엔딩 문장: 크게, 한 자씩 솟아오르고 금빛 밑줄이 그어진다 ═══ */
.people__outro { font-size: clamp(30px, 5.4vh, 60px); /* 연출 전용: 화면 높이에 맞춘 크기 */ line-height: 1.25; letter-spacing: -.02em; margin-top: var(--responsive-spacing-16); }
.people__outro .o1 { font-weight: 300; }
.people__outro .o2 { position: relative; font-weight: 800; color: var(--brand-text); white-space: nowrap; }
.people__outro .o2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .09em; border-radius: 1em;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, rgb(255 210 175 / 0)); transform-origin: left; transform: scaleX(var(--u, 0)); box-shadow: 0 0 18px rgb(255 186 130 / .6); }
.people__outro .ch { display: inline-block; will-change: transform; }
@media (min-width: 768px) and (max-height: 1000px) { .people__outro { font-size: clamp(28px, 4.6vh, 44px); } }
@media (max-width: 767px) { .people__outro .o2 { white-space: normal; } }
.rm .people__outro .o2 { --u: 1; }
/* 세로가 짧은 화면: 카드 사진을 가로형으로 낮춰 제목 위아래 여유 확보 */
@media (min-width: 768px) and (max-height: 1000px) { .pcard__frame { aspect-ratio: 5 / 4; } }

/* ═══ 엔딩 장면: 카드가 물러난 뒤 화면 한가운데에 문장이 혼자 솟아오른다 ═══ */
.people__outro .o2::after { content: none; }
.people__outro .o2 { display: inline-block; }
.o2__line { position: absolute; left: 0; right: 0; bottom: -.12em; height: .07em; border-radius: 1em; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 65%, rgb(255 210 175 / 0)); box-shadow: 0 0 20px rgb(255 186 130 / .65); }
@media (min-width: 768px) {
  .people__outro { position: absolute !important; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2 !important; pointer-events: none;
    display: grid; justify-items: center; gap: .2em; font-size: clamp(40px, 7.4vh, 92px); /* 연출 전용 */ line-height: 1.15; }
  .people__outro .o1 { font-size: .5em; color: var(--body); letter-spacing: 0; }
}
@media (min-width: 768px) and (max-height: 1000px) { .people__outro { font-size: clamp(36px, 7vh, 64px); } }
.rm .o2__line { transform: none; }
/* 밑줄 끝: 선과 빛 번짐이 함께 투명해지며 사라진다 */
.o2__line { box-shadow: none; filter: drop-shadow(0 0 10px rgb(255 186 130 / .7));
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); }

/* ═══ 아카이브 연도: 숫자가 잘리지 않게 창 높이만 넉넉히(겹침 · 그림자 없음) ═══ */
.yr__num { --lh: 1.12em; }
.yr__col { height: var(--lh); }
.yr__col > span i { height: var(--lh); line-height: var(--lh); display: block; }


/* 상단 바 콘텐츠도 본문과 같은 1216px 폭(에셈DS --responsive-page-content-max-width)에 맞춘다 */
.gnb__in { max-width: calc(var(--wrap) + var(--pad) * 2); }
/* 연도 숫자: 글자 자체의 왼쪽 여백만큼 당겨 아래 글과 왼쪽 선을 맞춘다 */
.yr__num { margin-left: -.055em; }

/* 아카이브: 카드 폭을 줄이고(오른쪽 끝은 본문 끝에 맞춤), 연도 아래 라인은 연도 숫자 길이와 같게 */
@media (min-width: 1200px) {
  .archive__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .yr { width: max-content; display: grid; }
  .yr__bar { max-width: none; width: auto; margin-left: 0; }
}

/* 연도 롤러 창을 넉넉히(1.4em): Safari에서 글자 위쪽이 창에 걸려 잘리지 않게. 늘어난 높이는 바깥 여백으로 상쇄 */
.yr__num { --lh: 1.4em; margin-block: -.2em; }

/* 연도 크기 줄이고, 카드는 넓힌다. 연도는 2028 카드 윗선과 만나는 순간까지만 화면에 붙어 있다 */
.yr__num { font-size: clamp(80px, 8.6vw, 150px); }
@media (min-width: 1200px) {
  .archive__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
  .yr-wrap { align-self: start; }
}

/* ═══ 아카이브 카드 쌓기: 카드가 연도와 같은 높이(22vh)에 멈추고, 다음 카드가 위를 덮는다 ═══ */
@media (min-width: 1200px) {
  .arc { position: sticky; top: 22vh; transform-origin: 50% 0; }
  .arc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--dim, 0) * .7); pointer-events: none; z-index: 3; }
}

/* 연도 카운트: 다음 카드가 올라오는 동안 회색으로 빠르게 카운트, 높이가 맞으면 원래 색 */
.yr__num { transition: color .35s var(--ease); }
.yr__num.counting { color: var(--color-layout-text-disabled); }
.yr__num.counting .yr__col.hl { color: var(--color-layout-text-disabled); }
.yr__num.counting .yr__col > span { transition-duration: .22s; }

/* 카드 사이를 넓혀, 연도와 카드가 맞은 상태로 한 번 스크롤만큼 머문 뒤 다음 카드가 올라온다 */
@media (min-width: 1200px) { .arc-list { gap: 45vh; } }

/* 2028 카드 사진: 아래쪽이 카드의 남색으로 자연스럽게 이어진다 */
.arc__img--next { background: var(--deep); }
.arc__img--next img { transform-origin: 50% 100%; }
.arc__img--next::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 18 38 / 0) 45%, rgb(0 18 38 / .55) 80%, var(--deep-2) 100%); }

/* ── 공동개최: 두 해안 사진이 살아 있게 ── */
.shore__img { position: absolute; inset: 0; will-change: transform; }
.shore__img img { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; animation: shoreDrift 16s ease-in-out infinite alternate; }
.shore--kr .shore__img img { object-position: 70% 50%; }
.shore--cl .shore__img img { object-position: 35% 50%; animation-direction: alternate-reverse; }
@keyframes shoreDrift { from { translate: -1.6% .4%; } to { translate: 1.6% -.6%; } }
/* 바다 부분 물빛 반짝임: 두 겹이 다른 속도로 흘러 반짝임이 깜박인다 */
.shore__glint { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: url(../img/glint.webp) 0% 0% / 220% auto no-repeat, url(../img/glint.webp) 100% 60% / 170% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%);
  animation: glintFlow 11s linear infinite, glintPulse 3.4s ease-in-out infinite alternate; }
.shore--cl .shore__glint { animation-duration: 13s, 4.1s; animation-direction: reverse, alternate; }
@keyframes glintFlow { from { background-position: 0% 0%, 100% 60%; } to { background-position: 100% 40%, 0% 20%; } }
@keyframes glintPulse { from { opacity: .32; } to { opacity: .6; } }
/* 수평선이 이어질 때 지나가는 금빛 */
.cohost__sheen { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: var(--corner-3xl); opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 35%, rgb(255 210 175 / .0) 40%, rgb(255 210 175 / .35) 50%, rgb(255 210 175 / 0) 60%, transparent 65%); }
.cohost__stage { overflow: visible; }
.shore__lab { z-index: 3; }
.rm .shore__img img, .rm .shore__glint { animation: none; }

/* DS README 기준: Text 버튼은 호버 시 글자색(fg-hover)만 바뀌고 배경은 깔지 않는다(패키지 button.css가 배경까지 깔아 바로잡음) */
.epic-button--text:not(.epic-button--icon):hover,
.epic-button--text:not(.epic-button--icon):active { background: transparent; }

/* ── 공동개최: 태평양의 양 끝을 잇는 금빛 항로 ── */
.cohost__stage { display: grid; place-items: center; min-height: 0; margin-block: var(--responsive-spacing-24) var(--responsive-spacing-24); width: min(92vw, 1400px); }
.pac { position: relative; aspect-ratio: 2050 / 1000; width: min(92vw, 1400px, calc((100svh - 400px) * 2.05)); }
.pac__dots, .pac__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pac__dots { opacity: 0; filter: opacity(.2); }
.pac__svg { overflow: visible; }
.pac__eq line { stroke: rgb(255 255 255 / .22); stroke-width: 2; stroke-dasharray: 4 12; transition: stroke .5s, stroke-width .5s; }
.pac__eq text { fill: rgb(255 255 255 / .45); font-size: 22px; font-family: var(--f-body, inherit); letter-spacing: .1em; }
.pac__eq.lit line { stroke: var(--gold); stroke-width: 3; }
.pac__ocean { fill: rgb(255 255 255 / .1); font-family: var(--f-title); font-weight: 700; font-size: 84px; letter-spacing: .5em; }
.pac__ocean-en { fill: rgb(255 255 255 / .14); font-family: var(--f-num, inherit); font-size: 20px; letter-spacing: .6em; }
.pac__route { fill: none; stroke: url(#pacGold); stroke-width: 4; stroke-linecap: round; }
.pac__route-glow { fill: none; stroke: #ffb37a; stroke-width: 12; opacity: .45; }
.pac__head { fill: #fff; filter: drop-shadow(0 0 10px #ffd2af) drop-shadow(0 0 22px #ff9d43); opacity: 0; }
/* 도착 후: 항로 위로 빛이 계속 흐른다 */
.pac__pulse { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 2400; stroke-dashoffset: 2460; opacity: 0; filter: drop-shadow(0 0 6px #ffd2af); }
.pac.arrived .pac__pulse { opacity: .9; animation: pacPulse 4.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pacPulse { from { stroke-dashoffset: 2460; } to { stroke-dashoffset: 0; } }
.pac__pt { transform-box: fill-box; transform-origin: center; opacity: 0; }
.pac__pt circle { fill: var(--gold); }
.pac__pt .ring { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pacRing 2.6s ease-out infinite; }
@keyframes pacRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
/* 양 끝의 해안 사진 카드 */
.pcard2 { position: absolute; width: 21%; margin: 0; border-radius: var(--corner-2xl); overflow: hidden; background: var(--deep-2);
  box-shadow: 0 24px 60px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 210 175 / .18); opacity: 0; }
.pcard2--kr { left: 17%; top: 22%; }
.pcard2--cl { left: 66.5%; top: 41%; }
.pcard2__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pcard2__img img { position: absolute; left: -4%; top: -4%; width: 108%; height: 116%; max-width: none; object-fit: cover; animation: shoreDrift 16s ease-in-out infinite alternate; }
.pcard2--kr .pcard2__img img { object-position: 75% 50%; }
.pcard2--cl .pcard2__img img { object-position: 40% 50%; animation-direction: alternate-reverse; }
.pcard2 figcaption { display: grid; gap: 2px; padding: var(--responsive-spacing-12) var(--responsive-spacing-16) var(--responsive-spacing-16); }
.pcard2 figcaption small { font-size: var(--responsive-font-size-micro); color: var(--gold); letter-spacing: .04em; }
.pcard2 figcaption b { font-family: var(--f-title); font-size: var(--responsive-font-size-heading-4); color: var(--ink); line-height: 1.3; }
@media (max-width: 767px) {
  .pac { width: 100vw; }
  .pcard2 { width: 34%; border-radius: var(--corner-l); }
  .pcard2--kr { left: 6%; top: 30%; } .pcard2--cl { left: 58%; top: 18%; }
  .pac__ocean { font-size: 64px; }
}
.rm .pac__dots, .rm .pac__pt, .rm .pcard2 { opacity: 1; }
.rm .pcard2__img img, .rm .pac__pt .ring { animation: none; }

/* ── 공동개최 v3: 지도 박스는 제목 아래 그대로, 점 지도는 박스 밖 전 세계로 이어져 잘린 가장자리가 없다 ── */
.cohost__head, .pairs { position: relative; z-index: 4; }
.cohost__stage { position: relative; z-index: 1; }
.pac__dots { inset: auto; left: -38.049%; top: -34%; width: 176.098%; height: 166%; }
.pac__svg { z-index: 1; }
.pcard2 { z-index: 3; width: 20%; }
.pcard2--kr { left: 4.4%; top: 29%; }
.pcard2--cl { left: 73.2%; top: 33%; }
.pac__pulse { stroke-dasharray: 60 var(--plen, 2400); stroke-dashoffset: var(--plen, 2400); }
@keyframes pacPulse { from { stroke-dashoffset: var(--plen, 2400); } to { stroke-dashoffset: 0; } }
/* 제목 뒤로 지나가는 지도는 살짝 눌러 글자가 읽히게 */
.cohost__pin::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(40% 26% at 50% 20%, rgb(0 18 38 / .85), rgb(0 18 38 / 0) 100%); }
@media (max-width: 767px) {
  .pcard2 { width: 30%; }
  .pcard2--kr { left: 3%; top: 34%; } .pcard2--cl { left: 66%; top: 26%; }
}

/* ── 공동개최 성능: 필터 없이 같은 빛을 낸다(스크롤마다 다시 계산되는 번짐 필터 제거) ── */
.pac__dots { filter: none; will-change: opacity, transform; }
.pac__route-glow { filter: none; stroke-width: 16; opacity: .16; stroke-linecap: round; }
.pac__head { filter: none; fill: url(#pacHeadGlow); }
.pac__pulse { filter: none; }

/* ── 아카이브 → 공동개최: 2028에서 아카이브가 멈추고, 지도 섹션이 그 위로 덮으며 올라온다 ── */
.stack { position: relative; }
.stack > .archive { position: sticky; z-index: 0; }
.stack > .cohost { z-index: 1; box-shadow: 0 -8px 24px rgb(0 0 0 / .12); }

/* 별빛 → 지도 캔버스: 지도 상자 아래, 제목 아래 */
.pac__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pac__dots { will-change: opacity; }
.rm .pac__stars { display: none; }

/* 상하단 텍스트를 지도 쪽으로 모은다: 제목 묶음은 항로 시작점 바로 위까지, 연도 목록은 지도 끝 바로 아래로 */
.cohost__head { transform: translateY(9vh); }
.pairs { transform: translateY(-8vh); }
.cohost__pin::before { background: radial-gradient(40% 26% at 50% 30%, rgb(0 18 38 / .85), rgb(0 18 38 / 0) 100%); }
@media (max-width: 767px) { .cohost__head { transform: translateY(4vh); } .pairs { transform: translateY(-3vh); } }

/* 부산 머리말 정렬: 왼쪽(라벨+제목)과 오른쪽(본문+버튼)이 같은 윗선·아랫선을 쓴다.
   윗선 = 라벨 글자 윗선 = 본문 글자 윗선, 아랫선 = '부산' 글자 바닥 = 버튼 바닥. 행 높이는 왼쪽이 정한다 */
.busan__head { grid-template-columns: 1fr 1fr; column-gap: var(--responsive-spacing-64); align-items: stretch; }
.busan__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--responsive-spacing-16); }
.busan__main .cap { margin: 0; }
.busan__main .sec-title { margin: 0 0 -.27em; }          /* 마지막 줄 아래 줄간격·글자 아래 여백만큼 당겨 글자 바닥을 아랫선으로 */
.busan__side { height: 0; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--responsive-spacing-16); }
.busan__side .sec-body { margin: 0; text-box: trim-both cap alphabetic; }
.busan__side { padding-top: 6px; }   /* 라벨 줄 안에서 라벨 글자 윗선까지의 여백만큼 */
@media (max-width: 1023px) { .busan__head { grid-template-columns: 1fr; row-gap: var(--responsive-spacing-24); } .busan__side { height: auto; min-height: 0; } .busan__main .sec-title { margin-bottom: 0; } }

/* ── 부산: 왜 부산에서 열리나요 — 선정 이유 세 갈래 + 선정위원회 평가 ── */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--responsive-page-item-gap); counter-reset: none; }
.why__item { display: grid; align-content: start; gap: var(--responsive-spacing-8); }
.why__img { margin: 0 0 var(--responsive-spacing-16); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--corner-2xl); background: var(--bg-2); }
.why__img img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; display: block; will-change: transform; }
.why__no { display: flex; align-items: baseline; gap: var(--responsive-spacing-8); font-size: var(--responsive-font-size-label); color: var(--brand-text); letter-spacing: .02em; }
.why__no b { font-family: var(--f-num); font-weight: 600; color: var(--gold-deep); }
.why__item h3 { font-family: var(--f-title); font-weight: 700; font-size: var(--responsive-font-size-heading-3); line-height: var(--responsive-line-height-heading-3); color: var(--ink); }
.why__item h3 + p { font-size: var(--responsive-font-size-body-16); color: var(--body); font-weight: 300; }
.why__quote { margin: var(--responsive-page-block-gap) 0 0; text-align: center; display: grid; justify-items: center; gap: var(--responsive-spacing-16); }
.why__line { display: block; width: min(100%, 560px); height: 2px; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 20%, var(--gold) 50%, var(--gold-deep) 80%, transparent); }
.why__quote p { font-family: var(--f-title); font-weight: 600; font-size: var(--responsive-font-size-heading-4); line-height: 1.55; color: var(--ink); margin-top: var(--responsive-spacing-8); }
.why__quote cite { font-style: normal; font-size: var(--responsive-font-size-caption); color: var(--cap); }
@media (max-width: 767px) { .why { grid-template-columns: 1fr; gap: var(--responsive-spacing-40); } .why__quote p br { display: none; } }
.rm .why__img { clip-path: none; }

/* 인용: 데스크탑은 한 줄, 선은 콘텐츠 폭(1216) 전체 · 두께 1.5px */
.why__line { width: 100%; height: 1.5px; background: linear-gradient(90deg, rgb(255 157 67 / 0), var(--gold-deep) 6%, var(--gold) 50%, var(--gold-deep) 94%, rgb(255 157 67 / 0)); }
@media (min-width: 1024px) { .why__quote p { white-space: nowrap; } }

/* 공지 카드: 등장이 끝나면 제자리(초기 40px 아래 상태로 되돌아가지 않게), 호버만 살짝 뜬다 */
.ncard.is-in { opacity: 1; transform: none; }
.ncard.is-in:hover { transform: translateY(-6px); }

/* 공지 카드 화살표: DS Icon Tonal · Brand · M(40px)을 정원으로 */
.ncard__go.epic-button { border-radius: 50%; }