/* 월간 기술지원현황 보고서 — 화면과 종이가 같은 서식이다(specs/plan-report.md).

   **칸 폭 백분율은 옛 제출본에서 옮겨 왔다**(`09 techsupport/tools/render_pdf.py`).
   균등하게 나누면 A4 세로에 안 들어간다 — 공사명·현공정에 넓게 주고 날짜 칸을 좁히는
   것이 그 서식이 실제로 쓰던 배분이다. 지역별 상세는 2026-09-23 에 설계사무소·시공사 두
   열을 한글 양식대로 더해 12 열이 되었고, 그때 폭을 다시 나눴다(합 100). 서버
   PDF(`src/report-pdf.js`)도 같은 숫자를 쓴다.

   스타일을 화면 안 `<style>` 이나 `style` 속성에 적지 않는다 — CSP 가 막고, 막혀도
   아무 말이 없어서 표가 어긋난 채로 뜬다(2026-08-30). */
@page{size:A4 portrait;margin:10mm 9mm}

/* 화면에서는 종이 한 장이 카드처럼 떠 보인다. 인쇄하면 아래 @media print 가 되돌린다 */
/* **화면에서는 A4 폭으로 묶지 않는다.** 210mm 로 묶으면 열 열두 개짜리 표가 745px 에 들어가
   공사명이 세 줄로 접힌다 — 종이와 같은 모양이라 정직하기는 하지만 화면에서 읽을 수 없다.
   종이 치수는 `@page` 와 아래 `@media print` 가 정하므로 화면을 넓혀도 인쇄는 그대로다. */
.sheet{background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:var(--s6);max-width:min(1180px, 100%);margin:0 auto}

/* 표지 — 결재란은 없다(2026-09-03 지시). 제목·기준일·부서 세 줄이다 */
.rpt .cover{text-align:center;padding:var(--s6) 0;border-bottom:2px solid var(--ink)}
.rpt .cover .t{font-size:var(--t6);font-weight:700;letter-spacing:-.02em}
.rpt .cover .d{font-size:var(--t3);color:var(--ink-2);margin-top:var(--s3)}
.rpt .cover .dept{font-size:var(--t5);font-weight:600;margin-top:var(--s6)}

.rpt h2{font-size:var(--t4);margin:var(--s6) 0 var(--s3);padding-bottom:2px;
  border-bottom:1px solid var(--ink-2)}
.rpt h3{font-size:var(--t2);margin:var(--s4) 0 var(--s2)}
.rpt h3 .num{font-weight:400;color:var(--ink-3)}
/* 각주는 「※」마다 줄을 바꾼다. `white-space:pre-line` 이 없으면 줄바꿈 글자가 무시돼
   한 문단으로 흐르고, 각주 넷이 한 덩이가 되어 아무도 안 읽는다(2026-09-04). */
.rpt .note{font-size:11px;color:var(--ink-2);margin:var(--s2) 0 var(--s4);line-height:1.5;
  white-space:pre-line}

/* 표 — 좁은 화면에서는 옆으로 굴린다(본문이 통째로 밀리지 않게) */
.rpt .tw{overflow-x:auto}
.rpt table{border-collapse:collapse;width:100%;font-size:12px;table-layout:fixed}
.rpt th,.rpt td{border:1px solid var(--ink-2);padding:3px 4px;vertical-align:top;
  text-align:center;word-break:keep-all}
.rpt thead th{background:var(--surface-2);font-weight:600}
.rpt td.l{text-align:left}
.rpt td.r{text-align:right;font-family:var(--mono)}
/* 합계 줄. 바탕색만으로는 밑글 줄과 같아 보여 눈이 안 간다 — 위에 굵은 선을 하나 둔다 */
.rpt tr.sum th,.rpt tr.sum td{font-weight:700;background:var(--surface-2);
  border-top:1.5px solid var(--ink)}
/* 안 끊기게 묶는 조각(규모 칸). `scaleParts` 를 참고 */
.rpt .nb{white-space:nowrap}

/* 지역별 상세 12 열 · 월별 준공 9 열. 준공 표는 옛 제출본 그대로이고, 상세 표는 두 열을
   더하면서 다시 나눴다(합 100). 글자 크기는 그대로 둔다 */
.rpt table.detail{font-size:10px}
.rpt table.detail th,.rpt table.detail td{padding:1.5px 2px;line-height:1.25}
.rpt table.detail .c1{width:5%}      /* 지역       */
.rpt table.detail .c2{width:16%}     /* 공사명     */
.rpt table.detail .c3{width:12%}     /* 규모       */
.rpt table.detail .c4{width:6%}      /* 예산       */
.rpt table.detail .c5{width:7.5%}    /* 착공       */
.rpt table.detail .c6{width:7.5%}    /* 준공       */
.rpt table.detail .c7{width:15%}     /* 현공정     */
.rpt table.detail .c8{width:4.5%}    /* 진도       */
.rpt table.detail .c9{width:6.5%}    /* 조합장     */
.rpt table.detail .c10{width:6%}     /* 비고       */
.rpt table.detail .c11{width:7%}     /* 설계사무소 */
.rpt table.detail .c12{width:7%}     /* 시공사     */
.rpt table.done{font-size:10px}
.rpt table.done th,.rpt table.done td{padding:1.5px 2px;line-height:1.25}
.rpt table.done .d1{width:5.5%}      /* 지역     */
.rpt table.done .d2{width:22%}       /* 공사명   */
.rpt table.done .d3{width:15%}       /* 규모     */
.rpt table.done .d4{width:8%}        /* 예산     */
.rpt table.done .d5{width:9%}        /* 기본설계 */
.rpt table.done .d6{width:9%}        /* 실시설계 */
.rpt table.done .d7{width:9%}        /* 착공     */
.rpt table.done .d8{width:9%}        /* 준공     */

.rpt .empty{color:var(--ink-3);font-size:12px;padding:var(--s3) 0}

@media (max-width:860px){
  .sheet{padding:var(--s4)}
  .rpt table{font-size:11px}
  /* 12 열 표는 좁은 화면에서 눌러도 못 읽는다 — `.tw` 가 옆으로 굴리게 최소 폭을 준다 */
  .rpt table.detail,.rpt table.done{min-width:900px}
}

@media print{
  /* 종이 치수는 옛 제출본과 같은 pt 값이다. 화면 px 를 그대로 쓰면 표가 한 장을 넘는다 */
  /* 종이는 늘 밝은 색이다. 새 얼굴(ui.css)을 얹은 뒤로 화면이 어두우면 글자 색이 옅은 값으로 남아
     흰 종이에 흐리게 찍힌다(2026-09-29) — 이 화면이 쓰는 색 이름만 종이 값으로 되돌린다.
     `:root` 를 세 번 적는 것은 ui.css 가 이 파일 **뒤에** 서고 어두운 화면 규칙이 두 겹이어서다 */
  :root:root:root{--ink:#000;--ink-2:#333;--ink-3:#555;--surface:#fff;--surface-2:#fff;color-scheme:light}
  body{background:#fff}
  main{padding:0;max-width:none}
  .noprint{display:none}
  .sheet{border:0;padding:0;background:#fff;box-shadow:none;border-radius:0;max-width:none}
  .rpt table{font-size:7.6pt}
  .rpt table.detail{font-size:6.4pt}
  .rpt table.done{font-size:6.6pt}
  .rpt table.detail,.rpt table.done{min-width:0}
  .rpt .tw{overflow-x:visible}
  .rpt th,.rpt td{border-color:#000}
  .rpt thead th{background:#fff}
  .rpt tr.sum th,.rpt tr.sum td{background:#fff;border-top:1.2pt solid #000}
  /* 표가 장을 넘어갈 때 머리글을 다시 찍는다. 안 하면 다음 장의 숫자가 무슨 열인지 모른다 */
  .rpt thead{display:table-header-group}
  .rpt tr{break-inside:avoid}
  .rpt h2,.rpt h3{break-after:avoid}
  .rpt .cover{break-after:page;border-bottom:0;padding-top:60mm}
}