/* 생성물 — 손으로 고치지 말 것. 원천: vendor/v9.2 + server/src/edge_signal/player_assets.py */

:root{
  color-scheme: light;
  --ground:#eef2f4; --panel:#ffffff; --panel-2:#f6f9fa; --sunken:#e6ecef;
  --ink:#0f181d;    --ink-2:#48585f; --ink-3:#7a8a92;
  --rule:#d7e0e4;   --rule-2:#bfcdd3;
  --accent:#0d6f78; --accent-ink:#ffffff; --accent-soft:#d9edef;
  --dev:#1baf7a;    --dev-soft:#d8f0e6;
  --on:#1a9e5f;     --off:#8a949a;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --st-trigger:#e34948; --st-event:#eda100; --st-range:#4a3aa7;
  --grid:#e2e9ec; --shadow:0 1px 2px rgba(15,24,29,.08);
  --slotL:42%;
  /* 구획 색 — L1 설정 / L2 오버레이 뷰어 / L3 채널 상세 비교 */
  --l1:#4a3aa7; --l1-soft:#ebe8f9;
  --l5:#0b6bab; --l5-soft:#dcebf7;
  --l2:#0d6f78; --l2-soft:#d9edef;
  --l3:#b26a00; --l3-soft:#fbeed2;
  --l4:#a8306a; --l4-soft:#fae0ec;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#080e11; --panel:#101819; --panel-2:#152024; --sunken:#0b1315;
    --ink:#e7eef1;    --ink-2:#93a7b0; --ink-3:#687c85;
    --rule:#1e2b30;   --rule-2:#2b3c43;
    --accent:#3aafb9; --accent-ink:#04191c; --accent-soft:#123037;
    --dev:#199e70;    --dev-soft:#10312a;
    --on:#2ec27e;     --off:#6b757b;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#00a300; --s7:#9085e9; --s8:#e66767;
    --st-trigger:#e66767; --st-event:#c98500; --st-range:#9085e9;
    --grid:#1b262a; --shadow:0 1px 2px rgba(0,0,0,.45);
    --slotL:58%;
    --l1:#9085e9; --l1-soft:#221d3d;
  --l5:#5aa9e6; --l5-soft:#0e2634;
    --l5:#5aa9e6; --l5-soft:#0e2634;
    --l2:#3aafb9; --l2-soft:#123037;
    --l3:#d9a23a; --l3-soft:#33260c;
    --l4:#e07aa8; --l4-soft:#37122444;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#080e11; --panel:#101819; --panel-2:#152024; --sunken:#0b1315;
  --ink:#e7eef1;    --ink-2:#93a7b0; --ink-3:#687c85;
  --rule:#1e2b30;   --rule-2:#2b3c43;
  --accent:#3aafb9; --accent-ink:#04191c; --accent-soft:#123037;
  --dev:#199e70;    --dev-soft:#10312a;
  --on:#2ec27e;     --off:#6b757b;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#00a300; --s7:#9085e9; --s8:#e66767;
  --st-trigger:#e66767; --st-event:#c98500; --st-range:#9085e9;
  --grid:#1b262a; --shadow:0 1px 2px rgba(0,0,0,.45);
  --slotL:58%;
  --l1:#9085e9; --l1-soft:#221d3d;
  --l2:#3aafb9; --l2-soft:#123037;
  --l3:#d9a23a; --l3-soft:#33260c;
  --l4:#e07aa8; --l4-soft:#371224;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);overflow:hidden;
  font-family:"IBM Plex Sans KR","IBM Plex Sans",-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:12.5px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ═══ 앱 셸 ═══════════════════════════════════════════════════ */
.app{display:grid;
  /* L3 는 화면이 짧으면 함께 줄어든다 — 고정 높이로 두면 파형이 들어갈 자리가 없어진다 */
  --btmrow:clamp(104px, 24vh, 272px);
  grid-template-rows:auto auto auto minmax(0,1fr) var(--btmrow) auto;height:100vh}
.app[data-btm="closed"]{--btmrow:33px!important}
/* display:none 요소는 그리드 아이템에서 빠져 행/열이 통째로 밀린다.
   각 구획의 행·열을 명시해 두면 접혀 있어도 배치가 흔들리지 않는다. */
.topbar{grid-row:1}.lbar1{grid-row:2}.drawer{grid-row:3}.body{grid-row:4}.bottom{grid-row:5}.iobar{grid-row:6}

.topbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px;min-height:46px;
  background:var(--panel);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:8px;margin-right:4px;white-space:nowrap}
.brand b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.modebtn{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:11px;
  border:1px solid var(--off);background:color-mix(in srgb,var(--off) 14%,transparent);
  color:var(--off);font-size:10.5px;font-weight:600;cursor:pointer}
.modebtn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--off)}
.modebtn[data-online="true"]{border-color:var(--on);color:var(--on);background:color-mix(in srgb,var(--on) 12%,transparent)}
.modebtn[data-online="true"]::before{background:var(--on);box-shadow:0 0 0 3px color-mix(in srgb,var(--on) 22%,transparent)}
.setgroup{display:flex;gap:3px;flex-wrap:wrap}
.setbtn{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;color:var(--ink-2);font-size:11.5px;white-space:nowrap}
.setbtn:hover{border-color:var(--rule-2);color:var(--ink)}
.setbtn[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:500}
.setbtn i{font-style:normal;font-size:9px;color:var(--ink-3)}
.tabs{display:flex;gap:2px;margin-left:auto}
.tab{padding:5px 11px;background:transparent;border:1px solid transparent;border-radius:3px;cursor:pointer;color:var(--ink-2);font-size:12px}
.tab:hover{background:var(--panel-2);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
.icon-btn{padding:5px 9px;background:var(--panel-2);border:1px solid var(--rule);border-radius:3px;
  cursor:pointer;color:var(--ink-2);font-size:11.5px;white-space:nowrap}
.icon-btn:hover{border-color:var(--rule-2);color:var(--ink)}
.icon-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:500}

/* ═══ 설정 서랍 ═══════════════════════════════════════════════ */
.drawer{background:var(--panel-2);border-bottom:1px solid var(--rule);padding:0;display:none;overflow:auto;max-height:46vh}
.drawer[data-open="true"]{display:block}
.drawer-in{padding:11px 14px}
.drawer h4{margin:0 0 8px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
.dcard{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.dcard h4{margin:0 0 6px}
.dcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:11.5px}
.dcard dt{color:var(--ink-3);white-space:nowrap}
.dcard dd{margin:0;text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.drow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.fld{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2);white-space:nowrap}
.fld input,.fld select{padding:3px 6px;background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;font-size:11px;font-family:"IBM Plex Mono",monospace}
.fld input[type=number]{width:74px;text-align:right}
.fld input[type=text]{width:120px}
.btn{padding:4px 11px;border-radius:3px;border:1px solid var(--accent);background:var(--accent);
  color:var(--accent-ink);cursor:pointer;font-size:11px;font-weight:500;white-space:nowrap}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--accent)}
.pill{padding:1px 7px;border-radius:9px;font-size:10px;font-weight:600;white-space:nowrap;
  border:1px solid var(--rule-2);color:var(--ink-2)}
.pill.ok{border-color:var(--on);color:var(--on)}
.pill.no{border-color:var(--off);color:var(--off)}

/* ═══ 본문 ═══════════════════════════════════════════════════ */
.body{display:grid;grid-template-columns:var(--railw,530px) 5px minmax(0,1fr);min-height:0}
.body[data-rail="closed"]{grid-template-columns:0 5px minmax(0,1fr)}
.rail{grid-column:1}.gutter{grid-column:2}.view{grid-column:3}
.gutter{background:var(--rule);cursor:col-resize}
.gutter:hover{background:var(--accent)}
.rail{background:var(--panel);overflow:auto;min-width:0;display:flex;flex-direction:column}
.body[data-rail="closed"] .rail{display:none}
.body[data-rail="closed"] .gutter{display:none}

.railbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:4px;
  flex-wrap:wrap;padding:5px 8px;border-bottom:1px solid var(--rule)}
.railbar .icon-btn{padding:3px 6px;font-size:10px}
.railbar .lbl{font-size:9px}
.railbar .seg button{padding:3px 6px;font-size:10px}
.railbar .mini{font-size:10px;padding:2px 4px}
.chhead,.chrow{display:grid;
  grid-template-columns:24px minmax(64px,1.15fr) 26px 56px 56px 56px 46px 50px 34px 34px;
  gap:3px;align-items:center;padding:2px 8px}
.chhead{position:sticky;top:35px;z-index:2;background:var(--panel-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);font-size:9.5px;letter-spacing:.02em;color:var(--ink-3);
  font-weight:600;text-align:right;padding-top:4px;padding-bottom:4px}
.chhead span:nth-child(-n+3){text-align:left}
.chhead .rf{text-align:center}
.chrow{border-bottom:1px solid var(--rule);min-height:25px}
.chrow:hover{background:var(--panel-2)}
.chrow.on{background:var(--accent-soft)}
.chrow .v{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:10px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.chrow .v.live{color:var(--ink)}
.chrow .nm{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrow .un{font-size:9.5px;color:var(--ink-3)}
.selbtn{width:19px;height:19px;border-radius:3px;border:1.5px solid var(--rule-2);background:transparent;
  cursor:pointer;padding:0;display:block}
.selbtn:hover{border-color:var(--accent)}
/* 기준 선택 — 전체는 꽉 채우고, 장치는 절반만 채워 한눈에 구분된다 */
.rf1,.rf2{height:17px;border-radius:3px;cursor:pointer;padding:0;font-size:9px;font-weight:700;
  border:1px solid var(--rule-2);background:transparent;color:var(--ink-3);width:100%}
.rf1:hover{border-color:var(--accent)}
.rf2:hover{border-color:var(--dev)}
.rf1[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rf2[aria-pressed="true"]{
  border-color:var(--dev);color:var(--dev);
  background:linear-gradient(to top,var(--dev) 0 50%,transparent 50% 100%);
}
details.grp{border-bottom:1px solid var(--rule)}
details.grp>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:5px 9px;
  background:var(--panel-2);font-size:11.5px;font-weight:500;position:sticky;top:35px;z-index:1}
details.grp>summary::-webkit-details-marker{display:none}
/* 장치·시트 전체선택 사각박스 — 클릭하면 그 그룹의 채널이 통째로 켜지고 꺼진다.
   접기/펴기와 겹치지 않도록 클릭을 여기서 가로챈다. */
.gsel{width:14px;height:14px;border-radius:2px;border:1.5px solid var(--rule-2);background:transparent;
  padding:0;flex:0 0 auto;cursor:pointer;position:relative;display:inline-block}
.gsel:hover{border-color:var(--accent)}
.gsel[data-sel="all"]{background:var(--accent);border-color:var(--accent)}
.gsel[data-sel="all"]::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid var(--accent-ink);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.gsel[data-sel="some"]{border-color:var(--accent)}
.gsel[data-sel="some"]::after{content:"";position:absolute;left:2px;top:4.5px;width:7px;height:2.5px;
  background:var(--accent);border-radius:1px}
details.grp>summary::before{content:"▸";color:var(--ink-3);font-size:10px;transition:transform .12s;display:inline-block}
details.grp[open]>summary::before{transform:rotate(90deg)}
details.grp>summary .cnt{margin-left:auto;font-size:9.5px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
details.dev{border-bottom:2px solid var(--rule-2)}
details.dev>summary{background:var(--sunken);top:0;font-weight:600}

/* ═══ 뷰포트 ═════════════════════════════════════════════════ */
.view{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ground)}
/* 상태 바가 좁은 화면에서 여러 줄로 접히면 파형이 들어갈 자리를 먹는다.
   차트가 이 화면의 목적이므로, 자리가 모자라면 **상태 바 쪽이** 스크롤한다. */
.statusbar{background:var(--panel);border-bottom:1px solid var(--rule);flex:0 0 auto;
  max-height:clamp(84px, 18vh, 300px);overflow-y:auto}
/* 좁아지면 캡션부터 접는다 — 버튼은 남기고 글자만 줄인다 */
@media (max-width:1240px){
  .statusbar .lbl{display:none}
  .sbrow{gap:6px;padding:4px 8px}
  .seg button{padding:3px 7px}
  .statusbar .readout{font-size:9.5px}
}
.sbrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 10px}
.sbrow+.sbrow{border-top:1px solid var(--rule)}
.lbl{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.play{padding:5px 13px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:3px;cursor:pointer;font-weight:500;font-size:11.5px;min-width:72px}
.tune{padding:5px 12px;background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent);
  border-radius:3px;cursor:pointer;font-weight:500;font-size:11.5px;white-space:nowrap}
.tune:hover{background:var(--accent);color:var(--accent-ink)}
.seg{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;flex:0 0 auto}
.seg button{padding:4px 9px;background:var(--panel-2);border:0;border-left:1px solid var(--rule);
  cursor:pointer;font-size:11px;color:var(--ink-2);white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:600}
.seg button:disabled{opacity:.32;cursor:not-allowed}
.seg.cyc button{min-width:38px;font-family:"IBM Plex Mono",monospace}
.stepper{display:flex;align-items:center;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.stepper button{width:28px;padding:4px 0;background:var(--panel-2);border:0;cursor:pointer;color:var(--ink);font-size:14px;line-height:1}
.stepper button:hover{background:var(--accent-soft)}
.stepper .zval{min-width:94px;text-align:center;font-size:10.5px;padding:0 6px;color:var(--ink-2);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.scrollrow{display:flex;align-items:center;gap:7px;flex:1 1 240px;min-width:180px}
.scrollrow input[type=range]{flex:1 1 auto;accent-color:var(--accent);height:16px}
.readout{font-size:10.5px;color:var(--ink-2);white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.readout b{color:var(--ink);font-weight:600}
.spacer{flex:1 1 auto}
select.mini{padding:3px 5px;background:var(--panel-2);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;font-size:11px;font-family:"IBM Plex Mono",monospace}

.charts{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.chart{background:var(--panel);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-width:0;flex:0 0 auto;overflow:hidden}
/* 파형 패널만 남은 높이를 차지한다. basis 0 이라야 다른 패널을 밀어내지 않는다. */
.chart.grow{flex:1 1 0;min-height:190px}
.chart-h{position:relative;z-index:2;background:var(--panel);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 10px;border-bottom:1px solid var(--rule)}
.chart-h h3{margin:0;font-size:11px;font-weight:600}
.chart-h .sub{font-size:10px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.clip{font-size:9px;font-weight:600;padding:1px 5px;border-radius:2px;border:1px solid var(--st-trigger);color:var(--st-trigger);white-space:nowrap}
.legend{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto;font-size:10px;max-width:62%;overflow:hidden}
.lg{display:flex;align-items:center;gap:4px;color:var(--ink-2)}
.lg i{width:10px;height:2.5px;border-radius:1px;display:block;flex:0 0 auto}
.cwrap{position:relative;padding:4px;flex:1 1 auto;min-height:0}
canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
canvas.dragging{cursor:grabbing}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .09s;background:var(--panel);
  border:1px solid var(--rule-2);border-radius:3px;padding:5px 7px;font-size:10.5px;box-shadow:var(--shadow);
  z-index:5;white-space:nowrap;font-family:"IBM Plex Mono",monospace}
.empty{color:var(--ink-3);font-size:11.5px;padding:22px 10px;text-align:center;line-height:1.9}

/* 하모닉 표시창 */
.harmwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:8px;padding:8px}
.harmcard{border:1px solid var(--rule);border-radius:4px;padding:8px 10px;background:var(--panel-2)}
.harmcard .hh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.harmcard .hh b{font-size:11.5px}
.harmcard .thd{margin-left:auto;font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.hbar{display:grid;grid-template-columns:30px 1fr 52px;gap:5px;align-items:center;font-size:10px;
  font-family:"IBM Plex Mono",monospace;margin-bottom:2px}
.hbar .track{height:8px;background:var(--sunken);border-radius:2px;overflow:hidden}
.hbar .fill{height:100%;border-radius:2px}
.hbar.f1 .ord{color:var(--accent);font-weight:700}

/* ═══ 하단 비교표 ════════════════════════════════════════════ */
.bottom{background:var(--panel);border-top:1px solid var(--rule);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.bottom[data-open="false"] .btm-body{display:none}
.btm-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 10px;border-bottom:1px solid var(--rule);background:var(--panel-2)}
.btm-h .ttl{font-size:11px;font-weight:600;letter-spacing:.04em}
.btm-h .meta{font-size:10.5px;color:var(--ink-3)}
.chip{padding:1px 6px;border-radius:2px;background:var(--accent-soft);color:var(--ink);font-size:10px;
  font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.btm-body{overflow:auto;flex:1 1 auto;min-height:0}
table.cmp{border-collapse:collapse;width:100%;font-size:10.5px;white-space:nowrap}
table.cmp th,table.cmp td{padding:3px 7px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
table.cmp th{background:var(--panel-2);position:sticky;top:0;z-index:2;font-size:9.5px;color:var(--ink-3);font-weight:600;text-align:right}
table.cmp th:nth-child(-n+5){text-align:left}
table.cmp td{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.cmp td:nth-child(-n+5){text-align:left;font-family:inherit;color:var(--ink)}
table.cmp tr:hover td{background:var(--panel-2)}
table.cmp tr.isref td{background:var(--accent-soft)}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.grpsplit{background:var(--sunken)!important;font-weight:600;color:var(--ink)!important}

/* ═══ 로그 ═══════════════════════════════════════════════════ */
.logpane{position:fixed;right:0;top:0;bottom:0;width:320px;z-index:20;background:var(--panel);
  border-left:1px solid var(--rule-2);box-shadow:-2px 0 12px rgba(0,0,0,.14);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .16s}
.logpane[data-open="true"]{transform:none}
.logpane header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.metric{background:var(--panel);padding:7px 9px}
.metric dt{font-size:9.5px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;margin:0}
.metric dd{margin:2px 0 0;font-size:14px;font-weight:500;font-family:"IBM Plex Mono",monospace}
.metric dd small{font-size:10px;color:var(--ink-3);font-weight:400;margin-left:2px;font-family:inherit}
.log{flex:1 1 auto;overflow-y:auto;background:var(--sunken)}
.log-i{display:grid;grid-template-columns:auto 1fr;gap:7px;padding:4px 10px;border-bottom:1px solid var(--rule);font-size:10.5px;align-items:baseline}
.log-i:nth-child(odd){background:var(--panel)}
.tag{font-size:9px;font-weight:600;text-transform:uppercase;padding:1px 4px;border-radius:2px;color:#fff;white-space:nowrap}
.tag.trigger{background:var(--st-trigger)}.tag.event{background:var(--st-event);color:#231a00}
.tag.range{background:var(--st-range)}.tag.seg{background:var(--ink-3)}
.tag.view{background:var(--accent);color:var(--accent-ink)}.tag.cfg{background:var(--dev)}
.tag.io{background:var(--l5)}
.log-m{min-width:0;overflow-wrap:anywhere}

/* ═══ L1·L2·L3 구획 타이틀바 ═════════════════════════════════
   구획마다 색을 달리하고, 타이틀바를 클릭하면 그 구획이 접힌다.
   버튼·입력칸을 누른 것은 접기로 치지 않는다(JS에서 걸러낸다). */
.lbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 10px;cursor:pointer;
  border-bottom:1px solid var(--rule);user-select:none}
.lbar>*{cursor:auto}
.lbar .lv,.lbar .ttl,.lbar .caret{cursor:pointer}
.lbar .lv{font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:3px;
  color:#fff;font-family:"IBM Plex Mono",monospace;flex:0 0 auto}
.lbar .ttl{font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.lbar .caret{font-size:10px;color:var(--ink-3);width:12px;text-align:center;transition:transform .12s}
.lbar[data-open="false"] .caret{transform:rotate(-90deg)}
.lbar.l1{background:var(--l1-soft);border-left:3px solid var(--l1)}
.lbar.l1 .lv{background:var(--l1)}   .lbar.l1 .ttl{color:var(--l1)}
.lbar.l2{background:var(--l2-soft);border-left:3px solid var(--l2)}
.lbar.l2 .lv{background:var(--l2)}   .lbar.l2 .ttl{color:var(--l2)}
.lbar.l3{background:var(--l3-soft);border-left:3px solid var(--l3)}
.lbar.l3 .lv{background:var(--l3)}   .lbar.l3 .ttl{color:var(--l3)}
.lbar.l4{background:var(--l4-soft);border-left:3px solid var(--l4)}
.lbar.l4 .lv{background:var(--l4)}   .lbar.l4 .ttl{color:var(--l4)}
.lbar.l5{background:var(--l5-soft);border-left:3px solid var(--l5)}
.lbar.l5 .lv{background:var(--l5)}   .lbar.l5 .ttl{color:var(--l5)}
.anbtn{border-color:var(--l4);color:var(--l4);font-weight:600}
.anbtn[aria-pressed="true"]{background:var(--l4);border-color:var(--l4);color:#fff}
.lbar1{background:var(--l1-soft)}
.app[data-l1="closed"] .setgroup{display:none}
.rail[data-open="false"] .chhead,.rail[data-open="false"] #chTree{display:none}

/* ═══ Analysis / Marking ═════════════════════════════════════
   좌측 세로 버튼 · 중앙 오버레이 · 우측 조건/판독.
   1행은 높이가 고정이라 차트가 화면 밖으로 나가지 않고, 2행만 스크롤한다. */
.an{display:grid;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--ground);
  grid-template-columns:96px minmax(0,1fr) 336px;
  grid-template-rows:minmax(200px,var(--anmid,40vh)) minmax(0,1fr);
  gap:8px;padding:8px}
/* ③을 접으면 1행이 내용 높이로 줄어 빈 칸이 남지 않는다 */
.an[data-mid="closed"]{grid-template-rows:auto minmax(0,1fr)}
.an[data-mid="closed"] .an-mid .anpanel{flex:0 0 auto}
.an-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:3px;min-width:0;
  overflow:hidden}
.an-mid {grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex}
.an-side{grid-column:3;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:auto}
.an-low {grid-column:1/-1;grid-row:2;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
@media (max-width:1360px){
  .an{grid-template-columns:88px minmax(0,1fr) 290px}
}

/* 좌측 레일 — 버튼을 작게, 묶음마다 접어서 스크롤 없이 다 보이게.
   시험 중에 눌러야 할 것은 세 개(측정 · 연동 · TEST)뿐이고, 나머지는 접어 둔다. */
.an-rail .rgrp{display:flex;align-items:center;gap:3px;width:100%;padding:2px 4px;
  background:transparent;border:0;border-bottom:1px solid var(--rule);cursor:pointer;
  font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);text-align:left}
.an-rail .rgrp:hover{color:var(--l4)}
.an-rail .rgrp i{font-style:normal;font-size:8px;width:7px;opacity:.8}
.an-rail .rbody{display:flex;flex-direction:column;gap:3px;padding-bottom:2px}
/* display 를 준 자리에는 hidden 이 먹지 않는다 — 접기가 화살표만 바꾸고 끝나지 않도록 */
.an-rail .rbody[hidden]{display:none}
.an-rail .rb{width:100%;justify-content:center;text-align:center;
  padding:3px 4px;font-size:10px;line-height:1.25;border-radius:3px}
.an-rail .rstat{font-size:9px;color:var(--ink-2);background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:3px 4px;line-height:1.42;font-family:"IBM Plex Mono",monospace;
  word-break:break-all}
/* 그래도 넘치면 레일만 스크롤한다 — 화면 전체가 밀리는 것보다 낫다 */
.an-rail[data-tight="true"]{overflow-y:auto}

.anpanel{background:var(--panel);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;flex:0 0 auto}
.anpanel.fill{flex:1 1 auto;min-height:0}
.anpanel>h4{margin:0;padding:5px 10px;border-bottom:1px solid var(--rule);background:var(--panel-2);
  font-size:11px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  cursor:pointer;user-select:none;flex:0 0 auto}
.anpanel>h4>*{cursor:auto}
.anpanel>h4 .pcaret{cursor:pointer;color:var(--ink-3);font-size:10px;width:11px;text-align:center;
  transition:transform .12s;display:inline-block}
.anpanel>h4 .sub{font-weight:400;font-size:10px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.anpanel>h4 .spacer{flex:1 1 auto}
.anpanel[data-open="false"]>*:not(h4){display:none}
.anpanel[data-open="false"]>h4{border-bottom:0}
.anpanel[data-open="false"] .pcaret{transform:rotate(-90deg)}
.anpad{padding:6px 8px}
.pklg{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;margin-left:auto}
.pklg span{display:flex;align-items:center;gap:4px;color:var(--ink-2)}
.pklg i{width:11px;height:2.5px;border-radius:1px;display:block}

/* (1) 조건 · (2) 판독 — 우측 */
.anrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 8px}
.anrow+.anrow{border-top:1px solid var(--rule)}
.anrow .fld{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--ink-2);white-space:nowrap}
.anrow input[type="number"],.anrow input[type="text"]{width:70px;padding:3px 5px;background:var(--panel-2);
  color:var(--ink);border:1px solid var(--rule);border-radius:3px;font-size:10.5px;
  font-family:"IBM Plex Mono",monospace}
.anrow input[type="text"].wide{width:150px;font-family:inherit}
.anrow select{padding:3px 5px;background:var(--panel-2);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;font-size:10.5px;max-width:100%}
.anrow textarea{flex:1 1 240px;min-width:180px;padding:5px 7px;background:var(--panel-2);
  color:var(--ink);border:1px solid var(--rule);border-radius:3px;font-size:10.5px;
  font-family:"IBM Plex Sans KR","IBM Plex Sans",sans-serif;resize:vertical}
.anrow .grow{flex:1 1 120px;min-width:90px}
.anrow .grow select,.anrow .grow input{width:100%}

/* (4) 채널별 개별차트 — 횡배열 + 우측 채널 버튼 */
.chgrid{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:0}
.chcells{display:grid;gap:1px;background:var(--rule);min-width:0}
.chcell{background:var(--panel);min-width:0;display:flex;flex-direction:column}
.chcell h5{margin:0;padding:3px 7px;font-size:10px;font-weight:600;display:flex;align-items:center;gap:5px;
  background:var(--panel-2);border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden}
.chcell h5 .u{color:var(--ink-3);font-weight:400}
.chcell h5 .v{margin-left:auto;font-family:"IBM Plex Mono",monospace;color:var(--ink-2);font-size:9.5px}
.chpick{border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:2px;padding:6px;
  overflow:auto;background:var(--panel-2)}
.chpick .hd{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.chbtn{display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid var(--rule-2);
  border-radius:3px;background:var(--panel);color:var(--ink-2);font-size:10px;cursor:pointer;
  text-align:left;white-space:nowrap;overflow:hidden;flex:0 0 auto;min-height:28px}
.chbtn i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.chbtn .nm2{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.chbtn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chbtn em{font-style:normal;font-size:8px;font-weight:700;color:var(--l4);margin-left:4px}
.chbtn small{color:var(--ink-3);font-size:8.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chbtn[aria-pressed="true"]{border-color:var(--l4);background:var(--l4-soft);color:var(--ink)}
.chbtn:hover{border-color:var(--l4)}

.chips{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px;max-height:84px;overflow:auto}
.chip-ch{padding:2px 7px;border:1px solid var(--rule-2);border-radius:11px;background:var(--panel-2);
  color:var(--ink-2);font-size:10.5px;cursor:pointer;white-space:nowrap}
.chip-ch:hover{border-color:var(--l4);color:var(--l4)}
.chip-ch[aria-pressed="true"]{background:var(--l4);border-color:var(--l4);color:#fff}

.corr td.hi{background:var(--l4);color:#fff;font-weight:600}
.corr td.mid{background:var(--l4-soft)}
table.plain.corr{width:auto;min-width:340px}
table.plain.corr th,table.plain.corr td{padding:5px 14px}
.markrow.on{background:var(--l4-soft)}
.an-side table.plain th,.an-side table.plain td{padding:4px 6px;font-size:10px}
.an-side table.plain th{font-size:8.5px}
.reprow input{width:100%;min-width:66px;padding:2px 5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;font-size:10.5px;font-family:inherit;text-align:left}
.markrow input{width:100%;min-width:66px;padding:2px 5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.markrow input.t{font-family:inherit;text-align:left}
.markrow input.tagname{font-weight:700;min-width:56px;text-align:center;color:var(--l4)}
.markrow input.tagdesc{min-width:190px}
.markrow input.tagnote{min-width:170px}
/* INDEX — 시퀀스가 언제 무엇을 시켰는지 파형 위에 시간축으로 */
.ixwrap{flex:0 0 auto;margin:2px 0 6px;padding:0 2px}
.ixhd{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--l5);margin-bottom:3px}
.ixhd span{font-size:9.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.ixbar{position:relative;height:20px;background:var(--sunken);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden}
.ixb{position:absolute;top:0;bottom:0;padding:0;border:0;border-left:1px solid var(--panel);
  background:color-mix(in srgb,var(--k) 26%,transparent);cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-width:3px}
.ixb>span{font-size:8.5px;font-weight:600;color:var(--k);white-space:nowrap;
  padding:0 2px;pointer-events:none}
.ixb:hover{background:color-mix(in srgb,var(--k) 42%,transparent)}
.ixb.on{background:var(--k)}
.ixb.on>span{color:#fff}
.ixnow{position:absolute;top:0;bottom:0;width:2px;background:var(--st-event);
  box-shadow:0 0 5px var(--st-event);pointer-events:none}
.ixax{position:relative;height:12px;margin-top:1px}
.ixt{position:absolute;top:0;font-size:8.5px;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}
.ixt:first-child{transform:none}
.ixt:last-child{transform:translateX(-100%)}
table.seqt tr.cur{background:color-mix(in srgb,var(--l5) 14%,transparent)}
table.seqt tr.cur td{font-weight:600}
.ckl{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--ink-2);white-space:nowrap}
.anempty{padding:22px 12px;text-align:center;color:var(--ink-3);font-size:11.5px;line-height:1.9}

/* ═══ 다른 탭 ════════════════════════════════════════════════ *//* ═══ 다른 탭 ════════════════════════════════════════════════ */
.pane{display:none;min-height:0;min-width:0}
.pane[data-active="true"]{display:flex;flex:1 1 auto;flex-direction:column}
.pane.doc{overflow:auto;padding:16px 20px}
.doc-in{max-width:1480px;display:flex;flex-direction:column;gap:18px;width:100%}
.doc-in h2{font-size:15px;margin:0 0 3px;font-weight:600}
.doc-in h3{font-size:11px;margin:0 0 7px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.doc-in p{margin:0;color:var(--ink-2);max-width:900px;font-size:12px;line-height:1.75}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:9px}
.tablewrap{overflow:auto;border:1px solid var(--rule);border-radius:4px;background:var(--panel);max-height:430px}
table.plain{border-collapse:collapse;width:100%;font-size:11px}
table.plain th,table.plain td{padding:5px 9px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
table.plain th{background:var(--panel-2);font-size:9.5px;text-transform:uppercase;color:var(--ink-3);font-weight:600;position:sticky;top:0}
table.plain td.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
table.plain input{width:100%;min-width:64px;padding:2px 5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;font-size:10.5px;font-family:"IBM Plex Mono",monospace}
table.plain input.t{text-align:left;font-family:inherit}
/* ═══ L5 · 수동 제어 상태 바 (DI · DO · AO) ═══════════════════
   장치 자체확인용 줄이다. AO를 AI에, DO를 DI에 결선해 두고 눌러 가며
   하드웨어를 스스로 확인한다. 그래서 **좌우 스크롤 없이 전부 보이는 것**이
   이 줄의 요구조건이다 — 스크롤 뒤에 숨은 접점은 확인이 안 된다.

   아이콘 크기는 JS가 폭에 맞춰 계산해 --iosz 로 내려준다(하한 20px).
   그래도 모자라면 가로로 늘리지 않고 줄을 접는다. */
.iobar{background:var(--panel);border-top:1px solid var(--rule);display:flex;flex-direction:column;
  min-height:0;overflow:hidden}
.iobar[data-open="false"] .iowrap{display:none}
.iowrap{overflow:hidden;padding:6px 10px 8px;background:var(--sunken)}
.iobar{max-height:clamp(58px, 16vh, 210px)}
.iorow{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.iodev{display:flex;align-items:stretch;gap:5px;padding:5px 7px 6px;background:var(--panel);
  border:1px solid var(--rule);border-radius:5px;min-width:0}
.iodev>.dvtag{display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding-right:7px;margin-right:1px;border-right:1px solid var(--rule);white-space:nowrap}
.dvtag b{font-size:10.5px;color:var(--l5);letter-spacing:.02em}
.dvtag span{font-size:8.5px;color:var(--ink-3)}
.iosec{display:flex;align-items:stretch;gap:4px;min-width:0}
.iosec+.iosec{padding-left:6px;border-left:1px dashed var(--rule)}
.iopack{display:flex;flex-wrap:wrap;gap:3px;min-width:0}

/* 구역 머리 — DO의 것은 누르면 전체 RESET */
.sechd{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 5px 0 1px;
  background:transparent;border:0;cursor:default;white-space:nowrap;text-align:left}
.sechd b{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--ink-3)}
.sechd span{font-size:8.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
button.sechd{cursor:pointer;border-radius:3px}
button.sechd:hover{background:var(--panel-2)}
button.sechd:hover b{color:var(--st-trigger)}

/* 접점 아이콘 (DI · DO) — 아주 작은 글씨 + 색으로 상태 */
.iob{--c:var(--off);
  width:var(--iosz,30px);height:var(--iosz,30px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:0;border:1px solid var(--rule-2);border-radius:3px;cursor:pointer;
  background:var(--panel-2);color:var(--ink-2);line-height:1;overflow:hidden;position:relative}
.iob .id{font-size:calc(var(--iosz,30px)*.26);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;opacity:.9}
.iob .st{font-size:calc(var(--iosz,30px)*.40);font-weight:700;letter-spacing:.02em}
.iob[data-lit="true"]{background:var(--c);border-color:var(--c);color:#fff}
.iob[data-lit="true"] .id{opacity:.85}
/* 결선 자체확인 — 짝지은 DI가 DO를 따라오지 않으면 모서리에 표시 */
.iob[data-mis="true"]::after{content:"";position:absolute;top:1px;right:1px;
  width:5px;height:5px;border-radius:50%;background:var(--st-event);
  box-shadow:0 0 0 1px var(--panel)}

/* AO — 아이콘 자체를 상하로 끌어 값을 맞추면 그대로 나간다 */
.aob{--f:0;
  width:calc(var(--iosz,30px)*1.28);height:var(--iosz,30px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:0;border:1px solid var(--rule-2);border-radius:3px;cursor:ns-resize;
  background:var(--panel-2);color:var(--ink-2);line-height:1;overflow:hidden;
  position:relative;touch-action:none;user-select:none}
/* 값은 아래에서 차오르는 띠로 보여 준다 — 한눈에 크기가 읽힌다 */
.aob::before{content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--f)*100%);background:var(--l5);opacity:.9}
.aob .id,.aob .vv{position:relative;z-index:1}
.aob .id{font-size:calc(var(--iosz,30px)*.26);font-weight:600;font-variant-numeric:tabular-nums}
.aob .vv{font-size:calc(var(--iosz,30px)*.30);font-weight:600;font-variant-numeric:tabular-nums}
.aob[data-hot="true"] .vv{color:#fff}
.aob[data-full="true"] .id{color:#fff}
.aob:focus-visible,.iob:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.aob[data-drag="true"]{border-color:var(--l5);box-shadow:0 0 0 2px var(--accent-soft)}

.iohint{font-size:9.5px;color:var(--ink-3);white-space:nowrap;align-self:center}
/* 잠금 — 누를 수는 있게 두고(그래야 왜 안 되는지 알려 줄 수 있다) 눈으로만 구분한다 */
.iobar[data-live="false"] .iob[data-kind="do"],.iobar[data-live="false"] .aob{opacity:.62}
.iobar[data-live="false"] .iob[data-kind="do"]:hover,.iobar[data-live="false"] .aob:hover{opacity:.85}
.iobar[data-live="true"] .lbar.l5 .ttl::after{content:" · 조작 허용";color:var(--st-trigger);font-weight:600}

/* IO 선택메뉴 — 내부 탭 */
.iotabs{margin:10px 0 4px}
.iotabs button b{font-weight:700;opacity:.75;margin-left:3px}
.iopane{display:none}
.iopane[data-on="true"]{display:block}
.wizgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:10px}
.kvt{font-size:12px}
.kvt .kvk{color:var(--ink-2);white-space:nowrap;padding-right:10px;width:38%}
.kvt .kvv{color:var(--ink)}
.wizwarn{margin-top:10px;padding:8px 12px;border-left:3px solid var(--st-trigger);
  background:color-mix(in srgb, var(--st-trigger) 8%, transparent);border-radius:0 6px 6px 0}
.wizwarn p{margin:2px 0;color:var(--st-trigger);font-size:12.5px}
.wiznote{margin-top:8px;padding:8px 12px;border-left:3px solid var(--rule);border-radius:0 6px 6px 0}
.wiznote p{margin:3px 0;color:var(--ink-2);font-size:12px;line-height:1.5}
/* 세부설정 탭 */
/* 설정 화면 상단 닫기 바 — 들어온 곳으로 되돌려 준다.
   탭으로 들어오면 나가는 길이 안 보여서 "안 닫히는" 화면이 된다. */
.popbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:9px;
  padding:7px 14px;background:var(--panel);border-bottom:1px solid var(--rule)}
.popbar b{font-size:12px;color:var(--l5)}
#pane-io .doc-in{padding-top:12px}
.iocfg{display:flex;flex-direction:column;gap:14px}
.iocfg .tablewrap{max-height:none}
.iocfg table.plain th{text-transform:none;font-size:10px;letter-spacing:0}
.iocfg table.plain input,.iocfg table.plain select{width:100%;min-width:54px;padding:2px 4px;
  font-size:11px;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:3px}
.iocfg table.plain input.t{min-width:96px}
.iocfg table.plain td{padding:3px 5px}
.iocfg table.plain td.n{min-width:96px}
.iocfg table.plain select{min-width:104px}
.iocfg table.plain input.s{min-width:44px;width:52px;text-align:center;font-family:inherit;font-weight:600}
.iocfg table.plain select.csel{min-width:66px;font-weight:600}
.iocfg td.pv{white-space:nowrap;min-width:74px}
.pvb{display:inline-block;min-width:26px;padding:2px 5px;margin-right:3px;border-radius:3px;
  font-size:10px;font-weight:700;text-align:center;color:#fff}
.wseg{display:inline-flex;gap:0}
.wseg button{padding:2px 8px;font-size:10px;white-space:nowrap}
.linkcell{font-size:10px;color:var(--ink-3)}
.rowdel{padding:1px 6px;font-size:11px;background:transparent;border:1px solid var(--rule);
  border-radius:3px;color:var(--ink-3);cursor:pointer}
.rowdel:hover{border-color:var(--st-trigger);color:var(--st-trigger)}
.note{border-left:2px solid var(--accent);padding:2px 0 2px 11px;color:var(--ink-2);font-size:11.5px;max-width:900px;line-height:1.7}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}