/*
 * 불펜 BULLPEN — 사전예약 마이크로사이트
 * 레이어 순서: reset → tokens → base → layout → components → pages → utilities
 * 컴포넌트는 @scope 로 경계를 긋는다. (.feature 는 폰 목업 안으로 스타일이 새지 않도록 "to (.phone)")
 */
@layer reset, tokens, base, layout, components, pages, utilities;

/* reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, svg, video, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  address { font-style: normal; }
}

/* tokens */
@layer tokens {
  @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/Pretendard-Regular.woff2') format('woff2'); }
  @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('../fonts/Pretendard-Bold.woff2') format('woff2'); }
  @font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: url('../fonts/Pretendard-Black.woff2') format('woff2'); }
  @font-face { font-family: 'Black Han Sans'; font-weight: 400; font-display: swap; src: url('../fonts/BlackHanSans-400.woff2') format('woff2'); }
  @font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
  @font-face { font-family: 'Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

  :root {
    /* 야간 경기장 */
    --night: #070d18;
    --night-2: #0b1526;
    --night-3: #111f36;
    --night-4: #1a2c4a;
    --chalk: #f4efe3;
    --chalk-2: #c3c7d0;
    --chalk-3: #8c93a2;
    --line: rgb(244 239 227 / .14);
    /* 조명·내야 흙·잔디 */
    --flood: #ffc23a;
    --flood-hi: #ffd979;
    --flood-ink: #241600;
    --clay: #c9773a;
    --clay-2: #a65a26;
    --dirt: #5a2f13;
    --dirt-2: #3a1d0b;
    --grass: #0f2f1e;
    --grass-2: #164029;
    --grass-3: #2f7a4b;
    --stitch: #d9323c;
    /* 종이(서브 페이지) */
    --paper: #f4efe4;
    --paper-2: #e9e1cf;
    --paper-3: #fbf8f1;
    --ink: #121821;
    --ink-2: #4a5160;
    --rule: #d8cdb6;

    --f-body: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --f-disp: 'Black Han Sans', var(--f-body);
    --f-num: 'Anton', 'Black Han Sans', sans-serif;
    --f-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    --wrap: 1200px;
    --gut: clamp(16px, 4vw, 40px);
    --head-h: 64px;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

/* base */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); color-scheme: dark; }
  html[data-theme="paper"] { color-scheme: light; }
  body {
    min-height: 100vh;
    background: var(--night);
    color: var(--chalk);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
  }
  html[data-theme="paper"] body { background: var(--paper); color: var(--ink); }
  a { color: inherit; text-underline-offset: .2em; }
  :focus-visible { outline: 3px solid var(--flood); outline-offset: 3px; border-radius: 4px; }
  .i { width: 1em; height: 1em; flex: none; }
  ::selection { background: var(--flood); color: var(--flood-ink); }

  .eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--flood);
    margin-bottom: 14px;
  }
  .display {
    font-family: var(--f-disp);
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 68px);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: balance;
  }
  .h2 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 16px; }
}

/* layout */
@layer layout {
  .skip {
    position: fixed; left: 12px; top: -60px; z-index: 100;
    background: var(--flood); color: var(--flood-ink); font-weight: 700;
    padding: 10px 16px; border-radius: 8px; transition: top .2s;
  }
  .skip:focus { top: 12px; }

  /* 상단 헤더 */
  @scope (.masthead) {
    :scope {
      position: fixed; inset: 0 0 auto; z-index: 40;
      height: var(--head-h);
      transition: background-color .3s, box-shadow .3s;
    }
    :scope.is-solid, :scope.is-open { background: rgb(7 13 24 / .9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
    .masthead__bar {
      max-width: calc(var(--wrap) + var(--gut) * 2);
      height: 100%; margin-inline: auto; padding-inline: var(--gut);
      display: flex; align-items: center; gap: 28px;
    }
    .masthead__logo img { height: 34px; width: auto; }
    .masthead__nav { margin-left: auto; }
    .masthead__nav ul { display: flex; gap: 4px; }
    .masthead__nav a {
      display: block; padding: 8px 12px; border-radius: 8px;
      font-size: 15px; font-weight: 700; color: var(--chalk-2); text-decoration: none;
      transition: color .2s, background-color .2s;
    }
    .masthead__nav a:hover, .masthead__nav a[aria-current] { color: var(--chalk); background: rgb(244 239 227 / .08); }
    .masthead__cta {
      flex: none; padding: 9px 18px; border-radius: 999px;
      background: var(--flood); color: var(--flood-ink);
      font-weight: 900; font-size: 15px; text-decoration: none;
    }
    .masthead__toggle { display: none; width: 44px; height: 44px; margin-right: -6px; place-items: center; }
    .burger, .burger::before, .burger::after {
      display: block; width: 22px; height: 2px; background: var(--chalk); border-radius: 2px;
      transition: transform .25s var(--ease), background-color .2s;
    }
    .burger { position: relative; }
    .burger::before, .burger::after { content: ''; position: absolute; left: 0; }
    .burger::before { top: -7px; }
    .burger::after { top: 7px; }
    :scope.is-open .burger { background: transparent; }
    :scope.is-open .burger::before { transform: translateY(7px) rotate(45deg); }
    :scope.is-open .burger::after { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 959px) {
      .masthead__bar { gap: 12px; }
      .masthead__logo img { height: 30px; }
      .masthead__cta { margin-left: auto; padding: 8px 14px; font-size: 14px; }
      .masthead__toggle { display: grid; }
      .masthead__nav {
        position: absolute; inset: var(--head-h) 0 auto; margin: 0;
        background: rgb(7 13 24 / .97); border-bottom: 1px solid var(--line);
        padding: 8px var(--gut) 20px;
        display: none;
      }
      :scope.is-open .masthead__nav { display: block; }
      .masthead__nav ul { flex-direction: column; gap: 0; }
      .masthead__nav a { padding: 14px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line); }
    }
  }

  /* 빠른 메뉴: 데스크톱은 우측 세로 스택, 모바일은 하단 고정 CTA */
  @scope (.quickbar) {
    :scope {
      position: fixed; z-index: 30; right: 20px; bottom: 24px;
      display: flex; flex-direction: column; gap: 6px; width: 104px;
      transition: transform .35s var(--ease), opacity .35s;
    }
    :scope[data-show="false"] { transform: translateX(140%); opacity: 0; pointer-events: none; }
    a { text-decoration: none; text-align: center; border-radius: 12px; }
    .quickbar__main {
      display: grid; padding: 14px 6px 12px; line-height: 1.2;
      background: var(--flood); color: var(--flood-ink);
      font-weight: 900; font-size: 16px; box-shadow: 0 10px 30px rgb(0 0 0 / .35);
    }
    .quickbar__main small { font-family: var(--f-num); font-size: 20px; font-weight: 400; margin-top: 4px; }
    .quickbar__sub {
      padding: 10px 4px; font-size: 13px; font-weight: 700;
      background: rgb(11 21 38 / .92); color: var(--chalk); border: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }
    .quickbar__top { display: grid; place-items: center; }
    .quickbar__top .i { width: 18px; height: 18px; }
    @media (max-width: 1099px) {
      :scope { left: 0; right: 0; bottom: 0; width: auto; flex-direction: row; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(7 13 24 / .9) 40%); }
      :scope[data-show="false"] { transform: translateY(120%); }
      .quickbar__sub { display: none; }
      .quickbar__main { flex: 1; display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 15px; font-size: 17px; }
      .quickbar__main small { font-size: 17px; }
    }
  }

  /* 푸터 */
  @scope (.colophon) {
    :scope { background: #04070d; color: var(--chalk-3); font-size: 13px; line-height: 1.7; padding: 56px 0 calc(48px + 76px); }
    @media (min-width: 1100px) { :scope { padding-bottom: 48px; } }
    .colophon__inner { max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
    .colophon__top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
    .colophon__logo { height: 40px; width: auto; }
    .colophon__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
    .colophon__links a, .colophon__links button { color: var(--chalk-2); text-decoration: none; font-size: 14px; }
    .colophon__links a:hover, .colophon__links button:hover { color: var(--chalk); text-decoration: underline; }
    .colophon__links strong { color: var(--chalk); }
    .colophon__social { display: flex; gap: 8px; margin-left: auto; }
    .colophon__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--chalk-2); }
    .colophon__social a:hover { color: var(--flood); border-color: var(--flood); }
    .colophon__social .i { width: 20px; height: 20px; }
    .colophon__social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .biz { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 22px; color: var(--chalk-3); }
    .biz a { color: inherit; }
    .colophon__fine { margin-top: 14px; color: #6f7686; }
    .colophon__copy { margin-top: 6px; color: #6f7686; }
  }

  @scope (.rating) {
    :scope {
      display: flex; gap: 20px; align-items: flex-start;
      margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px;
      background: rgb(255 255 255 / .02);
    }
    .rating__icon { width: 56px; flex: none; }
    .rating__all { font-family: var(--f-num); font-size: 17px; letter-spacing: .04em; }
    .rating__label { font-family: var(--f-body); font-weight: 700; font-size: 10px; fill: var(--chalk-2); }
    .rating__table { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; flex: 1; }
    .rating__table div { display: flex; gap: 10px; }
    .rating__table dt { color: #6f7686; flex: none; }
    .rating__table dd { color: var(--chalk-2); }
    @media (max-width: 560px) { :scope { flex-direction: column; } }
  }
}

/* components */
@layer components {
  /* 사전예약 버튼 — 페이지 전체의 주 행동 */
  .btn-prereg {
    --b: var(--flood);
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 64px; padding: 0 40px; border-radius: 14px;
    background: var(--b); color: var(--flood-ink);
    font-size: 20px; font-weight: 900; letter-spacing: -.01em; text-decoration: none;
    box-shadow: 0 4px 0 #b9821a, 0 18px 40px rgb(255 194 58 / .28);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s;
  }
  .btn-prereg .i { width: 20px; height: 20px; }
  .btn-prereg:hover { background: var(--flood-hi); }
  .btn-prereg:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9821a, 0 8px 20px rgb(255 194 58 / .2); }
  .btn-prereg--block { width: 100%; }
  .btn-prereg--dark { --b: var(--ink); color: var(--flood); box-shadow: 0 4px 0 #000, 0 16px 30px rgb(0 0 0 / .2); }
  .btn-prereg--dark:hover { background: #222a36; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 10px;
    font-weight: 700; font-size: 15px; text-decoration: none;
    border: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s;
  }
  .btn--dark { background: var(--ink); color: var(--paper); }
  .btn--dark:hover { background: #283141; }
  .btn--ghost { border-color: var(--rule); color: var(--ink); }
  .btn--ghost:hover { border-color: var(--ink); }
  .btn--ghost-dark { border-color: var(--ink); color: var(--ink); }

  /* 스토어 배지 (실서비스 형식 더미) */
  .stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .store {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 168px; padding: 9px 18px 9px 14px; border-radius: 10px;
    background: #000; color: #fff; border: 1px solid rgb(255 255 255 / .35);
    text-decoration: none; line-height: 1.15; font-weight: 700; font-size: 17px;
    transition: border-color .2s, transform .2s var(--ease);
  }
  .store:hover { border-color: #fff; transform: translateY(-2px); }
  .store small { display: block; font-size: 11px; font-weight: 400; opacity: .85; }
  .store__i { width: 26px; height: 26px; flex: none; }

  /* 표 */
  .tbl-wrap { overflow-x: auto; margin: 16px 0; border-radius: 10px; border: 1px solid var(--rule); background: #fff; }
  .tbl { width: 100%; font-size: 14px; color: var(--ink); }
  .tbl th, .tbl td { padding: 11px 14px; border-bottom: 1px solid #ece4d3; text-align: left; vertical-align: top; }
  .tbl thead th { background: var(--paper-2); font-weight: 700; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
  .tbl tbody th { font-weight: 700; white-space: nowrap; }
  .tbl tr:last-child > * { border-bottom: 0; }
  .tbl tfoot th, .tbl tfoot td { background: var(--paper-3); font-weight: 700; border-top: 2px solid var(--rule); }
  .tbl--num td { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 14px; }
  .tbl--wide th, .tbl--wide td { white-space: nowrap; text-align: center; }
  @media (max-width: 640px) {
    .tbl th, .tbl td { padding: 10px 10px; }
    .tbl--num td { font-size: 12.5px; }
    .tbl thead th { white-space: normal; }
  }

  /* 모달 시트 */
  @scope (.sheet) {
    :scope {
      width: min(680px, calc(100% - 32px)); max-height: min(86vh, 860px);
      padding: 0; border: 0; border-radius: 18px;
      background: var(--paper-3); color: var(--ink);
      box-shadow: 0 30px 80px rgb(0 0 0 / .5);
      overflow: hidden;
    }
    :scope[open] { display: flex; flex-direction: column; }
    :scope::backdrop { background: rgb(3 6 12 / .72); backdrop-filter: blur(4px); }
    .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--rule); }
    h2 { font-size: 19px; font-weight: 900; }
    .sheet__x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
    .sheet__x:hover { background: var(--paper-2); }
    .sheet__x .i { width: 20px; height: 20px; }
    .sheet__body { overflow-y: auto; padding: 20px 24px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); overscroll-behavior: contain; }
    .sheet__body p + p { margin-top: 10px; }
    .sheet__intro { color: var(--ink); }
    h3 { font-size: 15px; color: var(--ink); margin: 18px 0 4px; }
    .sheet__foot { padding: 14px 24px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; }
  }

  /* 폰 프레임 + 앱 목업 공통 */
  @scope (.phone) {
    :scope {
      width: min(300px, 76vw); margin-inline: auto;
      padding: 11px; border-radius: 48px;
      background: linear-gradient(145deg, #2a3446, #0b0f17 40%, #1b2331);
      box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px rgb(0 0 0 / .55), inset 0 0 0 2px #05070b;
    }
    .phone__screen {
      container-type: inline-size;
      position: relative; aspect-ratio: 9 / 19.2; overflow: hidden;
      border-radius: 38px; background: #0b1324;
      display: flex; flex-direction: column;
    }
    .phone__status {
      display: flex; align-items: center; justify-content: space-between;
      padding: 3.6cqi 7.5cqi 1.4cqi; font-size: 4.4cqi; font-weight: 700; color: #fff;
    }
    .phone__notch { width: 30cqi; height: 8.6cqi; border-radius: 99px; background: #000; }
    .phone__sig { display: flex; align-items: flex-end; gap: .7cqi; height: 3.6cqi; }
    .phone__sig i { width: 1.1cqi; background: #fff; border-radius: 1px; }
    .phone__sig i:nth-child(1) { height: 40%; } .phone__sig i:nth-child(2) { height: 70%; } .phone__sig i:nth-child(3) { height: 100%; }
    .phone__sig b { width: 6.4cqi; height: 3.2cqi; margin-left: 1.4cqi; border: .5cqi solid #fff; border-radius: 1cqi; background: linear-gradient(90deg, #fff 70%, transparent 0) content-box; padding: .4cqi; }
  }

  @scope (.app) {
    :scope {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; gap: 2.4cqi;
      padding: 2cqi 4.6cqi 5cqi;
      font-size: 3.7cqi; line-height: 1.35; color: #e6eaf2;
      font-family: var(--f-body);
      background:
        radial-gradient(120% 50% at 50% 0%, rgb(255 194 58 / .08), transparent 60%),
        linear-gradient(#0e1930, #091122);
    }
    small { font-size: .82em; color: #8f9ab0; font-weight: 400; }
    b { font-weight: 700; }
    .app__top { display: flex; align-items: center; gap: 2.8cqi; }
    .app__team { display: grid; flex: 1; }
    .app__team b { font-size: 4.4cqi; }
    .app__pill { padding: .8cqi 2.6cqi; border-radius: 99px; background: var(--flood); color: var(--flood-ink); font-weight: 900; font-size: 3.1cqi; }
    .app__title { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1cqi; }
    .app__title b { font-size: 4.8cqi; }
    .app__sub { font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
    .app__tabs { display: flex; gap: 4cqi; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 3.6cqi; color: #8f9ab0; font-weight: 700; }
    .app__tabs span { padding-bottom: 1.6cqi; }
    .app__tabs .is-on { color: #fff; box-shadow: inset 0 -.7cqi 0 var(--flood); }
    .app__btn {
      margin-top: auto; display: grid; place-items: center; height: 10.5cqi; border-radius: 3cqi;
      background: var(--flood); color: var(--flood-ink); font-weight: 900; font-size: 4cqi;
    }
    .app__ops { display: flex; gap: 1.6cqi; margin-top: auto; }
    .app__ops span { flex: 1; text-align: center; padding: 2.2cqi 0; border-radius: 2.4cqi; background: #172440; font-weight: 700; font-size: 3.3cqi; }
    .app__ops .is-speed { flex: .55; color: var(--flood); font-family: var(--f-num); font-weight: 400; font-size: 3.8cqi; }
    .app__ops .is-go { background: var(--flood); color: var(--flood-ink); }
    .app__budget { display: grid; gap: 1.2cqi; font-size: 3.2cqi; color: #9aa5ba; }
    .app__budget span { height: 1.4cqi; border-radius: 9px; background: #1c2a45; overflow: hidden; }
    .app__budget span::before { content: ''; display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--grass-3), var(--flood)); }
  }
}

/* pages: 홈 섹션 */
@layer pages {
  .hero__inner, .prereg__inner, .tally__inner, .game__inner, .trailer__inner, .events__inner, .league__inner, .faq__inner, .closing__inner {
    max-width: calc(var(--wrap) + var(--gut) * 2);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  /* HERO — 풀블리드 키비주얼, 중앙 정렬 */
  @scope (.hero) {
    :scope {
      position: relative; isolation: isolate; overflow: hidden;
      min-height: max(100svh, 760px);
      display: grid; align-items: center;
      padding: calc(var(--head-h) + 28px) 0 96px;
      text-align: center;
    }
    .hero__bg {
      position: absolute; inset: 0; z-index: -2;
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%;
      animation: lights-on 2.4s var(--ease) both;
    }
    :scope::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background:
        linear-gradient(180deg, rgb(7 13 24 / .78) 0%, rgb(7 13 24 / .25) 30%, rgb(7 13 24 / .35) 60%, var(--night) 100%),
        radial-gradient(60% 50% at 50% 42%, rgb(7 13 24 / .55), transparent 75%);
    }
    .hero__kicker { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--chalk-2); }
    .hero__kicker span + span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 18px; vertical-align: middle; background: var(--flood); transform: rotate(45deg); }
    .hero__title { display: grid; justify-items: center; margin-top: 22px; font-weight: 400; }
    .hero__plate { width: 40px; fill: var(--flood); filter: drop-shadow(0 0 18px rgb(255 194 58 / .6)); margin-bottom: 10px; }
    .hero__en { font-family: var(--f-num); font-size: clamp(16px, 2vw, 24px); letter-spacing: .62em; margin-right: -.62em; color: var(--flood); }
    .hero__ko {
      font-family: var(--f-disp); font-size: clamp(112px, 19vw, 236px); line-height: .92; letter-spacing: -.02em;
      color: var(--chalk);
      text-shadow: 0 0 40px rgb(255 236 190 / .35), 0 8px 0 rgb(0 0 0 / .25);
    }
    .hero__tag { margin-top: 14px; font-size: clamp(18px, 2.1vw, 24px); font-weight: 700; }
    .hero__actions { display: grid; justify-items: center; gap: 18px; margin-top: 30px; }
    .hero__strip {
      position: absolute; inset: auto 0 0; z-index: 1;
      display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0;
      padding: 16px var(--gut); font-size: 13px; color: var(--chalk-2);
      border-top: 2px solid rgb(244 239 227 / .55);
    }
    .hero__strip li { padding-inline: 16px; }
    .hero__strip li + li { border-left: 1px solid var(--line); }
    .hero__strip b { color: var(--chalk); font-weight: 700; }
    @media (max-width: 640px) {
      :scope { padding-bottom: 120px; min-height: 100svh; }
      .hero__bg { object-position: 50% 80%; }
      .hero__kicker { font-size: 12px; letter-spacing: .06em; }
      .hero__strip { font-size: 12px; }
      .hero__strip li { padding-inline: 10px; }
      .hero__strip li:nth-child(n+3) { display: none; }
      .btn-prereg { width: 100%; }
      .hero__actions { justify-items: stretch; }
      .store { min-width: 0; flex: 1; }
    }
  }

  /* 전광판 카운트다운 */
  @scope (.scoreboard) {
    :scope {
      display: inline-grid; gap: 10px; margin-top: 26px;
      padding: 14px 18px 12px; border-radius: 14px;
      background: rgb(3 6 12 / .78); border: 1px solid rgb(255 255 255 / .12);
      box-shadow: inset 0 0 0 4px rgb(255 255 255 / .02), 0 20px 50px rgb(0 0 0 / .4);
      backdrop-filter: blur(6px);
    }
    .sb__label { font-size: 14px; color: var(--chalk-2); }
    .sb__label b { color: var(--chalk); }
    .sb__cells { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
    b { font-weight: 400; }
    .sb__chip { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 5px; background: var(--stitch); color: #fff; font-family: var(--f-num); font-size: 14px; letter-spacing: .04em; vertical-align: 1px; }
    .sb__unit b {
      font-family: var(--f-num); color: var(--flood); line-height: 1;
      text-shadow: 0 0 14px rgb(255 194 58 / .55);
      font-variant-numeric: tabular-nums;
    }
    .sb__unit { display: grid; justify-items: center; gap: 4px; }
    .sb__unit b {
      font-size: clamp(32px, 4vw, 44px); min-width: 2.1ch; padding: 6px 6px 8px; text-align: center;
      background: #0e1422; border-radius: 8px; box-shadow: inset 0 -2px 0 rgb(255 255 255 / .05);
    }
    small { font-size: 11px; color: var(--chalk-3); }
    .sb__unit.sb__unit--d { margin-right: 10px; }
    .sb__unit.sb__unit--d b { color: #fff; text-shadow: 0 0 14px rgb(255 255 255 / .35); min-width: 1.6ch; }
    .sb__colon { font-family: var(--f-num); font-size: 32px; color: rgb(255 194 58 / .5); padding-top: 6px; }
    :scope[data-phase="launched"] .sb__cells { opacity: .4; }
    @media (max-width: 400px) {
      :scope { padding-inline: 12px; }
      .sb__unit.sb__unit--d { margin-right: 2px; }
      .sb__cells { gap: 3px; }
    }
  }

  /* 사전예약 신청 */
  @scope (.prereg) {
    :scope {
      position: relative; padding: clamp(80px, 10vw, 128px) 0;
      background:
        radial-gradient(50% 60% at 0% 0%, rgb(255 194 58 / .08), transparent 70%),
        linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
    }
    .prereg__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(40px, 6vw, 88px); align-items: center; }
    .prereg__lead { margin-top: 20px; color: var(--chalk-2); font-size: 17px; max-width: 32em; }
    @media (max-width: 899px) {
      .prereg__inner { grid-template-columns: 1fr; align-items: start; }
    }
  }

  /* 기본 보상 티켓 */
  @scope (.ticket) {
    :scope {
      --notch: 14px;
      position: relative; margin-top: 32px; max-width: 460px;
      padding: 22px 24px 20px; border-radius: 14px;
      background: var(--clay); color: #1e0f04;
      -webkit-mask: radial-gradient(circle var(--notch) at 0 62%, #0000 98%, #000) , radial-gradient(circle var(--notch) at 100% 62%, #0000 98%, #000);
      -webkit-mask-composite: source-in;
      mask: radial-gradient(circle var(--notch) at 0 62%, #0000 98%, #000) intersect, radial-gradient(circle var(--notch) at 100% 62%, #0000 98%, #000);
    }
    .ticket__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    .ticket__head span { font-family: var(--f-disp); font-size: 24px; }
    .ticket__head small { font-size: 13px; font-weight: 700; }
    .ticket__items { margin-top: 12px; display: grid; gap: 4px; font-weight: 700; font-size: 16px; padding-bottom: 16px; border-bottom: 2px dashed rgb(30 15 4 / .35); }
    .ticket__items li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: .15em; background: #1e0f04; transform: rotate(45deg); }
    .ticket__plus { padding-top: 14px; font-size: 14px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
    .ticket__plus a { color: #1e0f04; }
  }

  /* 사전예약 스토어·QR 카드 */
  @scope (.prereg__store) {
    :scope {
      display: grid; gap: 22px; justify-items: center; text-align: center;
      background: var(--paper-3); color: var(--ink);
      border-radius: 22px; padding: clamp(26px, 3vw, 36px);
      box-shadow: 0 30px 80px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
      border-top: 6px solid var(--flood);
    }
    .qr { display: grid; justify-items: center; gap: 16px; margin: 0; }
    .qr__frame {
      position: relative; width: min(220px, 62vw); aspect-ratio: 1;
      padding: 18px; border-radius: 18px; background: #fff;
      box-shadow: inset 0 0 0 1px var(--rule);
    }
    .qr__img { width: 100%; height: 100%; }
    .qr__corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--flood); }
    .qr__corner--tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
    .qr__corner--tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
    .qr__corner--bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
    .qr__corner--br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
    .qr__cap { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
    .qr__cap b { color: var(--ink); font-weight: 900; }

    .prereg__badges { width: 100%; display: grid; gap: 12px; }
    .prereg__badges-label { position: relative; font-size: 13px; font-weight: 700; color: var(--ink-2); }
    .prereg__badges-label span { position: relative; z-index: 1; padding: 0 12px; background: var(--paper-3); }
    .prereg__badges-label::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--rule); }
    .stores--stack { flex-direction: column; gap: 10px; }
    .store--lg { width: 100%; min-width: 0; justify-content: center; min-height: 58px; font-size: 18px; }
    .prereg__note { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
    .prereg__note a { color: var(--ink); font-weight: 700; }

    /* 데스크톱: QR 강조 · 모바일: 배지 버튼 강조(QR 숨김, 배지는 그대로) */
    @media (max-width: 599px) {
      .qr { display: none; }
      :scope { gap: 16px; }
      .prereg__badges-label span { background: var(--paper-3); }
    }
  }

  /* 누적 달성 보상 — 내야 흙 */
  @scope (.tally) {
    :scope {
      position: relative; overflow: hidden;
      padding: clamp(80px, 10vw, 128px) 0;
      color: #fff6ea;
      background:
        radial-gradient(80% 60% at 50% 0%, rgb(255 194 58 / .16), transparent 70%),
        repeating-radial-gradient(circle at 30% 40%, rgb(0 0 0 / .05) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--dirt) 0%, var(--dirt-2) 100%);
    }
    .eyebrow { color: var(--flood-hi); }
    .tally__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px 48px; align-items: end; }
    .tally__head .eyebrow { grid-column: 1 / -1; margin: 0; }
    .tally__lead { color: #f1dcc4; font-size: 16px; }
    .tally__count { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
    .tally__now { display: flex; align-items: baseline; gap: 10px; line-height: .9; }
    .tally__num { font-family: var(--f-num); font-size: clamp(64px, 11vw, 148px); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 4px 0 rgb(0 0 0 / .2); }
    .tally__unit { font-family: var(--f-disp); font-size: clamp(24px, 3vw, 40px); }
    .tally__stamp { font-size: 14px; color: #f1dcc4; padding-bottom: 10px; }
    .tally__stamp time { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
    .tally__rules { margin-top: 40px; display: grid; gap: 6px; font-size: 13.5px; color: #e9cfb1; max-width: 860px; }
    .tally__rules li { padding-left: 16px; position: relative; }
    .tally__rules li::before { content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 2px; background: currentColor; }
    @media (max-width: 899px) { .tally__head { grid-template-columns: 1fr; } }
  }

  /* 베이스패스 진행 막대 */
  @scope (.basepath) {
    :scope { position: relative; margin: 28px 28px 0; padding-bottom: 64px; }
    .basepath__track { position: relative; height: 10px; border-radius: 10px; background: rgb(0 0 0 / .28); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); }
    .basepath__fill {
      position: absolute; inset: 2px; border-radius: inherit; transform-origin: left;
      transform: scaleX(var(--p)); background: linear-gradient(90deg, #fff1c9, var(--flood));
      box-shadow: 0 0 18px rgb(255 194 58 / .7);
      transition: transform 1.2s var(--ease);
    }
    .basepath__bases { position: absolute; inset: 0; }
    .base { position: absolute; left: calc(var(--at) * 100%); top: -9px; translate: -50% 0; display: grid; justify-items: center; text-align: center; white-space: nowrap; }
    .base__bag { width: 26px; height: 26px; background: #e8dccb; border: 3px solid var(--dirt-2); transform: rotate(45deg); border-radius: 3px; transition: background-color .4s, box-shadow .4s; }
    .base.is-hit .base__bag { background: var(--flood); box-shadow: 0 0 0 3px rgb(255 194 58 / .3), 0 0 20px rgb(255 194 58 / .7); }
    .base__name { margin-top: 12px; font-weight: 900; font-size: 14px; }
    .base__goal { font-family: var(--f-num); font-size: 18px; line-height: 1; color: #f1dcc4; }
    .base.is-hit .base__goal { color: var(--flood-hi); }
  }

  /* 보상 카드: 좁으면 세로, 넓으면 가로(@container) */
  @scope (.rewards) {
    :scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
    @media (max-width: 1023px) { :scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 599px) { :scope { grid-template-columns: 1fr; } }
  }
  @scope (.reward) {
    :scope { position: relative; container-type: inline-size; }
    .reward__in { display: flex; flex-direction: column; height: 100%; }
    .reward__art, .reward__body { position: relative; }
    .reward__art { overflow: hidden; border-radius: 14px 14px 0 0; aspect-ratio: 4 / 3; background: #0b0f17; }
    .reward__art img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s, transform .6s var(--ease); }
    .reward__chip {
      position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 99px;
      font-size: 12px; font-weight: 900; background: rgb(7 13 24 / .8); color: var(--chalk-2); border: 1px solid var(--line);
    }
    .reward__body { padding: 16px 18px 18px; border-radius: 0 0 14px 14px; background: rgb(20 9 2 / .55); border: 1px solid rgb(255 255 255 / .1); border-top: 0; flex: 1; }
    .reward__goal { font-size: 13px; font-weight: 700; color: #f1dcc4; }
    .reward__goal span { font-family: var(--f-num); font-weight: 400; font-size: 15px; color: var(--flood-hi); margin-right: 4px; }
    .reward__title { font-family: var(--f-disp); font-weight: 400; font-size: 22px; line-height: 1.2; margin: 4px 0 10px; }
    .reward__items { display: grid; gap: 3px; font-size: 14px; color: #fbeedd; }
    .reward__items li { padding-left: 14px; position: relative; }
    .reward__items li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--flood); transform: rotate(45deg); }

    :scope[data-state="hit"] .reward__chip { background: var(--flood); color: var(--flood-ink); border-color: var(--flood); }
    :scope[data-state="hit"] .reward__body { border-color: rgb(255 194 58 / .45); }
    :scope[data-state="next"] .reward__chip { color: #fff; border-color: #fff; }
    :scope[data-state="next"] .reward__chip::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--flood); margin-right: 6px; animation: blink 1.4s infinite; }
    :scope[data-state="locked"] .reward__art img { filter: grayscale(.85) brightness(.55); }

    @container (min-width: 320px) {
      .reward__in { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; }
      .reward__art { aspect-ratio: auto; border-radius: 14px 0 0 14px; }
      .reward__body { border-radius: 0 14px 14px 0; border-top: 1px solid rgb(255 255 255 / .1); border-left: 0; }
    }
  }

  /* 게임 소개 — 잔디 */
  @scope (.game) {
    :scope {
      overflow-x: clip;
      padding: clamp(80px, 10vw, 128px) 0;
      background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .028) 0 90px, transparent 90px 180px),
        radial-gradient(70% 50% at 70% 30%, rgb(47 122 75 / .35), transparent 70%),
        linear-gradient(180deg, var(--grass-2), var(--grass));
    }
    .game__head { text-align: center; }
    .game__tabs {
      display: flex; justify-content: center; gap: 8px; margin: 36px auto 48px;
      overflow-x: auto; scrollbar-width: none; padding: 4px; max-width: 100%;
    }
    .game__tabs::-webkit-scrollbar { display: none; }
    [role="tab"] {
      flex: none; display: inline-flex; align-items: baseline; gap: 8px;
      padding: 12px 20px; border-radius: 99px; border: 1.5px solid rgb(244 239 227 / .35);
      font-weight: 700; font-size: 16px; color: var(--chalk-2);
      transition: background-color .2s, color .2s, border-color .2s;
    }
    [role="tab"]:hover { color: var(--chalk); border-color: var(--chalk); }
    [role="tab"][aria-selected="true"] { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
    .game__tabno { font-family: var(--f-num); font-weight: 400; font-size: 14px; color: var(--clay); }
    [aria-selected="true"] .game__tabno { color: var(--clay-2); }
    @media (max-width: 767px) {
      .game__tabs { justify-content: flex-start; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
      [role="tab"] { padding: 10px 16px; font-size: 15px; }
    }
  }

  @scope (.feature) to (.phone) {
    :scope { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
    :scope:focus-visible { outline-offset: 12px; }
    .js :scope:not(.is-active) { display: none; }
    :scope.is-active .feature__copy > * { animation: rise .6s var(--ease) both; }
    :scope.is-active .feature__copy > :nth-child(2) { animation-delay: .05s; }
    :scope.is-active .feature__copy > :nth-child(3) { animation-delay: .1s; }
    :scope.is-active .feature__copy > :nth-child(4) { animation-delay: .15s; }
    .feature__device { position: relative; }
    .feature__device::before {
      content: ''; position: absolute; inset: 10% -10% -6%; z-index: 0; border-radius: 50%;
      background: radial-gradient(closest-side, rgb(255 194 58 / .18), transparent);
    }
    .feature__kicker { font-family: var(--f-num); letter-spacing: .3em; color: var(--flood); font-size: 15px; }
    .feature__title { text-wrap: balance; font-family: var(--f-disp); font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.14; margin: 10px 0 18px; }
    .feature__lead { color: var(--chalk-2); font-size: 17px; max-width: 34em; }
    .feature__points { margin-top: 30px; border-top: 1px solid var(--line); }
    .feature__points div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    dt { font-weight: 900; }
    dd { color: var(--chalk-2); }
    @media (max-width: 899px) {
      :scope { grid-template-columns: 1fr; }
      .feature__device { order: 2; }
      .feature__points div { grid-template-columns: 1fr; gap: 2px; }
    }
  }

  /* 트레일러 */
  @scope (.trailer) {
    :scope { padding: clamp(80px, 10vw, 120px) 0; background: #04070d; }
    .trailer__inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
    .trailer__copy p:last-child { margin-top: 18px; color: var(--chalk-2); }
    .display { font-size: clamp(32px, 4vw, 48px); }
    .trailer__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / .6), 0 0 0 1px var(--line); }
    .trailer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 64%; transform: scale(1.9); transform-origin: 79% 64%; filter: saturate(.7) contrast(1.15) brightness(.62); transition: transform 1.2s var(--ease); }
    .trailer__frame:hover .trailer__poster { transform: scale(2); }
    .trailer__scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 4px), linear-gradient(90deg, rgb(4 7 13 / .7), transparent 50%); pointer-events: none; }
    .trailer__play {
      position: absolute; left: 50%; top: 50%; translate: -50% -50%;
      width: clamp(68px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
      display: grid; place-items: center; background: var(--flood); color: var(--flood-ink);
      box-shadow: 0 0 0 10px rgb(255 194 58 / .2), 0 20px 50px rgb(0 0 0 / .5);
      transition: transform .25s var(--ease), box-shadow .25s;
    }
    .trailer__play:hover { transform: scale(1.06); box-shadow: 0 0 0 16px rgb(255 194 58 / .18), 0 20px 50px rgb(0 0 0 / .5); }
    .trailer__play .i { width: 40%; height: 40%; margin-left: 6%; }
    .trailer__meta { position: absolute; left: 20px; bottom: 16px; display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--chalk-2); }
    .trailer__meta b { font-family: var(--f-num); font-weight: 400; letter-spacing: .2em; color: var(--chalk); font-size: 15px; }
    iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    :scope .is-playing > :not(iframe) { display: none; }
    @media (max-width: 899px) { .trailer__inner { grid-template-columns: 1fr; } }
  }

  /* 이벤트 */
  @scope (.events) {
    :scope { padding: clamp(80px, 10vw, 128px) 0; background: var(--night-2); }
    .events__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px 48px; align-items: end; }
    .events__head .eyebrow { grid-column: 1 / -1; margin: 0; }
    .events__head > p:last-child { color: var(--chalk-2); }
    @media (max-width: 899px) { .events__head { grid-template-columns: 1fr; } }
    .events__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; counter-reset: ev; }
    .ev {
      position: relative; display: flex; flex-direction: column; gap: 14px;
      padding: 28px clamp(20px, 3vw, 32px); border-radius: 18px;
      background: linear-gradient(160deg, var(--night-4), var(--night-3) 45%);
      border: 1px solid var(--line);
    }
    .ev::after {
      content: ''; position: absolute; left: 0; right: 0; top: 74px;
      border-top: 2px dashed rgb(244 239 227 / .14);
    }
    .ev__no { font-family: var(--f-num); letter-spacing: .2em; color: var(--chalk-3); font-size: 14px; }
    .ev__no b { font-weight: 400; color: var(--flood); font-size: 22px; letter-spacing: .04em; }
    .ev__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; margin-top: 18px; }
    .ev__meta { display: grid; gap: 8px; }
    .ev__meta div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; font-size: 15px; }
    .ev__meta dt { font-size: 12px; font-weight: 900; color: var(--flood); border: 1px solid rgb(255 194 58 / .5); border-radius: 6px; text-align: center; height: fit-content; padding: 1px 0; margin-top: 2px; }
    .ev__meta dd { color: var(--chalk); }
    .ev__how { font-size: 13px; font-weight: 700; color: var(--chalk-3); margin-top: 4px; }
    .ev__steps { display: grid; gap: 6px; counter-reset: st; font-size: 14.5px; color: var(--chalk-2); margin-top: -6px; }
    .ev__steps li { counter-increment: st; display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
    .ev__steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(244 239 227 / .1); font-family: var(--f-num); font-size: 12px; color: var(--chalk); margin-top: 1px; }
    .ev__cta { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 900; color: var(--flood); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
    .ev__cta .i { width: 16px; height: 16px; }
    .ev__cta--off { color: var(--chalk-3); border-bottom-style: dashed; font-weight: 700; }
    .events__note { margin-top: 24px; font-size: 13px; color: var(--chalk-3); }
    @media (max-width: 767px) { .events__list { grid-template-columns: 1fr; } }
  }

  /* 10개 구단 — 종이 */
  @scope (.league) {
    :scope { padding: clamp(80px, 10vw, 128px) 0; background: var(--paper); color: var(--ink); }
    .eyebrow { color: var(--clay-2); }
    .league__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px 48px; align-items: end; }
    .league__head .eyebrow { grid-column: 1 / -1; margin: 0; }
    .league__head p:last-child { color: var(--ink-2); }
    .league__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
    .club {
      position: relative; display: grid; justify-items: center; text-align: center; gap: 2px;
      padding: 24px 14px 20px; border-radius: 16px; background: #fff;
      border: 1px solid var(--rule); box-shadow: inset 0 4px 0 var(--c1);
      transition: transform .3s var(--ease), box-shadow .3s;
    }
    .club:hover { transform: translateY(-4px); box-shadow: inset 0 4px 0 var(--c1), 0 18px 40px rgb(18 24 33 / .12); }
    .club__emblem { width: 76px; height: 76px; margin-bottom: 12px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .15)); }
    .club__name { font-family: var(--f-disp); font-size: 21px; line-height: 1.2; display: grid; }
    .club__name small { font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--ink-2); }
    .club__en { font-size: 11px; letter-spacing: .06em; color: #8a7f68; text-transform: uppercase; }
    .club__park { margin-top: 10px; font-size: 13px; font-weight: 700; }
    .club__trait { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
    @media (max-width: 1023px) { .league__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 899px) { .league__head { grid-template-columns: 1fr; } }
    @media (max-width: 599px) {
      .league__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .club { padding: 18px 10px 16px; }
      .club__emblem { width: 60px; height: 60px; }
    }
  }
  .emblem__mono { font-family: var(--f-num); font-size: 30px; letter-spacing: .02em; }
  .emblem__since { font-family: var(--f-num); font-size: 7px; letter-spacing: .12em; }

  /* FAQ */
  @scope (.faq) {
    :scope { padding: 0 0 clamp(80px, 10vw, 128px); background: var(--paper); color: var(--ink); }
    .faq__inner { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); padding-top: clamp(64px, 8vw, 96px); border-top: 2px solid var(--ink); }
    .eyebrow { color: var(--clay-2); font-family: var(--f-num); letter-spacing: .3em; font-weight: 400; }
    .display { font-size: clamp(34px, 4vw, 50px); }
    .faq__head p:last-child { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
    .faq__head a { color: var(--ink); font-weight: 700; }
    @media (min-width: 900px) { .faq__head { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; } }
    @media (max-width: 899px) { .faq__inner { grid-template-columns: 1fr; } }
  }
  @scope (.qa) {
    :scope { border-bottom: 1px solid var(--rule); }
    :scope:first-child { border-top: 1px solid var(--rule); }
    summary {
      list-style: none; cursor: pointer;
      display: grid; grid-template-columns: 32px 1fr 24px; gap: 12px; align-items: start;
      padding: 20px 4px; font-weight: 700; font-size: 17px;
    }
    summary::-webkit-details-marker { display: none; }
    summary:hover { color: var(--clay-2); }
    .qa__q { font-family: var(--f-num); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--clay); }
    .qa__chev { width: 22px; height: 22px; transition: transform .25s var(--ease); margin-top: 2px; }
    :scope[open] .qa__chev { transform: rotate(180deg); }
    p { padding: 0 36px 22px 48px; color: var(--ink-2); }
    @media (max-width: 640px) { p { padding: 0 4px 20px 48px; } }
  }

  /* 클로징 밴드 */
  @scope (.closing) {
    :scope { background: var(--flood); color: var(--flood-ink); padding: clamp(56px, 7vw, 88px) 0; overflow: hidden; }
    .closing__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 64px); align-items: center; }
    .closing__date { display: flex; gap: 8px; font-family: var(--f-num); font-size: clamp(88px, 13vw, 176px); line-height: .85; }
    .closing__date span { padding: 10px 12px 14px; background: var(--ink); color: var(--flood); border-radius: 14px; box-shadow: inset 0 -4px 0 rgb(255 255 255 / .05); }
    .closing__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(32px, 4vw, 50px); line-height: 1.1; }
    .closing__copy p { margin: 10px 0 22px; font-weight: 700; }
    .closing__social { display: grid; gap: 8px; }
    .closing__social a { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 12px; border: 2px solid rgb(36 22 0 / .2); text-decoration: none; transition: background-color .2s, border-color .2s; }
    .closing__social a:hover { background: rgb(36 22 0 / .08); border-color: var(--flood-ink); }
    .closing__social .i { width: 26px; height: 26px; flex: none; }
    .closing__social span { display: grid; line-height: 1.25; }
    .closing__social small { font-size: 12px; opacity: .75; }
    @media (max-width: 1023px) {
      .closing__inner { grid-template-columns: auto minmax(0, 1fr); }
      .closing__social { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .closing__inner { grid-template-columns: 1fr; }
      .closing__social { grid-template-columns: 1fr; }
      .btn-prereg { width: 100%; }
    }
  }
}

/* pages: 폰 목업 세부 */
@layer pages {
  .emblem--xs { width: 10cqi; height: 10cqi; flex: none; }
  .emblem--xxs { width: 5.6cqi; height: 5.6cqi; flex: none; }
  .emblem--xs .emblem__since, .emblem--xxs .emblem__since { display: none; }

  @scope (.app--front) {
    .lineup { display: grid; }
    .lineup__row, .lineup__sp {
      display: grid; grid-template-columns: 4.6cqi 9.4cqi 1fr auto 4cqi; gap: 2cqi; align-items: center;
      padding: 1.55cqi 0; border-bottom: 1px solid rgb(255 255 255 / .06);
    }
    .lineup__no { font-family: var(--f-num); color: #8f9ab0; text-align: center; }
    .lineup__pos { text-align: center; padding: .4cqi 0; border-radius: 1.4cqi; background: #1b2a47; font-size: 3cqi; font-weight: 700; }
    .lineup__pos--p { background: var(--flood); color: var(--flood-ink); }
    .lineup__name small { margin-left: 1.2cqi; }
    .lineup__avg { font-family: var(--f-mono); font-size: 3.3cqi; color: #cfd6e4; }
    .lineup__sp { grid-template-columns: 15.6cqi 1fr auto; background: rgb(255 194 58 / .08); border-radius: 2cqi; padding-inline: 1.6cqi; border: 0; margin-top: .6cqi; }
    .nextgame { display: grid; gap: 1cqi; padding: 2.4cqi 3cqi; border-radius: 2.6cqi; background: #13203a; margin-top: 1cqi; }
    .nextgame p { display: flex; justify-content: space-between; align-items: baseline; }
    .nextgame b { font-size: 4.2cqi; }
    .nextgame p span { font-size: 3cqi; color: #9aa5ba; }
    .nextgame__odds { gap: 2cqi; }
    .nextgame__odds span { flex: 1; height: 1.4cqi; border-radius: 9px; background: #2a3a5a; position: relative; overflow: hidden; }
    .nextgame__odds span::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--flood); }
    .trend { justify-self: center; width: 0; height: 0; border: 1.3cqi solid transparent; }
    .trend--up { border-bottom: 1.8cqi solid #3ddc84; border-top-width: 0; }
    .trend--down { border-top: 1.8cqi solid #ff5d6a; border-bottom-width: 0; }
    .trend--flat { width: 2.4cqi; height: .5cqi; border: 0; background: #5d6880; }
  }

  @scope (.app--sim) {
    .linescore { width: 100%; font-family: var(--f-mono); font-size: 2.9cqi; text-align: center; background: #050a14; border-radius: 2cqi; overflow: hidden; }
    th, td { padding: 1cqi .4cqi; font-weight: 500; }
    thead th { color: #6f7b93; }
    tbody th { text-align: left; padding-left: 1.6cqi; font-family: var(--f-body); font-weight: 700; color: #fff; font-size: 3cqi; }
    td { color: var(--flood); }
    .is-now { background: rgb(255 194 58 / .14); }
    .rhe { background: #0d1628; color: #fff; }
    .rhe--r { color: var(--flood); font-weight: 700; }
    .field { position: relative; margin-top: 1cqi; }
    .field__svg { width: 100%; height: auto; }
    .field__grass { fill: #1d5a36; }
    .field__dirt { fill: #a5602d; }
    .field__infield { fill: #237043; }
    .field__line { stroke: rgb(255 255 255 / .8); stroke-width: 1; fill: none; }
    .field__mound { fill: #b46c35; }
    .field__bag { fill: #f4efe3; }
    .field__bag.is-on { fill: var(--flood); filter: drop-shadow(0 0 4px var(--flood)); }
    .field__home { fill: #fff; }
    .bso { position: absolute; left: 0; top: 0; display: grid; gap: .6cqi; font-family: var(--f-num); font-size: 3.2cqi; padding: 1.4cqi 2cqi; background: rgb(5 10 20 / .8); border-radius: 2cqi; }
    .bso p { display: flex; align-items: center; gap: 1cqi; }
    .bso b { width: 3cqi; font-weight: 400; color: #8f9ab0; }
    .bso i { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: #26324a; }
    .bso .on-b { background: #3ddc84; }
    .bso .on-s { background: var(--flood); }
    .bso .on-o { background: #ff5d6a; }
    .field__inning { position: absolute; right: 0; top: 0; padding: 1cqi 2.4cqi; border-radius: 2cqi; background: var(--stitch); color: #fff; font-weight: 900; font-size: 3.3cqi; }
    .matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqi; padding: 2cqi 2.6cqi; border-radius: 2.6cqi; background: #13203a; }
    .matchup p { display: grid; line-height: 1.25; }
    .matchup p:last-child { text-align: right; }
    .matchup b { font-size: 4cqi; }
    .matchup span { font-size: 2.9cqi; color: #9aa5ba; }
    .matchup__vs { font-family: var(--f-num); color: var(--flood); font-size: 3.6cqi; }
    .feed { display: grid; gap: 1cqi; font-size: 3.1cqi; }
    .feed li { display: grid; grid-template-columns: 9cqi 1fr; gap: 1.6cqi; padding: 1.3cqi 1.6cqi; border-radius: 1.6cqi; background: rgb(255 255 255 / .03); color: #b9c2d3; }
    .feed span { font-family: var(--f-mono); color: #7b879e; font-size: 2.8cqi; }
    .feed .is-new { background: rgb(255 194 58 / .12); color: #fff; box-shadow: inset .8cqi 0 0 var(--flood); }
    .feed .is-event { color: #e6eaf2; font-weight: 700; }
    .feed li:nth-child(n+5) { display: none; }
  }

  @scope (.app--pen) {
    .mound { display: grid; grid-template-columns: 1fr auto; gap: 1cqi 2cqi; align-items: center; padding: 2.6cqi 3cqi; border-radius: 3cqi; background: linear-gradient(135deg, #1a2a48, #122039); }
    .mound > div:first-child { display: grid; }
    .mound > div:first-child b { font-size: 5cqi; }
    .mound__pc { display: grid; justify-items: end; line-height: 1; }
    .mound__pc b { font-family: var(--f-num); font-weight: 400; font-size: 10cqi; color: var(--flood); }
    .mound__warn { grid-column: 1 / -1; font-size: 3cqi; font-weight: 700; color: #ff8b94; }
    .mound__warn::before { content: ''; display: inline-block; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #ff5d6a; margin-right: 1.4cqi; animation: blink 1.2s infinite; }
    .pen__legend, .pen__row { display: grid; grid-template-columns: 7.4cqi 13cqi 1fr 17cqi 13cqi; gap: 1.6cqi; align-items: center; }
    .pen__legend { font-size: 2.7cqi; color: #6f7b93; padding: 0 1cqi; margin-top: 1cqi; }
    .pen { display: grid; gap: 1.2cqi; }
    .pen__row { padding: 1.8cqi 1cqi; border-radius: 2cqi; background: rgb(255 255 255 / .035); }
    .pen__role { text-align: center; font-family: var(--f-num); font-size: 3cqi; padding: .3cqi 0; border-radius: 1.2cqi; background: #22324f; color: #cfd6e4; }
    .pen__row:first-child .pen__role { background: var(--stitch); color: #fff; }
    .pen__name { font-weight: 700; font-size: 3.5cqi; white-space: nowrap; }
    .fatigue { position: relative; height: 1.8cqi; border-radius: 9px; overflow: hidden; background: linear-gradient(90deg, #3ddc84, #ffc23a 55%, #ff5d6a); }
    .fatigue i { position: absolute; inset: 0 0 0 calc(var(--v) * 100%); background: #1b2740; }
    .pen__days { display: flex; gap: .6cqi; }
    .pen__days i { flex: 1; text-align: center; font-style: normal; font-family: var(--f-mono); font-size: 2.6cqi; padding: .4cqi 0; border-radius: 1cqi; background: #18243c; color: #5d6880; }
    .pen__days .on { background: rgb(255 194 58 / .2); color: var(--flood-hi); }
    .pen__days .hi { background: rgb(255 93 106 / .22); color: #ff9aa2; }
    .pen__state { font-size: 2.9cqi; font-weight: 700; text-align: right; white-space: nowrap; }
    .pen__row--ready .pen__state { color: #3ddc84; }
    .pen__row--warm { background: rgb(255 194 58 / .1); box-shadow: inset 0 0 0 1px rgb(255 194 58 / .4); }
    .pen__row--warm .pen__state { color: var(--flood); }
    .pen__row--tired .pen__state { color: #ff8b94; }
    .pen__row--tired .pen__name { color: #9aa5ba; }
    .memo { display: grid; gap: .6cqi; padding: 2.4cqi 3cqi; border-radius: 2.4cqi; background: rgb(255 255 255 / .04); border-left: .9cqi solid var(--grass-3); font-size: 3.2cqi; color: #b9c2d3; }
    .memo b { color: #fff; font-size: 3.4cqi; }
  }

  @scope (.app--draft) {
    .clock { display: flex; justify-content: space-between; align-items: center; padding: 2cqi 3cqi; border-radius: 3cqi; background: #050a14; border: 1px solid rgb(255 194 58 / .35); }
    .clock span { font-size: 3.2cqi; color: #9aa5ba; }
    .clock b { font-family: var(--f-num); font-weight: 400; font-size: 8cqi; color: var(--flood); line-height: 1; text-shadow: 0 0 10px rgb(255 194 58 / .5); }
    .picks { display: grid; gap: .8cqi; font-size: 3.2cqi; }
    .picks li { display: flex; align-items: center; gap: 1.8cqi; padding: 1.4cqi 1.6cqi; border-radius: 1.6cqi; background: rgb(255 255 255 / .035); white-space: nowrap; }
    .picks__no { font-family: var(--f-num); color: #6f7b93; width: 3cqi; }
    .picks__team { color: #9aa5ba; width: 9cqi; }
    .picks__pos { margin-left: auto; color: #7b879e; font-size: 2.8cqi; }
    .picks__mine { border: 1px dashed var(--flood); background: rgb(255 194 58 / .06) !important; color: var(--flood); }
    .prospects { display: grid; gap: 1.4cqi; }
    .prospect { display: grid; grid-template-columns: 17cqi 1fr 9cqi; gap: 2cqi; align-items: center; padding: 2cqi; border-radius: 2.4cqi; background: #13203a; }
    .prospect.is-pick { box-shadow: inset 0 0 0 1.5px var(--flood); }
    .prospect__id { display: grid; line-height: 1.25; }
    .prospect__id b { font-size: 3.6cqi; }
    .prospect__id small { font-size: 2.7cqi; }
    .prospect__tools { display: grid; gap: .7cqi; }
    .prospect__tools span { display: grid; grid-template-columns: 6.4cqi 1fr 4cqi; gap: 1cqi; align-items: center; font-size: 2.6cqi; }
    .prospect__tools small { font-size: 1em; }
    .prospect__tools i { height: 1.3cqi; border-radius: 9px; background: #22324f; position: relative; overflow: hidden; }
    .prospect__tools i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--grass-3); }
    .prospect__tools em { font-style: normal; font-family: var(--f-mono); color: #cfd6e4; text-align: right; }
    .prospect__pot { display: grid; justify-items: center; line-height: 1; padding: 1.4cqi 0; border-radius: 2cqi; background: #0a1222; }
    .prospect__pot b { font-family: var(--f-num); font-weight: 400; font-size: 6cqi; color: var(--flood); }
  }
}

/* pages: 서브 페이지(종이) */
@layer pages {
  html[data-theme="paper"] .masthead { background: rgb(7 13 24 / .96); }

  @scope (.subhead) {
    :scope {
      padding: calc(var(--head-h) + clamp(40px, 6vw, 72px)) 0 clamp(40px, 5vw, 60px);
      background:
        linear-gradient(180deg, rgb(7 13 24 / .2), var(--night) 92%),
        url('../img/hero-ballpark.jpg') 50% 18% / cover;
      color: var(--chalk);
      border-bottom: 4px solid var(--flood);
    }
    .subhead__inner { max-width: calc(960px + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
    .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--chalk-2); }
    .crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--chalk-3); }
    .crumbs a { text-decoration: none; }
    .crumbs a:hover { text-decoration: underline; }
    .subhead__kicker { margin-top: 28px; font-family: var(--f-num); letter-spacing: .3em; color: var(--flood); font-size: 15px; }
    .subhead__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.1; margin-top: 6px; }
    .subhead__lead { margin-top: 12px; color: var(--chalk-2); }
    .subhead__lead b, .subhead__lead time { color: var(--chalk); font-weight: 700; }
  }

  .board { padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 120px); }
  .board__wrap { max-width: calc(960px + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }

  @scope (.board__wrap) {
    .board__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
    .board__filter a { display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--rule); text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ink-2); background: #fff; }
    .board__filter a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .board__filter small { font-family: var(--f-num); font-weight: 400; font-size: 13px; opacity: .8; }
    .board__table { width: 100%; border-top: 2px solid var(--ink); font-size: 15px; }
    .board__table th { font-size: 13px; color: var(--ink-2); font-weight: 700; padding: 12px 10px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
    .board__table td { padding: 16px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
    .c-no, .c-cat, .c-date { width: 1%; white-space: nowrap; text-align: center; color: var(--ink-2); }
    .c-no { font-family: var(--f-mono); font-size: 13px; min-width: 64px; }
    .c-date { font-variant-numeric: tabular-nums; font-size: 14px; }
    .c-title a { text-decoration: none; font-weight: 700; color: var(--ink); }
    .c-title a:hover { text-decoration: underline; }
    .is-pinned { background: var(--paper-3); }
    .pin { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--ink); color: var(--flood); font-family: var(--f-body); font-weight: 900; font-size: 12px; }
    .board__count { margin-top: 14px; font-size: 13px; color: var(--ink-2); text-align: right; }
    @media (max-width: 640px) {
      .board__table, .board__table tbody { display: block; }
      .board__table thead { display: none; }
      .board__table tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 16px 4px; border-bottom: 1px solid var(--rule); }
      .board__table td { padding: 0; border: 0; width: auto; }
      .board__table .c-no { display: none; }
      .board__table .is-pinned .c-no { display: block; grid-row: 1; text-align: left; min-width: 0; }
      .board__table .c-cat { text-align: left; }
      .board__table .c-date { text-align: right; justify-self: end; }
      .board__table .c-title { grid-column: 1 / -1; order: 3; }
      .board__table .is-pinned .c-cat { display: none; }
    }
  }

  .cat { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 900; }
  .cat--notice { background: #e6ecf8; color: #1d3f8f; }
  .cat--event { background: #fbe7d3; color: #8a3e0d; }
  .cat--info { background: #e2efe5; color: #1d5a33; }

  @scope (.post) {
    .post__head { padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
    .post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
    .post__title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.02em; line-height: 1.35; margin-top: 12px; }
    .post__body { padding: 32px 0 40px; font-size: 16.5px; line-height: 1.85; border-bottom: 1px solid var(--rule); }
    .post__body > * + * { margin-top: 16px; }
    .post__body h3 { font-size: 18px; font-weight: 900; margin-top: 32px; padding-left: 12px; border-left: 4px solid var(--clay); line-height: 1.3; }
    .post__body ul { display: grid; gap: 6px; }
    .post__body ul li { padding-left: 18px; position: relative; }
    .post__body ul li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 7px; height: 7px; background: var(--clay); transform: rotate(45deg); }
    .post__note { padding: 14px 18px; background: var(--paper-2); border-radius: 10px; font-size: 14.5px; color: var(--ink-2); }
    .post__nav { display: grid; border-bottom: 1px solid var(--rule); }
    .post__nav p { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 4px; font-size: 15px; }
    .post__nav p + p { border-top: 1px solid #ece4d3; }
    .post__nav span { color: var(--ink-2); font-size: 13px; padding-top: 2px; }
    .post__nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
    .post__nav a:hover { text-decoration: underline; }
    .post__nav em { font-style: normal; color: #a0957d; }
    .post__back { margin-top: 28px; text-align: center; }
  }

  @scope (.coupon) {
    :scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
    .steps__list li { counter-increment: s; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--rule); }
    .steps__list li::before { content: '0' counter(s); display: block; font-family: var(--f-num); font-size: 34px; line-height: 1; color: var(--clay); margin-bottom: 12px; }
    .steps__list b { font-size: 18px; }
    .steps__list p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
    .steps__note { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
    .paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .path { padding: 22px; border-radius: 16px; background: var(--paper-3); border: 1px solid var(--rule); }
    .path > p:last-child { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
    .path__os { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; }
    .path__os .i { width: 22px; height: 22px; }
    .path__route { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .path__route span { padding: 5px 12px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; }
    .path__route span + span::before { content: '→ '; color: var(--flood); }
    .redeem { padding: clamp(22px, 4vw, 36px); border-radius: 20px; background: #fff; border: 1px solid var(--rule); border-top: 6px solid var(--flood); }
    .redeem__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: end; }
    .pf__label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--ink-2); }
    .pf__label small { font-weight: 400; margin-left: 4px; }
    .pf__input { width: 100%; height: 54px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--rule); background: #fff; color: var(--ink); font-size: 17px; }
    .pf__input--code { font-family: var(--f-mono); letter-spacing: .08em; font-size: 18px; text-transform: uppercase; }
    .pf__input:disabled { background: var(--paper-2); color: #9b917c; }
    .pf__input:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(255 194 58 / .55); }
    .pf__input[aria-invalid="true"] { border-color: var(--stitch); }
    .btn { height: 54px; }
    .redeem__msg { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); padding: 12px 14px; border-radius: 10px; background: var(--paper-3); }
    .redeem__msg[data-result="error"] { color: #b3141f; font-weight: 700; background: #fdecee; }
    .redeem__msg[data-result="early"], .redeem__msg[data-result="demo"] { color: #1d5a33; font-weight: 700; background: #e5f2e8; }
    .pf__demo { margin-top: 14px; font-size: 12.5px; color: #8a7f68; }
    .cautions ul { display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
    .cautions li { padding-left: 16px; position: relative; }
    .cautions li::before { content: ''; position: absolute; left: 0; top: .8em; width: 7px; height: 2px; background: var(--ink-2); }
    .cautions a { color: var(--ink); }
    @media (max-width: 767px) {
      .steps__list, .paths__grid { grid-template-columns: 1fr; }
      .redeem__form { grid-template-columns: 1fr; }
    }
  }

  @scope (.prob) {
    :scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .prob__notice { padding: 22px 24px; border-radius: 16px; background: #fff7e0; border: 1px solid #f1d58d; font-size: 14.5px; color: #5b4718; }
    .prob__flag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--ink); color: var(--flood); font-weight: 900; font-size: 13px; margin-bottom: 12px; }
    .prob__notice ul { display: grid; gap: 6px; }
    .prob__notice li { padding-left: 14px; position: relative; }
    .prob__notice li::before { content: ''; position: absolute; left: 0; top: .78em; width: 6px; height: 2px; background: currentColor; }
    .prob__toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
    .prob__toc a { display: block; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--rule); background: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
    .prob__toc a:hover { border-color: var(--ink); }
    .pitem { scroll-margin-top: calc(var(--head-h) + 16px); }
    .pitem__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
    .pitem__head .h2 { margin: 0; }
    .pitem__type { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 900; background: var(--paper-2); color: var(--ink-2); }
    .pitem__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 4px; }
    .pitem__meta div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
    .pitem__meta dt { color: var(--ink-2); flex: none; width: 5.5em; }
    .pitem__note { font-size: 14px; color: var(--ink-2); }
    .grade { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; font-family: var(--f-num); font-weight: 400; font-size: 16px; }
    .grade--s { background: var(--ink); color: var(--flood); }
    .grade--a { background: var(--clay); color: #fff; }
    .grade--b { background: var(--grass-3); color: #fff; }
    .grade--c { background: #cfc6b3; color: var(--ink); }
    .pool summary { cursor: pointer; font-weight: 700; font-size: 14.5px; padding: 6px 0; color: var(--ink); }
    .pool summary:hover { color: var(--clay-2); }
    .prob__law { font-size: 13px; color: var(--ink-2); padding-top: 20px; border-top: 1px solid var(--rule); }
    @media (max-width: 640px) { .pitem__meta { grid-template-columns: 1fr; } }
  }

  @scope (.lost) {
    :scope { min-height: 72vh; display: grid; place-items: center; padding: calc(var(--head-h) + 64px) 0 96px; text-align: center; }
    .lost__inner { max-width: 640px; padding-inline: var(--gut); }
    .lost__code { display: flex; justify-content: center; gap: 8px; }
    .lost__code span { font-family: var(--f-num); font-size: clamp(72px, 14vw, 128px); line-height: 1; padding: 10px 16px 14px; border-radius: 14px; background: var(--ink); color: var(--flood); text-shadow: 0 0 18px rgb(255 194 58 / .5); }
    .lost__kicker { margin-top: 28px; font-family: var(--f-num); letter-spacing: .4em; color: var(--clay-2); }
    .lost__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(30px, 4vw, 44px); margin-top: 6px; }
    .lost__lead { margin-top: 12px; color: var(--ink-2); }
    .lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
  }
}

/* utilities */
@layer utilities {
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  @keyframes lights-on { 0% { opacity: 0; filter: brightness(.3); } 35% { opacity: 1; filter: brightness(.55); } 45% { filter: brightness(.35); } 100% { opacity: 1; filter: brightness(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes blink { 50% { opacity: .25; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}