/* ============================================================
   Quantum Range — System Policy Workshop
   디자인 시스템은 portal·spec-review와 일관. 정책 액센트는 옐로우.
   ============================================================ */
:root{
  --bg:#090c12;
  --panel:#10141d;
  --panel-hi:#161b27;
  --panel-soft:#0d1119;
  --ink:#f2f1ea;
  --ink-dim:#9aa3b2;
  --ink-faint:#586273;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.18);
  --line-hot:rgba(255,255,255,.28);

  --mint:#35e3a3;
  --blue:#5cc8ff;
  --purple:#b79bff;
  --yellow:#f5b54a;
  --pink:#ff6b6b;
  --gray:#9aa3b2;

  --accent:var(--yellow);   /* 정책 페이지의 액센트 */

  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:"Consolas","SF Mono",Menlo,monospace;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:clamp(18px,2.6vw,36px);
  padding-bottom:180px;
}

/* ---- background ---- */
.bg-grid,.bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 100%);
}
.bg-glow{
  background:
    radial-gradient(620px 420px at 14% 6%,rgba(245,181,74,.10),transparent 70%),
    radial-gradient(680px 520px at 92% 96%,rgba(92,200,255,.06),transparent 72%);
}

/* ============================================================
   Top bar
   ============================================================ */
.pg-top{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;
  color:var(--ink-dim);
  padding-bottom:14px;border-bottom:1px solid var(--line);
  margin-bottom:clamp(22px,3.4vw,40px);
}
.brand{display:flex;align-items:center;color:var(--ink);font-weight:700;text-decoration:none}
.brand:hover .crumb{color:var(--accent)}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--mint);
  margin-right:11px;box-shadow:0 0 12px var(--mint);
}
.sep{color:var(--ink-faint);margin:0 .55em}
.crumb{color:var(--ink-dim);font-weight:600;transition:color .2s}
.meta{display:flex;gap:14px;align-items:center}
.meta-version{
  color:var(--accent);font-weight:700;
  padding:3px 9px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:100px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
.meta-sep{color:var(--ink-faint)}
.meta-date{color:var(--ink-faint)}
.back-link{
  color:var(--ink-dim);text-decoration:none;font-weight:600;
  padding:5px 10px;border-radius:6px;transition:color .2s,background .2s;
}
.back-link:hover{color:var(--ink);background:rgba(255,255,255,.05)}

/* ============================================================
   Page container
   ============================================================ */
.pg{
  max-width:1240px;width:100%;margin:0 auto;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  margin-bottom:clamp(28px,4vw,46px);
  max-width:980px;
}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;
  color:var(--accent);margin-bottom:14px;font-weight:700;
}
.title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:1;letter-spacing:-.02em;margin-bottom:14px;
}
.title .period{color:var(--accent)}
.subtitle{
  color:var(--ink-dim);font-size:1rem;line-height:1.55;margin-bottom:18px;
}
.pitch{
  color:var(--ink);font-size:1.05rem;line-height:1.7;
  max-width:880px;
  padding:18px 22px;
  border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  border-radius:0 var(--r-md) var(--r-md) 0;
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:clamp(20px,2.8vw,30px);
  border-bottom:1px solid var(--line);
  padding-bottom:0;
}
.tab{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--ink-dim);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;font-weight:700;
  cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
  margin-bottom:-1px;
  position:relative;
}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.02)}
.tab[aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
.tab[aria-selected="true"] .tab-no{color:var(--accent)}
.tab-no{color:var(--ink-faint);font-weight:700;transition:color .18s}
.tab-name{font-weight:700;letter-spacing:.04em}
.tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);
  border-radius:100px;
  font-size:.66rem;font-weight:700;letter-spacing:0;
}
.tab--accent .tab-name{color:var(--accent)}

/* ============================================================
   Panels
   ============================================================ */
.panel{
  animation:fadeIn .35s ease-out;
}
.panel[hidden]{display:none}

.section-title{
  font-family:var(--serif);font-weight:400;
  font-size:1.5rem;letter-spacing:-.01em;
  margin-bottom:18px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.section-sub{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;font-weight:700;
  color:var(--ink-faint);
}
.section + .section{margin-top:36px}

/* ============================================================
   Cards — generic
   ============================================================ */
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--line-hi)}
.card-eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  color:var(--ink-faint);margin-bottom:10px;font-weight:700;
}
.card-title{
  font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:-.01em;
  margin-bottom:8px;
}
.card-desc{
  color:var(--ink-dim);font-size:.92rem;line-height:1.6;
}

/* ---- axis cards (overview) ---- */
.axis-card{position:relative;overflow:hidden}
.axis-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--accent));
}
.axis-card[data-color="mint"]{--c:var(--mint)}
.axis-card[data-color="blue"]{--c:var(--blue)}
.axis-card[data-color="yellow"]{--c:var(--yellow)}
.axis-card[data-color="purple"]{--c:var(--purple)}
.axis-card .axis-count{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;font-weight:700;
  color:var(--c,var(--accent));margin-bottom:8px;
}
.axis-card .axis-name{
  font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:10px;
}
.axis-card .axis-desc{color:var(--ink-dim);font-size:.95rem;line-height:1.6}

/* ---- principles list ---- */
.principle-list{display:grid;gap:8px}
.principle{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 18px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.principle-id{
  font-family:var(--mono);font-weight:700;font-size:.78rem;
  color:var(--accent);
  flex:0 0 auto;
  letter-spacing:.05em;
  padding-top:1px;
}
.principle-body{color:var(--ink);font-size:.95rem;line-height:1.55}

/* ---- glossary ---- */
.glossary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
}
.glossary-item{
  padding:14px 16px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.glossary-term{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;font-weight:700;
  color:var(--accent);margin-bottom:6px;
}
.glossary-desc{color:var(--ink-dim);font-size:.88rem;line-height:1.55}

/* ============================================================
   Process / Flow
   ============================================================ */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-bottom:36px;
  position:relative;
}
.flow-stage{
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 18px;
  position:relative;
}
.flow-stage[data-accent="mint"]{--c:var(--mint)}
.flow-stage[data-accent="blue"]{--c:var(--blue)}
.flow-stage[data-accent="yellow"]{--c:var(--yellow)}
.flow-stage[data-accent="purple"]{--c:var(--purple)}
.flow-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--c,var(--accent));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.flow-no{
  font-family:var(--mono);font-size:1.2rem;font-weight:700;
  color:var(--c,var(--accent));margin-bottom:6px;
}
.flow-name{
  font-family:var(--serif);font-weight:400;font-size:1.1rem;margin-bottom:14px;
}
.flow-items{
  display:flex;flex-direction:column;gap:6px;
}
.flow-item{
  color:var(--ink-dim);font-size:.82rem;line-height:1.4;
  padding:5px 0;
  border-bottom:1px dashed var(--line);
}
.flow-item:last-child{border-bottom:none}

/* state machine */
.states-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.states-block{
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
}
.states-title{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  color:var(--accent);font-weight:700;margin-bottom:14px;
}
.states-list{display:flex;flex-wrap:wrap;gap:8px}
.state-chip{
  display:inline-flex;flex-direction:column;
  padding:8px 12px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  min-width:140px;
}
.state-code{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--accent);margin-bottom:2px;
}
.state-label{color:var(--ink);font-size:.85rem;font-weight:600;margin-bottom:3px}
.state-desc{color:var(--ink-faint);font-size:.72rem;line-height:1.35}

.transitions{
  margin-top:18px;
  display:grid;gap:6px;
}
.transition{
  display:grid;grid-template-columns:120px 24px 130px 1fr;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.82rem;
}
.transition-from,.transition-to{
  font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--accent);
}
.transition-arrow{color:var(--ink-faint);text-align:center;font-family:var(--mono)}
.transition-trigger{color:var(--ink-dim)}

/* ============================================================
   Mindmap (SVG-like tree using CSS grid)
   ============================================================ */
.mindmap{
  background:
    radial-gradient(circle at 50% 50%,rgba(245,181,74,.04) 0%,transparent 60%),
    linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px;
  position:relative;
  overflow:hidden;
}
.mm-root{
  display:inline-block;
  padding:12px 22px;
  background:var(--accent);
  color:#1a1306;
  font-family:var(--serif);font-size:1.4rem;font-weight:700;
  border-radius:100px;
  margin-bottom:30px;
  box-shadow:0 0 32px color-mix(in srgb,var(--accent) 40%,transparent);
}
.mm-branches{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
}
.mm-branch{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px;
  background:var(--panel-soft);
  position:relative;
}
.mm-branch[data-color="mint"]{--c:var(--mint)}
.mm-branch[data-color="blue"]{--c:var(--blue)}
.mm-branch[data-color="yellow"]{--c:var(--yellow)}
.mm-branch[data-color="purple"]{--c:var(--purple)}
.mm-branch::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--c,var(--accent));border-radius:0 3px 3px 0;
}
.mm-branch-name{
  font-family:var(--serif);font-weight:400;font-size:1.05rem;
  color:var(--c,var(--accent));margin-bottom:12px;padding-left:12px;
}
.mm-children{
  display:flex;flex-direction:column;gap:6px;padding-left:12px;
}
.mm-child{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 10px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.85rem;color:var(--ink);
}
.mm-child-tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:var(--ink-faint);
}

/* ============================================================
   Mindmap v2 — 중앙 hero + 흐름도 2개 + 15 노드 (4 그룹)
   ============================================================ */
.mm{ display:flex; flex-direction:column; gap:28px; }

/* --- Hero ----------------------------------------------- */
.mm-hero{
  text-align:center;
  padding:32px 24px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%),
    linear-gradient(170deg, var(--panel-hi), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
}
.mm-hero::before{
  content:"";
  position:absolute; inset:1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 80px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mm-hero-kicker{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.28em; color:var(--ink-faint);
  margin-bottom:12px; font-weight:700;
}
.mm-hero-title{
  font-family:var(--serif); font-weight:700;
  font-size:1.95rem; color:var(--accent);
  letter-spacing:-.01em; line-height:1.15;
}
.mm-hero-sub{
  color:var(--ink-dim); font-size:1.05rem; margin-top:8px;
}
.mm-hero-meta{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--ink-faint);
  margin-top:16px;
}

/* --- Inline code ---------------------------------------- */
.mm-inline-code{
  font-family:var(--mono); font-size:.78rem;
  padding:1px 6px; border-radius:4px;
  background:rgba(255,255,255,.05);
  color:var(--accent);
}

/* --- Flows ---------------------------------------------- */
.mm-flows{ display:grid; grid-template-columns:1fr; gap:14px; }
.mm-flow{
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 22px;
}
.mm-flow-head{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:14px; flex-wrap:wrap;
}
.mm-flow-name{
  font-family:var(--serif); font-weight:700;
  font-size:1.05rem; color:var(--accent);
}
.mm-flow-desc{ color:var(--ink-dim); font-size:.85rem; }

.mm-flow-track{
  display:flex; align-items:stretch; gap:8px;
  flex-wrap:wrap;
}
.mm-step{
  flex:1; min-width:140px;
  display:flex; flex-direction:column; gap:4px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.mm-step-no{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.18em; color:var(--ink-faint); font-weight:700;
}
.mm-step-label{
  font-weight:600; color:var(--ink); font-size:.93rem;
}
.mm-step-sub{ color:var(--ink-dim); font-size:.76rem; }
.mm-flow-arrow{
  display:grid; place-items:center;
  color:var(--ink-faint);
  font-family:var(--mono); font-size:1.1rem;
  min-width:18px;
}

.mm-flow-branches{
  display:flex; align-items:center; gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  flex-wrap:wrap;
}
.mm-flow-branches-label{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; color:var(--ink-faint); font-weight:700;
}
.mm-branch-chip{
  padding:4px 11px;
  background:color-mix(in srgb, #ef6c70 16%, transparent);
  color:#ef6c70;
  border-radius:999px;
  font-size:.76rem; font-weight:600;
}

/* --- Groups (15 nodes, 4 그룹) -------------------------- */
.mm-groups{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.mm-group{
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px;
  position:relative;
}
.mm-group::before{
  content:""; position:absolute;
  left:0; top:18px; bottom:18px; width:3px;
  background:var(--c, var(--accent));
  border-radius:0 3px 3px 0;
}
.mm-group[data-color="mint"]   { --c: var(--mint); }
.mm-group[data-color="blue"]   { --c: var(--blue); }
.mm-group[data-color="yellow"] { --c: var(--yellow); }
.mm-group[data-color="purple"] { --c: var(--purple); }

.mm-group-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px;
  padding-left:14px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.mm-group-head-left{ display:flex; flex-direction:column; gap:4px; }
.mm-group-tag{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.22em; color:var(--c, var(--accent));
  font-weight:700;
}
.mm-group-name{
  font-family:var(--serif); font-weight:700;
  font-size:1.08rem; color:var(--ink);
}
.mm-group-desc{
  color:var(--ink-dim); font-size:.78rem;
  text-align:right; max-width:50%;
}

.mm-group-nodes{
  display:flex; flex-direction:column;
  gap:12px;
  padding-left:14px;
}

/* --- Node ----------------------------------------------- */
.mm-node{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:14px 16px;
  transition:background .15s, border-color .15s;
}
.mm-node:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--line-hi);
}
.mm-node-head{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--line);
}
.mm-node-no{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--c, var(--accent));
  font-weight:700;
}
.mm-node-title{
  font-weight:700; font-size:.96rem;
  color:var(--ink);
  letter-spacing:-.005em;
}
.mm-node-items{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:4px;
}
.mm-node-items li{
  font-size:.82rem; color:var(--ink-dim);
  padding-left:14px;
  position:relative;
  line-height:1.55;
}
.mm-node-items li::before{
  content:""; position:absolute;
  left:3px; top:.6em;
  width:5px; height:5px;
  background:var(--c, var(--accent));
  border-radius:50%;
  opacity:.7;
}
.mm-node-items li strong{ color:var(--ink); font-weight:700; }

.mm-node-links{
  display:flex; align-items:center;
  gap:5px; flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}
.mm-node-links-label{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.2em; color:var(--ink-faint);
  font-weight:700;
  margin-right:4px;
}
.mm-chip{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.08em; font-weight:700;
  padding:3px 7px;
  border-radius:4px;
  cursor:help;
  transition:transform .12s;
}
.mm-chip:hover{ transform:translateY(-1px); }
.mm-chip-d{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.mm-chip-g[data-sev="high"]{
  background:color-mix(in srgb, #ef6c70 16%, transparent);
  color:#ef6c70;
  border:1px solid color-mix(in srgb, #ef6c70 32%, transparent);
}
.mm-chip-g[data-sev="medium"]{
  background:color-mix(in srgb, var(--yellow) 16%, transparent);
  color:var(--yellow);
  border:1px solid color-mix(in srgb, var(--yellow) 32%, transparent);
}
.mm-chip-g[data-sev="low"]{
  background:color-mix(in srgb, var(--ink-dim) 16%, transparent);
  color:var(--ink-dim);
  border:1px solid color-mix(in srgb, var(--ink-dim) 32%, transparent);
}

/* --- Phases (15번 노드) --------------------------------- */
.mm-node--phases .mm-node-items{ gap:6px; }
.mm-node--phases .mm-node-items li{
  padding:8px 12px 8px 26px;
  background:rgba(255,255,255,.035);
  border-radius:var(--r-sm);
  font-size:.85rem;
  color:var(--ink);
}
.mm-node--phases .mm-node-items li::before{
  left:12px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; opacity:1;
}

/* --- 좁은 화면 ------------------------------------------ */
@media (max-width: 1020px) {
  .mm-groups{ grid-template-columns:1fr; }
  .mm-group-head{ flex-direction:column; align-items:flex-start; }
  .mm-group-desc{ text-align:left; max-width:none; }
}

/* ============================================================
   Decisions (탭 4) — input UI
   ============================================================ */
.decisions-bar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
  padding:14px 18px;
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.decisions-stats{display:flex;gap:18px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.decisions-stat{color:var(--ink-dim)}
.decisions-stat strong{color:var(--accent);font-size:1.15rem;margin-right:6px;font-weight:700}
.decisions-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions-sep{
  display:inline-block;
  width:1px;height:20px;
  background:var(--line-hi);
  margin:0 2px;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:transparent;
  border:1px solid var(--line-hi);
  border-radius:100px;
  color:var(--ink);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;font-weight:700;
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.btn-primary{
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
}
.btn-primary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.btn-ghost{border-color:transparent;color:var(--ink-dim)}
.btn-ghost:hover{color:var(--pink);border-color:color-mix(in srgb,var(--pink) 40%,transparent);background:transparent}

/* 결정·검토 카드 리스트 — 반응형 멀티컬럼 그리드(밀도↑) */
#decisions-list-planning,
#decisions-list-code{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));
  gap:12px;
  align-items:stretch;       /* 같은 행 카드 높이를 균일하게 */
}

.decision{
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  margin-bottom:0;
  transition:border-color .2s;
}
.decision.is-decided{border-color:color-mix(in srgb,var(--mint) 35%,transparent)}
.decision-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:4px}

/* ---- 결정 주체 표면 태그 (client/web/app) ---- */
.surf-host{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.surf-tags{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.surf{
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.06em;
  line-height:1.25;white-space:nowrap;
  padding:2px 6px;border-radius:4px;
  border:1px solid currentColor;
  opacity:.5;                 /* 부차(also) = 흐리게 */
}
.surf--web{color:var(--blue)}
.surf--app{color:var(--purple)}
.surf--client{color:#c8ff3a}
.surf.is-primary{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.surf--est{border-style:dashed}        /* 추정 = 점선(+? 접미) */
.decision-id{
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--accent);
}
.decision.is-decided .decision-id{color:var(--mint)}
.decision-status{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;font-weight:700;
  padding:2px 9px;
  border-radius:100px;
  border:1px solid var(--line-hi);
  color:var(--ink-faint);
}
.decision.is-decided .decision-status{
  color:var(--mint);
  border-color:color-mix(in srgb,var(--mint) 45%,transparent);
  background:color-mix(in srgb,var(--mint) 8%,transparent);
}
.decision-title{
  font-family:var(--serif);font-weight:400;font-size:1.06rem;letter-spacing:-.01em;
  line-height:1.25;margin-bottom:4px;
}
.decision-question{color:var(--ink-dim);font-size:.84rem;line-height:1.4;margin-bottom:8px}

.decision-options{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;
}
.opt{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink-dim);
  font-size:.82rem;font-weight:600;
  cursor:pointer;
  transition:all .18s;
  position:relative;
}
.opt:hover{color:var(--ink);border-color:var(--line-hi)}
.opt.is-recommended::after{
  content:"추천";
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;font-weight:700;
  color:var(--blue);
  padding:2px 6px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--blue) 40%,transparent);
  background:color-mix(in srgb,var(--blue) 10%,transparent);
}
.opt.is-selected{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent);
}
.decision.is-decided .opt.is-selected{
  border-color:var(--mint);
  background:color-mix(in srgb,var(--mint) 15%,transparent);
  color:var(--mint);
}

.decision-custom{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.custom-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;font-weight:700;
  color:var(--ink-faint);min-width:90px;
}
.custom-input{
  flex:1;
  padding:8px 14px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:.9rem;
  font-family:var(--sans);
  transition:border-color .18s;
}
.custom-input:focus{outline:none;border-color:var(--accent)}

.decision-impact{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;
  background:rgba(0,0,0,.18);
  border-left:2px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.85rem;color:var(--ink-dim);line-height:1.5;
  margin-bottom:14px;
}
.impact-label{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;font-weight:700;
  color:var(--accent);flex:0 0 auto;
  padding-top:2px;
}

.decision-memo{
  display:flex;flex-direction:column;gap:6px;
}
.memo-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;font-weight:700;
  color:var(--ink-faint);
}
.memo-input{
  width:100%;min-height:32px;
  margin-top:auto;          /* 카드 하단 고정(프레임 균일) */
  padding:7px 12px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:.83rem;font-family:var(--sans);
  resize:vertical;
  line-height:1.4;
  transition:border-color .18s,min-height .18s;
}
/* 메모 접기 — 비었을 땐 1줄, 포커스/입력 시 확장(점진적 공개) */
.memo-input:focus{outline:none;border-color:var(--accent);min-height:72px}
.decision .memo-input:not(:placeholder-shown){min-height:56px}
.memo-input::placeholder{color:var(--ink-faint)}

/* ============================================================
   Gaps (탭 5)
   ============================================================ */
.gap-card{
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:13px 15px;
  margin-bottom:0;
}
.gap-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;margin-bottom:6px}
.gap-id{
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink-faint);
}
.gap-area{
  font-family:var(--serif);font-size:1.05rem;font-weight:400;
  flex:1 1 auto;min-width:max-content;white-space:nowrap;
}
/* 헤더 배지/상태는 자기 너비 유지 (텍스트 세로 깨짐 방지) */
.gap-status,.gap-sev,.plan-badge{flex:0 0 auto}
.gap-sev{
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  padding:3px 8px;border-radius:100px;
}
.gap-sev[data-sev="high"]{color:var(--pink);border:1px solid color-mix(in srgb,var(--pink) 40%,transparent);background:color-mix(in srgb,var(--pink) 8%,transparent)}
.gap-sev[data-sev="medium"]{color:var(--yellow);border:1px solid color-mix(in srgb,var(--yellow) 40%,transparent);background:color-mix(in srgb,var(--yellow) 8%,transparent)}
.gap-sev[data-sev="low"]{color:var(--gray);border:1px solid var(--line-hi);background:rgba(255,255,255,.04)}
.gap-issue{color:var(--ink-dim);font-size:.8rem;line-height:1.4;margin-bottom:8px}
.gap-memo{
  width:100%;min-height:32px;
  margin-top:auto;          /* 카드 하단 고정(프레임 균일) */
  padding:7px 11px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);font-size:.83rem;font-family:var(--sans);
  resize:vertical;
  line-height:1.4;
  transition:border-color .18s,min-height .18s;
}
.gap-memo:focus{outline:none;border-color:var(--accent);min-height:64px}
.gap-card .gap-memo:not(:placeholder-shown){min-height:52px}
.gap-memo::placeholder{color:var(--ink-faint)}

/* ============================================================
   Roadmap (탭 6)
   ============================================================ */
.roadmap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.phase{
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
  position:relative;
}
.phase[data-accent="mint"]{--c:var(--mint)}
.phase[data-accent="blue"]{--c:var(--blue)}
.phase[data-accent="yellow"]{--c:var(--yellow)}
.phase::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:var(--c,var(--accent));border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.phase-name{
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--c,var(--accent));margin-bottom:6px;
}
.phase-target{
  color:var(--ink-faint);font-size:.78rem;font-family:var(--mono);letter-spacing:.06em;
  margin-bottom:12px;
}
.phase-tagline{
  font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;
  margin-bottom:18px;line-height:1.3;
}
.phase-scope{display:flex;flex-direction:column;gap:8px}
.phase-item{
  display:flex;gap:10px;align-items:flex-start;
  color:var(--ink-dim);font-size:.88rem;line-height:1.5;
}
.phase-item::before{
  content:"";flex:0 0 auto;
  width:5px;height:5px;border-radius:50%;
  background:var(--c,var(--accent));
  margin-top:8px;
}

/* ============================================================
   Footer
   ============================================================ */
.pg-bot{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px clamp(18px,2.6vw,36px);
  background:rgba(9,12,18,.92);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-faint);
}
.save-ind{
  color:var(--mint);
  opacity:.6;
  transition:opacity .25s;
}
.save-ind.is-flash{opacity:1}

/* ============================================================
   Animations & Responsive
   ============================================================ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:980px){
  .grid-3,.flow,.roadmap{grid-template-columns:repeat(2,1fr)}
  .states-wrap{grid-template-columns:1fr}
}
@media(max-width:680px){
  .grid-3,.grid-2,.flow,.roadmap{grid-template-columns:1fr}
  .tab{padding:10px 14px}
  .tab-name{font-size:.74rem}
  .transition{grid-template-columns:1fr;gap:4px}
  .transition-arrow{display:none}
  .decision-meta{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}