/* ============================================================
   SUM:NA 디자인 시스템 — 브로셔 톤(다크 네이비 관제 UI) 공통 토큰
   스크린샷 품질이 곧 상품성: 1920×1080 한 컷 · 큰 숫자 · 얇은 보더 · 솔루션 컬러 1색
   ============================================================ */
:root{
  /* 본문 : 우측 패널 분할 비율 — 상단 버튼으로 전환하고 브라우저에 기억된다 */
  --split-main:7fr; --split-side:3fr;
  --bg:#0A1422; --panel:#101F35; --panel2:#0E1B2D; --line:#23364F; --line2:#1A2C44;
  --text:#EAF2FB; --sub:#8FA6C4; --dim:#5F7793;
  --brand:#00D4C8;
  --permit:#FF8A3D; --know:#2BD9A9; --equip:#3D8BFF; --op:#8B7CF6; --power:#E9A400;
  --cctv:#EE5A7D; --pid:#0EA5C4;
  --ok:#2BD9A9; --warn:#FFC24D; --danger:#FF5D5D;
  --accent:var(--brand); --accent-soft:rgba(0,212,200,.12);
  --r:14px; --r-sm:9px;
  --shadow:0 18px 44px rgba(0,0,0,.42);
  --bar-h:64px; --sub-h:46px;
  font-family:'Noto Sans KR','Pretendard',-apple-system,'Apple SD Gothic Neo','Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  background-image:
    linear-gradient(rgba(35,54,79,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,54,79,.16) 1px,transparent 1px),
    radial-gradient(1200px 600px at 78% -10%, rgba(0,212,200,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 110%, rgba(61,139,255,.08), transparent 60%);
  background-size:48px 48px,48px 48px,100% 100%,100% 100%;
}
body[data-solution="permit"]{--accent:var(--permit);--accent-soft:rgba(255,138,61,.13)}
body[data-solution="knowledge"]{--accent:var(--know);--accent-soft:rgba(43,217,169,.13)}
body[data-solution="equipment"]{--accent:var(--equip);--accent-soft:rgba(61,139,255,.13)}
body[data-solution="operation"]{--accent:var(--op);--accent-soft:rgba(139,124,246,.13)}
body[data-solution="power"]{--accent:var(--power);--accent-soft:rgba(233,164,0,.13)}
body[data-solution="pid"]{--accent:var(--pid);--accent-soft:rgba(14,165,196,.13)}
body[data-solution="cctv"]{--accent:var(--cctv);--accent-soft:rgba(238,90,125,.13)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#20344E;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ─────────────── 글로벌 바 (모든 화면 공통 · 스크린샷 브랜딩) */
.gbar{
  height:var(--bar-h); display:flex; align-items:center; gap:20px; padding:0 24px;
  border-bottom:1px solid var(--line); background:rgba(10,20,34,.86); backdrop-filter:blur(10px);
  position:relative; z-index:40;
}
.wordmark{font-size:22px;font-weight:900;letter-spacing:.06em;line-height:1}
.wordmark .colon{color:var(--accent)}
.platform-tag{
  font-size:10px;letter-spacing:.22em;color:var(--sub);font-weight:700;white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--line2);flex:0 0 auto;
}
.tabs{display:flex;gap:5px;margin-left:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:flex;align-items:center;gap:8px;padding:5px 13px;border-radius:11px;flex:0 0 auto;
  font-size:13px;font-weight:700;color:var(--sub);border:1px solid transparent;transition:.16s;
}
/* 제품명 + 부제 — "안심허가 / 위험성평가 · 작업허가서 생성" 처럼 무엇을 하는 서비스인지 함께 읽힌다 */
.tab .tx{display:flex;flex-direction:column;gap:1px;line-height:1.18;white-space:nowrap}
.tab .tx b{font-size:13px;font-weight:800}
.tab .tx em{font-size:9.5px;font-style:normal;font-weight:600;color:var(--muted);letter-spacing:.01em}
.tab.on .tx em{color:var(--sub)}
.tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tab .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.tab[data-k="permit"]{--c:var(--permit)} .tab[data-k="knowledge"]{--c:var(--know)}
.tab[data-k="equipment"]{--c:var(--equip)} .tab[data-k="operation"]{--c:var(--op)}
.tab[data-k="power"]{--c:var(--power)}
.tab[data-k="cctv"]{--c:#EE5A7D} .tab[data-k="pid"]{--c:#0EA5C4}
.tab.plan{--c:var(--muted)}
/* 도입했지만 아직 화면이 없는 서비스 — 자리는 지키되 열 수 없음을 분명히 한다 */
.tab.soon{opacity:.5}
.tab.soon:hover{opacity:.72}
.tab.soon .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.soonbadge{font-size:8.5px;font-weight:900;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line2);border-radius:4px;padding:2px 5px;margin-left:2px}
.tab .dot{color:var(--c)}
.tab.on{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line)}
.tab.on .dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.gright{margin-left:auto;display:flex;align-items:center;gap:14px}
.edge-led{
  display:flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;font-size:11.5px;font-weight:700;color:var(--sub);background:var(--panel2);
}
.edge-led .led{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(43,217,169,.18);animation:pulse 1.6s infinite}
.edge-led.off .led{background:var(--warn);box-shadow:0 0 0 3px rgba(255,194,77,.18)}
.edge-led.off{color:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.switch{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--sub);font-weight:700}
.switch input{display:none}
.switch .track{width:38px;height:20px;border-radius:999px;background:#1B2C44;border:1px solid var(--line);
  position:relative;transition:.2s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--sub);transition:.2s}
.switch input:checked + .track{background:rgba(255,194,77,.22);border-color:var(--warn)}
.switch input:checked + .track::after{left:20px;background:var(--warn)}
.who{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line2)}
.who .nm{font-size:11.5px;font-weight:800;color:var(--sub);white-space:nowrap}
.who .out{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--sub);font-size:13px;transition:.15s}
.who .out:hover{border-color:var(--accent);color:var(--accent)}

.demo-badge{
  font-size:10px;font-weight:900;letter-spacing:.18em;padding:6px 11px;border-radius:6px;
  color:#04121F;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));
}

/* ─────────────── 서브바 (솔루션 타이틀) */
.subbar{
  height:var(--sub-h);display:flex;align-items:center;gap:16px;padding:0 24px;
  border-bottom:1px solid var(--line2);background:rgba(14,27,45,.6);position:relative;z-index:30;
}
.subbar .stitle{font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px;
  white-space:nowrap;flex:0 0 auto}
.subbar .stitle::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--accent)}
.subbar .sdesc{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.subbar .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.scene-chip{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;padding:5px 11px;
  background:var(--accent-soft);
}

/* ─────────────── 스테이지 · 카드 */
.stage{height:calc(100vh - var(--bar-h) - var(--sub-h));padding:16px 24px 20px;overflow:hidden}
.grid{display:grid;gap:14px;min-height:0}
.stage > .grid{height:100%}
.card{
  background:linear-gradient(160deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  display:flex;flex-direction:column;min-height:0;position:relative;overflow:hidden;
}
.card.accent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent)}
.card.pad0{padding:0}
.card > .body{flex:1;min-height:0;overflow:auto}
.eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--sub);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.eyebrow .mark{width:6px;height:6px;border-radius:1px;background:var(--accent)}
.card h3{font-size:14.5px;font-weight:800;margin:7px 0 2px;letter-spacing:-.01em}
.card .sub{font-size:11.5px;color:var(--sub)}
.chead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.chead .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* 숫자 (브로셔 축소 게재 대비 큰 웨이트) */
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .num{font-size:38px;font-weight:900;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .num.md{font-size:28px}
.kpi .num.sm{font-size:22px}
.kpi .unit{font-size:13px;font-weight:700;color:var(--sub);margin-left:4px}
.kpi .lab{font-size:10.5px;letter-spacing:.16em;color:var(--sub);font-weight:800}
.ok{color:var(--ok)} .warn{color:var(--warn)} .danger{color:var(--danger)} .acc{color:var(--accent)}

/* 칩 · 배지 */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:var(--sub);border:1px solid var(--line);background:var(--panel2);
}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft)}
.chip.ev{cursor:pointer;transition:.15s}
.chip.ev:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px)}
.chip.ok{color:var(--ok);border-color:rgba(43,217,169,.4);background:rgba(43,217,169,.1)}
.chip.warn{color:var(--warn);border-color:rgba(255,194,77,.4);background:rgba(255,194,77,.1)}
.chip.danger{color:var(--danger);border-color:rgba(255,93,93,.42);background:rgba(255,93,93,.1)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.badge{
  font-size:10px;font-weight:900;letter-spacing:.14em;padding:4px 9px;border-radius:5px;
  background:rgba(255,255,255,.06);color:var(--sub);white-space:nowrap;
}
.badge.danger{background:rgba(255,93,93,.16);color:var(--danger)}
.badge.warn{background:rgba(255,194,77,.16);color:var(--warn)}
.badge.ok{background:rgba(43,217,169,.16);color:var(--ok)}
.badge.acc{background:var(--accent-soft);color:var(--accent)}

/* 버튼 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:9px;
  font-size:12.5px;font-weight:800;border:1px solid var(--line);color:var(--text);background:var(--panel2);
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:#06121D;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08);color:#06121D}
.btn.sm{padding:7px 12px;font-size:11.5px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* 입력 */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--sub)}
.field input,.field select,.field textarea{
  background:#0B1728;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 12px;
  outline:none;transition:.15s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:none;min-height:62px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* 미터 · 게이지 */
.meter{height:7px;border-radius:99px;background:#16263C;overflow:hidden;position:relative}
.meter > i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.meter.ok > i{background:var(--ok)} .meter.warn > i{background:var(--warn)} .meter.danger > i{background:var(--danger)}
.meter.off > i{background:#2A3D57}

/* 리포트 하단 주의 문구 — 모든 AI 출력은 검토용 초안이다 */
.ai-note{font-size:11px;line-height:1.65;color:var(--muted);padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.rangebar{position:relative;height:26px;margin-top:6px}
.rangebar .track{position:absolute;top:11px;left:0;right:0;height:4px;border-radius:99px;background:#16263C}
.rangebar .band{position:absolute;top:9px;height:8px;border-radius:99px;background:rgba(43,217,169,.18);
  border:1px solid rgba(43,217,169,.32)}
.rangebar .opt{position:absolute;top:6px;width:2px;height:14px;background:var(--sub);opacity:.7}
.rangebar .now{position:absolute;top:4px;width:10px;height:18px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);transition:left .5s}
.rangebar .now.out{background:var(--danger);box-shadow:0 0 0 4px rgba(255,93,93,.18)}

/* SDS 4분할 타일 */
.card.quad{padding:16px 18px;justify-content:flex-start;gap:2px}

/* 실험실 검사 Lot 스트립 — 예측 대비 실측 대조 */
.labstrip{display:flex;align-items:flex-end;gap:7px;height:104px;flex:0 0 auto}
.labstrip .lot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:100%}
.labstrip .bar{width:100%;border-radius:4px 4px 0 0;background:var(--ok);opacity:.85;transition:height .5s}
.labstrip .bar.warn{background:var(--warn)} .labstrip .bar.danger{background:var(--danger)}
.labstrip .v{font-size:11px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.labstrip .l{font-size:9px;color:var(--sub);text-align:center;letter-spacing:.02em}

/* 신호 요약 카드 — 내용 높이로 고정 (라벨 · 숫자 · 기준 · 미터) */
.card.sig{padding:12px 13px;gap:1px;justify-content:flex-start}
.card.sig .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.sig .lab{margin-bottom:2px}
.card.sig .num{margin-bottom:1px}

/* 리스트 · 테이블 */
.rowlist{display:flex;flex-direction:column;gap:8px;justify-content:flex-start}
.row{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;background:rgba(255,255,255,.015);transition:.15s;
}
.row:hover{border-color:var(--line);background:rgba(255,255,255,.035)}
.row.sel{border-color:var(--accent);background:var(--accent-soft)}
.row .tag{font-size:12px;font-weight:900;letter-spacing:.02em;min-width:62px}
.row .nm{font-size:12px;color:var(--sub);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:10px;letter-spacing:.14em;color:var(--sub);text-align:left;font-weight:800;
  padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line2);color:var(--text)}
tr:hover td{background:rgba(255,255,255,.02)}
.num-c{font-variant-numeric:tabular-nums;text-align:right}

/* 스텝 · 타임라인 */
.steps{display:flex;flex-direction:column;gap:9px;justify-content:flex-start}
.step{flex:0 0 auto;display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;background:rgba(255,255,255,.015)}
.step .n{width:23px;height:23px;flex:0 0 23px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:900;background:var(--accent-soft);color:var(--accent)}
.step .tx{font-size:12.5px;line-height:1.55}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:14px}
.timeline::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl{display:flex;gap:10px;padding:7px 0;position:relative}
.tl::before{content:"";position:absolute;left:-13px;top:12px;width:7px;height:7px;border-radius:50%;
  background:var(--line);border:2px solid var(--bg)}
.tl.on::before{background:var(--accent)}
.tl .t{font-size:10.5px;color:var(--sub);min-width:78px;font-variant-numeric:tabular-nums}
.tl .a{font-size:12px;font-weight:700}
.tl .c{font-size:11.5px;color:var(--sub)}

/* 로딩 — 스피너 대신 타이핑 도트/스켈레톤 */
.typing{display:inline-flex;gap:5px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35;animation:td 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.skel{background:linear-gradient(90deg,#132339 25%,#1A2E48 37%,#132339 63%);background-size:400% 100%;
  animation:sk 1.3s infinite;border-radius:7px;height:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel.lg{height:26px} .skel.xl{height:42px}

/* 오프라인 배너 */
.ai-off{
  display:none;align-items:center;gap:9px;padding:8px 13px;border-radius:9px;font-size:11.5px;font-weight:700;
  background:rgba(255,194,77,.1);border:1px solid rgba(255,194,77,.32);color:var(--warn);margin-bottom:10px;
}
.ai-off.show{display:flex}

/* 근거 원문 모달 */
.modal{position:fixed;inset:0;background:rgba(4,10,18,.72);backdrop-filter:blur(3px);z-index:80;
  display:none;place-items:center;padding:40px}
.modal.show{display:grid}
.modal .box{width:min(720px,92vw);max-height:76vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow)}
.modal h4{font-size:17px;font-weight:800;margin:8px 0 4px}
.modal .doctext{font-size:13px;line-height:1.85;color:#D5E3F4;margin-top:14px;white-space:pre-wrap}

/* 토스트 */
.toast-wrap{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:9px;z-index:90}
.toast{padding:12px 16px;border-radius:11px;background:var(--panel);border:1px solid var(--accent);
  font-size:12.5px;font-weight:700;box-shadow:var(--shadow);animation:tin .25s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* 차트 */
.chart{width:100%;height:100%;display:block}
.chart .grid-l{stroke:var(--line2);stroke-width:1}
.chart .axis-t{fill:var(--sub);font-size:9.5px;letter-spacing:.06em}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .line.thin{stroke-width:1.4;opacity:.55}
.chart .area{fill:url(#accgrad);opacity:.55}
.chart .base{stroke:var(--sub);stroke-dasharray:3 4;stroke-width:1;opacity:.5;fill:none}
.chart .anom{fill:rgba(255,93,93,.13);stroke:rgba(255,93,93,.3)}
.chart .pt{fill:var(--accent)}
.spark{display:block;width:74px;height:22px}
.spark path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}

/* 포털 전용 */
.hero{display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero .big{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1.16}
.hero .big em{font-style:normal;color:var(--brand)}
.hero p{font-size:13px;color:var(--sub);line-height:1.75;max-width:520px}
.principles{display:flex;gap:22px;margin-top:6px}
.principle{border-left:2px solid var(--brand);padding-left:11px}
.principle b{font-size:12.5px;display:block}
.principle span{font-size:10.5px;color:var(--sub)}
.slcard{
  display:flex;flex-direction:column;gap:9px;padding:16px 17px;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(160deg,var(--panel),var(--panel2));
  position:relative;overflow:hidden;transition:.18s;cursor:pointer;
}
.slcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)}
.slcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));
  box-shadow:0 14px 30px rgba(0,0,0,.34)}
.slcard .no{position:absolute;right:14px;top:10px;font-size:32px;font-weight:900;color:var(--c);opacity:.14}
.slcard .dom{font-size:9.5px;letter-spacing:.2em;font-weight:800;color:var(--c)}
.slcard .nm{font-size:19px;font-weight:900;letter-spacing:-.02em}
.slcard .nm .colon{color:var(--c)}
.slcard .ds{font-size:12px;font-weight:700;color:var(--c);line-height:1.55;min-height:34px}
.slcard .stat{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.slcard .stat b{font-size:22px;font-weight:900;color:var(--c);font-variant-numeric:tabular-nums}
.slcard .stat span{font-size:10.5px;color:var(--sub)}
.flow{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.flow .f{flex:1;text-align:center;padding:9px 4px;position:relative}
.flow .f b{font-size:11px;letter-spacing:.16em;font-weight:800;display:block}
.flow .f span{font-size:10px;color:var(--sub)}
.flow .f:not(:last-child)::after{content:"›";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  color:var(--line);font-size:16px}

/* ─────────────── 운영 이력 컴포넌트 */
.statrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;background:var(--line2);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;flex:0 0 auto}
.statrow .stat{background:var(--panel2);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.statrow .lab{font-size:9.5px;letter-spacing:.15em;font-weight:800;color:var(--sub)}
.statrow .v{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.statrow .v em{font-style:normal;font-size:11px;font-weight:700;color:var(--sub);margin-left:3px}
.statrow .sb{font-size:10.5px;color:var(--sub)}

.tablewrap{overflow:auto;min-height:0;flex:1;border:1px solid var(--line2);border-radius:11px}
.tablewrap table{width:100%}
.tablewrap thead th{position:sticky;top:0;background:#0D1A2C;z-index:2;white-space:nowrap}
.tablewrap tbody tr{cursor:pointer}
.tablewrap tbody tr.sel td{background:var(--accent-soft)}
.tablewrap td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.tablewrap td.wide{max-width:none;white-space:normal}

.brow{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.brow .bk{font-size:11px;color:var(--sub);min-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bb{flex:1;height:6px;border-radius:99px;background:#16263C;overflow:hidden}
.brow .bb > i{display:block;height:100%;border-radius:99px;background:var(--accent);opacity:.85}
.brow .bv{font-size:11px;font-weight:800;min-width:30px;text-align:right;font-variant-numeric:tabular-nums}

.minibars{display:flex;align-items:flex-end;gap:3px;height:74px}
.card .minibars{height:38px}
.minibars > i{flex:1;background:var(--accent);opacity:.7;border-radius:2px 2px 0 0;min-height:4px}
.minibars > i.warn{background:var(--warn);opacity:.85} .minibars > i.danger{background:var(--danger);opacity:.9}

.filters{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
.filters .chip{cursor:pointer;transition:.14s}
.filters .chip.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:var(--accent-soft)}
.tabs-sub{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:3px;flex:0 0 auto}
.tabs-sub button{padding:6px 13px;border-radius:7px;font-size:11.5px;font-weight:800;color:var(--sub);white-space:nowrap}
.tabs-sub button.on{background:var(--accent);color:#06121D}

/* 포털 활동 피드 */
.act{display:flex;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line2)}
.act:last-child{border-bottom:none}
.act .dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:0 0 7px}
.act .ac{flex:1;min-width:0}
.act .at{display:flex;align-items:center;gap:8px}
.act .an{font-size:10px;font-weight:900;letter-spacing:.1em}
.act .ts{font-size:10.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.act .ah{font-size:12.5px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act .ad{font-size:11px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slstats{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.slstats .sv{font-size:22px;font-weight:900;color:var(--c);font-variant-numeric:tabular-nums}
.slstats .sl{font-size:10.5px;color:var(--sub)}

/* 화면 분할 — .split2(본문|패널), .split3(좌측 고정|본문|패널) */
body[data-split="55"]{--split-main:5fr;--split-side:5fr}
body[data-split="37"]{--split-main:3fr;--split-side:7fr}
.split2{grid-template-columns:minmax(0,var(--split-main)) minmax(0,var(--split-side)) !important}
.split3{grid-template-columns:var(--split-fixed,340px) minmax(0,var(--split-main)) minmax(0,var(--split-side)) !important}
.splitbtn{display:flex;gap:3px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:3px}
.splitbtn button{padding:5px 9px;border-radius:6px;font-size:11px;font-weight:800;
  color:var(--sub);letter-spacing:.04em;white-space:nowrap;transition:.14s}
.splitbtn button:hover{color:var(--text)}
.splitbtn button.on{background:var(--accent);color:#06121D}

/* 유틸 */
.hstack{display:flex;align-items:center;gap:10px}
.vstack{display:flex;flex-direction:column;gap:10px;justify-content:flex-start}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{flex-wrap:wrap}
.mt{margin-top:10px} .mt2{margin-top:16px} .mb{margin-bottom:10px}
.fill{flex:1;min-height:0}
.scroll{overflow:auto;min-height:0}
.muted{color:var(--sub)}
.tiny{font-size:11px} .small{font-size:12px}
.b8{font-weight:800} .b9{font-weight:900}
.divider{height:1px;background:var(--line2);margin:12px 0}
.pulse-ring{animation:ring 1.8s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,93,93,.42)}70%{box-shadow:0 0 0 12px rgba(255,93,93,0)}
  100%{box-shadow:0 0 0 0 rgba(255,93,93,0)}}

/* ─────────────── 실증 과제 현황 — 도입 서비스 목록 */
.svclist{display:flex;flex-direction:column;gap:10px}
.svc{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2);transition:.16s;position:relative;overflow:hidden}
.svc .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.svc:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line));transform:translateY(-1px)}
.svc.off{opacity:.62;cursor:default}
.svc.off:hover{transform:none;border-color:var(--line)}
.svc .nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc .nm b{font-size:15.5px;font-weight:900;letter-spacing:-.01em}
.svc .nm b .colon{color:var(--c)}
.svc .nm em{font-size:11.5px;font-style:normal;font-weight:700;color:var(--c);letter-spacing:.01em}
.svc .dom{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.svc .go{font-size:11.5px;font-weight:800;color:var(--c);min-width:64px;text-align:right}
.svc .go.muted{color:var(--muted)}

.famlist{display:flex;flex-direction:column;gap:7px}
.fam{display:flex;align-items:baseline;gap:8px;font-size:11.5px;opacity:.42}
.fam .dot{width:6px;height:6px;border-radius:50%;background:var(--c);align-self:center}
.fam b{font-weight:700;color:var(--muted)}
.fam em{font-style:normal;font-size:10.5px;color:var(--muted)}
.fam.on{opacity:1}
.fam.on .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.fam.on b{font-weight:900;color:var(--text)}
.fam.on em{color:var(--sub)}

/* ─────────────── 위험성 매트릭스 (빈도 × 강도) */
.mtx{display:grid;grid-template-columns:46px repeat(3,1fr);gap:5px;align-items:center}
.mtx-l{font-size:10px;font-weight:800;color:var(--muted);text-align:right;padding-right:4px}
.mtx-s{font-size:10px;font-weight:800;color:var(--muted);text-align:center}
.mtx-c{display:grid;place-items:center;height:34px;border-radius:7px;font-size:13px;font-weight:900;
  font-style:normal;border:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.mtx-c.ok{border-color:color-mix(in srgb,var(--ok) 32%,var(--line))}
.mtx-c.warn{border-color:color-mix(in srgb,var(--warn) 32%,var(--line))}
.mtx-c.danger{border-color:color-mix(in srgb,var(--danger) 32%,var(--line))}
.mtx-c.on.ok{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.mtx-c.on.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.mtx-c.on.danger{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}

/* ─────────────── JSA 출력 양식 — 현재 쓰는 엑셀 서식 그대로 (흰 종이) */
.jsaform{background:#fff;color:#12202F;padding:16px 18px;border-radius:6px;overflow:auto;
  font-size:11px;line-height:1.45;height:100%}
.jsaform table{width:100%;border-collapse:collapse;margin-bottom:9px}
.jsaform td b{color:#0B3D91;font-weight:800}
.jsaform th,.jsaform td{border:1px solid #9AA9BC;padding:4px 6px;vertical-align:top;
  color:#12202F;font-size:10.5px;line-height:1.5}
.jsaform th{background:#EBEFF5;font-weight:800;font-size:10.5px;white-space:nowrap;text-align:left}
.jsaform td.c{text-align:center}
.jf-head{display:flex;align-items:flex-end;gap:14px;border-bottom:2px solid #12202F;
  padding-bottom:8px;margin-bottom:10px}
.jf-t{font-size:19px;font-weight:900;letter-spacing:-.02em;flex:1}
.jf-t span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#5A6B80;margin-top:2px}
.jf-meta{width:270px!important;margin:0!important;font-size:10px}
.jf-meta th{width:64px}
.jf-tab thead th{background:#DCE3ED;text-align:center}
.jf-sign th{width:52px;text-align:center;background:#EBEFF5}
.jf-sign td{height:38px}
.jf-foot{font-size:9.5px;color:#5A6B80;line-height:1.6;border-top:1px solid #C6D0DD;padding-top:6px}

@media print{
  .gbar,.subbar,.toast-wrap,.modal{display:none!important}
  .stage{height:auto;overflow:visible;padding:0}
  #viewIssue{display:block!important;grid-template-columns:none!important}
  #viewIssue > .vstack{display:none!important}
  #viewIssue > .card{border:none;background:#fff}
  .jsaform{height:auto}
}

/* ─────────────── 도면풀이 — 도면 위 인식 결과 오버레이 */
.pidview{flex:1;min-height:0;overflow:auto;border:1px solid var(--line2);border-radius:11px;
  background:#F7F9FC;display:flex;align-items:center;justify-content:center}
.pidwrap{position:relative;width:100%;line-height:0}
.pidwrap img{width:100%;display:block}
.pidsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pidsvg .pb{fill:rgba(14,165,196,.08);stroke-width:2.2}
.pidsvg .pb.hi{fill:rgba(14,165,196,.26);stroke-width:3.6}
.pidsvg .ps{fill:none;stroke-width:1.6}
.pidsvg .ps.hi{stroke-width:3.4;fill:rgba(255,255,255,.14)}
.pidsvg .ptx{font-size:9px;font-weight:800;letter-spacing:.02em}
.chip.on{opacity:1}

/* ─────────────── 현장지킴 — 2×2 관제 화면 */
.camgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:11px;
  flex:1;min-height:0}
.cam{position:relative;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;
  background:#0B131E;min-height:0}
.cam.danger{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,77,106,.16)}
.cam.warn{border-color:var(--warn)}
.cam.ok{border-color:color-mix(in srgb,var(--ok) 38%,var(--line))}

.camframe{position:relative;width:100%;height:100%;overflow:hidden;line-height:0}
/* contain + preserveAspectRatio="xMidYMid meet" 를 짝지어 이미지와 오버레이가
   똑같이 레터박스되게 한다 — cover 로 잘라내거나 fill 로 늘이면 박스가 사람에서 벗어난다. */
.camframe img{width:100%;height:100%;object-fit:contain;display:block;
  filter:saturate(.92) contrast(1.04) brightness(.95)}
.camsvg{position:absolute;inset:0;width:100%;height:100%}
.camsvg .cz{stroke-width:1.4;stroke-dasharray:7 4}
.camsvg .czt{font-size:9px;font-weight:800;letter-spacing:.02em;
  paint-order:stroke;stroke:rgba(4,10,18,.8);stroke-width:2.4px}
.camsvg .cdb{fill:none;stroke-width:1.6;opacity:.75}
.camsvg .cdc{fill:none;stroke-width:3;stroke-linecap:round}
.camsvg .cdl{stroke:none}
.camsvg .cdt{font-size:9.5px;font-weight:800;fill:#0B1420}
.camsvg .cdw{font-size:9.5px;font-weight:800;
  paint-order:stroke;stroke:rgba(4,10,18,.85);stroke-width:2.6px}
.camsvg .blink{animation:camblink 1.1s steps(1) infinite}
@keyframes camblink{0%,58%{opacity:1}59%,100%{opacity:.34}}

/* 화면에 구워진 시각 위에 우리 헤더를 덮어 실시간처럼 보이게 한다 */
.camhead{position:absolute;top:0;left:0;right:0;height:8.2%;min-height:22px;display:flex;
  align-items:center;gap:9px;padding:0 10px;background:rgba(8,14,22,.94);
  font-size:10.5px;font-weight:700;color:#C9D8E8;line-height:1}
.camhead .cmid{font-weight:900;letter-spacing:.06em}
.camhead .cmnm{color:#8FA6BE;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.camhead .cmlive{display:flex;align-items:center;gap:4px;margin-left:auto;color:#FF6B7F;
  font-weight:900;letter-spacing:.1em;font-size:9px}
.camhead .cmlive i{width:6px;height:6px;border-radius:50%;background:#FF4D6A;
  animation:pulse 1.4s infinite}
.camhead .cmts{font-variant-numeric:tabular-nums;color:#E3EDF7;font-weight:700}

/* 주사선 · 노이즈 — 영상이 도는 느낌 */
.camscan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.camscan::after{content:"";position:absolute;left:0;right:0;height:16%;
  background:linear-gradient(180deg,transparent,rgba(150,200,255,.07),transparent);
  animation:camsweep 5.5s linear infinite}
@keyframes camsweep{0%{top:-16%}100%{top:100%}}

.camfoot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:linear-gradient(0deg,rgba(6,12,20,.92),rgba(6,12,20,.55) 70%,transparent)}
.cambar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(6,14,24,.72);
  border-top:1px solid var(--line)}

/* ─────────────── 설비지킴 계통도 */
.eqlayout{width:100%;height:auto;display:block}
.eqlayout .eqflow{fill:none;stroke:var(--line2);stroke-width:1.6}
.eqlayout .eqar{fill:var(--line2)}
.eqlayout .eqnode rect{fill:var(--panel2);stroke:var(--line);stroke-width:1.4;transition:.16s}
.eqlayout .eqnode:hover rect{stroke:var(--accent)}
.eqlayout .eqnode.ok rect{stroke:color-mix(in srgb,var(--ok) 46%,var(--line))}
.eqlayout .eqnode.warn rect{stroke:var(--warn);fill:color-mix(in srgb,var(--warn) 10%,var(--panel2))}
.eqlayout .eqnode.danger rect{stroke:var(--danger);fill:color-mix(in srgb,var(--danger) 12%,var(--panel2))}
.eqlayout .eqt{font-size:8.5px;font-weight:800;fill:var(--text)}
.eqlayout .eqh{font-size:12px;font-weight:900;fill:var(--sub);font-variant-numeric:tabular-nums}
.eqlayout .eqnode.warn .eqh{fill:var(--warn)} .eqlayout .eqnode.danger .eqh{fill:var(--danger)}
.eqlayout .eqnode.ok .eqh{fill:var(--ok)}
.eqlayout .eqs{font-size:7px;font-weight:700;fill:var(--muted)}

/* ─────────────── 단계 안내 (안심허가 JSA 사이클) */
.stepbar{display:flex;align-items:center;gap:6px;padding:9px 14px;margin-bottom:12px;
  border:1px solid var(--line2);border-radius:11px;background:var(--panel2);flex:0 0 auto}
.stepbar .stp{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;
  cursor:pointer;transition:.15s;opacity:.55}
.stepbar .stp:hover{opacity:.85;background:rgba(255,255,255,.03)}
.stepbar .stp .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:900;border:1px solid var(--line);color:var(--muted)}
.stepbar .stp .t{font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
.stepbar .stp.ok{opacity:1}
.stepbar .stp.ok .n{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.stepbar .stp.on{opacity:1;background:var(--accent-soft)}
.stepbar .stp.on .n{border-color:var(--accent);color:#06121D;background:var(--accent)}
.stepbar .stp.on .t{color:var(--text);font-weight:800}
.stepbar .stpar{color:var(--line2);font-size:14px;font-style:normal}
.stepbar .stpd{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}

.emptyguide{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 4px}
.emptyguide .eg-t{font-size:12.5px;line-height:1.8;color:var(--sub);max-width:520px}

/* ─────────────── 도면풀이 — 검출 심볼 목록 (원본을 확대해 자리만 보여준다) */
.symgrid{flex:1;min-height:0;overflow:auto;display:grid;gap:9px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));padding-right:4px}
.sym{border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer;
  background:var(--panel2);transition:.15s}
.sym:hover{border-color:var(--accent);transform:translateY(-1px)}
.sym.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* 정사각 크롭 창 — 확대 좌표 계산이 창 비율에 기대므로 확실히 정사각으로 만든다 */
.sym-v{position:relative;height:0;padding-top:100%;background:#F7F9FC;overflow:hidden}
.sym-v > img{position:absolute;max-width:none;image-rendering:auto}
.sym-v > i{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);
  border:1.6px solid;border-radius:3px;opacity:.95}
.sym-l{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 7px;
  font-size:9.5px;font-weight:800;border-top:1px solid var(--line2)}
.sym-l span{color:var(--muted);font-weight:600}