/* 업무 화면 배치·밀도 = 관리회계 ERP 캡처(reports/anbit-ref, 레포 밖)와 같은 사용감 — 대표 2026-10-13.
 * 색은 office.css 의 시안 A 토큰 그대로(대표색 #1F6FD6). 여기는 면 구성만:
 *   흰 바닥 · 제목줄(왼쪽 제목, 오른쪽 경로) · 옅은 「조건」 상자 · 버튼줄(왼쪽 작업, 오른쪽 저장/인쇄)
 *   · 칸마다 선이 있는 촘촘한 표(옅은 파랑 머리, 맨 아래 합계 줄) · 서류철 탭.
 * 그림·로고 파일은 쓰지 않는다(CSS만). office.css 다음에 읽힌다.
 */
:root {
  --g-line: #C5D7EE;      /* 표 칸 선 */
  --g-head: #E4EEFA;      /* 표 머리 · 합계 줄 */
  --g-head-t: #1959AB;    /* 표 머리 글자 = brand-d2 */
  --g-sel: #F0F2F5;       /* 줄 위에 올렸을 때 */
  --cond-bg: #F5F8FC; --cond-bd: #D3DFEE;
  --g-fs: 13px;
}

/* ---- 바닥: 흰 화면, 상자는 선으로만 ---- */
.shell { background: #fff; }
/* 폭 = 내용이 쓰는 만큼(refactoring-ui: 넓은 화면을 채우려고 늘이지 않는다). 화면별로 셋:
 *   기본 1440(목록 표) · narrow 1024(입력·카드형) · wide 제한 없음(항목이 칸인 부과 계산 표) */
.main { --w: 1440px; gap: 12px; padding: 16px 24px; max-width: calc(var(--w) + 48px); }
.main.narrow { --w: 1024px; }
.main.wide { max-width: none; }
.card { border: 1px solid var(--line2); padding: 16px; }

/* ---- 제목줄: 왼쪽 제목(작은 대표색 표시) · 오른쪽 HOME › 경로 ---- */
.ph { align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ph h1 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.ph h1::before { content: ""; width: 6px; height: 18px; background: var(--brand); border-radius: 1px; flex: none; }
.ph .crumb { margin-left: auto; color: var(--t3); font-size: var(--fs-s); white-space: nowrap; }

/* ---- 조건 상자(캡처의 「검색조건 |」 줄) ---- */
.cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--cond-bg); border: 1px solid var(--cond-bd); border-radius: 6px; padding: 8px 16px; font-size: var(--g-fs); }
.cond .cl { color: var(--t2); font-weight: 600; padding-right: 12px; border-right: 1px solid var(--cond-bd); }
.cond b { font-variant-numeric: tabular-nums; }
details.cond > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.cond > summary::-webkit-details-marker { display: none; }
details.cond > summary::after { content: "▾ 펼치기"; margin-left: auto; color: var(--brand); font-size: var(--fs-s); }
details.cond[open] > summary::after { content: "▴ 접기"; }
details.cond[open] { display: block; }
details.cond[open] .floors { margin-top: 10px; }
.floorbox .floor .hos a { height: 26px; font-size: 13px; padding: 0 8px; }

/* ---- 버튼줄: 왼쪽 작업 · 오른쪽 저장/인쇄 ---- */
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbar form { margin: 0; display: contents; }
.tbar .sp { flex: 1; }
.tbar.end { margin-top: 8px; }
.tbar .btn.sm, .grid .btn.sm, .note .btn.sm { min-height: 28px; padding: 0 12px; border-color: #AEB8C6; background: linear-gradient(#fff, #EEF1F5); font-size: var(--fs-s); }
.tbar .btn.sm:hover, .grid .btn.sm:hover { background: var(--brand-l9); }
.tbar .btn.sm.pri { background: var(--brand); border-color: var(--brand-d2); color: #fff; }
.tbar .btn.sm.pri:hover { background: var(--brand-d2); }

/* ---- 요약칸: 큰 카드 대신 「이름 | 값」 한 줄 ---- */
.kpis { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--g-line); border-radius: 0; background: #fff; width: fit-content; max-width: 100%; }
.kpi { flex: 0 1 auto; min-width: 200px; border: 0; border-right: 1px solid var(--g-line); border-radius: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; align-items: stretch; }
.kpi:last-child { border-right: 0; }
.kpi .l { background: var(--g-head); color: var(--g-head-t); padding: 4px 12px; display: flex; align-items: center; font-weight: 700; white-space: nowrap; }
.kpi .v { font-size: 16px; padding: 4px 12px; text-align: right; align-self: center; }
.kpi .v small { font-size: 12px; }
.kpi .s { grid-column: 1 / -1; padding: 0 12px 4px; border-top: 1px dotted var(--g-line); text-align: right; }

/* ---- 표(캡처의 그리드): 칸마다 선 · 옅은 파랑 머리 가운데 · 숫자 오른쪽 · 합계 줄 ---- */
.gridbox { min-width: 0; }
.gridbox > .gh, .gridbox > summary.gh { font-size: 14px; font-weight: 700; margin: 4px 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gridbox > summary.gh { cursor: pointer; }
.gridbox > .gh::before, .gridbox > summary.gh::before { content: "▷"; color: var(--brand); font-size: 12px; }
.grid { border-collapse: collapse; width: 100%; font-size: var(--g-fs); background: #fff; border: 1px solid var(--g-line); }
.grid th, .grid td { border: 1px solid var(--g-line); padding: 4px 8px; height: 28px; line-height: 1.35; }
.grid th { background: var(--g-head); color: var(--g-head-t); font-weight: 700; text-align: center; white-space: nowrap; }
/* 칸 폭 = 내용 기준: 칸은 한 줄(내용 폭), fill 칸(상호·계량기·메모·남은 일)만 남는 폭을 나눠 가진다 */
.grid th.fill { width: 100%; }
@media (min-width: 861px) {
  .grid td { white-space: nowrap; }
  .tenant-tbl, .rgrid, .print-tbl { max-width: 1024px; }  /* 칸이 몇 개 안 되는 목록 표는 1024 안에서 끝낸다 */
}
.card.fit { width: fit-content; max-width: 100%; }
.grid th.n { text-align: center; }
.grid td.n { text-align: right; }
.grid tbody tr:hover td { background: var(--g-sel); }
.grid tfoot td { background: var(--g-head); color: var(--g-head-t); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .tag { height: 20px; padding: 0 6px; font-size: 12px; }
.grid a { text-decoration: none; }
.grid a:hover { text-decoration: underline; }
.grid .inp { height: 26px; padding: 0 6px; border-radius: 2px; font-size: var(--g-fs); }
.grid tr:target td { background: var(--brand-l9); box-shadow: inset 0 0 0 1px var(--brand-l5); }
.grid .key { color: var(--t3); font-size: 12px; }

/* ② 검침 표 */
.rgrid .c-val { width: 9.5em; }
.rgrid .c-val .inp { width: 8.5em; background: #FFFEF2; }      /* 입력 칸 = 옅은 노랑(캡처의 입력 그리드처럼) */
.rgrid .c-unit { text-align: center; white-space: nowrap; }
.rgrid .c-trade { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgrid .c-st { white-space: nowrap; }
.rgrid .c-act { white-space: nowrap; }
.rgrid .c-act form, .rgrid .c-act details { display: inline-flex; gap: 4px; align-items: center; margin: 0; vertical-align: middle; }
.rgrid .c-act label.check { gap: 4px; font-size: 12px; align-items: center; }
.rgrid .c-act label.check input { width: 16px; height: 16px; margin: 0; }
.rgrid tr.s-undetermined td.c-unit { box-shadow: inset 3px 0 0 var(--bad); }
.rgrid tr.s-needs_check td.c-unit { box-shadow: inset 3px 0 0 var(--warn); }
.rgrid .sayrow td { padding: 0; height: auto; border-top: 0; }
.rgrid .sayrow:hover td { background: transparent; }
.rgrid .sayrow p[hidden] { display: none; }
.rgrid .sayrow:not(:has(p:not([hidden]))) { display: none; }
.rgrid .say { margin: 0; padding: 6px 10px; font-size: 12px; }
.rgrid .say.bad { background: var(--bad-bg); color: #7A1616; }
.rgrid .say.warn { background: var(--warn-bg); color: #6B3A02; }
/* 교체 = 작은 팝업 상자(캡처의 등록 팝업처럼) */
details.pop { position: relative; }
details.pop[open] > form { position: absolute; right: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--brand-l5); box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 12px; display: flex; flex-direction: column; gap: 8px; width: 240px; white-space: normal; }
details.pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t2); }
.note { border: 1px solid var(--cond-bd); background: var(--cond-bg); border-radius: 6px; padding: 8px 16px; font-size: var(--g-fs); }

/* ③ 월 입력값 표 */
.vgrid .c-key { white-space: nowrap; }
.vgrid .c-grp { text-align: center; white-space: nowrap; }
.vgrid .c-val { width: 12em; }
.vgrid .c-val .inp { background: #FFFEF2; min-width: 9em; }
.vgrid .c-prev { color: var(--t2); width: 10em; }
.vgrid .c-note .inp { width: 100%; }
.vgrid .c-note .small { display: block; }

/* ③ 부과 계산 표 = 항목이 칸, 옆으로 스크롤, 호수 칸 고정 */
.tw.wide { overflow-x: auto; border: 1px solid var(--g-line); max-height: 70vh; overflow-y: auto; }
.tw.wide .grid { border: 0; width: max-content; min-width: 100%; }
.cgrid td, .cgrid th { white-space: nowrap; }
.cgrid thead th { position: sticky; top: 0; z-index: 2; }
.cgrid .fix { position: sticky; left: 0; z-index: 1; background: #fff; text-align: center; }
.cgrid thead th.fix { z-index: 3; background: var(--g-head); }
.cgrid tfoot td { position: sticky; bottom: 0; z-index: 2; }
.cgrid tfoot td.fix { z-index: 3; background: var(--g-head); }
.cgrid .tot { font-weight: 700; background: #F7FAFE; }
.cgrid tfoot .tot { background: var(--g-head); }
.cgrid .c-trade { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.cgrid tbody tr:hover td.fix { background: var(--g-sel); }

/* ---- 서류철 탭(캡처의 사용량조회/세대조회… 탭) ---- */
.tabs { border-bottom: 2px solid var(--brand); gap: 2px; }
.tabs a { padding: 8px 16px; border: 1px solid #B8C4D3; border-bottom: 0; background: linear-gradient(#fff, #E9EDF2); color: var(--t2); font-weight: 600; font-size: var(--g-fs); margin-bottom: 0; border-radius: 6px 6px 0 0; }
.tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- 휴대폰(390): 검침·월 입력값 표 → 카드, 부과 계산 표는 옆으로 밀기 ---- */
@media (max-width: 860px) {
  .main { padding: 12px; }
  .ph .crumb { display: none; }
  .kpis { width: auto; }
  .kpi { flex: 1 1 50%; min-width: 0; border-bottom: 1px solid var(--g-line); }
  .rgrid, .vgrid { border: 0; }
  .rgrid thead, .vgrid thead { display: none; }
  .rgrid tbody tr:not(.sayrow), .vgrid tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r); margin-top: 8px; background: #fff; }
  .rgrid tr.s-undetermined { border-color: var(--bad-bd) !important; }
  .rgrid tr.s-needs_check { border-color: var(--warn-bd) !important; }
  .rgrid td, .vgrid td { border: 0; padding: 0; height: auto; display: block; }
  .rgrid tbody tr:hover td, .vgrid tbody tr:hover td { background: transparent; }
  .rgrid tbody tr:not(.sayrow) { grid-template-areas: "unit unit st" "trade trade mt" "prev prev use" "val val val" "act act act"; }
  .rgrid .c-unit { grid-area: unit; text-align: left; font-size: 15px; box-shadow: none !important; }
  .rgrid .c-st { grid-area: st; text-align: right; }
  .rgrid .c-trade { grid-area: trade; color: var(--t2); max-width: none; }
  .rgrid .c-mt { grid-area: mt; text-align: right; color: var(--t3); font-size: 12px; }
  .rgrid td.c-prev { grid-area: prev; text-align: left; }
  .rgrid .c-use { grid-area: use; text-align: right; }
  .rgrid .c-val { grid-area: val; width: auto; display: flex !important; align-items: center; gap: 8px; }
  .rgrid .c-val .inp { flex: 1; width: auto; height: 40px; font-size: 18px; }
  .rgrid .c-act { grid-area: act; display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
  .rgrid .c-act .btn.sm { min-height: 36px; }
  .rgrid .c-act form:first-child { flex: 1; }
  .rgrid .c-act form:first-child .btn { flex: 1; }
  .rgrid .sayrow { display: block; }
  .rgrid .sayrow td { display: block; border: 0; }
  .rgrid .sayrow:not(:has(p:not([hidden]))) { display: none; }
  .rgrid .cell-label, .vgrid .cell-label { display: inline; }
  .rgrid tfoot, .vgrid tfoot { display: none; }
  .vgrid .c-key { grid-column: 3; text-align: right; order: 2; }
  .vgrid .c-lab { grid-column: 1 / 3; order: 1; }
  .vgrid .c-grp { display: none !important; }
  .vgrid .c-val { grid-column: 1 / 3; width: auto; order: 3; }
  .vgrid .c-prev { grid-column: 3; width: auto; order: 4; align-self: center; }
  .vgrid .c-note { grid-column: 1 / -1; order: 5; }
  .vgrid .c-val .inp, .vgrid .c-note .inp { height: 36px; }
  details.pop[open] > form { position: static; width: 100%; box-shadow: none; }
  .tbar .btn.sm { min-height: 36px; }
  .print-tbl.grid { border: 0; }
  .print-tbl.grid td { border: 0; height: auto; }
  .print-tbl.grid tbody tr { border: 1px solid var(--line2); margin-top: 6px; }
  .print-tbl.grid tfoot tr { display: grid; grid-template-columns: 1fr auto; }
  .print-tbl.grid tfoot td { border: 0; }
}

/* ---- 홈: 넓은 화면에서 왼쪽(할 일 + 단계 표) · 오른쪽(최근 계산). 좁으면 한 줄 ---- */
.homegrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.homemain { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.homeside { display: flex; flex-direction: column; gap: 8px; }
.homeside .gh { margin: 0; }
.homeside p { margin: 0; }
.homeside .btn { align-self: flex-start; }
.steps td.say { color: var(--t2); }
.grid.kv th { text-align: left; }
.grid.kv td.n { white-space: nowrap; }
@media (max-width: 1100px) { .homegrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .steps .say { display: none; } }  /* 휴대폰: 남은 일은 위 「지금 할 일」 상자가 말한다 */

/* ---- 인쇄: 화면 틀·버튼 빼고 표만 ---- */
@media print {
  .head, .side, .tabs, .tbar, .note, .floorbox, .todo, form .btn, .c-act, .rgrid th:last-child, .banner { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .tw, .tw.wide { overflow: visible; max-height: none; }
  .grid { font-size: 10px; }
  .grid .inp { border: 0; background: none; }
}