/* V2 사이트 전용 배치 CSS — 부품(components.css)에 없는 자리만 채운다.
 * 값은 tokens.css 변수만 쓴다. 새 색·새 글자 크기를 만들지 않는다.
 * 근거: persona/dashboard/PLAN-v2.md 3·4·5절.
 */

/* ── 결론 장 — 결정 3줄 · 다음 행동 3개 ── */
.lines{margin:0;padding:0 0 0 var(--s-6);display:grid;gap:var(--s-3)}
.lines li{font-size:var(--t-body-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.act{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start;
  padding:var(--s-4);background:var(--surface-sunken);border:1px solid var(--line-weak)}
.act h4{margin:0;font-size:var(--t-body-size);line-height:var(--t-body-tight-line);
  font-weight:var(--t-label-weight);color:var(--text-strong);word-break:keep-all}
.act p{font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all;flex:1 1 auto}

/* ── 콘셉트 카드 썸네일 4열 — 첫 장은 크게, 나머지 두 장은 아래 두 칸 ── */
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.thumbs img{display:block;width:100%;height:auto;border:1px solid var(--line-weak)}
.thumbs img:first-child{grid-column:1 / -1}

/* 벽 머리의 건수는 줄을 넘기지 않음 */
.wall-h em{white-space:nowrap}

/* 쌍대 비교 머리 — 가운데 이름이 64px 칸에서 잘려 가운데 세 칸에 걸쳐 놓는다 */
.pc-head span.c{grid-column:2 / 5}

/* ── 개인 카드 격자 6열(12열 격자 기준 2장) ── */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);
  align-items:stretch;margin-top:var(--s-4)}
.pgrid>*{min-width:0}
.filters{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-4);
  padding:var(--s-3) var(--s-4);background:var(--surface-card);border:1px solid var(--line-weak)}
.fgrp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.fgrp>span{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default)}
.fgrp button[aria-pressed="true"]{border-color:var(--text-strong);
  background:var(--surface-sunken);color:var(--text-strong)}
.pc-stance{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--text-default)}
.pc-cm{display:grid;gap:var(--s-2);padding-top:var(--s-3);
  border-top:1px solid var(--line-weak)}
/* 펼친 원문 — 줄바꿈은 살리고 긴 줄은 카드 폭 안에서 접는다 */
.pcard details .raw{overflow-wrap:anywhere}
.pcard details .raw dd{white-space:pre-wrap;overflow-wrap:anywhere}
.pcard details .raw dd .tbl{table-layout:fixed;width:100%}
.pcard details .raw dd .tbl td,
.pcard details .raw dd .tbl th{white-space:pre-wrap;overflow-wrap:anywhere;
  vertical-align:top;height:auto}
.pcard details .raw dd .tbl td:first-child,
.pcard details .raw dd .tbl th:first-child{width:104px}

/* ── 접힘 ── */
.fold{margin:0}
.fold summary{font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fold>.tbl{margin-top:var(--s-3)}

/* ── 부록 원문 ── */
.doc{max-width:var(--grid-width)}
.doc h1,.doc h2{margin:var(--s-8) 0 var(--s-3);font-size:var(--t-title-size);
  line-height:var(--t-title-line);letter-spacing:var(--t-title-track);
  font-weight:var(--t-title-weight);color:var(--text-strong);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--line-weak);word-break:keep-all}
.doc h3,.doc h4{margin:var(--s-6) 0 var(--s-2);font-size:var(--t-subtitle-size);
  line-height:var(--t-subtitle-line);letter-spacing:var(--t-subtitle-track);
  font-weight:var(--t-subtitle-weight);color:var(--text-strong);word-break:keep-all}
.doc>*:first-child{margin-top:0}
.doc p{margin:var(--s-3) 0;font-size:var(--t-body-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.doc ul,.doc ol{margin:var(--s-3) 0;padding-left:var(--s-6)}
.doc li{font-size:var(--t-body-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all;margin:var(--s-2) 0}
.doc strong{font-weight:var(--t-label-weight);color:var(--text-strong)}
.doc code{font-family:inherit;padding:0 4px;background:var(--surface-sunken);
  border:1px solid var(--line-weak)}
.doc pre{margin:var(--s-3) 0;padding:var(--s-4);background:var(--surface-sunken);
  border:1px solid var(--line-weak);overflow-x:auto;font-family:inherit;
  font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);white-space:pre-wrap;word-break:break-word}
.doc blockquote{margin:var(--s-3) 0;padding:var(--s-2) var(--s-4);
  border-left:2px solid var(--line-strong);color:var(--text-default)}
.doc blockquote p{margin:var(--s-1) 0;font-size:var(--t-label-size)}
.doc hr{margin:var(--s-6) 0;border:0;border-top:1px solid var(--line-weak)}
.doc .tblwrap{margin:var(--s-3) 0;overflow-x:auto}
.doc figure{margin:var(--s-4) 0}
.doc figure img{display:block;width:100%;height:auto;border:1px solid var(--line-weak)}
.doc figcaption{margin-top:var(--s-2);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);color:var(--text-default)}
.doc .arch{display:block;width:100%;height:auto}
.doc a{color:var(--accent)}

/* ── 1200 미만 접힘 ── */
@media (max-width:1199px){
  .pgrid,.v-row-4,.v-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 이야기 한 장(01장)·추적 사슬 — 블록 묶음과 근거 링크 ── */
.blocks{display:grid;gap:var(--s-4)}
.jumps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.jumps>span{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--text-default)}
.ev-note{margin:0;font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.plink{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap}
.sub-h{margin:var(--s-2) 0 0;font-size:var(--t-label-size);line-height:var(--t-label-line);
  font-weight:var(--t-label-weight);color:var(--text-strong)}
.foot-note{background:var(--surface-sunken)}

/* ── 개인 기록 = 추적 사슬 8단계 ── */
.chain-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.chain-nav>span{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--text-default)}
.chain-step .raw{margin:0;padding:var(--s-3);background:var(--surface-sunken);
  border:1px solid var(--line-weak)}
.chain-step .raw dt{margin-top:var(--s-3);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);font-weight:var(--t-label-weight);color:var(--text-strong)}
.chain-step .raw dt:first-child{margin-top:0}
.chain-step .raw dd{margin:var(--s-1) 0 0;font-size:var(--t-label-size);
  line-height:var(--t-body-line);color:var(--text-default);word-break:keep-all}
.raw-pre{margin:var(--s-3) 0 0;padding:var(--s-3);max-height:360px;overflow:auto;
  background:var(--surface-sunken);border:1px solid var(--line-weak);
  font-family:inherit;font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);white-space:pre-wrap;word-break:break-word}
.cards12{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2);
  margin-top:var(--s-3)}
.cards12 img{display:block;width:100%;height:auto;border:1px solid var(--line-weak)}

/* ── 07장 — 안 하나만 골랐을 때 벽은 한 열 전폭 ── */
.wall.wall-1{grid-template-columns:minmax(0,1fr)}

/* ── 3단 프레임은 1440에서만 3단 ──
   1280에서는 가운데 칸이 520px로 좁아져 카드와 벽이 잘리므로 세로로 편다 */
@media (max-width:1439px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .pane,.rail{position:static;max-height:none}
  .pane{flex-direction:row;flex-wrap:wrap}
  .pane button{width:auto}
}
@media (max-width:1199px){
  .cards12{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ══════════════════════════════════════════════════════════════════
   v4 리서치 리포트 — 차트·계산식·표 감싸개
   ══════════════════════════════════════════════════════════════════ */

/* ── 차트 자리 — ECharts 캔버스가 들어간다. 폭은 카드 안쪽 폭 전부 ── */
.echart{width:100%;min-width:0;max-width:100%}
.chart-note{margin-top:var(--s-3);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);color:var(--text-default);word-break:keep-all}
.v-card-body>.chart-note+.tblwrap{margin-top:var(--s-4)}

/* ── 표는 카드 폭을 넘으면 그 표 안에서만 가로로 민다(문서 가로 스크롤 0) ── */
.tblwrap{max-width:100%;overflow-x:auto}
.tblwrap+.tblwrap{margin-top:var(--s-4)}

/* ── 문단 ── */
.para{font-size:var(--t-body-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.scope-out{padding:var(--s-3) var(--s-4);background:var(--surface-sunken);
  border-left:2px solid var(--line-strong);font-size:var(--t-label-size);
  line-height:var(--t-body-line);color:var(--text-strong);word-break:keep-all}

/* ── 비즈니스 케이스 계산식 ── */
.calc{display:grid;gap:var(--s-4)}
.calc-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.calc-f{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.calc-f span{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default)}
.calc-f input{height:var(--ctl-h-md);padding:0 10px;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--surface-card);font-family:inherit;font-size:var(--t-body-size);
  color:var(--text-strong);font-variant-numeric:tabular-nums}
.calc-out{font-variant-numeric:tabular-nums;color:var(--text-strong);
  font-weight:var(--t-label-weight)}
.calc-out.none{color:var(--text-faint);font-weight:var(--t-body-weight)}
.calc-total{font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.tbl td em{font-style:normal;color:var(--text-default);font-size:var(--t-caption-size)}

/* ── 6장 운영 화면 목록 ── */
.oplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.oplist>*{min-width:0}

/* ── 부록 E 응답자 명단 ── */
.plist{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin-top:var(--s-4);
  padding:var(--s-3) var(--s-4);max-height:280px;overflow-y:auto;
  background:var(--surface-sunken);border:1px solid var(--line-weak)}
.plist a{font-size:var(--t-caption-size);line-height:var(--t-caption-line);white-space:nowrap}

@media (max-width:1199px){
  .calc-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oplist{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════
   v4 — 표지·Executive Summary 첫 화면 · 원리 인용
   ══════════════════════════════════════════════════════════════════ */

/* 지표 6종 한 줄 — 1400 이상에서만 6열, 그 아래에서는 3열 두 줄 */
.v-row-6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* 제목은 두 줄까지 흘리고 배지는 아래 줄로 내린다. 카드 높이는 내용에 맞춘다 */
.kpi6 .v-metric{height:auto;min-height:112px;padding:var(--s-3) var(--s-4);
  justify-content:flex-start;gap:var(--s-2)}
.kpi6 .m-top{align-items:flex-start;gap:var(--s-1);flex-wrap:wrap}
.kpi6 .m-label{flex:1 1 100%;min-width:0;font-size:11px;line-height:15px;
  white-space:normal;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi6 .pref{flex:1 0 100%;flex-wrap:wrap;margin-left:0}
.kpi6 .pref-b{height:16px;padding:0 4px;font-size:10px;line-height:14px}
.kpi6 .m-val{margin-top:auto}
.kpi6 .m-foot{white-space:normal;word-break:keep-all;line-height:14px}
.kpi6 .m-val{font-size:var(--t-subtitle-size);line-height:var(--t-title-line)}
.kpi6 .m-foot{font-size:11px;line-height:14px}
.kpi6 .src{display:none}
@media (max-width:1399px){
  .v-row-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 첫 화면용 압축 카드 — 안여백과 머리 간격만 줄인다 */
.v-card.tight{padding:var(--s-4)}
.v-card.tight .v-card-body{margin-top:var(--s-3)}
.v-card.tight .v-card-head h3{font-size:var(--t-body-size);line-height:var(--t-body-tight-line)}
.v-card.tight .v-card-sub{font-size:var(--t-caption-size);line-height:var(--t-caption-line)}
.v-card.tight .chart-note{margin-top:var(--s-2);font-size:11px;line-height:14px}
.fold-row .v-card.tight .para{font-size:var(--t-label-size);line-height:var(--t-body-line)}

/* 계산식 압축판 — 입력 3칸과 결과 3줄만 */
.calc-tight{gap:var(--s-3)}
.calc-tight .calc-in{gap:var(--s-2)}
.calc-tight .calc-f input{height:var(--ctl-h-sm)}
.calc-tight .tbl thead th{height:24px}
.calc-tight .tbl tbody td{height:28px;padding:4px var(--s-3);
  font-size:var(--t-label-size);line-height:var(--t-label-line)}
.calc-tight .tbl td em{display:none}
.calc-tight .calc-total{font-size:var(--t-caption-size);line-height:var(--t-caption-line)}

/* 원리·이론 인용 배지 */
.pref{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:baseline}
.pref-b{height:18px;padding:0 6px;border:1px solid var(--line-strong);border-radius:0;
  background:var(--surface-card);font-family:inherit;font-size:11px;line-height:16px;
  font-weight:var(--t-label-weight);color:var(--accent);cursor:pointer;white-space:nowrap}
.pref-b:hover{background:var(--surface-sunken)}
.v-card-head .pref{align-self:center}

/* 부록 G — 인용 열이 길어 표 안에서만 가로로 민다 */
.prin .tbl{min-width:1600px}
.prin .tbl td{vertical-align:top;height:auto;padding:10px var(--s-3)}
.prin .tbl td.wrap{white-space:normal;word-break:break-word}
.tbl tbody tr.is-hot td{background:var(--surface-info)}

/* ── 3.0 자극물 원문 — 결과를 읽는 옆자리 ── */
.stim{padding:var(--s-4);background:var(--surface-sunken);border:1px solid var(--line-weak)}
.stim-h{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-label-size);
  line-height:var(--t-label-line);font-weight:var(--t-label-weight);color:var(--text-strong)}
.stim-h i{width:10px;height:10px;flex:0 0 10px}
.stim-line{margin-top:var(--s-2);font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-strong);word-break:keep-all}
.stim-p{margin-top:var(--s-2);font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.stim-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);
  margin-top:var(--s-3)}
.stim-cards img{display:block;width:100%;height:auto;border:1px solid var(--line-weak)}

/* ── 지표 정의 한 줄 ── */
.defs{display:grid;gap:var(--s-1);padding:var(--s-3) var(--s-4);
  background:var(--surface-info);border-left:2px solid var(--cat-2)}
.def{font-size:var(--t-label-size);line-height:var(--t-body-line);color:var(--text-strong);
  word-break:keep-all}

/* ── 부록 G 인용 링크 ── */
.cite-links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin-top:var(--s-2)}
.cite-l{font-size:var(--t-caption-size);line-height:var(--t-caption-line);white-space:nowrap}