/* ═══════════════════════════════════════════════════════════════════
   도야 화이트&블루 A4 리포트 정본 — report.css
   출처: smartstore-seo-guide.pages.dev 의 토큰·컴포넌트를 실측 이식
   폰트는 같은 폴더 fonts/ 상대경로 — 폴더째 복사하면 그대로 뜬다.
   단일 HTML(아티팩트)로 낼 때만 build.py 가 data URI 로 인라인한다.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"A2Z";font-weight:400;font-style:normal;font-display:block;
  src:url("fonts/A2Z-4Regular.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:600;font-style:normal;font-display:block;
  src:url("fonts/A2Z-6SemiBold.woff2") format("woff2")}
/* 700~900 은 600 에서 합성된다 — 원본 사이트와 동일한 동작이다.
   더 굵은 실 웨이트가 필요하면 font-catalog 의 A2Z-7Bold/9Black 을 추가 선언할 것. */

/* ── 토큰: smartstore-seo-guide 정본 그대로 ───────────────────────── */
:root{
  --blue:#2563EB; --blue-d:#1E4CBA; --blue-l:#F4F7FD; --blue-bd:#DAE4F6;
  --yel-dk:#8A6A12; --yel-pale:#FFFDF6; --yel-bd:#E8D79B; --yel-cell:#FCF8E8;
  --grn:#137A5B; --grn-d:#0E5C45; --grn-l:#F4FAF7; --grn-bd:#C2E0D3;
  --ink:#1C2331; --body:#3A414D; --mute:#5F6672; --line:#E4E7EC; --tint:#F7F8FA;
  --paper:#E9EDF2;
  --shadow:0 1px 2px rgba(16,24,40,.1), 0 10px 28px -8px rgba(16,24,40,.2);
}
/* 종이 문서라 단일 테마로 확정한다 — 배경·글자색을 전부 명시해 호스트 테마와 무관하게 유지 */
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:A2Z,"Noto Sans CJK KR","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:12.2px; line-height:1.6; -webkit-font-smoothing:antialiased;
  word-break:keep-all;   /* 한글은 낱말 중간에서 끊지 않는다 */
  overflow-wrap:anywhere; /* 단, 긴 URL·모델코드는 넘치지 않게 */
}
.doc{display:flex; flex-direction:column; align-items:center; gap:6mm; padding:8mm 4mm 22mm}

/* ── 지면 ───────────────────────────────────────────────────────── */
.cover,.sheet{
  width:210mm; background:#fff; box-shadow:var(--shadow); position:relative;
  break-after:page; flex-shrink:0;
}
.cover{height:297mm; padding:0 24mm 38mm; display:flex; align-items:center; overflow:hidden}
.cover::before{content:""; position:absolute; top:0; left:0; right:0; height:5mm; background:var(--blue)}
.sheet{min-height:297mm; padding:13mm 13.5mm 11mm; display:flex; flex-direction:column}
.sheet.tall{min-height:0}

.cv-eyebrow{font-size:8.4pt; letter-spacing:.18em; color:var(--blue); font-weight:800; margin-bottom:6mm}
.cv-title{font-size:37pt; font-weight:900; color:var(--ink); line-height:1.2; letter-spacing:-.04em}
.cv-title b{color:var(--blue); font-weight:900}
.cv-sub{margin-top:7mm; font-size:10.4pt; color:var(--mute); line-height:1.7; max-width:120mm}
.cv-foot{position:absolute; left:24mm; right:24mm; bottom:22mm; display:flex; justify-content:space-between;
  align-items:flex-end; font-size:8.4pt; color:var(--mute); border-top:1px solid var(--line); padding-top:3mm}
.cv-foot b{color:var(--ink); font-weight:800}

/* ── 지면 머리/꼬리 ─────────────────────────────────────────────── */
.ph{break-inside:avoid; margin-bottom:4mm}
.ph .lbl{font-size:8.4pt; letter-spacing:.18em; color:var(--blue); font-weight:800;
  white-space:nowrap; padding-bottom:1mm}
.ph .tt{font-size:16pt; font-weight:900; color:var(--ink); letter-spacing:-.035em; line-height:1.15}
.part-lead{font-size:9.3pt; color:var(--mute); margin-bottom:3.8mm; line-height:1.6}
.pfoot{margin-top:auto; padding-top:4mm; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:7.6pt; color:var(--mute); letter-spacing:.04em}

/* ── 컴포넌트 (가이드 정본 계승) ─────────────────────────────────── */
.box{border:1px solid var(--line); border-radius:2.2mm; padding:2.8mm 3.4mm; margin:2.4mm 0; background:#fff; break-inside:avoid}
.box-t{font-size:9.3pt; font-weight:800; color:var(--ink); margin-bottom:2mm; letter-spacing:-.02em}
.quote{border-left:3px solid var(--blue); background:var(--tint); padding:2.2mm 3.2mm; margin:2mm 0;
  font-size:8.45pt; color:var(--ink); line-height:1.62; break-inside:avoid}
.easy{border-left:3px solid var(--grn); background:var(--grn-l); padding:2.1mm 3.2mm; margin:2mm 0;
  font-size:8.9pt; line-height:1.55; color:var(--grn-d); break-inside:avoid}
.easy b{color:var(--grn-d); font-weight:800}
.warnbox{border-left:3px solid var(--yel-dk); background:var(--yel-pale); border-top:1px solid var(--yel-bd);
  border-right:1px solid var(--yel-bd); border-bottom:1px solid var(--yel-bd);
  padding:2.1mm 3.2mm; margin:2mm 0; font-size:8.9pt; line-height:1.55; color:var(--yel-dk); break-inside:avoid}
.warnbox b{font-weight:800}
.formula{text-align:center; padding:3.2mm 4mm; margin:2.4mm 0; border:1.5px solid var(--blue);
  border-radius:2.2mm; background:var(--blue-l); break-inside:avoid}
.formula .f{font-size:26pt; font-weight:900; color:var(--blue); letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums}
.formula .n{font-size:8.6pt; color:var(--mute); margin-top:1.4mm}
.tag{display:inline-block; font-size:8.2pt; padding:1.1mm 2.4mm; border-radius:1.4mm; background:var(--yel-cell);
  color:var(--ink); font-weight:600; border:1px solid var(--yel-bd)}
.note{font-size:8.3pt; color:var(--mute); line-height:1.55; margin-top:1.6mm}
.tags{display:flex; flex-wrap:wrap; gap:1.4mm}

/* ── 지표 4칸 ───────────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:2.4mm; margin:1mm 0 3mm}
.kpi{border:1px solid var(--line); border-radius:2.2mm; padding:2.6mm 3mm; background:#fff}
.kpi .v{font-size:19pt; font-weight:900; color:var(--ink); letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi .v small{font-size:9pt; font-weight:800; color:var(--mute); margin-left:.6mm}
.kpi.b .v{color:var(--blue)} .kpi.y .v{color:var(--yel-dk)}
.kpi .l{font-size:8.4pt; font-weight:700; color:var(--ink); margin-top:.8mm}
.kpi .s{font-size:7.8pt; color:var(--mute); line-height:1.5; margin-top:.6mm}

/* ── 목차 ───────────────────────────────────────────────────────── */
.toc{border-top:1.5px solid var(--ink); margin-top:1mm}
.toc-i{display:flex; align-items:baseline; font-size:8.7pt; padding:1.5mm .5mm;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--body)}
.toc-i:hover{background:var(--blue-l); color:var(--blue-d)}
.toc-i .g{width:9mm; color:var(--blue); font-weight:800; font-variant-numeric:tabular-nums}
.toc-i .t{flex:1; color:var(--ink); font-weight:600}
.toc-i .d{color:var(--mute); font-size:8pt}

/* ── 막대 ───────────────────────────────────────────────────────── */
.bars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6mm}
.bar{display:grid; grid-template-columns:26mm 1fr 11mm; align-items:center; gap:2.4mm;
  width:100%; border:0; background:none; padding:.7mm .5mm; text-align:left; cursor:pointer;
  font:inherit; color:inherit; border-radius:1mm}
.bar:hover{background:var(--blue-l)}
.bar:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.bar[aria-pressed="true"]{background:var(--blue-l); box-shadow:inset 0 0 0 1px var(--blue-bd)}
.bar .k{font-size:8.5pt; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar[aria-pressed="true"] .k{color:var(--blue-d); font-weight:700}
.bar .track{height:3.1mm; background:var(--tint); border-radius:.6mm; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.bar .fill{display:block; height:100%; background:var(--blue); border-radius:0 1mm 1mm 0; min-width:1mm;
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.bar .fill.rest{background:var(--mute)}
.bar .fill.warn{background:var(--yel-dk)}
.bar .v{font-size:8.3pt; color:var(--body); text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.legend{display:flex; gap:4mm; font-size:7.8pt; color:var(--mute); margin-bottom:1.6mm}
.legend span{display:inline-flex; align-items:center; gap:1.2mm}
.sw{width:2.6mm; height:2.6mm; border-radius:.5mm; display:inline-block}
.chip-warn{display:inline-block; font-size:6.8pt; font-weight:800; letter-spacing:.06em; background:var(--yel-cell);
  color:var(--yel-dk); border:1px solid var(--yel-bd); border-radius:.8mm; padding:0 1mm; margin-left:1.2mm;
  vertical-align:.4mm}

/* ── 추이 ───────────────────────────────────────────────────────── */
.trend svg{display:block; width:100%; height:42mm; overflow:visible}
.trend .gl{stroke:var(--line); stroke-width:1}
.trend .ln{fill:none; stroke:var(--blue); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.trend .pt{fill:#fff; stroke:var(--blue); stroke-width:2}
.trend .pt.on{fill:var(--blue)}
.trend .hit{fill:transparent; cursor:pointer}
.trend .ax{font-size:9px; fill:var(--mute); font-variant-numeric:tabular-nums}

/* ── 표 ─────────────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto}
table.lined{border-collapse:collapse; width:100%; font-size:8.4pt}
table.lined th{background:#fff; color:var(--ink); border-bottom:1.5px solid var(--ink);
  text-align:left; padding:1.4mm 2mm; font-weight:800; font-size:7.8pt; letter-spacing:.06em}
table.lined td{border-bottom:1px solid var(--line); padding:1.3mm 2mm; color:var(--body)}
table.lined td.num{text-align:right; font-variant-numeric:tabular-nums}
.dtable{display:none; margin-top:2mm} .dtable.on{display:block}
.tbtn{font-size:7.6pt; font-weight:700; letter-spacing:.06em; background:#fff; color:var(--mute);
  border:1px solid var(--line); border-radius:1.2mm; padding:.9mm 2.2mm; cursor:pointer; white-space:nowrap; font-family:inherit}
.tbtn:hover{color:var(--blue); border-color:var(--blue-bd); background:var(--blue-l)}
.tbtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.hdrow{display:flex; align-items:flex-start; justify-content:space-between; gap:3mm}

/* ── 2단 ───────────────────────────────────────────────────────── */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:6mm}
.rows{list-style:none; margin:0; padding:0}
.rows li{display:flex; justify-content:space-between; align-items:baseline; gap:3mm;
  padding:1.1mm .4mm; border-bottom:1px solid var(--line); font-size:8.5pt; color:var(--ink)}
.rows li:last-child{border-bottom:0}
.rows .c{color:var(--mute); font-size:8pt; font-variant-numeric:tabular-nums}
.rows .plus{color:var(--blue); font-weight:800}
.mbtn{border:0; background:none; padding:0; cursor:pointer; font:inherit}
.mbtn .tag:hover{border-color:var(--blue); background:var(--blue-l)}

/* ── 탐색기 ─────────────────────────────────────────────────────── */
.controls{display:flex; flex-direction:column; gap:2.2mm; margin-bottom:3mm}
.searchrow{display:flex; gap:2.4mm; flex-wrap:wrap}
.search{flex:1 1 60mm; display:flex; align-items:center; gap:1.8mm; background:#fff;
  border:1px solid var(--line); border-radius:1.6mm; padding:1.8mm 2.6mm}
.search:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}
.search input{flex:1; border:0; background:none; font:inherit; font-size:9pt; color:var(--ink); outline:none}
.search input::placeholder{color:var(--mute)}
.search svg{flex-shrink:0; stroke:var(--mute)}
select.sel{border:1px solid var(--line); border-radius:1.6mm; padding:1.8mm 2.2mm; font:inherit;
  font-size:8.4pt; color:var(--ink); background:#fff}
select.sel:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.chips{display:flex; flex-wrap:wrap; gap:1.2mm}
.chip{font-size:8pt; font-weight:600; background:#fff; color:var(--body); border:1px solid var(--line);
  border-radius:1.2mm; padding:.8mm 2.2mm; cursor:pointer; font-family:inherit}
.chip:hover{border-color:var(--blue-bd); color:var(--blue-d); background:var(--blue-l)}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.chip:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.chip .n{font-size:7.2pt; opacity:.72; margin-left:.8mm; font-variant-numeric:tabular-nums}
.active{display:flex; align-items:center; gap:2.4mm; flex-wrap:wrap; font-size:8.4pt; color:var(--body);
  background:var(--tint); border:1px solid var(--line); border-radius:1.6mm; padding:1.6mm 2.4mm}
.active b{color:var(--blue-d); font-variant-numeric:tabular-nums}
.clear{font-size:7.6pt; font-weight:700; background:#fff; border:1px solid var(--line); color:var(--mute);
  border-radius:1.2mm; padding:.7mm 2mm; cursor:pointer; font-family:inherit}
.clear:hover{border-color:var(--yel-bd); color:var(--yel-dk); background:var(--yel-pale)}

.postlist{list-style:none; margin:0; padding:0}
.post{display:grid; grid-template-columns:19mm 1fr; gap:3mm; padding:2.4mm .4mm;
  border-bottom:1px solid var(--line)}
.post .no{font-size:7.8pt; color:var(--mute); font-variant-numeric:tabular-nums; padding-top:.4mm}
.post a.t{font-size:9.3pt; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:-.015em}
.post a.t:hover{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
.post a.t:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:1mm}
.post .ex{margin:.8mm 0 0; font-size:8.3pt; color:var(--body); line-height:1.6}
.post .tg{display:flex; flex-wrap:wrap; gap:1mm; margin-top:1.4mm}
.mini{font-size:7pt; font-weight:600; padding:.3mm 1.4mm; border-radius:.8mm; border:1px solid var(--line);
  color:var(--mute); background:#fff}
.mini.c{color:var(--blue-d); border-color:var(--blue-bd); background:var(--blue-l)}
.mini.m{color:var(--yel-dk); border-color:var(--yel-bd); background:var(--yel-cell)}
.more{align-self:center; margin-top:3mm; font-size:8.4pt; font-weight:700; background:#fff;
  border:1px solid var(--line); color:var(--body); border-radius:1.6mm; padding:2mm 6mm; cursor:pointer; font-family:inherit}
.more:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-l)}
.empty{padding:12mm 0; text-align:center; color:var(--mute); font-size:9pt}

/* ── 툴팁 · 인쇄 ───────────────────────────────────────────────── */
.tip{position:fixed; z-index:60; pointer-events:none; opacity:0; background:var(--ink); color:#fff;
  border-radius:1.4mm; padding:1.6mm 2.4mm; font-size:8.2pt; line-height:1.5; max-width:60mm;
  transition:opacity .12s; box-shadow:0 6px 20px -6px rgba(16,24,40,.5)}
.tip.on{opacity:1}
.tip b{font-variant-numeric:tabular-nums}
.fab{position:fixed; right:5mm; bottom:5mm; z-index:50; display:flex; gap:1.6mm}
.fab button{font-family:inherit; font-size:8.2pt; font-weight:700; border-radius:1.6mm; padding:2mm 3.4mm;
  cursor:pointer; border:1px solid var(--blue-bd); background:#fff; color:var(--blue-d); box-shadow:var(--shadow)}
.fab button.pri{background:var(--blue); border-color:var(--blue); color:#fff}
.fab button:hover{filter:brightness(1.05)}
.fab button:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

@media print{
  body{background:#fff} .doc{padding:0; gap:0}
  .cover,.sheet{box-shadow:none; width:auto; break-after:page}
  .fab,.tip{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:820px){
  .doc{padding:4mm 0 16mm}
  .cover,.sheet{width:100%; padding:10mm 6mm; min-height:0}
  .cover{height:auto; padding:14mm 6mm}
  .cv-title{font-size:23pt} .cols{grid-template-columns:1fr; gap:4mm}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cv-foot{position:static; margin-top:10mm; left:auto; right:auto; bottom:auto;
    flex-direction:column; align-items:flex-start; gap:1.5mm}
  .bar{grid-template-columns:22mm 1fr 10mm}
  .post{grid-template-columns:1fr; gap:.6mm}
}