/* RoRop 테마 — 공공 대시보드형 (style.css 위에 덮는다).
 *
 * - 짙은 남색 머리띠, 흰 카드, 여덟 상태는 파랑 → 청록 → 초록으로 이어지는 색.
 *   상태 색은 '어디쯤 와 있나'를 가리킬 뿐 좋고 나쁨이 아니다 (원칙 4: 성적표 금지 — 빨강·노랑 신호등을 쓰지 않는다).
 * - 기계의 추정은 주황 점선, 되돌림은 보라. 출처의 구분(원칙 6)은 색이 아니라 선 모양으로도 남는다.
 * - 설명 글은 첫 줄만 보이고 '더 보기'로 펼친다 (fold.js). */

:root {
  --bg: #f3f5f9; --panel: #ffffff; --ink: #172033; --muted: #5b6578; --line: #e2e7ef;
  --accent: #1667c4; --accent-strong: #0f4f9c; --accent-soft: #e8f1fc; --now: #1e3a5f; --past: #d6dee9;
  --machine: #c2560c; --machine-soft: #fff4ea; --back: #7c3aed;
  --navy: #1e3a5f; --navy-deep: #132a47; --navy-ink: #dbe6f3;
  --table-bg: #ffffff; --table-head: #eef2f8; --table-head-inner: #f5f8fc; --table-line: #dfe5ee;
  --table-head-ink: #33415a; --table-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --nav-bg: #ffffff; --nav-line: #dfe5ee; --nav-ink: #33415a; --nav-hover: #eef4fb;
  /* 온톨로지 그래프: 클래스마다 제 색 (결정 D171). 딸린 속성·하위 클래스는 이 색의 옅은 결을 입는다 */
  --oc-rule: #4f5bd5; --oc-service: #0e9488; --oc-step: #3d9a50; --oc-issue: #e0563f; --oc-doc: #5f6f8a;
  --oc-person: #8b5cf6; --oc-notice: #d08a12; --oc-domain: #d6457a; --oc-observed: #1d8fd1;
  --fig-steward: #ea7a0c; --fig-policy: #d63031; --fig-admin: #8e9196;  /* 한 장 그림의 자료 관리자(주황) · 정책 결정권자(붉은색) · 시스템 관리자(회색) */
  /* 여덟 상태: 파랑 → 청록 → 초록 */
  --st-1: #3b6fd8; --st-2: #2f7fd0; --st-3: #1f8fc4; --st-4: #129cb3;
  --st-5: #0e9f9b; --st-6: #12a184; --st-7: #229e6b; --st-8: #2f9455;
  --step-1: #edf2fc; --step-2: #ecf3fb; --step-3: #e9f4fa; --step-4: #e7f6f8;
  --step-5: #e6f6f5; --step-6: #e7f6f2; --step-7: #e9f6ef; --step-8: #ebf5ee; --step-line: #d5dde8;
  --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
  --shadow-up: 0 4px 14px rgba(16, 24, 40, .09);
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1520; --panel: #18202d; --ink: #e6ebf3; --muted: #9aa6b8; --line: #2a3445;
    --accent: #6aa8f0; --accent-strong: #8fbff5; --accent-soft: #1b2b42; --now: #6aa8f0; --past: #2f3a4c;
    --machine: #f0a35e; --machine-soft: #2b2118; --back: #b79cf5;
    --navy: #13243b; --navy-deep: #0b1626; --navy-ink: #c9d6e8;
    --table-bg: #161d29; --table-head: #212b3b; --table-head-inner: #1c2533; --table-line: #2f3a4c;
    --table-head-ink: #c3cdda; --nav-bg: #18202d; --nav-line: #2f3a4c; --nav-ink: #c3cdda; --nav-hover: #222d3e;
    --oc-rule: #7c86ee; --oc-service: #2bb8aa; --oc-step: #5fbf72; --oc-issue: #f07a63; --oc-doc: #8a9bb8;
    --oc-person: #a98bfa; --oc-notice: #e8a83a; --oc-domain: #ec6f9a; --oc-observed: #45aef0;
    --fig-steward: #f59a46; --fig-policy: #f06a6a; --fig-admin: #a3a6ab;
    --step-1: #1a2336; --step-2: #192536; --step-3: #182836; --step-4: #172a35; --step-5: #172b33;
    --step-6: #172b31; --step-7: #182a2e; --step-8: #19292b; --step-line: #2f3a4c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-up: 0 4px 14px rgba(0, 0, 0, .45);
  }
}

body { font-size: 15px; letter-spacing: -0.005em; }

/* ── 머리띠 ── */
.top { background: linear-gradient(100deg, var(--navy-deep), var(--navy) 55%, #24507a); border-bottom: 0;
  box-shadow: 0 2px 10px rgba(10, 25, 45, .25); color: var(--navy-ink); padding: 12px 22px; }
.brand { color: #fff; font-weight: 800; letter-spacing: -0.01em; font-size: 28px; }
.brand::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%;
  background: #5fd0c4; vertical-align: 3px; }
.top nav a { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: var(--navy-ink);
  border-radius: 999px; padding: 5px 13px; }
.top nav a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); text-decoration: none; }
.top nav a[aria-current="page"] { background: #fff; border-color: #fff; color: var(--navy); font-weight: 700; }
.top nav a:focus-visible { outline-color: #5fd0c4; }
.top .seat, .top .who { color: #b9c9de; }
.top select { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); border-radius: 8px; }
.top select option { color: var(--ink); background: var(--panel); }
.top .who a { color: #9fd3ff; }
.top .me-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ── 왼쪽 보조 메뉴 ── */
.side { gap: 4px; }
.side a, .side .manual-toggle { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; box-shadow: var(--shadow); color: var(--nav-ink); }
.side a:hover, .side .manual-toggle:hover { background: var(--nav-hover); border-color: var(--accent); }
.side a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.side .side-sub { border-left-color: var(--line); }
.side .side-sub a { box-shadow: none; border: 0; background: none; }
.side .side-sub a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; border-radius: 6px; }

/* ── 글자 ── */
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 14px; color: var(--ink); }
h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 28px 0 10px; display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
a { color: var(--accent); }
code { background: var(--accent-soft); color: var(--accent-strong); padding: 0 5px; border-radius: 5px; font-size: .92em; }

/* ── 카드·표·태그 ── */
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); padding: 16px 18px; }
details.card[open] { box-shadow: var(--shadow-up); }
details.card > summary { color: var(--ink); }
.tag { border: 0; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; padding: 2px 9px;
  border-radius: 999px; font-size: 11.5px; }
table { font-size: 13.5px; }
th { color: var(--table-head-ink); background: var(--table-head); font-weight: 700; }
th:first-child { border-top-left-radius: 8px; } th:last-child { border-top-right-radius: 8px; }
tr:hover > td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
table.doc-table { border-radius: 10px; overflow: hidden; }
table.doc-table tr:hover > td { background: none; }

/* ── 입력·단추 ── */
input, select, textarea { border-radius: 8px; border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; border-radius: 8px;
  padding: 7px 14px; transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; }
button:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: var(--shadow-up); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.ghost { background: var(--panel); color: var(--accent-strong); border-color: var(--line); font-weight: 500; }
button.ghost:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
.side .manual-toggle { font-weight: 500; }
.side .manual-toggle:hover { background: var(--nav-hover); color: var(--nav-ink); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active { transform: none; } }

/* ── 여덟 상태: 띠와 등록부 칸 ── */
.ribbon { gap: 3px; }
.ribbon div { border: 0; border-radius: 6px; background: var(--table-head-inner); color: var(--muted); font-weight: 600; }
.ribbon div:nth-child(1) { --st: var(--st-1); } .ribbon div:nth-child(2) { --st: var(--st-2); }
.ribbon div:nth-child(3) { --st: var(--st-3); } .ribbon div:nth-child(4) { --st: var(--st-4); }
.ribbon div:nth-child(5) { --st: var(--st-5); } .ribbon div:nth-child(6) { --st: var(--st-6); }
.ribbon div:nth-child(7) { --st: var(--st-7); } .ribbon div:nth-child(8) { --st: var(--st-8); }
.ribbon .지난 { background: color-mix(in srgb, var(--st) 18%, var(--panel)); color: color-mix(in srgb, var(--st) 75%, var(--ink)); }
.ribbon .지금 { background: var(--st); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--st) 40%, transparent); }
.ribbon .지금 .back { color: #fff; }

.states { gap: 8px; }
.states .col { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); border-top: 4px solid var(--st, var(--step-line)); }
.states .col:nth-child(1) { --st: var(--st-1); } .states .col:nth-child(2) { --st: var(--st-2); }
.states .col:nth-child(3) { --st: var(--st-3); } .states .col:nth-child(4) { --st: var(--st-4); }
.states .col:nth-child(5) { --st: var(--st-5); } .states .col:nth-child(6) { --st: var(--st-6); }
.states .col:nth-child(7) { --st: var(--st-7); } .states .col:nth-child(8) { --st: var(--st-8); }
.queues > .card { border-top: 4px solid var(--accent); }

/* ── 기계의 추정 (점선, 주황) ── */
.reference { border-radius: var(--radius); border: 1.5px dashed var(--machine); box-shadow: var(--shadow); }
.notices { border-radius: 10px; }
.writer-banner { border-radius: 8px; }

/* ── 시간축 ── */
.timeline { border-left: 2px solid var(--line); }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent); }
.tl.backward::before { border-color: var(--back); }
.tl.mark-tl::before { border-color: var(--muted); border-style: dashed; }

/* ── 설명 글 접기 (fold.js) ── */
.fold-text { display: -webkit-box; -webkit-line-clamp: var(--fold-lines, 1); line-clamp: var(--fold-lines, 1);
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.fold-text.open { display: block; -webkit-line-clamp: unset; }
.fold-more { all: unset; cursor: pointer; font-size: 12.5px; color: var(--accent); margin: 0 0 10px; display: inline-block; }
.fold-more:hover { text-decoration: underline; background: none; box-shadow: none; }
.fold-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── 알림 줄 ── 테두리가 있는 것(기계 추천·빈 자리)은 카드처럼 안쪽 여백을 둔다 */
.notices { margin: 0 0 14px; }
.notices.machine, .notices.gaps { padding: 10px 14px; border-radius: 10px; border: 1.5px dashed var(--machine);
  background: var(--machine-soft); }
.notices.gaps { border-color: var(--step-line); background: var(--table-head-inner); }
.notices:not(.machine):not(.gaps) { border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 8px 12px; border-radius: 0 10px 10px 0; }
.top .muted { color: #a9bbd2; }

/* '역할별로 보기'는 로그인하면 감춘다 — 그때는 로그인 표시가 오른쪽 끝으로 간다 */
.top .seat[hidden] + .who { margin-left: auto; }

/* ── 쓰는 법: 그림으로 보는 단계 흐름 ── 쓰기(기록) · 보기(화면) · 명령. 상태를 고르는 단추는 없다 */
.mhero { display: flex; gap: 16px; align-items: center; margin: 4px 0 12px; }
.mhero h1 { margin: 0 0 2px; }
.mhero-avatar { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--accent));
  box-shadow: var(--shadow-up); }
.mhero-summary { margin: 0 0 6px; color: var(--muted); }
.chip { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--table-head);
  color: var(--table-head-ink); font-weight: 600; white-space: nowrap; }
.chip-seat { background: var(--accent-soft); color: var(--accent-strong); }
.chip-doc { background: color-mix(in srgb, var(--st-6) 14%, var(--panel)); color: color-mix(in srgb, var(--st-6) 80%, var(--ink)); }
.chip-cond { background: var(--panel); border: 1px dashed var(--step-line); color: var(--muted); font-weight: 500; }
.chip-actor { background: color-mix(in srgb, var(--back) 14%, var(--panel)); color: var(--back); }
.chip-when { background: none; color: var(--muted); font-weight: 500; padding-left: 2px; white-space: normal; }
.mstep-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mlegend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); margin: 6px 0 12px; }
.mlegend-item { display: inline-flex; align-items: center; gap: 4px; }

.mflow { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-width: 1000px; overflow: hidden; }
.mstep { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 6px;
  border-top: 4px solid var(--kc); --kc: var(--accent); }
.mstep-쓰기 { --kc: var(--st-6); }
.mstep-보기 { --kc: var(--accent); }
.mstep-명령 { --kc: var(--navy); }
/* 다음 카드로 이어지는 선: 번호 동그라미 높이에서 오른쪽으로 (줄이 바뀌면 오른쪽 끝에서 잘린다) */
.mstep:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 100%; width: 14px; height: 2px;
  background: var(--step-line); }
.mstep-head { display: flex; align-items: center; justify-content: space-between; }
.mstep-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  font-size: 13.5px; color: #fff; background: var(--kc); }
.mstep-icon { width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 13px;
  color: var(--kc); background: color-mix(in srgb, var(--kc) 12%, var(--panel)); }
.mstep-label { font-size: 15px; line-height: 1.35; }
.mstep-text { margin: 2px 0 0; color: var(--muted); }
.mstep-cmd { display: block; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; padding: 6px 8px; }
.mstep-go { margin-top: auto; font-size: 13px; font-weight: 600; }
.mnotes { max-width: 1000px; background: var(--table-head-inner); border: 1px dashed var(--step-line);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.mnotes ul { margin: 6px 0 0; padding-left: 18px; }

/* ── 동작 원리: 여섯 타일 흐름, 돌아오는 고리, 여덟 상태 띠 ── */
.hw-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; }
.hw-lead-item { font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 12px; border-radius: 999px; font-size: 13.5px; }
.hw-lead-arrow { color: var(--muted); }
.hw-pipe { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin: 14px 0 4px; }
.hw-tile { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: flex; flex-direction: column;
  gap: 4px; padding: 14px 14px 12px; border-radius: var(--radius); background: var(--panel); border: 1.5px solid var(--line);
  box-shadow: var(--shadow); min-height: 128px; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.hw-tile.hw-h { border-top: 4px solid var(--accent); }
.hw-tile.hw-m { border: 1.5px dashed var(--machine); border-top-width: 4px; background: var(--machine-soft); }
.hw-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.hw-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.hw-tile[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent), var(--shadow-up); }
.hw-tile.hw-m[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--machine), var(--shadow-up); }
/* 다음 타일로 가는 화살표 */
.hw-tile:not(:last-of-type)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; font-size: 14px; }
.hw-num { position: absolute; top: 10px; right: 12px; font-size: 12px; font-weight: 800; color: var(--muted); }
.hw-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 18px;
  color: #fff; background: linear-gradient(135deg, var(--navy), var(--accent)); flex-shrink: 0; }
.hw-m .hw-icon { background: linear-gradient(135deg, #a64608, var(--machine)); }
.hw-title { font-size: 15px; margin-top: 6px; line-height: 1.3; }
.hw-note { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; display: block; }
.hw-tag { font-size: 12.5px; color: var(--muted); line-height: 1.4; display: block; }
.hw-issues { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding-top: 4px; }
.hw-issues i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  border: 1px dashed var(--machine); color: var(--machine); background: var(--panel); }
/* 종결 뒤 → 법령 대조로 돌아오는 고리: 타일 아래 U자 선 */
.hw-loop { grid-row: 2; height: 30px; border: 2px dashed var(--st-8); border-top: 0; border-radius: 0 0 16px 16px;
  margin: -6px 20px 0; position: relative; }
.hw-loop span { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--bg);
  padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--st-8); white-space: nowrap; }
.hw-panel { max-width: 1100px; margin: 20px 0 6px; min-height: 40px; }
.hw-hint { padding: 10px 0; }
.hw-detail { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
.hw-detail.hw-m { border-left: 4px dashed var(--machine); }
.hw-detail p { margin: 8px 0; }
.hw-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-detail-head .hw-icon { width: 28px; height: 28px; font-size: 15px; }

.hw-lane-wrap { max-width: 1100px; overflow-x: auto; }
.hw-lane { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(96px, 1fr)); gap: 6px; }
.hw-state { display: flex; flex-direction: column; gap: 6px; position: relative; }
.hw-state-box { background: var(--st); color: #fff; font-weight: 700; font-size: 13px; text-align: center; padding: 9px 4px;
  border-radius: 8px; word-break: keep-all; box-shadow: 0 2px 6px color-mix(in srgb, var(--st) 35%, transparent); }
.hw-state:not(:last-child) .hw-state-box::after { content: "▸"; position: absolute; right: -7px; top: 9px; color: var(--muted); font-size: 12px; }
.hw-doc { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; padding: 0 2px; }
.hw-doc-name { font-weight: 700; color: var(--ink); }
.hw-doc-seat { color: var(--muted); }
.hw-returns { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-size: 12.5px; }
.hw-return { color: var(--back); }

.hw-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-width: 1100px; }
.hw-side-card { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.hw-side-card.hw-m { border-style: dashed; border-color: var(--machine); background: var(--machine-soft); }
.hw-side-card summary { list-style: none; display: flex; gap: 10px; align-items: center; cursor: pointer; color: var(--ink); font-size: 14px; }
.hw-side-card summary::-webkit-details-marker { display: none; }
.hw-side-card p { margin: 10px 0 6px; }

@media (max-width: 1000px) {
  .hw-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-tile::after, .hw-loop { display: none; }
}
@media (max-width: 600px) { .hw-pipe { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .hw-tile { transition: none; } .hw-tile:hover { transform: none; } }

/* ── SID-RID 관계: 두 집합, 예시 그림, 잇는 세 길, 번호의 생김새 ── 제기 파랑 · 연결 보라 · 병합 남색 */
.sr-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; max-width: 900px; margin: 6px 0 16px; }
.sr-set { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: var(--radius); color: #fff;
  box-shadow: var(--shadow-up); }
.sr-set span.small { opacity: .9; }
.sr-set b { font-size: 18px; }
.sr-set-sid { background: linear-gradient(135deg, #1f6f60, var(--g-service)); }
.sr-set-rid { background: linear-gradient(135deg, #8e3d1f, var(--g-rid)); text-align: right; align-items: flex-end; }
.sr-set-code { font-size: 28px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.sr-mm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 180px; }
.sr-mm > b { font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 14px; box-shadow: var(--shadow); }
.sr-mm-row { display: grid; grid-template-columns: auto auto auto; gap: 6px; align-items: center; justify-items: center; }
.sr-mm-row span { font-weight: 800; font-size: 16px; color: var(--accent-strong); }
.sr-mm-row i { font-style: normal; color: var(--muted); }
.sr-mm-row small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }

.sr-card { max-width: 1000px; }
.sr-card-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.sr-qdetails { margin-top: 10px; }
.sr-qdetails summary { font-weight: 600; color: var(--accent); }
.sr-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.sr-callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--table-head-inner);
  border: 1px solid var(--line); }
.sr-callout p { margin: 4px 0 0; color: var(--muted); }
.sr-callout-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--accent)); }

.sr-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1000px; }
.sr-way { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.sr-way b { font-size: 16px; }
.sr-way p { margin: 6px 0 0; color: var(--muted); }
.sr-way-who { font-size: 12px; font-weight: 600; color: var(--muted); }
.sr-way-line { height: 0; border-top: 3px solid var(--wc); width: 64px; margin-bottom: 8px; border-radius: 2px; }
.sr-way.sr-open { --wc: var(--accent); } .sr-way.sr-link { --wc: var(--back); } .sr-way.sr-merge { --wc: var(--ink); }
.sr-way.sr-open b { color: var(--accent); } .sr-way.sr-link b { color: var(--back); }

.sr-anatomy-wrap { max-width: 1000px; }
.sr-anatomy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 4px 0 12px; }
.sr-part { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sr-part code { font-size: 22px; font-weight: 800; padding: 6px 14px; border-radius: 10px; }
.sr-part small { font-size: 11.5px; color: var(--muted); }
.sr-p1 code { background: var(--accent-soft); color: var(--accent-strong); }
.sr-p2 code { background: color-mix(in srgb, var(--st-6) 16%, var(--panel)); color: color-mix(in srgb, var(--st-6) 80%, var(--ink)); }
.sr-p3 code { background: color-mix(in srgb, var(--back) 14%, var(--panel)); color: var(--back); }
.sr-dash { font-size: 22px; font-weight: 800; color: var(--muted); padding-top: 6px; }
.sr-prefixes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sr-prefix { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 4px; font-size: 13px; }
.sr-prefix code { font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.sr-prefix-none { border-style: dashed; color: var(--muted); }
.sr-rules { margin: 0; padding-left: 18px; color: var(--muted); }
.sr-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.sr-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; box-shadow: var(--shadow); font-size: 13px; color: var(--muted); }
.sr-stat b { font-size: 18px; color: var(--ink); margin-right: 6px; }
@media (max-width: 760px) { .sr-hero { grid-template-columns: 1fr; } .sr-set-rid { text-align: left; align-items: flex-start; } .sr-ways { grid-template-columns: 1fr; } }

/* SID-RID 그림: 상자를 누르면 이어진 것만 남는다 */
.sr-node { cursor: pointer; outline: none; transition: opacity 150ms ease; }
.sr-edge { transition: opacity 150ms ease; }
.sr-node:hover rect, .sr-node:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.sr-focusing .sr-node:not(.sr-on) { opacity: .18; }
.sr-focusing .sr-edge:not(.sr-on) { opacity: .06; }
.sr-focusing .sr-edge.sr-on { stroke-width: 3; }
.sr-node.sr-sel rect { stroke: var(--accent); stroke-width: 3; fill: var(--accent-soft); }
.sr-focus-panel { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--table-head-inner);
  border: 1px solid var(--line); min-height: 20px; }
.sr-focus-panel .sr-focus-clear { margin-left: 10px; padding: 2px 10px; font-size: 12px; }
.sr-focus-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.sr-focus-item .sr-key { margin-left: 6px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .sr-node, .sr-edge { transition: none; } }

/* ── 온톨로지: 이름 띠, 네 층 지도(누르면 설명), 진술의 생김새, 출처 탭, 시간 그림 ── */
.on-hero { max-width: 1100px; border-radius: 18px; padding: 22px 24px 18px; color: #fff; margin: 4px 0 8px;
  background: radial-gradient(circle at 85% 20%, rgba(95, 208, 196, .25), transparent 45%),
    linear-gradient(120deg, var(--navy-deep), var(--navy) 50%, #24507a); box-shadow: var(--shadow-up); }
.on-hero-words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.on-hero-word { border-left: 2px solid rgba(255, 255, 255, .18); padding-left: 12px; }
.on-hero-letter { font-size: 40px; line-height: 1; color: #5fd0c4; font-weight: 800; }
.on-hero-rest { font-size: 17px; font-weight: 700; }
.on-hero-ko { font-size: 12.5px; color: #b9c9de; margin-top: 2px; }
.on-hero-means { font-size: 12.5px; color: #dbe6f3; margin: 8px 0 0; line-height: 1.5; }
.on-hero-lead { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); color: #e6eef8; }
.on-hero-lead b { color: #fff; }

.on-map-card { max-width: 780px; }
.on-map { width: 100%; height: auto; display: block; }
.on-box { cursor: pointer; outline: none; transition: opacity 150ms ease; }
.on-box rect { stroke-width: 0; filter: drop-shadow(0 3px 6px rgba(16, 24, 40, .15)); }
.on-rule rect { fill: var(--g-rule); } .on-service rect { fill: var(--g-service); }
.on-issue rect { fill: var(--g-rid); } .on-runtime rect { fill: var(--g-observed); }
.on-box text { fill: #fff; }
.on-box-icon { font-size: 22px; font-weight: 700; }
.on-box-name { font-size: 15px; font-weight: 800; }
.on-box-src { font-size: 11.5px; opacity: .85; }
.on-box:hover rect, .on-box:focus-visible rect { stroke: var(--ink); stroke-width: 2.5; }
.on-box[aria-pressed="true"] rect { stroke: var(--ink); stroke-width: 3; }
.on-edge { stroke: var(--o-human); stroke-width: 2.2; }
.on-edge.on-machine { stroke: var(--o-machine); stroke-dasharray: 7 5; }
.on-edge-label { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.on-e { transition: opacity 150ms ease; }
.on-focusing .on-e:not(.on-on) { opacity: .15; }
.on-focusing .on-box[aria-pressed="false"] { opacity: .45; }
.on-layer-panel { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--table-head-inner); min-height: 22px; }
.on-lp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.on-lp-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--lc, var(--accent)); font-weight: 700; }
.on-lp-rule { --lc: var(--g-rule); } .on-lp-service { --lc: var(--g-service); }
.on-lp-issue { --lc: var(--g-rid); } .on-lp-runtime { --lc: var(--g-observed); }
.on-layer-panel[class*="on-lp-"] { border-left: 4px solid var(--lc); }
.on-lp-grid { display: grid; grid-template-columns: 60px 1fr; gap: 4px 10px; margin: 0; }
.on-lp-grid dt { color: var(--muted); font-weight: 600; }
.on-lp-grid dd { margin: 0; }

.on-anatomy { max-width: 900px; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.on-spo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.on-spo { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.on-spo small { color: var(--muted); font-weight: 600; font-size: 11px; }
.on-spo code { background: none; padding: 0; font-size: 15px; font-weight: 700; font-family: inherit; }
.on-s code { color: var(--g-service); } .on-p code { color: var(--accent-strong); } .on-o code { color: var(--g-rid); }
.on-spo-arrow { font-size: 20px; color: var(--muted); font-weight: 700; }
.on-meta-row { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 18px; border-left: 3px solid var(--accent-soft); margin-left: 20px; }
.on-meta { display: flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12.5px; }
.on-meta small { color: var(--ink); opacity: .75; }
.on-meta-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }

.on-examples { max-width: 900px; }
.on-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.on-tab { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
  font-weight: 600; box-shadow: none; }
.on-tab:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); box-shadow: none; }
.on-tab[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.on-tab-m { border-style: dashed; border-color: var(--machine); }
.on-tab-m[aria-selected="true"] { background: var(--machine); border-color: var(--machine); }
.on-ex-cap { margin: 10px 0 4px; font-weight: 600; color: var(--muted); }
.on-turtle { background: #0f1b2d; color: #d5e3f5; border-radius: 12px; padding: 14px 16px; font-size: 12.5px; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 0 0 10px; border-left: 4px solid var(--accent); }
.on-turtle-m { border-left: 4px dashed var(--machine); }
.on-prefix { background: var(--table-head-inner); color: var(--muted); border-left-color: var(--line); }

.on-srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.on-src { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.on-src-m { border: 1.5px dashed var(--machine); background: var(--machine-soft); }
.on-src-head { display: flex; align-items: center; gap: 8px; }
.on-src-head .chip { margin-left: auto; }
.on-src-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.on-src-m .on-src-icon { background: linear-gradient(135deg, #a64608, var(--machine)); }
.on-chip-m { background: var(--panel); color: var(--machine); border: 1px dashed var(--machine); }
.on-line { display: block; width: 100%; border-top: 3px solid var(--o-human); margin: 12px 0 2px; }
.on-line.on-machine { border-top: 3px dashed var(--o-machine); }
.on-src p { margin: 8px 0 0; color: var(--muted); }

.on-time { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.on-time-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.on-time-card p { margin: 6px 0 0; color: var(--muted); }
.on-tv { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.on-tv-axis { stroke: var(--line); stroke-width: 2; }
.on-tv-a { fill: var(--st-2); } .on-tv-b { fill: var(--st-6); }
.on-tv-label { fill: #fff; font-size: 9.5px; font-weight: 700; }
.on-tv-tick { fill: var(--muted); font-size: 9.5px; }
.on-tv-dot { fill: var(--past); } .on-tv-hot { fill: var(--accent); }
.on-tv-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }

.on-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin: 6px 0 10px; }
.on-flow-step { position: relative; display: flex; flex-direction: column; gap: 3px; background: var(--panel);
  border: 1.5px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.on-flow-step.on-machine-box { border: 1.5px dashed var(--machine); border-top-width: 4px; background: var(--machine-soft); }
.on-flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.on-flow-icon { font-size: 18px; color: var(--accent); }
.on-machine-box .on-flow-icon { color: var(--machine); }
.on-after { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 1100px; }
.on-mini-lane { display: flex; flex-wrap: wrap; gap: 3px; }
.on-mini-lane span { background: var(--st); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }

.on-nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1100px; }
.on-not { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; }
.on-not-x { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  font-weight: 800; color: var(--back); background: color-mix(in srgb, var(--back) 12%, var(--panel)); }
.on-more { display: flex; gap: 16px; margin: 16px 0; font-weight: 600; }

@media (max-width: 1000px) {
  .on-hero-words, .on-srcs, .on-time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-flow { grid-template-columns: 1fr 1fr; } .on-flow-step::after { display: none; }
}
@media (max-width: 600px) { .on-hero-words, .on-srcs, .on-time, .on-nots { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .on-box, .on-e { transition: none; } }

/* ── 누가 무엇을 쓰나: 역할 × 상태 그림 ── 문서는 상태 색, 되돌림은 보라, 기록은 점선 */
.gd-wrap { max-width: 1180px; overflow-x: auto; padding: 14px; }
.gd-grid { display: grid; grid-template-columns: 150px repeat(var(--cols), minmax(104px, 1fr)); gap: 4px; min-width: 980px; }
.gd-corner { display: flex; align-items: flex-end; padding: 0 0 6px 4px; }
.gd-state { background: var(--st); color: #fff; font-weight: 700; font-size: 12.5px; text-align: center; padding: 8px 4px;
  border-radius: 8px; word-break: keep-all; box-shadow: 0 2px 6px color-mix(in srgb, var(--st) 30%, transparent); }
.gd-role { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; background: var(--table-head-inner); font-weight: 700; font-size: 13px; color: var(--ink);
  transition: background-color 120ms ease, opacity 120ms ease; }
.gd-role:hover { background: var(--accent-soft); }
.gd-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gd-role[aria-pressed="true"] { background: var(--accent); color: #fff; }
.gd-role[aria-pressed="true"] .gd-role-icon { background: #fff; color: var(--accent); }
.gd-role-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: inline-grid; place-items: center;
  font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--accent)); }
.gd-cell { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 8px; min-height: 44px;
  background: color-mix(in srgb, var(--table-head-inner) 60%, transparent); transition: opacity 120ms ease; }
.gd-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; line-height: 1.3; }
.gd-chip b { font-size: 12.5px; word-break: keep-all; }
.gd-chip span { opacity: .85; }
.gd-doc { background: color-mix(in srgb, var(--st) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
  color: color-mix(in srgb, var(--st) 70%, var(--ink)); }
.gd-back { background: color-mix(in srgb, var(--back) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--back) 45%, transparent); color: var(--back); }
.gd-rec { background: var(--panel); border: 1px dashed var(--step-line); color: var(--muted); }
.gd-rec b { color: var(--ink); }
.gd-focusing .gd-cell:not(.gd-on), .gd-focusing .gd-role:not(.gd-on) { opacity: .25; }
.gd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.gd-mini { display: inline-flex; flex-direction: row; padding: 2px 10px; font-weight: 600; }

.gd-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 1180px; }
.gd-rec-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gd-rec-head { display: flex; align-items: center; gap: 8px; }
.gd-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-width: 1180px; }
.gd-account { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.gd-account code { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .gd-role, .gd-cell { transition: none; } }

/* 머리띠의 로그인·로그아웃 — 눈에 띄는 알약 단추 */
.top .who .auth-btn, .top .auth-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 13px;
  font-weight: 700; background: #fff; color: var(--navy); border: 1px solid #fff; box-shadow: none; text-decoration: none; }
.top .who .auth-btn:hover, .top .auth-btn:hover { background: #e3f4f2; border-color: #e3f4f2; color: var(--navy); box-shadow: none; text-decoration: none; }

.top .auth-state { font-size: 12.5px; color: #c9d6e8; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* ── 질문하기: 머리 띠, 차례, 쓰는 칸, 말풍선, 단계 타임라인, 기계 제안(점선), 보완 카드, 후보의 세 갈래 ── */
.ik-hero { max-width: 1100px; border-radius: 18px; padding: 22px 24px 30px; color: #fff; margin: 4px 0 0;
  background: radial-gradient(circle at 88% 15%, rgba(95, 208, 196, .28), transparent 45%),
    linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #24507a); box-shadow: var(--shadow-up); }
.ik-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #5fd0c4; }
.ik-title { margin: 4px 0 6px; font-size: 24px; color: #fff; }
.ik-lead { color: #c9d7ea; font-size: 13.5px; max-width: 760px; }
.ik-hero .ik-stepper { margin: 16px 0 0; }
.ik-hero .ik-stepper li { color: #b9c9de; }
.ik-hero .ik-stepper li:not(:last-child)::after { background: rgba(255, 255, 255, .2); }
.ik-hero .ik-dot { background: rgba(255, 255, 255, .12); color: #dbe6f3; border-color: rgba(255, 255, 255, .3); }
.ik-hero .now .ik-dot { background: #5fd0c4; border-color: #5fd0c4; color: var(--navy-deep); box-shadow: 0 0 0 4px rgba(95, 208, 196, .25); }
.ik-hero .now b { color: #fff; }

.ik-stepper { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 8px 0 16px; max-width: 1100px; }
.ik-stepper li { position: relative; display: flex; align-items: center; gap: 10px; color: var(--muted); padding-right: 12px; }
.ik-stepper li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 16px; }
.ik-stepper li.done:not(:last-child)::after { background: var(--accent); }
.ik-dot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  border: 2px solid var(--line); background: var(--panel); color: var(--muted); }
.ik-stepper .done .ik-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ik-stepper .now .ik-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ik-st-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.ik-st-text b { font-size: 13px; }
.ik-st-text small { font-size: 11px; opacity: .8; }
.ik-stepper .now b { color: var(--accent-strong); }

.ik-composer { max-width: 1060px; margin: -16px 20px 0; position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-up); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ik-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.ik-examples .ik-pill { font-size: 12px; font-weight: 500; padding: 2px 10px; line-height: 1.6; border-radius: 999px; color: var(--muted); }
.ik-examples .ik-pill:hover { color: var(--accent-strong); }
.ik-text-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: -4px; }
.ik-text-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ik-text { width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.6; padding: 12px 14px; border-radius: 12px; resize: vertical;
  border: 1.5px solid color-mix(in srgb, var(--muted) 45%, var(--line)); background: var(--panel); min-height: 120px; font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(16, 24, 40, .08); }
.ik-text:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ik-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ik-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ik-mic { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ik-mic .listening { background: var(--machine); border-color: var(--machine); color: #fff; }
.ik-privacy { font-size: 12px; color: var(--muted); background: var(--table-head-inner); padding: 4px 10px; border-radius: 999px; }
.ik-privacy-out { color: var(--machine); background: var(--machine-soft); border: 1px dashed var(--machine); }
.ik-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ik-who-label { font-weight: 700; color: var(--muted); margin-right: 4px; }
.ik-who .ik-input { width: auto; flex: 1 1 140px; }
.ik-segs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--table-head-inner); }
.ik-seg { background: transparent; border: 0; color: var(--muted); border-radius: 999px; padding: 5px 14px; box-shadow: none; font-weight: 600; }
.ik-seg:hover { background: var(--panel); color: var(--ink); box-shadow: none; }
.ik-seg[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ik-go { padding: 9px 22px; border-radius: 999px; font-size: 15px; font-weight: 800; }

.ik-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-pill { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  font-weight: 600; font-size: 13px; box-shadow: none; }
.ik-pill:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); box-shadow: none; }
.ik-pill[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.ik-check { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.ik-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.ik-input { width: 100%; box-sizing: border-box; }
textarea.ik-input { min-height: 0; font-family: inherit; font-size: 14px; }
.ik-stack { display: flex; flex-direction: column; gap: 6px; }
.ik-flow-row { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 6px; align-items: center; }
.ik-flow-row span { color: var(--muted); font-weight: 700; }
.ik-add { margin-top: 6px; }
.ik-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ik-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-width: 1100px; }
.ik-hist { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.ik-hist:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.ik-hist-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ik-hist-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.ik-empty { padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); }

.ik-src { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
  background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap; vertical-align: 1px; }
.ik-src-m { background: var(--machine-soft); color: var(--machine); border: 1px dashed var(--machine); }

.ik-quote { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; max-width: 1100px; }
.ik-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.ik-quote figcaption { color: var(--muted); margin-bottom: 4px; }
.ik-quote figcaption b { color: var(--ink); }
.ik-verbatim { margin-left: 8px; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.ik-quote blockquote { margin: 0; padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 15px; line-height: 1.6; }
.ik-saved { display: flex; gap: 12px; align-items: center; max-width: 1100px; padding: 12px 16px; border-radius: 12px; margin: 10px 0;
  background: color-mix(in srgb, var(--st-8) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--st-8) 45%, transparent); }
.ik-saved-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--st-8); font-weight: 800; }

.ik-section { max-width: 1100px; margin-top: 8px; }
.ik-h { flex-wrap: wrap; }
.ik-h::before { display: none; }
.ik-h-icon { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.ik-h-sub { font-size: 12px; font-weight: 500; color: var(--muted); }

.ik-draft { display: flex; flex-direction: column; gap: 10px; }
.ik-svc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 16px; }
.ik-svc-label { color: var(--muted); font-weight: 700; font-size: 12px; }
.ik-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ik-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.ik-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -10px; width: 2px; background: var(--line); }
.ik-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--navy), var(--accent)); box-shadow: 0 0 0 4px var(--bg); }
.ik-step-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.ik-step-card.ik-m { border: 1.5px dashed var(--machine); }
.ik-step-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 15px; }
.ik-fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.ik-field { display: contents; }
.ik-field dt { color: var(--muted); font-weight: 600; }
.ik-field dd { margin: 0; }
.ik-field.ik-m dd > span:first-child { color: var(--machine); border-bottom: 1.5px dashed var(--machine); }
.ik-said { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }
.ik-redo { margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); max-width: 1100px; }
.ik-redo summary { cursor: pointer; font-weight: 600; color: var(--accent-strong); }
.ik-redo[open] summary { margin-bottom: 8px; }

.ik-confirms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ik-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  border: 1.5px dashed var(--machine); background: var(--machine-soft); }
.ik-confirm-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.ik-confirm-label { color: var(--machine); font-weight: 700; }

.ik-asks { display: flex; flex-direction: column; gap: 10px; }
.ik-ask { padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); }
.ik-ask-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ik-ask-n { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--accent-strong); }
.ik-ask-q { display: block; font-size: 15px; }
.ik-why { color: var(--muted); margin: 2px 0 10px; }
.ik-ask-input { max-width: 720px; }

.ik-save { position: sticky; bottom: 12px; z-index: 5; max-width: 1100px; margin: 18px 0 8px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; justify-content: space-between; padding: 14px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-up); }
.ik-save.ik-ready { border-color: var(--accent); background: var(--accent-soft); }
.ik-save-title { display: block; font-size: 15px; }
.ik-save > div:first-child { flex: 1 1 260px; }
.ik-save > div:empty { display: none; }
.ik-save-btn { padding: 10px 22px; border-radius: 999px; font-weight: 800; font-size: 15px; }
.ik-save-btn[disabled] { opacity: .45; cursor: not-allowed; }

.ik-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); margin: -2px 0 10px; }
.ik-legend b { color: var(--ink); }
.ik-warn { padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--machine); background: var(--machine-soft); margin-bottom: 10px; }
.ik-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ik-tally-done { background: color-mix(in srgb, var(--st-8) 12%, var(--panel)); border-color: color-mix(in srgb, var(--st-8) 45%, transparent); }
.ik-chip { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--table-head-inner); }
.ik-step-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ik-step-title { margin: 6px 0 0; font-size: 15px; }
.ik-cand { background: var(--panel); border: 1.5px dashed var(--machine); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
.ik-cand-done { border: 1px solid var(--line); }
.ik-cand-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 15px; }
.ik-law { color: var(--accent-strong); font-weight: 700; }
.ik-terms { margin: 6px 0; }
.ik-term { display: inline-block; margin: 0 3px; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.ik-article summary { cursor: pointer; color: var(--accent-strong); }
.ik-article blockquote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--table-head-inner); border-radius: 0 8px 8px 0; }
.ik-choices { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.ik-choice { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--table-head-inner); }
.ik-choice > button { align-self: flex-start; margin-top: auto; }
.ik-choice-head { display: flex; align-items: center; gap: 6px; }
.ik-choice-head span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--cc); }
.ik-c-open { --cc: var(--accent); border-top: 3px solid var(--accent); }
.ik-c-link { --cc: var(--st-6); border-top: 3px solid var(--st-6); }
.ik-c-skip { --cc: var(--muted); border-top: 3px solid var(--muted); }
.ik-done { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.ik-done-open { background: var(--accent-soft); }
.ik-done-link { background: color-mix(in srgb, var(--st-6) 14%, var(--panel)); }
.ik-done-skip { background: var(--table-head-inner); }

@media (max-width: 900px) {
  .ik-choices { grid-template-columns: 1fr; }
  .ik-stepper { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .ik-stepper li::after { display: none; }
  .ik-composer { margin: -16px 8px 0; }
  .ik-flow-row { grid-template-columns: 1fr 1fr; } .ik-flow-row span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ik-hist { transition: none; } }

/* ── 동작 원리 하위 화면: 알약 이동줄, 엔진이 내는 셋, 시간 구간 띠, 실선과 점선 ── */
.hx-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.hx-sub { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); text-decoration: none; }
.hx-sub:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.hx-sub[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.hx-lead { max-width: 1100px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong);
  border-left: 4px solid var(--accent); margin-bottom: 14px; }

.hx-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; }
.hx-out { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.hx-out-m { flex: 1; padding: 14px 16px; border-radius: 14px 14px 0 0; border: 1.5px dashed var(--machine); background: var(--machine-soft);
  display: flex; flex-direction: column; gap: 4px; }
.hx-out-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; margin-bottom: 4px; }
.hx-out-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 17px;
  background: linear-gradient(135deg, #a64608, var(--machine)); }
.hx-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--machine); margin-top: 6px; }
.hx-example { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px dashed var(--machine); }
.hx-out-arrow { text-align: center; color: var(--muted); font-size: 12px; line-height: 1; padding: 4px 0; background: var(--bg); }
.hx-out-h { padding: 12px 16px; border-radius: 0 0 14px 14px; background: var(--panel); border: 1.5px solid var(--accent);
  border-top-width: 4px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: var(--shadow); }

.hx-nevers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1100px; }
.hx-never { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.hx-x { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: var(--back); background: color-mix(in srgb, var(--back) 12%, var(--panel)); }
.hx-never .small { color: var(--accent-strong); margin-top: 4px; }

.hx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.hx-point { position: relative; padding: 12px 14px 12px 50px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hx-point-n { position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--accent)); }
.hx-point .small { color: var(--muted); margin-top: 4px; }
.hx-chart { max-width: 1100px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.hx-row { display: grid; grid-template-columns: 150px 1fr 140px; gap: 14px; align-items: center; }
.hx-name { display: flex; flex-direction: column; gap: 2px; }
.hx-name code { align-self: flex-start; font-size: 11px; }
.hx-track { position: relative; height: 26px; border-radius: 6px; background: var(--table-head-inner); }
.hx-band { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; background: color-mix(in srgb, var(--st-6) 55%, transparent); }
.hx-near { position: absolute; top: 5px; bottom: 5px; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg, var(--machine) 0 4px, color-mix(in srgb, var(--machine) 45%, transparent) 4px 8px); }
.hx-dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--navy); border: 3px solid var(--panel); box-shadow: 0 0 0 2px var(--navy); }
.hx-dot-hot { background: var(--machine); box-shadow: 0 0 0 2px var(--machine), 0 0 0 7px color-mix(in srgb, var(--machine) 25%, transparent); }
.hx-axis-row .hx-track { background: none; height: 28px; }
.hx-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hx-tick::before { content: ""; position: absolute; left: 50%; top: 18px; width: 1.5px; height: 10px; background: var(--muted); }
.hx-tick-near { color: var(--machine); }
.hx-tick-near::before { background: var(--machine); }
.hx-issue { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--machine); background: var(--machine-soft); border: 1px dashed var(--machine); }
.hx-issue.hx-none { color: var(--muted); background: var(--table-head-inner); border: 1px solid var(--line); }
.hx-cap { padding-top: 8px; border-top: 1px dashed var(--line); }
.hx-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1100px; margin-top: 12px; }
.hx-case { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.hx-case .small { color: var(--muted); margin-top: 6px; }

.hx-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.hx-src { padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px; }
.hx-src-m { border-style: dashed; border-color: var(--machine); background: var(--machine-soft); }
.hx-src-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.hx-src-head .how-actor { margin-left: auto; }
.hx-src-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.hx-src-m .hx-src-icon { background: linear-gradient(135deg, #a64608, var(--machine)); }
.hx-edge { display: flex; align-items: center; gap: 0; }
.hx-node { flex-shrink: 0; max-width: 40%; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: var(--panel); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.hx-line { position: relative; flex: 1; min-width: 60px; height: 0; border-top: 2.5px solid var(--o-human); margin: 0 2px; }
.hx-line::after { content: ""; position: absolute; right: -2px; top: -6.5px; border: 5px solid transparent; border-left: 8px solid var(--o-human); }
.hx-line-m { border-top: 2.5px dashed var(--o-machine); }
.hx-line-m::after { border-left-color: var(--o-machine); }
.hx-line i { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; white-space: nowrap;
  color: var(--muted); background: inherit; }

.hx-promote { max-width: 1100px; display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; padding: 16px 18px; }
.hx-step { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--accent); background: var(--accent-soft); }
.hx-step-m { border-style: dashed; border-color: var(--machine); background: var(--machine-soft); }
.hx-step-rec { border-color: var(--st-8); background: color-mix(in srgb, var(--st-8) 12%, var(--panel)); }
.hx-arrow { display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.hx-arrow-x span { font-size: 12px; color: var(--back); padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--back) 10%, var(--panel)); }

@media (max-width: 1000px) {
  .hx-outs, .hx-srcs { grid-template-columns: 1fr; }
  .hx-nevers, .hx-cases { grid-template-columns: 1fr 1fr; }
  .hx-points { grid-template-columns: 1fr; }
  .hx-row { grid-template-columns: 100px 1fr; } .hx-row > .hx-issue { grid-column: 2; }
}

/* ── 동작 원리 하위 화면 (2): 분류명 흐름, 연결·병합, 되돌림 호 ── */
.hx-flow { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1100px; }
.hx-flow-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px;
  border-radius: 14px; background: var(--panel); border: 1.5px solid var(--accent); border-top-width: 4px; box-shadow: var(--shadow); }
.hx-flow-step.hx-fm { border-style: dashed; border-color: var(--machine); background: var(--machine-soft); }
.hx-flow-step.hx-fm .hx-src-icon { background: linear-gradient(135deg, #a64608, var(--machine)); }
.hx-flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 800; }
.hx-flow-step .small { color: var(--muted); }
.hx-flow-n { position: absolute; top: 10px; right: 12px; font-size: 12px; font-weight: 800; color: var(--muted); }
.hx-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1100px; }
.hx-verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px;
  border: 1.5px dashed var(--machine); background: var(--panel); }
.hx-verdict b { font-size: 16px; color: var(--machine); }
.hx-verdict code { margin-left: auto; }
.hx-verdict-q { background: var(--machine-soft); }
.hx-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; max-width: 1100px; }
.hx-rule { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); }
.hx-rule .small { color: var(--muted); margin-top: 4px; }
.hx-method { margin-top: 12px; }

.hx-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1100px; }
.hx-way { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel);
  border: 1.5px solid var(--accent); border-top-width: 4px; box-shadow: var(--shadow); }
.hx-label-h { color: var(--accent-strong); }
.hx-machine-note { margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--machine); background: var(--machine-soft); }
.hx-rank { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hx-rank li { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.hx-rank li:not(:last-child)::after { content: ">"; position: absolute; right: -14px; color: var(--muted); }
.hx-rank li { margin-right: 10px; }
.hx-rank .hx-flow-n { position: static; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.hx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1100px; }
.hx-xlist { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hx-xlist li { display: flex; gap: 8px; align-items: center; }
.hx-xlist .hx-x { width: 20px; height: 20px; font-size: 10px; }

.hx-backs { max-width: 1100px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.hx-mini-lane { list-style: none; padding: 0; margin: 0 0 4px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.hx-mini-lane li { background: var(--st); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 7px 2px; border-radius: 8px; word-break: keep-all; }
.hx-back-row { display: flex; flex-direction: column; gap: 2px; }
.hx-back-track { position: relative; height: 18px; }
.hx-back-arc { position: absolute; top: 0; height: 16px; left: calc((var(--a) + .5) * 12.5%); width: calc((var(--b) - var(--a)) * 12.5%);
  border: 2px dashed var(--back); border-top: 0; border-radius: 0 0 14px 14px; }
.hx-back-arc::before { content: "▲"; position: absolute; left: -7px; top: -6px; font-size: 10px; color: var(--back); }
.hx-back-label { padding-left: calc((var(--a) + .5) * 12.5% - 6px); color: var(--back); }
.hx-back-label b { color: var(--back); }
.hx-nolist { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-no { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--back); }
.hx-no .hx-x { width: 20px; height: 20px; font-size: 10px; }

@media (max-width: 1000px) {
  .hx-flow, .hx-ways, .hx-split, .hx-verdicts { grid-template-columns: 1fr; }
  .hx-flow-step::after { display: none; }
}

/* ── 머리 메뉴 화면 공통: 남색 머리 띠, 섹션 제목, 카드 목록, 표 상자 (hero.js) ── */
.pg-hero { max-width: 1100px; display: flex; gap: 20px; align-items: stretch; justify-content: space-between; flex-wrap: wrap;
  border-radius: 18px; padding: 22px 24px; color: #fff; margin: 4px 0 18px;
  background: radial-gradient(circle at 88% 15%, rgba(95, 208, 196, .28), transparent 45%),
    linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #24507a); box-shadow: var(--shadow-up); }
.pg-hero-main { flex: 1 1 480px; min-width: 0; }
.pg-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #5fd0c4; }
.pg-title { margin: 4px 0 6px; font-size: 24px; line-height: 1.3; color: #fff; word-break: keep-all; }
.pg-title::before { display: none; }
.pg-lead { color: #c9d7ea; font-size: 13.5px; max-width: 760px; line-height: 1.6; }
.pg-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pg-note { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #dff6f2;
  background: rgba(95, 208, 196, .14); border: 1px solid rgba(95, 208, 196, .35); }
.pg-note-no { color: #f3d9d9; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, .45); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pg-cta { display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none;
  background: #5fd0c4; color: var(--navy-deep); box-shadow: 0 4px 14px rgba(95, 208, 196, .3); }
.pg-cta:hover { color: var(--navy-deep); text-decoration: none; filter: brightness(1.05); }
.pg-cta-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); box-shadow: none; }
.pg-cta-ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.pg-facts { display: flex; gap: 10px; margin: 0; align-self: center; flex-wrap: wrap; }
.pg-fact { min-width: 92px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14); text-align: center; }
.pg-fact dd { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; color: #fff; }
.pg-fact dt { font-size: 11.5px; color: #b9c9de; margin-top: 2px; white-space: nowrap; }

.pg-h { flex-wrap: wrap; }
.pg-h::before { display: none; }
.pg-h-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: inline-grid; place-items: center; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.pg-count { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.pg-h-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
.pg-sub { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0 6px; }
.pg-empty { max-width: 1100px; padding: 16px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; background: var(--panel); }
.pg-table { max-width: 1100px; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.pg-table table { margin: 0; }
.pg-group { max-width: 1100px; }
.pg-form { max-width: 1100px; }

.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 1100px; }
.pg-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.pg-item:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); text-decoration: none; }
.pg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-id { font-size: 12px; font-weight: 800; color: var(--accent-strong); letter-spacing: .02em; }
.pg-item-title { font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-item-stats { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.pg-item-stats b { color: var(--ink); font-size: 16px; }
.pg-state { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: var(--st, var(--muted)); }

.pg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-width: 1100px; }
.pg-pick { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-weight: 600; }
.pg-pick:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.pg-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.pg-go { margin-left: auto; color: var(--muted); }

.pg-toolbar { max-width: 1100px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-toolbar-label { font-weight: 700; font-size: 13px; color: var(--muted); margin-right: 4px; }
.pg-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; }
.pg-rule { max-width: 1100px; border-left: 4px solid var(--accent); }
.pg-notice { max-width: 1100px; border-left: 4px solid var(--st-6); }
.pg-shift { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* 쟁점 카드 (내 쟁점·내 규칙) */
.qcard { max-width: 1100px; transition: border-color 120ms ease; }
.qcard:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.qcard-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qcard-rid { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.qcard-q { flex: 1 1 300px; font-size: 15px; line-height: 1.45; }
.qcard .pg-state { align-self: center; }
.qcard-meta { color: var(--muted); gap: 14px; }
.qcard-meta b { color: var(--ink); }

/* 탭 (런타임 후보) */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--table-head-inner); border: 1px solid var(--line); margin: 0 0 12px; }
.tabs .tab { padding: 5px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--muted); text-decoration: none; border: 0; }
.tabs .tab:hover { color: var(--ink); text-decoration: none; }
.tabs .tab.on { background: var(--accent); color: #fff; }

@media (max-width: 700px) {
  .pg-facts { width: 100%; } .pg-fact { flex: 1 1 80px; }
  .pg-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pg-item, .qcard { transition: none; } }

/* ── 쟁점 제기: 초안 쓰는 칸 + 접수 검토 세 조건 미리 보기 ── */
.nq-composer { max-width: 1100px; margin: 0; }
.nq-from { max-width: 1100px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); border-left: 4px solid var(--accent); font-size: 13px; }
.nq-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nq-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--table-head-inner); }
.nq-tip b { font-size: 13px; }
.nq-tip-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--navy), var(--accent)); }
.nq-domain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 800px) { .nq-tips { grid-template-columns: 1fr; } }

/* ── 왼쪽 보조 메뉴 (다시 그림): 유리 판 위의 아이콘 단추, 펼침 꺾쇠, 하위 항목은 점이 달린 줄 ── */
.side { gap: 3px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-up); backdrop-filter: blur(8px); }
@media (min-width: 1100px) {
  .side { width: 172px; left: 16px; max-height: calc(100vh - var(--top-h, 64px) - 36px); overflow-y: auto; scrollbar-width: thin; }
  main { margin-left: max(212px, calc((100% - 1180px) / 2)); }
}
.side-head { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--muted); padding: 2px 8px 6px; text-transform: uppercase; }

.side > a, .side > .manual-toggle { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 6px 8px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: var(--nav-ink);
  font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease; }
.side > a::before, .side > .manual-toggle::before { content: attr(data-icon); width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; }
.side > a:hover, .side > .manual-toggle:hover { background: var(--nav-hover); color: var(--ink); transform: translateX(2px); text-decoration: none; box-shadow: none; }
.side > a:hover::before, .side > .manual-toggle:hover::before { background: linear-gradient(135deg, var(--navy), var(--accent)); color: #fff; }
.side > a:focus-visible, .side > .manual-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.side > a[aria-current="page"] { color: #fff; background: linear-gradient(120deg, var(--navy), var(--accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.side > a[aria-current="page"]::before { background: rgba(255, 255, 255, .18); color: #fff; }

/* 펼침 단추: 오른쪽 꺾쇠가 돌아간다 */
.side > .manual-toggle::after { content: "›"; margin-left: auto; font-size: 17px; line-height: 1; color: var(--muted); transition: transform 180ms ease; }
.side > .manual-toggle[aria-expanded="true"] { color: var(--ink); background: var(--nav-hover); }
.side > .manual-toggle[aria-expanded="true"]::before { background: linear-gradient(135deg, var(--navy), var(--accent)); color: #fff; }
.side > .manual-toggle[aria-expanded="true"]::after { content: "›"; transform: rotate(90deg); color: var(--accent-strong); }

/* 하위 항목: 왼쪽 줄 위의 점. 고른 것은 점이 차고 글자가 짙어진다 */
.side .side-sub { position: relative; gap: 1px; margin: 2px 0 6px 20px; padding: 2px 0 2px 12px; border-left: 0; }
.side .side-sub::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.side .side-sub:not([hidden]) { animation: side-in 200ms ease; }
@keyframes side-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.side .side-sub a { position: relative; display: block; padding: 4px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); background: none; border: 0; box-shadow: none; line-height: 1.35; transition: background-color 120ms ease, color 120ms ease; }
.side .side-sub a::before { content: ""; position: absolute; left: -15px; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translateY(-50%); background: var(--panel); border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-sizing: border-box; }
.side .side-sub a:hover { color: var(--ink); background: var(--nav-hover); text-decoration: none; }
.side .side-sub a:hover::before { border-color: var(--accent); }
.side .side-sub a[aria-current="page"] { color: var(--accent-strong); font-weight: 700; background: var(--accent-soft); }
.side .side-sub a[aria-current="page"]::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.side .side-sub a.mine::after { content: "내 역할"; margin-left: 6px; font-size: 9.5px; font-weight: 700; padding: 0 6px; border-radius: 999px;
  color: #fff; background: var(--accent); vertical-align: 1px; }

@media (max-width: 1099px) {
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 10px 16px 0; padding: 8px; }
  .side-head { display: none; }
  .side > a, .side > .manual-toggle { width: auto; }
  .side .side-sub { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 4px 0 4px 12px; }
  .side .side-sub a::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side > a, .side > .manual-toggle, .side > .manual-toggle::after, .side .side-sub a { transition: none; }
  .side .side-sub:not([hidden]) { animation: none; }
}

/* ── 총괄의 서비스 검토 (결정 D66) ───────────────────────── */
.rv-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.rv-wait { border-color: var(--accent); }
.rv-tag.rv-wait { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.rv-tag.rv-done { background: var(--panel); color: var(--ink); }
.rv-tag.rv-auto { background: transparent; color: var(--muted); border-style: dashed; }  /* 기계가 정한 대로 — 점선 */
.rv-notice { display: grid; gap: 4px; }
.rv-n-wait { border-left: 4px solid var(--accent); }
.rv-n-auto { border-left: 4px dashed var(--muted); }
.rv-prop { margin: 6px 0; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--muted); }
.rv-prop .tag { margin-left: 6px; }
.rv-list { display: grid; gap: 10px; max-width: 1100px; }
.rv-item summary { cursor: pointer; }
.rv-before { margin-top: 6px; color: var(--muted); }
.rv-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.rv-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(15, 30, 55, .45); padding: 16px; }
.rv-popup-box { background: var(--panel); color: var(--ink); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); padding: 20px 22px; width: min(560px, 100%); max-height: 80vh; overflow: auto; }
.rv-popup-box h2 { margin: 0 0 6px; font-size: 18px; }
.rv-popup-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.rv-popup-list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 2px; }
.rv-go { font-weight: 600; }
/* 총괄의 '지금 할 일' — 팝업과 총괄 홈 맨 위 (결정 D135). 글씨를 키우고 할 일을 한 줄로 말한다 */
.rv-popup-box.todo-box { width: min(720px, 100%); font-size: 16px; }
.todo-box h2, .todo-title { font-size: 22px; margin: 0 0 10px; }
.todo-card { border: 2px solid var(--accent); background: var(--accent-soft); font-size: 16px; }
.todo-card.todo-none { border-color: var(--line); background: var(--panel); }
.todo-board { display: grid; gap: 16px; }
.todo-sec h3 { font-size: 18px; margin: 0 0 4px; }
.todo-step { display: inline-block; min-width: 1.6em; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; margin-right: 4px; }
.todo-do { margin: 4px 0 8px; font-size: 15px; line-height: 1.5; }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.todo-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: grid; gap: 4px; }
.todo-item.todo-rid { border-left: 6px solid var(--accent); }
.todo-num { font-size: 20px; }
.todo-main { font-size: 17px; }
.todo-line, .todo-when { font-size: 15px; }
.todo-btn { justify-self: start; margin-top: 4px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.todo-btn:hover, .todo-btn:focus-visible { filter: brightness(1.1); }
.rv-popup-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
@media (max-width: 720px) { .ik-stepper { grid-template-columns: 1fr; gap: 6px; } }

/* ── 법령 받기 (결정 D67) ───────────────────────────────── */
.st-laws, .st-items { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 3px; }
.st-ok { color: var(--ink); }
.st-todo { color: var(--muted); }
.st-item.st-bad { color: var(--ink); }
.st-job.st-running { border-left: 4px solid var(--accent); }
.st-domain { display: grid; gap: 6px; }
.pg-list { display: grid; gap: 10px; max-width: 1100px; }

.rv-sug { margin-top: 6px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--accent); background: var(--accent-soft); display: grid; gap: 2px; }
.rv-newdom { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

.docform .field[hidden] { display: none; }

/* 총괄이 고치는 곳(분류명·서비스 번호)을 눈에 띄는 단추로 — 접힌 작은 글자로는 못 찾는다는 말이 있었다 */
summary.fix-btn { display: inline-block; cursor: pointer; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--nav-line, var(--line, #b8c4d6));
  background: var(--nav-bg, transparent); color: var(--ink); font-weight: 600; margin-top: 6px; }
summary.fix-btn:hover { border-color: var(--accent, #2b5fd9); }

/* 분류명(영문 코드) 위에 마우스를 올리면 한글 설명이 뜬다 — 점선 밑줄과 물음표 커서로 알린다 (결정 D81) */
.has-tip { cursor: help; border-bottom: 1px dotted currentColor; text-decoration: none; }

/* SID 확정 (결정 D83): 어느 화면에서나 같은 한 줄 */
.sid-line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; margin: 8px 0;
  border: 1px solid var(--line); background: var(--panel); }
.sid-line .sid-mark { font-weight: 700; font-size: 18px; line-height: 1.2; }
.sid-ok { border-left: 5px solid var(--accent); background: var(--accent-soft); }
.sid-ok .sid-mark { color: var(--accent-strong); }
.sid-wait { border-left: 5px solid var(--machine); background: var(--machine-soft); }
.sid-auto { border-left: 5px dashed var(--muted); }  /* 기계 제안대로 확정 — 점선 */
.sid-handoff { margin: 12px 0; padding: 12px 16px; border-radius: 10px; border: 2px solid var(--accent); background: var(--panel); }
.sid-proposal { border: 1px dashed var(--machine); border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; }
.sid-next a { font-weight: 600; }
.sid-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sid-chip { padding: 4px 10px; border-radius: 8px; margin: 6px 0; border: 1px solid var(--line); }

/* SID → RID (결정 D84): ③-1 검토할 법령 · ③-2 법령 검토 · ③-4 RID별 쟁점 책임자 */
.sid-panel h3 { margin: 0 0 8px; font-size: 16px; }
.sid-block { border-left: 5px solid var(--machine); }
.sid-why { background: var(--machine-soft); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.sid-tools { margin-top: 10px; display: grid; gap: 6px; }
.sid-steps { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 2px; }
.sid-review, .sid-rids { width: 100%; border-collapse: collapse; margin: 6px 0; }
.sid-review th, .sid-review td, .sid-rids th, .sid-rids td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sid-review th, .sid-rids th { color: var(--muted); font-weight: 600; }
@media (max-width: 720px) { .sid-review, .sid-rids { display: block; overflow-x: auto; } }

/* RID 준비 (기계, 결정 D85): 기계가 찾은 법령은 점선 */
.sid-found { border: 1px dashed var(--machine); border-radius: 4px; padding: 0 4px; margin: 0 2px; }
.sid-prep { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.sid-prep li.done { color: var(--st-8); }
.sid-prep li.now { font-weight: 600; }
.ik-add { margin-top: 6px; }
.ik-add textarea { width: 100%; }

/* 총괄 홈 (결정 D86) */
.co-sid .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.co-rids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.co-rid { border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; text-decoration: none; color: var(--ink); }
.co-rid:hover, .co-rid:focus-visible { background: var(--accent-soft); }
.sid-need { text-decoration: none; }
/* ②를 SID별로 (결정 D133) */
.co-sid-group { border-left: 3px solid var(--line); padding-left: 12px; margin: 18px 0; }
.co-sid-group > summary { cursor: pointer; }
.co-sid-group h3 { display: inline; margin: 0; }
.co-what { margin-right: 4px; }
.co-quiet { margin-top: 16px; }

/* 쟁점 책임자 찾기 (결정 D88) */
.ow-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 10px 0; }
.ow-cand { border: 1.5px dashed var(--machine); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--machine-soft); }
.ow-cand .row { flex-wrap: wrap; gap: 6px; align-items: center; }
.ow-cand.ow-human { border: 1px solid var(--line); background: var(--panel); }  /* 사람이 고른 직함은 실선 */
.ow-cand blockquote { margin: 4px 0 0; white-space: pre-wrap; }
.ow-plan li { margin: 6px 0; }
.ow-move button { padding: 0 6px; margin-left: 4px; }
.ow-editor textarea, .ow-editor .row input { margin: 6px 0; }
.ow-plan > li { margin: 10px 0; }
.ow-log { margin: 4px 0 4px 16px; }
.ow-r-0, .ow-r-none { background: var(--past); }  /* 닿지 않음 · 아직 */
.ow-r-1 { background: var(--accent-soft); }  /* 협의 중 */
.ow-r-2 { background: #e3f4e8; color: #17653a; }  /* 수락 의사 */
.ow-r-3 { background: #fde8e8; color: #9b1c1c; }  /* 거절 */
/* 지정 통지의 '내 답' 표시 — 알약(버튼 모양)이 아니라 네모난 상태 글씨로 (결정 D129) */
.tag.dn-state { border-radius: 4px; font-weight: 500; }
.dn-past { margin-top: 8px; }
.dn-past > summary { cursor: pointer; color: var(--muted, #667); font-size: 13px; }
.ow-contact-form .row { flex-wrap: wrap; gap: 6px; }
.ow-edit { margin-top: 10px; }
.ow-reply { border: 1.5px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ow-next { border-left: 4px solid #17653a; padding: 6px 10px; margin: 8px 0; background: #e3f4e8; }
.co-owner { margin-top: 2px; }
/* 공문 절차: 번호 · 지난 일(✓) · 지금 할 일을 한 줄로 (결정 D150) */
.ow-flow { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; }
.ow-flow-i { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.ow-flow-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.ow-flow-i.done .ow-flow-n { background: #e3f4e8; color: #17653a; border-color: #17653a; }
.ow-flow-i.now .ow-flow-n { background: var(--accent); color: #fff; border-color: var(--accent); }
.ow-flow-b { display: grid; gap: 6px; min-width: 0; }
.ow-flow-b > b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-flow-i.todo > .ow-flow-b > b { color: var(--muted, inherit); }
.ow-done-msg { border-left: 4px solid #17653a; background: #e3f4e8; color: #17653a; padding: 8px 12px; border-radius: 6px; font-weight: 600; }


/* 연락 결과 입력: 상대의 답을 바로 고른다 */
.ow-choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ow-ch { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ow-ch:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.ow-ch:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.ow-now { background: var(--accent); color: #fff; }
.ow-explain { border-left: 3px solid var(--line); padding: 4px 10px; margin-bottom: 8px; display: grid; gap: 2px; }
.ow-other { margin-top: 12px; }
.ow-letter-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; display: grid; gap: 6px; }
.ow-letter { font-family: inherit; line-height: 1.6; white-space: pre-wrap; }

/* 쟁점 책임자 지정의 차례와 다음에 할 일 */
.ow-stepper { margin: 10px 0 8px; }
.ow-todo { margin: 6px 0 14px; }
.ow-after tr.ow-here td { background: var(--accent-soft); }
.ow-after tr.ow-past td { opacity: 0.6; }

/* 쟁점 책임자 현황표 (결정 D90) */
.co-owners td { vertical-align: top; }
.co-owners .co-q { max-width: 280px; }
.co-st-done { background: var(--accent); color: #fff; }
.co-st-yes { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.co-st-wait { background: var(--accent-soft); }
.co-st-no { background: color-mix(in srgb, #c0392b 15%, transparent); }
.co-st-none { opacity: 0.7; }

/* 쟁점 책임자 지정 화면 (결정 D89): 왼쪽 RID 목록, 오른쪽 고른 RID의 절차 */
.ow-desk { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.ow-list { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ow-group > summary { list-style: none; cursor: pointer; }
.ow-group > summary::-webkit-details-marker { display: none; }
.ow-pick { display: block; border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: 8px; padding: 8px 10px;
  margin-bottom: 6px; text-decoration: none; color: var(--ink); background: var(--card, transparent);
  transition: border-color 120ms ease, background 120ms ease; }
.ow-pick:hover, .ow-pick:focus-visible { background: var(--accent-soft); }
.ow-pick.on { border-left-color: var(--accent); background: var(--accent-soft); }
.ow-pick .row { gap: 8px; align-items: center; }
.ow-pick-q { margin: 2px 0; font-size: 0.92em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ow-later { border-left: 3px solid var(--line); padding: 6px 10px; }
.ow-link { padding: 10px 14px; }
@media (max-width: 860px) {
  .ow-desk { grid-template-columns: 1fr; }
  .ow-list { position: static; max-height: none; }
}

/* 쟁점 책임자 지정 — RID 검색 (목록이 스크롤돼도 검색창은 위에 남는다) */
.ow-search { width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 1; margin-bottom: 4px; }

/* 쟁점 화면 — 지금 쓸 차례인 문서를 눈에 띄게 (이력보다 위, 결정 D98) */
.write-now { border-left: 4px solid var(--accent, #2563eb); }
.write-now > summary { font-size: 1.05em; padding: 6px 0; }
.write-tag { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }

/* 로그인 화면: 이미 계정이 있다 / 처음이다 — 두 박스를 가로로 */
.login-pair { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 14px; align-items: start; }
.login-pair select { width: 100%; }
.login-pair .stack { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) { .login-pair { grid-template-columns: 1fr; } }

.login-pair > div > .card + .card { margin-top: 14px; }
.login-pair details { margin: 8px 0; }

/* ── 쟁점 책임자 지정: 진행 중인 RID 팝업과 단계 표시 (결정 D105) ── */
.ow-pop-box { width: min(760px, 100%); }
.ow-pop-group h3 { margin: 12px 0 2px; font-size: 15px; }
.ow-pop-row { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; cursor: pointer; padding: 2px 0; }
.rv-popup-list li:has(.ow-pop-row):hover, .rv-popup-list li:has(.ow-pop-row:focus-visible) { background: var(--accent-soft); }
.ow-pop-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.ow-pop-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ow-steptag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); white-space: nowrap; }
.ow-step-4 { background: #e3f4e8; color: #17653a; }  /* ④ — 인정서만 남음 (ow-r-2와 같은 색) */
.ow-mini { display: inline-flex; gap: 2px; }
.ow-mini i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.ow-mini i.on { background: var(--accent); }

/* ── 총괄 업무의 세 상자 (결정 D106) ── */
.co-jobs { display: grid; grid-template-columns: repeat(var(--jobs, 3), minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; max-width: 1100px; }
.co-job { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.co-job:hover, .co-job:focus-visible { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-up); transform: translateY(-1px); }
.co-job.on { border-color: var(--accent); border-width: 2px; padding: 13px 15px; background: var(--accent-soft); }
.co-job-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.co-job-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.co-job.on .co-job-n { background: var(--accent); }
.co-job-sub { font-size: 12.5px; color: var(--muted); }
.co-job-facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.co-job-fact { padding: 1px 8px; border-radius: 999px; background: var(--table-head); }
.co-job-fact.due { background: #fdecc8; color: #7a4b00; }
@media (max-width: 760px) { .co-jobs { grid-template-columns: 1fr; } }

/* 총괄 업무: 세 상자는 진한 남색, 그 아래 열린 일의 머리 띠는 연하게 — 색을 맞바꾼다 (결정 D106, 사용자 요청) */
.co-job { background: radial-gradient(circle at 88% 15%, rgba(95, 208, 196, .22), transparent 50%),
    linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, #24507a);
  border-color: transparent; color: #fff; }
.co-job:hover, .co-job:focus-visible { border-color: #5fd0c4; color: #fff; }
.co-job .co-job-sub { color: #c9d7ea; }
.co-job .co-job-n { background: rgba(255, 255, 255, .16); }
.co-job-fact { background: rgba(255, 255, 255, .1); color: #dbe6f3; }
.co-job-fact b { color: #fff; }
.co-job-fact.due { background: rgba(253, 200, 90, .22); color: #ffe2a3; }
.co-job-fact.due b { color: #ffd277; }
.co-job.on { border: 2px solid #5fd0c4; padding: 13px 15px; background: radial-gradient(circle at 88% 15%, rgba(95, 208, 196, .32), transparent 50%),
    linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #24507a); box-shadow: 0 0 0 3px rgba(95, 208, 196, .25), var(--shadow-up); }
.co-job.on .co-job-n { background: #5fd0c4; color: var(--navy-deep); }

.co-jobs + .pg-hero { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.co-jobs + .pg-hero .pg-kicker { color: var(--accent-strong); }
.co-jobs + .pg-hero .pg-title { color: var(--ink); }
.co-jobs + .pg-hero .pg-lead { color: var(--muted); }
.co-jobs + .pg-hero .pg-note { color: var(--accent-strong); background: var(--panel); border-color: var(--line); }
.co-jobs + .pg-hero .pg-note-no { color: var(--muted); text-decoration-color: var(--muted); }
.co-jobs + .pg-hero .pg-fact { background: var(--panel); border-color: var(--line); }
.co-jobs + .pg-hero .pg-fact dd { color: var(--ink); }
.co-jobs + .pg-hero .pg-fact dt { color: var(--muted); }
/* 질문하기의 머리 띠도 업무 상자 아래에서는 연하게 (결정 D107) */
.co-jobs + .ik-hero { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.co-jobs + .ik-hero .ik-kicker { color: var(--accent-strong); }
.co-jobs + .ik-hero .ik-title { color: var(--ink); }
.co-jobs + .ik-hero .ik-lead { color: var(--muted); }
.co-jobs + .ik-hero .ik-stepper li { color: var(--muted); }
.co-jobs + .ik-hero .ik-stepper li:not(:last-child)::after { background: var(--line); }
.co-jobs + .ik-hero .ik-dot { background: var(--panel); color: var(--muted); border-color: var(--line); }
.co-jobs + .ik-hero .now .ik-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(22, 103, 196, .18); }
.co-jobs + .ik-hero .now b { color: var(--ink); }

/* ── 등록부: 여덟 단계 흐름 (결정 D108) ── */
.bd-scope { margin: -6px 0 6px; }
.bd-lanes { max-width: 1100px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.bd-lane { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px 10px 12px; border-radius: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; min-height: 170px; }
.bd-lane:not(:last-child)::after { content: "›"; position: absolute; right: -8px; top: 14px; font-weight: 800; color: var(--muted); }
.bd-lane:hover, .bd-lane:focus-visible { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.bd-lane.on { border: 2px solid var(--accent); padding: 9px 9px 11px; background: var(--accent-soft); }
.bd-lane.empty { opacity: .72; }
.bd-lane-head { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.25; word-break: keep-all; }
.bd-lane-n { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800;
  color: #fff; background: var(--navy); }
.bd-lane.on .bd-lane-n { background: var(--accent); }
.bd-lane-count { font-size: 12px; color: var(--muted); }
.bd-lane-count b { font-size: 24px; color: var(--ink); margin-right: 2px; }
.bd-lane-next { font-size: 11.5px; color: var(--muted); line-height: 1.4; border-top: 1px dashed var(--line); padding-top: 6px; }
.bd-lane-next b { color: var(--accent-strong); }
.bd-lane-rids { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-chip { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--table-head); white-space: nowrap; }
.bd-chip small { font-weight: 500; color: var(--muted); }
.bd-chip.marked { box-shadow: inset 0 0 0 1px #d97706; }
.bd-more { font-size: 11px; color: var(--muted); align-self: center; }
@media (max-width: 1000px) { .bd-lanes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-lane::after { display: none; } }
@media (max-width: 560px) { .bd-lanes { grid-template-columns: 1fr 1fr; } }
/* 그 밖의 참여자: 화면이 여럿인 참여자의 탭 — 상자 줄의 맨 아래 한 줄 (결정 D109) */
.co-job-tabs { grid-column: 1 / -1; margin: 0; }
.co-jobs + .pg-hero .pg-cta-ghost { color: var(--accent-strong); border-color: var(--accent); }
.co-jobs + .pg-hero .pg-cta-ghost:hover { color: var(--accent-strong); background: var(--panel); }

/* 참여자 × 여덟 단계 지도 (결정 D110) */
.co-stage-map { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.co-stage-map > summary { cursor: pointer; padding: 2px 0; }
.sm-scroll { overflow-x: auto; margin-top: 10px; }
.sm-grid { display: grid; grid-template-columns: 120px repeat(8, minmax(108px, 1fr)); gap: 3px; min-width: 980px; font-size: 13px; }
.sm-corner, .sm-state { background: var(--navy); color: #fff; padding: 6px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.sm-corner { background: transparent; color: var(--muted); font-weight: 400; }
.sm-n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 11px; }
.sm-who { padding: 6px 8px; font-weight: 600; background: var(--accent-soft); border-radius: 6px; display: flex; align-items: center; }
.sm-cell { padding: 4px; min-height: 34px; border-radius: 6px; background: rgba(127,127,127,.06); display: flex; flex-direction: column; gap: 3px; }
.sm-who.on { background: var(--accent); color: #fff; }
.sm-cell.on { background: var(--accent-soft); }
.sm-chip { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 6px; border-radius: 5px; line-height: 1.3; border: 1px solid transparent; }
.sm-chip i { font-style: normal; font-weight: 700; }
.sm-chip small { display: block; font-size: 11px; color: var(--muted); }
.sm-forward { background: var(--accent); color: #fff; }
.sm-forward small { color: rgba(255,255,255,.8); }
.sm-back { background: #efe7fb; color: #5b2f99; border-color: #cdb6ef; }
.sm-record { background: transparent; border-color: var(--accent); color: var(--accent-strong); }
.sm-work { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.sm-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sm-anytime { margin-top: 6px; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sm-back { background: #2e2145; color: #d6c2f5; border-color: #5b3f8a; } }
:root[data-theme="dark"] .sm-back { background: #2e2145; color: #d6c2f5; border-color: #5b3f8a; }
.sm-span { padding: 4px; }
.sm-bar { width: 100%; box-sizing: border-box; }
.sm-blank { min-height: 0; }
.mstep-cmdbox > summary { cursor: pointer; color: var(--muted); }
.mstep-cmdbox[open] > summary { margin-bottom: 4px; }

/* 대시보드 (결정 D114) */
.top .dash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: #5fd0c4; color: var(--navy-deep); border: 1px solid #5fd0c4; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.top .dash-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); text-decoration: none; }
.top .dash-btn[aria-current="page"] { background: #fff; border-color: #fff; }
.db { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1180px; }
.db-hero, .db-panel.wide, .db-at { grid-column: 1 / -1; }
.db-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 26px 28px; border-radius: var(--radius);
  color: #fff; background: radial-gradient(circle at 85% 10%, rgba(95, 208, 196, .28), transparent 45%), linear-gradient(120deg, var(--navy-deep), var(--navy)); box-shadow: var(--shadow); }
.db-hero h1 { margin: 4px 0 6px; font-size: 28px; color: #fff; }
.db-hero p { margin: 0; color: var(--navy-ink); }
.db-kicker { color: #5fd0c4; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.db-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.db-fact { display: grid; justify-items: center; min-width: 92px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.db-fact b { font-size: 30px; line-height: 1.1; }
.db-fact span { font-size: 12px; color: var(--navy-ink); }
.db-fact.warn { background: rgba(240, 120, 90, .25); border-color: rgba(255, 160, 130, .5); }
.db-fact.quiet b { font-size: 22px; opacity: .85; }
.db-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.db-panel h2 { margin: 0 0 2px; font-size: 17px; }
.db-panel > p { margin: 0 0 12px; }
.db-pipe { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; position: relative; }
.db-pipe::before { content: ""; position: absolute; left: 6%; right: 6%; top: 51px; height: 3px; background: linear-gradient(90deg, var(--st-1), var(--st-8)); opacity: .35; }
.db-pipe li { display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.db-pipe a { display: grid; grid-template-rows: 104px auto; justify-items: center; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.db-dot { display: grid; place-items: center; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; position: relative; z-index: 1;
  background: var(--c); color: #fff; box-shadow: 0 0 0 5px var(--panel), 0 6px 16px rgba(0, 0, 0, .18); transition: transform .15s; }
.db-dot b { font-size: 15px; }
.db-dot.zero { background: var(--panel); color: var(--muted); border: 2px solid var(--c); }
.db-dot.zero b { font-size: 12px; }
.db-pipe a:hover .db-dot { transform: scale(1.08); }
.db-st { font-weight: 600; font-size: 13px; }
.db-st i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; }
.db-dwell { line-height: 1.35; }
.db-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.db-tag.warn { background: #fde6df; color: #a8402a; }
.db-chart { width: 100%; height: auto; display: block; }
.db-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.db-axis { font-size: 11px; fill: var(--muted); }
.db-inflow { fill: #f0a35e; }
.db-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted); }
.db-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.db-legend .db-inflow-key { background: #f0a35e; }
.db-stackbar { display: flex; height: 38px; border-radius: 10px; overflow: hidden; gap: 2px; }
.db-stackbar span { display: grid; place-items: center; color: #fff; font-weight: 700; min-width: 28px; }
.db-b0 { background: #7cc7a5; } .db-b1 { background: #4aa3c7; } .db-b2 { background: #e0a14e; } .db-b3 { background: #d0634a; }
.db-legend .db-b0, .db-legend .db-b1, .db-legend .db-b2, .db-legend .db-b3 { display: inline-block; }
.db-bars { display: grid; gap: 10px; }
.db-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 14px; }
.db-bar-track { height: 14px; border-radius: 7px; background: rgba(127, 127, 127, .12); overflow: hidden; }
.db-bar-track span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--navy), var(--accent)); }
.db-bar b { text-align: right; }
.db-heat-wrap { overflow-x: auto; }
.db-heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; font-size: 13px; }
.db-heat th { font-weight: 600; text-align: left; padding: 4px 6px; white-space: nowrap; }
.db-heat thead th { font-size: 12px; color: var(--muted); text-align: center; }
.db-heat thead th i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 3px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; }
.db-heat td { height: 34px; text-align: center; border-radius: 6px; background: rgba(127, 127, 127, .07); font-weight: 700; }
.db-heat td.on { background: rgba(30, 58, 95, var(--a)); color: #fff; }
.db-backs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.db-backs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #f3edfb; color: #4a2a7a; }
.db-back-arrow { font-size: 20px; }
.db-backs b { margin-left: auto; }
.db-nos { display: flex; flex-wrap: wrap; gap: 8px; }
.db-nos span { padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); }
.db-nos b { color: #c0533a; margin-right: 6px; }
@media (max-width: 860px) {
  .db { grid-template-columns: 1fr; }
  .db-hero { grid-template-columns: 1fr; }
  .db-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .db-pipe::before { display: none; }
  .db-bar { grid-template-columns: 110px minmax(0, 1fr) 32px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .db-backs li { background: #2e2145; color: #d6c2f5; }
  :root:not([data-theme="light"]) .db-heat td.on { background: rgba(95, 208, 196, var(--a)); color: #062a26; } }
:root[data-theme="dark"] .db-backs li { background: #2e2145; color: #d6c2f5; }
:root[data-theme="dark"] .db-heat td.on { background: rgba(95, 208, 196, var(--a)); color: #062a26; }
.top .demo-switch { max-width: 180px; }  /* 대시보드 단추가 머리 줄에 함께 놓이게 (결정 D114) */
.db-pipe .db-st { align-self: start; }
/* 참여자와 규모 (결정 D115) */
.db-divider { grid-column: 1 / -1; margin: 10px 0 -4px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.db-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.db-volume { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.db-vbox { display: grid; gap: 4px; align-content: start; justify-items: start; padding: 14px; border-radius: 12px; }
.db-vbox.sid { background: var(--accent-soft); }
.db-vbox.rid { background: rgba(30, 58, 95, .08); }
.db-vbox b { font-size: 40px; line-height: 1; }
.db-vk { font-size: 12px; color: var(--muted); font-weight: 600; }
.db-varrow { align-self: center; font-size: 28px; color: var(--muted); }
.db-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.db-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.db-dots i.on { background: var(--accent); }
.db-stackbar.thin { height: 14px; width: 100%; margin-top: 4px; border-radius: 7px; }
.db-stackbar.thin span { min-width: 4px; }
.db-v-open { background: var(--st-3); } .db-v-closed { background: var(--st-8); } .db-v-folded { background: #9aa4b2; }
.db-legend .db-v-open, .db-legend .db-v-closed, .db-legend .db-v-folded { display: inline-block; }
.db-val { font-size: 12px; font-weight: 700; fill: var(--ink); }
.db-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.db-person { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.db-person-head { display: flex; align-items: center; gap: 8px; }
.db-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; }
.db-pbar { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.db-pbar b { text-align: right; }
.db-pbar-track { height: 12px; border-radius: 6px; background: rgba(127, 127, 127, .12); overflow: hidden; }
.db-pbar-track span { display: block; height: 100%; border-radius: 6px; }
.db-k0 { background: var(--navy); } .db-k1 { background: var(--accent); } .db-k2 { background: #f0a35e; }
.db-legend .db-k0, .db-legend .db-k1, .db-legend .db-k2 { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) { .db-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-volume { grid-template-columns: 1fr; } .db-varrow { transform: rotate(90deg); justify-self: center; } }
.db-pbar { grid-template-columns: 96px minmax(0, 1fr) 24px; }
.db-pbar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-axis-sm { font-size: 10px; }

/* 쟁점 책임자의 작업대 (결정 D116) */
.ow-rids { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ow-rid { display: grid; gap: 8px; color: inherit; text-decoration: none; border-left: 4px solid var(--accent); transition: transform .15s, box-shadow .15s; }
.ow-rid:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.ow-rid-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ow-rid-q { font-size: 14px; line-height: 1.45; }
.ow-rid-go { justify-self: end; font-weight: 700; color: var(--accent-strong); font-size: 13px; }
.ow-mini-steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ow-mini-steps li { flex: 1; text-align: center; font-size: 12px; padding: 2px 0; border-radius: 6px; background: rgba(127, 127, 127, .1); color: var(--muted); }
.ow-mini-steps li.done { background: var(--accent-soft); color: var(--accent-strong); }
.ow-mini-steps li.now { background: var(--navy); color: #fff; font-weight: 700; }
.ow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 4px 0 18px; padding: 0; }
.ow-step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ow-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(127, 127, 127, .12); font-weight: 700; flex: none; }
.ow-step.done { color: var(--ink); }
.ow-step.done .ow-step-n { background: var(--accent-soft); color: var(--accent-strong); }
.ow-step.now { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
.ow-step.now .ow-step-n { background: #5fd0c4; color: var(--navy-deep); }
.ow-tasks { display: grid; gap: 10px; margin-bottom: 18px; }
.ow-task { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; }
.ow-task > summary, .ow-task-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.ow-task-line { cursor: default; }
.ow-task-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(127, 127, 127, .1); flex: none; }
.ow-task-what { flex-basis: 100%; padding-left: 36px; }
.ow-write.todo { border-left: 4px solid var(--accent); }
.ow-write.todo .ow-task-icon { background: var(--accent); color: #fff; }
.ow-write.done, .ow-wait.done { opacity: .7; }
.ow-write.blocked { border-style: dashed; }
.ow-wait.todo { border-left: 4px solid #e0a14e; }
.ow-contact { border-left: 4px solid var(--navy); }
.ow-contact .ow-task-icon { background: var(--navy); color: #fff; }
.ow-task .small { margin-top: 4px; padding-left: 36px; }
.ok-tag { background: var(--accent-soft); color: var(--accent-strong); }
.ow-contacts { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.ow-contacts th, .ow-contacts td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ow-contacts th { font-size: 12px; color: var(--muted); }
.ow-contacts tr.now td { background: var(--accent-soft); }
.ow-contacts tr.now td:first-child { font-weight: 700; }
.ow-other.done summary b { color: var(--muted); }
@media (max-width: 760px) { .ow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ow-contacts { font-size: 13px; } }
/* 이 RID에 걸린 조문 (결정 D117) */
.ow-arts-box > summary { cursor: pointer; }
.ow-arts { display: grid; gap: 8px; margin-top: 10px; }
.ow-art { border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.ow-art.low { margin-left: 22px; border-left-color: var(--accent); }
.ow-art.missing { border-style: dashed; }
.ow-art > summary { cursor: pointer; }
.ow-art-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 8px 0 6px; padding: 8px 10px; border-radius: 8px; background: rgba(127, 127, 127, .06); }
/* 증거 수집 요청 (결정 D118) */
.qn-ask { border-left: 4px solid #e0a14e; display: grid; gap: 8px; }
.qn-ask-head { display: flex; align-items: flex-start; gap: 10px; }
.qn-ask-head > div { flex: 1; }
.qn-ask-icon { font-size: 22px; }
.qn-ask-msg { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(224, 161, 78, .1); font-size: 14px; line-height: 1.55; }
.qn-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.qn-items th, .qn-items td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.qn-items tr.given td:last-child { color: var(--accent-strong); font-weight: 700; }
.qn-progress { margin-top: 4px; }
.tag.warn { background: #fde6df; color: #a8402a; }
/* 증거 내기 (결정 D119) */
.ed-howto { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; padding: 12px 16px 12px 34px; border-radius: 10px; background: var(--accent-soft); }
.ed-howto li { margin: 0; }
.ed-blank { background: #fff1c2; color: #8a5a00; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.ed-item { display: grid; gap: 10px; border-left: 4px solid var(--line); }
.ed-item.given { border-left-color: var(--st-6); }
.ed-item-head { display: flex; align-items: center; gap: 12px; }
.ed-item-head > div { flex: 1; }
.ed-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.ed-item .tag.ok-tag { background: #dcf3ea; color: #0d7a55; }
.ed-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ed-opt { display: grid; gap: 6px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ed-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.ed-opt:focus-visible { outline: 3px solid rgba(22, 103, 196, .35); outline-offset: 2px; }
.ed-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 103, 196, .18); background: rgba(22, 103, 196, .05); }
.ed-opt-what { font-size: 13px; line-height: 1.5; color: var(--muted); }
.ed-opt .tag.ai { background: #efe5ff; color: #5b2bb5; }
.ed-opt .tag.machine { background: var(--machine-soft); color: var(--machine); }
.ed-form textarea { width: 100%; height: 88px; min-height: 88px; resize: vertical; }
.ed-given { margin: 0; padding-left: 18px; }
.ed-report { border-left: 4px solid #e0a14e; }
.ed-report.ready { border-left-color: var(--st-6); }
.ed-report textarea.ed-reason { width: 100%; height: 72px; min-height: 72px; }
.ed-checks { display: grid; gap: 6px; margin: 8px 0; }
.ed-check { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .ed-howto { display: block; } }
/* 알림 창 (결정 D119 · D120) · 작업대의 수집 보고 (결정 D120) */
.nt-group + .nt-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ow-report { display: grid; gap: 10px; border-left: 4px solid var(--st-7); }
/* 판단 검토 자료 (결정 D121) */
.ja { display: grid; gap: 12px; border-left: 4px solid var(--navy); margin-bottom: 12px; }
.ja-head { display: flex; gap: 12px; align-items: flex-start; }
.ja-head h3 { margin: 0 0 2px; }
.ja-icon { font-size: 26px; line-height: 1; }
.ja-q { margin: 6px 0; font-weight: 600; }
.ja-ev { margin: 0; padding-left: 18px; }
.ja-types-h { margin-top: 4px; }
.ja-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ja-card { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ow-task .ja .small { padding-left: 0; margin-top: 0; }
.ja-card-head { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ja-card h4 { margin: 0; font-size: 16px; color: var(--navy); }
.ja-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; }
.ja-dl dt { color: var(--muted); }
.ja-dl dd { margin: 0; }
.ja-note { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); }
.ja-side-h { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.ja-side ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.ja-side.pro { border-left: 3px solid var(--st-6); padding-left: 8px; }
.ja-side.con { border-left: 3px solid var(--machine); padding-left: 8px; }
.ja-points { display: grid; gap: 6px; }
.ja-points .tag.ai { background: #efe5ff; color: #5b2bb5; }
.ja-checks { display: grid; gap: 4px; }
.ja-checks label { display: flex; gap: 6px; align-items: flex-start; }
.ja-pick { justify-self: start; }
.ja-chosen:empty { display: none; }
.ja-chosen { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); }
.field.ja-flash { outline: 3px solid rgba(22, 103, 196, .35); outline-offset: 4px; border-radius: 6px; }
/* 소관 부처 응답자 (결정 D122) */
.rp { display: grid; gap: 10px; border-left: 4px solid var(--back); }
.rp h2, .rp h3 { margin: 0; }
.rp-org { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.rp-org-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-letters { margin: 0; padding-left: 18px; }
.rp-actions { display: grid; gap: 6px; }
.rp-actions > details > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.rp-form { display: grid; gap: 8px; margin-top: 8px; }
.rp-form textarea, .rp-form input[type="text"] { width: 100%; }
.rp-form textarea { height: 76px; min-height: 76px; }
.rp-reqs td { vertical-align: top; }
.rp-todo { border-left: 4px solid #e0a14e; display: grid; gap: 6px; }
.rp-req { display: grid; gap: 8px; }
.rp-req.done { opacity: .85; }
.tag.ok-tag { background: #dcf3ea; color: #0d7a55; }
.ow-art-text { white-space: pre-wrap; font-size: 13px; }
/* 총괄의 '소관 부처 응답자' 화면 (결정 D125) */
.rp-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0; padding: 0; }
.rp-step { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .9em; color: var(--muted, #777); }
.rp-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); font-size: .8em; font-weight: 700; }
.rp-step.done { color: inherit; }
.rp-step.done .rp-step-n { background: #3a8f5c; color: #fff; }
.rp-step.now { color: inherit; font-weight: 700; border-color: var(--accent); }
.rp-step.now .rp-step-n { background: var(--accent); color: #fff; }
.rp-step.wait { border-style: dashed; }
.rp-share { display: grid; gap: 8px; border-left: 4px solid var(--accent); }
.rp-shared { display: grid; gap: 6px; border-left: 4px solid var(--accent); margin-bottom: 8px; }
.rp-pick-orgs { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-link { margin-top: 8px; }
/* 요청 공문 AI 초안 · 회신 공문 받기 · 응답자 연락처 (결정 D126) */
.rp-filled { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rp-contacts td { vertical-align: top; }
.rp-body > summary { cursor: pointer; display: inline; color: var(--accent); margin-left: 6px; }
.rp-body pre { white-space: pre-wrap; font: inherit; max-height: 240px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.tag.ai-tag { border-style: dashed; }
/* 참여자 목록 (결정 D128) */
.rs-tools .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chip { border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.rs-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-search { flex: 1 1 260px; min-width: 200px; }
.rs-table th[scope="row"] { text-align: left; white-space: nowrap; }
.rs-table td, .rs-table th { vertical-align: top; }
/* 역할마다 따로 띄우는 표 — 칸 제목을 누르면 정렬 선택지가 그 아래에 뜬다 */
.rs-section { margin: 12px 0; border-left: 4px solid var(--line); }
.rs-section.rs-q { border-left-color: #4f7cff; }
.rs-section.rs-c { border-left-color: #7b4dff; }
.rs-section.rs-o { border-left-color: #e0a14e; }
.rs-section.rs-r { border-left-color: #2aa58b; }
.rs-section.rs-x { border-left-color: #8a8f98; }
.rs-section-head { cursor: pointer; font-size: 1.05em; padding: 2px 0 8px; }
.rs-section-head .rs-g { font-weight: 700; }
.rs-scroll { overflow-x: auto; }
.rs-table thead th:nth-child(1) { min-width: 7em; }
.rs-table thead th:nth-child(2) { min-width: 7.5em; }
.rs-table thead th:nth-child(3) { min-width: 9em; }
.rs-table thead th:nth-child(5) { min-width: 12em; }
.rs-th { position: relative; white-space: nowrap; }
.rs-sort { all: unset; cursor: pointer; font-weight: 700; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
.rs-sort:hover, .rs-sort:focus-visible { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 0; }
.rs-sort.on { color: var(--accent-strong); }
.rs-sort-mark { font-size: .8em; opacity: .7; }
.rs-sort.on .rs-sort-mark { opacity: 1; }
.rs-sort-menu { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px; min-width: 14em; display: grid; padding: 4px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-weight: 400; }
.rs-sort-menu button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.rs-sort-menu button:hover, .rs-sort-menu button:focus-visible { background: var(--accent-soft); }
.rs-sort-menu button[aria-checked="true"] { font-weight: 700; color: var(--accent-strong); }
.rs-sort-menu button[aria-checked="true"]::before { content: "✓ "; }
.rs-scope { width: auto; }
.rs-g { white-space: nowrap; display: inline-block; }
.rs-more > summary { cursor: pointer; color: var(--accent); margin-top: 4px; }
.rs-duties { display: grid; gap: 6px; }
.rs-kind { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px; align-items: start; }
.rs-kind > .small { grid-column: 2; }
.rs-refs { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-ref { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: .88em; text-decoration: none; white-space: nowrap; }
.rs-ref small { color: var(--muted, #777); font-size: .82em; }
.rs-ref i { font-style: normal; color: #c77700; font-size: .8em; }
.rs-ref.turn { border-color: #e0a14e; background: #fff8e8; }
.rs-ref.closed { opacity: .55; }
.rs-ref:hover, .rs-ref:focus-visible { border-color: var(--accent); }
.rs-legend { font-size: .9em; }
.rs-contacts { display: grid; gap: 6px; font-size: .92em; }
.rs-g { margin: 0 4px 4px 0; }
.rs-q { border-left: 3px solid #4f7cff; }
.rs-c { border-left: 3px solid #7b4dff; }
.rs-o { border-left: 3px solid #e0a14e; }
.rs-r { border-left: 3px solid #2aa58b; }
.rs-x { border-left: 3px solid #8a8f98; }
@media (max-width: 760px) { .rs-table thead { display: none; } .rs-table tr { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); } }
/* 대시보드 맨 위의 참여자 목록 단추 (결정 D128) */
.db-people-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 999px;
  background: #fff; color: var(--navy, #14284b); font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.db-people-btn span { font-size: .78em; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #e8eefc; }
.db-people-btn:hover, .db-people-btn:focus-visible { background: #eaf6f3; outline: 2px solid #5fd4c0; outline-offset: 2px; }
.todo-ask { margin-top: 6px; font-weight: 700; font-size: 16px; }
.todo-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.todo-btn-alt { background: var(--panel); color: var(--accent); border: 2px solid var(--accent); }
.todo-intent { border: 2px solid var(--accent); background: var(--accent-soft); font-size: 16px; }
.dup-banner { margin: 8px 0; padding: 10px 14px; border: 2px solid var(--line); border-left: 6px solid var(--accent); border-radius: 10px; background: var(--panel); font-size: 15px; }
.dup-hint { margin: 8px 0; }
.withdraw-bar { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.withdraw-btn { padding: 10px 18px; border-radius: 10px; border: 2px solid #b3261e; background: var(--panel); color: #b3261e; font-size: 16px; font-weight: 700; cursor: pointer; }
.withdraw-btn:hover, .withdraw-btn:focus-visible { background: #b3261e; color: #fff; }
.withdraw-link { color: #b3261e; font-weight: 700; }
.fold-banner { margin: 10px 0; padding: 14px 16px; border: 2px solid #b3261e; border-left-width: 8px; border-radius: 10px; background: var(--panel); font-size: 17px; }
.fold-banner b { color: #b3261e; font-size: 19px; }
.done-title { color: #1b5e20; }
.done-link { margin-right: 14px; font-weight: 700; }
/* 쟁점 화면 맨 위 '작성 시작' (결정 D146) */
.write-bar { margin: 10px 0; padding: 14px 16px; border: 3px solid var(--accent); border-radius: 12px; background: var(--accent-soft); display: grid; gap: 10px; }
.write-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.write-btn { padding: 14px 26px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); animation: write-pulse 2s ease-in-out 3; }
.write-btn:hover, .write-btn:focus-visible { filter: brightness(1.1); }
.write-say { font-size: 16px; }
@keyframes write-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* 방금 낸 문서: 제출 완료와 다음 단계 안내 */
.done-banner { margin: 10px 0; padding: 14px 16px; border: 2px solid var(--accent); border-left-width: 8px; border-radius: 12px; background: var(--accent-soft); display: grid; gap: 6px; }
.done-title { font-size: 18px; font-weight: 800; color: var(--accent-strong); }
.done-next { font-size: 15px; }
.done-go { display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; }
.done-go:hover, .done-go:focus-visible { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .write-btn { animation: none; } }
.write-now > summary { font-size: 18px; border-left: 6px solid var(--accent); padding-left: 10px; }
/* 쓰는 방법 고르기: AI 도움 / 직접 (결정 D147) */
.write-row { flex-direction: column; align-items: stretch; }
.write-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.write-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.write-btn small { font-size: 13px; font-weight: 500; opacity: .9; }
.write-btn-self { background: var(--panel); color: var(--accent); border: 3px solid var(--accent); box-shadow: none; animation: none; }
.ra-picks { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.ra-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; border-radius: 12px; border: 2px solid var(--accent); background: var(--panel); color: var(--text); font-size: 15px; cursor: pointer; text-align: left; }
.ra-pick b { font-size: 18px; }
.ra-pick.on { background: var(--accent); color: #fff; }
.ra-pick-note { margin: 4px 0; }
/* 쟁점 병합 AI 비교 (결정 D148) */
.mg-assist { margin: 8px 0; display: grid; gap: 10px; }
.mg-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; border-radius: 12px; border: 2px solid var(--accent); background: var(--accent-soft); color: var(--text); font-size: 15px; cursor: pointer; text-align: left; justify-self: start; }
.mg-ask b { font-size: 18px; }
.mg-item { border-left: 6px solid var(--line); display: grid; gap: 6px; }
.mg-item.mg-same { border-left-color: #1f9d55; }
.mg-item.mg-diff { border-left-color: #8a8f98; }
.mg-item.mg-unsure { border-left-color: #d9a400; }
.mg-verdict { font-size: 18px; font-weight: 800; }
.mg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .mg-pair { grid-template-columns: 1fr; } }
.mg-quote { background: var(--accent-soft); padding: 2px 6px; border-radius: 6px; }
.mg-found { border-left: 6px solid #1f9d55; background: rgba(31, 157, 85, .10); }
.mg-maybe { border-left: 6px solid #d9a400; }
.mg-none { border-left: 6px solid #8a8f98; }

/* 행동 링크는 단추처럼 — 색 있는 바탕으로 눈에 띄게 (결정 D159) */
a.button, a.rv-go { display: inline-block; padding: 8px 16px; border-radius: 8px; background: var(--accent); color: #fff;
  font-weight: 700; text-decoration: none; border: 1px solid var(--accent); box-shadow: var(--shadow-up, none); }
a.button:hover, a.rv-go:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; text-decoration: none; }
a.button:focus-visible, a.rv-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }

/* 지금 바로 할 일은 크고 진하게 (결정 D161) */
.ow-write.primary { border: 2px solid var(--accent); border-left-width: 8px; background: var(--accent-soft);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent); padding: 16px 18px; }
.ow-write.primary > summary > b { font-size: 21px; font-weight: 800; color: var(--accent-strong); }
.ow-write.primary .ow-task-icon { width: 36px; height: 36px; font-size: 18px; }
.ow-write.primary .ow-task-what { padding-left: 44px; font-size: 14px; color: inherit; }
.ow-now-tag { background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 11px; border-radius: 999px; letter-spacing: .02em; }
.ow-wait.todo b { font-size: 16px; }
.ow-wait.todo { background: color-mix(in srgb, #e0a14e 10%, var(--panel)); }
.ow-write.primary:not([open]) > summary::after { content: "눌러서 펴기 ▾"; margin-left: auto; font-weight: 700; color: var(--accent-strong); }

/* 서비스 설계자 홈 — 지금 할 일 강조 (결정 D162) */
.qn-ask.primary { border: 2px solid var(--accent); border-left-width: 8px; background: var(--accent-soft); padding: 16px 18px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.qn-ask.primary .qn-ask-title { font-size: 21px; font-weight: 800; color: var(--accent-strong); }
.qn-todo { padding: 10px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.qn-todo ol { list-style: none; margin: 6px 0 0; padding-left: 0; font-size: 14px; line-height: 1.6; }
a.button.big { padding: 11px 22px; font-size: 16px; }
.qn-turn-mine { padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: var(--accent-soft); border-left: 5px solid var(--accent); font-size: 14px; }

/* 소관 부처 담당자 — 지금 할 일 강조 (결정 D163) */
.rp-todo, .rp-req.primary { border: 2px solid var(--accent); border-left-width: 8px; background: var(--accent-soft);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent); padding: 16px 18px; text-decoration: none; color: inherit; display: block; }
.rp-todo { margin-bottom: 12px; }
.rp-todo .ow-rid-head { gap: 10px; flex-wrap: wrap; align-items: center; }
.rp-todo .button.big { margin-top: 10px; }
.rp-todo .ow-rid-head { justify-content: flex-start; }
.rp-todo .qcard-rid { margin-left: auto; }
.rp-todo .button.big { display: inline-block; padding: 11px 22px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; }
.rp-todo:hover .button.big { background: var(--accent-strong); }
.rp-todo .qn-ask-title { font-size: 21px; font-weight: 800; color: var(--accent-strong); }
.ja-ask { font-size: 15px; font-weight: 700; color: var(--accent-strong); }
.ja-unsure { margin: 8px 0; }

/* 총괄 홈 — 지금 할 일 강조 (결정 D169) */
.co-sid.primary { border: 2px solid var(--accent); border-left-width: 8px; background: var(--accent-soft); padding: 14px 16px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.co-sid.primary .row b { font-size: 18px; }
.co-act { gap: 8px; margin-top: 8px; flex-wrap: wrap; }