/* ═══════════════════════════════════════════════════════════════
   GLIA — 시냅스 관제탑(control-tower) 디자인 시스템 이식판

   기준: ai-product-management-duna/control-tower/frontend/src/theme.css
     · 레이아웃: **가운데 1180px 한 단**. 상단 헤더 + 가로 알약 탭.
     · 색: 에메랄드/민트/아쿠아 + 앰버·로즈·스카이(의미색)
     · 형태: 라운드 16/10/6, 그림자는 옅게. 알약(100px)은 탭·칩·버튼에.
     · 다크 모드 있음(관제탑은 prefers-color-scheme 을 따른다)

   ── GLIA 가 더한 것: 상태 인코딩 ─────────────────────────────
   사용자가 적록색약이다. 초록(정상)↔로즈(위반) 는 deutan 에서 갈리지 않는다.
     · 초록은 **브랜드·조작**에만 쓴다. 상태 의미를 싣지 않는다.
     · 상태는 무채(정상) · 앰버(경고) · 적갈(위반) · 보라(오류)이고
       **언제나 글리프 + 라벨을 함께 단다.**
     · 검증(dataviz validate_palette): #C2820B · #A8283A · #6E3FA0
       deutan 최악 쌍 ΔE 17.3 · 정상시야 19.3 — 전 검사 통과.
       관제탑의 --rose(#D9455F)는 앰버와 deutan ΔE 8.7 이라 조금 더 깊게 잡았다.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  --bg:#F5F8F7; --bg-2:#EDF3F1;
  --surface:#FFFFFF; --surface-2:#F7FAF9;
  --ink:#08201A; --dim:#3E554E; --faint:#647C76;
  --line:rgba(11,45,38,.10); --line-2:rgba(11,45,38,.16);
  --emerald:#0E9F82; --teal:#0E9F82; --teal-ink:#0A7D66;
  --mint:#3FBFA4; --aqua:#2C93C9;
  --amber:#C2820B; --amber-ink:#8F5F06; --rose:#A8283A; --rose-ink:#8E1F2E;
  --teal-soft:rgba(14,159,130,.10); --amber-soft:rgba(194,130,11,.12);
  --rose-soft:rgba(168,40,58,.10);
  --sky:#2C93C9; --sky-ink:#1B6D97; --sky-soft:rgba(44,147,201,.12);
  --shadow:0 1px 2px rgba(11,45,38,.05), 0 1px 1px rgba(11,45,38,.03);
  --shadow-sm:0 1px 2px rgba(11,45,38,.04);
  --font:"Pretendard Variable",Pretendard,'SUITE',-apple-system,"Malgun Gothic",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono","D2Coding","Cascadia Code",Consolas,monospace;
  --r:16px; --r-sm:10px; --r-chip:6px;

  /* ── 상태 (검증 통과) — 초록/빨강 쌍 없음 ── */
  --st-calm:#5A716B;  --st-calm-bg:rgba(90,113,107,.10);
  --st-warn:#C2820B;  --st-warn-bg:var(--amber-soft);
  --st-fail:#A8283A;  --st-fail-bg:var(--rose-soft);
  --st-err:#6E3FA0;   --st-err-bg:rgba(110,63,160,.11);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1412; --bg-2:#111A18;
  --surface:#121C19; --surface-2:#16211E;
  --ink:#EDF5F2; --dim:#B4C7C1; --faint:#8AA09A;
  --line:rgba(232,241,238,.10); --line-2:rgba(232,241,238,.17);
  --emerald:#4FD1B5; --teal:#4FD1B5; --teal-ink:#7FE3CD;
  --mint:#6FDCC4; --aqua:#6BC5E8;
  --amber:#E0A93C; --amber-ink:#F0C577; --rose:#EE7286; --rose-ink:#F597A8;
  --teal-soft:rgba(79,209,181,.14); --amber-soft:rgba(224,169,60,.14);
  --rose-soft:rgba(238,114,134,.14);
  --sky:#6BC5E8; --sky-ink:#9BDCF3; --sky-soft:rgba(107,197,232,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --st-calm:#9BB0AA; --st-calm-bg:rgba(155,176,170,.13);
  --st-warn:#E0A93C; --st-warn-bg:var(--amber-soft);
  --st-fail:#EE7286; --st-fail-bg:var(--rose-soft);
  --st-err:#B98BD1;  --st-err-bg:rgba(185,139,209,.14);
}}
:root[data-theme="dark"]{
  --bg:#0C1412; --bg-2:#111A18; --surface:#121C19; --surface-2:#16211E;
  --ink:#EDF5F2; --dim:#B4C7C1; --faint:#8AA09A;
  --line:rgba(232,241,238,.10); --line-2:rgba(232,241,238,.17);
  --emerald:#4FD1B5; --teal:#4FD1B5; --teal-ink:#7FE3CD;
  --mint:#6FDCC4; --aqua:#6BC5E8;
  --amber:#E0A93C; --amber-ink:#F0C577; --rose:#EE7286; --rose-ink:#F597A8;
  --teal-soft:rgba(79,209,181,.14); --amber-soft:rgba(224,169,60,.14);
  --rose-soft:rgba(238,114,134,.14);
  --sky:#6BC5E8; --sky-ink:#9BDCF3; --sky-soft:rgba(107,197,232,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --st-calm:#9BB0AA; --st-calm-bg:rgba(155,176,170,.13);
  --st-warn:#E0A93C; --st-warn-bg:var(--amber-soft);
  --st-fail:#EE7286; --st-fail-bg:var(--rose-soft);
  --st-err:#B98BD1;  --st-err-bg:rgba(185,139,209,.14);
}

/* ── 호환 별칭 — 화면들이 쓰던 옛 이름을 잇는다.
      색은 이 파일 한 곳에서만 정한다. ─────────────────────────── */
:root{
  --primary:var(--emerald); --primary-d:var(--teal-ink); --accent:var(--emerald);
  --accent-bg:var(--teal-soft); --tint:var(--teal-soft);
  --panel:var(--surface); --card:var(--surface); --canvas:var(--bg);
  --glass:var(--surface); --code-bg:var(--surface-2);
  --line-firm:var(--line-2); --ink2:var(--dim); --ink-soft:var(--dim);
  --ink-mute:var(--dim); --mut:var(--dim); --ink-faint:var(--faint);
  --shadow-1:var(--shadow); --sh-1:var(--shadow); --sh-2:var(--shadow);
  --sh-btn:0 8px 20px rgba(16,185,129,.24);
  --r-lg:var(--r); --r-md:var(--r-sm); --dot:var(--line-2);
  --head:#0B1F1A; --edge:var(--emerald);
  --pass:var(--st-calm); --calm:var(--st-calm); --calm-bg:var(--st-calm-bg);
  --ok:var(--st-calm); --warn:var(--st-warn); --warnc:var(--st-warn);
  --warn-bg:var(--st-warn-bg); --fail:var(--st-fail); --failc:var(--st-fail);
  --fail-bg:var(--st-fail-bg); --bad:var(--st-fail);
  --error:var(--st-err); --err:var(--st-err); --err-bg:var(--st-err-bg);
  --human:var(--dim); --human-bg:var(--surface-2);
  --info:var(--dim); --info-bg:var(--surface-2);
  --sans:var(--font);
}

*{box-sizing:border-box}
html{height:100%}
/* 높이를 100% 로 못 박지 않는다. 내용이 길면 페이지가 길어지고,
   브라우저 스크롤로 끝까지 볼 수 있어야 한다. */
body{margin:0;min-height:100%}
/* 셸(index.html) 안에 뜬 화면 — 틀이 제 내용에 맞춰지므로 높이를 잠그지 않는다 */
html.framed,html.framed body{height:auto;min-height:0}
body{font-family:var(--font);color:var(--ink);line-height:1.6;letter-spacing:-.006em;
  font-size:15px;-webkit-font-smoothing:antialiased;word-break:keep-all;
  background:linear-gradient(180deg,var(--surface-2) 0,var(--bg) 420px) var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ══ 셸 — 가운데 한 단 ═══════════════════════════════════════════ */
.app{max-width:1180px;margin:0 auto;padding:34px 28px 56px;
  display:flex;flex-direction:column;gap:26px;min-height:100%}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:15px}
/* 로고는 원이다. flex 안에서 눌려 타원이 되지 않게 크기를 세 번 못 박는다. */
.orb{width:44px;height:44px;flex:0 0 44px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#7DF5DC,var(--emerald) 66%,#0A8F73);
  box-shadow:0 0 0 6px rgba(16,185,129,.10),0 8px 22px rgba(16,185,129,.30);
  animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
.brand h1{font-size:19px;font-weight:760;letter-spacing:-.02em;margin:0}
.brand .sub{font-size:12px;color:var(--dim);margin-top:1px;letter-spacing:.01em}
.status{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;
  color:var(--emerald);background:var(--surface);padding:8px 14px;border-radius:100px;
  box-shadow:var(--shadow-sm)}
.pill.off,.pill.mut{color:var(--faint)}
.pill.calm{color:var(--st-calm)} .pill.warn{color:var(--st-warn)}
.pill.fail{color:var(--st-fail)} .pill.err{color:var(--st-err)}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--emerald);
  animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.pill.off .livedot{background:var(--faint);animation:none}

/* ══ 탭 메뉴 — 상단 가로 알약 ════════════════════════════════════ */
.nav{display:flex;gap:9px;flex-wrap:wrap;row-gap:6px}
.navitem{border:none;background:var(--surface);color:var(--dim);font-weight:650;
  font-size:14px;padding:11px 22px;border-radius:100px;cursor:pointer;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:9px;
  font-family:var(--font);transition:color .15s,transform .12s}
.navitem:hover{color:var(--ink);transform:translateY(-1px)}
.navitem.active{background:linear-gradient(180deg,var(--mint),var(--emerald));color:#fff;
  box-shadow:0 8px 20px rgba(16,185,129,.28)}
/* 배지 = **당신이 답해야 할 것**(사람 대기 큐). 봇이 일하는 중은 성격이 달라 점으로 따로 알린다. */
.navitem .nb{font-size:11px;background:var(--amber);color:#fff;border-radius:100px;
  padding:1px 8px;font-weight:700}
.navitem .nb.urgent{background:var(--rose)}
.navitem.active .nb{background:rgba(255,255,255,.32)}
.navrun{display:inline-block;width:7px;height:7px;border-radius:100px;
  background:var(--emerald);animation:ping 2s infinite}
.navitem.active .navrun{background:#fff;animation:none}
.navitem .soon{font-size:10px;color:var(--faint);font-weight:600}

/* ══ 카드 ═══════════════════════════════════════════════════════ */
.card{background:var(--surface);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:18px}
.card h2{font-size:15.5px;font-weight:750;margin:0 0 16px;color:var(--ink);
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .msg{font-weight:500;font-size:12.5px;color:var(--dim)}
.card.flat{padding:16px 18px}

.sect{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);
  font-weight:700;margin:22px 0 9px}

/* ══ 폼 ═══════════════════════════════════════════════════════ */
label{font-size:11.5px;color:var(--dim);display:block;margin-bottom:6px;font-weight:650}
input,textarea,select{font-family:var(--font);font-size:13.5px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:9px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{border-color:var(--emerald);background:var(--surface);
  box-shadow:0 0 0 3px var(--teal-soft)}
input:not([type=file]),select{height:38px;padding:0 12px}
input[type=checkbox],input[type=radio]{height:auto;width:auto;accent-color:var(--emerald)}
textarea{min-height:80px;resize:vertical;line-height:1.6;font-family:var(--mono);font-size:12.5px}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}
.row .grow{flex:1;min-width:180px}

/* ══ 버튼 — 알약. 초록은 조작이지 상태가 아니다 ══════════════════ */
button,.btn{background:linear-gradient(180deg,var(--mint),var(--emerald));color:#fff;
  border:none;border-radius:100px;padding:10px 20px;font-weight:700;font-size:13.5px;
  cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;
  justify-content:center;gap:7px;white-space:nowrap;box-shadow:0 6px 16px rgba(16,185,129,.22);
  transition:transform .12s,box-shadow .15s;letter-spacing:-.01em}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(16,185,129,.3)}
button:active,.btn:active{transform:none}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
button.sec,.btn.sec{background:var(--surface);color:var(--teal-ink);
  box-shadow:var(--shadow-sm);border:1px solid var(--line)}
button.sec:hover{border-color:var(--emerald)}
button.ghost{background:transparent;color:var(--dim);box-shadow:none;border:1px solid var(--line)}
button.ghost:hover{color:var(--ink);transform:none}
button.del,.btn.del{background:var(--surface);color:var(--rose-ink);
  border:1px solid var(--rose-soft);box-shadow:none}
button.del:hover{border-color:var(--rose)}
button.btn-sm,.btn.btn-sm{padding:7px 15px;font-size:12.5px}
button.sm{padding:5px 12px;font-size:12px}

.msg{font-size:13px;color:var(--dim);line-height:1.65}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);
  color:var(--dim);font-size:11px;font-weight:650;padding:3px 10px;border-radius:100px;
  border:1px solid var(--line)}
.tag.mono{font-family:var(--mono);font-size:10.5px}
.tag.mut{color:var(--faint)}
.tag.calm{background:var(--st-calm-bg);color:var(--st-calm);border-color:transparent}
.tag.warn{background:var(--st-warn-bg);color:var(--st-warn);border-color:transparent}
.tag.fail{background:var(--st-fail-bg);color:var(--st-fail);border-color:transparent}
.tag.err {background:var(--st-err-bg); color:var(--st-err); border-color:transparent}
.tag.on  {background:var(--teal-soft);  color:var(--teal-ink);border-color:transparent}

/* ══ 표 ═══════════════════════════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
th{color:var(--dim);font-weight:750;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;padding-bottom:9px}
tbody tr:hover td{background:var(--surface-2)}
tr:last-child td{border-bottom:0}
table.tight th,table.tight td{padding:8px 10px;font-size:12.5px}

/* ══ 코드 ═════════════════════════════════════════════════════ */
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  border-radius:var(--r-chip);padding:.1em .4em}
pre{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin:0 0 16px;
  overflow-x:auto}
pre code{background:none;padding:0;font-size:inherit}

/* ══ 안내 상자 ════════════════════════════════════════════════ */
.note{border-left:3px solid var(--emerald);background:var(--teal-soft);padding:12px 15px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;color:var(--ink);margin-bottom:16px}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--st-warn);background:var(--st-warn-bg)}
.note.fail{border-left-color:var(--st-fail);background:var(--st-fail-bg)}
.note.fail b{color:var(--st-fail)}

/* ══ 상태 — **글리프가 1차, 색은 보조** ═══════════════════════ */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.st .gl{width:19px;height:19px;border-radius:var(--r-chip);display:grid;place-items:center;
  font-size:10.5px;font-weight:800;border:1.5px solid currentColor;flex-shrink:0}
.st.calm{color:var(--st-calm)} .st.calm .gl{background:var(--st-calm-bg)}
.st.warn{color:var(--st-warn)} .st.warn .gl{background:var(--st-warn-bg)}
.st.fail{color:var(--st-fail)} .st.fail .gl{background:var(--st-fail-bg)}
.st.err {color:var(--st-err)}  .st.err  .gl{background:var(--st-err-bg);border-style:dashed}
.st.on  {color:var(--teal-ink)} .st.on .gl{background:var(--teal-soft)}

/* ══ 통계 타일 ════════════════════════════════════════════════ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px}
.tile .k{font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.04em}
.tile .v{font-size:23px;font-weight:800;line-height:1.2;margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tile .s{font-size:11.5px;color:var(--dim);margin-top:1px}
.tile.warn{border-color:var(--st-warn);background:var(--st-warn-bg)}
.tile.warn .v{color:var(--st-warn)}
.tile.fail{border-color:var(--st-fail);background:var(--st-fail-bg)}
.tile.fail .v{color:var(--st-fail)}

.empty{color:var(--faint);text-align:center;padding:44px 20px;font-size:13px}

@media (max-width:820px){
  .app{padding:20px 16px 44px;gap:18px}
  .navitem{padding:9px 15px;font-size:13px}
  .card{padding:16px 16px}
}

/* ══ 화면 안의 뼈대 ═════════════════════════════════════════════
   위 셸(index.html)이 화면 하나를 고르고, 화면 안은 이 뼈대를 쓴다.
   머리(수치) → 갈래(nav.tabs) → 거르개(filters) → 목록·상세(pane).
   화면마다 다시 짜면 같은 것이 조금씩 달라 보인다. 한곳에 둔다. */

/* 갈래 — 한 화면 안의 하위 탭. 위 알약과 모양을 달리해 층을 구분한다. */
nav.tabs{display:flex;gap:2px;padding:0 26px;border-bottom:1px solid var(--line);
  background:var(--surface);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;box-shadow:none;color:var(--dim);
  font-weight:650;font-size:13.5px;padding:11px 16px;border-radius:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
nav.tabs button:hover{color:var(--ink);transform:none;box-shadow:none}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--emerald)}
nav.tabs .rt{margin-left:auto;display:flex;align-items:center;gap:8px;padding:6px 0}

/* 머리 — 이 화면이 다루는 것의 크기를 숫자로 먼저 말한다 */
.head{padding:14px 26px 11px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.kpi{display:flex;flex-direction:column;font-size:11px;color:var(--dim);font-weight:700}
.kpi b{font-size:19px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.kpi.warn b{color:var(--st-warn)} .kpi.fail b{color:var(--st-fail)}
.kpi.err b{color:var(--st-err)} .kpi.calm b{color:var(--st-calm)}
.head .r{margin-left:auto;display:flex;gap:9px;align-items:center}

/* 거르개 */
.filters{display:flex;gap:8px;padding:11px 26px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line)}
.filters .lb{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-weight:800;margin-right:2px}
.chip{height:auto;box-shadow:none;background:var(--surface);color:var(--dim);
  border:1px solid var(--line-2);border-radius:100px;padding:5px 13px;font-size:12.5px;
  font-weight:600;transform:none}
.chip:hover{color:var(--ink);transform:none;box-shadow:none;background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--teal-soft);border-color:var(--emerald);
  color:var(--teal-ink);box-shadow:none}
.filters input{width:210px;height:34px;border-radius:100px;font-size:12.5px}

/* 목록 · 상세 — 왼쪽에서 고르고 오른쪽에서 본다.
   높이를 화면에 묶지 않는다. 내용만큼 자라고, 넘치면 브라우저가 굴린다.
   안쪽에 스크롤 상자를 두면 볼 수 있는 것이 상자 크기에 갇힌다. */
.pane{display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,1.2fr);
  align-items:start}
.list{border-right:1px solid var(--line);padding:10px 0}
.detail{padding:22px 26px 48px;min-width:0}
/* 목록 한 줄 — 단추이지만 단추처럼 보이면 안 된다 */
.lrow{display:block;width:100%;text-align:left;background:none;border:0;border-radius:0;
  height:auto;box-shadow:none;color:inherit;font-weight:400;padding:12px 24px;
  border-left:3px solid transparent;cursor:pointer;font-family:var(--font)}
.lrow:hover{background:var(--surface-2);transform:none;box-shadow:none}
.lrow[aria-current="true"]{background:var(--surface-2);border-left-color:var(--emerald)}
.lrow .l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lrow .l2{font-size:12px;color:var(--dim);margin-top:3px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.lrow .id{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
.lrow .rt{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums}

/* 사실 격자 — 상세 위쪽에 놓는 「무엇인가」 */
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px 20px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 17px;margin-bottom:18px}
.fg .k{color:var(--dim);font-weight:750;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase}
.fg .v{font-size:13.5px;color:var(--ink);margin-top:3px;overflow-wrap:anywhere;font-weight:650}
.fg .v.mono{font-family:var(--mono);font-size:12.5px;font-weight:400}

.dsect{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  font-weight:800;margin:24px 0 10px}
.dsect:first-child{margin-top:0}

@media (max-width:1000px){
  .pane{grid-template-columns:minmax(0,1fr)}
  .list{border-right:0;border-bottom:1px solid var(--line)} }

/* ══ 없을 때 쓰는 자리 ═════════════════════════════════════════
   지어낸 값으로 채우지 않는다. 없다고 말하고, 무엇을 하면 채워지는지 적는다. */
.emptybox{padding:44px 24px;text-align:center}
.emptybox .t{font-size:16px;font-weight:750;letter-spacing:-.02em;margin-bottom:8px}
.emptybox .d{font-size:13.5px;color:var(--dim);line-height:1.75;max-width:600px;
  margin:0 auto}
.emptybox .d.how{margin-top:9px}
.emptybox code{font-size:12.5px}

/* ══ 표본 띠 — 이 화면이 무엇을 보고 있나 ═══════════════════════
   실제가 아닌 것을 실제처럼 두지 않는다. 눈에 걸리게 만든다. */
.samplebar{display:flex;align-items:center;gap:9px;padding:9px 26px;
  background:var(--st-fail-bg);border-bottom:1px solid var(--st-fail);
  color:var(--ink);font-size:12.5px;line-height:1.55}
.samplebar .gl{width:19px;height:19px;border-radius:var(--r-chip);display:grid;
  place-items:center;font-size:10.5px;font-weight:800;color:var(--st-fail);
  border:1.5px solid currentColor;flex-shrink:0}
.samplebar b{color:var(--st-fail)}

/* ══ 팝업 — 무엇이 일어날지 먼저 보여 주고 묻는다 ═══════════════ */
.mask{position:fixed;inset:0;background:rgba(8,32,26,.42);z-index:80;
  display:grid;place-items:center;padding:24px;
  animation:maskin .14s ease-out}
@keyframes maskin{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r);box-shadow:0 24px 60px rgba(11,45,38,.28);
  width:min(520px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  animation:modalin .18s cubic-bezier(.2,.9,.3,1)}
@keyframes modalin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal .mh{padding:20px 24px 0}
.modal .mh h3{margin:0;font-size:18px;font-weight:780;letter-spacing:-.02em}
.modal .mh p{margin:7px 0 0;font-size:13.5px;color:var(--dim);line-height:1.65}
.modal .mb{padding:16px 24px;overflow:auto;font-size:13.5px}
.modal .mb .steps{display:grid;gap:9px;margin:0}
.modal .mb .step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start}
.modal .mb .step .no{width:22px;height:22px;border-radius:50%;background:var(--teal-soft);
  color:var(--teal-ink);font-size:11px;font-weight:800;display:grid;place-items:center}
.modal .mb .step b{font-weight:700}
.modal .mb .step div{color:var(--dim);font-size:12.5px;line-height:1.55}
.modal .mb dl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 14px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.modal .mb dt{color:var(--dim);font-weight:650}
.modal .mb dd{margin:0;color:var(--ink)}
.modal .mf{padding:14px 24px 20px;display:flex;gap:9px;justify-content:flex-end;
  border-top:1px solid var(--line)}
.modal.wide{width:min(680px,100%)}
/* 결과 한 줄 — 잠깐 떴다 사라진다 */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:100px;
  font-size:13px;font-weight:650;box-shadow:0 10px 30px rgba(11,45,38,.30);
  animation:toastin .2s cubic-bezier(.2,.9,.3,1)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mask,.modal,.toast{animation:none} }

/* ── 마크다운 본문 ────────────────────────────────────────────────
   보고서(report.md)와 그림(diagrams.md)이 여기로 들어온다. 화면의 다른
   글과 같은 눈금(토큰)을 쓰되, 문서라는 것이 보이도록 여백을 넉넉히 준다. */
.md-body{font-size:14px;line-height:1.8;color:var(--ink);max-width:74ch}
.md-body > *:first-child{margin-top:0}
.md-body h1,.md-body h2,.md-body h3,
.md-body h4,.md-body h5,.md-body h6{
  margin:26px 0 10px;line-height:1.35;letter-spacing:-.01em;font-weight:750}
.md-body h1{font-size:22px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.md-body h2{font-size:18px}
.md-body h3{font-size:15.5px}
.md-body h4,.md-body h5,.md-body h6{font-size:14px;color:var(--ink-soft)}
.md-body p{margin:0 0 13px}
.md-body ul,.md-body ol{margin:0 0 13px;padding-left:22px}
.md-body li{margin:3px 0}
.md-body li::marker{color:var(--ink-mute)}
.md-body strong{font-weight:750}
.md-body em{font-style:normal;color:var(--ink-soft);
  border-bottom:1px solid var(--line-firm)}
.md-body a{color:var(--accent);text-underline-offset:2px}
.md-body hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.md-body blockquote{margin:0 0 13px;padding:9px 15px;
  border-left:3px solid var(--accent);background:var(--accent-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-soft)}

.md-body code{font-family:var(--mono);font-size:.87em;
  background:var(--code-bg);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px}

/* 코드 덩이 — 가로로 길면 그 안에서만 밀린다. 문서가 옆으로 밀리면 안 된다. */
.md-body pre.md-code,.md-body pre.mermaid{
  margin:0 0 15px;padding:13px 15px;background:var(--code-bg);
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65;
  white-space:pre;color:var(--ink-soft)}
.md-body pre code{background:none;border:0;padding:0;font-size:inherit}
/* Mermaid 는 아직 그림으로 그리지 않는다. 원문임을 표시해 둔다 —
   그려 주는 척하면 안 그려진 것이 고장으로 보인다. */
.md-body pre.mermaid{border-style:dashed;position:relative;padding-top:26px}
.md-body pre.mermaid::before{content:"Mermaid 원문";position:absolute;
  top:6px;left:15px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700}

/* 표 — 옆으로 긴 표는 감싼 칸 안에서만 밀린다 */
.md-body table.md-table{width:100%;border-collapse:collapse;
  margin:0 0 15px;font-size:13px;display:block;overflow-x:auto}
.md-body table.md-table th,.md-body table.md-table td{
  border-bottom:1px solid var(--line);padding:7px 11px;text-align:left;
  vertical-align:top;white-space:nowrap}
.md-body table.md-table th{font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:800;
  border-bottom:1px solid var(--line-firm)}
.md-body table.md-table td{font-variant-numeric:tabular-nums}
.md-body table.md-table tr:last-child td{border-bottom:0}