/* ░░░ root64 PRD 공용 chrome 스타일 — 모든 PRD HTML이 <link>로 공유 ░░░
   토큰은 docs/design/2026-05-18-design-system.md (root64 Design System v1.0 BI)를 따른다.
   이 파일을 고치면 docs/product/prds/ 의 모든 PRD에 반영된다. */
:root{
  /* color — design-system §1.1 (확정 BI) */
  --color-surface:#e7e1d8;          /* Parchment — 페이지 배경 */
  --color-surface-raised:#efeae2;   /* 카드·패널 면 */
  --color-surface-sunken:#dbd4c7;   /* 가라앉은 면(표 thead·코드) */
  --color-ink:#2a1f15;              /* Espresso — 본문·구조선 */
  --color-ink-soft:#6b5d4f;         /* 보조 텍스트·라벨 */
  --color-accent:#1d8fb0;           /* Teal — 브랜드·검증·CTA */
  --color-accent-soft:#95cdde;      /* 옅은 teal — 어두운 면 위 강조 */
  --color-walnut:#3d2818;           /* Walnut — 워드마크 "root" 전용 */
  --color-alert:#fc6779;            /* Coral — 알림·필수 게이트 전용 */
  --color-border:rgba(42,31,21,.10);
  --color-border-strong:rgba(42,31,21,.20);
  /* typography — design-system §1.3 (확정 BI) */
  --font-sans:"Hanken Grotesk","Pretendard Variable",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* shadow / motion — design-system §1.6 */
  --shadow-card:0 1px 0 rgba(42,31,21,.04),0 20px 40px -20px rgba(42,31,21,.12);
  --ease-standard:cubic-bezier(.5,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{font-family:var(--font-sans);color:var(--color-ink);background:var(--color-surface);
  background-image:radial-gradient(circle at 1px 1px,rgba(42,31,21,.05) 1px,transparent 0);
  background-size:32px 32px;line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
.layout{display:grid;grid-template-columns:300px 1fr;max-width:1480px;margin:0 auto;align-items:start}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:28px 22px;
  border-right:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 90%,transparent)}
/* 워드마크 — design-system §3.1: weight 400, "root" walnut, "64" teal, √ 심볼 teal */
.brand{color:var(--color-walnut);font-weight:400;font-size:18px;letter-spacing:-.02em}
.brand .r64,.brand .b64{color:var(--color-accent)}
.side .doc-kind{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-soft);margin-top:4px}
.progwrap{margin:20px 0 8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-ink-soft)}
.progbar{height:6px;background:var(--color-surface-sunken);margin-top:6px;overflow:hidden}
.progbar i{display:block;height:100%;background:var(--color-accent);width:0;transition:width .3s var(--ease-standard)}
nav.toc{margin-top:14px}
nav.toc a{display:flex;align-items:center;gap:8px;padding:5px 8px;text-decoration:none;
  color:var(--color-ink-soft);font-size:13px;border-left:2px solid transparent;transition:all .15s var(--ease-standard)}
nav.toc a:hover{color:var(--color-ink);background:var(--color-surface-raised)}
nav.toc a.active{color:var(--color-ink);border-left-color:var(--color-accent);font-weight:600;background:var(--color-surface-raised)}
nav.toc a .num{font-family:var(--font-mono);font-size:10px;color:var(--color-accent);min-width:20px}
nav.toc label{display:flex;align-items:center;cursor:pointer}
nav.toc input{accent-color:var(--color-accent);width:13px;height:13px;cursor:pointer}
nav.toc a.done .lbl{text-decoration:line-through;opacity:.55}
main{padding:36px 52px 120px;max-width:1040px}
header.dochead{border-bottom:2px solid var(--color-ink);padding-bottom:22px;margin-bottom:8px}
header.dochead h1{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--color-accent)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;padding:4px 9px;
  border:1px solid var(--color-border-strong);color:var(--color-ink-soft);text-transform:uppercase}
.chip.live{background:var(--color-accent);color:var(--color-surface);border-color:var(--color-accent)}
.chip b{color:var(--color-ink)}
.statstrip{display:flex;margin:20px 0 6px;border:1px solid var(--color-border-strong)}
.statstrip div{flex:1;padding:12px 14px;border-right:1px solid var(--color-border)}
.statstrip div:last-child{border-right:0}
.statstrip .v{font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--color-ink)}
.statstrip .v.warn{color:var(--color-accent)}
.statstrip .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft);margin-top:2px}
section.sec{margin-top:14px;border-bottom:1px solid var(--color-border);padding-bottom:8px}
.sechead{display:flex;align-items:baseline;gap:12px;cursor:pointer;padding:18px 0 10px;user-select:none}
.sechead .snum{font-family:var(--font-mono);font-size:13px;color:var(--color-accent);font-weight:500}
.sechead h2{font-size:23px;font-weight:500;letter-spacing:-.02em}
.sechead .caret{margin-left:auto;color:var(--color-ink-soft);font-family:var(--font-mono);font-size:13px;transition:transform .2s var(--ease-standard)}
.sec.collapsed .caret{transform:rotate(-90deg)}
.sec.collapsed .secbody{display:none}
.secbody{padding:2px 0 14px}
.secbody p{margin:8px 0}
.secbody>ul{margin:8px 0 8px 20px}
.secbody>ul li{margin:5px 0}
.note{border-left:3px solid var(--color-accent-soft);background:var(--color-surface-raised);padding:10px 14px;
  margin:12px 0;font-size:13.5px;color:var(--color-ink-soft)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--color-surface-sunken);padding:1px 5px}
h3.subh{font-size:15px;font-weight:600;margin:18px 0 6px;letter-spacing:-.01em}
.filterbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:14px 0 6px;
  padding:12px;background:var(--color-surface-raised);border:1px solid var(--color-border)}
.filterbar .flabel{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-soft);margin-right:2px}
.fchip{font-family:var(--font-mono);font-size:11px;padding:4px 10px;border:1px solid var(--color-border-strong);
  background:var(--color-surface);cursor:pointer;color:var(--color-ink-soft);transition:all .15s var(--ease-standard)}
.fchip:hover{border-color:var(--color-accent)}
.fchip.on{background:var(--color-ink);color:var(--color-surface);border-color:var(--color-ink)}
.fchip.depcheck.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-surface)}
.grouphead{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-ink);margin:24px 0 4px;display:flex;align-items:center;gap:8px}
.grouphead::before{content:"[화면]";color:var(--color-accent);font-size:10px}
.grouphead .gcount{color:var(--color-ink-soft);font-size:10px}
.fr{border:1px solid var(--color-border);background:var(--color-surface-raised);padding:14px 16px;margin:9px 0;
  scroll-margin-top:16px;transition:box-shadow .15s var(--ease-standard),border-color .15s var(--ease-standard)}
.fr:hover{box-shadow:var(--shadow-card)}
.fr:target,.q:target{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.fr.hlink{animation:flash 1.4s var(--ease-standard)}
@keyframes flash{0%,30%{background:var(--color-accent-soft)}100%{background:var(--color-surface-raised)}}
.frtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.frid{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-surface);background:var(--color-ink);padding:2px 7px}
.frtitle{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--color-border-strong);color:var(--color-ink-soft)}
.badge.stub{background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface-raised));border-color:var(--color-accent-soft);color:var(--color-accent)}
.frfield{margin-top:8px;font-size:13.5px}
.frfield .fk{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft);display:block;margin-bottom:2px}
.ac{list-style:none;margin:2px 0 0}
.ac li{padding:3px 0 3px 16px;position:relative;font-size:13.5px}
.ac li::before{content:"›";position:absolute;left:2px;color:var(--color-accent);font-family:var(--font-mono)}
.dep a,.xref{color:var(--color-accent);text-decoration:none;font-family:var(--font-mono);font-size:12px;border-bottom:1px dashed var(--color-accent-soft)}
.dep a:hover,.xref:hover{border-bottom-style:solid}
.assume{color:var(--color-ink-soft);font-style:italic;font-size:13px}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;background:var(--color-surface-raised)}
th,td{border:1px solid var(--color-border);padding:8px 10px;text-align:left;vertical-align:top}
thead th{background:var(--color-surface-sunken);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft);font-weight:500}
tbody tr:hover{background:color-mix(in srgb,var(--color-accent) 4%,var(--color-surface-raised))}
td .mono{font-family:var(--font-mono);font-size:12px}
.flow{border:1px solid var(--color-border);background:var(--color-surface-raised);padding:14px 16px;margin:10px 0}
.flow h4{font-size:14px;font-weight:600;margin-bottom:6px}
.flow h4 .ftag{font-family:var(--font-mono);font-size:10px;color:var(--color-surface);background:var(--color-accent);padding:2px 6px;margin-right:7px}
.flow dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px;margin-top:6px}
.flow dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-soft);padding-top:2px}
.flow ol{margin:3px 0 3px 18px;font-size:13px}
.q{border:1px solid var(--color-border);border-left:3px solid var(--color-accent);background:var(--color-surface-raised);padding:13px 16px;margin:10px 0;scroll-margin-top:16px}
.qtop{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.qid{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-accent)}
.qtag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border:1px solid var(--color-border-strong);color:var(--color-ink-soft)}
.qtag.must{background:var(--color-alert);color:var(--color-surface);border-color:var(--color-alert)}
.qtitle{font-weight:600;font-size:14px}
.qctx{font-size:13px;color:var(--color-ink-soft);margin:5px 0 7px}
.qopts{list-style:none;font-size:13px}
.qopts li{padding:2px 0 2px 22px;position:relative}
.qopts li .ol{position:absolute;left:0;font-family:var(--font-mono);font-weight:500;color:var(--color-ink-soft)}
.qrec{background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface-raised));border:1px solid var(--color-accent-soft);padding:6px 10px;margin:7px 0 4px;font-size:13px}
.qdep{font-family:var(--font-mono);font-size:11px;color:var(--color-ink-soft)}
.verdict{font-family:var(--font-mono);font-size:13px;background:var(--color-ink);color:var(--color-surface);padding:10px 14px;display:inline-block;margin-top:8px}
.verdict b{color:var(--color-accent-soft)}
footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--color-border);font-size:12px;color:var(--color-ink-soft);font-family:var(--font-mono)}
.tophint{position:fixed;bottom:18px;right:18px;font-family:var(--font-mono);font-size:11px;background:var(--color-ink);color:var(--color-surface);padding:7px 12px;cursor:pointer;border:0;opacity:.85;transition:opacity .15s}
.tophint:hover{opacity:1}
.todo{color:var(--color-alert);font-style:italic}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--color-border)}
  main{padding:24px 20px 80px}.statstrip{flex-wrap:wrap}
}
@media print{
  .side,.tophint,.filterbar,.caret{display:none!important}
  .layout{display:block}.sec.collapsed .secbody{display:block!important}
  body{background:#fff}.fr,.q,.flow{break-inside:avoid}
}