/* 관제실 — VES Workspace 토큰(tokens.css)의 이름만 쓴다.
   같은 파일이 dashboard/v2/src/ops-room.css 에도 있다(원본 dashboard/ops/ — 테스트가 두 사본이 같은지 본다). */
.ops-room{display:grid;gap:20px;max-width:1280px}
.ops-room [hidden]{display:none!important}
.ops-room h2{margin:0}
.ops-meta{color:var(--secondary);font-size:12px}
.ops-mono{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11px}
.ops-empty{color:var(--muted);padding:8px 0;list-style:none}
.ops-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ops-toolbar p{margin:0;color:var(--secondary);font-size:12px}
.ops-fresh{color:var(--secondary);font-size:12px}
.ops-notice{margin:0;padding:12px 16px;border-radius:12px;background:var(--danger-bg);color:var(--ink)}

/* 지금 판단 */
.ops-hero{background:var(--surface);border-radius:16px;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px}   /* 오른쪽은 가장 긴 줄 폭만큼만 */
.ops-hero-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ops-hero-title{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.6px;overflow-wrap:anywhere}
.ops-hero-items{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ops-hero-items li{position:relative;padding-left:14px;line-height:1.7;overflow-wrap:anywhere;font-size:13.5px;color:var(--secondary)}
.ops-hero-items li.ops-di{display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;align-items:baseline}
.ops-hero-items li b{color:var(--ink);font-weight:650}
.ops-hero-items .ops-di-code{background:var(--inset)}
.ops-hero-items .ops-di-guess{background:var(--inset)}
.ops-hero-items li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.ops-hero-error{margin:12px 0 0;color:var(--status-error);overflow-wrap:anywhere}
.ops-facts{margin:0;display:grid;gap:10px;align-content:start;border-left:1px solid color-mix(in srgb,var(--ink) 9%,transparent);padding-left:20px}
.ops-facts div{display:flex;justify-content:space-between;gap:24px}
.ops-facts dt{color:var(--secondary)}
.ops-facts dd{margin:0;font-weight:600;text-align:right}
@media(max-width:760px){.ops-hero{grid-template-columns:1fr;padding:18px}.ops-facts{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);padding-top:14px}.ops-hero-title{font-size:18px;line-height:25px}}

/* 판단 배지 — 글자는 본문색, 점과 바탕만 색(호박색 글자는 밝은 바탕에서 안 읽힌다) */
.ops-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;color:var(--ink);background:color-mix(in srgb,var(--status-neutral) 16%,transparent)}
.ops-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--status-neutral)}
.ops-badge[data-level="ok"]{background:color-mix(in srgb,var(--status-ok) 14%,transparent)}
.ops-badge[data-level="ok"]::before{background:var(--status-ok)}
.ops-badge[data-level="watch"]{background:color-mix(in srgb,var(--status-warn) 20%,transparent)}
.ops-badge[data-level="watch"]::before{background:var(--status-warn)}
.ops-badge[data-level="act"]{background:color-mix(in srgb,var(--status-error) 15%,transparent)}
.ops-badge[data-level="act"]::before{background:var(--status-error)}
.ops-badge[data-level="running"]{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ops-badge[data-level="running"]::before{background:var(--accent);animation:ops-pulse 1.2s ease-in-out infinite}
@keyframes ops-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.ops-badge::before,.ops-step.live .ops-step-dot::before{animation:none!important}}

/* 패널 */
.ops-grid{display:grid;grid-template-columns:132px minmax(0,.9fr) minmax(0,1fr);gap:20px;align-items:stretch}
@media(max-width:900px){.ops-grid{grid-template-columns:1fr}}
/* 오늘 순찰 — 진행 막대처럼: 오전 · 오후 두 줄, 30분 칸 24개씩. 순찰한 칸만 보라 */
.ops-track{display:flex;flex-direction:column;gap:12px}
.ops-track h2{margin:0;font-size:14px}
.ops-track-n{font-size:22px;font-weight:700;line-height:1}.ops-track-n small{font-size:12px;color:var(--muted);font-weight:500;margin-left:3px}
/* 막대 두 줄만 가운데 — 흐린 시각 숫자는 막대 왼쪽 바깥에 띄운다(눈에 띄는 건 막대라서) */
.ops-track-cols{flex:1;display:grid;grid-template-columns:22px 22px;justify-content:center;column-gap:26px;min-height:0}   /* 줄 높이는 옆 칸이 정하고 막대는 거기에 맞춘다 */
.ops-track-col{display:flex;flex-direction:column;gap:6px;align-items:center}
.ops-track-in{flex:1;position:relative;display:flex}
.ops-track-hrs{position:absolute;right:calc(100% + 4px);top:0;bottom:0;width:16px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ops-track-hrs b{position:absolute;right:0;font-weight:500;transform:translateY(-50%)}
.ops-track-bar{width:22px;display:grid;grid-template-rows:repeat(24,1fr);gap:2px}
.ops-track-bar i{display:block;min-height:5px;border-radius:3px;background:var(--inset);cursor:default;transition:background .12s}
.ops-track-bar i.on{background:var(--accent);cursor:pointer}
.ops-track-bar i:hover{background:color-mix(in srgb,var(--accent) 35%,var(--inset))}
.ops-track-bar i.on:hover{background:color-mix(in srgb,var(--accent) 60%,var(--surface))}
.ops-track-col>span{font-size:11px;color:var(--muted);white-space:nowrap}
.ops-track-tip{position:fixed;z-index:30;background:var(--surface);color:var(--ink);border-radius:10px;border-top-left-radius:3px;padding:7px 10px;font-size:12px;line-height:1.45;box-shadow:0 6px 22px #0000002a;pointer-events:none;white-space:nowrap;display:grid}
.ops-track-tip b{font-size:12.5px}.ops-track-tip span{color:var(--secondary)}.ops-track-tip span+b{margin-top:4px}
@media(max-width:900px){.ops-track-cols{min-height:220px}}
.ops-panel{background:var(--surface);border-radius:16px;padding:20px 22px;min-width:0}
.ops-panel>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ops-panel>header h2{font-size:14px;font-weight:650}

/* 걸음 */
.ops-steps{list-style:none;margin:0;padding:0;display:grid}
.ops-step{display:grid;grid-template-columns:44px 20px minmax(0,1fr);gap:8px;padding:7px 0}
.ops-step-time{color:var(--muted);font-size:11px;padding-top:2px;font-variant-numeric:tabular-nums}
.ops-step-dot{display:flex;justify-content:center;position:relative}
.ops-step-dot::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--status-neutral);position:relative;z-index:1}
.ops-step:not(:last-child) .ops-step-dot::after{content:"";position:absolute;top:16px;bottom:-12px;width:1px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.ops-step[data-kind="tool"] .ops-step-dot::before{background:var(--accent)}
.ops-step[data-kind="result"] .ops-step-dot::before{background:var(--status-ok)}
.ops-step[data-kind="error"] .ops-step-dot::before{background:var(--status-error)}
.ops-step.live .ops-step-dot::before{animation:ops-pulse 1.2s ease-in-out infinite}
.ops-step-body{min-width:0;overflow-wrap:anywhere;line-height:1.6}
.ops-step-label{font-weight:600}
.ops-step-arg{color:var(--secondary);margin-left:6px;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11px}
.ops-step[data-kind="note"] .ops-step-body{color:var(--secondary);white-space:pre-wrap}
.ops-step[data-kind="error"] .ops-step-body{color:var(--status-error)}

/* 운영 한눈 */
.ops-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.ops-count{background:var(--inset);border-radius:8px;padding:10px}
.ops-count b{display:block;font-size:20px;line-height:26px;font-weight:700;font-variant-numeric:tabular-nums}
.ops-count span{color:var(--secondary);font-size:11px;word-break:keep-all}
.ops-count[data-tone="act"] b{color:var(--status-error)}
.ops-nodes{list-style:none;margin:0;padding:0}
.ops-node{display:grid;grid-template-columns:10px 52px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.ops-node:first-child{border-top:0}
.ops-node i{width:8px;height:8px;border-radius:50%;background:var(--status-ok)}
.ops-node[data-tone="watch"] i{background:var(--status-warn)}
.ops-node[data-tone="act"] i{background:var(--status-error)}
.ops-node[data-tone="off"] i{background:var(--status-neutral)}
.ops-node b{font-weight:600}
.ops-node .ops-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 지난 순찰 */
.ops-history{list-style:none;margin:0;padding:0}
.ops-history>li{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.ops-history>li:first-child{border-top:0}
.ops-run{display:grid;grid-template-columns:104px 84px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:10px 4px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.ops-run:hover{background:var(--inset)}
.ops-run:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ops-run-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-run .ops-badge{justify-self:center}
.ops-run-detail{margin:2px 4px 14px 212px;background:var(--inset);border-radius:12px;padding:14px 16px;overflow-wrap:anywhere}   /* 글 칸(104 + 10 + 84 + 10 + 4)에 맞춘 연회색 면 */
.ops-run-detail ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ops-run-detail li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;align-items:baseline;padding-left:14px;font-size:13px;line-height:1.65;color:var(--secondary)}
.ops-run-detail li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.ops-run-detail li b{color:var(--ink);font-weight:650}
.ops-di-code{font:11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);border-radius:5px;padding:1px 5px;color:var(--ink)}
.ops-di-guess{display:inline-block;margin:0 2px;padding:0 7px;border-radius:999px;background:var(--surface);color:var(--secondary);font-size:11px;font-weight:650;line-height:18px;vertical-align:1px;white-space:nowrap}
.ops-di-note{justify-self:end;text-align:right;white-space:nowrap;font-size:12px;font-weight:650;cursor:default}
.ops-di-note.continued{color:var(--accent)}.ops-di-note.solved{color:var(--status-ok)}
.ops-run-plain{margin:0;white-space:pre-wrap;line-height:1.6;font-size:13px;color:var(--secondary)}
.ops-run-detail ul+.ops-run-plain{margin-top:10px}
@media(max-width:760px){.ops-run{grid-template-columns:auto minmax(0,1fr);row-gap:4px}.ops-run .ops-run-line{grid-column:1/-1;white-space:normal}.ops-run .ops-run-dur{display:none}.ops-run-detail{margin-left:4px}.ops-run-detail li,.ops-hero-items li.ops-di{grid-template-columns:minmax(0,1fr)}.ops-di-note{justify-self:start}}