/* 폰 셸(UR-133). 데스크탑에는 나타나지 않는다 — 옛 사이드바가 걸음 7 까지 그대로 산다.
   여기에는 새 셸 규칙만 둔다. 옛 셸 규칙은 은퇴할 때 styles.css 에서 함께 옮긴다. */
.phone-tabs {
  display: none;
}

@media (max-width: 760px) {
  .phone-tabs {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--c-ground);
    border-top: 1px solid var(--c-line);
  }

  .phone-tabs button {
    flex: 1;
    min-height: var(--tab-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--c-faint);
    padding: 0;
  }

  .phone-tabs button[aria-current="page"] {
    color: var(--c-navy);
    font-weight: 600;
  }

  .phone-tabs button svg {
    width: 22px;
    height: 22px;
  }

  /* 촬영은 이 앱의 중심이라 가운데를 크게 쓴다. HQ에서는 구역을 먼저 고른 뒤 연다. */
  .phone-tabs button.tab-shoot {
    flex: 0 0 auto;
    width: 60px;
    min-height: var(--tab-h);
  }

  .phone-tabs button.tab-shoot span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: -20px;
    border-radius: 18px;
    background: var(--c-action);
    box-shadow: 0 6px 16px rgb(43 87 224 / 32%);
  }

  .phone-tabs button.tab-shoot svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
  }

  /* 사이드바는 폰에서 자리를 비운다. 그 안의 것들은 '더보기' 탭이 받는다. */
  .sidebar {
    display: none;
  }

  /* 탭 막대에 마지막 줄이 가리지 않게 바닥을 띄운다. */
  .workspace {
    padding-bottom: calc(var(--tab-h) + var(--space-6));
  }
}

/* 홈(데스크탑 개편 §5.1). 폰과 컴퓨터가 같은 조각을 쓴다 — 아래 폰 규칙이 세로로 세우고,
   그 뒤의 컴퓨터 규칙이 가로로 눕힌다. */
.phone-home {
  display: block;
}

@media (max-width: 760px) {

  .ph-hero {
    padding: var(--space-2) 0 var(--space-4);
  }

  .ph-month {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--c-ink);
  }

  .ph-amt {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    font-variant-numeric: tabular-nums;
  }

  .ph-amt em {
    font-style: normal;
    font-size: var(--t-aux);
    color: var(--c-muted);
    min-width: 30px;
  }

  .ph-amt b {
    font-size: var(--t-title);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--c-ink);
  }

  .ph-amt.in b {
    color: var(--c-income);
  }

  .ph-todo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 0;
    border-radius: var(--r-card);
    background: var(--c-seal-soft);
    font: inherit;
    text-align: left;
  }

  .ph-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-seal);
    flex: 0 0 auto;
  }

  .ph-todo-body b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-ink);
  }

  .ph-todo-body small {
    display: block;
    font-size: var(--t-aux);
    color: var(--c-muted);
  }

  .ph-go {
    margin-left: auto;
    color: var(--c-seal);
    font-weight: 600;
    font-size: 14px;
  }

  .ph-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    margin-bottom: var(--space-5);
  }

  .ph-strip button {
    flex: 0 0 auto;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-ground);
    color: var(--c-muted);
    font: inherit;
    font-size: 14px;
  }

  .ph-strip button[aria-pressed="true"] {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
    font-weight: 600;
  }

  .ph-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .ph-sec-head h3 {
    margin: 0;
    font-size: var(--t-row);
    font-weight: 600;
    color: var(--c-ink);
  }

  .ph-link {
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--t-aux);
    color: var(--c-muted);
    padding: var(--space-2) 0;
  }

  .ph-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ph-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--c-line);
  }

  .ph-list li:first-child {
    border-top: 0;
  }

  .ph-date {
    font-size: var(--t-aux);
    color: var(--c-faint);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
  }

  .ph-body {
    flex: 1;
    min-width: 0;
  }

  .ph-body b {
    display: block;
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--c-ink);
  }

  .ph-body small {
    display: block;
    font-size: var(--t-aux);
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ph-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
    color: var(--c-ink);
  }

  .ph-num.in {
    color: var(--c-income);
  }

  .ph-empty {
    padding: var(--space-5) 0;
  }

  .ph-empty b {
    display: block;
    font-size: var(--t-row);
    font-weight: 600;
    color: var(--c-ink);
  }

  .ph-empty span {
    color: var(--c-muted);
    font-size: var(--t-body);
  }
}

/* 폰 윗머리(UR-133). 컴퓨터 화면의 머리말을 그대로 접어 두면 화면 절반을 먹는다 —
   폰에서는 구역 이름과 연결 상태 한 줄이면 충분하다. 나머지는 하단 탭과 '더보기'가 받는다. */
@media (max-width: 760px) {
  .topbar {
    justify-content: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) 0;
  }

  /* 화면 이름은 폰 홈이 '1월' 로 더 크게 말한다. 건너뛰기 링크와 포커스 대상이라 지우지 않고 줄인다. */
  .topbar .eyebrow {
    display: none;
  }

  /* 오른쪽 묶음이 남은 폭을 다 가져가면 화면 이름이 '대시보/드' 로 접힌다. 이름이 먼저다. */
  .topbar > div {
    flex: 1;
    min-width: 0;
  }

  .topbar > .top-actions {
    flex: 0 0 auto;
  }

  /* inline-block 이라야 화면을 바꿀 때 뜨는 포커스 테두리가 글자만 감싼다.
     블록이면 폭 전체에 파란 상자가 그려져 그것이 곧 잡음이 된다. */
  .topbar #view-title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    font-size: var(--t-row);
    font-weight: 600;
    color: var(--c-muted);
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* styles.css 는 .top-actions 를 .button·.chip 과 한 묶음으로 묶어 테두리와 흰 바탕을 준다.
     폰에서는 그 안에 동기화 점 하나만 남아 빈 상자로 보이므로 껍데기를 벗긴다. */
  .top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* styles.css 는 좁은 화면에서 이 묶음에 width:100% 를 준다 — 그러면 화면 이름이 설 자리가
       0 이 되어 사라진다. 폰에서는 점 하나만 남으므로 제 크기만 차지한다. */
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  /* 구역은 하단 탭의 '더보기' 에서 바꾼다. 윗머리에 또 두면 같은 것이 두 번 나온다. */
  .top-actions .mobile-zone-select,
  .top-actions #open-zone-page,
  /* 영수증 첨부는 이제 가운데 셔터다. */
  .top-actions #open-receipt-modal {
    display: none;
  }

  /* 환경·동기화는 글자 대신 점 하나로 말한다. 읽어야 할 때만 눌러서 확인한다. */
  .top-actions .environment-badge {
    font-size: 11px;
    padding: 2px 8px;
  }

  /* 글자 대신 점 하나. min-height 36px 을 함께 눌러야 동그라미가 타원으로 늘어나지 않는다. */
  .top-actions .sync-status {
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: 10px;
    min-width: 10px;
    height: 10px;
    min-height: 10px;
    padding: 0;
    gap: 0;
    font-size: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-faint);
    overflow: hidden;
  }

  .top-actions .sync-status.connected {
    background: var(--c-income);
  }

  .top-actions .sync-status.error {
    background: var(--c-seal);
  }
}

/* 내역 카드(UR-133). 데스크탑에서는 표만 보이고 전환 단추도 나타나지 않는다 —
   9월 4일 회신(Q-35 ①)대로 옆으로 미는 표는 지우지 않고 폰에서 전환으로 남긴다. */
.detail-mode {
  display: none;
}

.detail-cards {
  display: none;
}

@media (max-width: 760px) {
  .detail-mode {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 var(--space-3);
    background: var(--c-sunken);
    border-radius: 9px;
  }

  .detail-mode button {
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: var(--t-aux);
    color: var(--c-muted);
  }

  .detail-mode button[aria-pressed="true"] {
    background: var(--c-ground);
    color: var(--c-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(19 26 42 / 10%);
  }

  /* 폰에서만 둘 중 하나를 보여 준다. 데스크탑에는 이 규칙이 닿지 않으므로 표가 늘 보인다. */
  .detail-cards {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body[data-list-mode="table"] .detail-cards {
    display: none;
  }

  body[data-list-mode="cards"] #view-jan-detail .sheet-wrap {
    display: none;
  }

  .detail-cards li {
    border-top: 1px solid var(--c-line);
  }

  .detail-cards li:first-child {
    border-top: 0;
  }

  .detail-cards li > button {
    display: block;
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-3) 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
  }

  .dc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .dc-date {
    font-size: var(--t-aux);
    color: var(--c-faint);
    font-variant-numeric: tabular-nums;
  }

  .dc-num {
    font-size: var(--t-row);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
  }

  .dc-num.in {
    color: var(--c-income);
  }

  .dc-vendor {
    display: block;
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--c-ink);
  }

  .dc-desc {
    display: block;
    font-size: var(--t-body);
    color: var(--c-ink);
  }

  .dc-path,
  .dc-meta {
    display: block;
    font-size: var(--t-aux);
    color: var(--c-muted);
  }

  .dc-flag {
    font-style: normal;
    font-weight: 600;
    color: var(--c-seal);
  }

  /* 증빙 예외는 빠진 것이 아니라 갈음한 것이다 — 빨강이 아니라 노랑으로 구분한다. */
  .dc-flag.is-exempt {
    color: #9a6700;
  }

  .detail-cards li.is-missing > button {
    box-shadow: inset 2px 0 0 var(--c-seal);
    padding-left: var(--space-3);
  }

  .dc-empty {
    padding: var(--space-5) 0;
    color: var(--c-muted);
  }
}

/* 폰 내역 화면(UR-133). 카드 목록이 이 화면의 본문인데, 컴퓨터용 머리(결재 배너 · 숫자 카드
   다섯 장)를 그대로 두면 본문이 화면 밖으로 밀린다. 결재는 하단 탭의 '결재' 가 받고,
   숫자는 지금 필터에 걸린 합계 하나만 남긴다. */
@media (max-width: 760px) {
  #view-jan-detail .month-approval-bar {
    display: none;
  }

  #view-jan-detail .monthly-overview-card:not(.selected-category-metric) {
    display: none;
  }

  #view-jan-detail .monthly-overview {
    display: block;
    margin-bottom: var(--space-3);
  }

  #view-jan-detail .selected-category-metric {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  #view-jan-detail #detail-selected-hang-label {
    font-size: var(--t-aux);
    color: var(--c-muted);
    width: 100%;
  }

  #view-jan-detail #detail-selected-hang-total {
    font-size: var(--t-title);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
  }

  #view-jan-detail #detail-selected-hang-income {
    font-size: var(--t-aux);
    color: var(--c-income);
    font-variant-numeric: tabular-nums;
  }

  /* 화면 이름이 위에 있고 탭이 아래에 또 있으면 같은 말이 두 번이다. 탭만 남긴다. */
  #view-jan-detail .month-view-tabs {
    margin-bottom: var(--space-3);
  }

}

/* 환경 배지는 "지금 어느 데이터베이스를 건드리고 있나"를 알려 주는 개발자용 표시다.
   조합 실무자가 폰으로 쓰는 동안에는 뜻이 없는 글자라 감춘다 — 컴퓨터 화면에는 그대로 둔다. */
@media (max-width: 760px) {
  .top-actions .environment-badge {
    display: none;
  }
}

/* 항목 고르기(UR-133 설계 §5.4). 폰에서는 바닥에서 올라오고(위 시트 규칙) 컴퓨터 화면에서는
   가운데 뜬다 — 같은 요소, 다른 자리. */
.picker-dialog {
  box-sizing: border-box;
  width: min(520px, calc(100% - 32px));
  max-height: min(680px, calc(100vh - 64px));
  border: 0;
  border-radius: var(--r-card);
  padding: 0;
  background: var(--c-ground);
  box-shadow: 0 24px 60px rgb(19 26 42 / 22%);
}

.picker-dialog::backdrop {
  background: rgb(19 26 42 / 42%);
}

.picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: inherit;
  padding: var(--space-4);
}

.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-head h2 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--c-ink);
}

.picker-search {
  display: grid;
  gap: var(--space-1);
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.picker-search input {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-ground);
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-ink);
}

.picker-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.picker-trail button {
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-action);
  padding: var(--space-1) 0;
}

.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.picker-list li {
  border-top: 1px solid var(--c-line);
}

.picker-list li:first-child {
  border-top: 0;
}

.picker-list a {
  color: inherit;
  text-decoration: none;
}

.picker-list button,
.picker-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

.cp-name {
  font-size: var(--t-row);
  font-weight: 600;
  color: var(--c-ink);
}

.cp-hint {
  font-size: var(--t-aux);
  color: var(--c-muted);
  margin-left: auto;
  text-align: right;
}

.cp-more {
  color: var(--c-faint);
}

.cp-empty {
  padding: var(--space-5) 0;
  color: var(--c-muted);
}

/* 등록 창의 항목 줄. 고른 것을 그대로 보여 주는 단추라 목록처럼 보이면 안 된다. */
.category-pick {
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-ground);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink);
  text-align: left;
}

.category-pick.is-empty {
  color: var(--c-faint);
  font-weight: 400;
}

.category-pick b {
  font-weight: 600;
}

.category-pick small {
  font-size: var(--t-aux);
  font-weight: 400;
  color: var(--c-muted);
}

/* 컴퓨터 화면은 한 줄로 붙여 읽는다. */
.category-pick small::before {
  content: " · ";
}

/* 등록 시트 본문(UR-133 설계 §5.3). 읽어 낸 값은 칸이 아니라 글자로 보인다 — 누르면
   그 자리에 커서가 서니 고치는 것은 한 번 누르는 일이다. */
.entry-more {
  grid-column: 1 / -1;
}

.entry-more > summary {
  display: none;
}

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

@media (max-width: 760px) {
  .receipt-modal .modal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* '자세히' 안의 칸도 같은 줄 모양이다 — 빠져 있어 이름과 값이 두 줄로 갈라졌다. */
  .receipt-modal .modal-grid > label,
  .receipt-modal .modal-grid > .form-field,
  .receipt-modal .entry-more-grid > label,
  .receipt-modal .entry-more-grid > .form-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--tap-min);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--t-aux);
    font-weight: 400;
    color: var(--c-muted);
  }

  .receipt-modal .modal-grid input,
  .receipt-modal .modal-grid select,
  .receipt-modal .category-pick {
    flex: 1;
    min-width: 0;
    min-height: var(--tap-min);
    padding: 0;
    border: 0;
    background: none;
    text-align: right;
    font: inherit;
    font-size: var(--t-row);
    font-weight: 600;
    color: var(--c-ink);
  }

  .receipt-modal .modal-grid #entry-amount {
    font-variant-numeric: tabular-nums;
  }

  /* 항목은 네 단계라 한 줄에 다 적으면 화면 밖으로 나간다 — 마지막 이름 아래에 윗단계를 둔다. */
  .receipt-modal .category-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
  }

  .receipt-modal .category-pick b,
  .receipt-modal .category-pick small {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .receipt-modal .category-pick small::before {
    content: none;
  }

  .entry-more > summary {
    display: block;
    min-height: var(--tap-min);
    padding: var(--space-3) 0;
    font-size: var(--t-body);
    color: var(--c-action);
    cursor: pointer;
  }

  .entry-more-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* 다음 동작은 엄지 자리에 크게. 취소는 그 아래 글자로 남긴다. */
  .receipt-modal .modal-actions {
    flex-direction: column-reverse;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  /* 이 줄은 창 가장자리까지 번지려고 음수 여백을 쓴다. 그 값이 넓은 화면 기준(24px)이라
     폰의 좌우 여백(--space-4)과 어긋나 8px 씩 삐져나왔고, 창이 통째로 가로로 밀렸다
     (2026-09-17 아이폰 제보). 좌우만 폰 여백에 맞춘다 — 위아래는 그대로 둔다. */
  .receipt-modal .modal-actions-bar {
    margin-right: calc(var(--space-4) * -1);
    margin-left: calc(var(--space-4) * -1);
  }

  .receipt-modal .modal-actions-bar .modal-actions,
  .receipt-modal .modal-actions-bar .form-error {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .receipt-modal .modal-actions .button {
    width: 100%;
    min-height: var(--tap-min);
    justify-content: center;
  }

  .receipt-modal .modal-actions #cancel-modal {
    border: 0;
    background: none;
    color: var(--c-muted);
  }
}

/* 결재판(UR-133 설계 §5.5). 컴퓨터 화면에서는 왼쪽에 열두 달 현황, 오른쪽에 고른 달의 결재 카드를
   나란히 둔다(2026-09-08 사용자 요청 — "결재에서 월도 한번에 다 안보임"). 폰에서는 위아래로 쌓인다. */
.approval-board {
  max-width: none;
}

.approval-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-5);
  align-items: start;
}

.approval-months h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--t-aux);
  font-weight: 600;
  color: var(--c-muted);
}

.am-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-cell {
  display: grid;
  width: 100%;
  gap: 2px;
  min-height: 92px;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-ground);
  box-shadow: var(--shadow-card);
  font: inherit;
  text-align: left;
  color: var(--c-ink);
}

.am-cell:hover { border-color: var(--c-navy); }

.am-cell[aria-pressed="true"] {
  border-color: var(--c-navy);
  box-shadow: 0 0 0 2px var(--c-navy) inset;
}

.am-month {
  font-size: var(--t-aux);
  font-weight: 700;
  color: var(--c-muted);
}

.am-amount {
  font-size: var(--t-row);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.am-status {
  font-size: var(--t-aux);
  font-weight: 600;
}

.am-cell.is-empty { color: var(--c-faint); }
.am-cell.is-empty .am-amount { color: var(--c-faint); }
.am-cell.is-draft .am-status { color: var(--c-muted); }
.am-cell.is-submitted .am-status { color: var(--c-action); }
.am-cell.is-approved .am-status { color: var(--c-income); }
.am-cell.is-closed .am-status { color: var(--c-ink); }
.am-cell.is-closed { background: var(--c-sunken); }

.am-missing {
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.am-missing.is-missing { color: var(--c-seal); }

@media (max-width: 980px) {
  .approval-layout { grid-template-columns: minmax(0, 1fr); }
  .am-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ab-card {
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-ground);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.ab-when {
  margin: 0;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ab-lead {
  margin: var(--space-1) 0 0;
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.ab-lead.is-done {
  color: var(--c-income);
}

.ab-figures {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.ab-figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-line);
}

.ab-figures dt {
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ab-figures dd {
  margin: 0;
  font-size: var(--t-row);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.ab-figures dd em {
  font-style: normal;
  margin-left: var(--space-2);
  font-size: var(--t-aux);
  font-weight: 400;
  color: var(--c-muted);
}

.ab-figures dd.in {
  color: var(--c-income);
}

.ab-figures dd.is-missing {
  color: var(--c-seal);
}

.ab-figures dd.is-ok {
  color: var(--c-income);
}

.ab-chain {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.ab-chain li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--c-faint);
}

.ab-chain li.is-done {
  color: var(--c-ink);
}

.ab-chain li span {
  min-width: 52px;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ab-chain li b {
  font-size: var(--t-body);
  font-weight: 600;
}

.ab-chain li small {
  margin-left: auto;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

/* 올릴 수 없거나 차례가 아닌 이유 — 단추가 없는 까닭을 글로 알린다. */
.ab-note {
  margin: var(--space-3) 0 0;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ab-chain li.is-turn b {
  color: var(--c-ink);
}

.ab-chain li.is-turn small {
  font-weight: 700;
  color: var(--c-action);
}

/* 결재 진행 현황(UR-123). 카드 맨 위 상태 줄 옆에 단추를 두고, 마우스가 있는 화면에서는 올리기만 해도 결재자별 상태를
   짧게 보여 준다(9월 1일 기획). 상세는 단추가 여는 창에 있으므로 이 미리보기는 보조라 읽기 도구에서는 숨긴다. */
.ab-progress {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.ab-progress-button {
  min-height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-ground);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--t-aux);
  font-weight: 700;
  color: var(--c-navy);
}

.ab-progress-peek {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .ab-progress:hover .ab-progress-peek,
  .ab-progress-button:focus-visible + .ab-progress-peek {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: grid;
    gap: var(--space-2);
    min-width: 260px;
    margin: var(--space-1) 0 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-ground);
    box-shadow: 0 10px 28px rgb(19 26 42 / 12%);
    padding: var(--space-3);
    list-style: none;
  }
}

.ab-progress-peek li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--t-aux);
}

.ab-progress-peek span {
  min-width: 52px;
  color: var(--c-muted);
}

.ab-progress-peek b {
  font-weight: 600;
  color: var(--c-ink);
}

.ab-progress-peek em {
  margin-left: auto;
}

/* 결재 상태 다섯 가지(9월 1일 기획). 지금 차례인 '결재 대기'만 색으로 앞에 세운다. */
.ap-status {
  display: inline-block;
  border-radius: var(--r-pill);
  background: var(--c-sunken);
  padding: 2px var(--space-2);
  font-size: var(--t-aux);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-muted);
}

.ap-status.is-turn { background: var(--c-navy-soft); color: var(--c-action); }
.ap-status.is-approved { background: #e7f4ef; color: var(--c-income); }
.ap-status.is-returned { background: var(--c-seal-soft); color: var(--c-seal); }
.ap-status.is-void { color: var(--c-faint); text-decoration: line-through; }

.approval-progress {
  max-height: min(86dvh, 760px);
  overflow-y: auto;
}

.approval-progress-dialog {
  width: min(860px, calc(100vw - 32px));
}

.ap-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--t-row);
  color: var(--c-ink);
}

.ap-summary b {
  font-size: var(--t-title);
}

.ap-submitted,
.ap-empty {
  margin: 0;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ap-table-wrap {
  overflow-x: auto;
}

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

.ap-table th,
.ap-table td {
  border-bottom: 1px solid var(--c-line);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

.ap-table th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-muted);
}

.ap-table td {
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.ap-table tr.is-turn td {
  background: var(--c-navy-soft);
}

.ap-table tr.is-turn .ap-status.is-turn {
  background: var(--c-ground);
}

.ap-history h3 {
  margin: var(--space-2) 0;
  font-size: var(--t-row);
}

.ap-round h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--t-aux);
  color: var(--c-muted);
}

/* 폰에서는 여섯 칸 표가 옆으로 밀리므로 결재자마다 이름표 붙은 묶음으로 쌓는다. */
@media (max-width: 760px) {
  .approval-progress-dialog {
    width: 100%;
  }

  .ap-table thead {
    display: none;
  }

  .ap-table,
  .ap-table tbody,
  .ap-table tr,
  .ap-table td {
    display: block;
  }

  .ap-table tr {
    border-bottom: 1px solid var(--c-line);
    padding: var(--space-2) 0;
  }

  .ap-table td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-2);
    border: 0;
    padding: 2px var(--space-2);
  }

  .ap-table td::before {
    content: attr(data-label);
    color: var(--c-muted);
  }
}

.ab-stamp {
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--space-4);
  justify-content: center;
  border-color: var(--c-seal);
  background: var(--c-seal);
}

.ab-link {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--space-3);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-seal-soft);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-seal);
}

/* 증빙 예외는 빠진 것이 아니라 다른 서류로 갈음한 것이다 — 손봐야 할 빨강과 톤을 나눈다. */
.ab-link.is-exempt {
  background: #fff8e8;
  color: #9a6700;
}

/* 결재 카드의 증빙 줄에 붙는 '예외 N건' — 본 숫자를 가리지 않게 작게 옆에 둔다. */
.ab-figures dd em {
  margin-left: 6px;
  color: #9a6700;
  font-size: var(--t-aux);
  font-style: normal;
  font-weight: 600;
}

.ab-pending {
  margin-top: var(--space-5);
}

.ab-pending h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--t-aux);
  font-weight: 600;
  color: var(--c-muted);
}

.ab-pending ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-pending button {
  width: 100%;
  min-height: var(--tap-min);
  border: 0;
  border-top: 1px solid var(--c-line);
  background: none;
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-ink);
  text-align: left;
}

.ab-empty {
  color: var(--c-muted);
}

/* 도장은 사람이 누른 그 순간에만 움직인다(설계 §3). 0.42초, 한 번. */
.ab-chain li.is-stamped b {
  display: inline-block;
  animation: seal-press 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes seal-press {
  from {
    transform: scale(1.7);
    opacity: 0;
    color: var(--c-seal);
  }

  60% {
    transform: scale(0.96);
    opacity: 1;
    color: var(--c-seal);
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-chain li.is-stamped b {
    animation: none;
  }
}

/* 첫 진입 안내(UR-133). 한 번 뜨고 마는 창이라 시트로 만들지 않는다 — 뒤로가기가 걷을
   대상도 아니다. */
.intro-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  border: 0;
  border-radius: var(--r-card);
  padding: 0;
  background: var(--c-ground);
  box-shadow: 0 24px 60px rgb(19 26 42 / 22%);
}

.intro-dialog::backdrop {
  background: rgb(19 26 42 / 42%);
}

.intro {
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.intro h2 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--c-ink);
}

.intro > p {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--t-body);
  color: var(--c-muted);
}

.intro ul {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.intro li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--t-body);
  color: var(--c-muted);
}

.intro li b {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
}

.intro .button {
  width: 100%;
  min-height: var(--tap-min);
  justify-content: center;
}

/* 레일은 platform-shell.css 가 그린다(UR-163) — 회계·일정·플랫폼 관리가 같은 레일을 쓴다. */
.rail-foot .environment-badge {
  display: inline-block;
  margin-top: 8px;
}

/* 상단 한 줄 — 구역 · 기간 · 주 동작. 화면 이름은 그 아래 본문 머리로 내려온다. */
.workspace > .topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 24px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-ground);
}

.topbar .grow {
  flex: 1;
}

.topbar .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.view-head {
  margin-bottom: 16px;
}

.view-head .eyebrow {
  margin: 0;
}

.view-head h1 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.zone-switch {
  position: relative;
}

.zone-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-ground);
  font: inherit;
  color: var(--c-ink);
  cursor: pointer;
}

.zone-switcher strong {
  font-weight: 600;
}

.zone-switcher small {
  color: var(--c-muted);
}

.zone-menu {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 30;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-ground);
  box-shadow: 0 12px 32px rgb(19 26 42 / 14%);
  display: grid;
  gap: 2px;
}

.zone-menu[hidden] {
  display: none;
}

.zone-menu button,
.zone-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: var(--c-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.zone-menu button:hover,
.zone-menu a:hover {
  background: var(--c-sunken);
}

.zone-menu [aria-checked="true"] {
  color: var(--c-navy);
  font-weight: 600;
}

.zone-menu small {
  margin-left: auto;
  color: var(--c-muted);
  font-size: var(--t-micro);
}

.zone-menu hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 4px 0;
}

.period {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.period-arrow {
  min-width: 36px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 18px;
  color: var(--c-muted);
  cursor: pointer;
}

.period-arrow:hover:not(:disabled) {
  background: var(--c-sunken);
  color: var(--c-ink);
}

.period-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.period-label {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: var(--t-row);
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
}

.period-label:hover {
  background: var(--c-sunken);
}

.period-grid {
  position: absolute;
  top: 44px;
  left: 36px;
  z-index: 30;
  width: 320px;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-ground);
  box-shadow: 0 12px 32px rgb(19 26 42 / 14%);
  display: grid;
  gap: 10px;
}

.period-grid[hidden] {
  display: none;
}

.period-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.period-year select {
  min-height: 36px;
  font: inherit;
}

.period-quick {
  display: flex;
  gap: 6px;
}

.period-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.period-months .chip {
  justify-content: center;
}

.period-months .chip[aria-pressed="true"] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
  font-weight: 600;
}

.period-months .chip.is-closed {
  color: var(--c-faint);
}

@media (max-width: 760px) {
  .rail {
    display: none;
  }

  /* 머리줄은 화면 이름을 말하지 않는다 — 그것은 아래 탭이 이미 말한다. 대신 장부를 볼 때
     늘 알아야 하는 '어느 구역 · 언제' 를 든다(2026-09-18 시안). 내역은 길게 미는 화면이라
     서른 번째 줄에서도 달을 알 수 있게 붙여 둔다. */
  .workspace > .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    /* `.topbar { width: 100% }`(≤980px)가 폭을 본문 칸에 묶어, 음수 여백이 왼쪽으로만 펴지고
       오른쪽 16px 이 덮이지 않았다 — 그 틈으로 스크롤되는 본문이 비쳤다(2026-09-22 제보). */
    width: auto;
    /* 본문 위 여백(.workspace 의 padding-top)을 당겨 머리줄이 화면 꼭대기에서 시작한다. */
    margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-line);
    /* 스크롤한 본문이 머리줄 아래로 지나가는 것이 보이게 얕은 그림자를 둔다 — 선 하나로는
       글자가 머리줄에 닿는 순간 어디까지가 머리줄인지 읽히지 않았다. */
    box-shadow: 0 6px 16px rgb(19 26 42 / 8%);
    background: var(--c-ground);
  }

  .topbar > .zone-switch {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar > .grow {
    display: none;
  }

  .topbar > .period {
    order: 2;
    flex: 0 0 auto;
  }

  .topbar > .top-actions {
    order: 3;
  }

  .topbar-back,
  .zone-switcher {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 구역의 사업 유형까지 적을 자리는 없다 — 이름이 먼저다. */
  .zone-switcher #zone-switcher-type {
    display: none;
  }

  /* 영수증은 가운데 탭이 맡고, 기준 시각·이름은 폰에서 읽을 자리가 없다. */
  .topbar #open-receipt-modal,
  .topbar #top-meta {
    display: none;
  }

  .topbar > .top-actions {
    gap: var(--space-2);
  }

  .period-arrow {
    display: none;
  }

  .period-label {
    min-height: 36px;
    border: 1px solid #c8d2ea;
    border-radius: var(--r-pill);
    background: var(--c-ground);
    padding: 0 12px;
    font-size: var(--t-aux);
    font-weight: 800;
  }

  .view-head {
    margin-bottom: var(--space-3);
  }

  .view-head .eyebrow {
    display: none;
  }

  /* 머리줄이 구역·기간을 맡으면서 화면 이름이 갈 곳은 본문이다 — 제목답게 둔다(2026-09-18 시안). */
  .view-head h1 {
    font-size: var(--t-title);
    font-weight: 800;
    color: var(--c-ink);
  }
}

/* 요약 카드는 폰 전용이다(2026-09-17 시안 1) — 컴퓨터는 숫자 여섯과 상단 바가 같은 것을 말한다. */
.ph-summary {
  display: none;
}

/* 홈 — 컴퓨터 배치(시안 A × 느낌 ②). 숫자 넷 한 줄, 그 아래 '지금 처리할 것' 큐가 주인공, 결재·이번 주는 옆 칸.
   카드는 테두리 대신 얕은 그림자(--shadow-card). */
/* 지표는 한 장이 아니라 타일 여럿이다(2026-09-16 시안) — 칸 수가 예산 유무로 넷/여섯을 오가고,
   좁아지면 줄이 접힌다. auto-fit 이 아니라 세는 이유: 다섯 칸이 2+2+1 로 남는 모양을 막는다. */
.home-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 1200px) {
  .home-figs:has(.home-fig:nth-child(6)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.home-fig {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-ground);
  box-shadow: var(--shadow-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 다른 서류로 갈음한 건수(2026-09-16 결정). 붙여야 할 것과 한 줄에 이으면 글자가 넘쳐 쪼개진다. */
.home-fig .fig-exempt {
  color: #9a6700;
}

/* 타일이 된 뒤로는 바탕을 회색으로 바꾸면 카드가 눌린 것처럼 보인다 — 그림자만 한 단계 든다. */
.home-fig:hover {
  box-shadow: 0 1px 2px rgb(19 26 42 / 6%), 0 12px 28px rgb(19 26 42 / 10%);
}

.home-fig span {
  display: block;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.home-fig b {
  display: block;
  margin: 4px 0 2px;
  font-size: var(--t-figure);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  /* 금액은 '17,568,000 / 원' 으로 접히면 안 된다 — 칸이 좁아지면 글자를 줄이지 접지 않는다. */
  white-space: nowrap;
}

/* 여섯 칸이면 한 칸이 240px 안팎이라 억 단위가 들어가지 않는다 — 그 줄에서만 숫자를 한 단계 낮춘다. */
.home-figs:has(.home-fig:nth-child(6)) .home-fig b {
  font-size: var(--t-title);
}

.home-fig b.home-fig-text {
  font-size: var(--t-row);
}

.home-fig.in b {
  color: var(--c-income);
}

.home-fig.miss b {
  color: var(--c-seal);
}

.home-fig small {
  display: block;
  font-size: var(--t-micro);
  color: var(--c-muted);
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 16px;
  align-items: start;
}

/* 옆 칸이 셋째 열로 나갔으면(슬롯 비움) 본문은 한 열로 끝까지 쓴다. */
.home-grid .home-side-slot[hidden] {
  display: none;
}

.home-grid:has(.home-side-slot[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.home-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.home-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.home-queue,
.home-side .ph-sec,
.home-trend {
  border-radius: var(--r-card);
  background: var(--c-ground);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0;
}

/* 지금 처리할 것 — 모듈 표시 · 제목과 한 줄 설명 · 상태 칩. 한 줄이 곧 단추다. */
.hq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hq-list li + li {
  border-top: 1px solid var(--c-line);
}

/* 줄은 '본문 + 동작' 둘이다(2026-09-16 시안) — 단추 안에 단추를 넣을 수 없어 나란히 둔다.
   둘 다 같은 곳으로 가고, 동작 단추는 무엇을 하러 가는지 이름으로 말한다. */
.hq-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.hq-list .hq-open {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hq-list .hq-go {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  background: var(--c-ground);
  font: inherit;
  font-size: var(--t-aux);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  cursor: pointer;
}

.hq-list .hq-go:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
}

/* 내 차례인 줄만 단추가 채워진다 — 목록에서 눈이 먼저 가야 하는 한 줄이다. */
.hq-list .hq-go.turn {
  border-color: transparent;
  background: var(--c-seal);
  color: #fff;
}

.hq-list .hq-open:hover .hq-body b {
  color: var(--c-navy);
}

.hq-mod {
  font-size: var(--t-micro);
  color: var(--c-faint);
}

.hq-body {
  min-width: 0;
}

.hq-body b {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink);
}

.hq-body small {
  display: block;
  font-size: var(--t-aux);
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hq-status {
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: var(--t-micro);
  font-weight: 700;
  background: var(--c-sunken);
  color: var(--c-muted);
  white-space: nowrap;
}

.hq-status.turn { background: #e9edff; color: var(--c-action); }
.hq-status.bad { background: var(--c-seal-soft); color: var(--c-seal); }
.hq-status.amb { background: #fbf1dc; color: #b7791f; }
.hq-status.warn { background: #fff8e8; color: #9a6700; }

/* 홈 결재 카드의 실행 단추(2026-09-16 시안의 CTA) — 결재는 붉은 도장이므로 직인 색을 쓴다. */
.cta-stamp {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--space-3);
  border: 0;
  border-radius: var(--r-control);
  background: var(--c-seal);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.cta-stamp:hover {
  filter: brightness(1.06);
}

/* 구역 사람들 — 이니셜 원 · 이름/역할 · 상태. */
.hp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.hp-list li + li {
  border-top: 1px solid var(--c-line);
}

.hp-ava {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-navy-soft);
  color: var(--c-navy);
  font-size: var(--t-micro);
  font-weight: 700;
}

.hp-body b {
  display: block;
  font-size: var(--t-aux);
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-body small {
  display: block;
  font-size: var(--t-micro);
  color: var(--c-muted);
}

.ph-more {
  margin: 6px 0 0;
  font-size: var(--t-micro);
  color: var(--c-muted);
}

/* 다가오는 일정(앞으로 2주) — 날짜 · 구역 색 막대 · 제목 · D-day. */
.hw-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hw-list li {
  display: grid;
  grid-template-columns: 78px 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--t-aux);
}

.hw-list li:first-child {
  border-top: 0;
}

.hw-date {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.hw-bar {
  display: block;
  width: 5px;
  height: 22px;
  border-radius: 3px;
}

.hw-body {
  min-width: 0;
}

.hw-body b {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-body small {
  display: block;
  color: var(--c-muted);
}

.hw-dday {
  color: var(--c-muted);
  white-space: nowrap;
}

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

.ph-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ph-sec-head h3 {
  margin: 0;
  font-size: var(--t-row);
  font-weight: 600;
  color: var(--c-ink);
}

.ph-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-aux);
  color: var(--c-muted);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.ph-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ph-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line);
}

.ph-list li:first-child {
  border-top: 0;
}

.ph-date {
  font-size: var(--t-aux);
  color: var(--c-faint);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
}

.ph-body {
  flex: 1;
  min-width: 0;
}

.ph-body b {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink);
}

.ph-body small {
  display: block;
  font-size: var(--t-aux);
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15.5px;
  white-space: nowrap;
  color: var(--c-ink);
}

.ph-num.in {
  color: var(--c-income);
}

.ph-empty {
  padding: var(--space-4) 0;
  margin: 0;
}

.ph-empty b {
  display: block;
  font-size: var(--t-row);
  font-weight: 600;
  color: var(--c-ink);
}

.ph-empty span {
  color: var(--c-muted);
  font-size: var(--t-body);
}

.home-trend .bars {
  min-height: 150px;
}

@media (min-width: 761px) {
  /* 컴퓨터는 상단 기간 컨트롤과 숫자 넷이 이 역할을 한다. */
  .ph-hero,
  .ph-strip,
  .ph-todo {
    display: none;
  }
}

@media (max-width: 760px) {
  /* 위쪽이 회색 바탕 위 맨 글자라 '디자인이 없는' 인상을 줬다(2026-09-17) — 요약 카드 한 장이
     달 · 지출 · 수입 · 증빙 · 결재를 대신 말하고, 헤로·숫자·달 칩 줄은 물러난다. */
  .ph-hero,
  .home-figs,
  .ph-strip {
    display: none;
  }

  .ph-summary {
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-4);
    border-radius: var(--r-sheet);
    background: var(--c-ground);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
  }

  .phs-head {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .phs-month {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-control);
    background: none;
    font: inherit;
    font-size: var(--t-row);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    cursor: pointer;
  }

  .phs-month:hover {
    background: var(--c-sunken);
  }

  .phs-step {
    width: 34px;
    min-height: 34px;
    margin-left: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-ground);
    font: inherit;
    font-size: var(--t-row);
    color: var(--c-muted);
    cursor: pointer;
  }

  /* 화살표 둘은 오른쪽에 붙여 놓는다 — 달 이름이 왼쪽 첫 자리를 지킨다. */
  .phs-step[data-ph-step="-1"] {
    order: 2;
  }

  .phs-step[data-ph-step="1"] {
    order: 3;
    margin-left: 0;
  }

  .phs-step:disabled {
    opacity: 0.4;
  }

  /* 열두 달을 한 번에 편다 — ±2 칩만으로는 1월까지 네 번을 되짚어야 했다. */
  .phs-grid {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--c-line);
    padding-top: 12px;
  }

  .phs-grid[hidden] {
    display: none;
  }

  .phs-years,
  .phs-months {
    display: grid;
    gap: 6px;
  }

  .phs-months {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .phs-years {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }

  .phs-grid .chip {
    justify-content: center;
    min-height: 40px;
  }

  .phs-grid .chip[aria-pressed="true"] {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
    font-weight: 600;
  }

  .phs-grid .chip.is-closed {
    color: var(--c-faint);
  }

  .phs-big {
    margin: 2px 0 0;
    font-size: var(--t-figure);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .phs-cmp {
    margin: 0;
    font-size: var(--t-aux);
    color: var(--c-muted);
  }

  .phs-kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 0;
    border-top: 1px solid var(--c-line);
    padding-top: 11px;
  }

  .phs-kv div {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .phs-kv dt {
    font-size: var(--t-micro);
    color: var(--c-muted);
  }

  .phs-kv dd {
    margin: 0;
    font-size: var(--t-aux);
    font-weight: 700;
    color: var(--c-ink);
  }

  .phs-kv dd.in { color: var(--c-income); }
  .phs-kv dd.ok { color: var(--c-income); }
  .phs-kv dd.bad { color: var(--c-seal); }

  .home-fig {
    padding: var(--space-2) 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* 폰은 두 칸씩 놓는다 — '남은 예산'이 셋째로 홀로 남으면 옆이 빈다. 한 줄을 다 쓴다. */
  .home-fig[data-home-fig="budget-left"] {
    grid-column: 1 / -1;
  }

  .home-fig b,
  .home-figs:has(.home-fig:nth-child(6)) .home-fig b {
    font-size: var(--t-title);
  }

  .home-queue,
  .home-side .ph-sec,
  .home-trend {
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .home-grid,
  .home-main,
  .home-side {
    gap: 0;
  }

  /* 폰은 결재 탭과 연간 표가 따로 있고, 증빙 없음은 바로 아래 할 일 배너가 말한다.
     예산 두 칸 중에는 '남은 예산'만 남긴다 — 지금 쓸 수 있는 돈이 폰에서 볼 값이다. */
  .home-approval,
  .home-trend,
  .home-fig[data-home-fig="missing"],
  .home-fig[data-home-fig="approval"],
  .home-fig[data-home-fig="budget-spent"] {
    display: none;
  }
}

/* 내역 필터 한 줄(데스크탑 개편 §5.2). 컴퓨터는 줄바꿈, 폰은 옆으로 민다. */
.entry-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* 지출내역의 필터 상자도 세부내역의 필터 줄과 같은 간격으로 표와 떨어진다 — 두 화면을 오가는
   사람에게 표가 붙었다 떨어졌다 하면 다른 화면처럼 보인다(2026-09-18 담당자 피드백). */
.filter-panel {
  margin-bottom: 14px;
}

/* 고른 칩은 채운다(2026-09-16 시안의 .chip.on) — 달 고르기 칩과 같은 모양이라야 한 화면에서 헷갈리지 않는다. */
.entry-filters .chip[aria-pressed="true"] {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
  font-weight: 600;
}

.entry-filters .chip[aria-pressed="true"] .chip-count {
  color: rgb(255 255 255 / 75%);
}

.chip-count {
  margin-left: 4px;
  color: var(--c-muted);
  font-weight: 400;
}

.chip-more {
  border-style: dashed;
}

.entry-sum {
  margin-left: auto;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.entry-sum b {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.entry-sum b.in {
  color: var(--c-income);
}

/* 등록 창의 '자세히'(details.entry-more)도 같은 이름이다 — 필터 안으로 좁히지 않으면 그 창의 칸이 왼쪽 절반으로 줄었다. */
.entry-filters .entry-more {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--c-line);
}

.entry-filters .entry-more[hidden] {
  display: none;
}

.entry-filters .entry-more .filter-label {
  margin: 0 4px 0 8px;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.entry-filters .entry-more .filter-label:first-child {
  margin-left: 0;
}

@media (max-width: 760px) {
  .entry-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: var(--space-3);
  }

  .entry-filters .chip {
    flex: 0 0 auto;
  }

  .entry-sum {
    display: none;
  }

  .entry-filters .entry-more {
    flex-wrap: wrap;
  }
}

/* 결재판의 보조 동작 — 미리보기·마감. 도장 아래에 작게. */
.ab-tools {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
}

.ab-tools:empty {
  display: none;
}

.ab-tools .button {
  flex: 1;
  justify-content: center;
}

/* 월 화면의 숫자 카드 다섯 장은 컴퓨터에서 걷는다 — 홈이 숫자를, 필터 한 줄이 합계를 말한다.
   폰은 계획 B 대로 고른 항목 합계 하나만 남긴다. */
@media (min-width: 761px) {
  #view-jan-detail .monthly-overview,
  #view-jan-summary .monthly-overview {
    display: none;
  }
}

/* 시트(UR-133 설계 §5.3). 폰에서 대화상자는 가운데 뜨는 상자가 아니라 바닥에서 올라오는
   겹이다 — 엄지가 닿는 자리에서 시작한다. 같은 <dialog> 를 그대로 쓴다: 포커스 가두기·Esc·
   바깥 어둡게는 브라우저가 이미 하고, 안쪽 id 를 보는 스모크도 그대로 산다. */
@media (max-width: 760px) {
  .receipt-dialog,
  .approval-dialog,
  .picker-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  }

  .receipt-dialog[open],
  .approval-dialog[open],
  .picker-dialog[open] {
    animation: sheet-rise var(--motion-sheet);
  }

  @keyframes sheet-rise {
    from {
      transform: translateY(14%);
      opacity: 0.5;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  .receipt-modal,
  .approval-modal,
  .picker {
    max-height: 92dvh;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* 손잡이. 이 겹이 아래로 내려가는 물건이라는 것을 한 눈에 말한다. */
  .receipt-modal::before,
  .approval-modal::before,
  .picker::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: var(--r-pill);
    background: var(--c-line);
  }
}

/* 내역 화면의 셋째 열(UR-163) — 고른 지출 서랍과 이달 요약. */
.ledger-side {
  display: grid;
  gap: 16px;
}

.ledger-side .ph-sec {
  border-radius: var(--r-card);
  background: var(--c-ground);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.ld-when {
  margin: 0;
  font-size: var(--t-aux);
  color: var(--c-muted);
}

.ld-title {
  margin: 4px 0 10px;
  font-size: var(--t-row);
  font-weight: 700;
  color: var(--c-ink);
}

.ld-kv {
  margin: 0;
  display: grid;
}

.ld-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--t-aux);
}

.ld-kv > div:first-child {
  border-top: 0;
}

.ld-kv dt {
  color: var(--c-muted);
}

.ld-kv dd {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ld-kv dd.in {
  color: var(--c-income);
}

.ld-kv dd small {
  font-weight: 400;
  color: var(--c-muted);
}

.ld-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.ld-actions .button {
  justify-content: center;
}

.hq-status.ok {
  background: #e4f2ec;
  color: var(--c-income);
}

#detail-table tr.is-selected td {
  background: var(--c-navy-soft);
}

/* 셋째 열이 없는 컴퓨터 폭(1024–1679)의 서랍 — 표를 밀지 않고 오른쪽에서 미끄러져 덮는다. Esc·바깥 누르기로 닫는다. */
.ledger-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgb(19 26 42 / 22%);
}

.ledger-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(380px, 90vw);
  padding: 16px;
  overflow: auto;
  background: var(--c-sunken);
  box-shadow: -16px 0 40px rgb(19 26 42 / 18%);
  animation: ledger-slide var(--motion-sheet);
}

@keyframes ledger-slide {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-overlay { animation: none; }
}