:root {
  color-scheme: light;
  /* 색의 원본은 tokens.css 다(UR-133 걸음 9). 이 파일은 옛 이름을 그대로 두고 값만 받아온다 —
     이름을 쓰는 237곳을 손대지 않으므로 되돌릴 곳도 이 묶음 하나다.
     폰과 컴퓨터가 서로 다른 파랑을 쓰던 것을 여기서 끝낸다. */
  --bg: var(--c-sunken);
  --panel: var(--c-ground);
  /* 표 머리·가라앉은 칸. --bg 보다 한 단계 옅어야 표 안에서 구분된다. */
  --panel-soft: #fafbfd;
  --sidebar: var(--c-ground);
  --line: var(--c-line);
  /* 입력칸 테두리처럼 한 단계 진한 선. 토큰 표에 없어 --c-line 에서 한 단계만 내렸다. */
  --line-strong: #d3daea;
  --ink: var(--c-ink);
  /* 설계 §3 은 글자색을 하나로 정했다 — 제목과 본문이 같은 잉크를 쓰고 보조만 흐려진다. */
  --text: var(--c-ink);
  --muted: var(--c-muted);
  /* 옛 --soft(#6b7280)는 --muted 와 거의 같았다. --c-faint 는 본문에 쓰기엔 흐려서
     (흰 바탕 대비 3:1) 작은 설명글에 쓰이는 이 이름은 --c-muted 로 받는다. */
  --soft: var(--c-muted);
  /* 누르는 것 — 버튼·링크·포커스. 폰의 셔터와 같은 파랑이다. */
  --primary: var(--c-action);
  /* 눌린 파랑(#2B57E0 을 84% 로 어둡게). 섞은 값을 그대로 적어 두면 브라우저가 무엇을
     계산하는지 보지 않아도 되고, 대비를 잴 때도 그대로 읽힌다. */
  --primary-hover: #2449bc;
  /* 브랜드와 '선택된 것' — 레일의 지금 화면, 고른 달, 강조 글자. 폰의 달 띠와 같은 남색이다. */
  --primary-deep: var(--c-navy);
  /* 고른 것의 바탕(남색 8%). 이 위에 남색 글자 9.4:1, 흐린 글자 5.1:1 로 둘 다 읽힌다. */
  --primary-soft: var(--c-navy-soft);
  --ok: var(--c-income);
  --ok-soft: #ecfdf3;
  --danger: var(--c-seal);
  --danger-soft: var(--c-seal-soft);
  --warn: #9a6700;
  --warn-soft: #fff8e8;
  --radius-sm: 8px;
  --radius-md: var(--r-card);
  --radius-lg: 16px;
  --sidebar-width: 208px;
  --shadow: 0 18px 48px rgb(19 26 42 / 14%);
  --shadow-soft: 0 1px 2px rgb(19 26 42 / 4%), 0 8px 20px rgb(19 26 42 / 4%);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  translate: 0 -160%;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
}

.skip-link:focus {
  translate: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 화면을 바꾸면 제목으로 포커스를 옮긴다 — 읽어 주는 장치를 위한 것이라 눈에 보이는 테두리는
   그리지 않는다. iOS Safari 는 tabindex="-1" 요소의 프로그램적 포커스에도 :focus-visible 을
   맞춰, 화면을 열 때마다 제목에 파란 네모가 남았다(2026-09-22 제보). */
#view-title:focus,
#view-title:focus-visible {
  outline: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.brand-mark {
  width: 44px;
  height: 32px;
  flex: 0 0 44px;
  object-fit: contain;
}

input:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(52 70 168 / 10%);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.zone-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zone-color, var(--primary-deep));
}

.month-item {
  min-height: 36px;
  padding-left: 16px;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: 650;
  text-align: left;
}

.text-button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary);
  font-size: var(--t-aux);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.text-button:hover {
  text-decoration-color: currentColor;
}

/* 껍데기(.app-shell · .rail · .workspace 폭)는 platform-shell.css 가 정한다(UR-163). */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--primary-deep);
  font-size: var(--t-aux);
  font-weight: 850;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: var(--t-figure);
  line-height: 1.18;
}

h2 {
  margin-bottom: 0;
  font-size: var(--t-title);
  line-height: 1.3;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button:hover,
.chip:hover,
.icon-button:hover,
.link-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.button:disabled,
.chip:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sync-status {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid #b8dfc7;
  border-radius: 7px;
  background: #f1fbf5;
  padding: 0 11px;
  color: var(--ok);
  font-size: var(--t-aux);
  font-weight: 800;
  white-space: nowrap;
}

.environment-badge {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid #b8dfc7;
  border-radius: 7px;
  background: #f1fbf5;
  padding: 0 11px;
  color: var(--ok);
  font-size: var(--t-aux);
  font-weight: 850;
  white-space: nowrap;
}

.environment-badge.development {
  border-color: #f2c078;
  background: #fff8e8;
  color: #9a5b00;
}

.sync-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.sync-status.connecting {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--muted);
}

.sync-status.saving {
  border-color: #c4d4f5;
  background: var(--primary-soft);
  color: var(--primary);
}

.sync-status.error {
  border-color: #efc1bd;
  background: var(--danger-soft);
  color: var(--danger);
}

.top-actions,
.modal-actions,
.button,
.chip,
.icon-button,
.link-button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font-weight: 800;
}

.category-list {
  display: grid;
  gap: 0;
}

.category-list button {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 10px 4px;
  text-align: left;
}

.category-list button:hover {
  background: var(--panel-soft);
}

.category-list button:last-child {
  border-bottom: 0;
}

.form-actions,
.report-export-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

input,
select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

.button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.button.primary:hover {
  border-color: #2c3d96;
  background: #2c3d96;
  color: #fff;
}

.chip {
  min-height: 32px;
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-body);
}

.chip.active {
  border-color: var(--primary-deep);
  background: var(--primary-soft);
  color: var(--primary-deep);
}

.chip-with-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chip-with-value strong {
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 750;
}

.chip-with-value.active strong {
  color: var(--primary-deep);
}

.link-button {
  min-height: 30px;
  color: var(--primary);
  padding: 0 9px;
  font-size: var(--t-aux);
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: var(--t-figure);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.route-notice {
  margin: -6px 0 16px;
  border: 1px solid #f0c36a;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: #6f4d00;
  padding: 10px 12px;
  font-size: var(--t-aux);
  font-weight: 700;
}

.sync-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
  border: 1px solid #f0c36a;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: #6f4d00;
  padding: 12px 14px;
}

.sync-notice.danger {
  border-color: #efc1bd;
  background: var(--danger-soft);
  color: var(--danger);
}

.sync-notice-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 320px;
}

.sync-notice-body strong {
  font-size: var(--t-body);
  font-weight: 800;
}

.sync-notice-body p {
  font-size: var(--t-aux);
  font-weight: 600;
  line-height: 1.5;
}

.sync-notice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.conflict-dialog {
  width: min(620px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: var(--shadow);
}

.conflict-dialog::backdrop {
  background: rgb(17 24 39 / 48%);
}

.conflict-modal {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.conflict-guide {
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: #6f4d00;
  padding: 12px 14px;
  font-size: var(--t-body);
  line-height: 1.6;
}

.conflict-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}

.conflict-compare th,
.conflict-compare td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: right;
}

.conflict-compare thead th,
.conflict-compare tbody th {
  text-align: left;
  color: var(--muted);
  font-weight: 700;
}

.conflict-compare thead th:not(:first-child) {
  text-align: right;
}

.hq-view {
  gap: 16px;
}

.hq-view.active {
  display: grid;
}

.hq-zone-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.hq-zone-panel > .panel-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.section-kicker {
  margin: 0 0 4px;
  color: var(--primary-deep);
  font-size: var(--t-micro);
  font-weight: 850;
  letter-spacing: 0.08em;
}

.hq-zone-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.hq-zone-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.hq-zone-table th,
.hq-zone-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

.hq-zone-table th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 800;
}

.hq-zone-table th:first-child {
  width: 31%;
}

.hq-zone-table th:nth-child(2) {
  width: 12%;
}

.hq-zone-table th:nth-child(3) {
  width: 18%;
}

.hq-zone-table th:nth-child(4),
.hq-zone-table th:nth-child(5) {
  width: 11%;
}

.hq-zone-table th:last-child {
  width: 17%;
}

.hq-zone-table tbody tr:last-child td {
  border-bottom: 0;
}

.hq-zone-table tbody tr:hover {
  background: #fcfcfd;
}

.hq-zone-name {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hq-zone-name > span {
  display: grid;
  min-width: 0;
}

.hq-zone-name strong,
.hq-zone-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hq-zone-name strong {
  color: var(--ink);
  font-size: var(--t-body);
}

.hq-zone-name small {
  color: var(--muted);
  font-size: var(--t-micro);
}

.status-pill {
  display: inline-flex;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 4px 8px;
  font-size: var(--t-micro);
  font-weight: 750;
  white-space: nowrap;
}

.status-pill.success {
  background: var(--ok-soft);
  color: var(--ok);
}

.number-cell {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}

.danger-text {
  color: var(--danger);
  font-weight: 750;
}

.action-cell {
  text-align: right !important;
}

.empty-table-cell {
  height: 120px;
  color: var(--muted);
  text-align: center !important;
}

.annual-metric-strip,
.dashboard-status-metrics,
.status-cards {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.status-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monthly-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.monthly-overview.detail-overview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.monthly-overview-card {
  min-width: 0;
  min-height: 96px;
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 14px 16px;
}

.monthly-overview-card.primary-metric {
  border-color: #cfd5f4;
  background: var(--primary-soft);
}

.monthly-overview-card.selected-category-metric {
  border-color: #d8e2ed;
  background: #f3f7fb;
}

.monthly-overview-card span,
.monthly-overview-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--t-aux);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-overview-card strong {
  display: block;
  overflow: hidden;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: var(--t-figure);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-label {
  flex: 0 0 72px;
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 800;
}

.metric,
.status-cards article,
/* 느낌 ②(2026-09-16): 카드는 테두리 대신 얕은 그림자, 모서리는 카드 반지름(14px). */
.panel {
  border: 0;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.metric,
.status-cards article {
  min-height: 96px;
  padding: 14px;
}

.metric span,
.metric em,
.status-cards span,
.panel-head span,
.muted {
  color: var(--muted);
  font-size: var(--t-body);
  font-style: normal;
}

/* 항목을 바꿔도 과거 지출은 옮기지 않는다는 정책(2026-09-08 회신 Q-50 ①). 규칙을 모르면
   실무자가 '옮기기'를 찾다가 항목을 지우려 든다 — 목록 바로 위에서 갈 길을 알려 준다. */
.category-policy {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: var(--space-3);
  color: var(--muted);
  font-size: var(--t-aux);
  line-height: 1.6;
}

.category-policy strong {
  color: var(--ink);
  font-weight: 700;
}

.metric strong,
.status-cards strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--ink);
  font-size: var(--t-figure);
  line-height: 1;
}

.danger strong,
.danger span,
.status-missing {
  color: var(--danger);
}

.category-admin,
.report-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
}

.panel {
  min-width: 0;
  padding: 18px;
}

.panel-head,
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* 폰에서는 제목과 한 줄 설명이 가로로 버티다 '결재 도장과 서 / 명', '탈 / 퇴'처럼 낱자로 쪼개졌다.
   좁으면 설명을 제목 아래로 내린다. */
@media (max-width: 760px) {
  .panel-head {
    display: grid;
    gap: 4px;
  }
}

.bars {
  display: grid;
  /* 열두 달이 한눈에 들어와야 '추이'다 — 카드가 좁아지면 막대가 줄어들되 넘쳐서 잘리지 않는다. */
  grid-template-columns: repeat(12, minmax(40px, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 360px;
  overflow-x: auto;
  padding-top: 10px;
}

.bars button {
  position: relative;
  display: block;
  min-width: 0;
  height: 340px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  text-align: center;
  font-size: var(--t-aux);
  font-weight: 800;
}

.bars button span {
  position: absolute;
  bottom: 58px;
  left: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: 100%;
  height: var(--bar-h);
  min-height: 10px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: transparent;
}

/* 항별 조각. 높이는 그 달 지출에서 차지하는 몫이고 조각 사이 2px 는 바탕색이 갈라 준다. */
.bars .bar-seg {
  flex: 1 1 calc(var(--seg) * 100%);
  min-height: 2px;
  background: var(--seg-c);
}

.bars-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-muted);
  font-size: var(--t-aux);
}

.bars-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bars-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--seg-c);
}

.bars button > strong:not(.bar-value) {
  position: absolute;
  right: 0;
  bottom: 27px;
  left: 0;
  white-space: nowrap;
}

.bars .bar-value {
  position: absolute;
  right: 50%;
  bottom: calc(64px + var(--bar-h));
  z-index: 1;
  color: var(--text);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(50%);
}

.bars em {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--soft);
  font-size: var(--t-micro);
  font-style: normal;
  white-space: nowrap;
}

#view-jan-summary .sheet tbody tr,
#view-jan-summary .sheet tbody td,
#view-jan-summary .sheet tbody .sticky-right,
#view-jan-summary .sheet tbody .locked,
#view-jan-detail .sheet tbody tr,
#view-jan-detail .sheet tbody td,
#view-jan-detail .sheet tbody .sticky-right,
#view-jan-detail .sheet tbody .locked {
  background: #fff;
}

.status-ok {
  color: var(--ok);
}

.sheet-wrap {
  max-width: 100%;
  overflow: auto;
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  background: #fff;
}

.table-pagination {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 700;
}

.table-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-pagination-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.table-pagination-controls select {
  min-height: 34px;
  padding: 0 8px;
}

@media (max-width: 640px) {
  .table-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .table-pagination-controls {
    justify-content: space-between;
  }
}

/* 고정 height 는 행이 적을 때 빈 테두리 영역만 남긴다(UR-091) — max-height 로 바꿔
   내용만큼 줄고, 내용이 길면 기존처럼 패널 안 스크롤을 유지한다. 폰·태블릿만의 규칙이다 —
   데스크톱·패드는 아래 761px 규칙에서 표가 자라고 페이지가 스크롤한다. */
#view-annual .sheet-wrap {
  max-height: max(360px, calc(100vh - 210px));
}

#view-jan-summary .sheet-wrap {
  max-height: max(320px, calc(100vh - 338px));
}

#view-jan-detail .sheet-wrap {
  max-height: max(320px, calc(100vh - 382px));
}

/* 데스크톱(1440 기준)에서는 표를 상자 안에서 따로 스크롤시키지 않는다 — 스크롤바가 둘이면
   어디를 밀어야 하는지 헷갈리고, 머리글은 화면 위에 붙어 따라온다. 폭은 1232px 안에 맞춘다.
   패드(761~1023)도 같은 규칙을 쓴다 — 열 폭을 풀어 두면 열일곱 칸이 한 화면에 짓눌려 날짜가
   '01.' 로 잘렸다(2026-09-16 QA). 좁으면 칸을 지키고 상자가 옆으로 스크롤한다. */
@media (min-width: 761px) {
  /* 데스크톱 표는 1232px 안에 다 들어온다 — 가로 스크롤도, 상자 안 세로 스크롤도 없다. 표가 자라고
     페이지가 스크롤한다. 그러려면 표 글자를 13px 로 낮춰야 해서 15px 바닥(UR-009)은 표에 한해 풀었다
     (2026-09-08 사용자 결정: "기존 지킨 거 무시하고 가장 좋은 방법으로"). 본문 글자는 그대로다. */
  #view-annual .sheet-wrap,
  #view-jan-summary .sheet-wrap,
  #view-jan-detail .sheet-wrap,
  #view-receipts .sheet-wrap {
    max-height: none;
    overflow: visible;
  }

  #view-annual .sheet,
  #view-jan-summary .sheet,
  #view-jan-detail .sheet,
  #view-receipts .sheet {
    min-width: 0;
    font-size: 13px;
  }

  #view-annual .sheet th,
  #view-annual .sheet td,
  #view-jan-summary .sheet th,
  #view-jan-summary .sheet td,
  #view-jan-detail .sheet th,
  #view-jan-detail .sheet td,
  #view-receipts .sheet th,
  #view-receipts .sheet td {
    height: 36px;
    padding: 6px 7px;
  }

  #view-jan-detail .sheet .sticky-right,
  #view-jan-summary .sheet .sticky-right,
  #view-receipts .sheet .sticky-right {
    position: static;
    box-shadow: none;
  }

  /* 세부내역 열여덟 칸을 1120px 에 맞춘다(1440 창의 본문 폭은 1116px). 9월 18일 템플릿(ver_2)이
     목과 세목을 나누라고 해서 칸이 하나 늘었고, 시간을 적은 줄이 없으면 그 칸이 숨어 1080px 이 된다.
     열 폭은 전부 고정이라 그보다 좁은 창(1280 등)에서는 칸이 무너지는 대신 상자가 옆으로 스크롤한다. */
  #view-jan-detail .sheet-wrap {
    overflow-x: auto;
  }

  /* 선택자 무게를 위 '#view-jan-detail .sheet { min-width: 0 }' 와 맞춘다(#annual-table 과 같은 처리).
     낮으면 min-width 가 죽어 표가 상자 폭에 갇히고, 고정 레이아웃이 열을 비율로 줄여 머리글이
     한 글자씩 세로로 접혔다(9월 21일 피드백 3항의 '레이아웃이 깨집니다'). */
  #view-jan-detail #detail-table {
    min-width: 1120px;
    table-layout: fixed;
  }

  /* 말줄임은 금액과 이름을 가렸다(2026-09-09 피드백 "다 보이게"). 칸을 넓히면 가로 스크롤이 돌아오니
     글자 칸은 줄을 바꿔 다 보이고, 날짜·금액·배지처럼 끊으면 안 되는 칸만 한 줄로 두고 그 폭을 준다. */
  #detail-table th,
  #detail-table td {
    padding-inline: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
    /* 낱말 가운데서 끊지 않는다 — '일반운영비'가 '일반운영 / 비'로 갈렸다(2026-09-29 QA). 칸보다 긴 낱말만
       위 anywhere 가 끊는다. */
    word-break: keep-all;
  }

  /* 표 맨 아래 합계 줄(2026-09-16 시안) — 굵은 선 하나로 본문과 끊는다. 필터를 건 결과의 합이다. */
  #detail-table tfoot td {
    border-top: 2px solid var(--line-strong);
    border-bottom: 0;
    background: var(--panel-soft);
    font-weight: 700;
    white-space: nowrap;
  }

  #detail-table tfoot .detail-income,
  #detail-table tfoot .detail-expense {
    text-align: right;
  }

  #detail-table td:nth-child(-n + 3),
  #detail-table td:nth-child(n + 12):not(:nth-child(16)):not(:nth-child(17)) {
    white-space: nowrap;
  }

  /* 갈음 서류 이름은 길다('세금계산서·계산서'). 한 줄로 두면 칸을 넘어 옆 칸을 덮으므로
     이 칸의 배지만 줄을 바꾼다(2026-09-18 담당자 제보). */
  #detail-table td.detail-receipt .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }

  #detail-table th:nth-child(1), #detail-table td:nth-child(1) { width: 50px; }
  #detail-table th:nth-child(2), #detail-table td:nth-child(2) { width: 44px; }
  #detail-table th:nth-child(3), #detail-table td:nth-child(3) { width: 34px; }
  #detail-table th:nth-child(4), #detail-table td:nth-child(4) { width: 50px; }
  #detail-table th:nth-child(5), #detail-table td:nth-child(5) { width: 64px; }
  #detail-table th:nth-child(6), #detail-table td:nth-child(6) { width: 68px; }
  #detail-table th:nth-child(7), #detail-table td:nth-child(7) { width: 68px; }
  #detail-table th:nth-child(8), #detail-table td:nth-child(8) { width: 70px; }
  #detail-table th:nth-child(9), #detail-table td:nth-child(9) { width: 76px; }
  #detail-table th:nth-child(10), #detail-table td:nth-child(10) { width: 68px; }
  #detail-table th:nth-child(11), #detail-table td:nth-child(11) { width: 48px; }
  #detail-table th:nth-child(12), #detail-table td:nth-child(12) { width: 88px; text-align: right; }
  #detail-table th:nth-child(13), #detail-table td:nth-child(13) { width: 88px; text-align: right; }
  #detail-table th:nth-child(14), #detail-table td:nth-child(14) { width: 56px; }
  #detail-table th:nth-child(15), #detail-table td:nth-child(15) { width: 64px; }
  #detail-table th:nth-child(16), #detail-table td:nth-child(16) { width: 52px; }
  #detail-table th:nth-child(17), #detail-table td:nth-child(17) { width: 84px; }
  #detail-table th:nth-child(18), #detail-table td:nth-child(18) { width: 48px; }

  #detail-table td.detail-content {
    white-space: normal;
  }

  /* 1440 창은 본문이 1194px 이라 1120px 보다 남는다. 남는 폭을 고르게 늘리지 않고 글자가 접히던 칸에 준다 —
     항·목의 다섯 글자 이름(일반운영비·사무용품비)이 한 줄에 서고, 수입지출목적은 붙임표에서 줄을 바꾼다
     (2026-09-29 QA). 그보다 좁은 창은 위의 폭 그대로다. */
  @media (min-width: 1400px) {
    #view-jan-detail #detail-table { min-width: 1194px; }
    #detail-table th:nth-child(3), #detail-table td:nth-child(3) { width: 38px; }
    #detail-table th:nth-child(5), #detail-table td:nth-child(5) { width: 72px; }
    #detail-table th:nth-child(6), #detail-table td:nth-child(6) { width: 72px; }
    #detail-table th:nth-child(8), #detail-table td:nth-child(8) { width: 92px; }
    #detail-table th:nth-child(9), #detail-table td:nth-child(9) { width: 88px; }
    #detail-table th:nth-child(10), #detail-table td:nth-child(10) { width: 76px; }
    /* 억 단위 금액('150,000,000')이 한 줄에 선다 — 고르게 늘리던 때의 폭(94px)을 지킨다. */
    #detail-table th:nth-child(12), #detail-table td:nth-child(12) { width: 94px; }
    #detail-table th:nth-child(13), #detail-table td:nth-child(13) { width: 94px; }
    #detail-table th:nth-child(18), #detail-table td:nth-child(18) { width: 52px; }
  }

  #detail-table .content-link {
    white-space: normal;
    text-align: left;
  }

  .sheet th {
    top: 0;
  }

  #view-jan-summary .sheet-input,
  #view-jan-summary .sheet-input.wide {
    width: 100%;
    min-width: 0;
  }

  /* 지출내역 아홉 칸도 1232px 안에 — 내역·산출근거가 남는 폭을 나눠 갖는다. */
  #jan-summary-table {
    table-layout: fixed;
  }

  #jan-summary-table th,
  #jan-summary-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #jan-summary-table th:nth-child(1), #jan-summary-table td:nth-child(1) { width: 66px; }
  #jan-summary-table th:nth-child(2), #jan-summary-table td:nth-child(2) { width: 98px; }
  #jan-summary-table th:nth-child(3), #jan-summary-table td:nth-child(3) { width: 196px; }
  #jan-summary-table th:nth-child(6), #jan-summary-table td:nth-child(6) { width: 110px; text-align: right; }
  #jan-summary-table th:nth-child(7), #jan-summary-table td:nth-child(7) { width: 76px; }
  #jan-summary-table th:nth-child(8), #jan-summary-table td:nth-child(8) { width: 90px; }
  #jan-summary-table th:nth-child(9), #jan-summary-table td:nth-child(9) { width: 96px; }
}

.sheet {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-body);
}

.sheet th,
.sheet td {
  height: 38px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  white-space: nowrap;
  vertical-align: middle;
}

.sheet th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 850;
  text-align: left;
}

.sheet td:first-child,
.sheet th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}

.sheet th:first-child {
  z-index: 3;
  background: var(--panel-soft);
}

#annual-table {
  width: 2292px;
  min-width: 2292px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

#annual-table th:nth-child(1),
#annual-table td:nth-child(1) {
  left: 0;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
}

#annual-table th:nth-child(2),
#annual-table td:nth-child(2) {
  left: 96px;
  width: 144px;
  min-width: 144px;
  max-width: 144px;
}

#annual-table th:nth-child(3),
#annual-table td:nth-child(3) {
  left: 240px;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  box-shadow: 2px 0 0 var(--line-strong);
}

#annual-table th:nth-child(-n + 3),
#annual-table td:nth-child(-n + 3) {
  position: sticky;
  z-index: 3;
  overflow: hidden;
  background: #fff;
  text-overflow: ellipsis;
}

#annual-table th:nth-child(-n + 3) {
  z-index: 5;
  background: var(--panel-soft);
}

#annual-table th:nth-child(n + 4),
#annual-table td:nth-child(n + 4) {
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  text-align: right;
}

#annual-table th:nth-child(n + 4) {
  text-align: left;
}

#annual-table tbody tr:nth-child(even) td:nth-child(-n + 3) {
  background: #fcfdff;
}

#annual-table tbody tr:hover td:nth-child(-n + 3) {
  background: var(--primary-soft);
}

#annual-table th:last-child,
#annual-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 4;
  background: #fff;
  box-shadow: -2px 0 0 var(--line-strong);
}

#annual-table th:last-child {
  z-index: 6;
  background: var(--panel-soft);
}

#annual-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  background: #f3f7fb;
  color: var(--ink);
}

#annual-table tfoot td:nth-child(-n + 3) {
  z-index: 7;
  background: #f3f7fb;
}

#annual-table tfoot td:last-child {
  z-index: 8;
  background: #eaf0f8;
}

/* 1440 데스크톱에서는 열두 달과 연간합계가 한 화면에 들어온다 — 가로 스크롤 없이(2026-09-08).
   그보다 좁으면 달 칸이 50px 아래로 줄어 '3,500,000' 이 옆 칸 숫자와 붙어 읽혔다(2026-09-16 QA).
   왼쪽 레일이 생긴 뒤 1440 창의 본문은 1194px 이라, 1232px 이던 최소 폭에서는 12월이 붙박이 연간합계
   뒤로 숨었다(2026-09-29 QA). 1180px 이면 달 칸이 69px 로 '18,920,000' 을 담는다. 그보다 좁은 창은
   상자가 옆으로 스크롤한다. */
@media (min-width: 761px) {
  #view-annual .sheet-wrap {
    overflow-x: auto;
  }

  /* 위쪽 '#view-annual .sheet { min-width: 0 }' 이 선택자 우선순위로 이긴다 — 같은 무게로 적는다. */
  #view-annual #annual-table {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
    font-size: 12px;
  }

  #annual-table th:nth-child(1),
  #annual-table td:nth-child(1) { width: 52px; min-width: 0; max-width: none; }

  #annual-table th:nth-child(2),
  #annual-table td:nth-child(2) { width: 78px; min-width: 0; max-width: none; left: 52px; }

  #annual-table th:nth-child(3),
  #annual-table td:nth-child(3) { width: 126px; min-width: 0; max-width: none; left: 130px; }

  #annual-table th:nth-child(n + 4),
  #annual-table td:nth-child(n + 4) {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 4px 4px;
    text-align: right;
  }

  #annual-table th:nth-child(n + 4) {
    text-align: right;
  }

  #annual-table th:last-child,
  #annual-table td:last-child {
    width: 88px;
    background: var(--panel-soft);
    font-weight: 800;
    font-size: 11px;
  }

  #annual-table .cell-link {
    min-height: 24px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
  }

  /* 0 은 표의 대부분이라 흐리게 — 숫자가 있는 칸이 먼저 보여야 한다. */
  #annual-table .cell-link.is-zero {
    color: var(--soft);
    font-weight: 500;
  }

  #annual-table tfoot td {
    background: var(--panel-soft);
    font-size: 11px;
  }

  #annual-table tfoot td:first-child {
    overflow: visible;
    white-space: nowrap;
  }
}

.sheet .sticky-right {
  position: sticky;
  z-index: 2;
  background: #fff;
  box-shadow: -1px 0 0 var(--line);
}

.sheet th.sticky-right {
  z-index: 4;
  background: var(--panel-soft);
}

.sheet .locked.sticky-right {
  background: #f2f4f7;
}

.sheet tbody tr:nth-child(even) td:first-child,
.sheet tbody tr:nth-child(even) .sticky-right {
  background: #fcfdff;
}

.sheet tbody tr:hover td:first-child,
.sheet tbody tr:hover .sticky-right {
  background: var(--primary-soft);
}

.sheet tbody tr.row-alert td:first-child,
.sheet tbody tr.row-alert .sticky-right {
  background: var(--danger-soft);
}

/* 증빙이 빠진 줄은 표를 훑을 때 가장 먼저 보여야 한다 — 배지는 오른쪽 끝에 있어서
   왼쪽부터 읽는 눈에 늦게 닿는다(UR-133 설계 §5.6). */
.sheet tbody tr.row-alert td:first-child {
  box-shadow: inset 3px 0 0 var(--c-seal);
}

.sheet tbody tr.row-alert .locked.sticky-right {
  background: #f7ebe9;
}

.sheet .summary-status {
  right: 0;
  min-width: 110px;
}

.sheet .summary-missing {
  right: 110px;
  min-width: 100px;
}

.sheet .summary-attached {
  right: 210px;
  min-width: 90px;
}

.sheet .summary-amount {
  right: 300px;
  min-width: 130px;
}

.sheet .detail-manage {
  right: 0;
  min-width: 90px;
}

/* 비고는 양식의 마지막 칸이라 사용자와 수정 사이에 든다(UR-139). 고정 칸 사이라 같이 고정한다. */
.sheet .detail-receipt {
  right: 90px;
  /* '예외 · 세금계산서·계산서' 가 들어가는 폭이다. 90px 에서는 배지가 144px 로 튀어나와
     옆 칸을 덮었다(2026-09-18 담당자 제보, 실측). */
  min-width: 150px;
}

.sheet .detail-note {
  right: 240px;
  min-width: 110px;
}

.sheet .detail-method {
  right: 350px;
  min-width: 90px;
}

.sheet .detail-user {
  right: 440px;
  min-width: 90px;
}



.sheet .detail-expense {
  right: 530px;
  min-width: 120px;
  font-weight: 850;
  text-align: right;
}

/* 수입을 같은 표에 적되 칸을 나눈다(2026-09-04 회신). 오른쪽 고정 칸이 하나 늘어 자리를 민다. */
.sheet .detail-income {
  right: 650px;
  min-width: 120px;
  font-weight: 850;
  text-align: right;
}

.detail-content {
  width: 220px;
  max-width: 220px;
}

.content-link {
  display: block;
  overflow: hidden;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgb(52 70 168 / 28%);
  text-underline-offset: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-link:hover {
  text-decoration-color: currentColor;
}

.sheet tbody tr:hover {
  background: var(--primary-soft);
}

.row-alert {
  background: #fff;
}

.locked {
  background: #f2f4f7;
  color: var(--muted);
  font-weight: 850;
}

.cell-link {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: right;
  font-weight: 800;
}

.cell-link:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.sheet-input {
  width: 160px;
  min-height: 28px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 6px;
}

.sheet-input.wide {
  width: 260px;
}

.sheet-input:hover,
.sheet-input:focus {
  border-color: var(--primary);
  background: #fff;
}

.sheet-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: var(--t-aux);
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* 상단 바 오른쪽 메타(2026-09-16 시안) — 넓은 화면에서만 선다. 좁으면 구역·달·단추가 먼저다. */
.top-meta {
  display: none;
  color: var(--muted);
  font-size: var(--t-aux);
  white-space: nowrap;
}

@media (min-width: 1440px) {
  .top-meta {
    display: inline;
  }
}

.badge.neutral {
  background: #eef1f5;
  color: #5f6b7b;
}

/* 증빙 예외(2026-09-16 결정) — 빠진 것(빨강)도 붙은 것(초록)도 아니다. 다른 서류로 갈음했으니
   결재자가 한 번은 눈으로 확인해야 한다는 뜻의 노랑이다. */
.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

/* 등록 창의 '영수증 없이 등록' — 파일 고르기 바로 아래에서 다른 길임을 알린다. */
.receipt-exempt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* '.receipt-modal label { display: grid }' 이 이 줄에도 걸려 네모가 칸을 꽉 채웠다 — 같은 무게로 적는다. */
.receipt-modal .receipt-exempt-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body);
  cursor: pointer;
}

.receipt-modal .receipt-exempt-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
}

.receipt-exempt-fields {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border-radius: var(--r-control);
  background: var(--warn-soft);
  padding: 12px;
}

.receipt-exempt-fields small {
  color: var(--warn);
  font-size: var(--t-aux);
}

.form-panel label,
.receipt-modal label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 850;
}

.form-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.category-list button {
  grid-template-columns: 1fr auto;
}

.category-list button.disabled {
  opacity: 0.5;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.admin-tabs button {
  min-height: 40px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.admin-tabs button.active {
  border-bottom-color: var(--primary-deep);
  color: var(--primary-deep);
}

.admin-tabs button span:not(:empty) {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  place-items: center;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: var(--t-micro);
}

.category-group {
  overflow: hidden;
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm);
  background: #fff;
}

.category-group + .category-group {
  margin-top: 10px;
}

.category-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 9px 12px;
}

.category-group-head span {
  color: var(--muted);
  font-size: var(--t-micro);
}

/* .setting-item 공용 그리드(2열)가 파일 뒤쪽에 있어 같은 특이도의 .category-row 를 덮었다 —
   복합 셀렉터로 특이도를 올려 3열(손잡이·이름·동작)이 항상 이기게 한다. */
.setting-item.category-row {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  border: 0;
  border-radius: 0;
}

.category-row > span:not(.drag-handle) {
  display: grid;
  gap: 3px;
}

.category-row small {
  color: var(--muted);
}

.category-row + .category-row {
  border-top: 1px solid var(--line);
}

.category-row.dragging {
  opacity: 0.45;
}

.drag-handle {
  color: var(--soft);
  cursor: grab;
  font-size: var(--t-row);
  letter-spacing: -3px;
}

.approval-dialog {
  width: min(680px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: var(--shadow);
}

.approval-dialog::backdrop {
  background: rgb(17 24 39 / 48%);
}

.approval-modal {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.approval-guide {
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text);
  padding: 12px 14px;
}

.seal-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  /* 미리보기가 더 높아도 왼쪽 열을 늘리지 않는다 — 늘리면 파일 선택과 아래 확인 문구 사이에
     빈 칸이 생겨 둘이 다른 묶음처럼 보인다. */
  align-items: start;
  gap: 16px;
}

.seal-file-field {
  display: grid;
  align-content: start;
  gap: 8px;
  color: var(--ink);
  font-weight: 750;
}

/* 파일 선택 컨트롤. 브라우저 기본 파일 입력을 감추고 우리 버튼을 쓴다 — 기본 버튼의 글자는
   브라우저 로케일을 따라가서 화면마다 "파일 선택"과 "Choose File" 이 섞이고, 가이드 캡처에도
   사용자가 보지 못할 문구가 찍힌다. 감춘 입력은 label 안에 있어 클릭이 그대로 전달되고,
   키보드 초점은 인접 형제 규칙으로 컨트롤에 그려 준다. */
.file-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.file-picker-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 5px;
}

.file-picker-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 750;
}

.file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker input[type="file"]:focus-visible + .file-picker-control {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(52 70 168 / 10%);
}

/* 내 계정 — 내 정보와 결재 도장·서명 */
.account-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.account-identity dt {
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 750;
}

.account-identity dd {
  margin: 2px 0 0;
  color: var(--ink);
}

.approval-mark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.approval-mark {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.approval-mark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.approval-mark-head button[aria-pressed="true"] {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 750;
}

.approval-mark-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--soft);
  font-size: var(--t-aux);
}

.approval-mark-preview img {
  max-height: 80px;
  max-width: 100%;
}

.approval-mark-picker {
  position: relative;
  display: inline-flex;
  margin-top: 10px;
}

.approval-mark-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.approval-mark-picker .file-picker-button {
  min-height: 40px;
  cursor: pointer;
}

.seal-file-field small {
  color: var(--soft);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
}

.seal-preview {
  display: grid;
  min-height: 132px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--muted);
  padding: 12px;
  text-align: center;
}

.seal-preview img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}

.approval-password,
.approval-reason {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-weight: 650;
}

/* 전역 입력 규칙이 textarea 를 빼 두어 사유 칸만 브라우저 기본 글꼴·테두리로 보였다. 비밀번호 칸과 같은 모양으로 맞춘다. */
.approval-reason textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  padding: 8px 10px;
  resize: vertical;
}

.approval-reason textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(52 70 168 / 10%);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.seal-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text);
  font-weight: 650;
}

/* 전역 input 규칙이 min-height 40px 을 주는 탓에 체크박스가 세로로 늘어나 글 아래로
   내려가 있었다. 크기를 고정하고 첫 줄 높이에 맞춰 올린다(.setting-row 와 같은 18px). */
.seal-confirm input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--primary);
}

.report-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: stretch;
  margin-bottom: 0;
}

.report-sheet-head h3 {
  display: grid;
  margin: 0;
  place-items: center;
  border: 1px solid #111;
  border-right: 0;
  color: #111;
  font-size: 19px;
}

.report-approval-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* 감사는 결재란 옆의 별도 검토칸이다(9월 1일 회신 Q-01 ②) — 겹선으로 결재 세 칸과 떼어 보인다. */
.report-approval-box > .report-audit-cell {
  border-left: 3px double #111;
}

.report-approval-box > div {
  position: relative;
  min-height: 76px;
  border: 1px solid #111;
}

.report-approval-box > div + div {
  border-left: 0;
}

.report-approval-box span {
  display: block;
  border-bottom: 1px solid #111;
  color: #111;
  font-size: 10px;
  text-align: center;
}

.report-approval-box img {
  position: absolute;
  inset: 22px 6px 4px;
  width: calc(100% - 12px);
  height: calc(100% - 26px);
  object-fit: contain;
}

@media (max-width: 760px) {
  .report-export-actions {
      flex-wrap: wrap;
    
  }

  .seal-picker-grid {
    grid-template-columns: 1fr;
  }

  .report-sheet-head {
    grid-template-columns: 1fr;
  }
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

/* 9월 21일 피드백 10항: 내 정보·도장과 서명·비밀번호 변경·탈퇴가 서로 붙어 한 덩어리로 보였다.
   이 탭만 패널 사이를 벌리고 구분선을 둔다 — 다른 탭의 배치는 그대로 둔다. */
.admin-panel[data-admin-panel="account"].active {
  display: grid;
  gap: var(--space-4);
}

.admin-panel[data-admin-panel="account"].active > * + * {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.admin-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zone-admin-layout {
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
}

.member-admin-layout {
  grid-template-columns: minmax(260px, 0.56fr) minmax(0, 1.44fr);
}

.zone-admin-list,
.member-list {
  display: grid;
  gap: 10px;
}

.zone-admin-item,
.member-item {
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 14px;
}

.zone-admin-item.active {
  border-color: #b7c2f5;
  background: #fbfcff;
}

.zone-admin-head,
.member-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.zone-admin-head > div,
.member-identity > span:last-child {
  display: grid;
  min-width: 0;
  flex: 1;
}

.zone-admin-head small,
.member-identity small {
  color: var(--muted);
  font-size: var(--t-micro);
}

.zone-admin-fields,
.member-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.zone-admin-fields label,
.member-controls > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 750;
}

.zone-admin-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.member-item {
  display: grid;
  gap: 12px;
}

.member-avatar {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 850;
}

.account-status {
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 700;
}

.zone-assignment-fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px 10px;
}

.zone-assignment-fieldset legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 750;
}

.zone-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.zone-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: var(--t-aux);
  font-weight: 650;
}

.zone-check-list input {
  min-height: auto;
  accent-color: var(--primary);
}

.button.compact {
  min-height: 32px;
  padding: 0 9px;
  font-size: var(--t-micro);
}

/* 기본 .icon-button(38px·글자 24px)은 행 안 동작 버튼으로는 과대하다 — compact 변형이 없어
   기본값이 그대로 새던 것을 여기서 닫는다. */
.icon-button.compact {
  width: 30px;
  height: 30px;
  min-height: 30px;
  font-size: var(--t-row);
}

.button.danger-text {
  color: var(--danger);
}

.settings-panel,
.fiscal-year-panel,
.organization-form {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.fiscal-year-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fiscal-year-list button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  padding: 0 12px;
  font-weight: 800;
}

.fiscal-year-list button.active {
  border-color: var(--primary-deep);
  background: var(--primary-soft);
  color: var(--primary-deep);
}

.fiscal-year-delete-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  margin-top: 6px;
  border: 1px solid #efc1bd;
  border-radius: 8px;
  background: #fff8f7;
  padding: 14px;
}

.fiscal-year-delete-box p {
  margin: 5px 0 0;
  color: var(--danger);
  font-size: var(--t-aux);
  line-height: 1.5;
}

.danger-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: var(--t-aux);
  font-weight: 700;
}

.danger-confirm input {
  width: 17px;
  height: 17px;
  accent-color: var(--danger);
}

.fiscal-year-delete-box .danger-action {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.fiscal-year-delete-box .danger-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fiscal-year-delete-requests {
  display: grid;
  gap: 8px;
}

.fiscal-year-delete-requests:empty {
  display: none;
}

.fiscal-year-delete-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #efc1bd;
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;
}

.fiscal-year-delete-request > div {
  display: grid;
  gap: 3px;
}

.fiscal-year-delete-request small {
  color: var(--muted);
  font-size: var(--t-aux);
}

.fiscal-year-delete-request .fiscal-year-delete-note {
  color: var(--danger);
  font-weight: 700;
}

.fiscal-year-delete-request .danger-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.setting-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.setting-row span {
  display: grid;
  gap: 4px;
}

.setting-row small {
  color: var(--muted);
  font-weight: 500;
}

.setting-row input[type="checkbox"] {
  /* 설명이 두세 줄로 접히는 줄에서 flex 가 상자를 눌러 줄마다 크기가 달라졌다. */
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.setting-list,
.admin-list,
.approval-list,
.audit-list {
  display: grid;
  gap: 8px;
}

/* 격자 칸을 채우지 않게 — "더 보기" 는 줄 하나가 아니라 단추다. */
#audit-load-more {
  justify-self: start;
}

.setting-item,
.admin-list-item,
.approval-item,
.audit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 11px 12px;
}

.setting-item.disabled {
  opacity: 0.55;
}

/* 배지와 버튼이 여럿이라 한 칸으로 묶는다 — .setting-item 은 두 칸 격자다. */
.setting-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-list-item > span,
.approval-item > span,
.audit-item > span {
  display: grid;
  gap: 3px;
}

.admin-list-item small,
.approval-item small,
.audit-item small {
  color: var(--muted);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.item-actions select {
  min-width: 92px;
}

/* 구성원 행 옆에 펼치는 사유·승인 입력줄 — prompt() 를 못 쓰는 대신 인라인으로 편다.
   item-actions 는 flex 라 flex-basis: 100% 로 다음 줄에 떨어뜨린다. */
.inline-action-form {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.inline-action-form input[type="text"] {
  min-width: 160px;
  flex: 1 1 160px;
}

.month-close-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* 폰에서는 넷으로 나누면 '10월 열림'이 두 줄로 접힌다 — 셋으로 나눈다. */
@media (max-width: 480px) {
  .month-close-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.month-close-grid button,
.month-close-grid span {
  white-space: nowrap;
}

.month-close-grid button {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}

.month-close-grid button.closed {
  border-color: #e5b3af;
  background: var(--danger-soft);
  color: var(--danger);
}

/* 운영자가 아닌 사람에게는 상태만 보인다 — 마감은 최종 결재, 다시 열기는 결재 화면의 몫이다(UR-098). */
.month-close-grid span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-weight: 800;
}

.month-close-grid span.closed {
  border-color: #e5b3af;
  background: var(--danger-soft);
  color: var(--danger);
}

.organization-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-form .panel-head,
.organization-form .setting-row,
.organization-form button {
  grid-column: 1 / -1;
}

.organization-form label:not(.setting-row) {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 800;
}

.audit-item {
  grid-template-columns: 150px minmax(0, 1fr) 120px;
}

/* 미리보기는 종이처럼 보인다 — 달마다 한 장(.report-month-group)이고, 인쇄에서도 그 단위로 페이지가 나뉜다. */
.print-preview {
  display: grid;
  gap: 18px;
  min-height: 640px;
  min-width: 0;
}

.print-preview .report-cover,
.print-preview .report-month-group,
.print-preview > .print-footnote {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgb(17 24 39 / 6%);
}

.print-preview .report-cover {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.print-preview .print-section + .print-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
}

.print-preview .print-sheet {
  min-width: 0;
  width: 100%;
}

/* 외부사용자 열람 잠금(9월 1일 답변 Q-16 ①). 화면 내용을 고르거나 끌지 못하고, 이름·이메일·
   시각 워터마크가 위에 얹힌다. 클래스는 외부사용자일 때만 붙으므로 다른 역할에는 영향이 없다. */
.viewer-locked .view {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.viewer-locked .report-export-actions {
  display: none;
}

/* 외부사용자가 아직 마감되지 않은 달을 고르면 표 대신 안내 한 줄만 보인다(8월 28일·9월 1일 답변 —
   외부에는 완료된 달만). 서버가 그 달의 줄을 내려주지 않으므로 이 규칙은 빈 표를 가리는 것뿐이다. */
#viewer-open-month {
  display: none;
}

.viewer-open-month .view.active {
  display: none;
}

.viewer-open-month #viewer-open-month {
  display: block;
}

/* 외부 사용자에게 가려진 칸이 왜 비었는지 적는 한 줄. */
.external-hidden-note {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.setting-note {
  margin: 0;
  padding: 10px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#viewer-watermark {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  align-content: start;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

#viewer-watermark span {
  place-self: center;
  transform: rotate(-28deg);
  color: var(--c-navy);
  opacity: 0.1;
  font-size: var(--t-aux);
  white-space: nowrap;
}

.report-controls {
  align-self: start;
}

.report-controls .panel-head {
  flex-direction: column;
  gap: 4px;
}

.report-controls .panel-head h2 {
  white-space: nowrap;
}

.report-controls .report-disclaimer {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* 종이에만 찍히는 꼬리말. 화면에서는 내려받기 단추 아래 같은 문장이 있어 두 번 보이지 않게 한다. */
.print-footnote {
  display: none;
}

.report-controls label {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.report-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.report-months span {
  grid-column: 1 / -1;
}



.report-entry-picker {
  margin: 14px 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.report-column-picker {
  margin: 14px 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.report-column-picker > .muted {
  margin: 5px 0 10px;
  font-size: 12px;
}

.report-column-picker fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  border: 0;
  padding: 0;
}

.report-column-picker legend {
  width: 100%;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}








.report-entry-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.report-entry-picker-head label,
#report-entry-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--ink);
}

#report-entry-list {
  display: grid;
  max-height: 230px;
  gap: 6px;
  overflow: auto;
  padding-right: 4px;
  font-size: 12px;
}

/* 공통 화면 밀도 — 표·설정·보고서가 서로 다른 제품처럼 보이지 않도록 카드와 여백의 기준을 맞춘다.
   본문 폭 상한(1680)은 2026-09-16 사용자 결정으로 없앴다 — 넓은 화면은 끝까지 쓴다(UR-163). */
@media (min-width: 981px) {
  .topbar {
    min-height: 60px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
  }

  .category-admin,
  .report-layout {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 24px;
  }

  /* 9월 21일 피드백 9항: 목록 아래쪽 항목의 '수정'을 눌러도 편집 폼이 화면 밖으로 올라가 있었다.
     폼을 따라오게 두면 누른 자리에서 그대로 고친다(보고서 설정과 같은 방식). */
  .report-controls,
  .category-admin > #category-form {
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow: auto;
  }

  #view-report .report-layout {
    height: calc(100vh - 184px);
    min-height: 660px;
    gap: 0;
  }

  #view-report .report-controls {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.panel,
.metric,
.status-cards article,
.monthly-overview-card {
  border-color: #dfe5ef;
  border-radius: 12px;
}

.panel {
  padding: 22px;
}

.panel-head {
  margin-bottom: 18px;
}

.panel-head h2 {
  letter-spacing: -0.035em;
}

.sheet-wrap {
  border-color: #dfe5ef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(19 26 42 / 3%);
}

.sheet th,
.sheet td {
  height: 42px;
  border-color: #e5e9f0;
}

.sheet th {
  background: #f7f9fc;
  color: #536177;
  font-size: 12px;
}

.sheet tbody tr:not(.row-alert):hover td {
  background: #f8faff;
}

.table-empty-state {
  display: grid;
  min-height: 224px;
  place-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
}

.table-empty-state strong {
  color: var(--ink);
  font-size: var(--t-title);
}

.table-empty-state span {
  color: var(--muted);
}

.table-empty-state .button {
  justify-self: center;
  margin-top: 6px;
}

/* 선택한 1번 시안: 조작은 왼쪽의 짧은 단계로, 결과는 오른쪽 문서에 고정한다. */
.report-controls {
  background: #fff;
}

.report-controls .panel-head {
  flex-direction: row;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.report-controls .panel-head > span {
  flex: 0 0 auto;
  border: 1px solid #d9e1ee;
  border-radius: 999px;
  background: #f7f9fc;
  padding: 4px 8px;
  color: var(--primary-deep);
  font-size: 11px;
  font-weight: 800;
}

.report-controls > .muted {
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.55;
}

.report-stage {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 18px 0 0;
}

.report-stage + .report-stage {
  margin-top: 18px;
}

.report-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.report-stage-head > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.report-stage-head strong {
  color: var(--ink);
  font-size: 14px;
}

.report-months {
  gap: 6px;
  margin: 0 0 14px;
}

.report-months span {
  margin-bottom: 2px;
}



.report-controls label {
  margin: 0;
}

.report-controls select {
  min-height: 42px;
  border-color: #dfe5ef;
  background: #fff;
}

.report-entry-picker-head {
  margin-bottom: 8px;
}

.report-entry-picker > .muted,
.report-column-picker > .muted {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
}

#report-entry-list {
  max-height: 250px;
  gap: 0;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  padding: 2px 8px;
}

#report-entry-list label {
  min-height: 38px;
  border-bottom: 1px solid #edf0f5;
}

#report-entry-list label:last-child {
  border-bottom: 0;
}

.report-column-picker fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}


.report-export-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 20px;
}

.report-export-actions .button {
  min-height: 44px;
}

.print-preview {
  align-self: start;
  min-width: 0;
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  background: #f7f9fc;
  padding: clamp(14px, 2vw, 28px);
}

.print-preview .print-sheet {
  box-shadow: 0 12px 32px rgb(19 26 42 / 8%);
}

/* 시안의 문서 작업대: 종이는 미리보기 안에 한 장으로 놓고, 보고서 정보는 종이 안에서만 읽는다. */
#view-report.active ~ * {
  min-width: 0;
}

body:has(#view-report.active) #view-eyebrow,
body:has(#view-report.active) #view-title {
  display: none;
}

.report-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 2px 0 18px;
}

.report-page-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  letter-spacing: -0.055em;
}

.report-page-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.report-page-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .report-page-header {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }

  .report-page-header h2 {
    font-size: 22px;
    letter-spacing: -0.03em;
  }

  .report-page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .report-page-actions .button {
    justify-content: center;
  }
}

.report-page-actions .button {
  min-height: 46px;
  padding: 0 18px;
}

.report-layout {
  gap: 0;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #fff;
}

.report-controls {
  z-index: 1;
  border: 0;
  border-right: 1px solid #dfe5ef;
  border-radius: 0;
  box-shadow: none;
  padding: 26px 22px 24px;
}

.report-controls .panel-head {
  display: none;
}

.report-controls > .muted {
  display: none;
}

.report-stage:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.report-stage-head {
  margin-bottom: 14px;
}

.report-stage-head > span {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
}

.report-stage-head strong {
  font-size: 17px;
  letter-spacing: -0.03em;
}

.report-stage-head > span::after {
  content: ".";
}

.report-months {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.report-months span {
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 2px;
}

/* 전체 선택은 달 열두 칸 위 한 줄을 통째로 쓴다 — 달 칸 사이에 끼면 열세 번째 달처럼 읽힌다. */
.report-months .report-months-all {
  grid-column: 1 / -1;
}

/* 낼 보고서(8월 31일 기획 · 9월 1일 회신): 셋 가운데 여러 개를 고른다. */
.report-parts {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.report-parts > .muted {
  margin: 2px 6px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.report-column-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}



.report-controls select {
  min-height: 40px;
  font-size: 12px;
}

.report-entry-picker,
.report-column-picker {
  padding-top: 20px;
}

.report-entry-picker-head > strong {
  font-size: 14px;
}

#report-entry-list {
  border: 0;
  border-radius: 0;
  background: #f7f9fc;
  padding: 4px 10px;
}

#report-entry-list label {
  min-height: 34px;
  font-size: 12px;
}

.report-column-picker fieldset {
  grid-template-columns: 1fr;
  gap: 2px;
}






.report-disclaimer {
  display: none;
}

/* 보고서 선택 컨트롤의 단일 규칙: 월·전체 선택·거래·열에 동일하게 적용한다. */
#view-report .report-controls label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

#view-report .report-controls label:has(input[type="checkbox"]):hover {
  background: var(--panel-soft);
}

#view-report .report-controls input[type="checkbox"] {
  appearance: auto;
  position: static;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border: initial;
  border-radius: initial;
  background: initial;
  box-shadow: none;
  accent-color: var(--primary);
  opacity: 1;
  cursor: inherit;
}

#view-report .report-controls input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

#view-report .report-controls input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

#view-report .report-controls label:has(input[type="checkbox"]:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

.report-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #f4f7fb;
}

.report-preview-toolbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dfe5ef;
  background: #fff;
  padding: 0 18px;
}

/* 9월 21일 피드백 8항: 탭으로 갈려 있던 인쇄 설정을 미리보기 위 한 줄로 올렸다. */
.print-settings-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 0;
}

.print-settings-inline label,
.print-settings-inline .print-setting-readout {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.print-parts-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.print-settings-inline .print-parts-inline label {
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.print-parts-inline input {
  accent-color: var(--primary);
}

.print-settings-inline select {
  min-height: 34px;
  border: 1px solid #d8e0ec;
  border-radius: 7px;
  background: #fff;
  padding: 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.print-settings-inline .print-setting-readout strong {
  color: var(--ink);
  font-size: 13px;
}

.report-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-zoom-controls {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d8e0ec;
  border-radius: 7px;
  background: #fff;
}

.preview-zoom-controls .icon-button {
  width: 36px;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  font-size: 20px;
}

.preview-zoom-controls output {
  display: grid;
  min-width: 62px;
  min-height: 34px;
  place-items: center;
  border-right: 1px solid #d8e0ec;
  border-left: 1px solid #d8e0ec;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.print-preview {
  display: grid;
  min-height: 0;
  height: 100%;
  place-items: start stretch;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #edf2f8;
  padding: 28px 16px;
}

.report-preview-panel {
  min-height: 0;
  overflow: hidden;
}

.report-preview-panel[hidden] {
  display: none;
}

/* 배율은 transform 이 아니라 zoom 이다 — transform 은 자리를 차지하지 않아 확대한 종이의 왼쪽이
   스크롤로도 닿지 않는 곳으로 잘렸다. 좁은 창에서는 표가 무너지지 않을 폭에서 멈추고 옆으로 스크롤한다. */
.report-paper {
  width: min(100%, 720px);
  min-width: 640px;
  min-height: 1018px;
  margin-inline: auto;
  background: #fff;
  padding: 54px 42px 34px;
  box-shadow: 0 14px 30px rgb(25 40 67 / 12%);
  zoom: var(--preview-scale, 1);
}

/* 종이 안에 카드를 한 겹 더 두면 지출내역서 표가 카드 밖으로 밀리고, 인쇄에는 없는 테두리라 미리보기가 출력과 달라진다. */
.report-paper .report-month-group {
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.report-paper .report-sheet-head {
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 12px;
  margin: 0 0 12px;
}

/* 머리말 장식을 걷은 뒤로 이 줄이 문서의 제목이다 — 엑셀 템플릿의 A1 과 같은 자리라
   그만큼 크게 둔다(2026-09-18 담당자 피드백). */
.report-paper .report-sheet-head h3 {
  min-height: 74px;
  border-right: 1px solid #111;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

/* 가로 인쇄 미리보기 — A4 를 눕히면 폭과 높이가 뒤바뀐다(2026-09-18 담당자 피드백). */
.report-paper.landscape-print {
  width: min(100%, 1018px);
  min-width: 0;
  min-height: 720px;
}

.report-paper .report-approval-box {
  width: 256px;
}

.report-paper .report-approval-box > div {
  min-height: 74px;
}

.report-document-content .print-section { margin-top: 0; }
/* 머리말을 걷었으니 이 줄이 문서의 제목이다 — 그만큼 크게 둔다(2026-09-18 담당자 피드백). */
.report-document-content .print-section h3 { margin-bottom: 9px; font-size: 24px; }
.report-document-content .print-section + .print-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5eaf1; }
.report-document-foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 32px; border-top: 2px solid #23365c; padding-top: 10px; color: #79869e; font-size: 9px; }
.report-document-foot strong { flex: 0 0 auto; color: #23365c; }

/* 별첨 — 영수증·증빙을 보고서 뒤에 두 줄로 붙인다. 격자를 쓰지 않는 것은 Chrome 인쇄가 격자를
   장 사이에서 조각내다 빈 장을 만들기 때문이다(결재란과 같은 이유). */
.report-attachments { margin-top: 32px; }
.report-attachment-section h3 { margin: 0 0 4px; font-size: 20px; }
.report-attachment-count { margin: 0 0 12px; color: #5b6880; font-size: 11px; }
.report-attachment {
  display: inline-block;
  box-sizing: border-box;
  width: calc(50% - 6px);
  margin: 0 12px 12px 0;
  border: 1px solid #cfd6e2;
  padding: 8px;
  vertical-align: top;
  break-inside: avoid;
  page-break-inside: avoid;
}
.report-attachment:nth-child(2n) { margin-right: 0; }
.report-attachment figcaption { display: grid; gap: 2px; margin-bottom: 6px; color: #23365c; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.report-attachment figcaption span { color: #79869e; font-size: 9px; }
/* 작은 그림을 칸에 맞춰 늘리지 않는다 — 흐려진 영수증은 읽을 수 없다. */
.report-attachment img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; }
.report-attachment-file { margin: 0; color: #5b6880; font-size: 10px; line-height: 1.5; }

/* 항목 관리는 줄마다 동일한 정보 위치와 한 덩어리의 행동 영역을 제공한다. */
.category-group {
  border-color: #dfe5ef;
  border-radius: 12px;
}

.category-group-head {
  min-height: 58px;
  padding: 12px 16px;
}

.setting-item.category-row {
  grid-template-columns: 24px minmax(180px, 1fr) minmax(78px, auto) minmax(74px, auto) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
}

.category-row-name small,
.category-row-usage {
  color: var(--muted);
  font-size: 12px;
}

.category-row-usage {
  white-space: nowrap;
}

.category-row .item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.category-row .item-actions .button,
.category-row .item-actions .icon-button {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
}

.category-row .item-actions .button:hover,
.category-row .item-actions .icon-button:hover {
  border-color: #d8e0ee;
  background: #f5f8fd;
}

.report-cover h2 small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.portrait-detail-sheet th:nth-child(1) { width: 11%; }
.portrait-detail-sheet th:nth-child(2) { width: 17%; }
.portrait-detail-sheet th:nth-child(3) { width: 16%; }
.portrait-detail-sheet th:nth-child(4) { width: 30%; }
.portrait-detail-sheet th:nth-child(5),
.portrait-detail-sheet th:nth-child(6) { width: 13%; }

.report-cover {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.report-cover p {
  margin: 0;
  color: var(--primary-deep);
  font-weight: 850;
}

.report-cover h2 {
  font-size: 26px;
}

.report-cover dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.report-cover div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.report-cover dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.report-cover dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 850;
}

.print-section {
  margin-top: 22px;
  break-inside: avoid;
}

.print-section h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.report-month-group + .report-month-group {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 3px double var(--line-strong);
}

.print-category-block {
  margin-top: 12px;
  break-inside: avoid;
}

.print-category-block h4 {
  margin: 0;
  border: 1px solid #9aa3b2;
  border-bottom: 0;
  background: #f8fafc;
  padding: 6px 8px;
  font-size: 11px;
}

.print-sheet {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 10px;
}

.print-sheet th,
.print-sheet td {
  border: 1px solid #9aa3b2;
  padding: 5px 6px;
  white-space: normal;
  word-break: keep-all;
  /* 9월 21일 피드백 8항: 보고서 표는 가운데 정렬로 읽는다. 금액은 아래 .num 이 다시 오른쪽으로 돌린다. */
  text-align: center;
}

.print-sheet .print-merged-cell {
  vertical-align: middle;
}

.print-sheet th {
  background: #eef1f5;
  font-weight: 850;
  text-align: center;
}

.print-sheet .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.google-ledger-sheet {
  max-width: 760px;
  table-layout: fixed;
}

.google-ledger-sheet th,
.google-ledger-sheet td {
  height: 24px;
  padding: 4px 6px;
  white-space: nowrap;
}

.google-ledger-sheet th {
  background: #ffffff;
  color: #111827;
  text-align: center;
}

.google-ledger-sheet th:nth-child(1),
.google-ledger-sheet td:nth-child(1) {
  width: 90px;
}

.google-ledger-sheet th:nth-child(2),
.google-ledger-sheet td:nth-child(2) {
  width: 130px;
}

.google-ledger-sheet th:nth-child(3),
.google-ledger-sheet td:nth-child(3) {
  width: 130px;
}

.google-ledger-sheet th:nth-child(4),
.google-ledger-sheet td:nth-child(4) {
  width: 120px;
}

.google-ledger-sheet th:nth-child(5),
.google-ledger-sheet td:nth-child(5) {
  width: 140px;
}

.google-ledger-sheet thead tr:first-child th {
  border-bottom: 0;
}

.google-ledger-sheet thead tr:nth-child(2) th {
  background: #f8fafc;
}

.print-subtotal td {
  background: #f7f7f7;
  font-weight: 850;
}

.print-grand-total td {
  background: #fff7e8;
  font-weight: 900;
}

.print-total td,
.print-total {
  background: #fff7e8;
  font-weight: 850;
}

.print-danger {
  color: var(--danger);
}

.print-missing-row td {
  background: #fff0ef;
}

.empty-print-row {
  color: var(--muted);
  text-align: center;
}

.mini-sheet {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mini-sheet span,
.mini-sheet strong {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
}

.receipt-dialog {
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: var(--shadow);
}

.receipt-dialog {
  width: min(820px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
}

.receipt-dialog::backdrop {
  background: rgba(21, 25, 34, 0.48);
}

.receipt-modal {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
}

.receipt-modal.is-view-mode .receipt-upload-section {
  grid-template-columns: minmax(0, 1fr);
}

.receipt-modal.is-view-mode .receipt-file-field {
  display: none;
}

.receipt-modal.is-view-mode:not(.has-receipt-file) .receipt-upload-section {
  display: none;
}

.receipt-modal.is-view-mode input:disabled,
.receipt-modal.is-view-mode select:disabled {
  opacity: 1;
  background: #fff;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.receipt-upload-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.receipt-file-field {
  align-content: start;
  min-width: 0;
}

/* 현장에서는 찍고 사무실에서는 고른다 — 두 갈래를 나란히 둔다. */
.receipt-pickers-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 750;
}

.receipt-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.receipt-modal .receipt-picker {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.receipt-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.receipt-picker .file-picker-button {
  min-height: 44px;
  cursor: pointer;
}

.receipt-picker input[type="file"]:focus-visible + .file-picker-button {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(52 70 168 / 10%);
}

.receipt-file-field .file-picker-name {
  display: block;
  margin: 6px 0 4px;
}

/* 영수증을 읽는 중인지, 채웠는지, 못 읽었는지를 알리는 한 줄. 자리를 늘 차지하면 폰에서
   빈 줄이 남으므로 할 말이 있을 때만 보인다. */
.receipt-reading-status {
  display: block;
  margin: 0 0 4px;
  color: var(--brand);
  font-size: var(--t-aux);
  font-weight: 600;
}

.receipt-reading-status.warn {
  color: var(--danger);
}

.receipt-camera-start {
  min-height: 44px;
}

.receipt-camera-confirm {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.receipt-camera-confirm p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-aux);
}

.receipt-camera-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 촬영 화면이 검은 사람에게는 이 한 줄이 유일한 단서다 — 작게 두되 눌러서 갈 수 있게 한다. */
/* 브라우저가 그리지 못하는 사진에 깨진 그림 아이콘 대신 남기는 말. */
.receipt-preview-unavailable {
  display: block;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 600;
  text-align: center;
}

.receipt-camera-help-open {
  display: block;
  margin-top: 4px;
}

.camera-permission-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 650;
  line-height: 1.55;
}

.camera-permission-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 600;
}

.field-wide {
  grid-column: 1 / -1;
}

.form-field {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 850;
}

.receipt-status-readout {
  display: flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: 0 12px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* 어디까지 적어야 저장되는지 칸 이름 옆에 적는다(2026-09-22 담당자 피드백) — 예전에는
   저장을 누른 뒤 "필수 항목을 확인하세요" 한 줄로만 알렸다. 거래처·사용자는 관리자 설정이
   정하므로 화면을 열 때 켜고 끈다. */
/* 칸 이름 앞에 선다(9월 22일 피드백 17항) — 어느 칸이 필수인지 왼쪽 줄만 훑어도 보인다. */
.required-mark {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--c-seal-soft);
  color: var(--c-seal);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}

.required-mark[hidden] {
  display: none;
}

/* 칸 이름과 '필수'는 한 덩어리다 — label 이 grid 라 감싸지 않으면 배지가 제 줄을 차지한다. */
.field-name {
  white-space: nowrap;
}

/* 조회 전용으로 열면 적을 일이 없다. */
.is-view-mode .required-mark {
  display: none;
}

/* 비어서 막힌 칸은 테두리로도 짚는다 — 안내 한 줄만으로는 폰에서 어느 칸인지 못 찾는다. */
.receipt-modal input[aria-invalid="true"],
.receipt-modal select[aria-invalid="true"],
.receipt-modal .category-pick[aria-invalid="true"] {
  border-color: var(--c-seal);
  box-shadow: 0 0 0 3px var(--c-seal-soft);
}

/* 일자와 시간은 한 자리를 나눠 쓴다 — 시간이 제 칸을 차지하면 아래 칸 하나가 빈다. */
.entry-datetime {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.receipt-preview {
  display: grid;
  min-height: 126px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
}

.receipt-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

/* 알림 창의 확인 한 줄. .modal-actions 는 단추와 같은 테두리·배경을 물려받아 빈 상자가 보인다. */
.picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.receipt-modal .modal-actions {
  position: sticky;
  z-index: 5;
  bottom: -24px;
  margin: 18px -24px -24px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px 24px;
}

/* 더보기에서 들어온 화면의 되돌아가기. 구역 단추와 같은 자리, 같은 크기다. */
.topbar-back {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--ink);
  padding: 0 6px;
  font-size: var(--t-row);
  font-weight: 800;
}

.topbar-back::before {
  content: "‹";
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
}

.topbar-back[hidden] {
  display: none;
}

/* 저장 단추와 막힌 이유는 한 덩어리다 — 둘이 떨어지면 누른 자리에서 결과가 보이지 않는다. */
.modal-actions-bar {
  position: sticky;
  z-index: 5;
  bottom: -24px;
  margin: 18px -24px -24px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.modal-actions-bar .modal-actions {
  position: static;
  margin: 0;
  border-top: 0;
  padding: 12px 24px;
}

.modal-actions-bar .form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  border-left: 0;
  border-bottom: 1px solid #f3d6d1;
  padding: 12px 24px;
}

.modal-actions-bar .form-error > span {
  flex-grow: 1;
  min-width: 0;
  font-weight: 700;
  line-height: 1.45;
}

.modal-actions-bar .form-error > button {
  flex: 0 0 auto;
  min-height: 36px;
  border-color: var(--danger);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--danger);
  padding: 0 14px;
  font-size: var(--t-aux);
}

/* 기간 시트 — 연도는 화살표로, 달은 열두 칸에서 한 번에. */
.period-year-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
}

.period-year-row strong {
  flex-grow: 1;
  text-align: center;
  font-size: var(--t-row);
}

#period-dialog .period-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#period-dialog .period-months .chip {
  min-height: 48px;
  justify-content: center;
  font-size: var(--t-body);
}

#period-dialog .period-quick {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

#period-dialog .period-quick .chip {
  flex-grow: 1;
  min-height: 44px;
  justify-content: center;
}

.period-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
}

.period-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--soft);
}

.form-error {
  margin: 14px 0 0;
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 12px;
  font-size: var(--t-row);
  font-weight: 600;
}

/* 내 계정 탭 피드백 — 성공(비밀번호 변경 등)과 실패를 같은 자리에서 색으로만 구분한다. */
.account-message {
  margin: 0 0 12px;
  color: var(--ok);
  font-size: var(--t-aux);
  font-weight: 700;
}

.account-message.error {
  color: var(--danger);
}

/* 총괄관리자에게 왜 볼 것만 있는지 말하는 줄. 막혔다는 경고가 아니라 안내라서 ab-note 와
   색을 달리한다. */
.ab-role-note {
  margin: 12px 0 0;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  padding: 8px 12px;
  font-size: var(--t-aux);
  font-weight: 600;
  line-height: 1.55;
}

.modal-actions .danger-action {
  margin-right: auto;
  border-color: #f0b9b5;
  background: var(--danger-soft);
  color: var(--danger);
}

.modal-actions .danger-action:hover {
  border-color: var(--danger);
}

@media (max-width: 1180px) {

  .monthly-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-overview.detail-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zone-admin-layout,
  .member-admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .monthly-overview.detail-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zone-admin-fields,
  .member-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

.month-view-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.month-view-tabs button {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 750;
}

.month-view-tabs button.active {
  border-bottom-color: var(--primary-deep);
  color: var(--primary-deep);
}

@media (max-width: 980px) {
  .month-item {
    width: 100%;
    padding-left: 16px;
  }

  .topbar,
  .top-actions {
    width: 100%;
  }

  .button,
  .chip,
  .icon-button,
  .link-button,
  .sync-status,
  .environment-badge,
  input,
  select {
    min-height: 44px;
  }

  .annual-metric-strip,
  .dashboard-status-metrics,
  .status-cards,
  .dashboard-grid,
  .category-admin,
  .report-layout,
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .report-controls {
    position: static;
    max-height: none;
  }

  .setting-item.category-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .category-row-usage {
    grid-column: 2;
  }

  .category-row .item-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
    padding-top: 8px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .admin-two-column,
  .organization-form {
    grid-template-columns: 1fr;
  }

  .audit-item {
    grid-template-columns: 1fr;
  }

  .fiscal-year-delete-box {
    grid-template-columns: 1fr;
  }

  .fiscal-year-delete-box .danger-action {
    grid-column: 1;
    grid-row: auto;
  }

}

@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  h1 {
    font-size: var(--t-figure);
  }

  #annual-table th:nth-child(2),
  #annual-table td:nth-child(2),
  #annual-table th:nth-child(3),
  #annual-table td:nth-child(3) {
    position: static;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions > * {
    min-width: 0;
    justify-content: center;
  }

  .hq-zone-panel > .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hq-zone-table-wrap {
    overflow: visible;
    padding: 12px;
  }

  .hq-zone-table {
    display: block;
    min-width: 0;
  }

  .hq-zone-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .hq-zone-table tbody {
    display: grid;
    gap: 10px;
  }

  .hq-zone-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 14px;
  }

  .hq-zone-table td {
    display: grid;
    gap: 3px;
    border: 0;
    padding: 0;
    text-align: left !important;
    white-space: normal;
  }

  .hq-zone-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--t-micro);
    font-weight: 750;
  }

  .hq-zone-table td:first-child,
  .hq-zone-table td:last-child {
    grid-column: 1 / -1;
  }

  .hq-zone-table td:first-child::before,
  .hq-zone-table td:last-child::before {
    display: none;
  }

  .hq-zone-table .action-cell .button {
    width: 100%;
    min-height: 44px;
  }

  /* 칸이 격자라 알약이 칸 폭만큼 늘어났다 — 글자만큼만 선다. */
  .hq-zone-table td .status-pill {
    justify-self: start;
  }

  .monthly-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .receipt-upload-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-overview-card {
    min-height: 88px;
    padding: 12px;
  }

  .monthly-overview-card strong {
    font-size: var(--t-title);
  }

  .filter-label {
    flex-basis: auto;
  }

  .dashboard-status-metrics,
  .status-cards {
    grid-template-columns: 1fr;
  }

  /* 열두 달을 두 열로 두면 여섯 줄이 되어 스크롤만 길어졌다(9월 22일 피드백 8항) — 세 열 네 줄로 줄인다. */
  .report-months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inline-form,
  .fiscal-year-delete-box,
  .audit-item {
    grid-template-columns: 1fr;
  }

  .sheet-wrap {
    border-radius: 0;
  }

  #view-jan-summary .sticky-right,
  #view-jan-detail .sticky-right {
    position: static;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {

  @page {
    size: A4 portrait;
    margin: 10mm 9mm;
  }

  /* 사이드바가 sticky+100vh, 작업 영역이 그리드 칸이라 그대로 인쇄하면 첫 장에서 잘렸다
     (2026-09-08 "PDF 도 많이 깨진다"). 인쇄에서는 격자를 풀고 보고서 미리보기만 흐름에 남긴다. */
  html,
  body {
    width: auto;
    height: auto;
    overflow: visible;
    background: white;
  }

  .app-shell {
    display: block;
    min-height: 0;
  }

  .rail,
  .topbar,
  .view-head,
  .route-notice,
  .skip-link,
  .sync-notice,
  .phone-tabs,
  .report-page-header,
  .report-controls,
  #viewer-open-month,
  .external-hidden-note,
  dialog,
  .view:not(#view-report) {
    display: none !important;
  }

  .workspace {
    max-width: none;
    padding: 0;
    overflow: visible;
  }

  #view-report {
    display: block !important;
  }

  /* 잠긴 사용자는 Ctrl+P 로도 보고서를 종이에 못 옮긴다 — 화면 대신 안내 한 줄만 찍힌다. */
  .viewer-locked .view.active,
  .viewer-locked #view-report,
  .viewer-locked #viewer-watermark {
    display: none !important;
  }

  body.viewer-locked::before {
    content: "인쇄가 허용되지 않은 화면입니다";
    display: block;
    padding: 20mm;
    font-size: 16pt;
  }

  /* 화면의 작업대(고정 높이·테두리)와 미리보기의 회색 바탕·종이 그림자·확대 배율은 화면 전용이다.
     그대로 두면 PDF 에 회색 테두리가 찍히고 110% 배율이면 오른쪽이 잘렸다(2026-09-15 QA). */
  .report-layout,
  #view-report .report-layout {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .report-preview-shell,
  .print-preview {
    background: none;
    padding: 0;
    box-shadow: none;
  }

  .report-paper {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    zoom: 1;
  }

  .print-preview .print-sheet {
    box-shadow: none;
  }

  .report-preview-toolbar {
    display: none !important;
  }

  .report-preview-shell,
  .report-preview-panel {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .print-preview {
    display: block;
    overflow: visible;
    min-height: 0;
  }

  .print-preview .report-cover,
  .print-preview .report-month-group,
  .print-preview > .print-footnote {
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .report-cover {
    display: none;
  }

  /* 달마다 새 장, 지출내역서와 세부내역도 각각 한 장부터 — 표가 장 사이에서 끊기면 머리글이 다시 붙는다. */
  .report-month-group + .report-month-group {
    break-before: page;
    page-break-before: always;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .print-preview .print-section {
    margin: 0;
    padding: 0;
    border: 0;
    break-inside: auto;
  }

  /* 화면 미리보기가 두 번째 표 위에 두는 여백·점선은 종이에서 앞 장 끝에 붙는다. 앞 장이 꽉 찬 달에는
     그 여백만 실린 빈 장이 생겼다(2026-09-08 재현). 종이에서는 여백 없이 새 장으로만 나눈다. */
  .print-preview .print-section + .print-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    break-before: page;
    page-break-before: always;
  }

  .report-sheet-head {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 별첨은 장부 뒤 새 장부터. 여백은 margin 이 아니라 새 장으로 나눈다(빈 장 방지). */
  .report-attachments {
    margin: 0;
  }

  .report-document-foot + .report-attachments {
    break-before: page;
    page-break-before: always;
  }

  .report-attachment img {
    max-height: 110mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-attachment a {
    color: inherit;
    text-decoration: none;
  }

  .print-sheet {
    width: 100%;
    font-size: 8pt;
  }

  .google-ledger-sheet {
    max-width: none;
  }

  .print-sheet thead {
    display: table-header-group;
  }

  .print-sheet tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-sheet th,
  .print-sheet td {
    height: auto;
    padding: 0.5pt 4pt;
    border-color: #555;
    line-height: 1.15;
  }

  /* 결재란은 화면보다 낮게(60px). 지출내역서 35줄 + 결재란이 A4 가로 한 장에 여유 있게 들어와야
     장 끝 1~2px 넘침으로 빈 장이 생기지 않는다(2026-09-08 재현). */
  .report-approval-box > div {
    min-height: 0;
    height: 60px;
  }

  .report-approval-box img {
    inset: 18px 6px 3px;
    height: calc(100% - 21px);
  }

  .google-ledger-sheet th,
  .google-ledger-sheet td {
    height: auto;
  }

  .print-sheet th {
    background: #eef1f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-approval-box img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 결재란을 격자(grid)로 두면 Chrome 인쇄가 끝에 빈 장을 하나 더 만든다(2026-09-08 재현 —
     격자 안의 격자 조각내기 버그). 종이에서는 결재란 세 칸을 표 칸으로 그린다; 모양은 같다. */
  .report-approval-box {
    display: table;
    width: 280px;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .report-approval-box > div {
    display: table-cell;
    position: relative;
    height: 76px;
    vertical-align: top;
  }

  /* 위 여백을 margin 으로 두면 장 끝에서 여백만 다음 장으로 넘어가 빈 장이 된다(2026-09-08 재현).
     padding 으로 두고 통째로 옮겨지게 한다. */
  .print-footnote {
    display: block;
    margin: 0;
    padding-top: 4mm;
    font-size: 8pt;
    color: #555;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 표 아래에 남는 여백·안쪽 여백이 장 끝을 몇 픽셀 넘기면 Chrome 이 그 조각만 실은 빈 장을 만든다
     (2026-09-08 재현: 지출내역서가 장을 꽉 채운 달). 종이에서는 표 둘레 여백을 전부 없앤다. */
  .print-section,
  .report-month-group,
  .print-sheet,
  .print-sheet tbody {
    margin: 0;
    padding: 0;
  }

  /* 마지막 요소 뒤에는 절대 새 장을 만들지 않는다 — 옛 규칙(표마다 break-after)이 빈 장을 남겼다. */
  .print-preview > :last-child,
  .print-preview .report-month-group:last-of-type .print-section:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

/* ── 연간 예산(UR-032) ────────────────────────────────────────────────────────
   목이 수십 줄이라 관·항으로 묶어 접어 읽는다. 집행률이 90%를 넘으면 주황, 100%를 넘으면
   빨강 — 숫자를 읽기 전에 눈이 먼저 찾게 한다(2026-09-08 범위 문서 4절). */
.budget-note {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--t-aux);
}

.budget-group {
  margin-bottom: var(--space-4);
}

.budget-group h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--t-aux);
  color: var(--muted);
  font-weight: 700;
}

.budget-sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-aux);
}

/* 폰에서는 여섯 열을 화면 폭에 욱여넣느라 머리글이 '집 행 률' 처럼 한 자씩 끊기고 목 이름도
   세로로 늘어졌다 — 숫자와 내용을 적으면 무엇을 적었는지 보이지 않았다(9월 22일 피드백 15항).
   칸을 글자에 맞추고 표째로 옆으로 밀게 한다. 밀리는 것은 이 상자 안뿐이다. */
@media (max-width: 760px) {
  .budget-table {
    overflow-x: auto;
  }

  .budget-sheet {
    min-width: max-content;
  }

  .budget-sheet th,
  .budget-sheet td {
    white-space: nowrap;
  }

  /* 예산액·편성 근거는 적는 칸이라 손가락이 닿을 만큼은 넓어야 한다. */
  .budget-sheet input[type="text"],
  .budget-sheet input[type="number"] {
    min-width: 96px;
  }

  .budget-sheet input.budget-basis {
    min-width: 150px;
  }
}

/* 묶음(관·항)마다 표가 따로 서므로 폭을 고정해야 목·예산액·집행액이 위아래로 맞는다.
   폰은 열이 너무 좁아지므로 예전처럼 내용에 맞춰 늘어나게 둔다. */
@media (min-width: 761px) {
  .budget-sheet {
    table-layout: fixed;
  }

  .budget-sheet th:nth-child(1) { width: 18%; }
  .budget-sheet th:nth-child(2) { width: 22%; }
  .budget-sheet th:nth-child(3) { width: 26%; }
  .budget-sheet th:nth-child(4) { width: 16%; }
  .budget-sheet th:nth-child(5) { width: 9%; }
  .budget-sheet th:nth-child(6) { width: 9%; }
}

.budget-sheet th,
.budget-sheet td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
}

.budget-sheet thead th {
  color: var(--muted);
  font-weight: 700;
}

.budget-sheet tbody th {
  font-weight: 600;
}

.budget-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.budget-row.warn td.budget-num,
.budget-row.over td.budget-num,
td.budget-num.over {
  font-weight: 700;
}

.budget-row.warn { background: #fff8ec; }
.budget-row.over { background: #fdf0ef; }
.budget-row.over td.budget-num,
td.budget-num.over { color: var(--c-seal); }

.budget-sheet input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font: inherit;
}

.budget-amount { text-align: right; font-variant-numeric: tabular-nums; }

.budget-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.budget-resolved {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-aux);
  font-weight: 700;
}

.budget-buttons { display: flex; gap: var(--space-2); }

.budget-empty { color: var(--muted); font-size: var(--t-aux); }

/* 연간 표 예산 세 열 · 홈 예산 한 줄 · 등록 창 초과 사유(UR-032) */
.annual-budget { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.annual-budget.warn { color: #b05e10; font-weight: 700; }
.annual-budget.over { color: var(--c-seal); font-weight: 700; }

.entry-over-reason {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
  border-radius: var(--radius-sm);
  background: #fdf0ef;
  padding: var(--space-3);
  color: var(--c-seal);
  font-size: var(--t-aux);
  font-weight: 700;
}
.entry-over-reason small { color: var(--muted); font-weight: 500; }

/* 예산을 세운 구역의 연간 표(UR-032). 1232px 안에 숫자 열 16개를 넣으면 한 칸이 54px 라
   "45,000,000"(약 72px)이 옆 칸을 덮는다 — 잘려 겹치는 것보다 밀어 보는 편이 읽힌다. 이름 세
   열은 이미 가로 고정(sticky)이라 밀어도 어느 줄인지 남는다. 예산이 없는 구역은 지금 그대로다. */
@media (min-width: 761px) {
  #view-annual .sheet-wrap.has-budget {
    overflow-x: auto;
  }

  /* 위 '#view-annual #annual-table' 과 같은 무게로 적어야 1232px 최소폭을 넘어설 수 있다. */
  #view-annual #annual-table.has-budget {
    width: 1500px;
    min-width: 1500px;
  }

  /* 연간합계·예산·잔액은 억 단위까지 들어가는 칸이다(8자리 + 쉼표 = 굵은 13px 로 약 80px).
     월 칸과 같은 폭을 주면 넘친다 — 이 셋만 넓히고 집행률은 좁힌다. */
  #annual-table.has-budget th:nth-child(16),
  #annual-table.has-budget td:nth-child(16),
  #annual-table.has-budget th:nth-child(17),
  #annual-table.has-budget td:nth-child(17),
  #annual-table.has-budget th:nth-child(19),
  #annual-table.has-budget td:nth-child(19) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }

  #annual-table.has-budget th:nth-child(18),
  #annual-table.has-budget td:nth-child(18) {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
  }
}

/* 출력할 월을 하나도 고르지 않았을 때(9월 22일 피드백 2항). 빈 종이를 보여 주는 대신
   무엇을 해야 하는지 종이 자리에 적는다. */
.report-paper-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
}

.report-empty-notice {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* ---------- 보고서 설정 줄 (9월 22일 피드백 9·10항) ---------- */
/* 폰에서는 출력 범위·방향·용지·배율·출력 단추가 한 줄에 눌려 들어가 서로를 밀어냈다.
   줄을 접고, 고르는 칸은 손가락이 닿을 높이로 세운다. */
@media (max-width: 760px) {
  .report-preview-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  .print-settings-inline {
    width: 100%;
    padding: 0;
  }

  /* 낼 보고서는 바로 위 '1. 기간과 양식' 에도 있다. 넓은 화면에서는 설정과 미리보기가 멀어
     한 줄이 더 필요하지만, 폰에서는 둘이 붙어 있어 같은 칸이 두 번 나올 뿐이다 — 여기서는 뺀다. */
  .print-settings-inline > .print-parts-inline {
    display: none;
  }

  .report-preview-actions {
    width: 100%;
    justify-content: space-between;
  }

  /* 고르는 칸의 세로 길이를 키운다 — 40px 은 손가락이 닿기에 얕았다(9항). */
  .report-controls select,
  .print-settings-inline select {
    min-height: 48px;
  }
}

/* 카드 · 계좌 거래내역 올리기(UR-018) — 결재 창의 틀을 넓혀 쓴다. */
.statement-import-bar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.statement-import-bar:has(> [hidden]) { display: none; }
.statement-dialog { width: min(1040px, calc(100vw - 32px)); }
.statement-guide, .statement-read { margin: 0; color: var(--muted); font-size: 14px; word-break: keep-all; }
.statement-read:empty { display: none; }
.statement-bulk { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.statement-bulk label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.statement-bulk select { min-width: 160px; }
.statement-table-wrap { max-height: min(52vh, 520px); overflow: auto; }
.statement-table { min-width: 760px; }
.statement-table td { word-break: keep-all; vertical-align: middle; }
.statement-table select { max-width: 280px; }
.statement-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-amount.is-income { color: var(--income, #0b7a57); }
.statement-note { color: var(--muted); font-size: 13px; }
.statement-table tr.is-saved td { opacity: 0.55; }
/* .modal-actions 를 쓰면 단추의 테두리 · 배경을 물려받아 빈 상자가 됐다 — 이 창만의 줄을 둔다. */
.statement-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.statement-hint { margin: 0 auto 0 0; color: var(--muted); font-size: 13px; word-break: keep-all; }
@media (max-width: 720px) {
  /* 폰에는 은행 · 카드사 엑셀이 없는 것이 보통이고, 목록이 첫 화면에서 시작해야 한다 — 컴퓨터에서 올린다. */
  .statement-import-bar { display: none; }
  /* 폰에서는 표를 옆으로 밀면 항목 칸이 화면 밖에 있었다 — 한 거래를 한 장으로 세운다. */
  .statement-bulk { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .statement-bulk label:first-child { grid-column: 1 / 2; }
  .statement-bulk label:nth-of-type(n + 2) { grid-column: 1 / -1; }
  .statement-bulk select { min-width: 0; width: 100%; }
  .statement-table-wrap { max-height: none; overflow: visible; }
  .statement-table { min-width: 0; }
  .statement-table thead { display: none; }
  .statement-table tbody { display: grid; gap: 8px; }
  .statement-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .statement-table td { padding: 0; border: 0; }
  .statement-table td:nth-child(1) { grid-row: 1 / 3; }
  .statement-table td:nth-child(2) { grid-column: 2; font-size: 13px; color: var(--muted); }
  .statement-table td:nth-child(3) { grid-column: 2; font-weight: 700; }
  .statement-table td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
  .statement-table td:nth-child(5) { grid-column: 1 / -1; }
  .statement-table td:nth-child(5) select { max-width: none; width: 100%; }
  .statement-table td:nth-child(6):empty { display: none; }
  .statement-table td:nth-child(6) { grid-column: 1 / -1; }
  .statement-actions .button { flex: 1 1 auto; }
  .statement-hint { flex-basis: 100%; }
}