/* ── 김자매 블로그 레인 (2026-08-12) ────────────────────────────────────
   FORM STUDIO 토큰(fs/tokens.css) 위에 **국문 장문 독서용 중간 타입 단**을 얹는다.

   왜 단을 새로 선언하는가:
   FORM STUDIO 는 영문 워드마크용 45:1 스케일이라 단이 label 12px / body 30px /
   display 200px 셋뿐이다. 국문 장문을 얹으면 중간 단이 없어 양쪽으로 깨진다
   (reference_formstudio_korean_type). 그래서 이 파일에서만 읽기 단을 정의한다.
   색·간격·이징·서체는 토큰을 그대로 상속하고, **새 색은 한 개도 만들지 않는다.**

   조판 3원칙 (실측 확정분 준수):
   1. 200px 디스플레이 자리에 국문 문장을 올리지 않는다 — 제목도 68px 상한.
   2. 국문 요소는 전부 word-break:keep-all (어절 중간 파손 방지).
   3. 산문을 12px 라벨에 두지 않는다 — label 은 메타·표머리 전용.
   위계는 '크기'로 잡고 무게는 400/600 2단만 쓴다 (Pretendard 보유 웨이트와 일치).
   ───────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--fs-paper);color:var(--fs-ink)}
body{font-family:var(--fs-font-kr);font-weight:400;-webkit-font-smoothing:antialiased}
::selection{background:var(--fs-ink);color:var(--fs-paper)}

.ko{word-break:keep-all;overflow-wrap:break-word}

/* ── 읽기 단 (이 레인 전용) ── */
:root{
  --bl-measure: 46rem;          /* 국문 장문 1행 목표 ≒ 40자 (2026-08-17 54rem 확장은 우측 여백 이상으로 원복) */
  /* 값의 출처는 사이트 본판이다 — 상세로 들어갔을 때 타입이 바뀌면 다른 사이트로 읽힌다.
     h1 = contact `.lead h1` / h2 = index `.how h2` / p = index `.intro .lead`·contact `.lead .body`
     와 같은 값을 쓴다. 이 레인이 추가하는 것은 **그 사이에 빠져 있는 h3·캡션 두 단뿐**이다. */
  --bl-h1:   clamp(26px, 2.9vw, 40px);  /* 글 제목 — 메인 h2(36) 위 한 단 */
  --bl-lead: clamp(16px, 1.5vw, 20px);  /* = 메인 20px/32 단 (`.step .tx` ×4) — 리드·인용 전용 */
  --bl-h2:   20px;  /* 섹션 타이틀 20px 볼드 (2026-08-12 대표 지시 — 16px에서 상향) */
  --bl-h3:   clamp(15px, 1.4vw, 17px);  /* = 메인 17px/25.5 소제목 단 (`span.ti` ×7) */
  --bl-p:    clamp(13px, 1.15vw, 15px); /* 본문 문단 15px (대표 지시 2026-08-12) */
  --bl-cap:  clamp(12.5px, 1.1vw, 15px); /* = 메인 표 값 15px/22.5 (×12) */
  --bl-label: var(--fs-text-label);      /* = 사이트 라벨(12px, Halenoir) */
}
/* 모바일 가독 하한 상향(2026-08-13 대표 지시 — 상세 글자 너무 작음).
   clamp 하한이 13px대라 375px에서 본문이 13px로 앉던 것을 본문 16 기준으로 올린다.
   다이어그램 내부 15px 고정(.bfa/.pipe/.clab 등)은 대표의 '15 통일' 지시 대상이라 건드리지 않는다. */
@media (max-width:809px){
  :root{
    --bl-h1:   clamp(28px, 7vw, 34px);
    --bl-lead: 18px;
    --bl-h3:   17px;
    --bl-p:    16px;
    --bl-cap:  14px;
  }
}

/* 상단 내비·푸터는 공용 크롬(fs/chrome.css)이 담당한다 — 이 레인은 읽기 단만 선언한다. */

/* ── 공통 폭 ── */
/* 본문 폭 — 가운데 정렬이 아니라 **사이트와 같은 4열 그리드의 2~3열**에 앉힌다.
   가운데 정렬은 화면 어디에도 없는 축을 만들어 관통 가이드선과 어긋난다(2026-08-12 대표 지적). */
.wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.wrap > *{grid-column:2 / 4;
  /* 메인 섹션(.inner)과 **완전히 같은 규칙**을 쓴다 (2026-08-12 대표 지시).
     메인: `.how{padding: … 25% … calc(25% + var(--fs-side))}` + `.inner{max-width:none;width:100%}`
     → 좌 거터 20px, 우측은 3열 가이드에 붙고, 폭 상한이 없다.

     2026-08-17: 54rem 확장(grid 2/5)을 시도했으나 우측 끝이 75% 가이드선에서 떠 여백이 이상해져 원복.
        대표 지시로 2~3열(50%) 대칭 정렬 유지 — 표·본문 좌우가 가이드선에 딱 맞고 표는 100%. */
  /* 좌우 대칭 거터 — 우측을 0 으로 두면 표의 우측 정렬 숫자가 가이드선에 그대로 붙어 숨을 못 쉰다.
     (메인은 문단이 가이드까지 닿는 일이 드물어 티가 안 나지만, 표가 있는 레인에서는 바로 드러난다) */
  padding:0 var(--fs-side)}
@media (max-width:809px){
  .wrap{display:block}
  .wrap > *{padding:0 var(--fs-side)}
}

/* ── 글 머리 ── */
.head{padding-top:calc(var(--fs-nav-h) + clamp(40px,7vh,90px));padding-bottom:clamp(28px,4vh,46px)}  /* 좌우는 .wrap > * 가 준다 */
.meta{
  font-family:var(--fs-font-en);font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);text-transform:uppercase;opacity:.5;
  /* 제목·리드 아래로 내렸으므로 여백은 위로 준다. 좌(날짜·글쓴이)·우(분류)를
     양 끝에 붙여 본문 좌우 가이드선과 같은 폭을 잡는다. */
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--fs-space-u4);flex-wrap:wrap;
  margin-top:clamp(24px,3.6vh,40px)
}
.meta .mright{margin-left:auto;text-align:right}
@media (max-width:809px){
  .meta{flex-direction:column;gap:var(--fs-space-u2)}
  .meta .mright{margin-left:0;text-align:left}
}
h1{font-size:var(--bl-h1);font-weight:600;line-height:1.4;letter-spacing:-.01em}  /* 사이트 h1 과 동일 */
.lead{
  font-size:var(--bl-lead);line-height:1.6;letter-spacing:-.01em;margin-top:clamp(18px,2.6vh,30px);
  opacity:.78
}

/* ── 본문 ── */
/* 본문 시작 괘선 — 메타(작성일자·분류) 아래, 본문 위. (2026-08-12 대표 지시로 제목↔리드 사이에서 이동) */
/* 하단 여백 — 글이 끝나고 푸터 전까지 숨을 크게 준다(2026-08-13 대표 지시로 72~120 → 130~230 상향).
   ⚠️ 선택자는 반드시 `.wrap > article`(0,1,1) — 위 `.wrap > *`(0,1,0)의 `padding:0 var(--fs-side)`
   쇼트핸드가 상하 패딩까지 덮으므로, 맨 `article`(0,0,1)로 쓰면 이 상하 패딩은 조용히 0이 된다(2026-08-13 실측). */
.wrap > article{padding-top:clamp(24px,3.4vh,40px);border-top:1px solid var(--fs-grid-ink);padding-bottom:clamp(65px,9vh,115px)}  /* 본문 하단 여백 50% 축소·공통(2026-08-16 대표) */
article h2{
  font-size:var(--bl-h2);font-weight:600;line-height:1.42;letter-spacing:-.01em;   /* = index .how h2 */
  margin:clamp(52px,7.5vh,92px) 0 clamp(16px,2.2vh,24px)
}
article h3{
  font-size:var(--bl-h3);font-weight:600;line-height:1.5;
  margin:clamp(34px,4.6vh,52px) 0 clamp(10px,1.4vh,14px)
}
article p{font-size:var(--bl-p);line-height:1.6;letter-spacing:-.01em}  /* 18px × 1.6 = 28.8 — 메인 산문과 동일 */
/* 산문 측정폭 캡(2026-08-13 대표 지시 — 문단이 가로를 다 채우지 않게).
   표·그림·프롬프트(.tw/.fig/.prompt)는 전폭 유지 — 읽는 텍스트만 46rem에서 꺾인다. */
article p,article h2,article h3,article ul,article ol,article blockquote,.head .lead{max-width:var(--bl-measure)}
.gate ol{max-width:var(--bl-measure)}
/* ⚠️ 크기·행간·자간 셋 다 메인과 같은 값이어야 한다.
   메인에 실재하는 산문 단은 `.how .step .tx`(16~20 / 1.6 / -.01em) 하나뿐이다 —
   `.about .abody p` 는 이 페이지에 존재하지 않는 선택자이므로 기준으로 쓰지 않는다(2026-08-12 실측 null). */
article p + p{margin-top:1.1em}
article strong{font-weight:600}  /* 리드·표 등 강조 유지. 본문 문단의 중간강조는 마크업에서 <strong> 자체를 뺐다(대표 지시) */
article a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

/* 인용 — 새 색 없이 잉크 괘선 하나로 */
blockquote{
  margin:clamp(34px,4.8vh,54px) 0;padding-left:clamp(18px,2.4vw,30px);
  border-left:2px solid var(--fs-ink);
  font-size:var(--bl-lead);line-height:1.6;letter-spacing:-.01em;font-weight:600
}

/* 목록 */
article ul,article ol{margin:1.15em 0;padding-left:1.35em}
article li{font-size:var(--bl-p);line-height:1.8;margin-bottom:.55em}
article li::marker{opacity:.45}

/* 표 — 잉크 괘선만. 넘칠 땐 표만 가로 스크롤 */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* 표 폭 = 본문 콘텐츠 폭. 좌우로 빼내지 않는다(2026-08-12 대표 지시) — 읽는 줄과 표의
     시작·끝이 어긋나면 같은 단락으로 안 읽힌다. 넘치면 표 안에서만 가로 스크롤한다. */
  margin:clamp(28px,4vh,44px) 0}
/* 표 — 본문 단보다 한 단 작게(사이트 목록 행 .tri li 와 같은 14.1px).
   폭은 본문과 같은 축·같은 폭이며, 좁은 화면에서만 가로 스크롤을 허용한다. */
table{border-collapse:collapse;width:100%;table-layout:auto;
  font-size:var(--bl-cap);line-height:1.55;letter-spacing:-.01em}
th,td{
  text-align:left;vertical-align:top;padding:.78em .9em;
  border-bottom:1px solid var(--fs-grid-ink);
  /* = index `.cv td{font-family:var(--fs-font-kr);font-size:clamp(12.5px,1.1vw,15px);line-height:1.5}` 선언 그대로.
     자간은 선언하지 않는다 — 메인이 주지 않는 값을 여기서 만들면 그게 곧 시스템 이탈이다. */
  font-family:var(--fs-font-kr);font-size:var(--bl-cap);line-height:1.5}
th{
  /* 머리행은 라벨이다 — 메인 `.lab{font-size:var(--fs-text-label);letter-spacing:var(--fs-ls-label);text-transform:uppercase}` 와 같은 토큰. */
  font-family:var(--fs-font-en);font-weight:400;
  font-size:var(--fs-text-label);letter-spacing:var(--fs-ls-label);
  border-bottom:1px solid var(--fs-ink);white-space:nowrap}
/* 숫자 칸만 우측 정렬 — 글자 칸까지 밀면 읽는 축이 두 개가 된다.
   .num 은 원고가 이미 쓰고 있던 클래스다(헤더 th.num 포함). */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num{font-family:var(--fs-font-en)}

/* 3열 이하 표 — 마지막 열(텍스트)을 중앙 가이드 50%에 정렬(2026-08-13 대표 지시).
   숫자 열(.num)이 마지막이면 제외 — 우측 정렬 수치가 흩어진다. */
.tw table:has(thead tr>th:nth-child(3):last-child:not(.num)) thead th:last-child,
.tw table:has(thead tr>th:nth-child(3):last-child:not(.num)) tbody td:last-child{width:50%}

/* 판정 체크리스트 — AI 인용 표적 블록 */
.gate{border-top:1px solid var(--fs-ink);border-bottom:1px solid var(--fs-ink);
  margin:clamp(38px,5.4vh,60px) 0;padding:clamp(22px,3.2vh,34px) 0}
.gate .lb{font-family:var(--fs-font-en);font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);margin-bottom:var(--fs-space-u4)}
  /* 라벨 디밍 해제(2026-08-13 대표 지시 — 괘선 라벨은 본색. 무게는 시스템 기본 유지) */
.gate ol{margin:0;padding-left:1.3em}
.gate li{font-weight:600;font-size:17px;line-height:1.6;letter-spacing:-.01em;margin-bottom:.72em}  /* 문항·해설 동일 17(2026-08-13 대표 지시) */
.gate li:last-child{margin-bottom:0}
.gate li span{display:block;font-weight:400;opacity:.62;font-size:17px;margin-top:.24em}

/* 각주·출처 */
/* 각주는 main 안 마지막 판 — 본문과 같은 열에 앉는다(.wrap 을 중첩하면 패딩이 두 번 먹는다) */
.noteblock{margin-top:clamp(40px,6vh,72px)}
.note{margin-top:clamp(44px,6vh,72px);padding-top:clamp(20px,2.8vh,28px);
  border-top:1px solid var(--fs-grid-ink);font-size:var(--bl-cap);line-height:1.72;opacity:.6}
.note p + p{margin-top:.7em}
/* CTA 아래로 내린 각주 — 잉크 면을 지나온 뒤라 위 괘선을 지우고, 바닥 여백을 준다.
   (본문 안 .note 는 위 규칙 그대로 유지) */
footer + section .note{border-top:0;padding-top:0;margin-bottom:clamp(56px,8vh,104px)}

/* ── 상세 좌측 기록 레일 (2026-08-13 대표 지시) ──
   상세에서 전체 기록이 항상 왼쪽 1열(빈 열)에 떠 있고, 클릭하면 우측 본문이 바뀐다.
   내용은 fs/posts.js 레지스트리 한 곳에서 렌더링 — 페이지마다 목록을 복사하지 않는다. */
.rail{position:fixed;z-index:5;
  left:var(--fs-side);
  top:calc(var(--fs-nav-h) + clamp(40px,7vh,90px));
  /* 좌우 여백 동일(2026-08-13 대표 지시) — 왼쪽 뷰포트 여백과 오른쪽(25% 가이드까지) 여백을 같게 */
  width:calc(25% - 2*var(--fs-side));
  word-break:keep-all}
.rail .rlb{font-family:var(--fs-font-en);font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);margin-bottom:var(--fs-space-u3)}
/* 텍스트를 흐리게 빼지 않는다 — 제목은 전부 본색, 메타(날짜|분류)만 한 단 낮춘다(2026-08-13 대표 지시). */
.rail a{display:block;text-decoration:none;color:inherit;
  padding:.85em 0;border-top:1px solid var(--fs-grid-ink);
  transition:opacity var(--fs-dur-hover) var(--fs-ease)}
.rail a:last-child{border-bottom:1px solid var(--fs-grid-ink)}
.rail a:hover{opacity:.6}          /* 언더라인 액션 금지(2026-08-13) — 밝기만 변한다 */
.rail .rt{font-family:var(--fs-font-kr);font-weight:600;
  font-size:var(--bl-cap);line-height:1.6;letter-spacing:-.01em}
/* 현재 보고 있는 글 — 글자에 잉크 배경을 깔아 표시한다(2026-08-13 대표 지시). 줄바꿈돼도 clone 으로 줄마다 감싼다. */
/* 현재글 강조 — 검정 배경 대신 블루 텍스트(제목·메타 위아래 모두)(2026-08-15 대표 "위아래 모두 블루"). */
.rail a[aria-current="page"] .rt{color:#263A99;font-weight:700}
.rail a[aria-current="page"] .rm{color:#263A99;opacity:1}
/* 메타 행 — 분류 좌 / 작성일 우측 정렬(2026-08-16 대표). */
.rail .rm{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;
  font-family:var(--fs-font-en);font-size:11px;
  letter-spacing:var(--fs-ls-label);opacity:.6;margin-top:.35em}
.rail .rc{min-width:0}
.rail .rd{flex:none;white-space:nowrap}
/* 최신글 NEW 배지 — index .pnew 와 통일(파란 배경·흰 글자·자간 0·각짐, 2026-08-15 대표 지시). */
.rail .rnew{display:inline-block;font-family:var(--fs-font-en);font-size:10px;font-weight:600;
  letter-spacing:0;background:#263A99;color:#fff;padding:.2em .42em;margin-left:.5em;vertical-align:.14em}
/* 페이징(2026-08-16 대표) — 5글 초과 시 하단. 잉크 테두리 사각 버튼, 현재 페이지만 잉크 반전. */
.rail .rpager{display:flex;gap:.4em;margin-top:var(--fs-space-u3)}
.rail .rpg{font-family:var(--fs-font-en);font-size:11px;line-height:1;letter-spacing:var(--fs-ls-label);
  color:var(--fs-ink);background:transparent;border:1px solid var(--fs-grid-ink);
  padding:.5em .72em;cursor:pointer;transition:opacity var(--fs-dur-hover) var(--fs-ease)}
.rail .rpg:hover{opacity:.6}
.rail .rpg.on{background:#263A99;border-color:#263A99;color:#fff}
/* 모바일(810px 미만): 데스크톱 좌측 레일(기록·어바웃)은 숨긴다 — 모바일 내비게이션은
   햄버거 메뉴가 전담한다(2026-08-16 대표: RECORD·ABOUT 아코디언). */
@media (max-width:809px){.rail{display:none}}

/* ── 복붙용 프롬프트 블록 (2026-08-13 대표 지시 — AI 지시문 전문 공개) ──
   괘선 박스 + 국문 프리라인. write-check 비산정(pre). */
.prompt{margin:clamp(28px,4.2vh,44px) 0;
  /* 테두리 대신 옅은 회색 면(2026-08-13 대표 지시) — 값은 토큰만: grid 폴백 + 잉크 4% 혼합 */
  background:var(--fs-grid);
  background:color-mix(in srgb, var(--fs-ink) 4%, var(--fs-paper));
  padding:clamp(20px,3vh,32px) clamp(20px,2.4vw,30px)}
.prompt .lb{font-family:var(--fs-font-en);font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);margin-bottom:var(--fs-space-u4)}
.prompt .phead{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--fs-space-u4)}
.prompt .phead .lb{margin-bottom:0}
.pcopy{display:inline-flex;align-items:center;gap:.45em;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:var(--fs-font-en);font-size:var(--fs-text-label);letter-spacing:var(--fs-ls-label);
  transition:opacity var(--fs-dur-hover) var(--fs-ease)}
.pcopy:hover{opacity:.6}
.pcopy svg{width:14px;height:14px;display:block}
.prompt pre{margin:0;white-space:pre-wrap;word-break:keep-all;
  font-family:var(--fs-font-kr);font-size:var(--bl-cap);line-height:1.85;letter-spacing:-.01em}

/* 교차판(2×2) — 2026-08-17 신설.
   왜: 본문 수치를 그대로 막대로 옮기면 바로 위 표와 같은 값이라 그림이 정보를 더하지 않는다
   (직역). 두 축이 어긋나는 지점(올려뒀지만 안 씀 / 목록 밖에서 씀)은 표로는 안 보이고
   격자로만 보인다 — 그림이 실제로 할 일이 있는 형태(의역).
   FS 규격 유지: 글자 15 단일 · 잉크 단색 · 라운드 0. 위계는 크기가 아니라 면·무게·반전. */
.fig .x2{display:grid;grid-template-columns:auto 1fr 1fr;gap:1.4px;font-size:15px;line-height:1.45}
.fig .x2h{padding:0 12px 10px;font-weight:600;text-align:center;align-self:end}
.fig .x2corner{background:none}
.fig .x2r{display:flex;align-items:center;justify-content:flex-end;text-align:right;
  padding:0 14px 0 0;font-weight:600;word-break:keep-all}
.fig .x2c{background:var(--fs-grid);padding:24px 12px;text-align:center}
.fig .x2c b{font-weight:600;font-family:var(--fs-font-en)}
.fig .x2c span{display:block;margin-top:8px;opacity:.62;word-break:keep-all}
.fig .x2c.ink{background:var(--fs-ink);color:var(--fs-paper)}
.fig .x2c.ink span{opacity:.78}
@media (max-width:639px){
  /* 글자는 15 고정(대표 지시 '15 단일, 예외 없음') — 좁아지면 글자가 아니라 여백을 줄인다. */
  .fig .x2c{padding:18px 6px}
  .fig .x2r{padding-right:10px}
}

/* Before/After 비교판 — HTML판(2026-08-13 대표 지시: 본문 폭 100%, 글자·모양은 고정) */
.fig .bfa{font-size:15px;line-height:1.5}
.fig .btit{font-weight:600;margin-bottom:16px}
.fig .bpanel{background:var(--fs-grid);padding:22px 24px 20px}
.fig .bfiles{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fig .bfile{position:relative;width:94px;height:66px;flex:0 0 auto;
  background:var(--fs-ink);color:var(--fs-paper);
  clip-path:polygon(0 0,72% 0,100% 30%,100% 100%,0 100%)}
.fig .bfile i{position:absolute;left:10px;top:6px;font-style:normal;font-weight:600}
.fig .bfile em{position:absolute;right:9px;bottom:7px;font-style:normal}
.fig .bcap{text-align:center;margin-top:24px}
.fig .bgap{height:40px}
.fig .bcols,.fig .bchain{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fig .bcell{background:var(--fs-grid);height:136px;display:flex;align-items:center;justify-content:center}
/* 폴더 실루엣 — 좌상단 탭(2026-08-17 교정).
   이전 모양 polygon(0 0,72% 0,100% 30%,100% 100%,0 100%) 은 '우상단 모서리가 접힌 문서'로
   읽혔다 — .bfile(파일) 과 같은 실루엣이라 '파일을 폴더로 나눈다'는 그림의 요지가 지워졌다.
   탭을 좌상단에 세워 파일(문서)과 폴더를 실루엣만으로 구분한다.
   본체가 13%부터 시작하므로 가운데 정렬이 위로 뜬다 → padding-top 으로 광학 중심을 맞춘다. */
.fig .bshape{width:110px;height:72px;background:var(--fs-paper);color:var(--fs-ink);font-weight:600;
  clip-path:polygon(0 0,42% 0,50% 13%,100% 13%,100% 100%,0 100%);
  display:flex;align-items:center;justify-content:center;padding-top:9px;box-sizing:border-box}
/* 라벨 칸 — 폴더가 아닌 것(표시 종류·판정 결과)에 폴더 실루엣을 쓰지 않는다.
   ai-draft-overclaim 의 '근거 없음·과장·문구 변형'은 AI가 붙이는 표시지 폴더가 아니다. */
.fig .bshape.is-label{clip-path:none;padding-top:0;border:1.4px solid var(--fs-ink)}
.fig .bchain>div{grid-column:3;display:flex;flex-direction:column;align-items:center}
.fig .bline{width:1.4px;height:24px;background:currentColor}
.fig .bbar{align-self:stretch;height:42px;background:var(--fs-ink);color:var(--fs-paper);font-weight:600;
  display:flex;align-items:center;justify-content:center}
.fig .bchain>div>span:last-child{margin-top:18px}
@media (max-width:639px){
  .fig .bcols,.fig .bchain{grid-template-columns:1fr}
  .fig .bchain>div{grid-column:1}
}

/* 파이프라인 — HTML판(2026-08-13 대표 지시) — 폭 100% · 글자 15 고정 · 잉크 단색
   단계 수는 --n 으로 받는다(2026-08-17). repeat(5,1fr) 고정이면 4단계 그림에서 마지막
   한 칸이 빈 채로 남아 흐름이 오른쪽으로 치우친다 — 칸 수를 마크업이 선언하게 한다. */
.fig .pipe{font-size:15px;line-height:1.45}
.fig .porigrow{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:36px}
.fig .porigwrap{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.fig .porig{border:1.4px dashed var(--fs-ink);padding:.55em 1.2em}
.fig .pdrop{width:0;height:24px;border-left:1.4px dashed currentColor}
.fig .prow{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:36px;margin-top:8px}
.fig .pstep{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.fig .pstep+.pstep::before{content:"→";position:absolute;left:-27px;top:14px}
.fig .pbox{align-self:stretch;height:52px;border:1.4px solid var(--fs-ink);
  display:flex;align-items:center;justify-content:center;font-weight:600;word-break:keep-all}
.fig .pstep.ink .pbox{background:var(--fs-ink);color:var(--fs-paper);border-color:var(--fs-ink)}
.fig .psub{opacity:.62;word-break:keep-all}
@media (max-width:639px){
  .fig .prow,.fig .porigrow{grid-template-columns:1fr;gap:30px}
  .fig .porigwrap{grid-column:1}
  .fig .pstep+.pstep::before{content:"↓";left:50%;transform:translateX(-50%);top:-24px}
}

/* ── 목록 페이지 ── */
.lhead{padding-top:calc(var(--fs-nav-h) + clamp(40px,7vh,90px));padding-bottom:clamp(30px,4.5vh,52px)}
.lhead h1{font-size:var(--bl-h1)}
.lhead .sub{font-size:var(--bl-lead);line-height:1.6;opacity:.72;margin-top:clamp(14px,2vh,22px)}
.list{border-top:1px solid var(--fs-ink)}
.list a.row{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(24px,3.4vh,38px) 0;border-bottom:1px solid var(--fs-grid-ink);
  transition:opacity var(--fs-dur-hover) var(--fs-ease)
}
.list a.row:hover{opacity:.55}
/* 날짜 | 분류 — 구분자를 넣고 붙여 쓴다(2026-08-13 대표 지시). 멀리 떨어뜨리지 않는다. */
.list .rmeta{font-family:var(--fs-font-en);font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);opacity:.5;display:flex;margin-bottom:var(--fs-space-u3)}
.list .rmeta span + span::before{content:"|";margin:0 .7em}
.list .rt{font-size:var(--bl-h3);font-weight:600;line-height:1.42;letter-spacing:-.01em}
.list .rd{font-size:var(--bl-cap);line-height:1.68;letter-spacing:-.01em;opacity:.62;margin-top:.55em}

/* ── 하단 CTA ── */
/* CTA 판 — 글 끝 전환. 사이트 CTA 와 같은 잉크 면 반전을 쓰되, 푸터가 아니라 콘텐츠 섹션이다
   (푸터는 공용 크롬의 .foot 이 그린다 — 상세에서 골격이 달라지지 않게). */
/* 하단 CTA 를 검정 밴드가 아니라 본문(같은 열·본문 배경)에 둔다 — 배경 삭제·계선은 .bctainner 에(2026-08-16 대표). */
.bcta{background:transparent;color:var(--fs-ink);
  margin-top:clamp(44px,7vh,90px);padding-bottom:var(--fs-space-u6)}  /* 하단 여백 공통 80px — brand/contact/faq(.wrap padding-bottom=u6)와 통일(2026-08-16 대표) */
.bcta ::selection{background:var(--fs-paper);color:var(--fs-ink)}
.bcta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* 하단 CTA 훅(.fb)은 읽기 본문이 아니라 디스플레이 문장이라 46rem measure 를 쓰지 않는다.
   우측 가이드(4열 끝)까지 폭을 열어, 한 줄로 들어갈 문장이 measure 에 걸려 꺾이지 않게 한다(2026-08-17 대표). */
.bctainner{grid-column:2 / 5;max-width:none;padding:0 var(--fs-space-u6) 0 var(--fs-side)}  /* 우측 여백 u5→u6(80px) — 한 줄 문장이 오른쪽 끝에 닿는다(2026-08-23 대표) */
@media (max-width:809px){ .bcta{display:block} .bctainner{max-width:none;padding:0 var(--fs-side)} }
.bcta .fb{font-size:var(--bl-h2);font-weight:600;line-height:1.42;letter-spacing:-.01em;text-wrap:balance}
.bcta .fl{display:none}  /* 서브카피 제거 — 메인 카피 + 버튼으로만 마무리(2026-08-16 대표) */
/* 버튼 공통 규칙(2026-08-16 대표) — 기본 잉크(블랙) 면 + 흰 글자 / 호버 블루 면 + 흰 글자. 한 줄(nowrap). */
.bcta .cta{display:inline-block;margin-top:clamp(24px,3.4vh,38px);
  font-family:var(--fs-font-kr);font-size:var(--bl-cap);font-weight:600;
  letter-spacing:var(--fs-ls-label);text-decoration:none;white-space:nowrap;
  background:var(--fs-ink);color:var(--fs-paper);
  border:1px solid var(--fs-ink);padding:.82em 1.9em;
  transition:background var(--fs-dur-hover) var(--fs-ease),border-color var(--fs-dur-hover) var(--fs-ease),color var(--fs-dur-hover) var(--fs-ease)}
.bcta .cta:hover,.bcta .cta:focus-visible{background:#263A99;border-color:#263A99;color:#fff}

/* ── 설명 다이어그램 (2026-08-13 대표 지시 — 설명 단계는 글·표로만 구성하지 않는다) ──
   FS 규칙 유지: 새 색 금지, 잉크 선 + 페이퍼. SVG 는 인라인(외부 요청 0)·currentColor 상속. */
/* 4열 관통 가이드는 그림도 관통한다(2026-08-17 대표 확정 — 그림 위로 올렸다가 되돌림).
   가이드가 그림에서만 끊기면 관통이 아니게 되므로, 판을 덮지 않고 그대로 지나가게 둔다. */
.fig{margin:clamp(48px,7vh,72px) 0}
/* 이미지는 본문 읽기 폭을 벗어나지 않는다 (2026-08-19 대표 지시) — 문단(article p, --bl-measure)과 좌우 끝을 맞춘다. 표(.tw)는 100%(2026-08-17 대표)라 예외. */
.fig{max-width:var(--bl-measure)}
/* 사진 크레딧(Unsplash 등) — 영문 폰트 규칙 + 10px (2026-08-19 대표 지시). 캡션 아래 한 줄. */
.fig .credit{display:block;margin-top:.45em;font-family:var(--fs-font-en);font-weight:400;font-size:10px;line-height:1.5;letter-spacing:var(--fs-ls-label);opacity:.62}
.fig .credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
/* 그루핑(2026-08-13 대표 지시): 그림 내부 섹션 간격(40) < 그림-이웃 블록 간격(48~72) */
.fig img,.fig picture{display:block;width:100%;max-width:100%;height:auto}
.fig svg{display:block;width:100%;height:auto;
  /* 표시 폭 상한 = 설계 폭(2026-08-13 대표 지시 '작게') — 확대 렌더를 막아 폰트 15가 화면에서도 15로 보이게 */
  max-width:720px}
.fig text{font-family:var(--fs-font-kr),sans-serif;fill:currentColor}
.fig .en{font-family:var(--fs-font-en),sans-serif}
.fig .bx{fill:none;stroke:currentColor;stroke-width:1.4}
.fig .ln{fill:none;stroke:currentColor;stroke-width:1.4}
.fig .dsh{stroke-dasharray:5 5}
.fig .dim{opacity:.45}
.fig .inkfill{fill:currentColor}
.fig .papertext{fill:var(--fs-paper)}
.fig figcaption{font-size:var(--bl-cap);line-height:1.6;opacity:.62;margin-top:.7em}
/* HTML 막대 차트(2026-08-13 대표 지시) — 가로 100% + 글자 15px 고정(스케일 없음) + 잉크 단색 */
.fig .chart{background:var(--fs-grid);padding:clamp(22px,3vh,30px) clamp(20px,2.2vw,28px)}
.fig .crow{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.fig .clab{flex:0 0 clamp(96px,14vw,150px);font-size:15px;line-height:1.4;word-break:keep-all}
.fig .ctrack{flex:1;display:block}
.fig .cbar{display:flex;align-items:center;justify-content:flex-end;
  height:36px;background:var(--fs-ink);padding-right:10px}
.fig .cbar b{color:var(--fs-paper);font-size:15px;font-weight:600;font-family:var(--fs-font-en)}
.fig .cbar.ghost{background:none;border:1.4px dashed var(--fs-ink)}
.fig .cbar.ghost b{color:var(--fs-ink)}
.fig .cnote{font-size:15px;opacity:.62;margin-top:2px;
  padding-left:calc(clamp(96px,14vw,150px) + 18px)}
/* 닫는 요약 표 — 항목 열(저희가 한 일 등)은 줄바꿈 없이 한 줄 (2026-08-13 대표 지시) */
.sum td:first-child{white-space:nowrap;padding-right:1.6em}
/* 요약 표는 4열 관통 가이드에 맞춘다 (2026-08-19 대표: "디자인 그리드 틀림").
   본문 레인이 2~3열(화면 25~75%)이므로 표 폭의 50% 지점이 곧 중앙 가이드선이다.
   → 라벨+전 = 50%, 후 = 50% 로 잡아 '후' 열의 시작선을 가이드선에 정확히 얹는다. */
.sum:has(col.g1){table-layout:fixed}   /* colgroup 을 가진 표에만 — 다른 글의 2열 요약표는 auto 유지(2026-08-19 교차검증 CRITICAL) */
/* 폭은 colgroup 으로 준다 — table-layout:fixed 는 **첫 행**으로 열 폭을 잡는데
   요약 표의 첫 행이 colspan 제목이라 th 폭 지정이 무시된다(2026-08-19 실측: 3등분됨). */
.sum col.g1{width:20%} .sum col.g2{width:30%} .sum col.g3{width:50%}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}