/* ══════════════════════════════════════════════════════════════════════════
   insight-article.css — CiteAngle 인사이트 표면 공통 레이어 (web-insights 트랙)
   범위: 카테고리 시각 체계(5종 마크·컬러) · 기사 가독성 · 실데이터 차트 · TOC.
   규율: 기존 네이비·블루 토큰 보존·확장 / transform·opacity(+과업 승인 SVG stroke)만
   애니메이션 / prefers-reduced-motion 정적 폴백 / 모바일 320·375·414·768 검증.
   네임스페이스: insight- (홈 계기반 트랙 JS/CSS와 충돌 금지 계약).
   Hallmark self-critique(6축): typography 4/5 · color 5/5 · motion 5/5 ·
   layout 4/5 · anti-patterns 5/5 · responsive 5/5 — 상세는 커밋 메시지.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* 카테고리 액센트 — base.html .pchip.cat-* 기존 값의 토큰 승격(값 불변) */
  --insight-cat-market:#135da5;  --insight-cat-market-bg:#e8f3ff;
  --insight-cat-demand:#087a64;  --insight-cat-demand-bg:#e6f7f3;
  --insight-cat-source:#6741b5;  --insight-cat-source-bg:#eee9ff;
  --insight-cat-brand:#a54818;   --insight-cat-brand-bg:#fff0e7;
  --insight-cat-action:#3f701c;  --insight-cat-action-bg:#eaf6df;
  --insight-ease:cubic-bezier(0.16,1,0.3,1);
  /* 카테고리 마크 — 이모지 금지, 순수 SVG 마스크(카테고리별 고유 실루엣) */
  --insight-mark-market:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
  --insight-mark-demand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm4 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E");
  --insight-mark-source:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h6v6c0 3.6-1.8 6.3-5.2 8L4 17.2c1.9-1.2 2.9-2.6 3-4.2H5V5zm9 0h6v6c0 3.6-1.8 6.3-5.2 8L13 17.2c1.9-1.2 2.9-2.6 3-4.2h-2V5z'/%3E%3C/svg%3E");
  --insight-mark-brand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2.2v20H5V2zm4.2 1.2H20l-3 4.9 3 4.9H9.2V3.2z'/%3E%3C/svg%3E");
  --insight-mark-action:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm5.2 6.9-1.7-1.7-5.1 5.6-2.7-2.5-1.6 1.7 4.4 4.1z'/%3E%3C/svg%3E");
}

/* 카테고리 클래스 → 커스텀 프로퍼티 결선(색·배경·마크). 시각 정의는 아래 소비자들이 공유. */
.cat-market{--icc:var(--insight-cat-market);--icb:var(--insight-cat-market-bg);--im:var(--insight-mark-market)}
.cat-demand{--icc:var(--insight-cat-demand);--icb:var(--insight-cat-demand-bg);--im:var(--insight-mark-demand)}
.cat-source{--icc:var(--insight-cat-source);--icb:var(--insight-cat-source-bg);--im:var(--insight-mark-source)}
.cat-brand{--icc:var(--insight-cat-brand);--icb:var(--insight-cat-brand-bg);--im:var(--insight-mark-brand)}
.cat-action{--icc:var(--insight-cat-action);--icb:var(--insight-cat-action-bg);--im:var(--insight-mark-action)}

/* ── 1. 카테고리 마크 ──────────────────────────────────────────────────── */
/* 카드 칩(.pchip.pcat.cat-*) — 마크업 불변, ::before 글리프만 추가 */
.pchip.pcat{position:relative;padding-left:24px}
.pchip.pcat::before{content:'';position:absolute;left:9px;top:50%;width:10px;height:10px;
transform:translateY(-50%);background:currentColor;
-webkit-mask:var(--im) center/contain no-repeat;mask:var(--im) center/contain no-repeat}

/* 개별 글 pagehead 마크(다크 배경) — 카테고리 배경 타일 + 글리프 */
.insight-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;
background:var(--icb,#eef4ff);vertical-align:-7px;flex:0 0 auto}
.insight-mark::before{content:'';width:13px;height:13px;background:var(--icc,var(--accent));
-webkit-mask:var(--im) center/contain no-repeat;mask:var(--im) center/contain no-repeat}
.pagehead .kicker .insight-mark{box-shadow:0 0 0 1px rgba(143,184,232,.3)}

/* 필터 칩 강화 — 마크 + 활성 시 카테고리 색(전체 칩은 기존 네이비 유지) */
.catfilter button[data-cat="market"]{--icc:var(--insight-cat-market);--im:var(--insight-mark-market)}
.catfilter button[data-cat="demand"]{--icc:var(--insight-cat-demand);--im:var(--insight-mark-demand)}
.catfilter button[data-cat="source"]{--icc:var(--insight-cat-source);--im:var(--insight-mark-source)}
.catfilter button[data-cat="brand"]{--icc:var(--insight-cat-brand);--im:var(--insight-mark-brand)}
.catfilter button[data-cat="action"]{--icc:var(--insight-cat-action);--im:var(--insight-mark-action)}
.catfilter button[data-cat]:not([data-cat="all"])::before{content:'';display:inline-block;
width:11px;height:11px;margin-right:7px;vertical-align:-1px;background:var(--icc,var(--accent));
-webkit-mask:var(--im) center/contain no-repeat;mask:var(--im) center/contain no-repeat}
.catfilter button[data-cat]:not([data-cat="all"]):hover{border-color:var(--icc);color:var(--icc);background:#fff}
.catfilter button[data-cat]:not([data-cat="all"]).on{background:var(--icc);border-color:var(--icc);color:#fff}
.catfilter button[data-cat]:not([data-cat="all"]).on::before{background:#fff}

/* 인덱스 카드·리서치 카드 컬러 코딩 — 카테고리 상단 헤어라인(3px, .axes.g2 기존 문법 승계) */
.postlist .post[data-cat="market"],.artgrid .article-card[data-cat="market"]{--icc:var(--insight-cat-market)}
.postlist .post[data-cat="demand"],.artgrid .article-card[data-cat="demand"]{--icc:var(--insight-cat-demand)}
.postlist .post[data-cat="source"],.artgrid .article-card[data-cat="source"]{--icc:var(--insight-cat-source)}
.postlist .post[data-cat="brand"],.artgrid .article-card[data-cat="brand"]{--icc:var(--insight-cat-brand)}
.postlist .post[data-cat="action"],.artgrid .article-card[data-cat="action"]{--icc:var(--insight-cat-action)}
.postlist .post[data-cat],.artgrid .article-card[data-cat]{border-top:3px solid var(--icc,var(--line))}

/* 읽기 경로(의사결정 순서) 카드 = 카테고리 범례 — 마크·컬러 동일 문법 */
.insight-path li[class*="cat-"] a{border-top:3px solid var(--icc,var(--line))}
.insight-path li[class*="cat-"] b::before{content:'';display:inline-block;width:12px;height:12px;
margin-right:7px;vertical-align:-1px;background:var(--icc,var(--accent));
-webkit-mask:var(--im) center/contain no-repeat;mask:var(--im) center/contain no-repeat}

/* ── 2. 기사 가독성 공통 레이어 (main.insight-article 스코프) ─────────── */
main.insight-article .postmeta{background:var(--card);border:1px solid var(--line);
border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;
font-size:13px;line-height:1.75;max-width:760px}
main.insight-article .postmeta+p{font-size:17px;line-height:1.8}
main.insight-article h2{scroll-margin-top:84px}
main.insight-article blockquote{font-size:15.5px;background:#f8fafc;border-left:3px solid var(--accent);
border-radius:0 10px 10px 0;padding:12px 18px;margin:18px 0;max-width:760px;color:#2a3342}
main.insight-article .honest{max-width:760px}

/* 목차(스크롤 스파이) — 상단 스티키 바, 모바일 가로 스크롤 */
.insight-toc{position:sticky;top:56px;z-index:40;background:rgba(255,255,255,.96);
backdrop-filter:blur(5px);border:1px solid var(--line);border-radius:12px;
padding:10px 16px;margin:0 0 26px;font-size:13.5px}
.insight-toc .itt{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--accent);margin:0 14px 0 0;vertical-align:1px}
.insight-toc ol{display:inline-flex;flex-wrap:wrap;gap:2px 16px;list-style:none;margin:0;padding:0;max-width:none}
.insight-toc li{margin:0}
.insight-toc a{color:#3a4250;text-decoration:none;font-weight:650;padding:3px 0;
border-bottom:2px solid transparent;white-space:nowrap}
.insight-toc a:hover{color:var(--accent)}
.insight-toc a.insight-toc-on{color:var(--accent-dk);border-bottom-color:var(--accent)}
@media (max-width:900px){
  .insight-toc{top:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap}
  .insight-toc::-webkit-scrollbar{display:none}
  .insight-toc ol{flex-wrap:nowrap}
}

/* ── 3. 실데이터 차트 (전 수치 = 클레임 레지스트리·본문 기등재분) ────────── */
.insight-fig{background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:22px 24px 16px;margin:20px 0 28px;box-shadow:0 8px 26px rgba(15,23,42,.045)}
.insight-fig .ift{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);margin:0 0 14px;max-width:none}
.insight-fig figcaption{font-size:12.5px;color:var(--sub);border-top:1px solid var(--line);
margin-top:16px;padding-top:10px;line-height:1.65}
.insight-fig .ib-panel{font-size:12px;font-weight:800;color:#283a55;letter-spacing:.04em;
margin:18px 0 10px;max-width:none}
.insight-fig .ib-panel:first-of-type{margin-top:0}

/* 가로 막대·범위 막대 — 트랙은 CSS, 마디는 SVG rect */
.insight-bars{display:grid;gap:9px}
.ib-row{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.ib-l{font-size:13px;font-weight:700;color:#3a4250;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-track{position:relative;height:14px;background:#eef2f7;border-radius:4px;min-width:0}
.ib-t{position:absolute;top:0;height:100%;
left:calc(var(--a,0)*100%/var(--vmax,100));
width:max(calc((var(--b,var(--v,0)) - var(--a,0))*100%/var(--vmax,100)),8px)}
.ib-t rect{fill:var(--accent)}
.ib-row.ib-top .ib-t rect{fill:var(--accent-dk)}
.ib-row.ib-est .ib-t rect{fill:var(--accent);opacity:.5}
.ib-row.ib-us .ib-t rect{fill:var(--navy)}
.ib-row.ib-us .ib-l,.ib-row.ib-us .ib-v{color:var(--navy);font-weight:800}
.ib-track.ib-na{background:repeating-linear-gradient(90deg,#eef2f7 0 8px,#fff 8px 14px)}
.ib-v{font-size:12.5px;font-weight:700;color:#283a55;font-variant-numeric:tabular-nums;white-space:nowrap}
.ib-row.ib-note{grid-template-columns:128px minmax(0,1fr)}
.ib-row.ib-note .ib-v{white-space:normal;text-align:left}
@media (max-width:680px){
  .ib-row{grid-template-columns:minmax(0,1fr) auto}
  .ib-track{grid-column:1/-1;order:3}
  .ib-l{white-space:normal}
  .ib-v{white-space:normal;text-align:right}
  .ib-row.ib-note{grid-template-columns:minmax(0,1fr)}
}

/* 표출률 링(스탯) — 과업 승인 SVG stroke draw-in */
.insight-ring-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.insight-ring{width:128px;height:128px;flex:0 0 auto}
.insight-ring .ir-track{fill:none;stroke:#e7eef7;stroke-width:11}
.insight-ring .ir-arc{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;
stroke-dasharray:314.2;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:60px 60px}
.insight-ring .ir-v{font-size:21px;font-weight:800;fill:var(--navy);font-variant-numeric:tabular-nums}
.insight-ring .ir-l{font-size:11px;font-weight:700;fill:var(--sub)}
.ir-side b{display:block;font-size:19px;color:var(--navy);letter-spacing:-.02em}
.ir-side span{display:block;font-size:14px;color:#334155;margin-top:4px;line-height:1.65;max-width:400px}

/* 유무 매트릭스 — 표의 사실을 2상태(+부분)로 재배열, 모션 없음 */
.insight-matrix{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(84px,112px));
border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);font-size:13.5px}
.insight-matrix .imx-h{background:#e7eef7;font-weight:800;font-size:11.5px;letter-spacing:.03em;
color:#283a55;padding:10px 12px;line-height:1.4}
.insight-matrix .imx-l{padding:9px 12px;border-top:1px solid var(--line);font-weight:650;min-width:0}
.insight-matrix .imx-l .imx-note{display:block;font-size:11.5px;color:var(--sub);font-weight:500;line-height:1.5}
.insight-matrix .imx-c{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:6px}
.imx-dot{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--accent);display:inline-block;flex:0 0 auto}
.imx-dot.yes{background:var(--accent)}
.imx-dot.part{background:linear-gradient(135deg,var(--accent) 50%,transparent 50%)}
.imx-dot.no{border-color:#a9b6c6}
.insight-matrix .imx-us{background:#fffaf0}
.insight-matrix .imx-us.imx-l{box-shadow:inset 3px 0 0 var(--warm-line)}
.imx-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:12.5px;color:var(--sub);align-items:center}
.imx-legend .imx-dot{width:12px;height:12px;margin-right:5px;vertical-align:-2px}
.imx-legend span{display:inline-flex;align-items:center}

/* 측정 격자 면적 비교(무료→유료) — 면적 ∝ 칸 수 */
.insight-scale{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.insight-scale .is-item{display:flex;flex-direction:column;gap:8px;min-width:0}
/* 좁은 폭은 사각형별 클램프가 아니라 공통 축소 계수 — 면적 ∝ 칸 수 비례 보존
   (2026-07-17 리뷰 수리). --is-smax = 차트 내 최대 --s(템플릿 224)와 결합, 테스트로 잠금. */
.insight-scale .is-sq{display:block;
width:calc(var(--s,20)*min(1px,56vw/var(--is-smax,224)));
height:calc(var(--s,20)*min(1px,56vw/var(--is-smax,224)));
background:var(--accent);opacity:.16;border:2px solid var(--accent);border-radius:6px}
.insight-scale .is-item b{font-size:14.5px;color:var(--navy)}
.insight-scale .is-item .is-d{font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.insight-scale .is-hi .is-sq{opacity:.24;border-color:var(--accent-dk)}

/* 스크린리더 전용 텍스트 */
.insight-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 4. 모션 — 진입 draw-in 3프리미티브(막대 scaleX·정사각 scale·링 stroke)만.
      기본 상태는 '그려진 상태'(no-JS 안전), JS가 뷰포트 밖 차트에만 insight-anim 부여. */
@media (prefers-reduced-motion: no-preference){
  .insight-anim .ib-t{transform:scaleX(0);transform-origin:left center}
  .insight-anim .is-sq{transform:scale(0);transform-origin:left bottom}
  .insight-anim .ir-arc{stroke-dashoffset:314.2}
  /* 듀레이션 캡 ≤500ms (motion.md major 버킷 — 2026-07-17 리뷰 수리) */
  .insight-anim.insight-on .ib-t{transform:scaleX(1);
  transition:transform .45s var(--insight-ease) calc(var(--i,0)*45ms)}
  .insight-anim.insight-on .is-sq{transform:scale(1);
  transition:transform .4s var(--insight-ease) calc(var(--i,0)*90ms)}
  .insight-anim.insight-on .ir-arc{stroke-dashoffset:0;
  transition:stroke-dashoffset .5s var(--insight-ease) .1s}
}
@media (prefers-reduced-motion: reduce){
  /* 정적 폴백 — 차트는 항상 완성 상태로 표시(전역 transition 차단은 base가 담당) */
  .insight-anim .ib-t{transform:none}
  .insight-anim .is-sq{transform:none}
  .insight-anim .ir-arc{stroke-dashoffset:0}
}

/* ── 5. 시리즈 장치 (2026-07-17 공개 페이지 비교 시리즈) — 정적 스타일만, 모션 없음 ──
   .series-line = 개별 회차 제목 아래 1줄, .series-box = 회차 말미·허브 인덱스 박스 */
.series-line{margin:10px 0 0;font-size:13.5px;font-weight:750;letter-spacing:.02em;color:var(--sub)}
.pagehead .series-line{color:inherit;opacity:.82}
.series-box{margin:30px 0 6px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.series-box .sbk{margin:0 0 8px;font-size:12px;font-weight:850;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.series-box .sbd{margin:0;font-size:14px;line-height:1.7;color:#334155}
.series-box .sbl{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.8}
.series-box .sbl li{margin:2px 0}
.series-box .sbl span{color:var(--sub);font-size:12.5px;margin-left:6px}