/* 클락보드 — 일반 화면은 시스템 테마를 따르고, TV 모드는 항상 다크 */
:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface: #fcfcfb;
  --surface-2: #ffffff;
  --line: #e4e3df;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #8a8984;
  --accent: #2a78d6;      /* 사용량 막대 (단일 색) */
  --track: #e9e8e4;
  --good: #0ca30c;
  --warn: #fab219;
  --crit: #d03b3b;
  --warn-ink: #8a5a00;    /* 경고 글자는 읽히는 진한 톤 */
  --crit-ink: #b42323;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110; --surface: #1a1a19; --surface-2: #20201f; --line: #2e2e2c;
    --text: #f0efec; --text-2: #c3c2b7; --text-3: #8d8c85;
    --accent: #3987e5; --track: #2c2c2a; --warn-ink: #fab219; --crit-ink: #ef6b6b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110; --surface: #1a1a19; --surface-2: #20201f; --line: #2e2e2c;
  --text: #f0efec; --text-2: #c3c2b7; --text-3: #8d8c85;
  --accent: #3987e5; --track: #2c2c2a; --warn-ink: #fab219; --crit-ink: #ef6b6b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
button, input { font: inherit; color: inherit; }

/* ---------- 상단 ---------- */
.top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.25em; white-space: nowrap; }
.period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--track); border-radius: 8px; padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--text-2); }
.seg-btn.on { background: var(--surface-2); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px #0002; }
.cyc-ctrl, .range-ctrl { display: flex; align-items: center; gap: 8px; }
.cyc-label { display: flex; flex-direction: column; align-items: center; min-width: 170px; line-height: 1.25; }
.cyc-label b { font-size: 1.15em; }
.cyc-label span { font-size: .8em; color: var(--text-2); }
.nav, .chip-btn {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px;
  padding: 5px 10px; cursor: pointer;
}
.nav:disabled { opacity: .35; cursor: default; }
.chip-btn:hover, .nav:hover:not(:disabled) { border-color: var(--text-3); }
.range-ctrl input { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 4px 8px; }

.kpis { display: flex; gap: 28px; margin-left: auto; }
.kpi .v { font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.kpi .l { font-size: .78em; color: var(--text-2); }
.kpi .v .of { font-size: .6em; font-weight: 500; color: var(--text-2); }
.right { display: flex; align-items: center; gap: 14px; }
.clock { font-size: 1.5em; font-weight: 700; }
.updated { font-size: .78em; color: var(--text-3); white-space: nowrap; }

/* ---------- 본문 ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 24px 20px; }
.range-note { font-size: .85em; color: var(--text-3); }
.deadline { display: inline-block; font-size: .7em; font-weight: 700; color: #fff; background: var(--crit); border-radius: 6px; padding: 1px 7px; vertical-align: 2px; }
.cyc-label .deadline { font-size: .9em; vertical-align: 0; }
.miss-line { font-size: .8em; font-weight: 500; color: var(--crit-ink); }
/* 직원별: 하단 가로 배치 */
.staff { border-top: 1px solid var(--line); padding-top: 12px; }
.staff-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 20px; }
.staff-row .person { border-bottom: 0; padding: 4px 0; }
h2 { font-size: 1em; font-weight: 700; margin: 0 0 12px; }
h2 .sub { font-weight: 400; color: var(--text-3); font-size: .85em; margin-left: 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }

.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.tile { position: relative; }
.tile-ctl { position: absolute; top: 8px; right: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); border-radius: 6px; padding: 3px 5px; cursor: pointer; opacity: 0; transition: opacity .15s; display: inline-flex; align-items: center; }
.tile:hover .tile-ctl, .tile-ctl:focus-visible { opacity: 1; }
.tile-ctl:hover { color: var(--text); border-color: var(--text-3); }
.tile-ctl.show { opacity: 1; font-size: .8em; padding: 3px 8px; color: var(--text); }
.tile.is-hidden { opacity: .55; }
.hidden-bar { margin-top: 10px; font-size: .85em; }
.hidden-bar a { color: var(--text-3); }
.hidden-grid { margin-top: 10px; }
@media (hover: none) { .tile-ctl { opacity: .7; } }
.tile.over { border-color: color-mix(in srgb, #8a4fd8 55%, var(--line)); }
.tile .name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tile .no { font-size: .75em; color: var(--text-3); }
.tile .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { font-size: .78em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .grp { font-size: .75em; color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tile .hours { font-size: 1.7em; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.tile .hours .of { font-size: .55em; font-weight: 500; color: var(--text-2); }
.tile .pct { font-weight: 700; font-size: 1.05em; }
.tile .state { font-size: .8em; font-weight: 500; }
.state.ok { color: var(--text-2); }
.state.warn { color: var(--warn-ink); }
.state.crit { color: var(--crit-ink); }

.bar { position: relative; height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 0 4px 4px 0; }
/* 진도 기준 색 (카드클락 배지와 같은 규칙) — 빨강 많이 부족 → 초록 진도 맞음, 보라 초과 */
.bar.pace-bad > i  { background: #d03b3b; }
.bar.pace-low > i  { background: #ec7a1c; }
.bar.pace-mid > i  { background: #fab219; }
.bar.pace-near > i { background: #9cc92a; }
.bar.pace-good > i { background: #0ca30c; }
.bar.pace-over > i { background: #8a4fd8; }
.state.pace-bad  { color: var(--p-bad); }
.state.pace-low  { color: var(--p-low); }
.state.pace-mid  { color: var(--p-mid); }
.state.pace-near { color: var(--p-near); }
.state.pace-good { color: var(--p-good); }
.state.pace-over { color: var(--p-over); }
:root { --p-bad: #b42323; --p-low: #a8520a; --p-mid: #8a5a00; --p-near: #4d6b0a; --p-good: #0b7a0b; --p-over: #6b35b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --p-bad: #ef6b6b; --p-low: #f59a4f; --p-mid: #fab219; --p-near: #b5dc4f; --p-good: #4ccb4c; --p-over: #b78cf0; }
}
:root[data-theme="dark"] { --p-bad: #ef6b6b; --p-low: #f59a4f; --p-mid: #fab219; --p-near: #b5dc4f; --p-good: #4ccb4c; --p-over: #b78cf0; }
.bar .cap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); }

.weeks { display: flex; gap: 6px; }
.wk { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; min-width: 0; }
.wk .l { font-size: .72em; color: var(--text-3); }
.wk .v { font-size: .9em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weeks.w3 .wk .v { font-size: .8em; }
.wk.now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wk.now .l { color: var(--accent); font-weight: 700; }
.wk.over .v { color: var(--crit-ink); }
.weeks.w3 .wk { padding: 2px 5px; }
.wk .v .of { color: var(--text-3); font-weight: 400; }
.people { font-size: .8em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-note { font-size: .8em; color: var(--text-3); }

/* ---------- 직원 ---------- */
.staff { min-width: 0; }
.person { padding: 10px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.person .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.person .who { font-weight: 500; }
.person .tot { font-weight: 700; font-size: 1.1em; }
.person .bar { height: 8px; margin: 6px 0 4px; cursor: default; }
.person .detail { font-size: .78em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; box-shadow: 0 6px 24px #0003; max-width: 90vw; }
.msg.err { border-color: var(--crit); color: var(--crit-ink); }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .82em; box-shadow: 0 6px 20px #0003; min-width: 160px; }
.tip div { display: flex; justify-content: space-between; gap: 14px; }
.tip .h { font-weight: 700; margin-bottom: 4px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .kpis { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .top { padding: 12px 16px; gap: 12px; }
  .period, .cyc-ctrl { width: 100%; }
  .cyc-label { min-width: 0; flex: 1; }
  .kpis { flex-wrap: wrap; gap: 12px 20px; }
  .kpi .v { font-size: 1.25em; }
  .layout { padding: 16px; }
  .right { width: 100%; justify-content: space-between; }
  .grid { grid-template-columns: 1fr; }
}

/* ---------- TV 모드: 1920×1080 한 화면에 고정, 스크롤 없음 ---------- */
html.tv { font-size: calc(100vh / 64); }
html.tv body { font-size: 1rem; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
html.tv .tile-ctl, html.tv .hidden-bar, html.tv .hidden-grid,
html.tv .seg, html.tv #now, html.tv .nav, html.tv #tvBtn, html.tv .range-ctrl input, html.tv #applyRange { display: none; }
html.tv .layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.tv .boards { flex: 1; display: flex; flex-direction: column; min-height: 0; }
html.tv .staff { min-height: 0; }
html.tv .staff-row { grid-auto-rows: auto; max-height: 13vh; overflow: hidden; }
html.tv .grid { flex: 1; min-height: 0; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
html.tv .tile { justify-content: flex-start; overflow: hidden; }
html.tv .tile .weeks { margin-top: auto; }

html.tv .tile { padding: 1.1vh 0.9vw; gap: 0.7vh; }
html.tv .tile .hours { font-size: 1.75em; }
html.tv .weeks { gap: 4px; }
html.tv .wk { padding: 2px 6px; }

/* ---------- 카드 고정 틀 ---------- */
.tile .head { min-width: 0; }
.tile .sub { min-height: 1.35em; line-height: 1.35em; }
.tile .sub.grp { color: var(--accent); }
.tile .main { min-height: 2.2em; }
.tile .state-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 1.4em; }
.miss-tag { font-size: .78em; font-weight: 500; color: var(--crit-ink); white-space: nowrap; }
.tile .weeks { margin-top: auto; }

/* ---------- 직원별: 고객사 막대 ---------- */
.staff-row { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 28px; align-items: start; }
.staff-row .person { padding: 2px 0 6px; }
.person .row1 { margin-bottom: 4px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.pr { display: grid; grid-template-columns: 7em minmax(0, 1fr) 4.6em; align-items: center; gap: 8px; font-size: .8em; padding: 1px 0; }
.pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pb { height: 7px; background: var(--track); border-radius: 4px; overflow: hidden; }
.pb > i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.pv { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmore { font-size: .75em; color: var(--text-3); padding-left: 2px; }
html.tv .staff-row { max-height: 22vh; }

/* ---------- 숨기기 확인 ---------- */
dialog.confirm { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); padding: 20px 22px; max-width: 360px; box-shadow: 0 12px 40px #0004; }
dialog.confirm::backdrop { background: #0006; }
dialog.confirm .q { font-weight: 700; margin: 0 0 6px; }
dialog.confirm .d { font-size: .85em; color: var(--text-2); margin: 0 0 16px; }
dialog.confirm .btns { display: flex; justify-content: flex-end; gap: 8px; }
.chip-btn.danger { background: var(--crit); border-color: var(--crit); color: #fff; }