/* ============================================================
   템퍼포지(TemperForge) 조직 사이트 — 디자인 시스템
   ------------------------------------------------------------
   외부 폰트·CDN 을 쓰지 않는다(오프라인에서도 같게 보인다).

   ★ 이 파일의 모든 값은 유한 집합에서만 나온다.
     간격 11값 · 글자 10단계 · 굵기 4값 · 모서리 4값 · 그림자 4단 · 모션 3길이.
     자유값을 하나 쓰는 순간 어휘가 늘고, 늘어난 어휘는 화면을 흐린다.
   ============================================================ */

/* ── 토큰 ────────────────────────────────────────────────── */
:root {
  /* 색 — 역할 8칸. 이 밖의 색상(hue)을 새로 뽑지 않는다 */
  --bg:      #ffffff;   /* 바탕      */
  /* 얹힌 면 — 라이트에서는 바탕과 같은 흰색이다. ★ 값을 눈으로 고르지 않았다 —
     이전 값 #f7f8fa 는 흰 바탕과 명도차 7 이라 흑백·색약에서 카드와 바탕이 한 덩어리가 됐다
     (눈검사 [색을 빼도 갈리나] 기준 25). 면을 회색으로 벌리면 그 위 글자 대비가 무너지므로
     반대로 면을 흰색으로 두고 [선 + 그림자]가 경계를 맡는다. 다크는 그대로다(#262b34 · 명도차 25 이상). */
  --bg2:     #ffffff;   /* 얹힌 면   */
  --bg3:     #eef0f4;   /* 강조면    */
  --bg-nav:  #f7f8fa;   /* 메뉴 현재/호버 알약 — 면적이 작아 명도차 규칙 밖 · 브랜드색 글자 4.58:1 */
  --line:    #e2e5ea;   /* 선        */
  --tx:      #0d0f13;   /* 잉크      */
  --tx2:     #5b6270;   /* 보조 글자 */
  /* 흐린 글자. ★ 값을 눈으로 고르지 않았다 — 흰 바탕 대비 4.5:1 을 넘는 가장 밝은 회색이다.
     12~14px 눈썹·메타 글자에도 WCAG AA 를 지켜야 하므로 더 밝게 두지 않는다. */
  --tx3:     #6b7280;   /* 흰 위 4.83:1 */
  --brand:   #b4552a;   /* 강조(흰 위 4.81:1) */
  --brand2:  #8c3f1e;
  --ember:   #e8834f;   /* 강조(어둠 위 6.9:1) */
  /* 브랜드색 [위에] 얹는 글자색. 라이트에서 --brand 는 어두워 흰 글자가 맞지만,
     다크에서 --brand 가 #e8834f 로 밝아지면 흰 글자는 2.74:1 로 떨어진다.
     색을 고정하지 않고 역할로 둔다 — 테마마다 반대로 뒤집힌다. */
  --on-brand: #ffffff;

  /* 어둠 띠 — 테마와 무관하게 항상 어둡다. 이 사이트의 [진짜 검정] 자리.
     ★ 값을 눈으로 고르지 않았다. 다크 테마 바탕(--bg)과 [명도 25 이상] 벌어져야 한다 —
       그보다 붙으면 흑백으로 봤을 때 띠와 바탕이 한 덩어리가 되어 띠가 사라진다.
       이전 값(#0d0f13)은 다크 바탕과 명도차가 3밖에 안 돼 다크에서 띠가 안 보였다. */
  --ink:     #05070a;
  --ink2:    #0f1218;
  --on-ink:  #ffffff;
  --on-ink2: #a8b0be;

  /* 상태색 — 성공 표시 한 칸만 남긴다(면적 0.3% 미만) */
  --ok:   #2f7d55;

  /* 그림자 — 색은 전부 같고 알파만 단조 증가(.06→.24) */
  --sh1: 0 1px 2px rgba(13,15,19,.06);
  --sh2: 0 4px 10px rgba(13,15,19,.10);
  --sh3: 0 12px 28px rgba(13,15,19,.16);
  --sh4: 0 24px 56px rgba(13,15,19,.24);

  /* 모서리 4값 — M3 집합 안 */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill: 9999px;

  /* 모션 3길이 · 곡선 3종 */
  --t-fast: 110ms;
  --t-base: 150ms;
  --t-slow: 240ms;
  --e-out: cubic-bezier(0,0,.2,1);      /* 등장 — 끝점 y=1 */
  --e-in:  cubic-bezier(.4,0,1,1);      /* 퇴장 */
  --e-std: cubic-bezier(.4,0,.2,1);

  /* 폭 — 레이아웃 폭과 문단 폭은 다른 값이다 */
  --wrap:  1120px;
  --prose:  640px;   /* 16px 한글 40자 상한(klreq·WCAG 1.4.8) */
}

/* 다크 — 색 반전이 아니라 역할 재배정이다(M3 tone 40↔80 방식) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ★ 다크 바탕은 어둠 띠(--ink #05070a)보다 [명도 25 이상] 밝아야 한다.
       그래야 흑백으로 봐도 띠가 띠로 보인다. #1e222a 는 명도차 27 이다.
       이전 값 #101216 은 차가 3이라 다크에서 히어로 띠가 통째로 사라졌다. */
    --bg:    #1e222a;
    --bg2:   #262b34;
    --bg3:   #2f3540;
    --bg-nav: #262b34;
    --line:  #3a414e;
    --tx:    #eef0f4;
    --tx2:   #a8b0be;
    /* 다크에서도 얹힌 면(#262b34) 위 4.5:1 을 넘겨야 한다.
     푸터 소제목·저작권 줄이 가장 빡빡한 자리라 거기서 재고 고른 값이다. */
    --tx3:   #8b93a1;   /* 얹힌 면 위 4.59:1 · 바탕 위 5.15:1 */
    --brand: #e8834f;
    --brand2:#f0a077;
    --on-brand: #221008;   /* 밝아진 브랜드색 위에는 어두운 글자다 — 반전이 아니라 역할 재배정 */
    --ok:    #5fc78d;
    --wait:  #d9a63c;
    --plan:  #98a0ae;
  }
}
:root[data-theme="dark"] {
  /* 위 미디어쿼리 블록과 같은 값이어야 한다 — 토글로 켠 다크가 시스템 다크와 달라지면 안 된다. */
  --bg:    #1e222a;
  --bg2:   #262b34;
  --bg3:   #2f3540;
  --bg-nav: #262b34;
  --line:  #3a414e;
  --tx:    #eef0f4;
  --tx2:   #a8b0be;
  /* 다크에서도 얹힌 면(#262b34) 위 4.5:1 을 넘겨야 한다.
     푸터 소제목·저작권 줄이 가장 빡빡한 자리라 거기서 재고 고른 값이다. */
  --tx3:   #8b93a1;   /* 얹힌 면 위 4.59:1 · 바탕 위 5.15:1 */
  --brand: #e8834f;
  --brand2:#f0a077;
  --ok:    #5fc78d;
  --wait:  #d9a63c;
  --plan:  #98a0ae;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  /* ★ 폴백 사슬 — 순서를 적어 두지 않으면 판마다 다르게 뜬다(다국어골격 §2-2).
       ① 시스템 라틴 : -apple-system · BlinkMacSystemFont · Segoe UI
       ② 한글        : Malgun Gothic · 맑은 고딕 · Apple SD Gothic Neo · Noto Sans KR
       ③ 마지막      : sans-serif
     언어를 늘릴 때(ja·zh) ②와 ③ 사이에 그 언어를 넣는다 — 지금은 en·ko 뿐이라 넣지 않는다.
     확인은 눈으로 한다 : 각 언어 화면에서 두부(□)가 0개인지 본다. 기계 검사는 이것을 못 잡는다. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
               "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 28px;          /* 1.75 — 한글 권고 1.6 상회 */
  font-variant-numeric: tabular-nums;   /* 숫자가 자릿수마다 흔들리지 않게 */
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }

/* ── 글자 10단계 — 행간은 전부 4의 배수 정수 ───────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-size: 44px; line-height: 52px; font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 32px; line-height: 40px; letter-spacing: -.02em; }
h3 { font-size: 24px; line-height: 32px; letter-spacing: -.01em; }
h4 { font-size: 20px; line-height: 28px; }

/* 카드·원칙·로드맵의 제목은 h2 다음에 오므로 h3 여야 한다(제목 단계를 건너뛰지 않는다).
   크기는 h4 단계(20/28)를 그대로 쓴다 —
   [문서 구조상의 단계]와 [글자 크기 단계]는 서로 다른 축이다. */
.card h3, .rules .rule h3, .road .step h3 { font-size: 20px; line-height: 28px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lead   { font-size: 18px; line-height: 28px; color: var(--tx2); }
.small  { font-size: 15px; line-height: 24px; }
.meta   { font-size: 14px; line-height: 24px; color: var(--tx3); }
.label  { font-size: 13px; line-height: 20px; font-weight: 600; }
.eyebrow {
  font-size: 12px; line-height: 20px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx3); margin: 0 0 12px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 문단 안 링크는 색만으로 구분하지 않는다(Lighthouse link-in-text-block) */
p a, li a, td a { text-decoration: underline; text-underline-offset: 2px; }

/* ── 접근성 ──────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0; font-weight: 700; font-size: 15px;
}
.skip:focus { left: 0; text-decoration: none; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── 헤더 ────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }

/* 로고 링크도 누르는 것이다 — 글자 높이(28px)가 아니라 44px 을 보장한다(HIG/M3) */
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px;
         color: var(--tx); font-weight: 700; font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: linear-gradient(145deg, var(--ember), var(--brand2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--sh1);
}

nav.main { display: flex; gap: 4px; margin-left: auto; }
nav.main a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;                       /* 터치 타깃 — 짧은 글자도 44 를 채운다 */
  padding: 0 12px; border-radius: var(--r-md);
  color: var(--tx2); font-size: 15px; font-weight: 600;
  transition: color var(--t-fast) var(--e-std), background var(--t-fast) var(--e-std);
}
nav.main a:hover { background: var(--bg-nav); color: var(--tx); text-decoration: none; }
nav.main a[aria-current="page"] { color: var(--brand); background: var(--bg-nav); }

.theme-btn {
  min-width: 44px; min-height: 44px; margin-left: 4px;
  padding: 0;   /* 브라우저 기본 padding 1px 을 지운다 — 간격 어휘에 없는 값이다 */
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 15px; cursor: pointer;
  color: var(--tx2); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: color var(--t-fast) var(--e-std), border-color var(--t-fast) var(--e-std);
}
.theme-btn:hover { color: var(--tx); border-color: var(--tx3); }

/* ── 언어 바꾸기 ────────────────────────────────────────────
   ★ <select> 가 아니라 <a> 다. hreflang 이 가리키는 주소로 크롤러가
     실제로 따라갈 수 있어야 언어 층이 검색에서 뜻을 가진다.
   ★ 크기는 테마 단추와 같은 44px 을 지킨다 — 손가락 표적 최소선이다. */
.lang { display: flex; gap: 4px; margin-left: 4px; }
.lang-btn {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--tx2); background: transparent; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: color var(--t-fast) var(--e-std), border-color var(--t-fast) var(--e-std);
}
.lang-btn:hover { color: var(--tx); border-color: var(--tx3); text-decoration: none; }

/* 모바일 네비 — 가로 스크롤 줄로 접는다(햄버거 없이) */
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; gap: 12px; padding-top: 8px; padding-bottom: 8px; min-height: 0; }
  nav.main { margin-left: 0; order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  /* ★ flex-shrink 를 끄지 않으면 [가로 스크롤]이 영영 안 생긴다.
       기본값 1 이라 flex 가 링크를 먼저 줄여 폭을 맞춰 버리고, 그러면
       scrollWidth 가 clientWidth 와 같아져 overflow-x:auto 가 할 일이 없어진다.
       그런데 white-space:nowrap 이라 글자는 안 줄어들어 **옆 항목 위로 넘친다.**
       2026-08-18 실측(412px · en) — [Sword of Seraphim] 이 119px 필요한데 109px 을 받아
       [Contact] 와 겹쳐 보였다. **한국어(9자)로는 안 나던 것이 영어(17자)에서 났다** —
       다국어골격 §2-1 [가장 긴 언어로 먼저 그린다] 가 말하는 그 자리다. */
  nav.main a { white-space: nowrap; flex: 0 0 auto; }
  .theme-btn { margin-left: auto; }
}

/* ── 히어로 — 이 사이트의 [진짜 검정] 자리 ─────────────────
   개편 전 실패의 원인이 [화면 전체가 한 명도 띠 안에 있는 것] 이었다.
   이 띠는 라이트·다크 어느 테마에서도 어둡게 둔다 — 그래야 한 화면 안에
   진짜 검정(--ink #05070a)과 밝은 면이 같이 존재한다.
   ★ 다크에서는 [어둡게 둔다] 만으로는 모자란다. 바탕도 어둡기 때문이다 —
     띠와 바탕의 명도차를 25 이상으로 벌려 두어야 띠가 띠로 보인다(지금 26.9). */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  padding: 80px 0 80px;   /* 간격은 표준 집합 {…,64,80} 안에서만 고른다 — 88·96 은 어휘 밖이다 */
  border-bottom: 1px solid var(--line);
}
/* 잉걸불 — 광원은 우상단 하나뿐이다 */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 900px; right: -260px; top: -420px;
  background: radial-gradient(circle,
    rgba(232,131,79,.30) 0%, rgba(180,85,42,.14) 38%, transparent 70%);
}
/* 식어 가는 쇠 — 아래쪽으로 갈수록 어둠으로 잦아든다 */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(to bottom, transparent, rgba(13,15,19,.9));
}
/* 담금질 고리 — 히어로 오른쪽의 장식. 사진 없이 [중간톤]과 [윤곽]을 만드는 자리다.
   ★ 값을 눈으로 고르지 않았다 — 계약(nc 첫화면) 하한이 명도퍼짐 0.54 · 엣지밀도 2.9 인데
     빈 어둠만으로는 0.44 · 2.8 이었다. 동심원 3개(선)와 잉걸불 원반(면)이 그 둘을 채운다.
     본문 위로는 절대 올라오지 않는다(z-index 0 · pointer-events none). */
.hero .forge {
  position: absolute; z-index: 0; pointer-events: none;
  right: 4%; top: 50%; width: 560px; height: 560px; transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(232,131,79,.42);
  background: radial-gradient(circle at 50% 50%,
    rgba(232,131,79,.55) 0%, rgba(180,85,42,.34) 30%, rgba(90,60,48,.22) 55%, transparent 72%);
}
.hero .forge::before, .hero .forge::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(232,131,79,.30);
}
.hero .forge::before { inset: 70px; border-color: rgba(255,255,255,.22); }
.hero .forge::after  { inset: 150px; border-color: rgba(232,131,79,.55); }
@media (max-width: 900px) { .hero .forge { display: none; } }
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--on-ink2); }
.hero h1 { color: var(--on-ink); max-width: 15ch; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--ember), #f0a077);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: var(--on-ink2); max-width: 560px; margin-top: 20px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; border: 1px solid transparent;
  background: var(--brand); color: var(--on-brand);
  transition: background var(--t-base) var(--e-std), transform var(--t-base) var(--e-out);
}
.btn:hover { background: var(--brand2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent; color: var(--on-ink);
  border-color: rgba(255,255,255,.22);
}
.btn.ghost:hover { background: rgba(255,255,255,.08); }

/* 어둠 위의 기본 버튼은 잉걸불색으로 — #b4552a 는 어둠 위에서 3:1 을 못 넘긴다 */
.hero .btn:not(.ghost) { background: var(--ember); color: #221008; }
.hero .btn:not(.ghost):hover { background: #f0a077; }

/* ── 섹션 리듬 ───────────────────────────────────────────── */
section { padding: 80px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 40px; }
.sec-head .sub { color: var(--tx2); margin: 12px 0 0; max-width: var(--prose); }
/* 제목 아래 잉걸불 선 — 이 사이트의 서명 하나 */
.sec-head h2 { position: relative; padding-bottom: 16px; }
.sec-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--ember));
}

/* ── 카드 ────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  position: relative;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--sh2);
  transition: transform var(--t-slow) var(--e-out),
              box-shadow var(--t-slow) var(--e-out),
              border-color var(--t-slow) var(--e-std);
}
.card::before {   /* 위에서 오는 빛 — 상단 모서리에만 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh3);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.card h3 { margin-bottom: 8px; }
.card h3 a { color: var(--tx); }
.card p { color: var(--tx2); font-size: 15px; line-height: 24px; margin: 0; }

.card .mark {
  width: 44px; height: 44px; border-radius: var(--r-md); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--sh1);
}
.card .kind {
  font-size: 12px; line-height: 20px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 4px;
}
.card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tag {
  font-size: 13px; line-height: 20px; color: var(--tx2); background: var(--bg3);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 12px;
}

/* ── 카드 동작 버튼 — [바로 써 보기] ─────────────────────────
   상태 배지 대신 카드마다 동작 하나. 이 자리에서 바로 열리는 것이 이 사이트의 축이다. */
.grid .card { display: flex; flex-direction: column; }
.card .card-foot { margin-top: auto; padding-top: 20px; }   /* 카드 높이가 달라도 버튼 줄이 맞는다 */
.card .card-cta { width: 100%; }

/* ── 통계 ────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px;
  background: var(--bg2);
}
.stat .n { font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--tx); }
.stat .l { font-size: 14px; line-height: 24px; color: var(--tx2); }

/* 히어로 안의 통계는 어둠 위에 얹힌다 */
.hero .stats { margin-top: 48px; max-width: 640px; }
.hero .stat {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.hero .stat .n { color: var(--on-ink); }
.hero .stat .l { color: var(--on-ink2); }
/* 히어로의 [바로 써 보기] 두 칸 — 숫자 대신 이름이 들어가므로 글자 크기를 낮추고, 링크로 동작한다 */
.hero .stats { max-width: 720px; }
.hero a.stat { display: block; text-decoration: none; }
.hero a.stat .n { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -.02em; }
.hero a.stat .l { color: var(--ember); font-weight: 700; margin-top: 4px; }
.hero a.stat:hover { border-color: rgba(232,131,79,.7); background: rgba(232,131,79,.10); }

/* ── 탭 ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 0 16px;
  color: var(--tx2); background: var(--bg2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--e-std), background var(--t-fast) var(--e-std);
}
.tabs button:hover { color: var(--tx); }
.tabs button[aria-selected="true"] {
  color: var(--on-brand); background: var(--brand); border-color: var(--brand);
}

/* ── 로드맵 ──────────────────────────────────────────────── */
.road { display: grid; gap: 16px; }
.road .step {
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-lg);
  padding: 24px;
}
.road .when {
  font-size: 12px; line-height: 20px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 4px;
}
.road ul { margin: 12px 0 0; padding-left: 20px; color: var(--tx2); }
.road li { margin: 4px 0; }

/* ── 원칙 목록 (번호가 붙는 줄) ──────────────────────────── */
.rules { display: grid; gap: 16px; counter-reset: rule; }
.rules .rule {
  display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2);
}
.rules .rule::before {
  counter-increment: rule; content: counter(rule, decimal-leading-zero);
  font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand);
}
.rules .rule p { color: var(--tx2); font-size: 15px; line-height: 24px; margin: 8px 0 0; }

/* ── 알림 상자 ───────────────────────────────────────────── */
.note {
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 3px solid var(--wait); border-radius: var(--r-lg);
  padding: 20px 24px; color: var(--tx2); font-size: 15px; line-height: 24px;
}
.note strong { color: var(--tx); }

/* ── 문서 페이지(정책·약관) ──────────────────────────────── */
.doc { max-width: 76ch; padding: 64px 0 80px; }
.doc h1 { font-size: 32px; line-height: 40px; letter-spacing: -.02em; margin-bottom: 8px; }
.doc > .meta { margin: 0 0 40px; }
.doc h2 { font-size: 24px; line-height: 32px; margin: 40px 0 12px; }
.doc h3 { font-size: 20px; line-height: 28px; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--tx2); }
.doc ul, .doc ol { padding-left: 20px; }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; line-height: 24px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 12px; text-align: left; }
.doc th { background: var(--bg2); color: var(--tx); font-weight: 700; }
.doc td { color: var(--tx2); }
.tablewrap { overflow-x: auto; }

/* ── 푸터 ────────────────────────────────────────────────── */
footer.bot {
  border-top: 1px solid var(--line); background: var(--bg2);
  padding: 64px 0 40px; margin-top: 80px;
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0,1fr)); gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.foot-grid .col h2 {
  margin: 0 0 12px; font-size: 12px; line-height: 20px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx3);
}
.foot-grid .col a {
  display: flex; align-items: center; min-height: 44px;   /* 목록 링크 — 터치 타깃 */
  color: var(--tx2); font-size: 15px; line-height: 24px;
}
.foot-grid .col a:hover { color: var(--tx); }
.foot-grid .about p { color: var(--tx2); font-size: 15px; line-height: 24px; max-width: 40ch; margin: 12px 0 0; }
/* 정책 링크 — 목록 링크는 인라인 링크가 아니라 [누르는 것]이라 44px 을 채운다(WCAG 2.5.8 최저 24) */
footer.bot .foot-policy { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
footer.bot .foot-policy a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tx2); font-size: 13px; line-height: 20px; font-weight: 600;
}
footer.bot .foot-policy a:hover { color: var(--tx); }
footer.bot .biz { color: var(--tx2); font-size: 14px; line-height: 24px; margin-top: 16px; }
footer.bot .biz b { color: var(--tx); font-weight: 600; }
footer.bot .copy { color: var(--tx3); font-size: 14px; line-height: 24px; margin-top: 16px; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── 404 ─────────────────────────────────────────────────── */
.oops { text-align: center; padding: 80px 0 80px; }
.oops .code {
  font-size: 44px; line-height: 52px; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--brand), var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oops h1 { font-size: 32px; line-height: 40px; margin: 12px 0 8px; }
.oops p { color: var(--tx2); margin: 0 0 32px; }

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  h1 { font-size: 32px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 32px; }
  .hero { padding: 64px 0 48px; }
  section { padding: 48px 0; }
  .sec-head { margin-bottom: 32px; }
  footer.bot { padding: 48px 0 32px; margin-top: 48px; }
  .rules .rule { grid-template-columns: 1fr; gap: 8px; }
}

/* ── 움직임을 줄여 달라는 설정을 존중한다 ────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .card:hover { transform: none; }
}

/* ── 스크롤 진입 효과는 넣지 않는다 ──
   IntersectionObserver 로 카드를 서서히 띄우면 일부 카드가 끝까지 안 보이고,
   탭으로 다시 그린 카드는 새 노드라 관찰자에 걸리지도 않는다.
   얻는 것은 장식이고 잃는 것은 [내용이 안 보인다] 이므로 교환이 성립하지 않는다.
   → CSS 로 숨기는 곳은 한 군데도 없다. 카드는 언제나 그냥 보인다. */

/* ── 인쇄 ────────────────────────────────────────────────── */
@media print {
  header.top, footer.bot nav, .tabs, .theme-btn, .hero::before, .hero::after { display: none; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; padding: 24px 0; }
  .hero h1, .hero .lead, .hero .eyebrow { color: #000; }
  .card { box-shadow: none; }
}

/* ── 소드 오브 세라핌 (sos.html 전용) ─────────────────────
   이미지가 든 유일한 페이지다. 규칙 —
   · 색·간격·모서리·글자는 전부 위 토큰 집합에서만 고른다(자유값 0)
   · 이미지 출처 = 게임 프로젝트 자체 제작 컨셉 아트(G7-② 준수 · docs\SOS_콘텐츠_참고자료_INDEX.md §3)
   · 어두운 그림 위 글자는 언제나 --on-ink / --on-ink2 다 (2026-08-15) */

/* 이미지 히어로 — 어둠 띠 위에 컨셉 아트를 깐다. 글자 대비는 아래 그라디언트가 지킨다 */
.hero.sos { min-height: 520px; display: flex; align-items: flex-end; }
.hero.sos .bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 30%;
}
.hero.sos::before {          /* 잉걸불 광원 대신 이미지 자체 광원을 쓴다 */
  display: none;
}
.hero.sos::after {           /* 하단을 어둠으로 눌러 글자 자리를 만든다 */
  height: 75%;
  background: linear-gradient(to bottom, transparent, rgba(13,15,19,.94));
}
/* ★ .hero.sos 는 flex 다 — 그래서 .wrap 이 [남은 폭]이 아니라 [제 내용 폭]으로 선다.
     .hero .lead 의 max-width:560px 가 그대로 wrap 의 폭이 되어, 화면이 그보다 좁으면
     hero 밖으로 삐져나간 채 잘린다(hero 가 overflow:hidden 이라 스크롤도 안 생긴다).
     412px·en 실측 — wrap 이 560px 로 서서 히어로 문장 오른쪽이 통째로 잘렸다.
     nav.main 의 flex-shrink 함정(절차서 §3 마지막 줄)과 같은 계열이다 —
     flex 줄에 넣었으면 폭을 직접 잡아 준다. */
.hero.sos .wrap { padding-top: 64px; flex: 1 1 auto; min-width: 0; width: 100%; }

/* 본문 그림 — 캡션이 달린 도판 */
.figure {
  margin: 32px 0 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--ink);
}
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  font-size: 13px; line-height: 20px; color: var(--tx3);
  padding: 8px 16px 10px; background: var(--bg2); border-top: 1px solid var(--line);
}
.figure.narrow { max-width: 640px; margin-inline: auto; }
.figure .pad { padding: 24px; }   /* 투명 PNG(문장·성물)는 어둠 위에 여백을 주고 얹는다 */

/* 카드 속 그림 — 성물 카드 등 */
.card .art {
  margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--ink); padding: 20px;
}
.card .art img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }