/* ==========================================================================
   공개 사이트 — 머리글 · 첫 화면 · 홈 구간 · 하단 · 하위 쪽 (시안 v3)
   색 · 크기 값은 tokens.css의 변수만 쓴다
   ========================================================================== */

/* ── 머리글 ── 처음 투명 → 스크롤하면 잉크 블러 */
.hd { position: fixed; inset: 0 0 auto; z-index: var(--z-header); color: #fff; border-bottom: var(--bw) solid transparent; transition: background var(--dur), border-color var(--dur); }
.is-scrolled .hd, .hd--solid { background: rgba(11, 11, 12, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, .14); }
.hd__in { display: flex; align-items: center; gap: var(--sp-10); height: 84px; }
.hd .logo { color: #fff; }
.hd__nav { display: flex; gap: var(--sp-7); font-size: 15px; font-weight: var(--fw-medium); color: rgba(255, 255, 255, .78); }
.hd__nav a { white-space: nowrap; padding: var(--sp-2) 0; }
.hd__nav a:hover, .hd__nav a[aria-current] { color: #fff; }
.hd__act { margin-left: auto; display: flex; gap: var(--sp-4); align-items: center; font-size: var(--fs-sm); }
.hd__link { color: rgba(255, 255, 255, .78); white-space: nowrap; }
.hd__link:hover { color: #fff; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 13px 9px; flex-direction: column; justify-content: space-between; color: #fff; }
.burger i { display: block; height: 2px; background: currentColor; }
@media (max-width: 1080px) { .hd__nav { gap: var(--sp-5); font-size: var(--fs-sm); } .hd__in { gap: var(--sp-6); } }
@media (max-width: 900px) {
  .hd__in { height: 64px; gap: var(--sp-3); }
  .hd__nav, .hd__act .hd__link, .hd__act .btn { display: none; }
  .burger { display: flex; }
}

/* 휴대폰 전체 메뉴 */
.mnav { position: fixed; inset: 0; z-index: var(--z-drawer); display: grid; grid-template-rows: auto 1fr auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mnav[hidden] { display: none; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mnav__list { align-self: center; display: grid; gap: var(--sp-1); }
.mnav__list a { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--line); font-size: 24px; font-weight: var(--fw-black); letter-spacing: -.02em; }
.mnav__list a span { font-size: var(--fs-2xs); color: var(--accent-text); }
.mnav__foot { display: grid; gap: var(--sp-2); padding-block: var(--sp-6); }
.mnav__close { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; color: inherit; }

/* ── 첫 화면 ── */
.hero { position: relative; height: min(100svh, 920px); min-height: 640px; overflow: hidden; background: var(--c-ink-900); color: #fff; }
.hero__stage { position: absolute; inset: 0; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; background: var(--c-ink-900); }
.hero__poster { position: absolute; inset: 0; background-size: cover; background-position: 60% 40%; }
.hero__fallback { position: absolute; inset: 0; background: radial-gradient(42% 60% at 70% 42%, #4a2a20 0%, #1c1210 45%, #0b0b0c 75%); }
.hero__fallback::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(30% 40% at 20% 30%, rgba(224, 33, 63, .22), transparent 70%), radial-gradient(25% 35% at 85% 20%, rgba(255, 190, 140, .16), transparent 70%); animation: leak 14s ease-in-out infinite alternate; }
@keyframes leak { to { transform: translate(6%, 4%) scale(1.08); } }
.hero__grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .62) 34%, rgba(11, 11, 12, .08) 62%, rgba(11, 11, 12, 0) 100%), linear-gradient(0deg, rgba(11, 11, 12, .88) 0%, transparent 28%), linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, transparent 18%); }
.hero__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; }
.hero .kicker { color: rgba(255, 255, 255, .75); margin-bottom: var(--sp-6); }
.hero__title { max-width: 840px; }
.hero__title .dot { color: var(--c-crimson-600); }
.hero__lede { margin-top: var(--sp-7); color: rgba(255, 255, 255, .72); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-10); }
.hero__ctrl { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 3; }
.hero__ctrl .wrap { display: flex; align-items: center; gap: 22px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); }
.hero__count { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; }
.hero__count em { font-style: normal; color: rgba(255, 255, 255, .45); }
.hero__prog { flex: 0 0 160px; height: 2px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.hero__prog i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear; }
.hero__cap { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__ai { font-size: var(--fs-3xs); color: rgba(255, 255, 255, .6); border: var(--bw) solid rgba(255, 255, 255, .22); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.hero__pp { width: 36px; height: 36px; border-radius: 50%; border: var(--bw) solid rgba(255, 255, 255, .35); background: transparent; display: grid; place-items: center; color: #fff; }
.hero__pp:hover { background: #fff; color: var(--c-ink-900); }
.hero__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: var(--bw) solid rgba(255, 255, 255, .14); background: rgba(11, 11, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__bar .wrap { display: flex; align-items: center; gap: 22px; min-height: 56px; font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.hero__bar b { display: inline-flex; align-items: center; gap: var(--sp-2); color: #fff; font-size: var(--fs-2xs); }
.hero__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); }
.hero__sub { margin-left: auto; color: rgba(255, 255, 255, .6); }
@media (max-width: 820px) {
  .hero { height: max(680px, 100svh); min-height: 0; }
  .hero__media, .hero__poster { object-position: 50% 30%; background-position: 50% 30%; }
  .hero__shade { background: linear-gradient(0deg, rgba(11, 11, 12, .96) 0%, rgba(11, 11, 12, .82) 36%, rgba(11, 11, 12, .05) 66%), linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, transparent 16%); }
  .hero__in { justify-content: flex-end; padding-top: 0; padding-bottom: 168px; }
  .hero .kicker { font-size: var(--fs-3xs); margin-bottom: var(--sp-4); }
  .hero__lede { margin-top: var(--sp-4); }
  .hero__cta { flex-direction: column; margin-top: var(--sp-6); }
  .hero__cta .btn { width: 100%; }
  .hero__ctrl { bottom: 78px; }
  .hero__ctrl .wrap { gap: var(--sp-3); }
  .hero__prog { flex-basis: 60px; }
  .hero__cap, .hero__ai { display: none; }
  .hero__pp { margin-left: auto; }
  .hero__bar .wrap { flex-wrap: wrap; gap: 6px 12px; padding-block: 12px; font-size: var(--fs-2xs); }
  .hero__sep, .hero__sub { display: none; }
}

/* ── 흐르는 띠 ── */
.marq { overflow: hidden; border-bottom: var(--bw) solid var(--line); padding: 34px 0 26px; }
.marq__track { display: flex; gap: 42px; width: max-content; animation: mq 38s linear infinite; font-size: var(--fs-band); font-weight: var(--fw-heavy); line-height: 1; align-items: center; }
.marq__track span { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.marq__track span.is-filled { color: var(--fg); -webkit-text-stroke: 0; }
.marq__track i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex: none; }
.marq__line { display: flex; gap: 30px; width: max-content; margin-top: 18px; animation: mq 30s linear infinite reverse; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-text); letter-spacing: var(--ls-caps); }
.marq:hover .marq__track, .marq:hover .marq__line { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (max-width: 820px) { .marq { padding: 22px 0 18px; } .marq__track { gap: 24px; } .marq__track i { width: 10px; height: 10px; } }

/* ── 01 소개 ── */
.about { --split-a: 5fr; --split-b: 7fr; --split-align: end; }
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1c; color: #fff; }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.portrait__ph { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 35%, #5a5550, #1c1b1c 70%); }
.portrait__ph::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 62%; height: 74%; transform: translateX(-50%); background: radial-gradient(28% 22% at 50% 22%, #3b3532 0 98%, transparent 100%), radial-gradient(60% 46% at 50% 100%, #161414 0 98%, transparent 100%); filter: blur(2px); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent 45%); }
.portrait__pl { position: absolute; top: 16px; left: 20px; z-index: 2; font-size: var(--fs-3xs); color: rgba(255, 255, 255, .7); }
.portrait__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); font-size: var(--fs-2xs); }
.portrait__cap b { display: block; font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -.01em; }
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: var(--sp-14); border-top: var(--bw) solid var(--line-strong); }
.stat { padding: 22px 22px 0 0; min-width: 0; }
.stat + .stat { padding-left: 22px; border-left: var(--bw) solid var(--line); }
.stat__k { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--accent-text); }
.stat { container-type: inline-size; }
.stat__v { display: block; margin: 14px 0 10px; font-family: var(--font-wide); font-stretch: 112%; font-size: min(var(--fs-stat), 15cqi); font-weight: var(--fw-heavy); line-height: 1.05; letter-spacing: -.02em; }
.stat__v small { font-family: var(--font-sans); font-size: .5em; font-weight: var(--fw-bold); margin-left: 2px; }
.stat p { font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-muted); }
.fine { margin-top: var(--sp-7); font-size: var(--fs-xs); color: var(--fg-muted); }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr; } .stat + .stat { padding-left: 0; border-left: 0; border-top: var(--bw) solid var(--line); } .stat { padding: 18px 0; } }

/* ── 02 지원 시스템 ── */
.sup-head { --split-a: 7fr; --split-b: 5fr; --split-gap: var(--sp-12); --split-align: end; margin-bottom: var(--sp-14); }
.rows { border-top: var(--bw) solid var(--line); }
.rows > li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 4fr) minmax(0, 5fr) 48px; gap: var(--sp-8); align-items: center; padding: 34px 0; border-bottom: var(--bw) solid var(--line); transition: padding var(--dur) ease; }
.rows__n { font-size: 44px; font-weight: var(--fw-heavy); color: var(--accent); line-height: 1; }
.rows__en { display: block; margin-top: 6px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--fg-muted); }
.rows p { font-size: 15px; line-height: 1.75; color: var(--fg-muted); }
.rows .arr { color: rgba(255, 255, 255, .6); }
.rows__peek { position: absolute; right: 76px; top: 50%; width: 200px; height: 250px; transform: translateY(-50%) scale(.92); opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur); overflow: hidden; z-index: 2; box-shadow: var(--shadow-pop); }
.rows__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 821px) {
  .rows > li:hover { padding-left: 16px; }
  .rows > li:hover .arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-45deg); }
  .rows > li:hover .rows__peek { opacity: 1; transform: translateY(-50%) scale(1); }
}
@media (max-width: 820px) {
  .rows > li { grid-template-columns: 52px 1fr; gap: 6px 14px; padding: 24px 0; }
  .rows__n { font-size: 26px; grid-row: span 2; }
  .rows p { grid-column: 2; font-size: var(--fs-sm); }
  .rows .arr, .rows__peek { display: none; }
}

/* ── 03 성장 지원 ── */
.grow { --split-a: 4fr; --split-b: 8fr; }
.grow blockquote { margin-top: var(--sp-10); padding-left: 22px; border-left: var(--bw-strong) solid var(--accent); font-family: var(--font-serif); font-size: 18px; line-height: 1.85; }
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--bw) solid var(--line-strong); border-left: var(--bw) solid var(--line); }
.g-grid article { padding: 26px 24px 30px; border-right: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); min-width: 0; transition: background var(--dur-fast); }
.g-grid article:hover { background: var(--c-white); }
.g-grid__i { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--fg-muted); }
.g-grid h3 { margin: 30px 0 8px; font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -.015em; }
.g-grid p { margin-bottom: 22px; font-size: var(--fs-sm); line-height: 1.7; color: var(--fg-muted); }
@media (max-width: 1000px) { .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g-grid { grid-template-columns: 1fr; } }

/* ── 04 합류 ── */
.join-top { --split-a: 6fr; --split-b: 6fr; }
.tl { position: relative; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); margin-top: var(--sp-24); }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.tl::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(100% / var(--n, 7)); background: var(--accent); }
.tl > li { position: relative; padding: 30px 18px 0 0; min-width: 0; }
.tl > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: var(--bw-strong) solid var(--fg); }
.tl > li:first-child::before { background: var(--accent); border-color: var(--accent); }
.tl b { display: block; font-size: 56px; font-weight: var(--fw-heavy); line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--fg); }
.tl > li:first-child b { color: var(--accent); -webkit-text-stroke: 0; }
.tl h3 { margin: 18px 0 6px; font-size: 17px; font-weight: var(--fw-bold); }
.tl p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 1000px) {
  .tl { grid-template-columns: 1fr; margin-top: var(--sp-12); }
  .tl::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl::after { left: 5px; width: 2px; height: calc(100% / var(--n, 7)); }
  .tl > li { padding: 0 0 26px 34px; }
  .tl > li::before { left: 0; top: 6px; }
  .tl b { font-size: 30px; }
  .tl h3 { margin: 6px 0 2px; }
}

/* ── 05 인사말 · 수상 ── */
.msg { --split-a: 7fr; --split-b: 5fr; --split-gap: 80px; }
.msg__body { margin-top: 34px; max-width: 36em; font-size: 16.5px; line-height: 1.95; color: var(--fg-muted); font-weight: var(--fw-light); }
.msg__body p + p { margin-top: 14px; }
.sign { display: flex; align-items: center; gap: var(--sp-4); margin-top: 30px; font-size: 15px; font-weight: var(--fw-bold); }
.sign::before { content: ""; width: 40px; height: 1px; background: var(--accent); }
.aw h3 { margin-bottom: 18px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--fg-muted); }
.aw ol { border-top: var(--bw) solid var(--line-strong); }
.aw li { display: grid; grid-template-columns: 86px 1fr; gap: var(--sp-3); align-items: baseline; padding: 15px 0; border-bottom: var(--bw) solid var(--line); font-size: var(--fs-sm); }
.aw li b { font-size: 20px; font-weight: var(--fw-heavy); }
.aw li.is-big b { color: var(--accent-text); }
.aw li .badge { margin-left: var(--sp-2); vertical-align: 2px; height: 20px; }

/* ── 06 FAQ ── */
.faq { --split-a: 4fr; --split-b: 8fr; }

/* ── 마지막 신청 구간 ── */
.join-band { padding-block: 110px; overflow: hidden; }
.jb { --split-a: 7fr; --split-b: 5fr; --split-gap: var(--sp-12); --split-align: end; }
.jb { container-type: inline-size; }
.jb__big { font-size: min(var(--fs-mega), 10.8cqi); white-space: nowrap; }
.jb__big span { display: block; color: transparent; -webkit-text-stroke: 2px var(--fg); }
@media (max-width: 820px) { .jb__big { font-size: min(var(--fs-mega), 20cqi); } }
.jb p:not(.jb__big) { margin-top: 14px; font-size: var(--fs-body); line-height: 1.8; color: var(--fg-muted); }
.jb .hero__cta { margin-top: 30px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--sp-6); font-size: 13.5px; }
.checks li::before { content: "✓"; margin-right: 7px; font-weight: var(--fw-black); }
@media (max-width: 820px) { .join-band { padding-block: 72px; } }

/* ── 하단 ── */
.ft { padding: 80px 0 48px; font-size: 13.5px; color: var(--fg-muted); }
.ft__top { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--sp-12); padding-bottom: var(--sp-14); border-bottom: var(--bw) solid var(--line); }
.ft h4 { margin-bottom: 14px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--fg); }
.ft p { margin-bottom: 6px; }
.ft__tbd { color: var(--c-gold-500); }
.ft ul { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.ft ul a:hover { color: var(--fg); }
.ft__mark { margin-top: var(--sp-12); font-size: clamp(28px, 7.6vw, 100px); line-height: .95; font-weight: var(--fw-black); color: var(--fg); letter-spacing: -.01em; }
.ft__mark span { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5); }
.ft__bot { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: 36px; font-size: var(--fs-2xs); }
@media (max-width: 820px) { .ft__top { grid-template-columns: 1fr; gap: var(--sp-7); } .ft__bot { flex-direction: column; } }

/* ── 휴대폰 아래 고정 신청 바 (홈에만) ── */
.mbar { display: none; }
@media (max-width: 820px) {
  body.has-mbar { padding-bottom: 80px; }
  .mbar { display: flex; gap: var(--sp-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbar); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(11, 11, 12, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: var(--bw) solid rgba(255, 255, 255, .14); transition: transform var(--dur); }
  .mbar .btn--primary { flex: 1; --btn-h: 52px; font-size: var(--fs-body); }
  .mbar .btn--line { width: 52px; --btn-h: 52px; padding: 0; }
  .mbar.is-hidden { transform: translateY(110%); }
}

/* ── 하위 쪽 머리 (개인정보 · 인사말 · 제휴) ── */
.page-hero { padding: calc(84px + var(--sp-18)) 0 var(--sp-14); }
.page-hero .kicker { margin-bottom: var(--sp-5); }
.page-hero .ty-lede { margin-top: var(--sp-5); }
@media (max-width: 900px) { .page-hero { padding-top: calc(64px + var(--sp-12)); } }

/* 준비중 · 오류 쪽 */
.solo { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--sp-10) var(--gutter); background: radial-gradient(50% 50% at 50% 40%, #2a1418 0%, var(--c-ink-900) 70%); }
.solo__mark { width: 96px; height: 74px; margin: 0 auto var(--sp-8); }
.solo .ty-lede { margin: var(--sp-5) auto 0; }
.solo__cta { margin-top: var(--sp-8); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* 미리보기 띠 */
.preview-bar { position: fixed; left: 16px; bottom: 16px; z-index: calc(var(--z-header) + 1); display: flex; align-items: center; gap: var(--sp-3); padding: 6px 8px 6px 14px; background: var(--c-warn-bg); color: var(--c-warn); font-size: var(--fs-2xs); font-weight: var(--fw-bold); border-left: 3px solid var(--c-warn); box-shadow: var(--shadow-card); max-width: calc(100% - 24px); }
.preview-bar a { color: var(--c-ink-900); text-decoration: underline; }
@media (max-width: 820px) { .has-mbar .preview-bar { bottom: 92px; } }