@charset "utf-8";
/* ============================================================
   inbrxx — 사이트 컴포넌트
   HYROX TRAINING CLUB X

   정본: docs/design/design-spec.md (v1.3, CONFIRMED)
   토큰: css/tokens.css — 이 파일보다 먼저 로드된다.

   이 파일에는 HEX 를 쓰지 않는다. 색·간격·서체·라운드·모션은
   전부 tokens.css 의 변수를 참조한다. 정본 §10 체크리스트 2번.

   tokens.css 가 이미 제공하는 것은 여기서 다시 정의하지 않는다:
     body · .btn(.btn--primary/ghost/accent) · .card · .field
     .wrap · .section · .label · .lane-solid/.lane-dashed
     .display-xl/.display-l/.display-ko · .h2 · .h3 · .body-l
     .caption · .num · .media-overlay
   ============================================================ */

/* ---------- 기본 보강 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  /* 한글은 단어 중간에서 끊기면 안 된다 */
  word-break:keep-all;overflow-wrap:break-word;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
hr{display:none}

/* 스크린리더 전용 (그누보드 공통 클래스명) */
.sound_only,.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
#skip_to_container a{position:absolute;left:-9999px}
#skip_to_container a:focus{
  left:0;top:0;z-index:1000;padding:var(--space-3) var(--space-4);
  background:var(--lane);color:var(--track);font-weight:var(--fw-bold);
}

/* ---------- 레이아웃 ---------- */
.sec{padding-block:var(--section-y)}
.sec-sm{padding-block:calc(var(--section-y) * .55)}
.sec-hd{margin-bottom:var(--space-6)}
.sec-hd h2{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-display-l);line-height:var(--lh-display-ko-l);
  letter-spacing:-.03em;margin-top:var(--space-4);
}
.sec-hd p{
  margin-top:var(--space-4);color:var(--text-muted);
  max-width:52ch;font-size:var(--fs-body-l);line-height:var(--lh-body);
}

/* 시그니처 라벨. 정본 §2-2 — 넓은 자간의 대문자.
   기존 마크업의 .eyebrow 를 정본의 .label 롤에 연결한다. */
.eyebrow,.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);
  display:flex;align-items:center;gap:var(--space-2);margin:0;
}
.eyebrow::before{
  content:'';width:24px;height:2px;flex:none;background:var(--lane);opacity:.85;
}
.eyebrow-c{justify-content:center}
.eyebrow--accent,.label--accent{color:var(--text-accent)}
.eyebrow--accent::before{background:var(--glow);opacity:1}

/* ---------- 버튼 (레거시 클래스명 연결) ----------
   .btn / .btn--primary / .btn--ghost / .btn--accent / .btn--hyrox 는
   전부 tokens.css 가 정의한다. 여기서 .btn 을 다시 선언하면 안 된다 —
   theme.css 가 나중에 로드되므로 border 축약형이 .btn--hyrox 의
   border-color 를 덮어 아웃라인이 사라진다(실제로 사라졌다).

   그래서 이 블록은 **기존 마크업의 옛 이름만** 정본 롤에 이어 준다.
   pill(999px) 은 정본 §3 금지 — 라운드는 tokens 의 --r-control(2px). */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:14px;line-height:1;padding:14px var(--space-5);
  border-radius:var(--r-control);border:1px solid transparent;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             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)}
/* 체험 신청 CTA — 하이록스 옐로우.
   색과 테두리는 tokens.css 의 .btn--hyrox 가 정본이고, 여기서는
   .btn-primary/.btn-ghost 와 같은 치수만 맞춘다. 배경·글자색을 다시
   쓰지 않기 때문에 정본을 덮어쓰지 않는다.
   정본 §10-3-3 이 "채운 옐로우 CTA"를 금지하므로 면이 아니라 선으로 낸다. */
.btn--hyrox,.btn--trial{
  gap:var(--space-2);text-align:center;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.btn-lg{padding:18px var(--space-6);font-size:var(--fs-body-l)}
.btn-sm{padding:10px var(--space-4);font-size:var(--fs-caption)}
.btn-block{display:flex;width:100%}
/* hover 시 크기 변화·그림자 금지 (정본 §5-1) */

/* ---------- 헤더 ---------- */
.hd{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--track) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-mid) var(--ease);
}
.hd.is-stuck{border-bottom-color:var(--border)}
.hd-in{display:flex;align-items:center;gap:var(--space-5);height:64px}
.logo{
  font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;color:var(--text);
}
/* 워드마크 옆에 액센트 면을 붙이지 않는다 (정본 §10-3 규칙 5).
   글자색만 바꾼다. */
.logo span{color:var(--text)}
.logo img{max-height:28px;width:auto}
.gnb{display:flex;gap:var(--space-1);margin-left:auto}
.gnb-item{position:relative}
.gnb a{
  display:block;
  padding:var(--space-2) var(--space-3);border-radius:var(--r-control);
  font-weight:var(--fw-medium);font-size:var(--fs-caption);color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.gnb a:hover,.gnb a:focus-visible{
  color:var(--text);background:color-mix(in srgb,var(--lane) 8%,transparent);
}
/* 현재 위치 — 액센트가 아니라 대비로 표시한다 (정본 §0-3, §8) */
.gnb a[aria-current="page"]{
  color:var(--text);
  box-shadow:inset 0 -2px 0 var(--lane);
  border-radius:0;
}
/* 하위 항목이 현재 위치면 상위는 계열만 표시한다.
   그 페이지가 아니므로 aria-current 는 쓰지 않는다. */
.gnb-item.is-section > a{color:var(--text)}

/* ---------- 2단계 메뉴 (관리자 메뉴설정의 하위 메뉴) ---------- */
.gnb-sub{
  position:absolute;top:100%;left:0;min-width:max(100%,160px);
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-2);
  /* 그림자 금지 (정본 §8) — 면 분리는 보더로만 */
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease-out),
             visibility var(--dur-fast) var(--ease);
  z-index:10;
}
/* hover 와 focus-within 양쪽으로 연다. 키보드로 Tab 해 들어가도 펼쳐진다. */
.gnb-item:hover > .gnb-sub,
.gnb-item:focus-within > .gnb-sub{
  opacity:1;visibility:visible;transform:none;
}
.gnb-sub a{white-space:nowrap}
.gnb-empty{color:var(--text-muted);font-size:var(--fs-caption);margin-left:auto}

/* ---------- 모바일 메뉴 ---------- */
.nav-toggle{
  display:none;margin-left:var(--space-2);
  width:40px;height:40px;padding:0;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--r-control);cursor:pointer;
  align-items:center;justify-content:center;
  transition:border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover{border-color:var(--border-strong)}
.nav-bars{display:block;width:18px;height:12px;position:relative}
.nav-bars i{
  position:absolute;left:0;width:100%;height:2px;background:var(--lane);
  transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast) var(--ease);
}
.nav-bars i:nth-child(1){top:0}
.nav-bars i:nth-child(2){top:5px}
.nav-bars i:nth-child(3){top:10px}
/* 열리면 X — 회전은 220ms, 정본 §7 아코디언과 같은 이징 */
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mnav{
  position:fixed;left:0;right:0;top:56px;bottom:0;z-index:99;
  background:var(--track);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-block:var(--space-5) var(--space-8);
}
.mnav[hidden]{display:none}
.mnav-list{border-top:1px solid var(--border)}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:var(--space-5);border-bottom:1px solid var(--border);
  font-size:var(--fs-body-l);font-weight:var(--fw-medium);color:var(--text);
}
.mnav-list a[aria-current="page"]{color:var(--text-muted)}
.mnav-list a[aria-current="page"]::after{
  content:'현재';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-accent);
}
/* 2단계는 접지 않고 그대로 편다. 항목이 몇 개 안 되는 사이트라
   한 번 더 누르게 만드는 쪽이 손해다. */
.mnav-sublist{
  padding-left:var(--space-4);
  border-bottom:1px solid var(--border);
}
.mnav-sublist a{
  border-bottom:0;padding-block:var(--space-3);
  justify-content:flex-start;
  font-size:var(--fs-body);color:var(--text-muted);
}
.mnav-sublist a::before{
  content:'';width:10px;height:1px;background:var(--border);
  flex:none;margin-right:var(--space-3);
}
.mnav-sublist a[aria-current="page"]{color:var(--text)}

.mnav-foot{margin-top:var(--space-6)}
.mnav-sub{
  display:flex;gap:var(--space-5);justify-content:center;
  margin-top:var(--space-5);font-size:var(--fs-body);color:var(--text-muted);
}
.mnav-sub a{text-decoration:underline}
/* 메뉴가 열린 동안 뒤 문서가 따라 스크롤되지 않게 */
body.nav-open{overflow:hidden}
/* 하단 sticky 바는 접는다. 드로어 안에 같은 CTA 가 이미 있어 중복이고,
   z-index 가 더 높아 드로어 아래쪽을 덮는다. */
body.nav-open .sticky-cta{display:none}
.hd .btn,.hd .btn-primary,.hd .btn-ghost{padding:10px var(--space-4);font-size:var(--fs-caption)}
.hd-cta{margin-left:var(--space-2)}

/* ---------- 히어로 ---------- */
/* 정본 §0-3 — 역동성은 채도가 아니라 대비에서 나온다.
   이전의 강조색 광원(radial-gradient)은 액센트 면적 3% 규칙과
   충돌하므로 두지 않는다. */
.hero{position:relative;padding-block:var(--section-y) calc(var(--section-y) * .6)}
.hero-in{position:relative}
.hero h1{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-display-xl);line-height:var(--lh-display-ko);
  letter-spacing:-.03em;margin-top:var(--space-5);
}
.hero h1 em{font-style:normal;display:block;color:var(--text)}
.hero-sub{
  margin-top:var(--space-5);font-size:var(--fs-body-l);
  color:var(--text-muted);max-width:34ch;line-height:var(--lh-body);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero-cta-c{justify-content:center}
.hero-note{margin-top:var(--space-4);font-size:var(--fs-caption);color:var(--text-muted)}
.hero-visual{
  margin-top:var(--space-7);height:clamp(240px,38vw,440px);
  border-radius:var(--r-surface);position:relative;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
}
.hero-visual img{width:100%;height:100%;object-fit:cover}
/* 텍스트가 얹히는 사진에는 오버레이를 깐다 (정본 §6-2,3) */
.hero-visual::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--overlay-top) 0%,var(--overlay-bottom) 100%);
}

/* 사진 자리 표식 */
.ph-tag{
  position:absolute;left:var(--space-4);bottom:var(--space-4);z-index:2;
  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);background:color-mix(in srgb,var(--track) 80%,transparent);
  border:1px solid var(--border);padding:6px 10px;border-radius:var(--r-control);
}

/* ---------- 특징 스트립 (레인 룰 사이) ---------- */
.trackstrip{
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);
  padding-block:var(--space-4);
}
.trackstrip .label{color:var(--text)}

/* ---------- 맞음 / 안 맞음 ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.fit-col{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-5);
}
/* 액센트는 신호로만. 면이 아니라 보더에 얹는다 (정본 §0-2) */
.fit-col.yes{border-color:color-mix(in srgb,var(--glow) 45%,var(--rule))}
.fit-col h3{
  font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);
  letter-spacing:-.02em;margin-bottom:var(--space-4);
}
.fit-col li{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding-block:var(--space-2);font-size:var(--fs-body);
}
.fit-col.no li{color:var(--text-muted)}
.mark{
  flex:none;width:18px;height:18px;border-radius:var(--r-control);
  display:grid;place-items:center;font-size:11px;font-weight:var(--fw-bold);
  margin-top:3px;
}
.yes .mark{background:var(--glow);color:var(--track)}
.no .mark{background:var(--rule);color:var(--text-muted)}

/* ---------- 프로그램 (벤토) ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.bento .card:first-child{grid-column:span 2;grid-row:span 2}
.card h3{
  font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);
  letter-spacing:-.02em;
}
.bento .card:first-child h3{font-size:var(--fs-h2)}
.card .desc{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body)}
.card-visual{
  margin-top:var(--space-4);flex:1;min-height:120px;position:relative;
  border-radius:var(--r-surface);overflow:hidden;
  border:1px solid var(--border);background:var(--track);
}
.card{display:flex;flex-direction:column;transition:border-color var(--dur-fast) var(--ease)}
.card:hover{border-color:var(--border-strong)}

/* 프로그램 메타 — 시간·정원·강도 */
.meta{display:flex;gap:var(--space-5);margin-top:var(--space-4);flex-wrap:wrap}
.meta dt{
  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);
}
.meta dd{
  margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-medium);font-size:var(--fs-body);margin-top:2px;
}
/* 강도 막대 — 액센트를 신호로 쓰는 자리 */
.lvl{display:flex;gap:3px;margin-top:5px}
.lvl i{width:14px;height:3px;background:var(--rule);display:block}
.lvl i.on{background:var(--glow)}

/* ---------- 코치 ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.person{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);overflow:hidden;
}
.person-img{
  aspect-ratio:3/4;position:relative;background:var(--track);
  border-bottom:1px solid var(--border);
}
.person-img img{
  width:100%;height:100%;object-fit:cover;
  /* 정본 §6-4 — 채도를 낮추고 톤을 묶는다 */
  filter:saturate(.35) contrast(1.05);
  transition:filter var(--dur-slow) var(--ease-out);
}
.person:hover .person-img img{filter:saturate(1) contrast(1)}
.person-body{padding:var(--space-5)}
.person-body h3{font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em}
.person-role{
  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-accent);margin-top:var(--space-2);
}
.person-body p{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body)}

/* ---------- 위치 · 시간표 ---------- */
.info{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-4)}
.map-ph{
  border-radius:var(--r-surface);border:1px solid var(--border);
  background:var(--surface);min-height:300px;position:relative;overflow:hidden;
}
.map-ph iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
/* 안내도 이미지. 세로로 긴 안내도가 와도 잘리지 않게 원본 비율을 지킨다 */
.map-ph a{display:block;position:relative}
.map-ph img{width:100%;height:auto;display:block}
.map-more{
  position:absolute;left:var(--space-4);bottom:var(--space-4);
  padding:var(--space-2) var(--space-4);border-radius:var(--r-control);
  background:var(--surface);border:1px solid var(--border-strong);
  font-size:var(--fs-caption);color:var(--text);
}
.map-ph a:hover .map-more,.map-ph a:focus-visible .map-more{border-color:var(--glow);color:var(--glow)}
.addr{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-5);
}
.addr h3{font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em}
.row-line{
  display:flex;justify-content:space-between;gap:var(--space-4);
  padding-block:var(--space-3);border-bottom:1px solid var(--border);
  font-size:var(--fs-body);
}
.row-line:last-child{border-bottom:0}
.row-line b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
.addr .caption{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--fs-caption)}

/* ---------- 최종 CTA ---------- */
/* 액센트 면을 크게 깔지 않는다. 대비로 처리한다 (정본 §0-3, §1-4) */
.final{
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-surface);text-align:center;
  padding:var(--space-8) var(--space-5);
}
.final h2{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-display-l);line-height:var(--lh-display-ko-l);letter-spacing:-.03em;
}
.final p{margin:var(--space-4) auto 0;color:var(--text-muted);max-width:44ch;font-size:var(--fs-body-l)}

/* ---------- 푸터 ---------- */
.ft{border-top:1px solid var(--border);padding-block:var(--space-7) var(--space-6)}
/* 두 칸이다 — 로고·소개 / 찾아오기. 메뉴 칸을 없앤 뒤로 왼쪽에 여유를 더 준다. */
.ft-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:var(--space-6);align-items:start}
.ft h4{
  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);margin-bottom:var(--space-3);
}
.ft li{padding-block:var(--space-1);font-size:var(--fs-body);color:var(--text-muted)}
.ft li a:hover{color:var(--text)}
.ft-bot{
  margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;
  font-size:var(--fs-caption);color:var(--text-muted);
}

/* ============================================================
   하이록스 제휴 컴포넌트
   정본 §5-5 · §9 · §10.

   여기 있는 규칙은 색을 직접 정하지 않는다. 전부 --glow 계열을 쓴다.
   [data-context="hyrox"] 스코프 안에서 tokens.css 가 --glow 를 옐로우로
   치환하므로, 같은 마크업이 스코프 밖에서는 앰버로 나온다.
   ============================================================ */

/* ---------- 스테이션 스트립 (정본 §5-5) ---------- */
.station-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-surface);overflow:hidden;
}
.station{
  background:var(--surface);padding:var(--space-5) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);
}
/* 번호는 label 스타일 + 액센트 (정본 §5-5) */
.station-no{
  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-accent);
}
/* 종목명은 Display 700 12px 대문자 (정본 §5-5) */
.station-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:12px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text);
}
.station-ko{font-size:var(--fs-caption);color:var(--text-muted)}
.station-spec{
  margin-top:auto;padding-top:var(--space-3);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-caption);color:var(--text-muted);
}
/* 러닝 구간 표식 — 스테이션 사이마다 1km */
.station-run{
  display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-4);
}
.station-run .label{color:var(--text-accent)}

/* ---------- 비교표 (기획안 §3-1 항목 2) ---------- */
/* 넓은 표는 페이지를 밀지 않고 자기 안에서 가로 스크롤한다 */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{
  width:100%;min-width:600px;border-collapse:collapse;
  border:1px solid var(--border);border-radius:var(--r-surface);
  overflow:hidden;font-size:var(--fs-body);
}
.cmp th,.cmp td{
  padding:var(--space-4);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border);
}
.cmp thead th{
  background:var(--surface);
  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);white-space:nowrap;
}
/* 우리 종목 열만 강조 — 액센트는 신호로만 (정본 §0-2) */
.cmp thead th.is-us{color:var(--text-accent)}
.cmp td.is-us{color:var(--text);font-weight:var(--fw-medium)}
.cmp tbody th{
  background:var(--surface);color:var(--text-muted);
  font-weight:var(--fw-medium);white-space:nowrap;
}
.cmp td{color:var(--text-muted)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* ---------- 8주 로드맵 (기획안 §3-1 항목 5) ---------- */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.rm-step{
  background:var(--surface);border:1px solid var(--border);
  border-top:2px solid var(--glow);
  border-radius:var(--r-surface);padding:var(--space-5);
}
.rm-step .label{color:var(--text-accent);margin-bottom:var(--space-3)}
.rm-step h4{
  font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);
  letter-spacing:-.02em;
}
.rm-step p{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body)}

/* ---------- 레이스 시뮬레이션 카드 (정본 §10-2) ---------- */
/* 일반 클래스 카드와 시각적으로 구분한다 — 액센트 보더 + 배지 */
.race-card{
  background:var(--surface);
  border:1px solid color-mix(in srgb,var(--glow) 55%,var(--rule));
  border-radius:var(--r-surface);padding:var(--space-6);
}
.race-card .badge--hyrox{margin-bottom:var(--space-4)}
.race-card h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-h3);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);text-transform:uppercase;
}
.race-card p{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body)}
.race-card .meta{margin-top:var(--space-5)}
.race-card .btn,.race-card .btn--hyrox{margin-top:var(--space-5)}

/* ---------- 시설 사진 격자 ----------
   첫 칸이 두 칸을 차지한다. 사진 수가 달라져도 격자가 무너지지 않게
   나머지는 그냥 흘려보낸다.
   사진 위에 색을 얹지 않는다 — 정본 §0-2 "액센트는 신호로만".
   캡션은 면(surface) 위에 두어 사진을 가리지 않는다. */
/* 행 높이를 격자가 정한다. 사진마다 aspect-ratio 를 주면 넓은 칸과
   좁은 칸의 높이가 어긋나 행이 맞지 않는다 — 실제로 그렇게 깨졌다.
   대신 행 높이를 고정하고 사진이 그 높이를 채우게 한다. */
.facility{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(150px,18vw,260px);
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-surface);overflow:hidden;
}
/* 사진이 남는 높이를 먹고 캡션은 제 높이만 갖는다 */
.fac{
  background:var(--surface);margin:0;min-height:0;
  display:grid;grid-template-rows:1fr auto;
}
/* 첫 칸은 2칸 x 2행. 항목이 6개면 정확히 3x3 이 된다 */
.fac--wide{grid-column:span 2;grid-row:span 2}
.fac img{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.fac figcaption{
  padding:var(--space-3) var(--space-4);
  color:var(--text-muted);background:var(--surface);
}

/* 좁은 화면에서는 모두 같은 크기로. 6개가 2열에 정확히 3행으로 떨어진다 */
@media (max-width:767px){
  .facility{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,32vw,190px)}
  .fac--wide{grid-column:auto;grid-row:auto}
}

/* ---------- 클래스 라인업 (사이트맵 — 프로그램) ----------
   목록이지 카드가 아니다. 상세는 아래 게시판 카드가 맡는다. */
.lineup{border-top:1px solid var(--rule)}
.lineup-row{
  display:grid;grid-template-columns:56px 200px 1fr;gap:var(--space-4);
  padding-block:var(--space-5);border-bottom:1px solid var(--rule);
}
.lineup-day{color:var(--glow);white-space:nowrap}
.lineup-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text);
}
.lineup-desc{color:var(--text-muted);font-size:var(--fs-body)}
@media (max-width:1023px){
  /* 요일과 이름을 한 줄에 붙이고 설명이 아래로 내려간다 */
  .lineup-row{grid-template-columns:56px 1fr}
  .lineup-desc{grid-column:2}
}
@media (max-width:767px){
  .lineup-row{grid-template-columns:1fr;gap:var(--space-2)}
  .lineup-desc{grid-column:auto}
}

/* ---------- 브랜드 원칙 (사이트맵 — INBRXX 소개) ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.principle{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-5);
}
.principle h3{
  font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h3);
  letter-spacing:-.02em;margin-bottom:var(--space-3);
}
.principle p{color:var(--text-muted);font-size:var(--fs-body)}
/* 번호는 홈의 HTCX 블록에서만 쓴다. 소개 페이지의 원칙 카드에는 번호가 없다 */
.principle-no{display:block;color:var(--glow);margin-bottom:var(--space-3)}
@media (max-width:1023px){ .principles{grid-template-columns:1fr} }

/* ---------- 이용권 (사이트맵 — 멤버십) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.plan{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.plan-price{display:flex;align-items:baseline;gap:var(--space-2)}
.plan-price .num{font-size:var(--fs-h2);line-height:1}
.plan-price span{color:var(--text-muted);font-size:var(--fs-caption)}
.plan-desc{color:var(--text-muted);font-size:var(--fs-body)}
.plan-feat{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--rule)}
.plan-feat li{
  padding-block:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted);
}
@media (max-width:1023px){ .plans{grid-template-columns:1fr} }

/* ---------- 홈 이용권 요약 (사이트맵 — 추천 이용권) ----------
   멤버십 페이지의 .plan 카드보다 한 단계 가볍다. 홈에서는 "무엇이 있는가"만
   보이면 되고, 혜택 목록까지 늘어놓으면 페이지가 무거워진다. */
.planstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.planbit{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-5);
}
.planbit h3{
  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);
}
.planbit-price{margin-top:var(--space-3);display:flex;align-items:baseline;gap:var(--space-2)}
.planbit-price strong{font-size:var(--fs-h2);line-height:1}
.planbit-price span{color:var(--text-muted);font-size:var(--fs-caption)}
.planbit-desc{margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body)}
@media (max-width:1023px){ .planstrip{grid-template-columns:1fr} }

/* ---------- 최신 사진 (사이트맵 — 커뮤니티 > 갤러리) ---------- */
.shots{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3)}
.shot{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  border-radius:var(--r-surface);background:var(--surface);
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2) var(--ease)}
.shot:hover img,.shot:focus-visible img{transform:scale(1.04)}
/* 제목은 화면에 두지 않는다. 격자가 사진으로만 읽혀야 하고, 제목이 필요한
   사람은 갤러리로 넘어간다. 다만 읽어 주는 기기에는 남긴다. */
.shot-cap{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
@media (max-width:1023px){ .shots{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px){  .shots{grid-template-columns:repeat(2,1fr)} }

/* ---------- 소식 — 공지 · 이벤트 (사이트맵 — 메인 노출) ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.news--one{grid-template-columns:1fr}   /* 한쪽만 있을 때는 폭을 다 쓴다 */
.news-hd{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-3);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--rule);
}
.news-hd h2{color:var(--text)}
.news-hd a{font-size:var(--fs-caption);color:var(--text-muted)}
.news-hd a:hover{color:var(--text)}
.briefs li{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-4);padding-block:var(--space-3);
  border-bottom:1px solid var(--rule);
}
.briefs li:last-child{border-bottom:0}
.briefs a{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
.brief-subject{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brief-new{
  flex:none;color:var(--glow);font-size:var(--fs-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
}
.brief-meta{
  flex:none;display:flex;gap:var(--space-3);
  font-size:var(--fs-caption);color:var(--text-muted);white-space:nowrap;
}
@media (max-width:767px){ .news{grid-template-columns:1fr;gap:var(--space-5)} }

/* ---------- 우하단 떠 있는 버튼 두 개 ----------
   `맨 위로`(#top_btn, tail.php)와 관리자 편집(.admin-fab, 훅)이다.
   둘 다 스타일이 없어 문서 흐름에 그대로 떨어져 있었다 — 편집 버튼은
   본문 왼쪽 위에, 맨 위로 버튼은 푸터 아래에.
   같은 자리에 세로로 쌓고, 편집 버튼을 위에 둔다. */
#top_btn,.admin-fab{
  position:fixed;right:var(--space-5);z-index:150;
  width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--r-control);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
#top_btn:hover,#top_btn:focus-visible,
.admin-fab:hover,.admin-fab:focus-visible{color:var(--text);border-color:var(--border-strong)}

#top_btn{bottom:var(--space-5)}
/* 스크롤을 내려야 나타난다 (theme.js 가 .on 을 붙인다).
   visibility 까지 꺼야 안 보일 때 눌리지 않는다. */
#top_btn{opacity:0;visibility:hidden;pointer-events:none}
#top_btn.on{opacity:1;visibility:visible;pointer-events:auto}

/* 편집 버튼은 맨 위로 버튼 위에. 관리자에게만 나온다. */
.admin-fab{bottom:calc(var(--space-5) + 52px)}

@media (max-width:767px){
  /* 하단 고정 CTA 바(60px)를 피해 띄운다 */
  #top_btn{bottom:calc(60px + var(--space-4))}
  .admin-fab{bottom:calc(60px + var(--space-4) + 52px)}
}

/* ---------- 사진 게시판 격자 (갤러리) ---------- */
.board-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);
  margin-top:var(--space-6);
}
.bg-item{display:flex;flex-direction:column;gap:var(--space-3)}
.bg-img{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:3/2;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-surface);
}
.bg-img img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-mid) var(--ease-out);
}
.bg-item:hover .bg-img img,.bg-item:focus-visible .bg-img img{transform:scale(1.03)}
.bg-img .ph-tag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bg-meta{display:flex;flex-direction:column;gap:2px}
.bg-subject{color:var(--text);font-size:var(--fs-body)}
.bg-meta .date{color:var(--text-muted);font-size:var(--fs-label)}
@media (max-width:1023px){ .board-grid{grid-template-columns:1fr 1fr} }
@media (max-width:479px){ .board-grid{grid-template-columns:1fr} }

/* ---------- 주간 시간표 (클래스 일정) ----------
   비교표(.cmp)와 같은 만듦새다 — 1px 간격에 배경이 비쳐 선이 되는 격자.
   오늘 열은 액센트 면이 아니라 대비로 표시한다 (정본 §0-3, §8). */
.tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tt{
  width:100%;border-collapse:separate;border-spacing:1px;
  background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-surface);overflow:hidden;
}
.tt th,.tt td{background:var(--surface);padding:var(--space-3);vertical-align:top}
.tt thead th{
  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);text-align:center;
}
/* 오늘은 **머리글에만** 표시한다.
   칸마다 액센트를 두면 한 열에 같은 선이 예닐곱 번 반복돼 강조가 아니라
   노이즈가 된다. 빈 칸에까지 선이 그어져 더 그렇다. 실제로 그렇게 나왔다. */
.tt thead th.is-today{color:var(--text);border-bottom:2px solid var(--glow)}
.tt-time{
  width:104px;white-space:nowrap;text-align:right;
  color:var(--text-muted);font-size:var(--fs-caption);
}
/* 수업 한 칸 — 이름과 코치를 세로로 */
.tt-cls{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);border-radius:var(--r-control);
  transition:border-color var(--dur-fast) var(--ease);
}
.tt-cls + .tt-cls{margin-top:var(--space-2)}
.tt-cls:hover,.tt-cls:focus-visible{border-color:var(--border-strong)}
.tt-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--text);
}
.tt-coach{font-size:var(--fs-label);color:var(--text-muted)}

/* 좁은 화면 — 격자 대신 요일별 세로 목록 */
.tt-stack{display:none}
@media (max-width:767px){
  .tt-wrap{display:none}
  .tt-stack{display:block}
  .tt-day{margin-top:var(--space-6)}
  .tt-day .label{color:var(--text-muted);padding-bottom:var(--space-2)}
  .tt-day.is-today .label{color:var(--text)}
  /* 시간 칸을 고정 폭으로 두면 `06:00~07:00` 이 줄바꿈되어 끝의 0 이
     다음 줄로 떨어진다. 내용에 맞추고 줄바꿈을 막는다. */
  .tt-item{
    display:grid;grid-template-columns:max-content 1fr auto;gap:var(--space-3);
    align-items:baseline;padding-block:var(--space-4);
    border-bottom:1px solid var(--border);
  }
  .tt-item .num{white-space:nowrap}
  .tt-day.is-today .tt-item{border-left:2px solid var(--glow);padding-left:var(--space-3)}
}

/* ---------- 페이지 헤더 이미지 ---------- */
.page-hero{
  margin-top:var(--space-6);
  border:1px solid var(--rule);border-radius:var(--r-surface);overflow:hidden;
}
.page-hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:21/9;object-fit:cover;
}
@media (max-width:767px){
  .page-hero img{aspect-ratio:16/9}
}

/* ---------- 푸터 제휴 락업 (정본 §10-2) ---------- */
/* 정본 §10-3 규칙 5 — INBRXX 워드마크 옆에 옐로우 면을 붙이지 않는다.
   그래서 푸터 하단에 독립 블록으로 떼어 놓고 여백을 넉넉히 준다.
   푸터에는 앰버가 없으므로 §10-3 규칙 2(같은 뷰포트 동시 노출 금지)에도
   걸리지 않는다. 푸터에 앰버 요소를 추가할 때 이 전제가 깨진다. */
.ft-partner{
  margin-top:var(--space-7);padding-top:var(--space-6);
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);
}
.ft-partner p{
  font-size:var(--fs-caption);color:var(--text-muted);max-width:46ch;
}
/* 공식 로고 (정본 §10-2 항목 3).
   색은 여기서 정하지 않는다 — SVG 가 fill="currentColor" 라 이 색을 물려받고,
   [data-context="hyrox"] 안이므로 --glow 가 옐로우로 치환돼 있다.
   여백은 정본이 "충분히 확보"를 요구하므로 로고 높이의 절반을 준다. */
.partner-mark{display:block;flex:none;color:var(--glow);padding:var(--space-3) 0}
.partner-mark svg{display:block;width:176px;height:auto}
@media (max-width:767px){ .partner-mark svg{width:132px} }

/* ---------- 모바일 sticky CTA ---------- */
.sticky-cta{display:none}
.ico{width:18px;height:18px;flex:none}

/* ---------- 게시판 ---------- */
.page-hd{margin-bottom:var(--space-6)}
.page-hd h1{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-display-l);letter-spacing:-.03em;
}
.board-list{border-top:2px solid var(--lane)}
.board-row{
  display:flex;gap:var(--space-4);align-items:baseline;
  padding-block:var(--space-4);border-bottom:1px solid var(--border);
}
.board-row .date{
  margin-left:auto;color:var(--text-muted);font-size:var(--fs-caption);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.board-empty{padding-block:var(--space-8);text-align:center;color:var(--text-muted)}
.paging{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-6)}
.paging a,.paging strong{
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-control);
  font-size:var(--fs-caption);font-family:var(--font-mono);
}
.paging strong{background:var(--lane);color:var(--track);border-color:var(--lane)}
.view-hd{padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
.view-hd h1{font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.02em}
.view-meta{
  margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-caption);
  display:flex;gap:var(--space-4);flex-wrap:wrap;
}
.prose,.wr_content{
  padding-block:var(--space-6);font-size:var(--fs-body-l);line-height:var(--lh-body);
}
.prose p+p,.wr_content p+p{margin-top:var(--space-4)}
.prose h2,.wr_content h2{
  font-family:var(--font-ko);font-weight:800;font-size:var(--fs-h2);
  letter-spacing:-.02em;margin-top:var(--space-7);margin-bottom:var(--space-3);
}
.prose img,.wr_content img{border-radius:var(--r-surface);margin-block:var(--space-5)}

/* ---------- 폼 ---------- */
/* tokens.css 의 .field 와 같은 규격. 기존 마크업의 .inp 를 연결한다. */
.form{max-width:var(--max-width-read)}
.field-row{margin-bottom:var(--space-5)}
.form label{
  display:block;margin-bottom:var(--space-2);
  font-size:var(--fs-caption);color:var(--text-muted);
}
.inp{
  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);
}
.inp::placeholder{color:var(--text-muted)}
.inp:focus{border-color:var(--glow);outline:none}
textarea.inp{min-height:160px;line-height:var(--lh-body);resize:vertical}
.req{color:var(--danger);margin-left:4px}
.hint{margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted)}
.consent-box{
  max-height:150px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-control);
  padding:var(--space-4);font-size:var(--fs-caption);
  color:var(--text-muted);line-height:var(--lh-body);
}
.check{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-3)}
.check input{margin-top:4px;accent-color:var(--glow);width:17px;height:17px;flex:none}
.check label{margin:0;font-size:var(--fs-body);color:var(--text)}
.captcha-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-control);padding:var(--space-4);
}
.form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}
/* 선택지 묶음 — 시뮬레이션 신청의 디비전·성별·등급.
   라디오를 카드처럼 보이게 한다. 선택된 것은 --glow 테두리. */
.choice{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.choice label{
  display:block;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-control);
  cursor:pointer;background:var(--bg);transition:border-color var(--dur-fast) var(--ease);
}
.choice label:hover{border-color:var(--border-strong)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label:has(input:checked){border-color:var(--glow)}
.choice label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.choice strong{display:block;font-size:var(--fs-body);color:var(--text)}
.choice small{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--text-muted)}
.fee-line{margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--text)}
.fee-line b{color:var(--glow)}
.note-box{
  background:var(--surface);border:1px solid var(--border);
  border-left:2px solid var(--glow);border-radius:var(--r-control);
  padding:var(--space-4);font-size:var(--fs-caption);
  color:var(--text-muted);margin-bottom:var(--space-6);
}

/* ---------- FAQ ---------- */
.faq-search{margin-bottom:var(--space-6);display:flex;gap:var(--space-3)}
.faq-cat{
  display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5);
}
.faq-cat a{
  padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-control);
  font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-muted);
}
.faq-cat a.on{background:var(--lane);color:var(--track);border-color:var(--lane)}
.faq-list{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;gap:var(--space-4);align-items:center;
  padding-block:var(--space-5);font-size:var(--fs-body-l);
  font-weight:var(--fw-medium);color:var(--text);
}
/* 정본 §5-4 — 회전 아이콘이 아니라 +/− 기호, 액센트 컬러 */
.faq-q::after{
  content:'+';margin-left:auto;flex:none;
  font-family:var(--font-mono);font-size:var(--fs-body-l);
  color:var(--glow);line-height:1;
}
.faq-q[aria-expanded="true"]::after{content:'\2212'}
/* 답변은 DB 에서 온 생 HTML 이라 래퍼가 없다.
   전역 box-sizing:border-box 덕분에 max-height:0 이면 padding 까지 함께
   0 으로 눌리므로, 별도 래퍼 없이 여백을 항상 걸어 둘 수 있다. */
.faq-a{
  overflow:hidden;max-height:0;padding-bottom:var(--space-5);
  color:var(--text-muted);font-size:var(--fs-body);
  line-height:var(--lh-body);max-width:var(--max-width-read);
  transition:max-height var(--dur-mid) var(--ease-out);
}
.faq-q[aria-expanded="true"] + .faq-a{max-height:60rem}

/* ---------- 스크롤 리빌 ---------- */
/* 정본 §7 — 400ms ease-out, 1회만. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal{
      animation:reveal-in var(--dur-slow) var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 10% cover 22%;
    }
    @keyframes reveal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
}

/* ---------- 반응형 ---------- */
@media (max-width:1023px){
  .station-strip{grid-template-columns:repeat(2,1fr)}   /* 정본 §5-5 — 모바일 2열 */
  .roadmap{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .card:first-child{grid-column:span 2;grid-row:auto}
  .people{grid-template-columns:repeat(2,1fr)}
  .info{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  .gnb{display:none}
  /* margin-left:auto 를 여기서 다시 준다.
     오른쪽으로 미는 일은 .gnb 가 하고 있었는데 좁은 화면에서 .gnb 가
     display:none 이 되면 그 margin 도 함께 사라진다. 그러면 햄버거가
     로고 바로 옆에 붙는다 — 실제로 그렇게 나왔다. */
  .nav-toggle{display:flex;margin-left:auto}
  /* 좁은 화면에서는 헤더 CTA 를 접는다. 같은 버튼이 메뉴 안과
     하단 sticky 바에 모두 있어 세 번 반복되면 노이즈가 된다. */
  .hd-cta{display:none}
  .hd-in{height:56px}
  .fit{grid-template-columns:1fr}
  .bento,.people{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .hero-cta .btn,.hero-cta .btn-primary,.hero-cta .btn-ghost{flex:1 1 100%}

  /* 모바일 하단 sticky CTA — 기획안 §1 */
  .sticky-cta{
    display:grid;grid-template-columns:2fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:var(--rule);
    border-top:1px solid var(--rule);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sticky-cta a{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:15px 8px;background:var(--surface);color:var(--text);
    font-size:var(--fs-caption);font-weight:var(--fw-bold);
    /* grid 항목의 기본 min-width 는 auto 라 글자가 길어지면 칸을 밀어낸다.
       현재 문구로는 넘치지 않지만, 문구가 길어져도 칸이 무너지지 않도록
       미리 풀어 둔다. */
    min-width:0;white-space:nowrap;
  }
  /* 체험 신청 칸은 옐로우로 채운다 (정본 §10-3-1 예외).
     글자색은 4항대로 --hyrox-ink. 옆 칸(전화·길찾기)은 어두운 면이라
     위계가 확실히 갈린다. */
  .sticky-cta a.main{background:var(--hyrox-yellow);color:var(--hyrox-ink)}
  body{padding-bottom:60px}
}

/* 인쇄 — 화면 크롬만 걷어낸다.
   정본 §8 이 순백을 금지하므로 인쇄용 색 반전도 두지 않는다. */
@media print{
  .hd,.sticky-cta,.ft{display:none}
}

/* ---------- 로그인 · 비밀번호 등 인증 화면 ----------
   본문이 짧고 할 일이 하나뿐인 화면이라 가운데 좁은 상자로 둔다.
   게시판·내용관리와 같은 .wrap 을 쓰되 폭만 좁힌다. */
.wrap--auth{max-width:480px;padding-block:var(--space-8)}
.wrap--read{max-width:var(--max-width-read);padding-block:var(--space-8)}
.auth{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--space-6);
}
.auth-hd{margin-bottom:var(--space-6)}
.auth-hd h1{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-display-s);letter-spacing:-.03em;margin-top:var(--space-2);
}
.auth-lead{color:var(--text-muted);font-size:var(--fs-body);margin-bottom:var(--space-5)}
.auth-lead strong{color:var(--text)}
/* 아이디처럼 고쳐서는 안 되는 값. 입력칸과 헷갈리지 않게 테두리를 없앤다 */
.auth-id{
  font-family:var(--font-display);font-size:var(--fs-body);
  color:var(--text);padding:13px 0;
}
.auth-foot{
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  margin-top:var(--space-5);padding-top:var(--space-5);
  border-top:1px solid var(--rule);
  font-size:var(--fs-caption);
}
.auth-foot a{color:var(--text-muted)}
.auth-foot a:hover{color:var(--text)}
.auth-back{margin-top:var(--space-5);text-align:center;font-size:var(--fs-caption)}
.auth-back a{color:var(--text-muted)}
.auth-back a:hover{color:var(--text)}
.auth .form{max-width:none}

/* 약관 동의 */
.terms{margin-bottom:var(--space-7)}
.terms .label{display:block;color:var(--text-muted);margin-bottom:var(--space-3)}
.check--all{
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--rule);
}
.tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-control)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-caption)}
.tbl th,.tbl td{
  padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.tbl thead th{background:var(--bg);color:var(--text-muted);white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td{color:var(--text-muted)}

/* ---------- 통합검색 ---------- */
.searchbar{display:grid;grid-template-columns:140px 1fr auto;gap:var(--space-3)}
.searchbar .btn{white-space:nowrap}
@media (max-width:767px){
  .searchbar{grid-template-columns:1fr;gap:var(--space-3)}
}
.sch-sum{
  margin-top:var(--space-6);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-body);color:var(--text-muted);
}
.sch-sum strong{color:var(--text)}
.sch-sum span{font-size:var(--fs-caption)}
.sch-boards{
  display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);
}
.sch-boards a{
  display:inline-flex;align-items:center;min-height:34px;padding-inline:var(--space-4);
  border:1px solid var(--border);border-radius:999px;
  font-size:var(--fs-caption);color:var(--text-muted);
}
.sch-boards a:hover,.sch-boards a.sch_all{border-color:var(--glow);color:var(--glow)}
.sch-group{margin-top:var(--space-7)}
.sch-group-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--rule);
}
.sch-group-hd .label{color:var(--text)}
.sch-group-hd a{font-size:var(--fs-caption);color:var(--text-muted)}
.sch-group-hd a:hover{color:var(--text)}
.sch-list li{padding-block:var(--space-5);border-bottom:1px solid var(--rule)}
.sch-title{font-size:var(--fs-body-l);color:var(--text)}
.sch-title:hover{color:var(--glow)}
.sch-tag{
  display:inline-block;margin-right:var(--space-2);
  font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--text-muted);
}
.sch-excerpt{
  margin-top:var(--space-2);color:var(--text-muted);font-size:var(--fs-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sch-meta{margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted)}

/* ---------- 지도가 아직 없을 때 ----------
   개발용 자리표시자 대신, 찾아오는 데 실제로 필요한 것만 남긴다. */
.mapless{
  height:100%;min-height:300px;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-3);padding:var(--space-6);
}
.mapless .label{color:var(--text-muted)}
.mapless-addr{
  font-family:var(--font-ko);font-weight:800;
  font-size:var(--fs-h3);line-height:var(--lh-body);letter-spacing:-.02em;
  color:var(--text);
}
.mapless-sub{color:var(--text-muted);font-size:var(--fs-body)}
.mapless-btns{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}

/* ---------- 인스타그램 임베드 (후기) ----------
   인스타그램 임베드는 안쪽 높이를 우리가 알 수 없다. 사진 비율과 캡션
   길이에 따라 달라지는데, 크기를 알려주는 스크립트를 싣지 않기로 했으므로
   상자 높이를 우리가 정한다. 세로 사진이 가장 흔해서 그쪽에 맞춘다. */
.ig-embed{
  position:relative;width:100%;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-surface);
  overflow:hidden;
}
.ig-embed iframe{display:block;width:100%;height:640px;border:0}
/* 캡션까지 나오는 판은 글이 붙는 만큼 더 높다 */
.ig-embed--cap iframe{height:820px}
@media (max-width:767px){
  .ig-embed iframe{height:560px}
  .ig-embed--cap iframe{height:720px}
}
.ig-note{
  margin-top:var(--space-3);
  font-size:var(--fs-caption);color:var(--text-muted);
}
.ig-note a{color:var(--text);text-decoration:underline}

/* 후기 목록 — 임베드를 그대로 격자에 */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.ig-card{margin:0}
.ig-card figcaption{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-3);padding-top:var(--space-3);
  font-size:var(--fs-caption);
}
.ig-card figcaption a{
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ig-card figcaption a:hover{color:var(--glow)}
.ig-card figcaption .date{flex:none;color:var(--text-muted)}
@media (max-width:1023px){ .ig-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){  .ig-grid{grid-template-columns:1fr} }

/* ---------- 대표 인사말 ----------
   편지 조판. 본문은 관리자 화면에서 고치는 값 그대로고 여기서 옷만 입힌다.
   폭을 좁히고(.wrap--read) 글자를 키워 한 문단씩 눈에 들어오게 한다. */
.letter{font-size:var(--fs-body-l);line-height:1.85;color:var(--text-muted)}
.letter p+p{margin-top:var(--space-5)}
.letter strong{color:var(--text)}
/* 서명은 오른쪽에. 편지가 끝났다는 신호다.
   **여기에 라벨 조판(넓은 자간 + 대문자)을 쓰면 안 된다.** 한글은 자간을
   벌리면 글자가 흩어져 읽는 속도가 떨어진다 — `임직원일동` 이 실제로
   그렇게 나왔다. 라벨 조판은 라틴 대문자를 위한 것이다. */
.letter .sign{
  margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid var(--rule);
  text-align:right;color:var(--text);
  font-family:var(--font-ko);font-size:var(--fs-body);
  font-weight:var(--fw-bold);letter-spacing:normal;
}
@media (max-width:767px){
  .letter{font-size:var(--fs-body);line-height:1.8}
}

/* 문의 버튼 줄 — 좁은 화면에서 버튼이 서로 붙지 않게 */
.ask-btns{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin-top:var(--space-4);
}