/* 기술지원 대시보드 — 상사에게 태블릿으로 보이는 화면(2026-09-23 개편, specs/plan-dash.md).

   원칙 셋. ① **셈은 서버가 한다** — 여기는 받은 숫자를 그림으로 옮길 뿐이다. ② **색은 뜻 하나에
   하나** — 단계 셋(설계·시공·준공)과 사업유형 넷이 화면 어디서나 같은 색이다. 색만으로 말하지
   않고 숫자를 늘 같이 찍는다. ③ **그림은 라이브러리 없이** 막대는 HTML, 선·고리는 인라인 SVG 로
   그린다 — 바깥에서 받아 오는 것이 없어야 CSP 가 잠기고(src/secure.js), 인쇄에서 선명하다.

   색 값은 전부 style.css 의 토큰이다. 여기 새 색을 직접 적지 않는다(명암비 시험이 토큰만 잰다). */

.dash { max-width: 1400px; }
.asof { color: var(--ink-3); font-size: var(--t2); }
/* 입력 현황 알약. 입력이 없는 달은 호박색으로 — 「이 화면의 0 은 실적이 아니라 미입력」이라는 표시다 */
.fresh { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--ok-weak); color: var(--ok-ink); font-size: var(--t2); font-weight: 600; min-height: 32px; }
.fresh.stale { background: var(--oxide-weak); color: var(--oxide); }

/* ── 큰 숫자 ─────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.kpi { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s5) var(--s5) var(--s4); min-width: 0; }
.kpi .lb { font-size: var(--t2); color: var(--ink-2); font-weight: 600; letter-spacing: -.005em; display: flex; align-items: center; gap: var(--s2); }
.kpi .lb .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kpi .v { margin-top: var(--s2); font-size: 32px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .v .unit { font-size: var(--t3); font-weight: 500; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.kpi .sub { margin-top: var(--s2); font-size: var(--t2); color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.kpi .sub.up { color: var(--accent-ink); }
.kpi .sub.down { color: var(--bad); }
.kpi.alert .v { color: var(--bad); }
/* 이달 실적 카드는 재고보다 한 단 작다 — 둘이 같은 크기면 어느 것이 재고인지 눈이 헤맨다 */
.flow .kpi { padding: var(--s4) var(--s5); background: var(--surface-2); box-shadow: none; }
.flow .kpi .v { font-size: 24px; }
/* 「이달 입력 없음」 띠. 0 이 늘어선 카드 대신 이 한 줄이 먼저 읽힌다 */
.stalebar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: var(--oxide-weak); color: var(--oxide); border-radius: var(--r); padding: var(--s3) var(--s5); font-size: var(--t3); font-weight: 600; }
.stalebar .m { font-weight: 500; color: var(--ink-2); }

/* ── 나눠 보기 ─────────────────────────────────────────── */
.viewbar { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.seg.views { flex: none; }
.seg.views button { min-width: 84px; padding: var(--s3) var(--s5); min-height: var(--tap); }
.filter { display: flex; align-items: center; gap: var(--s3); font-size: var(--t3); color: var(--ink-2); flex-wrap: wrap; }
.filter .fchip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; min-height: 36px; }
.filter .fchip button { border: 0; background: transparent; color: inherit; font: inherit; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; line-height: 1; }
.filter .fchip button:hover { background: var(--accent-mid); }
.filter .hintf { color: var(--ink-3); font-size: var(--t2); }

/* ── 카드 격자 ─────────────────────────────────────────── */
.cards { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 지역 막대는 열여섯 줄로 길다 — 두 줄에 걸치게 두고 그 왼쪽에 유형·진도 카드 둘을 세운다.
   추이는 작은 그림 셋이 나란히라 한 줄을 다 쓴다. 이렇게 하면 카드 안에 빈자리가 안 남는다 */
#c-region { grid-row: span 2; }
#c-trend { grid-column: 1 / -1; }
.card.chart, .card.list { padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; min-width: 0; }
.card .ch { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.card .ch h2 { margin: 0; font-size: var(--t4); font-weight: 700; letter-spacing: -.015em; }
.card .ch .n { font-size: var(--t3); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 무엇을 보는 그림인지 한 줄. 처음 보는 사람이 제목만으로 못 읽는 자리를 이 줄이 메운다 */
.card .cap { font-size: var(--t2); color: var(--ink-3); margin: 0 0 var(--s4); line-height: 1.5; }
.card .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card .body > * { min-width: 0; }
.card .foot { margin-top: var(--s4); font-size: var(--t2); color: var(--ink-3); line-height: 1.5; }
.card .empty { padding: var(--s6) 0; }

/* 범례 — 색 점 + 이름. 그림마다 같은 차례다 */
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t2); color: var(--ink-2); margin: 0 0 var(--s4); }
.legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 단계 색 — 옅은 것부터 진한 것으로 진행 순서다. 번호는 창구가 준 단계 차례다(2026-09-28, 다섯 칸:
   기본설계 · 실시설계 · 발주·착공준비 · 공사중 · 준공). 짝은 전부 이미 쓰던 글자/바탕 짝이라 명암을 다시 안 잰다.
   유형 색은 알약(.kind)과 같은 진한 쪽 값이다 */
.st-0 { background: var(--st0); color: var(--st0t); }
.st-1 { background: var(--st1); color: var(--st1t); }
.st-2 { background: var(--st2); color: var(--st2t); }
.st-3 { background: var(--st3); color: var(--st3t); }
.st-4 { background: var(--st4); color: var(--st4t); }
.ty-0 { background: var(--c-type1); color: var(--on-accent); }
.ty-1 { background: var(--c-type2); color: var(--on-accent); }
.ty-2 { background: var(--c-type3); color: var(--on-accent); }
.ty-3 { background: var(--c-type4); color: var(--on-accent); }
.ty-4 { background: var(--c-none); color: var(--on-accent); }
.mono1 { background: var(--accent); color: var(--on-accent); }

/* ── 가로 막대(쌓기) ─────────────────────────────────────── */
.bars { display: flex; flex-direction: column; gap: var(--s3); }
.brow { display: grid; grid-template-columns: 6.5rem 1fr 3.2rem; align-items: center; gap: var(--s3); min-height: 30px; }
.brow .bl { font-size: var(--t3); color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.brow .bt { display: flex; height: 24px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.brow .bs { display: flex; align-items: center; justify-content: center; font-size: var(--t1); font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; white-space: nowrap; transition: width .25s ease; }
.brow .bv { font-size: var(--t3); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* 누르면 거르는 줄(지역). 누를 수 있다는 것이 보여야 한다 — 손가락 높이와 살짝 떠오르는 바탕 */
.brow.pick { cursor: pointer; border-radius: var(--r-sm); padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); min-height: var(--tap);
  /* 누를 수 있는 줄은 <button> 이다 — 브라우저 기본 단추 모양(회색 바탕·테두리)을 걷어낸다 */
  border: 0; background: transparent; font: inherit; color: inherit; text-align: inherit; width: calc(100% + 2 * var(--s2)); }
.brow.pick:hover { background: var(--surface-2); }
.brow.pick.on { background: var(--accent-weak); }
.brow.pick.on .bl { color: var(--accent-ink); font-weight: 700; }
.brow.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── 세로 막대(진도 분포 · 준공 예정) ─────────────────────────── */
/* 세로 막대는 카드에 남는 높이를 쓴다(왼쪽 칸이 지역 막대 높이에 맞춰 늘어난다) — 최소 150px */
.cols { display: grid; align-items: end; gap: var(--s2); flex: 1; min-height: 150px; padding-top: var(--s5); }
.col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; }
.col .cv { font-size: var(--t2); font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: var(--s1); color: var(--ink-2); }
.col .cbw { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.col .cb { width: 100%; max-width: 56px; border-radius: 6px 6px 3px 3px; background: var(--accent); min-height: 3px; transition: height .25s ease; display: block; }
.col .cb.soft { background: var(--accent-mid); }
.col .cb.now { background: var(--accent-ink); }
.col .cb.past { background: var(--bad); }
.col .cl { font-size: var(--t1); color: var(--ink-3); margin-top: var(--s2); white-space: nowrap; letter-spacing: 0; }
.col.pick { cursor: pointer; border-radius: var(--r-sm); }
.col.pick:hover .cb { filter: brightness(.92); }
.col.pick.on .cl { color: var(--accent-ink); font-weight: 700; }
.col.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 준공 예정 달을 누르면 그 달의 현장이 아래 펼쳐진다 */
.duelist { margin-top: var(--s4); border-top: 1px solid var(--line-2); padding-top: var(--s3); }

/* ── 추이(작은 그림 셋) ─────────────────────────────────────── */
.smalls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.small .sl { font-size: var(--t2); color: var(--ink-2); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; }
.small .sl b { font-size: var(--t4); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.small svg { width: 100%; height: 72px; display: block; margin-top: var(--s2); overflow: visible; }
.small svg rect { fill: var(--accent-mid); }
.small svg rect.now { fill: var(--accent); }
.small svg text { font-size: 9px; fill: var(--ink-3); font-family: inherit; }

/* ── 규모 고리 + 공사종류 ─────────────────────────────────────── */
.scalewrap { display: grid; grid-template-columns: 140px 1fr; gap: var(--s5); align-items: center; }
.donut { width: 140px; height: 140px; display: block; }
.donut circle { fill: none; stroke-width: 18; }
.donut .track { stroke: var(--surface-2); }
.donut .s-대형 { stroke: var(--accent); }
.donut .s-중형 { stroke: var(--accent-2); }
.donut .s-소형 { stroke: var(--accent-mid); }
.donut .s-미산정 { stroke: var(--surface-3); }
.donut text { font-family: inherit; text-anchor: middle; }
.donut .big { font-size: 26px; font-weight: 700; fill: var(--ink); letter-spacing: -.03em; }
.donut .sm { font-size: 10px; fill: var(--ink-3); }
.sc-대형 { background: var(--accent); }
.sc-중형 { background: var(--accent-2); }
.sc-소형 { background: var(--accent-mid); }
.sc-미산정 { background: var(--surface-3); }
.scalelist { display: flex; flex-direction: column; gap: var(--s3); }
.scalelist .sr { display: grid; grid-template-columns: 12px 4rem 1fr auto; gap: var(--s3); align-items: center; font-size: var(--t3); }
.scalelist .sr i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.scalelist .sr .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.scalelist .sr .m { color: var(--ink-3); font-size: var(--t2); font-variant-numeric: tabular-nums; }
.wtbar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); margin-top: var(--s5); }
.wtbar span { display: block; }
.wt-0 { background: var(--accent); } .wt-1 { background: var(--accent-2); } .wt-2 { background: var(--accent-mid); } .wt-3 { background: var(--surface-3); } .wt-4 { background: var(--office-mid); }
.wtlegend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t2); color: var(--ink-2); margin-top: var(--s3); font-variant-numeric: tabular-nums; }
.wtlegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: var(--s2); vertical-align: -1px; }

/* ── 목록 카드 ─────────────────────────────────────────── */
.card.list ol { margin: 0; padding: 0; list-style: none; }
.card.list li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-2); font-size: var(--t3); align-items: center; }
.card.list li:first-child { border-top: 0; }
.card.list li a { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; display: block; }
.card.list li a:hover { color: var(--accent-ink); text-decoration: underline; }
.card.list li .mt { font-size: var(--t1); color: var(--ink-3); margin-top: 2px; }
.card.list li .rt { font-size: var(--t2); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; text-align: right; }
.card.list li .rt b { color: var(--bad); }
.card.list .more { margin-top: var(--s3); }

/* ── 접힌 집계표 ─────────────────────────────────────────── */
.hint { font-size: var(--t2); color: var(--ink-3); margin: var(--s2) 0 0; }

/* ── 발표 모드 — 상사 앞에서 태블릿을 세워 놓고 본다. 머리말·단추를 지우고 숫자를 키운다 ── */
body.present header.top, body.present .pagehead .acts .btn:not(#present),
body.present .viewbar .hintf { display: none; }
body.present main.dash { max-width: none; padding: var(--s5) var(--s6); }
body.present .kpi .v { font-size: 40px; }
body.present .flow .kpi .v { font-size: 28px; }
body.present .card .ch h2 { font-size: var(--t5); }
body.present .brow .bl, body.present .brow .bv { font-size: var(--t4); }
body.present .brow .bt { height: 28px; }

/* ── 태블릿 세로·휴대폰 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cards.two, .cards.three { grid-template-columns: 1fr; }
  #c-region { grid-row: auto; }
  #c-trend { grid-column: auto; }
  .kpis, .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 26px; }
  .scalewrap { grid-template-columns: 1fr; justify-items: center; }
  .smalls { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 5rem 1fr 2.6rem; }
  .seg.views button { min-width: 0; flex: 1; }
}

/* ── 인쇄 — A4 가로 두 장쯤. 태블릿의 「PDF 로 저장」이 이 규칙을 쓴다 ─────────────── */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  header.top, .pagehead .acts, .viewbar .seg, .filter .fchip button { display: none !important; }
  body { background: #fff; }
  main.dash { max-width: none; padding: 0; }
  .card, .kpi { box-shadow: none !important; border: 1px solid #bbb; break-inside: avoid; }
  .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #lists { break-before: page; }
  .brow .bs, .col .cb, .kpi .lb .dot, .legend i, .scalelist .sr i, .wtbar span, .wtlegend i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}