/* GRM 웹 디자인 시스템 — v6 크림 에디토리얼(라이트 단일).
 * 디자인 단일원천 = GRM_웹_v6_크림에디토리얼_프로토타입.html.
 * 기능·데이터·계약 불변(디자인만 교체) — render.py·archive.js 동작·search-index 무관.
 *
 * 한글 안전 가드(§4 — 강제): 한글 텍스트에 letter-spacing(양수)·text-transform:uppercase·
 *   모노폰트·이탤릭 금지. eyebrow/kicker(.kick)와 mono(ASCII 데이터)만 자간/대문자 적용.
 *   큰 세리프 디스플레이 헤딩의 미세 음수 자간은 확정 프로토타입을 따름(광학 보정).
 *   ⚠️ 프로토타입이 한글에 mono/uppercase 를 쓴 3곳(.src .t·.pre·.issuecard .vol)은
 *      §4 우선 적용으로 sans·자간0 으로 교정(의도된 프로토타입 이탈).
 */
:root{
  --canvas:#FAF9F5; --soft:#F5F0E8; --card:#EFE9DE; --strong:#E8E0D2;
  --ink:#141413; --body-s:#252523; --body:#3D3D3A; --muted:#6C6A64; --muted-2:#6A675F;  /* P2-3 --muted-2 #8E8B82→#6A675F: 라이트(canvas≈5.4·card≈4.7) 보조텍스트 ≥4.5:1(AA). 다크밴드 .foot-legal 은 --band-mut 로 분리. */
  --line:#E6DFD8; --line-2:#DCD3C7;
  --coral:#C2603F; --coral-2:#A14B30; --coral-tint:#F4E7DF; --on-coral:#FAF9F5;
  --band:#1A1815; --band-2:#262320; --band-soft:#211F1B; --band-ink:#FAF9F5; --band-mut:#A8A299; --band-line:rgba(255,255,255,.11);
  /* 신호 강도 점(render.py SIG_COLOR 가 var(--hi/med/lo) 로 주입 — 반드시 정의) */
  --hi:#BD4B36; --med:#B07D17; --lo:#8E8B82;
  --rad:12px; --rad-s:8px; --pill:9999px; --maxw:1180px;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Source Serif 4','Noto Serif KR',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.3,1); --tr:.2s var(--ease);
  --shadow:0 18px 44px -22px rgba(26,24,21,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--canvas);color:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:17px;letter-spacing:0}
a{color:inherit;text-decoration:none;transition:color var(--tr)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
/* eyebrow/kicker — 영문 전용(한글 금지). mono-대문자-자간은 여기만. */
.kick{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-2)}  /* P2-3 라벨 ≥4.5:1 · §3-4 12→12.5px·자간 .13→.14em(H2↔본문 진입 완충, 영문 eyebrow 한정) */
/* P2-5 디스플레이 헤딩 — 숫자 라이닝 일관화("11" 올드스타일 튐 방지) + 줄균형(제목 끝 한두 글자 고아 방지).
   text-wrap:balance 는 미지원 브라우저서 무시(graceful)·디자인 동결 폰트/크기 불변. */
.hero h1,.lead h2,.sec-title,.showcase .copy h2,.callout h2,.page-head h1,.detail-head h1,.hero .stats b,.c-title{font-variant-numeric:lining-nums;text-wrap:balance}

/* motion — 진입 페이드업·결과행 등장. reduce 존중. */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .7s var(--ease) forwards}
@media(prefers-reduced-motion:reduce){
  .reveal,.issue,.cresult{animation:none!important;opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
  .toc{transition:none}              /* P1-2: 모바일 시트 슬라이드 제거(즉시 이동) */
}

/* nav — 풀네임 세리프 브랜드(로고 마크 없음)·고스트/코럴 버튼·스크롤 보더 */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--tr)}
.nav.on{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:9px}
.brand b{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.005em;color:var(--ink)}
.nav nav{display:flex;gap:6px;margin-left:8px}
.nav nav a{padding:8px 12px;color:var(--body);font-size:14px;font-weight:500}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--ink)}
.sp{flex:1}
/* P2-2 좁은 폭 내비(햄버거) — 기본(데스크톱) 숨김. 브랜드 축약/토글은 ≤640px 에서만(파일 끝 미디어쿼리). */
.brand-abbr,.navtoggle{display:none}
.navtoggle{width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--ink);border-radius:var(--rad-s);transition:var(--tr)}
.navtoggle:hover{border-color:var(--ink)}
.navtoggle i{font-size:20px}
.btn{border:1px solid var(--line-2);background:transparent;color:var(--ink);padding:10px 18px;border-radius:var(--rad-s);
  font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:var(--tr)}
.btn:hover{border-color:var(--ink)}
.btn i{font-size:16px;transition:transform var(--tr)}
.btn:hover i{transform:translateX(2px)}
/* P3-4: CTA 화살표를 유니코드(폰트 비의존)로 — Tabler 아이콘폰트 로드 전 □(tofu) 깜빡임 제거(첫 페인트부터 →). ::before 만 교체, .btn i 호버 이동 유지. */
.btn i.ti-arrow-right::before{content:'\2192';font-family:var(--sans)}
.btn.coral{background:var(--coral);border-color:var(--coral);color:var(--on-coral)}
.btn.coral:hover{background:var(--coral-2);border-color:var(--coral-2)}
.btn.lg{padding:13px 24px;font-size:15px}
.btn.cream{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}
.btn.cream:hover{background:var(--strong);border-color:var(--strong)}
.callout .btn.cream{border-color:rgba(0,0,0,.08)}  /* §3-3 코럴 배경 위 크림 버튼 — 색 토큰 불변, 미세 테두리로 경계만 강화 */

/* hero */
/* P0-1: padding-top 만 — shorthand(60px 0 0)는 .wrap 의 좌우 36px 패딩을 0 으로
   덮어써 히어로만 뷰포트 좌측에 붙던 버그. longhand 로 좌우 패딩(.wrap) 보존. */
.hero{padding-top:60px}
.hero-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;
  border-bottom:1px solid var(--line);padding-bottom:16px}
.hero-top .r{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;padding:60px 0 56px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:62px;line-height:1.08;letter-spacing:-.018em;color:var(--ink);margin:22px 0 0;word-break:keep-all}
.hero h1 .c{color:var(--coral)}
.hero .lede{font-size:18px;color:var(--body);max-width:42ch;margin:26px 0 18px;line-height:1.6;word-break:keep-all}
/* 사실·시사점·점검 — 3핵심요소 태그칩(나열 대신 시각화: 사실=중립 / 시사점=앰버 / 점검=코럴) */
.lede-tags{display:flex;gap:8px;margin:0 0 30px}
.tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 13px;border-radius:var(--pill);letter-spacing:0;border:1px solid transparent}
.tag.fact{background:var(--strong);color:var(--body-s);border-color:var(--line-2)}
.tag.insight{background:rgba(176,125,23,.13);color:var(--med);border-color:rgba(176,125,23,.28)}
.tag.check{background:var(--coral-tint);color:var(--coral-2);border-color:rgba(194,96,63,.22)}
.hero .btns{display:flex;gap:11px;flex-wrap:wrap}
.hero .stats{display:grid;grid-template-columns:repeat(4,auto);gap:40px;margin-top:46px;border-top:1px solid var(--line);padding-top:26px;width:fit-content}  /* §3-2 항목 간격 36→40 — 4개 stat 뭉침 완화 */
.hero .stats b{font-family:var(--serif);font-size:30px;font-weight:500;display:block;line-height:1;color:var(--ink);letter-spacing:-.01em}
.hero .stats span{color:var(--muted);font-size:13px;margin-top:7px;display:block}  /* P2-4 12.5→13 */

/* dark issue card(제품 크롬) — 히어로 우측. 프로토타입 .issue → .issuecard 로 명명
   (아카이브 .issue 행과 클래스 충돌 회피). */
.issuecard{background:var(--band);border-radius:var(--rad);overflow:hidden;box-shadow:0 30px 60px -34px rgba(26,24,21,.5)}
.issuecard .top{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--band-line);
  font-family:var(--mono);font-size:11px;color:var(--band-mut);letter-spacing:.04em}
.issuecard .dot{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.issuecard .dot.g{background:#5db872}.issuecard .dot.y{background:#d4a017}
.issuecard .top .d{margin-left:auto;text-transform:uppercase}
.issuecard .bd{padding:22px}
.issuecard .vol{font-size:11px;color:var(--band-mut);font-weight:500}  /* 한글("카드 N장") — 자간0·sans(§4 교정) */
.issuecard h3{font-family:var(--serif);font-weight:500;font-size:22px;color:#fff;line-height:1.36;margin:9px 0 6px;letter-spacing:-.01em}
.issuecard .win{color:var(--band-mut);font-size:12px;margin-bottom:16px}
.issuecard .win .mono{font-size:11px;color:#D8D5CC}
.issuecard ul{list-style:none;border-top:1px solid var(--band-line);padding-top:14px}
.issuecard li{font-size:13.5px;color:#D8D5CC;padding:8px 0 8px 22px;position:relative;line-height:1.5;border-bottom:1px solid var(--band-line)}
.issuecard li:last-child{border-bottom:0}.issuecard li b{color:#fff;font-weight:600}
.issuecard li::before{content:'';position:absolute;left:3px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--coral)}
.issuecard .ev{display:flex;gap:14px;margin-top:15px;font-size:12px;color:var(--band-mut)}
.issuecard .ev b{font-family:var(--mono);color:#fff;font-weight:500}

/* sources strip — 연속 마퀴(좌→우 흐름, 끊김 없는 무한 루프) */
.srcs{margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;
  display:flex;align-items:center;gap:28px;overflow:hidden}
.srcs .l{font-size:12px;font-weight:500;color:var(--muted);flex:none}  /* 한글 라벨 — 자간0 */
/* 뷰포트: 양끝 페이드 마스크로 흘러 들어오고/사라지는 느낌 */
.srcs .marquee{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* 트랙: 동일 목록 2벌(span 마다 균일 우측 여백) → -50% 이동이 정확히 한 주기라 이음매 0 */
.srcs .track{display:flex;width:max-content;will-change:transform;animation:srcMarquee 48s linear infinite}
.srcs:hover .track{animation-play-state:paused}
.srcs .track span{font-family:var(--mono);font-size:13.5px;color:var(--body-s);opacity:.8;letter-spacing:.01em;
  white-space:nowrap;flex:none;margin-right:60px}
@keyframes srcMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.srcs .track{animation:none}}

/* sections */
.section{padding:96px 0;border-top:1px solid var(--line)}
.section.soft{background:var(--soft)}
.lead{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start}
.lead h2{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.018em;color:var(--ink);line-height:1.14;margin-top:14px}
.lead p{font-size:19px;color:var(--body);line-height:1.65;word-break:keep-all}
.lead p .em{color:var(--ink);font-weight:600}
.sec-title{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.018em;color:var(--ink);margin-top:12px;line-height:1.14}

/* feature cards(What it does) */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.feat{background:var(--card);border-radius:var(--rad);padding:30px;transition:var(--tr)}
.feat:hover{background:var(--strong)}
.feat .ic{width:40px;height:40px;display:grid;place-items:center;color:var(--coral);font-size:23px;margin-bottom:18px}
.feat .no{font-family:var(--mono);font-size:11px;color:var(--muted-2);float:right}
.feat h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.feat p{color:var(--body);font-size:15px;margin-top:9px;line-height:1.55}  /* P2-4 14.5→15 */

/* What-it-does hover 미리보기 — feat:hover(데스크톱) 시 설명 아래로 max-height+opacity 펼침(≈.28s).
   터치(hover:none)에선 상시 노출. 토큰 재사용·한글 안전(§4: ASCII 라벨만 mono, 한글은 sans·자간0).
   배경은 카드 hover 색(--strong) 위에 올라가므로 칩/블록은 --canvas/--coral-tint 로 대비 확보. */
.feat{position:relative}
.feat-prev{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .28s var(--ease),opacity .28s var(--ease),margin-top .28s var(--ease)}
.feat:hover .feat-prev,.feat:focus-within .feat-prev{max-height:150px;opacity:1;margin-top:14px}
.feat-prev-in{border-top:1px dashed var(--line-2);padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* 01 소스 칩(ASCII → mono 허용) */
.fchip{font-size:11px;font-weight:500;color:var(--body-s);background:var(--canvas);
  border:1px solid var(--line-2);border-radius:6px;padding:3px 9px}
/* 02 사실=중립 / 시사점=accent 2색 블록 */
.fblock{font-size:12px;font-weight:600;border-radius:6px;padding:5px 11px;display:inline-flex;gap:6px;align-items:center}
.fblock .en{font-family:var(--mono);font-weight:500;font-size:10.5px;opacity:.72}
.fblock.fact{background:var(--canvas);color:var(--body-s);border:1px solid var(--line-2)}
.fblock.insight{background:var(--coral-tint);color:var(--coral-2)}
/* 03 출처·공식페이지 링크 칩(.src a 어휘 재사용) */
.flink{font-size:12px;font-weight:500;color:var(--body);background:var(--canvas);border:1px solid var(--line-2);
  border-radius:var(--rad-s);padding:6px 12px;display:inline-flex;gap:7px;align-items:center}
.flink i{font-size:14px;color:var(--coral)}
/* 05 EN→KO 2줄 대조 */
.feat-trans{flex-direction:column;align-items:stretch;gap:6px}
.t-en{font-family:var(--serif);font-size:13.5px;color:var(--ink);line-height:1.45;border-left:2px solid var(--coral);padding-left:11px}
.t-ko{font-size:12.5px;color:var(--body);padding-left:13px}
/* 06 체크리스트 2줄(.chk li 체크표식 재사용) */
.feat-checks{flex-direction:column;align-items:stretch;gap:7px}
.fcheck{font-size:13px;color:var(--body-s);padding-left:22px;position:relative;line-height:1.4}
.fcheck::before{content:'\2713';position:absolute;left:0;top:0;color:var(--ink);font-weight:700;font-size:12px}
/* 04 신뢰도·신호 뱃지 — 점/막대 인코딩 + hover/focus 캡션 툴팁(overflow:hidden 안에서 클리핑 없이 표시) */
.feat-grades{position:relative;align-items:flex-start;padding-bottom:46px}
.grade{font-size:11px;font-weight:600;border-radius:6px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px;cursor:help}
.grade .enc{display:inline-flex;align-items:center;gap:3px}
.grade.ev{background:var(--coral-tint);color:var(--coral-2)}            /* 신뢰도 A = accent(coral) 계열 */
.grade.ev .dot{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.grade.ev .dot.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--coral);opacity:.5}
.grade.sig{background:var(--canvas);border:1px solid var(--line-2);color:var(--body)}  /* 신호 강도 = --hi(고강도) 막대 */
.grade.sig .bar{width:4px;border-radius:1px;background:var(--hi)}
.grade.sig .bar.b1{height:7px}.grade.sig .bar.b2{height:10px}.grade.sig .bar.b3{height:13px}
.grade:focus-visible{outline:none;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--coral)}
.grade-tip{position:absolute;left:0;right:0;bottom:0;font-size:11.5px;line-height:1.5;color:var(--body);
  background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--rad-s);padding:7px 10px;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .18s var(--ease),visibility .18s}
.grade-tip b{color:var(--ink);font-weight:600}
.grade-tip .dim{color:var(--muted-2)}
.grade.ev:hover ~ .grade-tip.t-ev,.grade.ev:focus ~ .grade-tip.t-ev,
.grade.sig:hover ~ .grade-tip.t-sig,.grade.sig:focus ~ .grade-tip.t-sig{opacity:1;visibility:visible}
/* 터치 기기 — hover 불가 → 미리보기 상시 노출(뱃지·인코딩·aria-label 로 의미 전달, 캡션 툴팁은 비노출) */
@media(hover:none){.feat-prev{max-height:none;opacity:1;margin-top:14px}}
/* 모션 최소화 — 펼침/페이드 즉시 토글 */
@media(prefers-reduced-motion:reduce){.feat-prev,.grade-tip{transition:none}}

/* card anatomy showcase */
.showcase{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center;margin-top:46px}  /* §3-1 좌측 텍스트 소폭 확대(.9→.95fr) — 세로 늘어짐 완화 */
.showcase .copy h2{font-family:var(--serif);font-weight:400;font-size:38px;letter-spacing:-.018em;color:var(--ink);line-height:1.16;margin-top:14px}
.showcase .copy p{font-size:16.5px;color:var(--body);margin-top:16px;line-height:1.65}
.showcase .legend{list-style:none;margin-top:22px}
.showcase .legend li{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--line);font-size:14.5px}
.showcase .legend i{color:var(--coral);font-size:18px;margin-top:1px;flex:none}
.showcase .legend b{font-weight:600;color:var(--ink)}.showcase .legend span{color:var(--body)}

/* coral callout(This Week) */
.callout{background:var(--coral);color:var(--on-coral);border-radius:var(--rad);padding:64px 56px;margin:96px 0;text-align:center}
.callout .kick{color:var(--on-coral);opacity:.85}
.callout h2{font-family:var(--serif);font-weight:400;font-size:42px;letter-spacing:-.02em;color:#fff;margin:14px 0 14px;line-height:1.1}
.callout p{color:var(--on-coral);opacity:.92;font-size:17px;max-width:72ch;margin:0 auto 28px;word-break:keep-all;text-wrap:balance}

/* ── 아카이브 게시판 헤더 ───────────────────────────────────────────────── */
.page-head{padding:62px 0 10px}
.page-head .kick{display:block;margin-bottom:16px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:50px;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.page-head p{color:var(--body);margin-top:16px;font-size:16.5px;max-width:62ch;line-height:1.65}

/* 검색 + facet + 컨트롤(P4). progressive enhancement: 기본 숨김, JS 가 노출. */
.searchbar,.panel,.bar{display:none}
body.js-search .searchbar,body.js-search .panel{display:block}
body.js-search .bar{display:flex}
.searchbar{position:relative;margin:30px 0 0}
.searchbar i.lead{position:absolute;left:21px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px;transition:color var(--tr)}
.searchbar.focused i.lead{color:var(--coral)}
.searchbar input{width:100%;height:58px;border:1.5px solid var(--line-2);border-radius:var(--rad);background:var(--canvas);
  padding:0 54px;font-family:var(--sans);font-size:17px;color:var(--ink);transition:border-color var(--tr),box-shadow var(--tr)}
.searchbar input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-tint)}
.searchbar input::placeholder{color:var(--muted);font-size:15.5px}
.searchbar .clear{position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(.8);opacity:0;pointer-events:none;
  border:0;background:var(--strong);color:var(--body);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;transition:opacity var(--tr),transform var(--tr)}
.searchbar .clear.on{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
.searchbar .clear:hover{background:var(--line-2);color:var(--ink)}
.panel{margin-top:18px;background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);padding:21px 24px}
.panel-h{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:17px;display:flex;align-items:center;gap:7px}
.facets{display:flex;flex-direction:column;gap:15px}
.frow{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:start}
.frow .flab{font-size:14px;font-weight:600;color:var(--body-s);padding-top:6px}  /* 한글 facet 라벨 — sans·자간0 */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--card);color:var(--body);font-size:13px;font-weight:500;
  padding:6px 14px;border-radius:var(--pill);transition:background var(--tr),color var(--tr),border-color var(--tr),transform .12s var(--ease)}
.chip:hover{border-color:var(--muted);color:var(--ink);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip.on{background:var(--coral);border-color:var(--coral);color:#fff}
.bar{align-items:center;justify-content:space-between;gap:16px;margin:28px 0 6px;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden;background:var(--canvas);position:relative}
.toggle button{border:0;background:transparent;color:var(--body);font-size:13.5px;font-weight:600;padding:9px 19px;
  position:relative;z-index:1;transition:color var(--tr)}
.toggle button.on{color:var(--canvas)}
.toggle .slider{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--ink);border-radius:var(--pill);
  transition:transform .3s var(--ease)}
.toggle.cards .slider{transform:translateX(100%)}
.bar .right{display:flex;align-items:center;gap:18px}
.count{color:var(--muted);font-size:13.5px}
.count b{color:var(--ink);font-weight:600}
.clearall{border:0;background:transparent;color:var(--coral-2);font-size:13.5px;font-weight:600;display:none}
.clearall.on{display:inline-flex;align-items:center;gap:5px}

/* 이슈 행(주간 호 뷰) */
.issuelist .issue:first-child,#static-issues .issue:first-child{border-top:1px solid var(--ink)}
.issue{display:grid;grid-template-columns:88px 1fr auto;gap:24px;align-items:center;padding:24px 8px;border-bottom:1px solid var(--line);
  cursor:pointer;border-radius:10px;transition:background var(--tr),padding var(--tr),box-shadow var(--tr);animation:rowIn .42s var(--ease) both}
.issue:hover{background:var(--canvas);padding-left:16px;box-shadow:var(--shadow)}
.issue .vol{font-size:11px;color:var(--muted);font-weight:500}
.issue .vol b{font-family:var(--serif);display:block;font-size:34px;color:var(--ink);font-weight:500;line-height:.96;letter-spacing:-.02em;margin-top:2px}
.issue h3{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.issue .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;align-items:center}
.issue .stat{text-align:right;color:var(--muted);font-size:12px;min-width:96px}
.issue .stat b{font-family:var(--serif);font-size:25px;color:var(--ink);font-weight:500;line-height:1.05}
.issue .stat .u{font-size:12.5px;color:var(--muted);margin-left:2px;font-family:var(--sans)}
.issue .stat .ev{font-size:10.5px;letter-spacing:.02em;display:block;margin-top:3px}
.tag{font-size:12px;font-weight:500;color:var(--body);border:1px solid var(--line-2);padding:3px 10px;border-radius:6px}
.tag.date{font-family:var(--mono);font-size:11px;color:var(--body-s)}
.tag.hit{background:var(--coral);border-color:transparent;color:#fff;font-weight:600}
.latest .badge{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--coral-2);margin-bottom:9px;display:inline-flex;align-items:center;gap:6px}
.latest .badge .live{width:6px;height:6px;border-radius:50%;background:var(--coral)}

/* 카드 결과 행(카드 전체 뷰) */
.cards .cresult:first-child{border-top:1px solid var(--ink)}
.cresult{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:19px 8px;border-bottom:1px solid var(--line);
  cursor:pointer;border-radius:10px;transition:background var(--tr),padding var(--tr),box-shadow var(--tr);animation:rowIn .42s var(--ease) both}
.cresult:hover{background:var(--canvas);padding-left:16px;box-shadow:var(--shadow)}
.cresult .badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 9px}
.cresult h4{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.cresult h4 b{color:var(--coral);font-weight:600}
.cresult .meta{color:var(--muted);font-size:12px;margin-top:5px}
.cresult .meta .mono{color:var(--body-s)}
.cresult mark{background:var(--coral-tint);color:var(--coral-2);border-radius:3px;padding:0 3px}
.cresult .go{color:var(--muted);font-size:19px;transition:transform var(--tr),color var(--tr)}
.cresult:hover .go{color:var(--coral);transform:translateX(4px)}
.cresult .b{font-size:11px;padding:3px 9px;border-radius:5px}
.empty{text-align:center;padding:62px 0;color:var(--muted);animation:fadeUp .4s var(--ease) both}
.empty i{font-size:36px;display:block;margin-bottom:12px;opacity:.45}
.empty b{color:var(--ink);font-weight:600}

/* ── 브리프 상세 ───────────────────────────────────────────────────────── */
.detail-head{padding:50px 0 32px;border-bottom:1px solid var(--ink)}
.bk{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:24px}
.bk:hover{color:var(--ink)}
.bk i.ti-arrow-left::before{content:'\2190';font-family:var(--sans)}  /* P3-4 뒤로 화살표 폰트 비의존(tofu 제거) */
.detail-head .kick{display:block;margin-bottom:14px}
.detail-head h1{font-family:var(--serif);font-weight:400;font-size:44px;letter-spacing:-.02em;max-width:24ch;line-height:1.18;color:var(--ink)}
.cov{display:flex;gap:14px 28px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-size:13px}
.cov b{color:var(--ink);font-weight:600}
.cov b.mono{font-family:var(--mono);font-weight:500;font-size:13px}  /* P2-4 12.5→13(원문/데이터 라인 가독) */
.tldr{margin-top:30px;border-left:3px solid var(--coral);padding:8px 0 8px 22px}
.tldr .l{font-size:12px;font-weight:600;color:var(--coral-2)}  /* "이번 주 핵심" — 한글, 자간0·대문자 없음 (P2-3 대비) */
.tldr ul{margin:14px 0 0;padding-left:0;list-style:none}
.tldr li{margin:10px 0;font-size:17.5px;font-family:var(--serif);color:var(--ink);line-height:1.5;font-weight:400;letter-spacing:-.01em}
.layout{display:grid;grid-template-columns:230px 1fr;gap:52px;padding:38px 0 90px;align-items:start}
.toc{position:sticky;top:90px}
.toc .l{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:15px}  /* "목차" — 한글, 자간0 */
.toc a{display:block;color:var(--body);font-size:13px;padding:6px 0 6px 14px;border-left:1px solid var(--line);line-height:1.45;transition:var(--tr)}
.toc a:hover{color:var(--ink);border-color:var(--coral)}
.toc a.sec{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--ink);border-left-color:var(--coral);padding-top:16px;margin-top:7px}
.toc .toc-sub{color:var(--muted-2);font-weight:400}  /* P1-1 동명 카드 구분자 — sans·자간0(한글 가능) */
.toc-fab,.toc-backdrop,.toc .toc-close{display:none}  /* P1-2 모바일 전용 점프 내비 — 데스크톱 숨김 */
.sec-h{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.012em;color:var(--ink);margin:16px 0 2px;padding-top:20px;
  display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);scroll-margin-top:88px}
.sec-h .n{font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:500;letter-spacing:0}  /* "N장" 한글 — 자간0(상속 음수 자간 차단) */
.grp-h{font-size:12px;font-weight:600;color:var(--muted);margin:32px 0 2px}  /* 그룹 소제목(한글) — 자간0 */

/* 카드(상세 + 랜딩 showcase 공용 — 단일 카드 디자인) */
.card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--rad);padding:28px 30px;margin-top:22px;
  scroll-margin-top:88px;transition:border-color var(--tr)}
.card:hover{border-color:var(--line-2)}
.card.evA{border-top:2px solid var(--coral)}
.c-title{font-family:'Noto Serif KR','AppleMyungjo','Batang',Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.012em;line-height:1.32;color:var(--ink)}  /* P3-2 제목 단일 세리프(Noto Serif KR). P3-4 FOUT: 로드 전 한글이 시스템 세리프(AppleMyungjo/Batang)로 떠 swap 점프 완화(폴백만 추가, 로드 후엔 Noto Serif KR). */
.c-title .pre{font-family:var(--sans);color:var(--muted);font-size:11.5px;font-weight:600;display:block;margin-bottom:9px;letter-spacing:0}  /* "[행정처분 · MFDS]" 한글 — sans·자간0·대문자없음(§4 교정, 상속 음수 자간 차단) */
.c-title b{font-weight:500;color:var(--coral)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0;align-items:center}
.b{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.b.code{font-family:var(--mono);font-size:11px;font-weight:500}
.b.ev{background:var(--coral);color:#fff}
.b.evB{background:transparent;color:var(--body);border:1px solid var(--line-2)}
.b.ag{background:var(--ink);color:var(--canvas)}
.b.sig{background:transparent;border:1px solid var(--line-2);color:var(--body)}
.b.sig .d{width:6px;height:6px;border-radius:50%}
.b.mod{background:var(--card);color:var(--body-s)}  /* 제품군(한글 가능) — sans·자간0 */
.b.typ{background:var(--coral-tint);color:var(--coral-2)}
.b.cat{background:var(--coral-tint);color:var(--coral-2)}
.summary{font-size:16px;margin-top:17px;line-height:1.6;color:var(--body-s)}
table.facts{width:100%;border-collapse:collapse;margin-top:19px;font-size:14px}
table.facts td{padding:11px 2px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
table.facts tr:last-child td{border-bottom:none}
table.facts td.k{color:var(--muted);width:138px;font-weight:500;white-space:nowrap;font-size:13px}  /* 한글 라벨 — sans·자간0 */
table.facts td.v{color:var(--body-s)}
table.facts td.v .mono{font-size:13px;color:var(--ink)}
.block{margin-top:18px}
.block .lab{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--body)}  /* 한글 블록 라벨 — 자간0 */
.block .lab i{font-size:15px}
.block .lab .sub{font-weight:400;color:var(--muted)}
details.merged summary{cursor:pointer}
.quote{margin-top:12px;border-left:2px solid var(--coral);padding:4px 0 4px 18px}
.quote .o{font-family:var(--serif);font-size:16px;line-height:1.66;color:var(--ink)}
.quote .o .m{font-family:var(--mono);color:var(--coral);font-weight:500;font-size:13px;margin-right:8px}
.quote .t{color:var(--body);font-size:14px;margin-top:7px;line-height:1.6}
.facts2{margin:11px 0 0;padding-left:0;list-style:none}
.facts2 li{margin:7px 0;padding-left:19px;position:relative;font-size:15px;line-height:1.58;color:var(--body-s)}
.facts2 li::before{content:'';position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
/* 시사점 = 코럴 틴트 + 코럴 레일 · 점검 = soft + 잉크 레일(§3.4 재디자인) */
.imp{background:var(--coral-tint);border-radius:var(--rad-s);padding:18px 20px;margin-top:18px;border-left:3px solid var(--coral)}
.imp .lab{color:var(--coral-2)}
.imp p{margin-top:9px;font-size:15px;line-height:1.62;color:var(--body-s)}
.chk{background:var(--soft);border-radius:var(--rad-s);padding:18px 20px;margin-top:12px;border-left:3px solid var(--ink)}
.chk .lab{color:var(--ink)}
.chk ul{margin:11px 0 0;padding-left:0;list-style:none}
.chk li{margin:7px 0;padding-left:24px;position:relative;font-size:15px;line-height:1.55;color:var(--body-s)}
.chk li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--ink);font-weight:700;font-size:13px}
.src{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px;padding-top:17px;border-top:1px solid var(--line)}
.src a{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--body);border:1px solid var(--line-2);
  border-radius:var(--rad-s);padding:8px 14px;transition:var(--tr)}
.src a:hover{border-color:var(--coral);color:var(--coral)}
.src a.src-broken:hover{border-color:var(--line-2);color:var(--body)}
.src a .t{color:var(--muted);font-weight:600;font-size:10px}  /* "정보출처/공식원본" 한글 — sans·자간0·대문자없음(§4 교정) */
.disc{margin-top:36px;padding:24px 26px;background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);color:var(--body);font-size:13px;line-height:1.78}
.disc b{color:var(--ink);font-weight:600}
.disc .en{color:var(--muted);display:block;margin-top:6px}

/* ── 뉴스레터 구독 밴드(T1 — env-gated, 푸터 위) ───────────────────────────
   디자인 토큰 재사용(coral/soft/line-2/rad-s)·한글 안전(§4: 문안 자간0·대문자/mono 없음).
   입력 포커스는 .searchbar input 과 동형(coral 보더 + tint 글로). 버튼은 .btn.coral 재사용. */
.subscribe{background:var(--soft);border-top:1px solid var(--line)}
.subscribe .wrap{padding-top:64px;padding-bottom:64px;text-align:center}
.subscribe .kick{display:block;margin-bottom:14px}
.subscribe h2{font-family:var(--serif);font-weight:400;font-size:34px;letter-spacing:-.018em;color:var(--ink);line-height:1.16}
.subscribe p{color:var(--body);font-size:16px;margin:14px auto 0;max-width:52ch;line-height:1.6;word-break:keep-all}
.sub-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.sub-form input[type=email]{width:340px;max-width:100%;height:52px;border:1.5px solid var(--line-2);border-radius:var(--rad-s);
  background:var(--canvas);padding:0 18px;font-family:var(--sans);font-size:16px;color:var(--ink);transition:border-color var(--tr),box-shadow var(--tr)}
.sub-form input[type=email]:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-tint)}
.sub-form input[type=email]::placeholder{color:var(--muted)}
.sub-form .btn.coral{height:52px}
.subscribe .note{font-size:12.5px;color:var(--muted);margin-top:14px}
/* Brevo 봇방지 허니팟 — 시각·접근성 숨김(off-screen). 사람은 못 보고 안 채움, 봇만 채워 Brevo 가 거른다. */
.sub-hp{position:absolute!important;left:-5000px;width:1px;height:1px;overflow:hidden;opacity:0}

/* ── footer(다크 band) ─────────────────────────────────────────────────── */
footer.site{background:var(--band);color:var(--band-mut);padding:62px 0 40px;margin-top:0}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot .b1 b{font-family:var(--serif);font-size:21px;color:#fff;font-weight:600;display:block;letter-spacing:-.005em}
.foot .b1 p{font-size:13.5px;margin-top:16px;max-width:34ch;line-height:1.6;color:var(--band-mut)}
.foot h5{font-size:13px;font-weight:600;color:#fff;opacity:.78;margin-bottom:15px}  /* 한글 헤딩 — 자간0·대문자없음 */
.foot a,.foot span{display:block;color:var(--band-mut);font-size:13.5px;padding:5px 0}
.foot a{cursor:pointer}  /* P2-6 링크만 포인터 — 라벨(span)은 기본 커서로 비링크 명확화(데드링크 오인 방지) */
.foot a:hover{color:#fff}
.foot-legal{border-top:1px solid var(--band-line);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12px;color:var(--band-mut)}  /* P2-3 다크밴드 — --muted-2 darken 영향 분리, --band-mut(라이트 그레이) 사용 */
.foot-legal .mono{font-size:11px}
.foot-legal .legal-ko{font-size:12px;color:var(--band-mut)}  /* §2-2 한글 병기 — 본문체(자간·대문자·mono 강제 없음). 영문 mono 줄과 별개 span */

/* P2-1 중간 폭 분기점 — 900px 단일 붕괴 완화(태블릿~좁은 데스크톱 점진 축소).
   900px 블록이 뒤에 와서 ≤900 에선 이 규칙들을 다시 1단으로 덮는다(소스 순서 의존). */
@media(max-width:1024px){
  .hero h1{font-size:52px}
  .hero-grid{gap:40px}
  .feats{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  body{font-size:16px}
  .hero h1{font-size:42px}
  .hero-grid,.lead,.showcase,.foot{grid-template-columns:1fr;gap:32px}
  /* P3-3: feats 는 ≤900 즉시 1단 대신 ≤720 까지 2단 유지(900 경계 동시 붕괴 완화) — 아래 별도 @media. */
  .hero .stats{grid-template-columns:repeat(2,1fr);gap:22px}
  .callout{padding:44px 28px}.callout h2{font-size:30px}
  .page-head h1{font-size:36px}.detail-head h1{font-size:34px}
  .layout{grid-template-columns:1fr}
  /* P1-2: 데스크톱 사이드바 목차 → 모바일 바텀시트(+FAB). 화면 밖 대기, .open 시 슬라이드업. */
  .toc{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;margin:0;max-height:74vh;overflow-y:auto;
    background:var(--canvas);border-top:1px solid var(--line-2);border-radius:16px 16px 0 0;box-shadow:0 -18px 44px -22px rgba(26,24,21,.42);
    padding:16px 22px calc(20px + env(safe-area-inset-bottom));transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .toc.open{transform:translateY(0);visibility:visible}
  .toc .l{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .toc .toc-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -8px -8px auto;border:0;background:transparent;color:var(--muted);font-size:20px}
  .toc-backdrop{position:fixed;inset:0;z-index:59;background:rgba(26,24,21,.42);border:0}
  .toc-backdrop.open{display:block}
  .toc-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:58;
    min-height:48px;padding:0 22px;background:var(--ink);color:var(--canvas);border:0;border-radius:var(--pill);font-size:14px;font-weight:600;box-shadow:var(--shadow)}
  .toc-fab i{font-size:18px}
  /* P1-4: 모바일 터치 타깃 ≥44px(시각 크기 유지·히트 영역 확대) */
  .toc a{min-height:44px;padding:10px 8px 10px 14px}
  /* 내비 링크: 좁은 폭에서 줄바꿈으로 124px 까지 늘어나던 것을 단일 줄·44px 로 정리(터치 타깃).
     ※ 브랜드 풀네임이 ≤~500px 에서 줄바꿈되는 건 별개의 기존 반응형 이슈(P2). */
  .nav nav{align-items:center}
  .nav nav a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;padding-top:10px;padding-bottom:10px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .toggle button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .bk{min-height:44px}
  .issue{grid-template-columns:78px 1fr}.issue .stat{display:none}
  .frow{grid-template-columns:1fr;gap:8px}
  .wrap{padding:0 22px}
}
/* P3-3 중간 폭 단계화 — feature 그리드는 900 경계서 한꺼번에 무너지지 않고 ≤720 에서 1단으로(640~900 점프 완화). */
@media(max-width:720px){
  .feats{grid-template-columns:1fr}
}
/* P2-2 좁은 폭(≤640px) 내비 — 브랜드 축약(GRM) + 햄버거 드롭다운. 브랜드+토글+CTA만 한 줄, 링크는 수납.
   ≤900 블록보다 뒤에 와서 .nav nav 의 좁은-폭 드롭다운 규칙이 우선한다. */
@media(max-width:640px){
  .brand-full{display:none}
  .brand-abbr{display:inline}
  .navtoggle{display:inline-flex}
  .nav nav{position:absolute;top:100%;right:22px;left:auto;min-width:184px;flex-direction:column;align-items:stretch;
    gap:2px;margin:0;background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--rad);
    box-shadow:var(--shadow);padding:8px;z-index:57;display:none}
  .nav nav.open{display:flex}
  .nav nav a{padding:12px 14px;border-radius:var(--rad-s);min-height:44px;white-space:normal}
  .nav nav a:hover{background:var(--soft)}
}