/* ============================================================
   Q-MakerAI 제품소개서 — deck.css
   스타일가이드 01_스타일가이드.md 의 실행형. 페이지 HTML은 이 파일만 불러온다.
   페이지 파일에서 색·폰트를 새로 정의하지 말 것.
   ============================================================ */

/* ── Fonts (로컬 임베드) ── */
@font-face{font-family:Pretendard;font-weight:400;font-display:block;src:url("/deck/_assets/fonts/Pretendard-Regular.woff2")format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-display:block;src:url("/deck/_assets/fonts/Pretendard-Medium.woff2")format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-display:block;src:url("/deck/_assets/fonts/Pretendard-SemiBold.woff2")format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-display:block;src:url("/deck/_assets/fonts/Pretendard-Bold.woff2")format("woff2")}
@font-face{font-family:Pretendard;font-weight:800;font-display:block;src:url("/deck/_assets/fonts/Pretendard-ExtraBold.woff2")format("woff2")}
@font-face{font-family:MaruBuri;font-weight:400;font-display:block;src:url("/deck/_assets/fonts/MaruBuri-Regular.woff2")format("woff2")}
@font-face{font-family:MaruBuri;font-weight:600;font-display:block;src:url("/deck/_assets/fonts/MaruBuri-SemiBold.woff2")format("woff2")}
@font-face{font-family:MaruBuri;font-weight:700;font-display:block;src:url("/deck/_assets/fonts/MaruBuri-Bold.woff2")format("woff2")}
@font-face{font-family:"Frag Mono";font-weight:400;font-display:block;src:url("/deck/_assets/fonts/FragmentMono-Regular.woff2")format("woff2")}

:root{
  /* Color — globals.css 실측값 */
  /* v2 — 종이를 거의 흰색까지 밝힌다. v1 의 #F4F6F9 위에 #ECF0F5 박스를 얹으니
     카드가 배경에서 뜨지 않아 화면 전체가 회청색 한 덩어리로 보였다("배경색이 너무 많다"). */
  --paper:#FAFBFD; --surface:#FFFFFF; --sunken:#F2F5FA;
  --tint:#F1F5FE;                       /* 강조 밴드 전용 — 페이지당 한 곳만 */
  /* 액센트 램프: 항목마다 순환시켜 구분한다. 보라 계열은 쓰지 않는다(DESIGN.md 안티패턴). */
  --a1:#2A47AC; --a2:#3F6FE0; --a3:#0B6E8F; --a4:#0E7B61;
  --rule:#E4E9F0; --rule-strong:#CDD6E1; --rule-faint:#EEF2F7;
  --ink-text:#161E2C; --ink-2:#4C586A; --ink-3:#606D84; --ink-muted:#8794A8;
  --ink-50:#EEF2FB; --ink-100:#DDE6F8; --ink-300:#90A9E2; --ink-500:#3C5DC0;
  --ink-600:#2A47AC; --ink-700:#213787; --ink-900:#141F47;
  --ok:#0E7B61; --warn:#A96208;
  /* Dark surface roles */
  --d-bg:#141F47; --d-text:#FFFFFF; --d-2:#B9C6E4; --d-3:#8397C4;
  --d-rule:rgba(255,255,255,.14); --d-card:rgba(255,255,255,.055);
  /* Type */
  /* ★v2 제목 서체 교체 — 이게 "시원하고 큼직하지 않다"의 진짜 원인이었다.
     v1 은 제목이 명조(MaruBuri)였다. 크기 문제가 아니다: 42px 인데도 작아 보인 건
     명조 볼드의 획이 가늘고 세로 강세라 큰 판형에서 흐려지기 때문이다.
     Pretendard ExtraBold(800)는 **이미 임베드돼 있었는데 제목에 쓰이지 않았다.**
     명조는 표지 전용(.serif)으로만 남긴다 — 브랜드 톤은 한 장에서만 낸다. */
  --f-disp:Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --f-serif:MaruBuri,"Noto Serif KR",serif;
  --f-sans:Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --f-mono:"Frag Mono",ui-monospace,monospace;
  /* Grid */
  /* v1 은 좌우 각 120px = 캔버스의 15% 를 여백으로 먹어 본문이 1360px 로 눌렸다. */
  --mx:88px; --top:64px; --bot:88px;   /* 푸터(절대배치, 아래에서 ~56px)를 피해 본문이 멈추는 지점 */
}

/* ── Print/PDF 규격 (02_제작규격.md §1) ────────────────────
   @page 가 없으면 Chrome --print-to-pdf 가 US Letter(612×792pt)로 떨어진다.
   1600×900px @96dpi = 1200×675pt. */
@page{size:1200pt 675pt;margin:0}

*{margin:0;padding:0;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{width:1600px;height:900px;background:var(--paper)}
html.dark,body.dark,html.dark body{background:var(--d-bg)}
img{display:block;max-width:100%}

/* ── Page shell ─────────────────────────────────────────── */
.pg{
  position:relative;width:1600px;height:900px;overflow:hidden;
  background:var(--paper);color:var(--ink-text);
  font-family:var(--f-sans);font-weight:400;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  padding:var(--top) var(--mx) var(--bot);
  display:flex;flex-direction:column;
}
.pg.dark{background:var(--d-bg);color:var(--d-text)}
.pg.bleed{padding:0}

/* ── Eyebrow / Title / Sub ──────────────────────────────── */
.eyebrow{
  font-family:var(--f-mono);font-size:18px;line-height:1;letter-spacing:.1em;
  color:var(--ink-600);text-transform:uppercase;white-space:nowrap;
}
.dark .eyebrow{color:var(--ink-300)}
.eyebrow .sep{color:var(--rule-strong);margin:0 8px}
.dark .eyebrow .sep{color:var(--d-3)}
/* 짧은 선행 룰 + 아이브로우 (레퍼런스 문법) */
.eyebrow.ruled::before{
  content:"";display:inline-block;width:34px;height:2px;background:currentColor;
  vertical-align:.28em;margin-right:14px;
}

h1.d1{font-family:var(--f-disp);font-weight:800;font-size:92px;line-height:1.14;letter-spacing:-.03em;color:var(--ink-900)}
h1.d2,h2.d2{font-family:var(--f-disp);font-weight:800;font-size:58px;line-height:1.2;letter-spacing:-.025em;color:var(--ink-900)}
h1.d3,h2.d3{font-family:var(--f-disp);font-weight:800;font-size:46px;line-height:1.22;letter-spacing:-.02em;color:var(--ink-900)}
/* 표지 한 장만 명조로 — 브랜드 톤 유지용 탈출구. 본문 페이지에는 쓰지 않는다. */
h1.serif,h2.serif{font-family:var(--f-serif);font-weight:700;letter-spacing:-.02em}
.dark h1,.dark h2{color:var(--d-text)}
h3{font-family:var(--f-sans);font-weight:700;font-size:26px;line-height:1.35;letter-spacing:-.012em;color:var(--ink-text)}
h4{font-family:var(--f-sans);font-weight:700;font-size:20px;line-height:1.4;color:var(--ink-text)}
.dark h3,.dark h4{color:var(--d-text)}

/* 페이지 헤더 블록 — v2 에서 **고정 높이를 버렸다.**
   v1 은 헤더를 min-height 로 못박고 본문을 `margin-top:auto` 로 밀어 가운데 정렬했다.
   그 결과 본문이 짧은 페이지는 **푸터 아래가 통째로 비었다**(p02 실측 22%).
   v2 규칙: 헤더는 내용만큼만 차지하고, **본문(.body-area)이 flex:1 로 남는 높이를 전부 먹는다.**
   콘텐츠가 모자라면 카드를 키우거나 정보를 더한다 — 여백으로 때우지 않는다. */
.head{margin-bottom:0}
.head .eyebrow{margin-bottom:22px}
.head h1,.head h2{margin-bottom:0}
.head .sub{margin-top:18px;font-size:22px;line-height:1.55;color:var(--ink-2);max-width:1180px}
.dark .head .sub{color:var(--d-2)}
/* ★본문이 남는 높이를 전부 차지한다. .mid 는 그 안에서 세로 가운데 정렬만 담당하고,
   **더 이상 위아래로 밀어내지 않는다**(margin-top:auto 제거 — 그게 하단 공백의 원인이었다). */
.body-area{flex:1 1 auto;min-height:0;padding-top:40px;width:100%;display:flex;flex-direction:column}
.body-area>*{width:100%}
.body-area.mid{justify-content:center}
/* ★본문 영역만 키워서는 부족하다 — 그 안의 그리드가 늘어나지 않으면 카드는 그대로 위에
   붙어 있고 아래가 빈다(p03 실측: 아래 절반 공백). 그리드와 카드를 함께 늘린다.
   레퍼런스도 같은 방식이다 — 카드는 높이를 채우고 내용은 위에 정렬된다. */
.body-area>.grid2,.body-area>.grid3,.body-area>.grid4,.body-area>.split{flex:1 1 auto;min-height:0}
.body-area>.grid2>*,.body-area>.grid3>*,.body-area>.grid4>*{min-height:0}
/* .split 기본값이 align-items:center 라 flex 본문 안에서 세로를 안 채운다.
   페이지마다 인라인으로 stretch 를 붙이던 것을 여기서 한 번에 처리한다. */
.body-area>.split{align-items:stretch}
.body-area.mid>.split{align-items:center}   /* 가운데 정렬이 옳은 페이지는 .mid 로 표시 */
.body-area>.grid2>.card,.body-area>.grid3>.card,.body-area>.grid4>.card{height:100%}
/* .mid 를 붙인 페이지는 늘리지 않고 가운데 정렬만 한다(수치 카드처럼 늘리면 어색한 경우). */
.body-area.mid>.grid2,.body-area.mid>.grid3,.body-area.mid>.grid4,.body-area.mid>.split{flex:0 1 auto}
.body-area.mid>.grid2>.card,.body-area.mid>.grid3>.card,.body-area.mid>.grid4>.card{height:auto}

/* ── Text ───────────────────────────────────────────────── */
p{font-size:20px;line-height:1.7;letter-spacing:-.005em;color:var(--ink-2)}
p+p{margin-top:16px}
p.s{font-size:17px;line-height:1.65}
.dark p{color:var(--d-2)}
.cap{font-family:var(--f-sans);font-size:15px;line-height:1.5;color:var(--ink-3)}
.dark .cap{color:var(--d-3)}
.mono-lb{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--ink-muted);text-transform:uppercase}
.mono-lb.lc{text-transform:none}   /* 도메인·소문자 표기용 */
/* 각주 — 수치 조건·단서 한 줄 (p17 각주 · p19 표 아래). 한글이므로 Pretendard */
.fn{font-size:13px;line-height:1.6;color:var(--ink-muted)}
.dark .mono-lb{color:var(--d-3)}

/* ★강조 문법: 색은 글자에만 */
.hl{color:var(--ink-600)}
.dark .hl{color:var(--ink-300)}
b,strong,.b{font-weight:700;color:var(--ink-text)}
.dark b,.dark strong,.dark .b{color:var(--d-text)}
/* 교정자의 밑줄 — 단어 폭만 */
.ul{background-image:linear-gradient(var(--ink-600),var(--ink-600));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px}

/* ── Bullets — 앞 토막만 컬러 볼드 ──────────────────────── */
ul.blt{list-style:none}
ul.blt>li{position:relative;padding-left:26px;font-size:20px;line-height:1.6;color:var(--ink-2)}
ul.blt>li+li{margin-top:20px}
ul.blt>li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--ink-600)}
ul.blt>li .k{font-weight:700;color:var(--ink-600)}
.dark ul.blt>li{color:var(--d-2)}
.dark ul.blt>li::before{background:var(--ink-300)}
.dark ul.blt>li .k{color:var(--ink-300)}
/* 사각 불릿(문서적) */
ul.blt.sq>li::before{border-radius:0;width:6px;height:6px;top:.68em}

/* ── Cards — 헤어라인 우선, 그림자 없음 ─────────────────── */
/* v2 카드 — 종이가 거의 흰색이 됐으므로 카드는 **틴트가 아니라 그림자+액센트**로 분리한다.
   액센트 없는 카드는 쓰지 않는다: 흰 바탕에 흰 카드라 경계가 사라진다. */
.card{background:var(--surface);border:1px solid #EEF1F8;border-radius:16px;padding:28px 32px;
      box-shadow:0 1px 2px rgba(20,31,71,.05),0 10px 28px rgba(20,31,71,.055)}
/* 액센트 보더 — 왼쪽 6px(.al) 또는 위 5px(.at). 1px 헤어라인으로 구조를 만들지 않는다. */
/* radius 16px 이 6px 액센트의 위아래 끝을 깎아 가늘어 보인다 — 그 모서리만 펴서 막대로 세운다. */
.card.al{border-left:6px solid var(--a1);border-top-left-radius:5px;border-bottom-left-radius:5px}
.card.at{border-top:5px solid var(--a1)}
.card.a1,.card.a1.al,.card.a1.at{border-color:#EEF1F8}
.card.al.a1{border-left-color:var(--a1)} .card.al.a2{border-left-color:var(--a2)}
.card.al.a3{border-left-color:var(--a3)} .card.al.a4{border-left-color:var(--a4)}
.card.at.a1{border-top-color:var(--a1)}  .card.at.a2{border-top-color:var(--a2)}
.card.at.a3{border-top-color:var(--a3)}  .card.at.a4{border-top-color:var(--a4)}
/* 채움 카드 — 페이지당 최대 1개. 그라데이션은 같은 색상환 안에서만(블루→블루). */
.card.fill{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:#fff;
           box-shadow:0 2px 4px rgba(20,31,71,.12),0 14px 34px rgba(42,71,172,.22)}
.card.fill h3,.card.fill h4,.card.fill b,.card.fill strong{color:#fff}
.card.fill p,.card.fill li,.card.fill .cap{color:rgba(255,255,255,.86)}

/* ── 하단 강조 밴드 — 페이지의 결론 한 줄. 틴트는 페이지에 여기 하나뿐. ── */
/* margin-bottom 이 없으면 밴드가 2줄로 넘어갈 때 푸터 괘선을 침범한다(실측 여유 ~10px). */
/* 도해 프레임도 카드와 같은 액센트 규칙을 따른다(페이지마다 인라인하지 않도록). */
.fig.at{border-top:5px solid var(--a1)}
.fig.at.a1{border-top-color:var(--a1)} .fig.at.a2{border-top-color:var(--a2)}
.fig.at.a3{border-top-color:var(--a3)} .fig.at.a4{border-top-color:var(--a4)}
.mark.a2{border-color:var(--a2)} .mark.a3{border-color:var(--a3)} .mark.a4{border-color:var(--a4)}

.keymsg{margin-top:24px;margin-bottom:10px;border-top:4px solid var(--a1);background:var(--tint);
        padding:22px 28px;font-size:21px;font-weight:700;color:var(--ink-text);line-height:1.5}
.dark .keymsg{background:var(--d-card);border-top-color:var(--ink-300);color:var(--d-text)}

/* ── 막대 ──────────────────────────────────────────────────────────
   ⚠️ .bar 는 반드시 display:block 이어야 한다. <span> 은 inline 이라 height/width 가
   먹지 않아 **0×0 으로 렌더되고 차트가 통째로 사라진다.** 실제로 그 사고가 났고,
   코드만 읽으면 정상으로 보여서 화면을 봐야만 잡힌다. */
.track{display:block;height:14px;background:#EDF1F8;border:1px solid #E2E8F4;border-radius:3px;overflow:hidden}
.bar{display:block;height:100%;background:var(--a1)}
.bar.a2{background:var(--a2)} .bar.a3{background:var(--a3)} .bar.a4{background:var(--a4)}
.card.sunk{background:var(--sunken);border-color:var(--rule)}
.card.ink{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.card.ink h3,.card.ink h4{color:#fff}
.card.ink b,.card.ink strong,.card.ink .b{color:var(--d-text)} /* 전역 b 색이 다크판에서 묻힌다 */
.card.ink p,.card.ink li{color:var(--d-2)}
.card.ink .mono-lb{color:var(--d-3)}
.dark .card{background:var(--d-card);border-color:var(--d-rule);color:var(--d-text)}
.dark .card p{color:var(--d-2)}

.row{display:flex;gap:24px;width:100%}
.row>*{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch}
.split{display:grid;grid-template-columns:42% 1fr;gap:56px;align-items:center;width:100%}
.split.r{grid-template-columns:1fr 42%}

/* ── Stamp chip — 흰 바탕 + 잉크 보더 (파스텔 금지) ─────── */
/* 한글 도장("제공 중"·"예정")이 기본이라 Pretendard 를 쓴다. Frag Mono 는 한글 글리프가
   없어 폴백되고 letter-spacing .06em 이 한글에서 자간을 깨뜨린다(스모크 렌더 확인).
   영문·숫자 도장에만 .stamp.mono 를 붙인다. */
.stamp{display:inline-block;font-family:var(--f-sans);font-weight:600;font-size:14px;line-height:1;
  letter-spacing:0;padding:6px 11px;border-radius:3px;
  background:#fff;border:1px solid currentColor;color:var(--ink-600);white-space:nowrap}
.stamp.mono{font-family:var(--f-mono);font-weight:400;font-size:13px;letter-spacing:.06em}
.stamp.ok{color:var(--ok)} /* '예정' 도장은 경고가 아니라 **상태 표시**다. --warn(주황)은 DESIGN.md 안티패턴이고
   확정문안 p18 도 `--ink-muted 보더`를 지정한다. */
.stamp.plan{color:var(--ink-muted);border-color:var(--rule-strong);background:transparent}
.dark .stamp{background:transparent}
.dark .stamp.ok{color:#5FD3B2} .dark .stamp.plan{color:#E0AE5E}

/* ── Stat — 인쇄 사양서 카드 ────────────────────────────── */
/* 통계 블록의 상단선도 구조선이다 — 1px 헤어라인은 100% 축소 인쇄에서 사라진다. */
.stat{border-top:3px solid var(--a1);padding-top:20px}
.stat .v{font-family:var(--f-mono);font-size:62px;line-height:1;letter-spacing:-.015em;
  color:var(--ink-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .v .u{font-family:var(--f-sans);font-size:.62em;font-weight:700;letter-spacing:-.01em;
  margin-left:.06em} /* 한글 단위 — mono엔 글리프가 없어 폴백되고 자간만 남는다 */
.stat .v.hl{color:var(--ink-600)}
.stat .l{margin-top:14px;font-size:18px;font-weight:600;color:var(--ink-text);line-height:1.4}
.stat .c{margin-top:8px;font-size:12.5px;color:var(--ink-muted);line-height:1.5}
.stat .c.mono{font-family:var(--f-mono);letter-spacing:.03em} /* 라틴·숫자 캡션만 */
.dark .stat{border-top-color:var(--d-rule)}
.dark .stat .v{color:#fff} .dark .stat .v.hl{color:var(--ink-300)}
.dark .stat .l{color:var(--d-text)} .dark .stat .c{color:var(--d-3)}
.stat-xl .v{font-size:88px}
.stat-sm .v{font-size:46px} /* 값이 길어 4열이 한 줄에 안 들어갈 때 */

/* ── Process rows — 큰 모노 번호 + 헤어라인 ─────────────── */
.prow{display:grid;grid-template-columns:96px 1fr;gap:32px;align-items:start;
  padding:26px 0;border-top:1px solid var(--rule)}
.prow:last-child{border-bottom:1px solid var(--rule)}
/* 5행짜리 파이프라인용 — 기본 .prow(행당 ~118px)는 5행이면 푸터와 겹친다(실측).
   .tight = 행당 ~96px → 5행 481px, 서브 없는 헤더(가용 532px)에 들어간다. */
.prow.tight{padding:16px 0}
.prow.tight .dsc{margin-top:6px;line-height:1.5}
.prow .n{font-family:var(--f-mono);font-size:34px;line-height:1;color:var(--ink-600);
  font-variant-numeric:tabular-nums;padding-top:4px}
.prow .t{font-size:22px;font-weight:700;color:var(--ink-text);line-height:1.4}
.prow .dsc{margin-top:8px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.dark .prow{border-top-color:var(--d-rule)}
.dark .prow:last-child{border-bottom-color:var(--d-rule)}
.dark .prow .n{color:var(--ink-300)} .dark .prow .t{color:var(--d-text)} .dark .prow .dsc{color:var(--d-2)}

/* ── Table — 이중괘선 헤더 ──────────────────────────────── */
table.tb{width:100%;border-collapse:collapse}
/* 헤더는 한글이므로 Pretendard — mono엔 한글 글리프가 없어 폴백되고 자간만 남는다 */
table.tb thead th{font-weight:600;font-size:13px;letter-spacing:0;
  color:var(--ink-muted);text-align:left;
  padding:0 16px 12px;border-bottom:1px solid var(--rule-strong)}
table.tb tbody tr:first-child td{padding-top:20px;
  box-shadow:inset 0 3px 0 -2px var(--rule)} /* 이중괘선 하단선 */
table.tb td{padding:16px;font-size:18px;line-height:1.5;color:var(--ink-2);
  border-bottom:1px solid var(--rule-faint);vertical-align:top}
table.tb td.k{font-weight:700;color:var(--ink-text)}

/* ── Screenshot frame — 문서객체 radius 2px ─────────────── */
.shot{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:20px;box-shadow:0 1px 2px rgba(20,31,71,.05),0 12px 32px -12px rgba(20,31,71,.14)}
.shot .lb{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.shot .lb span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted)}
.shot img{width:100%;border-radius:2px;border:1px solid var(--rule)}
.dark .shot{background:var(--d-card);border-color:var(--d-rule);box-shadow:none}
.dark .shot img{border-color:var(--d-rule)}

/* ── Figure — 인라인 도해 (22_비주얼슬롯_확정.md) ───────────
   .shot 은 사진(그림자 有), .fig 는 그린 도해(그림자 無)로 나눈다.
   도해 안의 본문은 회색 막대가 아니라 실제로 읽히는 활자로 조판한다. */
.fig{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px}
/* 라벨은 한글이 기본이므로 Pretendard. Frag Mono 는 한글 글리프가 없어 폴백되고
   letter-spacing 이 자간을 벌린다(.stamp 와 같은 함정). 영문·숫자에만 .mono 를 붙인다. */
.fig>.lb{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.fig>.lb span{font-family:var(--f-sans);font-weight:500;font-size:13px;letter-spacing:0;
  color:var(--ink-muted)}
.fig>.lb span.mono{font-family:var(--f-mono);font-weight:400;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase}
.dark .fig{background:var(--d-card);border-color:var(--d-rule)}
.dark .fig>.lb span{color:var(--d-3)}

/* 지면·화면 목업 판 — 문서 객체이므로 radius 2px */
.sheet{background:var(--surface);border:1px solid var(--rule-strong);border-radius:2px;padding:20px}
.sheet.sunk{background:var(--sunken)}
/* 목업 안 활자 */
.mini{font-size:13px;line-height:1.55;color:var(--ink-2);letter-spacing:-.005em}
.mini.t{font-size:14.5px;font-weight:700;color:var(--ink-text)}
.mini.n{font-size:12px;color:var(--ink-muted);letter-spacing:0}          /* 한글 가능 메타 라벨 */
.mini.id{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-muted);font-variant-numeric:tabular-nums}              /* 숫자·ID 전용 */
/* 칩 — 필터·태그. 한글이 기본이라 Pretendard, 영문·숫자만 .mono */
.chip{display:inline-block;font-family:var(--f-sans);font-weight:500;font-size:12px;
  letter-spacing:0;line-height:1;padding:6px 10px;border:1px solid var(--rule-strong);
  border-radius:3px;color:var(--ink-3);white-space:nowrap}
.chip.mono{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.05em}
.chip.on{border-color:var(--ink-600);color:var(--ink-600)}
/* 검출 사각형 — 잉크 실선 + 라벨 */
.mark{position:relative;border:1.5px solid var(--ink-600);border-radius:2px}
.mark>.tag{position:absolute;top:-8px;left:10px;background:var(--surface);padding:0 6px;
  font-family:var(--f-sans);font-weight:600;font-size:11px;letter-spacing:0;
  color:var(--ink-600);line-height:1}
/* 정오 히트맵 셀 */
.cell{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:2px;
  font-family:var(--f-mono);font-size:13px;line-height:1;
  background:var(--sunken);color:var(--ink-muted)}
.cell.o{background:var(--ink-100);color:var(--ink-700)}
.cell.x{background:var(--surface);border:1px solid var(--rule-strong);color:var(--ink-muted)}

/* ── Crop marks ⌜ ⌟ — 희소 사용 ─────────────────────────── */
.crop{position:relative}
.crop::before,.crop::after,.crop>.cm1,.crop>.cm2{
  content:"";position:absolute;width:16px;height:16px;border-color:var(--rule-strong);border-style:solid}
.crop::before{top:0;left:0;border-width:2px 0 0 2px}
.crop::after{top:0;right:0;border-width:2px 2px 0 0}
.crop>.cm1{bottom:0;left:0;border-width:0 0 2px 2px}
.crop>.cm2{bottom:0;right:0;border-width:0 2px 2px 0}
.dark .crop::before,.dark .crop::after,.dark .crop>.cm1,.dark .crop>.cm2{border-color:var(--d-3)}

/* ── Rules ──────────────────────────────────────────────── */
hr.rule{border:0;height:1px;background:var(--rule);margin:32px 0}
hr.dbl{border:0;height:5px;margin:32px 0;
  background:linear-gradient(var(--rule-strong),var(--rule-strong)) top/100% 1px no-repeat,
             linear-gradient(var(--rule),var(--rule)) bottom/100% 1px no-repeat}
.dark hr.rule{background:var(--d-rule)}

/* ── Footer bar / page number ───────────────────────────── */
.foot{position:absolute;left:var(--mx);right:var(--mx);bottom:34px;
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:20px;border-top:1px solid var(--rule)}
.foot .msg{font-size:17px;font-weight:600;color:var(--ink-text)}
.foot .msg em{font-style:normal;font-weight:400;color:var(--ink-3);margin-left:10px}
.foot .pn{font-family:var(--f-mono);font-size:14px;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:32px}
.dark .foot{border-top-color:var(--d-rule)}
.dark .foot .msg{color:var(--d-text)} .dark .foot .msg em{color:var(--d-3)}
.dark .foot .pn{color:var(--d-3)}
.pn-only{position:absolute;right:var(--mx);bottom:34px;font-family:var(--f-mono);
  font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.dark .pn-only{color:var(--d-3)}

/* ── Giant mono numeral (챕터) ──────────────────────────── */
.big-n{font-family:var(--f-mono);font-size:210px;line-height:.82;letter-spacing:-.04em;
  color:var(--ink-300);opacity:.9;font-variant-numeric:tabular-nums}

/* ── Utilities (레이아웃 흐름 유지용, 절대배치 대체) ────── */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mt40{margin-top:40px}.mt56{margin-top:56px}
.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}
.fill{flex:1}.center-y{display:flex;flex-direction:column;justify-content:center}
.nowrap{white-space:nowrap}


/* ── 인쇄 (v2) ────────────────────────────────────────────────────
   그림자는 잉크를 먹고 회색 얼룩으로 나오므로 뺀다. 액센트 보더는 **유지**한다 —
   흑백 출력에서 구조를 읽게 하는 유일한 단서다. */
@media print{
  .card{box-shadow:none}
  .card.fill{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .track,.bar,.keymsg,.card.al,.card.at,.stat{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── v2 보조 모디파이어 (p01~p20 적용 중 인라인으로 우회하던 것을 승격) ────────── */

/* .stat 은 상단 3px 액센트를 강제한다. `.card.at` 안에 넣으면 액센트가 이중이 되므로,
   카드 안에서 쓸 때는 .bare 로 그 선을 끈다. */
.stat.bare{border-top:0;padding-top:0}

/* .grid4 칸 안에서는 46px(.stat-sm)도 넘친다 — `.v` 가 nowrap 이라 "98.9 – 100%" 가 잘린다. */
.stat-xs .v{font-size:38px}

/* 카드 안에 도해·차트를 두고 하단에 붙이려면 카드 자체가 flex 여야 한다. */
.card.col{display:flex;flex-direction:column}

/* 여러 행짜리 .grid4 는 행 높이가 제각각이 된다 — 카드 하단선을 맞춘다. */
.grid4.rows{grid-auto-rows:1fr}

/* ⚠️ .sheet.sunk 의 --sunken 틴트는 "틴트는 페이지당 한 곳" 규칙의 **예외**다.
   종이 목업 *내부* 표현 전용이며, 페이지 배경으로 쓰지 말 것. */

/* ⚠️ table.tb / .prow 는 구조를 전부 1px 헤어라인으로 만든다 — STYLEGUIDE §9 체크리스트
   ("1px 선이 헤더·푸터 밖에 있지 않은가")와 정면 충돌한다. v2 에서는 카드로 대체했다.
   남겨 두되 **새로 쓰지 말 것**. */

/* ⚠️ .head.has-sub 는 v2 에서 무효다(고정 높이를 버렸다). 마크업에 남아 있어도 무해. */


/* ══ v3 개편 (2026-07-29, 오너 D2 컨펌 "혼합") ═══════════════════════════════
   표지·디바이더·브레이크·엔딩(p01·p05·p14·p21) = 레퍼런스 직계 무드(퍼플·그라데이션
   허용 — §7 안티패턴의 명시적 예외 지면). 본문 페이지는 기존 잉크 시스템 유지.
   ⚠️ .gx-* 를 본문 페이지에 쓰지 말 것 — 예외가 규칙이 되는 순간 v2 이전으로 회귀한다. */

/* 배경 두 톤 — 라이트(표지)와 딥(디바이더·브레이크·엔딩).
   딥은 .pg.dark 와 함께 써서 다크 타이포 규칙을 전부 상속하고 배경만 덮는다. */
.pg.gx-light{background:linear-gradient(148deg,#F3F0FF 0%,#EDF2FF 46%,#E8F4FF 100%)}
.pg.dark.gx-deep{background:linear-gradient(136deg,#3B1D8F 0%,#3730A3 44%,#1D4ED8 100%)}

/* 유기 블롭 — 페이지당 1~2개. radial 이라 사각 경계가 없다. */
.gx-blob{position:absolute;border-radius:50%;pointer-events:none}
.gx-blob.b1{width:760px;height:760px;top:-260px;right:-180px;
  background:radial-gradient(circle at 34% 30%,rgba(124,58,237,.16),rgba(37,99,235,.07) 62%,transparent 74%)}
.gx-blob.b2{width:520px;height:520px;bottom:-200px;left:-140px;
  background:radial-gradient(circle at 60% 60%,rgba(37,99,235,.12),transparent 68%)}
.gx-deep .gx-blob.b1{width:820px;height:820px;top:-320px;right:-220px;
  background:radial-gradient(circle,rgba(167,139,250,.28),transparent 66%)}

/* 그라데이션 타이포 — 라이트 지면용(.grad-t)과 딥 지면용(.grad-t.lt) */
.grad-t{background:linear-gradient(92deg,#4C1D95,#2563EB);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-t.lt{background:linear-gradient(180deg,#C4B5FD,#93C5FD);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* 일러스트 판 — 라이트 지면은 라운드+딥 섀도, 딥 지면은 더 무거운 섀도 */
.plate{border-radius:28px;overflow:hidden;
  box-shadow:0 4px 10px rgba(76,29,149,.10),0 30px 70px -20px rgba(76,29,149,.28)}
.plate img{width:100%;display:block}
.gx-deep .plate{border-radius:26px;
  box-shadow:0 6px 14px rgba(15,10,60,.25),0 34px 80px -22px rgba(15,10,60,.5)}

/* 디바이더 인덱스(목차) — 딥 지면 전용 4행 */
.gx-idx{border-top:1px solid rgba(255,255,255,.22)}
.gx-idx .r{display:grid;grid-template-columns:56px 1fr 110px;align-items:center;
  padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.22)}
.gx-idx .r .no{font-family:var(--f-mono);font-size:15px;color:#C4B5FD}
.gx-idx .r h4{font-size:19px;font-weight:600;color:#fff}
.gx-idx .r .pgn{font-family:var(--f-mono);font-size:13px;color:rgba(255,255,255,.6);
  text-align:right;letter-spacing:.05em}

/* 본문 스텝 타이포 — 카드 3장 나열을 대체하는 감량 문법(D2 A_content 검증).
   잉크 시스템 소속이라 본문 어디에나 쓴다. */
.step{padding:26px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .no{font-family:var(--f-mono);font-size:15px;letter-spacing:.08em;color:var(--ink-600)}
.step h3{margin-top:10px;font-size:24px}
.step p{margin-top:8px;font-size:18px;line-height:1.6}
.step.s{padding:16px 0}
.step.s p{font-size:17px}

@media print{
  .pg.gx-light,.pg.dark.gx-deep,.gx-blob,.grad-t,.plate{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}