:root{--bg:#f6f7fa;--card:#fff;--border:#e4e7ec;--text:#23272e;--sub:#687078;--green:#0d4f33;--red:#dc2626;--gray:#64748b;
--o-g12:#dc2626;--o-unstable:#c98500;--o-noevid:#0d9488;--o-uptrend:#2563eb;--o-nosample:#64748b;--o-invalid:#b8c2d0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font:13px Inter,'Noto Sans KR',Arial,sans-serif;color:var(--text)}
.topbar{display:flex;gap:12px;align-items:center;padding:14px 28px;color:#fff;background:linear-gradient(100deg,#0d4f33,#1e8e5a 60%,#2fae74)}
.logo{font-size:12px;letter-spacing:2px;font-weight:700;opacity:.85}.topbar h1{font-size:16px;margin:0}.sub{margin-left:auto;opacity:.85;font-size:12px}
.tabs{display:flex;gap:6px;align-items:center;padding:12px 28px;background:#fff;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{padding:7px 13px;border:1px solid var(--border);border-radius:7px;background:var(--bg);cursor:pointer;font:inherit}
.tab.active{color:#fff;background:var(--green);border-color:var(--green)}
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 28px;background:#fff;border-bottom:1px solid var(--border)}
.controls label{display:flex;gap:8px;align-items:center;color:var(--sub);font-size:12px;font-weight:700}
.controls select{border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);padding:7px 10px;font:inherit}
.guide{margin:16px 28px 0;padding:12px 14px;background:#edf7f1;border:1px solid #cde8d8;border-radius:8px;color:#234337;line-height:1.6}
.guide b{color:#0d4f33}.guide code{background:#dcefe4;padding:1px 5px;border-radius:4px;font-size:12px}
.cards,.grid{padding:16px 28px;display:grid;gap:16px}.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.inner,.grid.inner{padding:0;margin-top:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin:16px 28px}
.cards .card,.grid .card{margin:0}.grid.inner>article{min-width:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card h2{font-size:14px;margin:0 0 12px}.card h3{font-size:13px;margin:0 0 8px}
.chart-help{margin:0 0 12px;color:var(--sub);font-size:12px;line-height:1.55}
.metric{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px}
.metric-label{font-size:11px;color:var(--sub)}.metric-value{font-size:20px;font-weight:700;margin-top:6px}
.metric-sub{font-size:11px;color:var(--sub);margin-top:4px}
.metric.accent .metric-value{color:var(--o-g12)}.metric.good .metric-value{color:var(--green)}
.plot{height:560px}.plot.small{height:340px}
/* 최소 표본 곡선만 확대·이동을 허용한다 — 모드바가 그래프를 가리지 않게 위로 띄운다 */
#nmin-curve .modebar{top:-6px !important;right:0 !important;background:transparent}
#nmin-curve .modebar-btn{opacity:.5}#nmin-curve .modebar-btn:hover{opacity:1}
.detail-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.detail-controls label{display:flex;gap:6px;align-items:center;color:var(--sub);font-size:12px;font-weight:700}
.detail-controls select{border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);padding:6px 9px;font:inherit;max-width:100%}
/* 게이트별 충족 현황 — 충족/미충족/미평가를 색과 기호로만 구분해 한눈에 훑게 한다 */
.gx-sum{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.gx-card{flex:1 1 150px;min-width:0;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:#fbfcfd}
.gx-card .gx-h{font-size:11.5px;font-weight:700;color:var(--sub)}
.gx-card .gx-v{font-size:19px;font-weight:700;margin:2px 0 1px;color:#23272e}
.gx-card .gx-v em{font-size:11.5px;font-weight:500;font-style:normal;color:var(--sub);margin-left:3px}
.gx-card .gx-s{font-size:11px;color:#98a1ab;line-height:1.5}
.gx-cell{display:flex;flex-direction:column;gap:2px;font-size:11.5px;line-height:1.45}
.gx-cell b{font-weight:700}
.gx-ok{color:#0d4f33}.gx-no{color:#b4574f}.gx-skip{color:#c2cad4}.gx-tr{color:#8a939e;font-weight:700;font-size:10px}
.gx-more{margin:10px 0 0;font-size:12px;color:var(--sub)}
.table-wrap{max-height:580px;overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left}
th{position:sticky;top:0;background:#fff;font-size:11px;color:var(--sub);font-weight:700;z-index:1}
.more-btn{appearance:none;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--green);
  font:inherit;font-size:11px;font-weight:700;padding:2px 8px;margin-left:6px;cursor:pointer}
.more-btn:hover{background:#f2f7f4;border-color:#bcd4c6}
.sort-btn{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:0;cursor:pointer}
.sort-btn.active{color:var(--green)}.sort-btn::after{content:'↕';margin-left:4px;color:#b4bcc8}
.sort-btn.active.asc::after{content:'↑';color:var(--green)}.sort-btn.active.desc::after{content:'↓';color:var(--green)}
.th-sub{font-size:10px;color:#98a1ab;font-weight:500}
.chk{display:inline-flex;align-items:center;gap:4px;margin-right:9px;font-weight:500;color:var(--text)}
.chk input{margin:0}
.pill{display:inline-block;border-radius:999px;padding:2px 8px;background:#eef2ff;color:#3730a3;font-weight:700;font-size:11px}
.pill.muted{background:#f1f5f9;color:#64748b;font-weight:500}
/* 경로별 값 병기 — 판정 경로가 굵게, 나머지는 흐리게 */
.pp-off{color:#9aa4b0}.pp-sep{color:#cbd5e1;margin:0 4px}
.tag{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px}
.tag::before{content:'';width:9px;height:9px;border-radius:2px;background:currentColor}
.t-g12{color:var(--o-g12)}.t-nosample{color:var(--o-nosample)}.t-unstable{color:var(--o-unstable)}
.t-noevid{color:var(--o-noevid)}.t-uptrend{color:var(--o-uptrend)}.t-invalid{color:#94a3b8}
.t-veto{color:#a21caf}
/* ── 판정 흐름도 ────────────────────────────────────────────────────────
   Plotly 로는 "AND/OR 로 엮인 조건 구조" 를 그릴 수 없어 순수 CSS 로 짠다.
   숫자는 반드시 라벨과 함께 둔다 — "817" 만 있으면 남은 수인지 탈락 수인지 알 수 없다. */
/* 흐름도 + 기호 설명 2열. 흐름도 양옆 빈 공간을 설명에 쓴다. */
.flow-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.fl-aside{border:1px solid var(--border);border-radius:9px;background:#fbfcfd;padding:12px 14px}
.fl-aside h4{margin:0 0 10px;font-size:13.5px;color:var(--sub);font-weight:700}
.fl-aside dl{margin:0}
.fl-aside dt{font-size:14px;font-weight:700;color:#23272e;margin-top:14px}
.fl-aside dt:first-child{margin-top:0}
.fl-aside dd{margin:3px 0 0;font-size:13px;color:#48525e;line-height:1.6}
.fl-aside .amath{margin:5px 0 3px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.fl-aside math{font-size:118%;color:#16305c}
.fl-aside math[display="block"]{margin:0;text-align:left}
@media(max-width:1100px){.flow-wrap{grid-template-columns:1fr}}
.flow{display:flex;flex-direction:column;align-items:center;padding:4px 0 2px;gap:0}
.fl-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;font-size:13px;color:var(--sub)}
.fl-legend span{display:inline-flex;align-items:center;gap:5px}
.fl-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.fl-box{min-width:250px;max-width:460px;padding:12px 18px;border:1px solid var(--border);border-radius:9px;
  background:#fff;text-align:center;line-height:1.5}
.fl-box .fl-t{font-size:15px;color:var(--sub);font-weight:700}
.fl-box .fl-n{font-size:23px;font-weight:700;margin:3px 0 2px;color:#23272e;letter-spacing:-.3px}
.fl-box .fl-n em{font-size:13px;font-weight:500;font-style:normal;color:var(--sub);margin-left:4px}
.fl-box .fl-s{font-size:13px;color:var(--sub)}
.fl-start{background:#f4f6f9;border-color:#d6dce4}
.fl-final{background:#fef2f2;border-color:#f0b8b8;box-shadow:0 1px 3px rgba(220,38,38,.08)}
.fl-final .fl-n{color:var(--o-g12);font-size:26px}
.fl-cand{background:#edf7f1;border-color:#cde8d8}.fl-cand .fl-n{color:var(--green)}
/* 경로 2열 */
.fl-cols{display:flex;gap:22px;justify-content:center;align-items:flex-start;width:100%;flex-wrap:wrap}
.fl-col{flex:0 1 420px;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.fl-ch{padding:8px 12px;border-radius:9px 9px 0 0;background:var(--green);color:#fff;text-align:center}
.fl-ch b{font-size:15.5px}.fl-ch span{display:block;font-size:13px;opacity:.9;margin-top:3px}
.fl-ch.ctr{background:#1e5f8e}
/* 단계 행 — [게이트] 조건 · 남음/탈락 */
.fl-step{border:1px solid var(--border);border-top:0;background:#fff;padding:10px 14px}
.fl-step:last-child{border-radius:0 0 9px 9px}
.fl-srow{display:flex;align-items:baseline;gap:8px}
.fl-g{flex:0 0 auto;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;
  background:#e8eefc;color:#1d4ed8;font-size:14px;font-weight:700}
.fl-cond{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fl-cond math{font-size:126%;color:#334155}
.fl-op{color:#b6bfcb;font-size:11px;font-weight:700}
.fl-drop math{font-size:116%;color:#b4574f}
.fl-veto math{font-size:118%;color:#86198f}
.fl-na{color:#94a3b8;font-weight:500}
.fl-dor{margin:3px 0 3px 28px;font-size:11.5px;font-weight:700;color:#c98a84;letter-spacing:1.5px}
.fl-ch sub{font-size:75%}
.fl-keep{flex:0 0 auto;font-size:17px;font-weight:700;color:var(--green);white-space:nowrap}
.fl-keep em{font-size:13px;font-weight:500;font-style:normal;color:var(--sub);margin-left:3px}
.fl-drop{margin:4px 0 0 28px;font-size:13px;color:var(--o-g12);line-height:1.55}
.fl-dhead{margin:6px 0 2px 28px;font-size:12px;font-weight:700;color:#8d6e6a;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fl-dhead math{font-size:112%;color:#8d6e6a}
.fl-drop b{font-weight:700}
.fl-and{padding:2px 0 2px 28px;font-size:11.5px;font-weight:700;color:#b6bfcb;letter-spacing:1.5px}
/* 화살표·결합 */
.fl-arrow{width:2px;height:15px;background:#cbd5e1;position:relative;flex:0 0 auto}
.fl-arrow::after{content:'';position:absolute;bottom:-1px;left:-4px;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:7px solid #cbd5e1}
.fl-join{margin:4px 0;padding:8px 24px;border-radius:999px;background:#0d4f33;color:#fff;font-weight:700;font-size:15px}
.fl-join span{font-weight:500;opacity:.85}
.fl-veto{border:1px dashed #d8a0dd;background:#fdf4fe;border-radius:9px;padding:9px 12px;margin-top:7px}
/* 결합 후 단독으로 놓이는 ④ — 후보/확정 상자와 같은 폭 규칙으로 세로 흐름에 맞춘다 */
.fl-veto.fl-solo{margin-top:0;min-width:250px;max-width:460px;text-align:center;padding:11px 18px}
.fl-veto .fl-vt{font-size:14.5px;font-weight:700;color:#86198f}
.fl-veto .fl-vs{font-size:13px;color:#9d5aa5;margin-top:4px;line-height:1.55}
@media(max-width:900px){.fl-cols{flex-direction:column;align-items:stretch}}

.doc{color:#3b4552;line-height:1.8;font-size:13px}.doc ol{margin:8px 0 0;padding-left:20px}.doc li{margin-bottom:7px}
/* ── 수식 ────────────────────────────────────────────────────────────────
   MathML 을 쓴다 — 브라우저 네이티브라 외부 의존성(KaTeX/MathJax)이 없고 오프라인에서도
   분수·제곱근·아래첨자가 제대로 조판된다. Chromium/Firefox/Safari 모두 MathML Core 지원.
   서체는 3종으로 갈라 놓는다: 본문(sans) · 식별자(code) · 수식(math). */
math{font-size:107%}
.eq{margin:10px 0;padding:11px 16px;background:#f7f9fc;border-left:3px solid #2563eb;border-radius:0 6px 6px 0;overflow-x:auto;overflow-y:hidden}
.eq math{display:block;margin:0 auto}
.eq-cap{display:block;margin-top:5px;font-size:11.5px;color:var(--sub);text-align:center;font-family:Inter,'Noto Sans KR',Arial,sans-serif}
math .v{color:#1d4ed8}
/* 변수 정의 표 — 수식의 기호와 "지금 이 세그먼트의 값" 을 갈라 놓는다 */
table.vars{width:auto;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:6px}
table.vars th,table.vars td{padding:6px 12px;border-bottom:1px solid var(--border);font-size:12px;text-align:left;position:static;white-space:nowrap}
table.vars thead th{background:#f2f4f7;color:var(--sub);font-weight:700}
table.vars tbody tr:last-child td{border-bottom:0}
table.vars td.sym{text-align:center;background:#fbfcfd}
table.vars td.val{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;font-size:11.5px;color:#16305c;text-align:right}
table.vars td.desc{white-space:normal;max-width:360px;color:#48525e}
/* 접기 — 요약은 짧게, 세부는 펼쳐서 */
.doc details{margin:8px 0;border:1px solid var(--border);border-radius:8px;background:#fff;overflow:hidden}
.doc .dbody details{margin:10px 0 2px;background:#f8fafc}
.doc .dbody summary{font-size:12px;background:#eef3f8}
.doc details[open]{background:#fdfdfe}
.doc summary{padding:9px 14px;cursor:pointer;font-weight:700;font-size:12.5px;color:#23272e;
  background:#f7f9fb;list-style:none;display:flex;align-items:center;gap:8px}
.doc summary::-webkit-details-marker{display:none}
.doc summary::before{content:'▶';font-size:9px;color:#2563eb;transition:transform .15s}
.doc details[open]>summary::before{transform:rotate(90deg)}
.doc summary:hover{background:#eef3f8}
.doc summary .sm-sub{margin-left:auto;font-weight:500;font-size:11px;color:var(--sub)}
.doc .dbody{padding:10px 15px 13px}
.doc .lead{font-size:13px;line-height:1.75}
.doc .lead b{color:#0d4f33}
/* ── 서체 3종을 분명히 갈라 놓는다 ────────────────────────────────────────
   본문(sans) · 식별자(code, 회색 배경) · 수식(.fx, 파란 계열 등폭 + 좌측 바).
   판정 로직 요약은 산문·컬럼명·부등식이 섞여 있어 구분이 없으면 눈으로 못 따라간다. */
.doc code{background:#eef1f5;border:1px solid #e0e5ec;padding:0 5px;border-radius:4px;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;font-size:11.5px;color:#334155;white-space:nowrap}
.fx{display:block;margin:10px 0;padding:11px 15px;background:#f7f9fc;border-left:3px solid #2563eb;border-radius:0 6px 6px 0;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;font-size:13px;color:#16305c;line-height:1.85;
  overflow-x:auto;white-space:pre}
.fx b{color:#1d4ed8;font-weight:700}.fx .cm{color:#7c8899;font-style:normal}
.fx-in{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;font-size:12.5px;color:#16305c;white-space:nowrap}
/* 통계 도구 3종 — 번호 배지로 구분해 어디까지가 한 도구인지 보이게 한다 */
.tool{border:1px solid var(--border);border-radius:9px;background:#fff;padding:12px 15px;margin:12px 0}
.tool:first-of-type{margin-top:6px}
.tool>.th{display:flex;align-items:baseline;gap:9px;margin:0 0 7px}
.tool>.th .no{flex:0 0 auto;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;
  background:#0d4f33;color:#fff;font-size:13px;font-weight:700}
.tool>.th .nm{font-size:14.5px;font-weight:700;color:#23272e}
.tool>.th .use{margin-left:auto;font-size:11.5px;color:var(--sub);white-space:nowrap}
.tool>.th .use b{color:#1d4ed8}
/* 용어 풀이 — 통계 용어는 정의를 본문과 떼어 놓는다 */
.gl{margin:10px 0 0;padding:0;list-style:none}
.gl>li{margin:0 0 9px;padding:9px 13px;background:#fbfcfd;border:1px solid var(--border);border-radius:7px}
.gl .gl-t{display:block;font-weight:700;color:#23272e;margin-bottom:2px}
.doc h3{font-size:13px;margin:20px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--border);color:#23272e}
.doc h3:first-child{margin-top:0}
.doc h4{font-size:12.5px;margin:14px 0 4px;color:#3b4552;font-weight:700}
.doc h4::before{content:'▸ ';color:#2563eb}
.note{margin:9px 0 0;padding:9px 13px;background:#fffaf0;border-left:3px solid #e0a640;border-radius:0 6px 6px 0;color:#6b4a10}
/* 판정 로직 요약 안의 조회표 — 부등식만으로는 "몇 건까지 허용인지"가 안 보여서 값을 펼친다 */
/* 좁은 화면에서 표가 페이지를 밀어내지 않도록 각 표를 스크롤 컨테이너로 감싼다(renderLogicDoc 에서 wrap) */
.mini-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;margin:8px 0 10px}
table.mini{width:auto;border:1px solid var(--border);border-radius:6px;border-collapse:collapse;background:#fbfcfd}
table.mini th,table.mini td{padding:5px 10px;border-bottom:1px solid var(--border);font-size:12px;white-space:nowrap;position:static}
table.mini thead th{background:#f2f4f7;color:var(--sub);font-weight:700}
table.mini tbody tr:last-child td{border-bottom:0}
table.mini td:last-child{white-space:normal;max-width:430px;color:var(--sub)}
.warn{margin:16px 28px 0;padding:11px 14px;background:#fff8ed;border:1px solid #f5dfb8;border-radius:8px;color:#6b4a10;line-height:1.6}
@media(max-width:1000px){.cards,.grid.two{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.sub{margin-left:0}}