:root{
  --bg:#0f1115; --panel:#161a21; --line:#272d38; --fg:#e7ebf2; --dim:#96a0b0;
  --ok:#4ec9a8; --bad:#e2707a; --warn:#e0b24c; --accent:#6fa8ff; --accent2:#c08bff;
  --anchor:#e0b24c; --decide:#4ec9a8; --exec:#6fa8ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font:13px/1.5 -apple-system,"Noto Sans KR","Malgun Gothic",sans-serif}
h1{font-size:18px;margin:0}
h2{font-size:14px;margin:0 0 8px;letter-spacing:.02em}
h2.mt{margin-top:14px}
h3{font-size:12px;margin:12px 0 6px;color:var(--dim)}
.mt{margin-top:12px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.sub{color:var(--dim);font-size:12px;margin-top:3px}
.tick{font-size:11px;color:var(--dim);text-align:right;line-height:1.5}
.tick .live{color:var(--ok)}.tick .dead{color:var(--warn)}
section{padding:10px 18px;border-bottom:1px solid var(--line)}
.cap{color:var(--dim);font-size:11px;margin-top:6px;line-height:1.45}
.blank{color:var(--warn);font-size:12px;padding:8px}
.ctl{font-weight:400;color:var(--dim);font-size:11px;margin-left:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.col{min-width:0}

/* ───────── Figure 1 : 레인 ───────── */
/* 글자 크기: 본문 고정폭 12px, 두 줄까지. 색 띠는 10px 굵기 막대 + 11px 라벨
   (막대는 18px 행 가운데에 그라디언트로 그려 라벨이 잘리지 않게 한다). */
.lane{display:grid;gap:5px 3px;align-items:stretch;
  grid-template-columns:1.15fr .85fr 1.5fr 1.35fr .9fr .55fr;
  grid-template-rows:auto 14px 18px 18px}
.seg{grid-row:1;background:#161a21;border:1px solid var(--line);border-radius:6px;padding:5px 7px;min-width:0}
.seg .tag{display:block;font-size:10px;color:var(--dim);margin-bottom:3px;white-space:nowrap;overflow:hidden}
.seg code{display:block;font:12px/1.42 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cdd5e1;
  height:34px;overflow:hidden;word-break:break-word}
.seg.pre{background:#12151b;border-style:dashed}
.seg.pre code{color:#7b8596}
.seg.first{border-color:var(--exec)}
.seg.zh,.seg.zt{background:#1a1726;border-color:#4a3b60}
.seg.last{border-color:var(--decide);position:relative}
.seg.grpo{background:#1b2029;text-align:center}
.seg .chip{position:absolute;right:5px;top:4px;font-size:9px;border-radius:8px;padding:0 6px}
.seg .chip.gold{background:#3a3016;color:#f0cd7a;border:1px solid #7a6428}
.seg .chip.maj{background:#16302a;color:#7fe0c4;border:1px solid #2c6a58}
.zonerule{grid-row:2;grid-column:3/5;border-left:1px solid #6b57a0;border-right:1px solid #6b57a0;
  border-bottom:1px solid #4a3b60;position:relative}
.zonerule span{position:absolute;left:50%;transform:translateX(-50%);top:-1px;
  font-size:9px;color:#a893d8;background:var(--bg);padding:0 6px}
.band{display:flex;align-items:center;justify-content:center;
  background-repeat:no-repeat;background-position:center;background-size:100% 10px;border-radius:3px}
.band span{font-size:11px;line-height:1;white-space:nowrap;color:#0f1115;font-weight:700;
  text-shadow:0 0 3px rgba(255,255,255,.45)}
.band.off{background-image:repeating-linear-gradient(45deg,#1a1f27,#1a1f27 4px,#20262f 4px,#20262f 8px)}
.band.off span{color:#7b8596;font-weight:400;text-shadow:none}
.b-anchor{grid-row:3;grid-column:2}
.b-decide{grid-row:3;grid-column:3}
.b-exec{grid-row:4;grid-column:3/5}
.b-anchor.on{background-image:linear-gradient(var(--anchor),var(--anchor))}
.b-decide.on{background-image:linear-gradient(var(--decide),var(--decide))}
.b-exec.on{background-image:linear-gradient(var(--exec),var(--exec))}
.band.on.pulse{animation:bandpulse 2s ease-in-out infinite}
@keyframes bandpulse{0%,100%{opacity:.5}50%{opacity:1}}
.legend{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:8px;font-size:10px;color:var(--dim)}
.lg-flow b{font-weight:500;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--dim)}
.lg-flow b.hot{border-color:var(--accent);color:var(--fg)}
.lg-flow b.hot.pulse{animation:boxpulse 2s ease-in-out infinite}
@keyframes boxpulse{0%,100%{box-shadow:0 0 0 0 rgba(111,168,255,0)}50%{box-shadow:0 0 0 3px rgba(111,168,255,.22)}}
.lg-flow i{font-style:normal;margin:0 4px;color:#4a5464}
.lg-key em{display:inline-block;width:14px;height:9px;border-radius:2px;margin:0 4px 0 12px;vertical-align:-1px}
.lg-key em.b-anchor{background:var(--anchor)}
.lg-key em.b-decide{background:var(--decide)}
.lg-key em.b-exec{background:var(--exec)}
.lg-key em.b-off{background:repeating-linear-gradient(45deg,#1a1f27,#1a1f27 3px,#2a303a 3px,#2a303a 6px)}

/* ───────── 런 표 ───────── */
.runswrap{max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:6px}
table.runs{border-collapse:collapse;width:100%;font-size:11px}
table.runs th{position:sticky;top:0;background:var(--panel);color:var(--dim);font-weight:500;
  text-align:right;padding:5px 7px;border-bottom:1px solid var(--line);z-index:1}
table.runs td{padding:4px 7px;border-bottom:1px solid #1d222b;text-align:right;vertical-align:top}
table.runs th:nth-child(-n+3),table.runs td:nth-child(-n+3),
table.runs th:last-child,table.runs td:last-child{text-align:left}
table.runs tr{cursor:pointer}
table.runs tbody tr:hover{background:#1b212b}
table.runs tr.sel{background:#1d2735;box-shadow:inset 2px 0 0 var(--accent2)}
table.runs tr.running td:first-child{box-shadow:inset 2px 0 0 var(--ok)}
.chip2{display:inline-block;width:9px;height:9px;border-radius:50%}
.nm b{display:block;font-weight:600;font-size:11px}
.nm span{color:var(--dim);font-size:10px}
.mini{display:inline-block;width:44px;height:4px;background:#232935;border-radius:2px;overflow:hidden;vertical-align:1px}
.mini i{display:block;height:100%}
.upd{color:var(--ok);font-size:9px}
td.pass{color:var(--dim);font-size:10px;max-width:250px}
td i{font-style:normal;margin-left:4px;font-size:10px}
i.up,.d.up{color:var(--ok)}i.down,.d.down{color:var(--bad)}

/* ───────── 지표 격자 ───────── */
.grid8{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:1200px){.grid8{grid-template-columns:1fr 1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 6px 3px}
.panel .pt{font-size:11px;color:var(--fg);margin-bottom:2px}
.panel .pp{height:150px}
.panel .pn-note{font-size:9px;color:var(--dim);min-height:12px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.num{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px}
.num .k{font-size:11px;color:var(--dim)}
.num .v{font-size:22px;font-weight:600;margin:2px 0}
.num .d{font-size:11px}
.tail{background:#0b0d11;border:1px solid var(--line);border-radius:6px;padding:8px;
  font-size:10px;color:var(--dim);white-space:pre-wrap;word-break:break-all;max-height:120px;overflow:auto;margin:0}

/* ───────── 사례 브라우저 ───────── */
/* align-items:start — 기본값(stretch)은 세 칸을 가장 긴 칸 높이로 늘려서
   메타 칸에만 335px 짜리 빈 자리를 만들었다(0922 화면 점검 1). */
.browser{display:grid;grid-template-columns:270px minmax(0,1fr) 210px;gap:12px;align-items:start}
.rail{border:1px solid var(--line);border-radius:6px;background:var(--panel);
  display:flex;flex-direction:column;max-height:560px}
.filters{padding:8px;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.chips button,.fold,.nav button{background:#1b2029;color:var(--dim);border:1px solid var(--line);
  border-radius:11px;padding:2px 9px;cursor:pointer;font-size:11px}
.chips button.on{color:var(--fg);border-color:var(--accent);background:#1d2735}
.selrow{display:flex;gap:4px;margin-bottom:6px}
.selrow select,#f-q{flex:1;min-width:0;background:#12151b;color:var(--fg);border:1px solid var(--line);
  border-radius:5px;padding:3px 6px;font-size:11px}
#f-q{width:100%}
.cnt{color:var(--dim);font-size:10px;margin-top:6px}
.list{overflow:auto;flex:1}
.li{padding:6px 8px;border-bottom:1px solid #1d222b;cursor:pointer;font-size:11px}
.li:hover{background:#1b212b}
.li.on{background:#1d2735}
.li .sub{color:var(--dim);font-size:10px}
.li .sub.dim{color:#6a7383}
.pane{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:9px;
  max-height:560px;overflow:auto;min-width:0}
.chead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--dim);
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.chead .nav{margin-left:auto;display:flex;gap:4px}
.pane pre{white-space:pre-wrap;word-break:break-word;font:11px/1.55 ui-monospace,Menlo,monospace;
  color:#cdd5e1;margin:8px 0 0}
.pane pre.dim{color:#7b8596}
.prefold{margin-top:8px}
.m-first{background:#16283c;color:#bcdcff;border-radius:3px}
.m-zone{background:#2b2140;color:#e0d2ff}
.m-last{background:#16302a;color:#a8f0d8;border-radius:3px}
.k-wrong_to_right{color:var(--ok)}.k-right_to_wrong{color:var(--bad)}
.k-reconfirm{color:var(--accent)}.k-no_revision{color:var(--dim)}
.li.k-wrong_to_right{border-left:3px solid var(--ok)}
.li.k-right_to_wrong{border-left:3px solid var(--bad)}
.li.k-reconfirm{border-left:3px solid var(--accent)}
.li.k-no_revision{border-left:3px solid var(--line)}
.meta{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:9px 9px 12px;
  max-height:560px;overflow:auto;font-size:11px}
.meta dt{color:var(--dim);font-size:10px;margin-top:8px}
.meta dd{margin:2px 0 0;word-break:break-word}
.creditbar{display:flex;height:14px;border-radius:3px;overflow:hidden;margin-top:3px}
.creditbar i{flex:1 1 0}

/* ───────── 통계 세 장면 ───────── */
.three{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:1100px){.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.story{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:0}
.story h3{margin:0 0 6px;color:var(--fg);font-size:13px}

/* ───────── 표·사전 ───────── */
table{border-collapse:collapse;width:100%;font-size:11px}
th,td{border-bottom:1px solid var(--line);padding:3px 5px;text-align:right}
th:first-child,td:first-child{text-align:left}
th{color:var(--dim);font-weight:500}
dl{font-size:12px}dt{color:var(--accent);margin-top:6px}dd{margin:2px 0 0 14px;color:var(--dim)}
summary{cursor:pointer;color:var(--dim);font-size:12px}

@media(max-width:1000px){
  .two{grid-template-columns:1fr}
  .browser{grid-template-columns:1fr}
  .rail,.pane,.meta{max-height:400px}
  .lane{grid-template-columns:1fr;grid-template-rows:none}
  .seg,.band{grid-row:auto!important;grid-column:auto!important}
  .zonerule{display:none}
}