@charset "utf-8";
/* =============================================================================
   k-saju-astrology — style-l0.css  (전통 장식 레이어 · L0 / L1-a 페이지 전용)
   v0.9 — v0.8 의 시각 세계를 그대로 두고 「고급화(polish)」만 얹은 판
   v0.8 — 읽는 면까지 어둡게 · 참조 사진 실측 팔레트 · 좌측 색동 상시 노출
   -----------------------------------------------------------------------------
   ★ 이 파일이 "장식 레이어"의 원본(single source)입니다. style.css 를 대체하지 않습니다.

   관리 관계 (design-guide.md §0-1 · §2-5-3)
     design/style.css      ── 기본 레이어(토큰·컴포넌트) ─▶ 모든 HTML 의 첫 번째 <style>
     design/style-l0.css   ── 장식 레이어(이 파일)        ─▶ l0-sample.html · l1a-sample.html 의
                                                            두 번째 <style id="decor">
     화살표는 한 방향입니다. 인라인 사본을 손으로 고치지 말고 이 파일을 고친 뒤 다시 복사하십시오.
     (재현-19 가 두 사본의 동일성을 검사하고, 재삽입 명령은 실패 시 예외를 던집니다.)

   왜 style.css 에 합치지 않았는가
     style.css 의 인라인 사본 494행 · diff 0건 은 reviewer 가 독립 재현해 확정한 회귀 기준입니다.
     v0.8 도 style.css 를 한 글자도 고치지 않았습니다 → design-guide.md §2-5-3 규칙 K-6.

   금지 (기본 레이어와 동일)
     - 외부 리소스 0. @import · @font-face · url(http…) · 이미지 파일을 넣지 마십시오.
       배경 문양은 CSS 그라디언트와 문서 안 인라인 SVG 로만 만듭니다.
     - 기본 레이어의 색·타입 토큰을 여기서 덮어쓰지 마십시오. 특히 --c-text-sub · --c-ad-*
       (광고 라벨의 시각 하한 AD-L15) 는 절대 건드리지 않습니다.

   🔴 v0.8 에서 v0.7 의 한계선을 옮겼습니다 (design-guide.md §2-5-6)
     v0.7 은 "읽는 면은 안 어둡게" 라는 선을 그었고, 그 결과 히어로를 지나면
     본문·카드·표·FAQ 가 전부 흰 면이라 한국적 세계가 증발했습니다(진단 y≈1700~3700).
     v0.8 은 읽는 면을 먹빛으로 바꿉니다. 대신 세 가지를 붙였습니다 —
       ① 밝은 글자는 순백이 아니라 촛불색 오프화이트(#F2E4CC). 어두운 면에서 헤일로가 덜 생깁니다.
       ② 모든 값을 check-l0-contrast.js 로 측정합니다(재현-21). AA 미달이면 exit 1.
       ③ html[data-surface="light"] 한 속성으로 통째로 밝은 면에 복귀합니다.
          색은 전부 변수이므로 되돌리는 비용이 0 입니다.

   🔴 v0.8 이 여전히 지키는 선 (여기를 어기면 매출이 0 입니다)
     - .ad-slot-wrap / .ad-side 는 흰 불투명 패널 그대로 (AD-L19)
     - .ad-label 의 색·크기·굵기 무변경 (AD-L15)
     - .notice (오락 목적 고지) 는 자기 밝은 tint 그대로. 어둡게 하지 않습니다

   -----------------------------------------------------------------------------
   🔴 v0.9 가 한 일과 하지 않은 일 (design-guide.md §2-5-7)
     이번 회차는 **polish 이지 재설계가 아닙니다.** 대표 승인 원문 "이정도면 비슷해"
     → 확장 지시 "이런 느낌의 컨셉으로 디자인 유지하고 여기서 좀더 고급화".
     따라서 v0.8 의 시각 세계(어두운 지면 · 촛불색 본문 · 색동 · 세로 한자 · 무당 도상)를
     **한 항목도 바꾸지 않았습니다.** 색 토큰 12개(K-1)는 전부 v0.8 값 그대로입니다.

     한 것 (전부 아래 절에 주석과 함께 있습니다)
       K-22  모바일(<768px)에서만 도상 띠를 「도련 띠」로 줄이고 답을 끌어올림  ← P0-1
       K-23  어두운 지면 위 광고 컨테이너 보호. **자리와 보호 방식만.** 개수 불변 ← 결정-26
       K-24  상태(hover·active·disabled) — 어두운 면에서는 hover 가 「밝아지는」 쪽
       K-17  패널 깊이 — 어두운 면에서 검은 그림자는 보이지 않으므로 촛불 방향 rim 추가
       K-4   .k-answer 아이브로우 문법 해체 (tracked uppercase 는 히어로 하나만)
       K-4   .k-answer 좌우·아래 여백 결손 복구 (pad 가 `30px 0 0` 이었습니다)

     🔴 하지 않은 것 — **모션 0 을 유지합니다.**
       craft floor 는 상태 전이에 모션을 권하지만 이 프로젝트는 애니메이션 0 으로
       확정돼 있습니다(§10-4 · `document.getAnimations().length === 0` 로 검사).
       커밋된 세계가 일반 지침보다 우선합니다. 이 예외를 여기에 적어 둡니다 —
       다음 사람이 "왜 transition 이 없지?" 하고 되살리지 않게 하려는 것입니다.
       (.btn 의 `transition:background-color .15s` 는 style.css 기본 레이어에 이미
        있고 v0.8 이전부터 있던 것이라 건드리지 않았습니다. getAnimations() 는 0 입니다.)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   K-1. 장식 토큰
   ⚠ 검증 상태를 세 종류로 구분합니다. 서로 승격시키지 마십시오.
     (a) v0.6 오방색 — 【자체 산출 · 1차 출처 미확인】 U-17.
         확인처: 국립문화재연구원 단청 안료 조사 보고서 / KS A 0011.
     (b) v0.8 참조 사진 실측 — 【확인함 재현-22b】.
         design/assets/shrine-01.jpg 를 stride-6 격자(120,320 표본)로 전수 주사해
         색상 12버킷별 "채도 상위 10% 표본의 평균"을 낸 값입니다.
         재현: powershell -ExecutionPolicy Bypass -File design/sample-ref-colors.ps1
         ⚠ v0.7 의 --k-crimson:#A32028 등은 대표 육안 판독값(U-21)이었고 규칙 K-12 로
           승격이 금지돼 있었습니다. v0.8 은 그 값을 승격시킨 것이 아니라 폐기하고
           실측값으로 교체했습니다. 육안 판독값과 실측값은 실제로 달랐습니다
           (육안 #A32028 S=67% ↔ 실측 rose #6D0314 S=95%).
     (c) 실측값을 어두운 면 위에서 쓰려고 밝기만 올린 파생값 — 【자체 산출】.
         공식: 실측값의 HSL 색상·채도를 유지하고 L 만 지정치로 올림. 파생 결과는
         주석에 원본과 목표 L 을 함께 적었습니다.
   -------------------------------------------------------------------------- */
:root{
  /* (a) v0.6 오방색 — 오방색 띠(.k-rule)에만 씁니다 【자체 산출 · U-17】 */
  --k-ink:#17140F;        /* 흑(黑) — 먹 */
  --k-paper:#F4EFE2;      /* 백(白) — 한지. 띠 안쪽 링 전용 */
  --k-red:#9E2B25;        /* 적(赤) */
  --k-blue:#17505E;       /* 청(靑) — 단청 청록 */
  --k-gold:#D8B15A;       /* 황(黃) */

  /* (b) 참조 사진 실측 【확인함 재현-22b】 ------------------------------------
     버킷        면적    실측 HEX   무엇인가
     red        48.6%   #60230D    무복 붉은 덩어리 + 마루·기둥의 붉은 목재
     orange     11.1%   #D1A558    촛불·남포등·놋그릇·금자수
     rose        5.3%   #6D0314    무복 치마의 가장 진한 자적(紫赤)
     azure       2.7%   #002060    저고리 쪽빛
     green       1.1%   #014D1B    단청 녹 · 오방천 녹
     yellow      0.7%   #334607    오방천 황(그늘 속)
     magenta     0.2%   #6B174C    연등 · 색동 자주
     ─ 이 표가 v0.8 의 근거입니다. 붉은 계열이 화면의 절반이고, 채도 15% 이상
       유채색이 71.6%, HSL L<25% 어두운 면이 57.7%, 밝은 면이 9.0% 뿐입니다.
       v0.7 이 약했던 이유가 이 세 숫자에 그대로 있습니다 — 어둡기는 했는데
       유채색 면적이 없었고 밝은 면(흰 카드)이 9%가 아니라 대부분이었습니다. */
  --k-ember:#60230D;      /* 실측 red    — 지면의 붉은 목재 덩어리 */
  --k-brass:#D1A558;      /* 실측 orange — 놋·촛불. 어두운 면 위 8.06:1 */
  --k-wine:#6D0314;       /* 실측 rose   — 무복 치마 */
  --k-navy:#002060;       /* 실측 azure  — 저고리 쪽빛 */
  --k-moss:#014D1B;       /* 실측 green  — 단청 녹 */
  --k-plum:#6B174C;       /* 실측 magenta— 연등 자주 */

  /* (c) 어두운 면 위에서 쓰려고 L 만 올린 파생값 【자체 산출】 --------------
     --k-crimson  : --k-wine(H351 S95% L22%) 의 L 을 38% 로  → #BD0520
     --k-indigo   : --k-navy(H220 S100% L19%) 의 L 을 30% 로 → #0B3A8F
     --k-jade     : --k-moss(H141 S97% L15%) 의 L 을 30% 로  → #026B2A
     --k-amber    : --k-brass(H38 S55% L58%) 의 S 를 80% 로  → #EAAB3E */
  --k-crimson:#BD0520;
  --k-indigo:#0B3A8F;
  --k-jade:#026B2A;
  --k-amber:#EAAB3E;

  /* 지면 — 실측 darkest-5% 평균은 #050403 입니다. 그 값을 그대로 쓰면 겹쳐 올린
     그라디언트가 클리핑되므로 두 단계만 들어 올렸습니다 【자체 산출】. */
  --k-ground:#0A0705;
  --k-hero-bg:#050403;    /* 실측 darkest-5% 평균 그대로 【확인함 재현-22b】 */

  /* 지면(어두움) 위에 직접 놓이는 텍스트 3색 — 규칙 K-11.
     이 3개 말고 다른 색을 지면 위 텍스트에 쓰지 마십시오. 측정된 값이 이것뿐입니다. */
  --k-on-ground:#F4EADA;
  --k-on-ground-sub:#D8C7A6;
  --k-on-ground-link:#EFC978;

  /* ── 읽는 면(surface) — v0.8 의 본론. 규칙 K-17 ────────────────────────────
     여기 있는 변수만 뒤집으면 페이지 전체가 밝은 면으로 돌아갑니다.
     따라서 아래 규칙들 안에 색 리터럴을 직접 적지 마십시오. 적는 순간
     data-surface="light" 가 그 자리에서만 무력해지고, 다음 사람은 왜 반쯤만
     밝아지는지 알 수 없습니다. */
  --k-surface:#191210;         /* 카드·패널·표·FAQ·헤더·푸터의 면 */
  --k-surface-2:#241A16;       /* 표 머리·칩 등 한 단 위 면 */
  --k-surface-line:#7A5A3A;    /* 면 위의 경계선. 어두운 면(2.91:1)과 밝은 지면 상한(1.46:1) 양쪽에서 보이는 값 */
  --k-on-surface:#F2E4CC;      /* 본문. 순백이 아닌 촛불색 — 헤일로 저감 */
  --k-on-surface-sub:#D6C3A2;  /* 보조 본문 */
  --k-on-surface-link:#F0C878; /* 링크 */
  --k-on-surface-strong:#FBF3E4; /* 제목 */
  /* 🔴 깊이(depth) — v0.9. 어두운 면에서 「검은 그림자」는 거의 일을 하지 않습니다.
     지면이 #0A0705 이므로 그 위에 검정을 깔아도 눈에 띄는 차이가 생기지 않습니다.
     밝은 면에서 그림자가 하던 일(면이 떠 보이게 하는 것)을 어두운 면에서는
     **광원 쪽 모서리의 rim light** 가 대신합니다. 이 페이지의 광원은 K-2 에 선언된
     좌측 촛불(radial-gradient at 3% 50%, rgba(234,171,62,.26)) 이므로 rim 도 좌측입니다.
     ⚠ craft floor 의 "1px 초과 한쪽 색 테두리 금지" 를 지킵니다 — 아래 두 inset 은
       각각 정확히 1px 이고, 장식 탭이 아니라 광원 방향과 일치하는 모서리 하이라이트입니다.
     ⚠ 색동 머리띠(K-17-2)가 있는 패널은 위쪽 1px 을 ::before 가 덮습니다. 의도한 것입니다 —
       그 패널의 윗변은 색동이 이미 맡고 있고, 좌측 rim 은 덮이지 않습니다. */
  --k-surface-shadow:
    inset 1px 0 0 rgba(234,171,62,.11),
    inset 0 1px 0 rgba(242,228,204,.07),
    0 1px 2px rgba(0,0,0,.60),
    0 16px 40px rgba(0,0,0,.50);
  --k-btn-primary-bg:var(--k-crimson);
  --k-btn-primary-fg:#FFFFFF;
  --k-btn-line:var(--k-brass);
  --k-focus:#F0C878;

  /* 🔴 상태(states) — v0.9. 규칙 K-24.
     어두운 면에서는 hover 가 **밝아져야** 합니다. v0.8 은 hover 를 --k-wine(#6D0314)
     으로 어둡게 했는데, 어두운 지면 위에서 「더 어두워진 버튼」은 비활성으로 읽힙니다.
     v0.9 는 3단으로 나눕니다 — 기본 crimson → hover 밝게 → active(눌림) 어둡게.
     --k-crimson-lift 는 --k-crimson(H351 S95% L38%) 의 L 만 46% 로 올린 파생값입니다
     【자체 산출 · K-1 (c) 와 같은 공식】. 흰 글자 대비는 check-l0-contrast.js 가 잽니다. */
  --k-crimson-lift:#E50626;
  /* 비활성 — WCAG 는 비활성 컨트롤을 대비 하한에서 제외하지만, "꺼져 있음"이
     보이기는 해야 합니다. 어두운 면에서 밝은 회색 덩어리(style.css 의 #E4E8EE)는
     오히려 활성 버튼보다 눈에 띕니다. 그래서 면 쪽으로 가라앉힙니다. */
  --k-disabled-bg:#241A16;
  --k-disabled-fg:#8C7659;
  --k-disabled-line:#4A3A2A;

  /* 오방색 띠 — 청·적·황·백·흑 5칸 + 먹 구분선 2px.
     ⚠ 이 그라디언트만으로는 5색이 되지 않습니다. 반드시 K-2-2 의 한지 링과 함께 쓰십시오. */
  --k-obang:linear-gradient(90deg,
    var(--k-blue)  0            calc(20% - 1px),
    var(--k-ink)   calc(20% - 1px) calc(20% + 1px),
    var(--k-red)   calc(20% + 1px) calc(40% - 1px),
    var(--k-ink)   calc(40% - 1px) calc(40% + 1px),
    var(--k-gold)  calc(40% + 1px) calc(60% - 1px),
    var(--k-ink)   calc(60% - 1px) calc(60% + 1px),
    #FFFFFF        calc(60% + 1px) calc(80% - 1px),
    var(--k-ink)   calc(80% - 1px) calc(80% + 1px),
    var(--k-ink)   calc(80% + 1px) 100%);

  /* 색동(色동) 세로 반복 — 좌측 상시 띠(K-2-3)와 패널 머리띠에 함께 씁니다.
     참조 사진의 소매·오방천 배열을 따릅니다. 한 칸 사이에 먹선을 넣어 인접 칸이
     서로 뭉개지지 않게 했습니다(오방색 띠에서 백이 사라졌던 v0.6 실패와 같은 이유).
     ⚠ 칸 높이를 40px 아래로 줄이지 마십시오. v0.8 첫 시도에서 14px 로 만들었더니
       캡처에서 색동이 아니라 바코드로 보였습니다. 참조 사진의 오방천은 폭이 넓은
       늘어뜨린 천이지 잔줄무늬가 아닙니다. */
  --k-saekdong:repeating-linear-gradient(180deg,
    #026B2A   0px   40px, #17140F  40px  43px,
    #EAAB3E  43px   83px, #17140F  83px  86px,
    #BD0520  86px  126px, #17140F 126px 129px,
    #F4EFE2 129px  169px, #17140F 169px 172px,
    #0B3A8F 172px  212px, #17140F 212px 215px,
    #6B174C 215px  255px, #17140F 255px 258px);
}

/* 🔴 되돌리기 스위치 — <html data-surface="light">
   대표가 "역시 본문은 밝게" 로 판단을 바꾸면 이 한 줄이면 됩니다. 다른 파일을
   고칠 필요가 없고, 지면·히어로·장식은 어두운 채로 남습니다(v0.7 상태와 같습니다).
   ⚠ 이 블록의 값은 v0.7 에서 실측 완료된 값들입니다. 임의로 바꾸지 마십시오. */
html[data-surface="light"]{
  --k-surface:#FFFFFF;
  --k-surface-2:#F4F6F9;
  --k-surface-line:#C9BCA0;
  --k-on-surface:#16181D;
  --k-on-surface-sub:#565E6B;
  --k-on-surface-link:#1F3A6E;
  --k-on-surface-strong:#16181D;
  --k-surface-shadow:0 2px 4px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.30);
  --k-btn-primary-bg:#1F3A6E;
  --k-btn-primary-fg:#FFFFFF;
  --k-btn-line:#7F8A99;
  --k-focus:#1F3A6E;
  /* v0.9 — 상태 토큰의 밝은 면 짝. 값은 style.css 기본 레이어(§7)와 같습니다.
     밝은 면에서는 hover 가 어두워지는 것이 맞습니다(광원이 반대). */
  --k-crimson-lift:#152847;
  --k-disabled-bg:#E4E8EE;
  --k-disabled-fg:#79808C;
  --k-disabled-line:#E4E8EE;
}

/* -----------------------------------------------------------------------------
   K-2. 지면 — 신당 실내 (그라디언트만. 이미지 0)
   v0.8: 실측 면적비(유채색 71.6%)에 맞춰 알파를 올렸습니다. v0.7 은 최대 .16 이었고
   그래서 "연기가 자욱하다"가 육안으로 확인되지 않았습니다.
   ⚠ 지면은 그라디언트가 겹치므로 위치마다 색이 다릅니다.
     그래서 지면 위 텍스트 대비는 "모든 층을 최대 알파로 한 점에 겹친 상한값"으로 잽니다.
     그 상한을 계산하는 스크립트가 design/check-l0-contrast.js 입니다(재현-21).
   -------------------------------------------------------------------------- */
body.k-page{
  background-color:var(--k-ground);
  background-image:
    /* 1. 향 연무 — 화면 위쪽에서 내려앉습니다. v0.7 .10 → v0.8 .17
          (v0.7 캡처에서 육안 확인이 안 됐습니다. 한지 질감을 4.3% 로 만들었다가
           안 보인다고 삭제했던 것과 같은 실수를 반복하지 않기 위한 조정입니다.) */
    radial-gradient(1200px 520px at 46% 0, rgba(236,224,198,.17), rgba(236,224,198,0) 72%),
    /* 2. 향 연무 둘째 겹 — 중간 높이에서 한 번 더 피어오릅니다 */
    radial-gradient(900px 460px at 22% 38%, rgba(236,224,198,.11), rgba(236,224,198,0) 70%),
    /* 3. 촛불 — 좌측에서 되풀이되는 호박색 광원 */
    radial-gradient(820px 460px at 3% 50%, rgba(234,171,62,.26), rgba(234,171,62,0) 70%),
    /* 4. 진홍 기운 — 우측에서 되풀이. 실측 rose 를 씁니다 */
    radial-gradient(880px 520px at 99% 44%, rgba(189,5,32,.30), rgba(189,5,32,0) 70%),
    /* 5. 🔴 오방색 세로 천 — 왼쪽 벽에만 겁니다 (0~420px). 반복하지 않습니다.
          v0.8 첫 시도는 이것을 화면 전폭에 repeat 시켰고, 캡처로 보니 신당이 아니라
          코르덴/서커스 천막처럼 보였습니다. 참조 사진에서 오방천은 좌측 벽에만 걸려
          있고 나머지는 어두운 목재입니다. 구성을 사진에 맞춥니다.
          ⚠ 반복(repeating-linear-gradient)으로 되돌리지 마십시오. 같은 실패가 납니다. */
    linear-gradient(90deg,
      rgba(234,171,62,.20)   0px    28px, rgba(0,0,0,0)  28px   54px,
      rgba(2,107,42,.19)    54px    80px, rgba(0,0,0,0)  80px  106px,
      rgba(11,58,143,.22)  106px   132px, rgba(0,0,0,0) 132px  158px,
      rgba(189,5,32,.21)   158px   184px, rgba(0,0,0,0) 184px  210px,
      rgba(107,23,76,.17)  210px   236px, rgba(0,0,0,0) 236px  262px,
      rgba(240,232,210,.12)262px   288px, rgba(0,0,0,0) 288px  314px,
      rgba(234,171,62,.13) 314px   340px, rgba(0,0,0,0) 340px  366px,
      rgba(2,107,42,.10)   366px   392px, rgba(0,0,0,0) 392px  420px,
      rgba(0,0,0,0)        420px   100%),
    /* 6. 목재 결 — 주기가 서로 나누어떨어지지 않는 두 겹(37px · 91px)이라
          규칙적인 줄무늬로 보이지 않고 널결처럼 보입니다. 하나만 쓰면 코르덴이 됩니다. */
    repeating-linear-gradient(90deg, rgba(96,35,13,.16) 0 3px, rgba(0,0,0,0) 3px 37px),
    repeating-linear-gradient(90deg, rgba(20,10,6,.30)  0 9px, rgba(0,0,0,0) 9px 91px),
    /* 7. 붉은 목재 덩어리 — 실측 red 48.6% 를 지면 전체에 깝니다.
          v0.7 에 없던 층이고, "붉은색 지배"를 실제로 만드는 것은 이 층입니다. */
    linear-gradient(180deg, rgba(96,35,13,.55) 0, rgba(96,35,13,.22) 40%, rgba(96,35,13,.55) 100%);
  background-position:46% 0, 22% 0, 0 0, 0 600px, 0 0, 0 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat-y, repeat-y, repeat-y, repeat-y, repeat, repeat, repeat;
  background-size:auto, 100% 1600px, 100% 1300px, 100% 1300px, auto, auto, auto, auto;
}
html[data-decor="off"] body.k-page{ background-image:none; }

/* K-2-1. 지면 위에 직접 놓이는 텍스트 — 규칙 K-11 ---------------------------
   선택자를 .k-sec > .wrap > … 의 직계 사슬로만 씁니다.
   패널(.k-panel · .k-answer · .k-next · .card)은 .wrap 의 직계 자식이므로
   이 규칙이 패널 "안"으로는 절대 새어 들어가지 않습니다 — 구조로 막은 것이지
   덮어쓰기로 막은 것이 아닙니다. 패널을 하나 더 넣어도 깨지지 않습니다. */
.k-page .k-sec > .wrap > h2,
.k-page .k-sec > .wrap > .section__head > h2{ color:var(--k-on-ground); }

.k-page .k-sec > .wrap > .section__head > .lede,
.k-page .k-sec > .wrap > .caption,
.k-page .k-sec > .wrap > .k-crumb{ color:var(--k-on-ground-sub); }

.k-page .k-sec > .wrap > .k-crumb a,
.k-page .k-sec > .wrap > ul > li > a{ color:var(--k-on-ground-link); }
.k-page .k-sec > .wrap > ul > li > a:hover{ color:#FFFFFF; }

/* K-2-2. 오방색 띠 — 5색이 전부 보여야 합니다 (규칙 K-16 · 삭제 금지) --------
   v0.6 의 실패: 백(#FBF8F1) 이 한지 지면(#F4EFE2) 위에서 1.08:1 → 4색으로 렌더됐습니다.
   처리는 두 겹입니다. 하나만 쓰면 다시 4색이 됩니다.
     ① 칸과 칸 사이 먹 구분선 2px  → 백(白) 칸의 좌우 경계를 만듭니다
     ② 띠 안쪽 1px 한지 링          → 흑(黑) 칸의 상하좌우 경계를 만듭니다
   ①만 있으면 흑이, ②만 있으면 백이 사라집니다. 밝은 지면·어두운 지면 양쪽에서 동일합니다. */
.k-rule{
  height:12px; border:0; margin:0; border-radius:2px;
  background:var(--k-obang);
  box-shadow:inset 0 0 0 1px var(--k-paper);
}

/* K-2-3. 🔴 좌측 색동 띠 — 화면 왼쪽 가장자리에 상시 노출 (v0.8 신설) --------
   v0.7 은 오방색 천이 히어로 안에만 있어서 첫 화면을 지나면 사라졌습니다.
   이것은 position:fixed 라 스크롤과 무관하게 항상 보입니다. 진단이 지적한
   "y≈1700~3700 에서 정체성이 0" 을 구조로 막는 장치입니다.

   ⚠ 세 가지를 확인하고 넣었습니다.
     - 가로 스크롤: 폭이 뷰포트 안쪽(left:0)이고 body 에 폭을 더하지 않습니다.
     - 본문 침범: .wrap 의 좌측 패딩이 16px 이므로 모바일 10px 띠와 겹치지 않습니다.
       띠를 넓히려면 .wrap 패딩을 먼저 확인하십시오(기본 레이어 소관).
     - 광고 침범: 광고는 .wrap 안(x>=16px)에 있으므로 띠가 덮지 않습니다. AD-L19 유지.
   ⚠ .skip(건너뛰기 링크)은 z-index:100 이므로 이 띠(z-index:2)에 가려지지 않습니다. */
body.k-page::before{
  content:""; position:fixed; left:0; top:0; bottom:0; width:10px; z-index:2;
  background:var(--k-saekdong);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.55), 2px 0 12px rgba(0,0,0,.6);
  pointer-events:none;
}
@media (min-width:768px){ body.k-page::before{ width:20px; } }
@media (min-width:1280px){ body.k-page::before{ width:28px; } }
html[data-decor="off"] body.k-page::before{ display:none; }

/* -----------------------------------------------------------------------------
   K-3. 히어로 — 신당 어둠 + 촛불 + 향 연무 + 오방색 도련
   ⚠ 높이를 늘리지 마십시오. 진단 P0-1(답이 접힘 아래)이 미해결 상태입니다.
     v0.8 은 패딩·도련·도상 띠 높이를 v0.7 그대로 두었습니다(순증 0 목표).
   -------------------------------------------------------------------------- */
.k-hero{
  position:relative;
  overflow:hidden;                     /* 절대배치 장식이 가로 스크롤을 만들지 않게 */
  background-color:var(--k-hero-bg);
  background-image:
    /* 향 연무 — 바닥에서 피어오름. v0.7 .12 → .22 */
    radial-gradient(820px 340px at 48% 100%, rgba(236,224,198,.22), rgba(236,224,198,0) 72%),
    /* 촛불 좌 */
    radial-gradient(460px 360px at 8% 20%, rgba(234,171,62,.40), rgba(234,171,62,0) 70%),
    /* 진홍 우 — 무복(巫服)의 덩어리. 실측 면적 48.6% 를 여기서 갚습니다 */
    radial-gradient(560px 420px at 95% 30%, rgba(189,5,32,.52), rgba(189,5,32,0) 70%),
    /* 자적 치마 — 실측 rose */
    radial-gradient(420px 300px at 78% 82%, rgba(109,3,20,.55), rgba(109,3,20,0) 72%),
    /* 단청 녹 — 천장 서까래 쪽 */
    radial-gradient(440px 240px at 66% 0, rgba(2,107,42,.34), rgba(2,107,42,0) 72%),
    /* 쪽빛 — 저고리 */
    radial-gradient(360px 260px at 30% 88%, rgba(11,58,143,.34), rgba(11,58,143,0) 72%),
    /* 단청 서까래 사선 */
    repeating-linear-gradient(45deg, rgba(209,165,88,.10) 0 2px, rgba(0,0,0,0) 2px 14px),
    /* 🔴 오방색 세로 천 — 지면과 같은 이유로 왼쪽 벽(0~560px)에만 겁니다.
       사진의 구성이 그렇습니다: 왼쪽 벽에 오방천, 가운데·오른쪽에 무복과 제단. */
    linear-gradient(90deg,
      rgba(234,171,62,.30)   0px    30px, rgba(0,0,0,0)  30px   56px,
      rgba(2,107,42,.28)    56px    86px, rgba(0,0,0,0)  86px  112px,
      rgba(11,58,143,.32)  112px   142px, rgba(0,0,0,0) 142px  168px,
      rgba(189,5,32,.31)   168px   198px, rgba(0,0,0,0) 198px  224px,
      rgba(107,23,76,.26)  224px   254px, rgba(0,0,0,0) 254px  280px,
      rgba(240,232,210,.18)280px   310px, rgba(0,0,0,0) 310px  336px,
      rgba(234,171,62,.20) 336px   366px, rgba(0,0,0,0) 366px  392px,
      rgba(2,107,42,.16)   392px   422px, rgba(0,0,0,0) 422px  448px,
      rgba(11,58,143,.14)  448px   478px, rgba(0,0,0,0) 478px  560px,
      rgba(0,0,0,0)        560px   100%),
    /* 목재 결 — 지면과 같은 비배수 2겹 */
    repeating-linear-gradient(90deg, rgba(96,35,13,.14) 0 3px, rgba(0,0,0,0) 3px 37px),
    repeating-linear-gradient(90deg, rgba(20,10,6,.26)  0 9px, rgba(0,0,0,0) 9px 91px);
  background-repeat:no-repeat;
  padding:var(--sp-6) 0 0;
}
/* 오방색 도련 — v0.6 의 border-bottom:3px solid gold 를 대체합니다.
   진단이 "가장 흔한 템플릿 수법"으로 지목한 한쪽 굵은 테두리 5개 중 하나를 여기서 없앴습니다. */
.k-hero::after{
  content:""; display:block; height:8px;
  background:var(--k-obang);
  box-shadow:inset 0 0 0 1px var(--k-paper);
}
html[data-decor="off"] .k-hero{ background-image:none; }
html[data-decor="off"] .k-hero::after{ background:none; box-shadow:none; height:0; }

.k-hero__panel{
  position:relative; z-index:1;        /* 세로 한자 단 위에 올립니다 */
  background:var(--k-ink);             /* 불투명 — 대비 측정 대상 */
  border:1px solid rgba(209,165,88,.65);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  color:#F7F2E6;                       /* 16.44:1 vs --k-ink 【확인함】 */
}
@media (min-width:768px){ .k-hero__panel{ padding:var(--sp-8); } }
.k-hero__panel h1{ color:#F7F2E6; }
.k-hero__panel .lede{ color:#E8DCC0; }  /* 13.49:1 vs --k-ink 【확인함】 */
.k-hero__eyebrow{
  display:inline-block; margin-bottom:var(--sp-3);
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--k-gold);   /* 9.06:1 【확인함】 */
}
/* --font-han 을 실제로 쓰는 자리 ① — 아이브로우의 한자를 본문보다 크게 */
.k-hero__eyebrow .han{ font-size:20px; line-height:1; vertical-align:-3px; color:#EBC978; }
:lang(ja) .k-hero__eyebrow{ font-size:var(--fs-sm); text-transform:none; letter-spacing:.04em; }

/* --font-han 을 실제로 쓰는 자리 ② — 세로 한자 단 (十干·十二支)
   ⚠ 이것은 데이터가 아니라 장식입니다. 특정인의 사주가 아니며 계산 결과도 아닙니다.
     글자 배열의 1차 출처는 대조하지 않았습니다 — 【미검증】 U-20.
     확인처: developer D-1 의 천간·지지 데이터 테이블.
   레이아웃을 만들지 않습니다(K-10): position:absolute 이므로 높이 기여 0.
   v0.8: 34px → 64px. 진단이 요구한 "화면을 지배하는 덩어리"로 키웠습니다.
   모바일에서는 폭이 없어 끕니다. */
.k-vcol{
  display:none;
  position:absolute; top:0; bottom:0; right:8px; z-index:0;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--font-han); font-size:64px; line-height:1.02; letter-spacing:.06em;
  color:rgba(209,165,88,.26);
  padding:6px 0; overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
@media (min-width:768px){ .k-vcol{ display:block; } }
@media (min-width:1280px){ .k-vcol{ font-size:88px; } }
.k-vcol--2{ right:96px; color:rgba(189,5,32,.30); font-size:52px; }
@media (min-width:1280px){ .k-vcol--2{ right:132px; font-size:70px; } }
html[data-decor="off"] .k-vcol{ display:none; }

/* K-3-1. 본문 구간의 세로 한자 단 (v0.8 신설) --------------------------------
   진단: "y≈1700~3700 에서 한국적 세계가 완전히 증발한다."
   히어로 밖 섹션에도 같은 장식을 놓되, 폭이 넉넉한 1280px 이상에서만 켭니다.
   그보다 좁으면 본문 폭과 겹치므로 켜지 않습니다 — 겹치게 두면 읽는 데 방해가 됩니다. */
.k-sec{ position:relative; overflow:hidden; }
.k-vcol--sec{
  right:auto; left:-6px; font-size:96px;
  color:rgba(209,165,88,.13);
}
@media (min-width:768px){ .k-vcol--sec{ display:none; } }   /* 768~1279 는 폭 부족 */
@media (min-width:1280px){ .k-vcol--sec{ display:block; font-size:120px; } }

/* 도상 띠 — 인물 실루엣과 물건 도상이 여기에만 들어갑니다 (결정-25) */
.k-figures{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:center; gap:var(--sp-6);
  padding:var(--sp-6) 0 0; margin-top:var(--sp-6);
  min-height:132px;                    /* 도상이 꺼져도 자리가 무너지지 않게 */
  border-top:1px solid rgba(209,165,88,.34);
}
.k-figures svg{ display:block; height:120px; width:auto; opacity:.98; }
/* 도상 안의 한자 — 사진이 아니라 그린 것임이 마크업에 그대로 보입니다(K-3 근거) */
.k-figures text{ font-family:var(--font-han); }
html[data-decor="symbols"] .k-figure--person{ display:none; }
html[data-decor="off"] .k-figures{ display:none; }

/* =============================================================================
   K-17. 🔴 읽는 면 — v0.8 의 본론
   여기 있는 모든 규칙은 K-1 의 --k-surface* 변수만 참조합니다.
   색 리터럴을 직접 적지 마십시오 → data-surface="light" 복귀가 반쯤만 됩니다.
   대비는 전부 check-l0-contrast.js 가 잽니다(재현-21).
   ========================================================================== */

/* K-17-1. 공통 패널 -------------------------------------------------------- */
.k-page .k-panel,
.k-page .k-answer,
.k-page .card,
.k-page .k-next{
  background:var(--k-surface);
  border:1px solid var(--k-surface-line);
  border-radius:var(--r-lg);
  box-shadow:var(--k-surface-shadow);
  color:var(--k-on-surface);
}
/* 🔴 v0.9 — .k-answer 의 여백 결손 복구.
   v0.8 까지 .k-answer 의 계산된 padding 은 `30px 0 0` 이었습니다. 아래 K-17-2 가
   padding-top 만 지정하고 좌우·아래를 지정하는 규칙이 어디에도 없었기 때문입니다.
   즉 이 페이지에서 가장 중요한 블록의 본문이 1px 테두리에 붙어 있었습니다
   【확인함 — getComputedStyle(.k-answer).padding === "30px 0px 0px", 375px】.
   .k-panel 과 같은 값을 줍니다(형제 컴포넌트이므로 같은 규칙이어야 합니다). */
.k-panel,.k-page .k-answer{ padding:var(--sp-6); }
@media (min-width:768px){ .k-panel,.k-page .k-answer{ padding:var(--sp-8); } }

/* 패널 안의 글자 — 기본 레이어가 지정한 어두운 글자색을 여기서 되돌립니다 */
.k-page .k-panel h2,.k-page .k-panel h3,.k-page .k-panel h4,
.k-page .k-answer h2,.k-page .k-answer h3,
.k-page .card h3,.k-page .card__title,
.k-page .k-next__title{ color:var(--k-on-surface-strong); }

.k-page .k-panel p,.k-page .k-panel li,.k-page .k-panel dd,.k-page .k-panel dt,
.k-page .k-answer p,.k-page .k-answer li,
.k-page .k-next p{ color:var(--k-on-surface); }

.k-page .k-panel .lede,.k-page .k-panel .caption,.k-page .k-panel .hint,
.k-page .card__body,
.k-page .k-answer .caption,
.k-page .k-next .caption{ color:var(--k-on-surface-sub); }

/* 링크 — 기본 레이어의 a{color:var(--c-primary)} 는 어두운 면에서 1.66:1 입니다.
   이 덮어쓰기가 없으면 패널 안의 모든 링크가 읽히지 않습니다. */
.k-page .k-panel a,.k-page .k-answer a,.k-page .card a,
.k-page .k-next a:not(.btn),.k-page .faq a{ color:var(--k-on-surface-link); }
.k-page .k-panel a:hover,.k-page .k-answer a:hover,
.k-page .card a:hover,.k-page .faq a:hover{ color:var(--k-on-surface-strong); }

/* 포커스 링 — 기본 레이어는 남색 3px 입니다. 어두운 면 위에서 보이지 않습니다.
   접근성 항목이므로 어둡게 만든 쪽이 책임지고 되돌립니다. */
.k-page :focus-visible{ outline:3px solid var(--k-focus); outline-offset:2px; }

/* K-17-2. 색동 머리띠 — 패널 위쪽 6px.
   흰 카드였을 때 없던 "손맛"과 밀도를 만드는 장치입니다. 밝은 면 복귀 시에도 남깁니다
   (장식이지 가독성 요소가 아니므로). */
.k-page .k-panel,.k-page .k-answer,.k-page .k-next{
  position:relative; overflow:hidden;
}
/* 가로 색동 — --k-saekdong 을 회전시키지 않고 가로 그라디언트를 따로 적었습니다.
   rotate 로 눕히면 폭이 뷰포트마다 달라져 가로 스크롤이 날 수 있습니다. */
.k-page .k-panel::before,
.k-page .k-answer::before,
.k-page .k-next::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(90deg,
    #026B2A  0    18px, #17140F 18px 20px,
    #EAAB3E 20px  38px, #17140F 38px 40px,
    #BD0520 40px  58px, #17140F 58px 60px,
    #F4EFE2 60px  78px, #17140F 78px 80px,
    #0B3A8F 80px  98px, #17140F 98px 100px,
    #6B174C 100px 118px,#17140F 118px 120px);
}
html[data-decor="off"] .k-page .k-panel::before,
html[data-decor="off"] .k-page .k-answer::before,
html[data-decor="off"] .k-page .k-next::before{ display:none; }
/* 머리띠 6px 만큼 안쪽 여백을 더해 글자가 띠에 붙지 않게 합니다 */
.k-page .k-panel,.k-page .k-answer,.k-page .k-next{ padding-top:calc(var(--sp-6) + 6px); }
@media (min-width:768px){ .k-page .k-panel,.k-page .k-answer{ padding-top:calc(var(--sp-8) + 6px); } }

/* K-17-2b. 제목 위 공간 > 제목 아래 공간 (v0.9 · craft floor)
   기본 레이어가 h1~h4 의 margin 을 0 으로 리셋하므로, 패널 안에서 소제목이
   앞 문단에 붙어 버립니다. 위 32 : 아래 12 로 벌립니다. 첫 자식이면 0 입니다
   (패널 자신의 padding 이 이미 그 자리를 만들고 있습니다 — 두 번 주면 뜹니다). */
.k-page .k-panel > h3,.k-page .k-answer > h3,.k-page .k-panel > h4{
  margin-top:var(--sp-8); margin-bottom:var(--sp-3);
}
.k-page .k-panel > h3:first-child,.k-page .k-answer > h3:first-child,
.k-page .k-panel > h4:first-child{ margin-top:0; }

/* K-17-3. 표 -------------------------------------------------------------- */
.k-page .tablewrap{ background:transparent; border-radius:var(--r-lg); }
.k-page .table{ color:var(--k-on-surface); }
.k-page .table caption{ color:var(--k-on-surface-sub); }
.k-page .table th,.k-page .table td{ border-bottom:1px solid var(--k-surface-line); }
.k-page .table thead th{ background:var(--k-surface-2); color:var(--k-on-surface-strong); }
.k-page .table th[scope="row"]{ background:transparent; color:var(--k-on-surface-sub); }

/* K-17-4. FAQ ------------------------------------------------------------- */
.k-page .faq{ border-top:1px solid var(--k-surface-line); }
.k-page .faq__item{ border-bottom:1px solid var(--k-surface-line); }
.k-page .faq__q{ color:var(--k-on-surface-strong); }
.k-page .faq__q::after{ color:var(--k-on-surface-link); }
.k-page .faq__a{ color:var(--k-on-surface-sub); }
/* FAQ 가 패널 밖에서 지면 위에 바로 놓일 때를 대비해 자기 면을 갖게 합니다.
   패널 안이면 같은 색이므로 티가 나지 않고, 밖이면 읽는 면이 생깁니다. */
.k-page .k-sec > .wrap > .faq{
  background:var(--k-surface);
  border:1px solid var(--k-surface-line);
  border-radius:var(--r-lg);
  padding:0 var(--sp-5);
  box-shadow:var(--k-surface-shadow);
}

/* K-17-5. 버튼·칩 — 어두운 면 위 비텍스트 대비 3:1 을 테두리로 확보합니다 ---
   남색 .btn--primary 는 먹빛 면 위에서 1.66:1 이라 버튼의 "형태"가 사라집니다.
   글자 대비만 재고 넘어가면 놓치는 항목입니다. */
.k-page .k-panel .btn,.k-page .k-answer .btn,
.k-page .card .btn,.k-page .k-next .btn{ border:1px solid var(--k-btn-line); }
.k-page .k-panel .btn--primary,.k-page .k-answer .btn--primary,
.k-page .card .btn--primary,.k-page .k-next .btn--primary{
  background:var(--k-btn-primary-bg); color:var(--k-btn-primary-fg);
}
.k-page .k-panel .btn--ghost,.k-page .k-answer .btn--ghost,
.k-page .card .btn--ghost,.k-page .k-next .btn--ghost{
  background:transparent; color:var(--k-on-surface);
}

/* -----------------------------------------------------------------------------
   K-24. 🔴 상태 — hover · focus · active · disabled (v0.9 신설)
   어두운 면에서 상태는 밝은 면과 반대로 움직입니다. 광원이 지면 쪽에 있으므로
   "손이 닿았다"는 **밝아짐**이고 "눌렸다"는 **어두워짐**입니다.
   v0.8 은 hover 를 --k-wine(#6D0314, 기본색보다 어두움)으로 보냈고, 그러면
   어두운 지면 위에서 hover 가 비활성처럼 읽힙니다. 3단으로 분리합니다.
     기본 --k-crimson #BD0520  →  hover --k-crimson-lift #E50626  →  active --k-wine #6D0314
   focus 는 K-17-1 의 :focus-visible 3px --k-focus 가 이미 담당합니다(측정 완료).
   ⚠ 모션 0: 상태 전이에 transition 을 추가하지 않았습니다(§10-4).
   -------------------------------------------------------------------------- */
.k-page .k-panel .btn--primary:hover,.k-page .k-answer .btn--primary:hover,
.k-page .card .btn--primary:hover,.k-page .k-next .btn--primary:hover{
  background:var(--k-crimson-lift); color:var(--k-btn-primary-fg); border-color:var(--k-brass);
}
.k-page .k-panel .btn--primary:active,.k-page .k-answer .btn--primary:active,
.k-page .card .btn--primary:active,.k-page .k-next .btn--primary:active{
  background:var(--k-wine); color:var(--k-btn-primary-fg);
}
.k-page .k-panel .btn--ghost:hover,.k-page .k-answer .btn--ghost:hover,
.k-page .card .btn--ghost:hover,.k-page .k-next .btn--ghost:hover{
  background:var(--k-surface-2); color:var(--k-on-surface-strong); border-color:var(--k-brass);
}
.k-page .k-panel .btn--ghost:active,.k-page .k-answer .btn--ghost:active,
.k-page .card .btn--ghost:active,.k-page .k-next .btn--ghost:active{
  background:var(--k-ink); color:var(--k-on-surface);
}
/* 비활성 — 기본 레이어의 #E4E8EE 는 어두운 면에서 활성 버튼보다 밝습니다.
   면 쪽으로 가라앉혀 "꺼져 있음"이 보이게 합니다. */
.k-page .btn[disabled],.k-page .btn[aria-disabled="true"]{
  background:var(--k-disabled-bg); color:var(--k-disabled-fg);
  border-color:var(--k-disabled-line); cursor:not-allowed;
}
/* 링크의 4상태 — 지면 위·패널 안 모두 밑줄로 형태를 유지하고 색으로 상태를 알립니다.
   색만으로 상태를 알리지 않는 것은 접근성 요건입니다(SC 1.4.1). */
.k-page .k-panel a:active,.k-page .k-answer a:active,
.k-page .card a:active,.k-page .faq a:active{ color:var(--k-amber); }
.k-page .k-sec > .wrap > ul > li > a:active{ color:var(--k-amber); }

/* 카드 전체가 링크인 경우 — 기본 레이어는 밝은 tint 로 hover 합니다(어두운 면에서 역효과) */
.k-page .card--link:hover{ background:var(--k-surface-2); border-color:var(--k-brass); }
.k-page .card--link:active{ background:var(--k-ink); }

/* 🔴 본문 measure — craft floor 65~75ch. --measure-en 은 66ch 로 이미 범위 안이지만
   .prose 가 붙지 않은 <p> 가 wrap 전폭(1120px ≈ 140ch)까지 늘어났습니다
   (독립 진단 line-length 148 / 165 chars). 클래스를 일일이 붙이는 대신
   지면 위 직계 문단에 상한을 겁니다. 선택자는 K-2-1 과 같은 직계 사슬입니다. */
.k-page .k-sec > .wrap > p,
.k-page .k-sec > .wrap > .section__head > .lede{ max-width:var(--measure-en); }
.k-page .k-sec > .wrap > p:lang(ja),
.k-page .k-sec > .wrap > .section__head > .lede:lang(ja){ max-width:var(--measure-ja); }

/* -----------------------------------------------------------------------------
   K-4. 답 먼저 블록 — 검색으로 들어온 사람이 첫 화면에서 읽는 곳
   좌측 6px 청색 accent border 는 v0.7 에서 제거했고, 붉은 낙관(도장)으로 대체했습니다.
   -------------------------------------------------------------------------- */
/* 붉은 낙관 — 사주 4칸을 흰 선으로 나눈 인장 모양. 순수 배경 그라디언트이며 문자가 없습니다
   (::after 의 content 문자는 일부 스크린리더가 읽습니다. 그래서 content:"" 입니다).
   v0.8: 색동 머리띠(::before)를 피해 6px 아래로 내렸습니다. */
.k-answer::after{
  content:""; position:absolute; top:6px; right:0;
  width:44px; height:44px;
  border-radius:0 0 0 6px;
  background:
    linear-gradient(#FFFFFF,#FFFFFF) 50% 0/2px 100% no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) 0 50%/100% 2px no-repeat,
    var(--k-crimson);
}
html[data-decor="off"] .k-answer::after{ display:none; }
/* 🔴 v0.9 — 아이브로우 문법 해체 (craft floor)
   원문: "A tracked uppercase eyebrow over every section. One named kicker is a
   system; an eyebrow everywhere is grammar you did not choose."
   v0.8 은 .k-hero__eyebrow 와 .k-answer__label 둘 다 대문자 + 자간이었습니다.
   → **tracked uppercase 는 히어로 하나만 남깁니다**(그것이 이 사이트의 named kicker
     "KOREAN FOUR PILLARS · 四柱" 입니다).
   → 답 블록의 표제는 **다른 장치**로 만듭니다: 대문자·자간을 버리고 14px/800 놋빛.
     답 블록의 시각적 서명은 이미 붉은 낙관(.k-answer::after)이 맡고 있으므로
     같은 블록에 두 번째 장식 문법을 얹을 이유가 없습니다.
   ⚠ 크기를 13px→14px 로 올린 것은 축소가 아닙니다. 자간·대문자를 뺀 만큼
     라벨이 약해 보이지 않게 굵기(700→800)와 크기로 갚은 것입니다.
   ⚠ 진단 P1(답 블록 H2 승격)은 결정-26 으로 **보류 중**이라 여기서는 태그를 바꾸지
     않았습니다. 승격이 결정되면 이 규칙의 선택자만 h2 에 붙이면 됩니다. */
.k-answer__label{
  display:block; margin-bottom:var(--sp-2); padding-right:56px;
  font-size:var(--fs-sm); font-weight:800; letter-spacing:0;
  text-transform:none; color:var(--k-brass);
}
html[data-surface="light"] .k-answer__label{ color:var(--k-blue); }

/* 이 페이지가 흡수하는 질의 목록 (plan.md §5 P0-3 L0-e) */
.k-qlist{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.k-page .k-qlist li{
  font-size:var(--fs-sm); color:var(--k-on-surface);
  background:var(--k-surface-2); border:1px solid var(--k-surface-line);
  border-radius:var(--r-pill); padding:6px var(--sp-3);
}

/* -----------------------------------------------------------------------------
   K-5. 계산기 동선 — L0 에서 계산기로 넘어가는 카드
   L0-d: 계산기는 "답의 일부"이지 목적지가 아닙니다. 본문을 덮지 않습니다.
   역서(曆書) 격자 바탕. v0.8: 어두운 면 위이므로 격자선을 밝은 쪽으로 뒤집었습니다.
   -------------------------------------------------------------------------- */
.k-page .k-next{
  background-image:
    repeating-linear-gradient(90deg, rgba(209,165,88,.10) 0 1px, rgba(0,0,0,0) 1px 34px),
    repeating-linear-gradient(0deg,  rgba(209,165,88,.10) 0 1px, rgba(0,0,0,0) 1px 34px);
  padding:var(--sp-6);
  padding-top:calc(var(--sp-6) + 6px);
}
html[data-surface="light"] .k-page .k-next{
  background-image:
    repeating-linear-gradient(90deg, rgba(23,20,15,.08) 0 1px, rgba(0,0,0,0) 1px 34px),
    repeating-linear-gradient(0deg,  rgba(23,20,15,.08) 0 1px, rgba(0,0,0,0) 1px 34px);
}
html[data-decor="off"] .k-page .k-next{ background-image:none; }
.k-next__title{ font-size:var(--fs-h3); font-weight:800; margin-bottom:var(--sp-2); }
.k-next__row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }
.k-next .btn{ min-height:var(--tap); }

/* 페이지 안내(현재 위치) — 색은 K-2-1 에서 지면용으로 지정합니다 */
.k-crumb{ font-size:var(--fs-sm); margin-bottom:var(--sp-3); }

/* 섹션 구분 — 배경 대신 간격으로 나눕니다 */
.k-sec{ padding:var(--sp-10) 0; }
@media (min-width:768px){ .k-sec{ padding:var(--sp-12) 0; } }

/* -----------------------------------------------------------------------------
   K-6. 광고 컨테이너 보호 — 규칙 AD-L19  🔴 여기를 바꾸면 매출이 0 입니다
   ★ 라벨의 색·크기·굵기는 건드리지 않습니다(AD-L15). 배경만 다룹니다.
   ★ 읽는 면이 어두워진 v0.8 에서 이 규칙의 값은 오히려 더 중요해졌습니다.
     페이지에서 흰 불투명 면이 남는 곳이 광고와 고지 두 곳뿐이므로, 광고가
     콘텐츠와 섞여 보일 위험이 v0.7 보다 낮습니다 — 정책상 유리한 방향입니다.
   ⚠ .ad-slot-wrap 을 --k-surface 로 바꾸고 싶어질 것입니다. 바꾸지 마십시오.
     라벨 6.54:1 · 테두리 3.50:1 은 "흰 면 위" 값이고, 그 값이 AD-L15/AD-L19 의
     확정 하한입니다. 면이 바뀌면 하한이 전부 낡습니다.
   -------------------------------------------------------------------------- */
/* 🔴 v1.1 (감사 P2-1): --c-bg → --c-ad-panel 로 바꿨습니다. **값은 같습니다**(#FFFFFF).
   기본층 style.css §15 가 다크 모드에서 --c-bg 를 먹빛 지면(#0A0705)으로 뒤집습니다.
   이 두 줄이 --c-bg 를 계속 보고 있었다면, OS 를 다크로 둔 이용자에게 **L0 페이지의
   광고 패널만 조용히 검게** 변했을 것입니다(AD-L19 위반). 위 주석이 "면이 바뀌면
   하한이 전부 낡습니다"라고 적어 둔 바로 그 사고가, 이번에는 이 파일을 한 글자도
   고치지 않아도 일어날 수 있는 형태로 와 있었습니다.
   --c-ad-panel 은 style.css §1 에 선언돼 있고 다크 블록에서 재선언이 금지됩니다. */
.k-page .ad-slot-wrap,
.k-page .ad-side{
  background:var(--c-ad-panel);        /* 라벨 6.54:1 · 슬롯 테두리 3.50:1 로 고정 */
  border-radius:var(--r-lg);
  padding:var(--sp-4);
}
/* data-surface 스위치가 광고에 닿지 않는다는 것을 규칙으로 못 박습니다 */
html[data-surface="light"] .k-page .ad-slot-wrap,
html[data-surface="light"] .k-page .ad-side{ background:var(--c-ad-panel); }

/* =============================================================================
   K-23. 🔴 어두운 지면 위 광고 — 자리와 보호 (v0.9 신설)
   -----------------------------------------------------------------------------
   왜 이 절이 생겼는가
     `developer` 가 장식층을 실은 13페이지(L0 10 · L1-a 3)에 **광고 슬롯이 0건**입니다
     【확인함 — app/README.md §13-3 표: "장식 13페이지에는 광고 슬롯이 0건(ad-slot·ad-label 각 0)"】.
     트래픽이 가장 큰 계층에 수익 수단이 없고, 그래서 **어두운 면 위 광고 대비는
     아직 한 번도 측정된 적이 없습니다.** 이 절은 그 측정을 가능하게 만드는 자리입니다.

   🔴 이 절이 결정하지 않는 것 — **개수**
     결정-26 이 P1(광고 재고 개수 · .ad-side 300×600 신설)을 보류했습니다.
     따라서 여기서는 **슬롯을 하나도 늘리지 않습니다.** 정하는 것은 두 가지뿐입니다.
       ① 이미 있는 슬롯이 어두운 면에서 어떻게 보호되는가 (아래 규칙)
       ② 슬롯을 놓을 수 있는 자리가 어디인가 (아래 주석의 목록 — 규칙이 아니라 문서)

   ① 보호 — 어두운 면이 오히려 유리합니다
     실측: 흰 광고 패널 대 지면 상한 **8.98:1**, 대 먹빛 콘텐츠 면 **18.50:1**
     【확인함 — node design/check-l0-contrast.js, 항목 "광고 흰 패널 vs …"】.
     ⚠ 종전 판의 이 자리에는 9.73:1 · 14.44:1 이 적혀 있었습니다. **검사기 출력과
       달라 검사기 값으로 고쳤습니다.** 지면 상한은 그라디언트 층이 바뀌면 따라
       움직이므로 **손으로 옮겨 적은 숫자는 반드시 낡습니다.** 값이 필요하면
       주석을 믿지 말고 `node design/check-l0-contrast.js` 를 돌려 읽으십시오.
     밝은 면(v0.7)에서는 흰 패널 대 한지 지면이 1.15:1 이라 광고와 콘텐츠가
     같은 면으로 읽혔습니다. **어두운 지면은 그 문제를 구조적으로 없앱니다** —
     광고는 페이지에서 유일하게 흰 직사각형이므로 콘텐츠와 섞일 수 없습니다.
     이것은 애드센스 정책(광고를 콘텐츠처럼 보이게 하지 말 것)에 유리한 방향입니다.
     따라서 v0.9 는 **패널의 색을 바꾸지 않고**, 어두운 면 위에서만 필요한 두 가지만 더합니다.

   🔴 AD-L15 무변경을 다시 확인합니다 — **말이 아니라 렌더 실측으로**
     이 절에는 .ad-label 선택자가 **한 번도 나오지 않습니다.** 컨테이너에만 규칙을 걸어
     라벨이 규칙 변경의 사정권에 아예 들어오지 않게 한 것입니다.
     어두운 지면 위 실물에서 `getComputedStyle` 로 다시 읽었습니다
     【확인함 2026-07-30 — l0-sample.html · l1a-sample.html × 320/360/375/768/1024/1280/1440,
       슬롯 3개씩 = 42 표본】:
       .ad-label      color rgb(86,94,107) = #565E6B · 13px · 600   ← AD-L15 그대로
                      (`:lang(ja)` 표본만 14px. style.css §3-3 「일본어에 13px 캡션을 쓰지
                       않는다」가 v0.6 부터 하던 일이며 이 절과 무관합니다)
       .ad-slot-wrap  background rgb(255,255,255)                    ← AD-L19 그대로
       .ad-slot       border 1px rgb(127,138,153) · bg rgb(241,243,246)

   ③ 🔴 `developer` 에게 넘기는 것 — **배선 목록** (규칙이 아니라 지시)
     `app/` 의 장식 13페이지에는 광고 슬롯이 0건입니다. 아래를 `gen-content-pages.js` 에
     배선하십시오. **개수는 페이지당 2개로, 시안(l0-sample · l1a-sample)과 같습니다.
     늘리는 것이 아니라 시안에 이미 있는 것을 구현본에 옮기는 것입니다.**
       L0 10페이지  → `AD-L0-1`(level 0, 답 블록 아래) · `AD-L0-2`(level 1, 본문 최하단)
       L1-a 3페이지 → `AD-L1A-1`(level 0, 정의 블록 아래) · `AD-L1A-2`(level 1, 본문 최하단)
       마크업은 시안에서 그대로 복사하십시오(`.ad-slot-wrap > .ad-label + .ad-slot`).
       `data-ad-specimen="true"` 가 붙은 시안 전용 슬롯은 **복사하지 마십시오**(CHK-8).
     ⚠ **선행 조건**: `README.md` T-6 — 본문 카피가 빈 페이지에 광고를 붙이면 OUT-15
       (Doorway)와 인접합니다. **`marketer` 본문이 들어온 뒤** 배선하십시오.
       자리와 보호 방식은 이 절로 확정되었으니, 남은 것은 시점뿐입니다.
   ========================================================================== */

/* K-23-1. 어두운 지면 위에서 흰 패널의 가장자리가 「잘린 종이」처럼 보이지 않게 —
   패널 자체의 대비는 9.73:1 로 충분하지만, 그 밝기 차이 때문에 경계에 헤일로가
   생깁니다(K-1 에서 본문을 순백 대신 촛불색으로 고른 것과 같은 이유).
   바깥 1px 을 지면 쪽 어두운 색으로 감싸 경계를 눈에 맞춥니다.
   ⚠ box-shadow 이므로 레이아웃(광고 예약 높이)에 0px 를 더합니다 — CLS 영향 없음. */
.k-page .ad-slot-wrap,
.k-page .ad-side{
  box-shadow:0 0 0 1px rgba(10,7,5,.55), 0 14px 36px rgba(0,0,0,.55);
}

/* K-23-2. 광고 블록 위아래의 「숨 쉬는 자리」 — 어두운 면에서는 밝은 면보다
   더 필요합니다. 밝은 면에서는 여백이 흰색이라 광고와 자연스럽게 이어지지만,
   어두운 면에서는 광고가 뚜렷한 덩어리라 콘텐츠에 붙으면 밀도가 급해집니다.
   ⚠ --ad-gap(32px) 자체는 기본 레이어의 값이고 광고 정책 측정치와 엮여 있으므로
     바꾸지 않습니다. .wrap 쪽에서만 더합니다. */
.k-page .k-sec + .wrap > .ad-slot-wrap{ margin-top:var(--sp-10); }

/* K-23-3. 슬롯을 놓을 수 있는 자리 — **문서이지 규칙이 아닙니다.**
   design-guide.md §7 밀도 규칙과 Z-5(h1 위 광고 금지)를 그대로 따릅니다.
     허용  ① 답 블록(.k-answer) 바로 아래           ← 현행 AD-L0-1 이 여기 있습니다
           ② 본문 섹션과 본문 섹션 사이(.k-sec 경계)
           ③ FAQ 위                                  ← 현행 AD-L0-2 가 여기 있습니다
           ④ 1024px 이상에서 .layout 의 사이드 컬럼(.ad-side)  ← 미구현. 결정-26 보류
     금지  · h1 위 (Z-5)
           · 히어로 안 (.k-hero 의 자식으로 두면 어두운 배경 위에 흰 패널이 떠서
             첫 화면이 광고 페이지로 읽힙니다. 그리고 P0-1 을 다시 악화시킵니다)
           · .k-answer 안 (답과 광고가 한 테두리 안에 들어갑니다 — 정책 위반)
           · .form-actions 의 형제 (기본 레이어 §9 에 이미 적혀 있습니다)
   🔴 자리를 실제로 채우는 것은 `developer` 이고, **개수 결정은 대표 몫**입니다. */

/* -----------------------------------------------------------------------------
   K-18. 헤더 · 푸터 (v0.8 에서 어두운 면으로 편입)
   ⚠ .notice(오락 목적 고지)는 편입 대상이 아닙니다. 자기 밝은 tint 를 유지합니다.
     법적으로 실려 있어야 하는 문장이고 7.40:1 이 확정값입니다. 어둡게 하면
     그 값을 다시 재야 하고, 재서 통과해도 "왜 굳이" 에 답할 수 없습니다.
   -------------------------------------------------------------------------- */
.k-page .head{
  background:var(--k-surface);
  border-bottom:1px solid var(--k-surface-line);
}
.k-page .brand{ color:var(--k-on-surface-strong); }
.k-page .brand__tag{ color:var(--k-on-surface-sub); }
.k-page .nav-btn{ background:var(--k-surface-2); border-color:var(--k-brass); color:var(--k-on-surface); }
.k-page .nav-list{ border-top-color:var(--k-surface-line); }
.k-page .nav-list a,.k-page .lang__link{ color:var(--k-on-surface); }
.k-page .nav-list a[aria-current="page"]{
  background:var(--k-wine); color:var(--k-on-surface-strong);
}
.k-page .lang{ border-top-color:var(--k-surface-line); }
.k-page .lang__link{ border-color:var(--k-btn-line); }
.k-page .lang__link[aria-current="true"]{
  background:var(--k-wine); border-color:var(--k-brass); color:var(--k-on-surface-strong);
}

.k-page .foot{
  background:var(--k-surface);
  border-top:1px solid var(--k-surface-line);
}
.k-page .foot__title{ color:var(--k-on-surface-strong); }
.k-page .foot__list li a{ color:var(--k-on-surface); }
.k-page .foot__meta{ color:var(--k-on-surface-sub); }
.k-page .foot__meta dt{ color:var(--k-on-surface); }
.k-page .foot__bottom{ color:var(--k-on-surface-sub); border-top-color:var(--k-surface-line); }
/* 🔴 고지는 손대지 않습니다. 이 규칙은 "아무것도 하지 않는다"를 명시적으로 적어
   다음 사람이 실수로 어둡게 만들지 않게 하려는 것입니다. 지우지 마십시오. */
.k-page .notice{ background:var(--c-notice-tint); color:var(--c-notice-text); }

/* -----------------------------------------------------------------------------
   K-8. 밝은 채로 남는 면 — v0.8 기준. 이 목록을 어둡게 만들지 마십시오
     .ad-slot-wrap · .ad-side · .notice
   이 셋만 남았습니다. 셋 다 "측정값이 확정되어 있고 그 값이 규칙인" 면입니다.
     .ad-slot-wrap / .ad-side → AD-L15 · AD-L19
     .notice                  → 오락 목적 고지 7.40:1 (§8-2 D-2)
   나머지는 전부 --k-surface 로 들어갔고, data-surface="light" 로 한 번에 복귀합니다.
   -------------------------------------------------------------------------- */

/* =============================================================================
   K-22. 🔴 모바일 첫 화면 — 답을 접힘 위로 (v0.9 신설 · 진단 P0-1)
   -----------------------------------------------------------------------------
   대표 결정: **"고치되 컨셉은 유지한다. 모바일만."**
   그래서 이 절은 통째로 하나의 `@media (max-width:767.98px)` 안에 있습니다.
   **768px 이상은 한 픽셀도 바뀌지 않습니다** — 대표가 승인한 화면이기 때문입니다.

   왜 필요한가 【확인함 — app/README.md §13-4, `developer` 실측】
     장식층을 실은 뒤 375px 에서 첫 카드 상단이 445 → 734 (+289) 로 내려갔습니다.
     지금은 본문이 TODO 카드라 티가 안 나지만, `marketer` 본문이 들어오면
     **답이 375px 첫 화면 밖에서 시작합니다.** 수익원이 광고 100% 이고
     이탈이 결정되는 화면입니다.

   🔴 도상을 없애지 않았습니다 (결정-24 · 결정-25 확정 요소)
     인물 실루엣 2개 + 만세력 지면 도상 1개가 **모바일에서도 그대로 3개 다 보입니다.**
     한 것은 크기를 줄인 것뿐입니다: 120px → 64px.
     줄인 결과 이 띠는 「그림 구역」이 아니라 **도련(道連) 띠** — 옷자락 끝의 색동단처럼
     히어로의 아랫변을 마감하는 요소로 읽힙니다. 참조 사진의 무복 도련과 같은 역할이고,
     v0.8 의 시각 세계에서 벗어나지 않습니다.
     ⚠ 64px 아래로 더 줄이지 마십시오. 실측 결과 56px 에서 만세력 격자의 한자가
       판독 불가가 되고 「먼지」로 보였습니다.

   🔴 이 절이 여백만으로는 목표에 닿지 않는다는 것을 먼저 실측했습니다
     그래서 이 절은 세 종류를 함께 씁니다 — 여백 한 단 · **모바일 타이포 축소** · 도상 축소.
     ⚠ 타이포 축소는 **모바일 한정**이며 768px 이상에서는 --fs-h1:38px 가 그대로입니다.

     🔴 **효과를 A/B 로 실측했습니다** 【확인함 2026-07-30 · 재현 방법을 아래에 적습니다】
       재현: l0-sample.html 사본에서 **이 `@media (max-width:767.98px)` 블록만 통째로 삭제**하고
             Chrome 헤드리스 + iframe 폭 강제로 두 판을 같은 조건에서 잽니다.
             ⚠ `--window-size=375` 는 Chrome 최소 창폭(~485px)에 걸려 거짓말을 합니다.
               반드시 `iframe.contentWindow.innerWidth === 375` 를 먼저 확인하고 판독하십시오.
             답 첫 문장 y = `.k-answer` 안 **첫 텍스트 노드의 앞 10글자에 Range 를 걸어** 얻은
             `getBoundingClientRect().top + scrollY` 입니다(줄바꿈 후의 실제 첫 줄 위치).

       | 폭 | K-22 **없음** | K-22 **있음** | 절감 |
       |----|--------------|--------------|------|
       | 320px | 1148 | **714** | −434 |
       | 360px | 1016 | **659** | −357 |
       | 375px |  968 | **613** | −355 |

       375px 내역 (K-22 없음 → 있음): 헤더 162→103 · 히어로 666→427 · 도상 svg 120→64
       · 문서 높이 7350→6995. **목표(답 첫 문장 y<700) 대비 87px 여유**입니다.

     ⚠ 종전 판의 이 자리에는 「답 첫 문장 y=770」과 그 내역 11항목이 적혀 있었습니다.
       **재현되지 않아 지웠습니다**(같은 조건에서 968). 내역 합(732)도 본문 값(770)과
       맞지 않았습니다. 숫자를 남길 때는 위 표처럼 **재현 명령과 함께** 적으십시오.

   이 절이 도상 말고 건드리는 것 (전부 모바일 한정)
     ① .brand__tag — 375px 에서 3줄로 접혀 헤더를 136px 로 만듭니다(독립 진단도 지적).
        태그라인은 헤더의 필수 정보가 아니므로 모바일에서만 접습니다.
        ⚠ 지우는 것이 아닙니다. DOM 에 남아 있고 768px 이상에서 그대로 나옵니다.
     ② 히어로·패널·첫 섹션의 여백 한 단씩
     ③ h1 28px→25px · lede 행간 1.65→1.55 (모바일 한정)
     ④ 그 결과는 아래 「실측」에 적습니다. 숫자를 고치면 다시 재고 여기도 고치십시오.

   🔴 남은 29px 은 여기서 못 고칩니다 — 기본 레이어 소관
     375px 헤더가 103px 인 이유는 태그라인이 아니라 **.lang(언어 전환)이 2줄로 접히기**
     때문입니다(600px 에서는 74px). 【확인함 — .lang 실측 h=102(375) / h=73(600)】
     이것은 design/style.css 의 .head__bar · .lang 소관이고, 여기서 고치면
     **장식이 실린 13페이지만 헤더 높이가 다른** 상태가 됩니다. 고치지 않았습니다.
     다음 회차에 기본 레이어에서 고치면 답이 29px 더 올라옵니다.
   ========================================================================== */
@media (max-width:767.98px){
  /* ① 헤더 — 태그라인 접기 */
  .k-page .brand__tag{ display:none; }

  /* ② 히어로 여백 한 단 */
  .k-hero{ padding-top:var(--sp-2); }
  .k-page .k-hero__panel{ padding:var(--sp-3); }
  .k-hero__eyebrow{ margin-bottom:var(--sp-1); }

  /* ③ 모바일 타이포 — 컨셉이 아니라 크기만 줄입니다.
     h1: --fs-h1(28px)/1.2 → 25px/1.22. 375px 에서 줄 수는 4줄 그대로이고 높이만 줄어듭니다.
     ⚠ K-1 의 "기본 레이어 토큰을 덮어쓰지 말 것"을 지키려고 --fs-h1 을 재정의하지 않고
       요소에 직접 적었습니다. 토큰을 덮으면 이 페이지의 다른 h1 까지 따라 움직입니다.
     lede: 행간만 1.65→1.55. 글자 크기(16px)는 건드리지 않습니다 — 본문 하한입니다. */
  .k-page .k-hero__panel h1{ font-size:25px; line-height:1.22; }
  .k-page .k-hero__panel .lede{ margin-top:var(--sp-2); line-height:1.55; }

  /* ④ 도상 띠 → 도련 띠. **개수 3개 유지 · 높이와 위 여백만 축소** */
  .k-figures{
    gap:var(--sp-4);
    margin-top:var(--sp-2);
    padding-top:var(--sp-2);
    min-height:0;                       /* 132px 예약을 풉니다. 도상이 자기 높이를 냅니다 */
  }
  .k-figures svg{ height:64px; }

  /* ⑤ 히어로 바로 다음 구간을 붙입니다 — 답까지의 거리를 줄이는 마지막 한 단.
     .k-hero + .k-sec 는 "히어로 직후의 섹션" 하나만 잡습니다. 나머지 섹션 간격은
     그대로이므로 페이지의 리듬(섹션 사이 40px)이 무너지지 않습니다. */
  .k-hero + .k-sec{ padding-top:var(--sp-2); }
  .k-crumb{ margin-bottom:var(--sp-1); }
  .k-page .k-answer{ padding-top:calc(var(--sp-3) + 6px); }
  .k-answer__label{ margin-bottom:var(--sp-1); }
}

/* -----------------------------------------------------------------------------
   K-9. 일본어 병행 조판 보정 (§4-3)
   -------------------------------------------------------------------------- */
:lang(ja) .k-answer__label,:lang(ja) .k-qlist li{ line-height:var(--lh-ja); }