/* ==========================================================================
   INBRXX — Design Tokens v1.0
   HYROX TRAINING CLUB X
   Confirmed 2026-08-13

   전역에 한 번만 import 한다. 컴포넌트에서 HEX를 직접 쓰지 않는다.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------

   [Latin]  Gotham — Hoefler&Co / Monotype (유료)
            웹 사용 시 별도 웹폰트 라이선스 필요. 데스크탑 라이선스로는 웹 배포 불가.
            공급처가 제공하는 woff2 킷만 사용하고, 임의 변환·재배포하지 않는다.
            사용 웨이트: Book(400) · Medium(500) · Bold(700) · Black(900)

   [한글]   SUIT Variable — 오픈 라이선스. 고담과 같은 지오메트릭 계열이라
            자소 인상이 이어진다. 대안: Pretendard Variable(그로테스크 계열)
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css">

   [숫자]   JetBrains Mono — 기록·스플릿 타임 등 자리 정렬이 필요한 곳에만.
            일반 라벨은 Gotham 대문자로 처리한다.

   @font-face 예시 (자체 호스팅 시):
     @font-face {
       font-family: 'Gotham';
       src: url('/fonts/Gotham-Book.woff2') format('woff2');
       font-weight: 400; font-style: normal; font-display: swap;
     }
   실제 사용하는 2~3개 웨이트만 <link rel="preload"> 한다.
--------------------------------------------------------------------------- */

:root {
  /* ---------- Color · Core ---------- */
  --track:        #121212;  /* 기본 배경 (트랙 표면) */
  --surface:      #1C1C1E;  /* 카드 / 올라온 면 */
  --rule:         #2A2A2D;  /* 보더 / 구분선 */
  --lane:         #EFEDE7;  /* 주 텍스트 · 주 CTA 배경 (레인 라인) */
  --steel:        #8C8D91;  /* 보조 텍스트 */
  --glow:         #E9A64B;  /* 브랜드 액센트 (로고월 간접조명) */
  --glow-press:   #CE8C33;  /* 액센트 hover / pressed */

  /* ---------- Color · State ---------- */
  --success:      #4C9E7A;
  --warning:      #D9A21B;
  --danger:       #D93A3A;

  /* ---------- Color · Partner (HYROX) ----------
     공식 제휴 자산. INBRXX의 브랜드 액센트가 아니다.
     레이스 규격 · 제휴 표기 문맥에서만 사용한다.               */
  --hyrox-yellow:       #FFED00;  /* hyrox.com 공식 값 */
  --hyrox-yellow-press: #E6D500;
  --hyrox-ink:          #121212;  /* 옐로우 위 텍스트는 항상 다크 */

  /* ---------- Color · Semantic aliases ---------- */
  --bg:              var(--track);
  --bg-raised:       var(--surface);
  --text:            var(--lane);
  --text-muted:      var(--steel);
  --text-accent:     var(--glow);
  --border:          var(--rule);
  --border-strong:   var(--lane);
  --focus-ring:      var(--glow);

  --btn-primary-bg:     var(--lane);
  --btn-primary-fg:     var(--track);
  --btn-primary-hover:  #FFFFFF;
  --btn-ghost-fg:       var(--lane);
  --btn-ghost-border:   var(--rule);
  --btn-accent-bg:      var(--glow);
  --btn-accent-fg:      var(--track);   /* 앰버 위 흰 텍스트 금지 (대비 1.8:1) */
  --btn-accent-hover:   var(--glow-press);

  /* ---------- Image overlay ---------- */
  --overlay-top:    rgba(18, 18, 18, .55);
  --overlay-bottom: rgba(18, 18, 18, .92);

  /* ---------- Typography · Family ---------- */
  --font-display: 'Gotham', 'SUIT Variable', 'Pretendard Variable', sans-serif;
  --font-body:    'Gotham', 'SUIT Variable', 'Pretendard Variable', sans-serif;
  --font-ko:      'SUIT Variable', 'Pretendard Variable', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Typography · Size ---------- */
  --fs-display-xl: clamp(40px, 9vw, 72px);
  --fs-display-l:  clamp(32px, 7vw, 52px);
  --fs-h2:         24px;
  --fs-h3:         19px;
  --fs-body-l:     16px;
  --fs-body:       14.5px;
  --fs-caption:    12.5px;
  --fs-label:      10px;

  /* ---------- Typography · Metrics ---------- */
  --lh-display:  0.90;
  --lh-display-l:0.95;
  --lh-heading:  1.25;
  --lh-body:     1.70;

  /* 한글 디스플레이 전용 행간.
     위 0.90 / 0.95 는 고담 대문자 기준이다. 대문자 라틴에는 디센더가 없어
     성립하지만, 한글은 받침이 아래로 내려와 같은 값에서 윗줄과 겹친다.
     한글 헤드라인에는 반드시 아래 값을 쓴다. */
  --lh-display-ko:   1.04;
  --lh-display-ko-l: 1.08;

  --ls-display: -0.020em;  /* 고담은 원형 골격이라 과한 음수 자간을 견디지 못한다 */
  --ls-heading: -0.010em;
  --ls-label:    0.24em;   /* 사이니지 조판. 고담 대문자의 강점 구간 */

  --fw-regular: 400;   /* Gotham Book */
  --fw-medium:  500;   /* Gotham Medium */
  --fw-bold:    700;   /* Gotham Bold */
  --fw-black:   900;   /* Gotham Black */

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter:        20px;
  --section-y:     56px;
  --max-width:     1120px;
  --max-width-read: 800px;

  /* ---------- Radius ---------- */
  --r-control: 2px;   /* 버튼 · 인풋 */
  --r-surface: 3px;   /* 카드 · 미디어 */
  --r-none:    0;     /* 구분선 */

  /* ---------- Motion ---------- */
  --dur-fast:   150ms;
  --dur-mid:    220ms;
  --dur-slow:   400ms;
  --ease:       ease;
  --ease-out:   cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 72px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --section-y: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; }
}


/* ==========================================================================
   Base
   ========================================================================== */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


/* ==========================================================================
   Typography utilities
   ========================================================================== */

.display-xl,
.display-l {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l); }

/* 한글 헤드라인 — 대문자 개념이 없으므로 한글 전용 페이스로 대체.
   고담보다 자간을 더 조이고, 크기를 약 2% 줄여 시각 크기를 맞춘다.
   행간은 디센더(받침) 때문에 라틴 대문자 값을 그대로 쓸 수 없다. */
.display-ko {
  font-family: var(--font-ko);
  font-weight: 800;
  font-size: 0.98em;
  line-height: var(--lh-display-ko);
  letter-spacing: -0.03em;
  text-transform: none;
}
/* display-l 과 함께 쓰면 한 단계 넉넉한 쪽을 쓴다.
   글자가 작을수록 줄 사이가 더 필요하다. */
.display-l.display-ko { line-height: var(--lh-display-ko-l); }

/* 기록·스플릿 타임 등 자리 정렬이 필요한 숫자 */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }

.body-l  { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); color: var(--text-muted); }

/* 시그니처 — 사이니지 테크니컬 캡스. 라벨·에이브로우 전용.
   고담 Medium 대문자 + 넓은 자간. 사이니지 조판과 동일하다. */
.label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.label--accent { color: var(--text-accent); }


/* ==========================================================================
   Lane rule — 시그니처 구분선
   실선은 페이지당 3회 이하
   ========================================================================== */

.lane-solid {
  height: 2px;
  background: var(--lane);
  opacity: .85;
  border: 0;
  margin: 0;
}

.lane-dashed {
  height: 2px;
  border: 0;
  margin: 0;
  opacity: .5;
  background: repeating-linear-gradient(
    to right,
    var(--lane) 0 40px,
    transparent 40px 66px
  );
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn--primary:hover { background: var(--btn-primary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover { border-color: var(--border-strong); }

/* 페이지당 최대 1회 */
.btn--accent {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
}
.btn--accent:hover { background: var(--btn-accent-hover); }


/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-surface);
  padding: var(--space-5);
  /* 그림자 사용 금지 — 면 분리는 보더로만 */
}

.media-overlay {
  position: relative;
  border-radius: var(--r-surface);
  overflow: hidden;
}
.media-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--overlay-top) 0%, var(--overlay-bottom) 100%);
  pointer-events: none;
}


/* ==========================================================================
   Form
   ========================================================================== */

.field {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--text-muted); }
.field:focus { border-color: var(--glow); outline: none; }

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}


/* ==========================================================================
   Layout
   ========================================================================== */

.wrap      { max-width: var(--max-width);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap--read{ max-width: var(--max-width-read); margin-inline: auto; padding-inline: var(--gutter); }
.section   { padding-block: var(--section-y); }


/* ==========================================================================
   HYROX context
   --------------------------------------------------------------------------
   레이스 규격 · 제휴 문맥 전용 스코프.
   이 안에서는 앰버가 완전히 꺼지고 옐로우가 그 자리를 대신한다.
   앰버와 옐로우는 같은 뷰포트에 동시 노출하지 않는다.

   적용 예:  <section data-context="hyrox"> … </section>
            <body data-context="hyrox">  (/hyrox 페이지 전체)
   ========================================================================== */

[data-context="hyrox"] {
  --glow:        var(--hyrox-yellow);
  --glow-press:  var(--hyrox-yellow-press);
  --text-accent: var(--hyrox-yellow);
  --focus-ring:  var(--hyrox-yellow);
}

/* 옐로우 아웃라인 버튼 — hyrox.com의 CTA 패턴.
   면으로 채우지 않기 때문에 주 CTA(흰색)와 위계가 충돌하지 않는다. */
.btn--hyrox {
  background: transparent;
  color: var(--hyrox-yellow);
  border-color: var(--hyrox-yellow);
}
.btn--hyrox:hover {
  background: var(--hyrox-yellow);
  color: var(--hyrox-ink);
}

/* 체험 신청 CTA 전용 — 채운 옐로우. §10-3-1 예외(대표 결정).
   3항의 "채우지 않는다" 를 이 버튼에만 풀어 준다. 다른 옐로우 버튼
   (레이스 참가 문의 등) 은 계속 .btn--hyrox 아웃라인이다.
   면 위 텍스트는 4항대로 항상 --hyrox-ink. 흰 글자 금지. */
.btn--trial {
  background: var(--hyrox-yellow);
  color: var(--hyrox-ink);
  border-color: var(--hyrox-yellow);
}
.btn--trial:hover {
  background: var(--hyrox-yellow-press);
  border-color: var(--hyrox-yellow-press);
}

/* 제휴 표기 배지 — 푸터 락업, 레이스 시뮬레이션 카드 */
.badge--hyrox {
  display: inline-block;
  background: var(--hyrox-yellow);
  color: var(--hyrox-ink);   /* 흰 텍스트 금지 (대비 1.03:1) */
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-control);
}

/* 하이록스 문맥의 레인 룰 */
[data-context="hyrox"] .lane-solid  { background: var(--hyrox-yellow); opacity: .9; }
[data-context="hyrox"] .lane-dashed {
  background: repeating-linear-gradient(
    to right,
    var(--hyrox-yellow) 0 40px,
    transparent 40px 66px
  );
  opacity: .6;
}