@charset "UTF-8";

/* 원샷메이트 — 스포티 아레나 UI
   BEM 블록(block__element--modifier) + 얇은 u- 유틸 레이어, @layer 로 계층화 */

@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:500; font-display:swap; src:url("../fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family:"Pretendard"; font-weight:600; font-display:swap; src:url("../fonts/Pretendard-SemiBold.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:"Arena Display"; font-weight:400; font-display:swap; src:url("../fonts/BlackHanSans-400.woff2") format("woff2"); }

@layer reset, tokens, base, layout, components, utilities, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  h1, h2, h3, h4, h5 { padding: 0; font-size: inherit; font-weight: inherit; }
  img, svg, picture, video { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
}

@layer tokens {
  :root {
    --arena:      #0e2f24;
    --arena-2:    #0a251c;
    --arena-3:    #103a2c;
    --felt:       #0f9d58;
    --felt-2:     #12b366;
    --orange:     #ff7a1a;
    --orange-2:   #ff9647;
    --gold:       #ffc531;
    --chalk:      #3aa0ff;
    --white:      #f6f7f4;
    --ink:        #12140f;
    --line:       rgba(246,247,244,.14);
    --line-2:     rgba(246,247,244,.28);
    --panel:      #123b2c;
    --panel-2:    #0c2c21;
    --muted:      #9db8ad;
    --muted-2:    #6f8c81;

    --shadow:     0 18px 50px rgba(4,18,12,.5);
    --shadow-sm:  0 8px 22px rgba(4,18,12,.4);
    --glow-o:     0 14px 40px rgba(255,122,26,.36);
    --glow-f:     0 14px 40px rgba(15,157,88,.34);

    --r-xs: 8px;
    --r-sm: 12px;
    --r:    18px;
    --r-lg: 26px;
    --r-pill: 999px;

    --font: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    --display: "Arena Display", "Pretendard", system-ui, sans-serif;

    --wrap: 1160px;
    --gutter: clamp(18px, 4vw, 34px);
    --head-h: 70px;
  }
}

@layer base {
  body {
    font-family: var(--font);
    color: var(--white);
    background: var(--arena);
    background-image:
      radial-gradient(1200px 620px at 82% -8%, rgba(15,157,88,.30), transparent 60%),
      radial-gradient(760px 520px at 4% 6%, rgba(255,122,26,.14), transparent 58%),
      radial-gradient(900px 620px at 96% 60%, rgba(58,160,255,.10), transparent 62%);
    background-attachment: fixed;
    line-height: 1.68;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3 { line-height: 1.08; letter-spacing: -.01em; }
  h4, h5 { line-height: 1.25; }
  strong, b { font-weight: 700; }
  p a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
  :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: var(--orange); color: #fff; }
  body.is-locked { overflow: hidden; }
}

@layer layout {
  .u-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: clamp(3.4rem, 7vw, 6rem); position: relative; }
  .section--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }

  .section__head { max-width: 640px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
  .section__head--center { margin-inline: auto; text-align: center; }
  .section__kicker {
    display: inline-flex; align-items: center; gap: .5em;
    font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold); margin-bottom: .8rem;
  }
  .section__kicker::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
  .section__kicker svg { width: 1.1em; height: 1.1em; }
  .section__title {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: 0;
  }
  .section__lead { margin-top: .9rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); }
}

@layer components {

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .82em 1.5em; border-radius: var(--r-pill);
    font-weight: 700; font-size: 1rem; line-height: 1;
    transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease;
    will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn__icon { width: 1.15em; height: 1.15em; }
  .btn--primary { background: var(--orange); color: #241000; box-shadow: var(--glow-o); }
  .btn--primary:hover { background: var(--orange-2); }
  .btn--felt { background: var(--felt); color: #04160e; box-shadow: var(--glow-f); }
  .btn--felt:hover { background: var(--felt-2); }
  .btn--ghost { background: rgba(246,247,244,.06); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .btn--ghost:hover { background: rgba(246,247,244,.12); }
  .btn--lg { padding: 1em 1.9em; font-size: 1.06rem; }
  .btn--block { width: 100%; }

  /* ---- header ---- */
  .header {
    position: sticky; top: 0; z-index: 60; height: var(--head-h);
    display: flex; align-items: center;
    background: rgba(10,37,28,.55); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .25s, background-color .25s;
  }
  .header.is-stuck { background: rgba(9,33,25,.9); border-bottom-color: var(--line); }
  .header__inner { display: flex; align-items: center; gap: 1.4rem; width: 100%; }
  .header__logo { height: 30px; width: auto; }
  .header__logo svg, .header__logo img { height: 30px; }
  .nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
  .nav__link {
    padding: .5em .8em; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem;
    color: var(--muted); transition: color .18s, background-color .18s;
  }
  .nav__link:hover { color: var(--white); background: rgba(246,247,244,.06); }
  .nav__link--active { color: var(--white); }
  .nav__link--active::after {
    content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
    background: var(--orange);
  }
  .nav__cta { margin-left: .4rem; }
  .header__burger { display: none; margin-left: auto; padding: .4em; color: var(--white); }
  .header__burger svg { width: 26px; height: 26px; }

  .drawer {
    position: fixed; inset: 0; z-index: 70; display: none;
    background: rgba(6,22,16,.72); backdrop-filter: blur(6px);
  }
  .drawer.is-open { display: block; }
  .drawer__panel {
    position: absolute; top: 0; right: 0; width: min(82vw, 340px); height: 100%;
    background: var(--arena-2); border-left: 1px solid var(--line);
    padding: 1.3rem; display: flex; flex-direction: column; gap: .4rem;
    box-shadow: var(--shadow);
  }
  .drawer__top { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
  .drawer__close { padding: .3em; color: var(--white); }
  .drawer__close svg { width: 26px; height: 26px; }
  .drawer__link { padding: .8em .6em; border-radius: var(--r-sm); font-weight: 600; font-size: 1.05rem; }
  .drawer__link:hover { background: rgba(246,247,244,.06); }

  /* ---- hero ---- */
  .hero { position: relative; overflow: hidden; }
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(8,28,20,.94) 0%, rgba(8,28,20,.7) 42%, rgba(8,28,20,.15) 100%),
      linear-gradient(0deg, rgba(8,28,20,.85) 0%, transparent 42%);
  }
  .hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
  .hero__grid { display: grid; gap: 2rem; align-items: center; }
  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .4em .9em; border-radius: var(--r-pill);
    background: rgba(255,122,26,.16); color: var(--orange-2);
    font-weight: 700; font-size: .82rem; box-shadow: inset 0 0 0 1px rgba(255,122,26,.4);
  }
  .hero__eyebrow svg { width: 1.15em; height: 1.15em; }
  .qr__label { line-height: 1.3; }
  .hero__title {
    font-family: var(--display); font-weight: 400; margin-top: 1.1rem;
    font-size: clamp(2.6rem, 8vw, 4.7rem); line-height: .98; letter-spacing: -.005em;
    text-shadow: 0 6px 30px rgba(4,18,12,.5);
  }
  .hero__title em { font-style: normal; color: var(--orange); }
  .hero__lead { margin-top: 1.1rem; max-width: 34ch; color: #d7e6df; font-size: clamp(1.02rem, 1.7vw, 1.2rem); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
  .hero__store { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
  .hero__qr { display: none; }

  /* ---- store badges / rating / qr ---- */
  .badges { display: flex; flex-wrap: wrap; gap: .7rem; }
  .badges__link { display: block; transition: transform .16s ease; }
  .badges__link:hover { transform: translateY(-2px); }
  .badges__img { height: 50px; width: auto; }

  .rating { display: flex; align-items: center; gap: .6rem; }
  .rating__stars { display: inline-flex; gap: 2px; color: var(--gold); }
  .rating__stars svg { width: 18px; height: 18px; }
  .rating__meta { font-size: .9rem; color: #d7e6df; }
  .rating__meta strong { color: var(--white); }

  .qr { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: var(--r-sm); background: rgba(246,247,244,.06); box-shadow: inset 0 0 0 1px var(--line); }
  .qr__img { width: 74px; height: 74px; border-radius: 10px; }
  .qr__label { font-size: .82rem; color: var(--muted); max-width: 12ch; }

  /* ---- live pill ---- */
  .live {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .5em 1em; border-radius: var(--r-pill);
    background: rgba(9,33,25,.7); box-shadow: inset 0 0 0 1px var(--line-2);
    font-weight: 600; font-size: .92rem;
  }
  .live__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,.6); animation: pulse 1.8s ease-out infinite; }
  .live__num { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gold); }

  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,77,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }

  /* ---- generic panel / card ---- */
  .panel { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }

  /* ---- stat strip ---- */
  .stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat { text-align: center; padding: 1.3rem 1rem; }
  .stat__num { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.9rem); color: var(--white); line-height: 1; }
  .stat__num em { font-style: normal; color: var(--orange); }
  .stat__label { margin-top: .5rem; color: var(--muted); font-size: .92rem; }

  /* ---- showcase (sport tabs) ---- */
  .showcase__grid { display: grid; gap: 2rem; align-items: center; }
  .showcase__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
  .showcase__tab {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .6em 1.1em; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem;
    color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .18s;
  }
  .showcase__tab svg { width: 1.1em; height: 1.1em; }
  .showcase__tab:hover { color: var(--white); }
  .showcase__tab[aria-selected="true"] { color: #04160e; background: var(--felt); box-shadow: none; }
  .showcase__panels { display: grid; gap: 1.4rem; }
  .showcase__panel { display: grid; gap: 1.4rem 2rem; grid-template-columns: 1fr; align-items: center; }
  .showcase__panel[hidden] { display: none; }
  .showcase__stage { display: flex; justify-content: center; align-items: center; }
  .showcase__phone { width: min(280px, 74vw); height: auto; align-self: center; border-radius: 18px; box-shadow: var(--shadow); }
  .showcase__body h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2rem); }
  .showcase__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.1rem; }
  .chip {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .35em .8em; border-radius: var(--r-pill);
    background: rgba(246,247,244,.06); box-shadow: inset 0 0 0 1px var(--line);
    font-size: .84rem; font-weight: 600; color: #d7e6df;
  }
  .chip svg { width: 1em; height: 1em; color: var(--gold); }
  .featlist { display: grid; gap: .6rem; margin-top: 1rem; }
  .featlist__item { display: flex; gap: .6rem; align-items: flex-start; color: #d7e6df; }
  .featlist__item svg { flex: none; width: 20px; height: 20px; color: var(--felt-2); margin-top: 3px; }

  /* ---- game catalog cards ---- */
  .game-card {
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2); }
  .game-card__art { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
  .game-card__art img { width: 100%; height: 100%; object-fit: cover; }
  .game-card__tag {
    position: absolute; top: .8rem; left: .8rem;
    padding: .3em .7em; border-radius: var(--r-pill); font-size: .74rem; font-weight: 800;
    background: rgba(9,33,25,.8); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .game-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
  .game-card__title { font-family: var(--display); font-weight: 400; font-size: 1.5rem; display: flex; align-items: center; gap: .5rem; }
  .game-card__title svg { width: 1.1em; height: 1.1em; color: var(--orange); }
  .game-card__desc { color: var(--muted); font-size: .95rem; }
  .game-card__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); }
  .game-card__spec { font-size: .84rem; color: #cfe1d9; }
  .game-card__spec b { color: var(--muted-2); font-weight: 600; display: block; font-size: .72rem; letter-spacing: .04em; }
  .difficulty { display: inline-flex; gap: 3px; }
  .difficulty__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
  .difficulty__pip--on { background: var(--orange); }

  /* ---- mode cards ---- */
  .modes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .mode {
    padding: 1.5rem; border-radius: var(--r-lg); position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  }
  .mode__icon {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
    background: rgba(255,122,26,.16); color: var(--orange); margin-bottom: .9rem;
  }
  .mode__icon svg { width: 24px; height: 24px; }
  .mode__title { font-size: 1.2rem; font-weight: 700; }
  .mode__desc { margin-top: .4rem; color: var(--muted); font-size: .94rem; }

  /* ---- tier ladder ---- */
  .ladder { display: grid; gap: .7rem; }
  .tier-row {
    display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 1rem;
    padding: .9rem 1.2rem; border-radius: var(--r);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .tier-row__badge {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    font-family: var(--display); font-size: 1.1rem; color: #04160e;
  }
  .tier-row__name { font-weight: 700; font-size: 1.08rem; }
  .tier-row__sub { color: var(--muted); font-size: .86rem; }
  .tier-row__rp { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; text-align: right; }
  .tier-row__rp span { display: block; color: var(--muted-2); font-size: .72rem; font-weight: 500; }

  /* ---- leaderboard ---- */
  .leaderboard { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .lb { min-width: 560px; font-size: .95rem; }
  .lb thead th {
    text-align: left; padding: .9rem 1.1rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-2); background: var(--panel-2); border-bottom: 1px solid var(--line);
  }
  .lb tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .lb tbody tr:last-child td { border-bottom: 0; }
  .lb tbody tr:hover { background: rgba(246,247,244,.03); }
  .lb__rank { font-family: var(--display); font-size: 1.15rem; width: 3ch; }
  .lb__rank--1 { color: var(--gold); }
  .lb__rank--2 { color: #cfd8d3; }
  .lb__rank--3 { color: #d69a5c; }
  .lb__player { display: flex; align-items: center; gap: .7rem; }
  .lb__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04160e; font-size: .9rem; }
  .lb__name { font-weight: 700; }
  .lb__club { color: var(--muted); font-size: .82rem; }
  .lb__num { font-variant-numeric: tabular-nums; }
  .lb__wr { color: var(--felt-2); font-weight: 700; }
  .tag-tier { display: inline-block; padding: .2em .6em; border-radius: var(--r-pill); font-size: .76rem; font-weight: 800; color: #04160e; }

  /* ---- club cards / versus ---- */
  .clubs-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .club {
    padding: 1.4rem; border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  }
  .club__top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
  .club__crest { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); color: #04160e; font-size: 1.2rem; flex: none; }
  .club__name { font-weight: 800; font-size: 1.12rem; }
  .club__tag { color: var(--muted); font-size: .82rem; }
  .club__stats { display: flex; gap: 1.2rem; margin: .9rem 0; }
  .club__stat b { font-family: var(--display); font-size: 1.3rem; color: var(--gold); display: block; line-height: 1; }
  .club__stat span { color: var(--muted); font-size: .78rem; }
  .club__desc { color: var(--muted); font-size: .92rem; }
  .club__recruit { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--felt-2); font-weight: 700; }

  .versus {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
    padding: 1.6rem; border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  }
  .versus__side { text-align: center; }
  .versus__crest { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto .6rem; font-family: var(--display); color: #04160e; font-size: 1.5rem; }
  .versus__name { font-weight: 800; }
  .versus__score { font-family: var(--display); font-size: 1.8rem; color: var(--white); }
  .versus__vs { font-family: var(--display); font-size: 1.6rem; color: var(--orange); }

  /* ---- reviews ---- */
  .reviews { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .review { padding: 1.4rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .review__stars { display: inline-flex; gap: 2px; color: var(--gold); margin-bottom: .7rem; }
  .review__stars svg { width: 16px; height: 16px; }
  .review__text { color: #dfeae5; }
  .review__by { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; }
  .review__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #04160e; font-weight: 800; font-size: .85rem; }
  .review__meta b { display: block; font-size: .92rem; }
  .review__meta span { color: var(--muted); font-size: .8rem; }

  /* ---- banner / cta band ---- */
  .band { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .band__media { position: absolute; inset: 0; z-index: 0; }
  .band__media img { width: 100%; height: 100%; object-fit: cover; }
  .band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,28,20,.95) 0%, rgba(8,28,20,.72) 40%, rgba(8,28,20,.12) 100%); }
  .band__body { position: relative; z-index: 2; padding: clamp(2.2rem, 6vw, 4rem); max-width: 33rem; }
  .band__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 4.6vw, 3rem); }
  .band__lead { margin-top: .8rem; color: #d7e6df; }
  .band__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; }

  /* ---- pre-register form ---- */
  .form { display: grid; gap: 1rem; }
  .field { display: grid; gap: .4rem; }
  .field__label { font-weight: 600; font-size: .92rem; }
  .field__label span { color: var(--orange); }
  .field__input, .field__select {
    padding: .8em 1em; border-radius: var(--r-sm); color: var(--white);
    background: rgba(6,22,16,.6); box-shadow: inset 0 0 0 1.5px var(--line-2);
    transition: box-shadow .18s;
  }
  .field__input::placeholder { color: var(--muted-2); }
  .field__input:focus, .field__select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--orange); }
  .field--check { display: flex; align-items: flex-start; gap: .6rem; }
  .field--check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--orange); }
  .field--check label { font-size: .88rem; color: var(--muted); }
  .form__note { font-size: .82rem; color: var(--muted-2); }
  .form__success {
    display: none; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-radius: var(--r);
    background: rgba(15,157,88,.16); box-shadow: inset 0 0 0 1px rgba(15,157,88,.5); color: #d7f5e6;
  }
  .form__success svg { width: 24px; height: 24px; color: var(--felt-2); flex: none; }
  .form.is-done .form__body { display: none; }
  .form.is-done .form__success { display: flex; }

  /* ---- FAQ ---- */
  .faq { display: grid; gap: .7rem; }
  .faq__item { border-radius: var(--r); background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 700; text-align: left; }
  .faq__q svg { width: 20px; height: 20px; color: var(--orange); transition: transform .2s; flex: none; }
  .faq__item.is-open .faq__q svg { transform: rotate(90deg); }
  .faq__a { padding: 0 1.3rem; max-height: 0; overflow: hidden; color: var(--muted); transition: max-height .28s ease, padding .28s ease; }
  .faq__item.is-open .faq__a { padding: 0 1.3rem 1.2rem; max-height: 400px; }

  /* ---- footer ---- */
  .footer { border-top: 1px solid var(--line); background: var(--arena-2); padding-block: clamp(2.6rem, 5vw, 3.6rem); margin-top: 2rem; }
  .footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__logo { height: 30px; margin-bottom: 1rem; }
  .footer__blurb { color: var(--muted); font-size: .92rem; max-width: 34ch; }
  .footer__social { display: flex; gap: .5rem; margin-top: 1.1rem; }
  .footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(246,247,244,.06); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: color .18s, background-color .18s; }
  .footer__social a:hover { color: var(--white); background: rgba(246,247,244,.12); }
  .footer__social svg { width: 20px; height: 20px; }
  .footer__col h4 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .9rem; }
  .footer__col ul { display: grid; gap: .55rem; }
  .footer__col a, .footer__col button { color: var(--muted); font-size: .93rem; }
  .footer__col a:hover, .footer__col button:hover { color: var(--white); }
  .footer__contact { display: grid; gap: .5rem; color: var(--muted); font-size: .9rem; }
  .footer__contact li { display: flex; align-items: center; gap: .55rem; }
  .footer__contact svg { width: 17px; height: 17px; color: var(--felt-2); flex: none; }
  .footer__legal { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--muted-2); font-size: .84rem; }

  /* ---- legal modal ---- */
  .modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.2rem; }
  .modal[hidden] { display: none; }
  .modal__backdrop { position: absolute; inset: 0; background: rgba(4,16,11,.72); backdrop-filter: blur(4px); }
  .modal__panel {
    position: relative; width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
    background: var(--arena-3); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
    box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2);
  }
  .modal__close { position: sticky; top: 0; float: right; margin: -.4rem -.4rem 0 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(246,247,244,.08); color: var(--white); }
  .modal__close svg { width: 20px; height: 20px; }
  .modal__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); }
  .modal__updated { color: var(--muted); font-size: .86rem; margin: .3rem 0 1.2rem; }
  .modal__panel h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .5rem; color: var(--gold); }
  .modal__panel p { color: #d7e6df; font-size: .94rem; margin-bottom: .6rem; }
  .modal__panel ul:not([class]) { display: grid; gap: .4rem; padding-left: 1.1rem; list-style: disc; color: #d7e6df; font-size: .93rem; }
  .modal__panel ul:not([class]) li { margin-left: .2rem; }
  .legal-table { margin: .6rem 0 1rem; font-size: .88rem; }
  .legal-table th, .legal-table td { text-align: left; padding: .5rem .7rem; border: 1px solid var(--line); color: #d7e6df; }
  .legal-table th { background: var(--panel-2); color: var(--muted); font-weight: 700; }

  /* ---- pips (난이도 · 추천도) ---- */
  .pips { display: inline-flex; gap: 3px; vertical-align: middle; }
  .pips__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
  .pips__dot--on.pips__dot--heat { background: var(--orange); }
  .pips__dot--on.pips__dot--gold { background: var(--gold); }

  /* ---- 종목 스펙 비교표 + 연동 프리뷰 ---- */
  .spec { display: grid; gap: 1.6rem; align-items: start; }
  .spec__table-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .spec__table { min-width: 540px; font-size: .94rem; }
  .spec__table thead th {
    text-align: left; padding: .85rem 1rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-2); background: var(--panel-2); border-bottom: 1px solid var(--line);
  }
  .spec__table tbody td, .spec__table tbody th { padding: .78rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; color: #cfe1d9; font-weight: 500; }
  .spec__table tbody tr:last-child td, .spec__table tbody tr:last-child th { border-bottom: 0; }
  .spec__sport { font-weight: 700; color: var(--white); display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
  .spec__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,122,26,.16); color: var(--orange); flex: none; }
  .spec__ico svg { width: 18px; height: 18px; }
  .spec__row { cursor: pointer; transition: background-color .18s, box-shadow .18s; }
  .spec__row:hover { background: rgba(246,247,244,.04); }
  .spec__row.is-active { background: rgba(255,122,26,.10); box-shadow: inset 3px 0 0 var(--orange); }

  .spec__preview { display: grid; gap: 1rem; align-content: start; }
  .spec__tabs { margin-bottom: 0; }
  .spec__panel {
    display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 150px) 1fr; align-items: center;
    padding: 1.1rem; border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: inset 0 0 0 1px var(--line);
  }
  .spec__shot { width: 100%; border-radius: 14px; box-shadow: var(--shadow-sm); }
  .spec__panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
  .spec__panel p { color: var(--muted); font-size: .92rem; margin-top: .45rem; }

  /* ---- 토너먼트 브라켓 ---- */
  .bracket-scroll { overflow-x: auto; padding-bottom: .5rem; }
  .bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: clamp(1rem, 3.2vw, 2.6rem); min-width: 780px; }
  .bracket__round { display: flex; flex-direction: column; }
  .bracket__round-label { font-family: var(--display); font-weight: 400; font-size: .95rem; color: var(--gold); text-align: center; margin-bottom: 1rem; letter-spacing: .04em; }
  .bracket__matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 1rem; }
  .bracket__match { position: relative; display: grid; gap: 2px; border-radius: var(--r); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
  .bracket__round:not(:last-child) .bracket__match::after {
    content: ""; position: absolute; top: 50%; left: 100%;
    width: clamp(.5rem, 1.6vw, 1.3rem); height: 2px; background: var(--line-2);
  }
  .bracket__seed { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .55rem .7rem; background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
  .bracket__seed--win { background: rgba(255,122,26,.14); }
  .bracket__crest { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--display); font-size: .82rem; color: #04160e; flex: none; }
  .bracket__team { font-weight: 700; font-size: .9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bracket__seed--win .bracket__team { color: var(--white); }
  .bracket__score { font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--muted-2); }
  .bracket__seed--win .bracket__score { color: var(--orange); }
  .bracket__round--champ .bracket__matches { justify-content: center; }
  .bracket__champ {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding: 1.3rem 1.1rem;
    border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,197,49,.16), var(--panel-2));
    box-shadow: inset 0 0 0 1px rgba(255,197,49,.42);
  }
  .bracket__trophy { width: 118px; height: 118px; border-radius: 16px; box-shadow: var(--shadow-sm); }
  .bracket__champ-name { font-family: var(--display); font-size: 1.3rem; color: var(--gold); }
  .bracket__champ-sub { color: var(--muted); font-size: .82rem; }

  /* ---- 클럽 리그 순위표 (board) ---- */
  .board-layout { display: grid; gap: 1.6rem; align-items: start; }
  .board-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .board { min-width: 520px; font-size: .94rem; }
  .board thead th {
    text-align: left; padding: .85rem 1rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-2); background: var(--panel-2); border-bottom: 1px solid var(--line);
  }
  .board thead th:nth-child(n+3) { text-align: center; }
  .board tbody td { padding: .78rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .board tbody tr:last-child td { border-bottom: 0; }
  .board tbody tr:hover { background: rgba(246,247,244,.03); }
  .board__rank { font-family: var(--display); font-size: 1.1rem; width: 3ch; color: var(--muted); }
  .board__rank--1 { color: var(--gold); }
  .board__rank--2 { color: #cfd8d3; }
  .board__rank--3 { color: #d69a5c; }
  .board__club { display: flex; align-items: center; gap: .7rem; }
  .board__crest { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-size: .9rem; color: #04160e; flex: none; }
  .board__name { font-weight: 700; }
  .board__tag { color: var(--muted); font-size: .8rem; }
  .board__num { font-variant-numeric: tabular-nums; text-align: center; color: #cfe1d9; }
  .board__pts { color: var(--gold); font-weight: 800; }
  .board__form { text-align: center; }
  .form-row { display: inline-flex; gap: 3px; }
  .form-dot { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: #04160e; }
  .form-dot.is-w { background: var(--felt-2); }
  .form-dot.is-l { background: rgba(246,247,244,.12); color: var(--muted); }
  .form-dot.is-d { background: var(--muted-2); }

  .board-rail { display: grid; gap: 1rem; align-content: start; padding: 1.3rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .board-rail__media { border-radius: var(--r); overflow: hidden; }
  .board-rail__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 3; }
  .board-rail__title { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
  .board-rail__desc { color: var(--muted); font-size: .9rem; }
  .recruit-strip { display: flex; flex-wrap: wrap; gap: .5rem; }

  /* ---- misc ---- */
  .skip {
    position: absolute; left: -999px; top: 0; z-index: 100;
    padding: .7em 1.1em; border-radius: 0 0 var(--r-sm) 0;
    background: var(--orange); color: #241000; font-weight: 700;
  }
  .skip:focus { left: 0; }
  .eyebrow-band { padding-block: .7rem; background: var(--arena-2); border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
  .breadcrumb { display: flex; align-items: center; gap: .5rem; }
  .breadcrumb a:hover { color: var(--white); }
}

@layer utilities {
  .u-grid { display: grid; }
  .u-flex { display: flex; }
  .u-wrapflex { display: flex; flex-wrap: wrap; }
  .u-center { align-items: center; }
  .u-between { justify-content: space-between; }
  .u-gap-sm { gap: .6rem; }
  .u-gap { gap: 1rem; }
  .u-gap-lg { gap: 1.6rem; }
  .u-mt { margin-top: 1.2rem; }
  .u-mt-lg { margin-top: 2rem; }
  .u-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .u-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .u-cols-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .u-text-center { text-align: center; }
  .u-muted { color: var(--muted); }
  .u-gold { color: var(--gold); }
  .u-orange { color: var(--orange); }
  .u-hide { display: none; }
  .u-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* tier / club color helpers */
  .t-bronze { background: linear-gradient(135deg, #b7793f, #8a5a2c); }
  .t-silver { background: linear-gradient(135deg, #d5dde0, #a7b3b8); }
  .t-gold   { background: linear-gradient(135deg, #ffd764, #e6a417); }
  .t-plat   { background: linear-gradient(135deg, #7fe6d0, #37b8a0); }
  .t-dia    { background: linear-gradient(135deg, #7cc4ff, #3a86e6); }
  .t-master { background: linear-gradient(135deg, #ff9a5a, #ff5f6d); }
}

@layer motion {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-in { opacity: 1; transform: none; }

  @media (max-width: 900px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__col--brand { grid-column: 1 / -1; }
    .u-cols-3 { grid-template-columns: 1fr; }
  }

  @media (min-width: 760px) {
    .hero__grid { grid-template-columns: 1.15fr .85fr; }
    .hero__qr { display: flex; }
    .showcase__grid { grid-template-columns: .9fr 1.1fr; }
    .showcase__panel { grid-template-columns: minmax(0, 300px) 1fr; }
  }

  @media (min-width: 900px) {
    .spec { grid-template-columns: 1.2fr .8fr; }
    .board-layout { grid-template-columns: 1.55fr .8fr; }
  }

  @media (max-width: 760px) {
    .nav { display: none; }
    .header__burger { display: block; }
    .versus { grid-template-columns: 1fr; }
    .versus__vs { display: none; }
    .footer__grid { grid-template-columns: 1fr; }
    .tier-row { grid-template-columns: 46px 1fr; }
    .tier-row__rp { grid-column: 2; text-align: left; }
  }

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