/* LSVEND 현장 대시보드 — 공장 TV 다크 테마 (시안 v1 승인 2026-10-05)
   TV 화면은 1920×1080 고정 캔버스를 화면 크기에 맞춰 통째로 축소/확대한다 (dash.js fit) */
:root {
  color-scheme: dark;
  --bg: #0c1218;
  --tv: #0a1016;
  --panel: #131b24;
  --panel-2: #19232e;
  --line: #243140;
  --line-2: #314256;
  --fg: #e2e8ee;
  --muted: #8b99a8;
  --accent: #3fb6c8;
  --accent-a: rgba(63,182,200,.13);
  --run: #2dbd6e;
  --stop: #ee4c49;
  --stop-soft: #ff8f8c;
  --warn: #f1b43a;
  --setup: #4a8cf0;
  --mat: #ef8a3b;
  --misc: #a07ae6;
  --rest: #344456;
  --nosch: #1d2833;
  --on-light: #08131a;
  --f-ui: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  --f-num: "Barlow Semi Condensed", "IBM Plex Sans KR", "Malgun Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══ TV 캔버스 ══ */
body.tvbody { background: #000; overflow: hidden; height: 100vh; }
.tv { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--tv); color: var(--fg); font: 16px/1.35 var(--f-ui); display: flex; flex-direction: column; overflow: hidden; }
.tv .tnum, .tv td { font-variant-numeric: tabular-nums; }
.tvh { flex: none; height: 76px; display: grid; grid-template-columns: 300px minmax(0, 1fr) auto auto auto; align-items: center; gap: 28px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand .co { font-size: 26px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand .sys { font: 500 12px var(--f-mono); color: var(--muted); letter-spacing: .14em; margin-top: 3px; }
.tv[data-dev] .brand .co::after { content: "개발"; margin-left: 10px; font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--misc); color: #fff; vertical-align: 4px; }
.ttl h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl p { margin: 1px 0 0; font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datenav { display: flex; align-items: center; gap: 12px; }
.datenav .d { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.datenav b { font: 600 26px var(--f-num); }
.datenav small { font-size: 12px; color: var(--muted); }
.tv .ic { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg); font-size: 18px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tv .ic:hover { border-color: var(--accent); }
.tv .ic.off { opacity: .3; cursor: default; }
.tv .ic.on { background: var(--warn); color: var(--on-light); border-color: var(--warn); }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.clock b { font: 600 36px var(--f-num); letter-spacing: .01em; }
.clock small { font-size: 13px; color: var(--muted); }
.ctrls { display: flex; gap: 8px; }
.rot { flex: none; height: 4px; background: var(--line); }
.rot i { display: block; height: 100%; width: 0; background: var(--accent); }
.rot i.paused { background: var(--warn); }
.err { flex: none; margin: 10px 24px 0; padding: 8px 14px; border-radius: 6px; background: #3a1d22; color: #ffb3b1; font-size: 16px; }
#offline-badge { position: fixed; right: 16px; bottom: 16px; z-index: 9; padding: 10px 16px; border-radius: 6px; background: #3a1d22; color: #ffb3b1; font: 600 18px var(--f-ui); }
.tvb { flex: 1; min-height: 0; padding: 18px 24px 22px; display: grid; gap: 16px; }
.pn { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px 16px; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pn h4 { margin: 0 0 10px; font-size: 20px; font-weight: 600; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.pn h4 small { font-size: 14px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.pn h4 .r { margin-left: auto; }
.chart { flex: 1; min-height: 0; }
.empty { color: var(--muted); font-size: 16px; padding: 16px 4px; }
.empty-big { flex: 1; display: grid; place-content: center; text-align: center; gap: 10px; }
.empty-big b { font-size: 34px; }
.empty-big span { font-size: 20px; color: var(--muted); }
.note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.minihd { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* 의미색 */
.c-run { background: var(--run); color: var(--on-light); }
.c-setup { background: var(--setup); color: #fff; }
.c-mat { background: var(--mat); color: var(--on-light); }
.c-wait { background: var(--warn); color: var(--on-light); }
.c-fault { background: var(--stop); color: #fff; }
.c-misc { background: var(--misc); color: #fff; }
.c-mgmt { background: #2f5d66; color: #dff4f6; }
.c-rest { background: var(--rest); color: #c7d2dd; }
.c-nosch { background: var(--nosch); color: #7d8c9b; }
.c-noreason { background: #3a1d22; color: #ffb3b1; box-shadow: inset 0 0 0 2px var(--stop); }
.c-notstart { background: #33290f; color: #ffd98a; box-shadow: inset 0 0 0 2px var(--warn); }
.c-off { background: #111920; color: #4f5e6d; }
.c-accent { background: var(--accent); }
.c-misc-t { color: var(--misc); }
.a-lo { color: var(--stop); } .a-mid { color: var(--warn); } .a-ok { color: var(--setup); } .a-hi { color: var(--run); }
.chip { display: inline-block; min-width: 40px; padding: 3px 3px; border-radius: 4px; font: 600 12px/1.25 var(--f-ui); letter-spacing: -.04em; text-align: center; white-space: nowrap; }
.chip.dot { min-width: 16px; width: 16px; height: 16px; padding: 0; }
.track { height: 6px; border-radius: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: currentColor; }
.track i.c-run { background: var(--run); } .track i.c-accent { background: var(--accent); }

/* 요약 띠 */
.strip { display: flex; align-items: center; gap: 26px; padding: 0 4px; height: 44px; }
.strip .kv { display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--muted); white-space: nowrap; }
.strip .kv b { font: 700 28px var(--f-num); color: var(--fg); }
.strip .kv b.a-lo { color: var(--stop); }
.strip .legend { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.strip .legend .sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 6px; }

/* ① 시간대 매트릭스 */
.mxw { min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
table.mx { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mx th { height: 44px; background: var(--panel-2); color: var(--muted); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line-2); }
.mx th.c-wc { width: 270px; text-align: left; padding-left: 14px; }
.mx th.c-n { width: 104px; }
.mx th.slot { font: 500 14px var(--f-mono); letter-spacing: -.02em; }
.mx th.now { background: var(--accent); color: var(--on-light); }
.mx th.fut { color: #45535f; }
.mx td { height: 57px; border-bottom: 1px solid var(--line); text-align: center; font: 600 22px var(--f-num); padding: 0 2px; }
.mx tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.mx td.wc { text-align: left; padding: 0 12px 0 14px; font-family: var(--f-ui); }
.mx td.wc .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mx td.wc b { font: 700 22px/1.1 var(--f-num); }
.mx td.wc em { font: 600 13px var(--f-ui); font-style: normal; color: #90caf9; white-space: nowrap; }
.mx td.wc em.noplan { color: var(--misc); }
.mx td.wc span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx td.qty { color: #fff; font-size: 24px; }
.mx td.s { font-size: 20px; color: #dfe6ec; border-left: 1px solid rgba(255,255,255,.035); }
.mx td.s.nowc { background: var(--accent-a) !important; box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.mx td.s.fut { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.025) 6px 12px) !important; }
.tag-x { font: 600 15px var(--f-ui); color: var(--misc); }
@keyframes idle-glow { 0%, 100% { background: rgba(238,76,73,.26); box-shadow: inset 5px 0 0 var(--stop); } 50% { background: transparent; box-shadow: inset 5px 0 0 rgba(238,76,73,.25); } }
.mx tr.idle td.wc { animation: idle-glow 1.4s ease-in-out infinite; }
.mx tr.idle td.wc span { color: #ffb3b1; }

/* KPI */
.kpi { padding: 14px 20px; justify-content: space-between; }
.kpi .k { font-size: 17px; color: var(--muted); }
.kpi .v { font: 700 60px/1 var(--f-num); letter-spacing: -.01em; }
.kpi .v small { font: 600 22px var(--f-num); color: var(--muted); margin-left: 6px; }
.kpi .s { font-size: 15px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; }
.kpi .s span { overflow: hidden; text-overflow: ellipsis; }
.kpi .s b { color: var(--fg); font-weight: 600; }

/* 상태 */
.donut-wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; height: 160px; flex: none; }
.donut-wrap .chart { height: 160px; }
.dl { display: grid; gap: 2px; }
.dl div { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.dl div span:nth-child(2) { flex: 1; color: var(--muted); }
.dl b { font: 700 24px var(--f-num); }
.slist { display: grid; gap: 2px; }
.slist .row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 92px 70px; align-items: center; gap: 10px; font-size: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.slist .row b { font: 700 20px var(--f-num); }
.slist .row span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slist .row em { font: 600 20px var(--f-num); font-style: normal; text-align: right; }
.seg { display: flex; height: 46px; border-radius: 6px; overflow: hidden; flex: none; }
.seg div { display: grid; place-items: center; font: 700 18px var(--f-num); min-width: 0; overflow: hidden; }
.tcomp { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tcomp div { border-top: 3px solid; padding-top: 8px; }
.tcomp b { display: block; font: 700 30px/1.1 var(--f-num); }
.tcomp b small { font-size: 16px; color: var(--muted); }
.tcomp span { font-size: 14px; color: var(--muted); }

/* ③ 타일 */
.legend-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tiles { flex: 1; min-height: 0; display: grid; grid-auto-rows: 1fr; gap: 8px; }
.tile { border-radius: 7px; padding: 9px 11px 8px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; overflow: hidden; }
.tile .tc { font: 700 25px/1 var(--f-num); display: flex; justify-content: space-between; align-items: baseline; }
.tile .tc span { flex: none; }
.tile .tc small { font: 600 15px var(--f-num); opacity: .85; margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles.dense .tile { padding: 8px 9px 7px; }
.tiles.dense .tile .tc { font-size: 21px; }
.tiles.dense .tile .tc small { font-size: 13px; }
.tile .tn { font-size: 12px; line-height: 1.25; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .ts { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; white-space: nowrap; }
.tile .ts em { font: 700 18px var(--f-num); font-style: normal; }
@keyframes stop-blink { 0%, 100% { filter: none; } 50% { filter: brightness(.55); } }
.tile.blink { animation: stop-blink 1.1s steps(2, jump-none) infinite; }
.tl { display: grid; gap: 5px; }
.tl .r { display: grid; grid-template-columns: 70px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.tl .r b { font: 700 18px var(--f-num); }
.tl .bar { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 24px; }
.tl .bar i { border-radius: 2px; }
.tl .bar i.f { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.04) 4px 8px); }
.tl .bar i.e { background: #18212b; }
.tl .r em { font: 600 18px var(--f-num); font-style: normal; text-align: right; }
.tl .axis { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; font: 500 11px var(--f-mono); color: var(--muted); }
.hb { display: grid; gap: 9px; }
.hb .r { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font-size: 15px; }
.hb .r.r2 { grid-template-columns: minmax(0, 1fr) 76px; }
.hb .r b { font: 700 19px var(--f-num); }
.hb .r .t { height: 22px; background: var(--panel-2); border-radius: 4px; position: relative; overflow: hidden; }
.hb.tight .r .t { height: 30px; }
.hb .r .t i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: currentColor; }
.hb .r .t span { position: absolute; left: 10px; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; color: #e8eef3; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hb .r em { font: 700 20px var(--f-num); font-style: normal; text-align: right; }

/* ④ 월간 진척 */
.prog { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; grid-auto-flow: column; grid-template-rows: repeat(14, minmax(0, 1fr)); }
.prog .r { display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px 70px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); min-height: 0; }
.prog .r .w { min-width: 0; }
.prog .r .w b { display: block; font: 700 20px/1.05 var(--f-num); }
.prog .r .w span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog .t { height: 16px; border-radius: 3px; background: var(--panel-2); position: relative; }
.prog .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: currentColor; }
.prog .t u { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #dfe6ec; }
.prog .q { font: 600 17px var(--f-num); color: #c7d0d9; text-align: right; white-space: nowrap; }
.prog .p { font: 700 22px var(--f-num); text-align: right; }
.kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.kv3 span { display: block; font-size: 14px; color: var(--muted); }
.kv3 b { font: 700 26px var(--f-num); }

/* ⑤ 출하 */
.cust { display: grid; gap: 10px; }
.cust .ch { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.cust .ch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust .ch b { font: 700 22px var(--f-num); }
.cust .track { height: 10px; border-radius: 4px; }
.cust .cs, .cs { font-size: 13px; color: var(--muted); margin-top: 3px; }
table.feed { width: 100%; border-collapse: collapse; table-layout: fixed; }
.feed th { text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); padding: 0 8px 8px; border-bottom: 1px solid var(--line-2); }
.feed td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed td.n { font: 600 19px var(--f-num); text-align: right; }
.feed td.dim { color: var(--muted); }
.feed td.m { font: 500 14px var(--f-mono); color: #aeb9c4; }

/* ⑥ 알림 */
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.counter { border-radius: 8px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid; }
.counter span { font-size: 20px; font-weight: 600; }
.counter span small { display: block; font-size: 14px; color: var(--muted); font-weight: 400; }
.counter b { font: 700 72px/1 var(--f-num); }
.acols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.alist { display: grid; gap: 8px; align-content: start; min-height: 0; overflow: hidden; }
.acard { border-radius: 7px; padding: 12px 14px; background: var(--panel-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; border-left: 5px solid; }
.acard b { font: 700 24px/1.1 var(--f-num); }
.acard span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acard em { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font: 700 30px/1 var(--f-num); font-style: normal; }
.acard em small { display: block; font: 500 13px var(--f-ui); color: var(--muted); }
.aitem { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.aitem .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfd7df; }
.aitem b { font: 700 18px var(--f-num); }
.aitem em { font-style: normal; color: var(--muted); text-align: right; }
.more { font-size: 14px; color: var(--muted); padding: 4px; }

/* ══ 일반 페이지 (처음 화면·로그인) ══ */
body.page { background: var(--bg); color: var(--fg); font: 16px/1.6 var(--f-ui); min-height: 100vh; }
.home, .login { max-width: 980px; margin: 0 auto; padding-inline: 20px; padding-block: 48px 64px; }
.eyebrow { font: 500 12px var(--f-mono); letter-spacing: .14em; color: var(--accent); }
.home h1, .login h1 { font-size: clamp(30px, 5vw, 44px); margin: 6px 0 10px; line-height: 1.2; }
.devtag { font-size: 18px; vertical-align: middle; padding: 3px 10px; border-radius: 6px; background: var(--misc); color: #fff; }
.lede { color: #c3ccd5; max-width: 62ch; margin: 0 0 18px; }
.status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.pill.ok { border-color: var(--run); color: var(--run); }
.pill.bad { border-color: var(--stop); color: var(--stop); }
.start { margin-left: auto; padding: 10px 20px; border-radius: 8px; background: var(--accent); color: var(--on-light); font-weight: 700; }
.menu { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.menu a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.menu a:hover { border-color: var(--accent); }
.menu .n { grid-row: 1 / 3; font: 700 28px var(--f-num); color: var(--accent); }
.menu b { font-size: 18px; }
.menu a > span:last-child { font-size: 14px; color: var(--muted); }
.foot { margin-top: 28px; font-size: 14px; color: var(--muted); }
.login form { display: grid; gap: 10px; max-width: 360px; margin-top: 24px; }
.login p { color: #c3ccd5; max-width: 52ch; }
.login label { font-size: 14px; color: var(--muted); }
.login input { padding: 12px 14px; font-size: 18px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); }
.login button { padding: 12px; font-size: 17px; font-weight: 700; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-light); cursor: pointer; }
.login .msg { color: var(--stop-soft); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .mx tr.idle td.wc { animation: none; background: rgba(238,76,73,.26); box-shadow: inset 5px 0 0 var(--stop); }
  .tile.blink { animation: none; box-shadow: inset 0 0 0 3px #fff; }
}