/* 모먼트랩스 회계 플랫폼 — 디자인 시스템
   순서: 1) 토큰  2) 기본  3) 레이아웃  4) 컴포넌트  5) 반응형 */

/* ── 1) 토큰 ───────────────────────────────────────────────── */
:root {
  /* 브랜드 색 */
  --bg: #f4f7fb;
  --panel: #ffffff;
  --soft: #f0f4f9;
  --ink: #101828;
  --muted: #667085;
  --line: #dce4ef;
  --navy: #061a3a;
  --navy2: #0b2447;
  --blue: #2558d8;
  --green: #067647;

  /* 상태 필 (배경 / 글자) */
  --pill-done-bg: #e7f4ee;      --pill-done-fg: #067647;
  --pill-wait-bg: #fdf1e3;      --pill-wait-fg: #b45309;
  --pill-partial-bg: #e9effc;   --pill-partial-fg: #2558d8;
  --pill-neutral-bg: #f0f4f9;   --pill-neutral-fg: #475467;
  --pill-confirm-bg: #f2edfd;   --pill-confirm-fg: #6941c6;
  --pill-overdue-bg: #fdebeb;   --pill-overdue-fg: #b42318;

  /* 모양 */
  --r-card: 14px;
  --r-panel: 16px;
  --r-tile: 10px;
  --r-btn: 8px;
  --r-pill: 999px;

  /* 치수 */
  --sidebar-w: 232px;
  --tabbar-h: 64px;
  --control-h: 40px;

  /* 글자 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 그림자 */
  --shadow-navy: 0 22px 54px rgba(6, 26, 58, 0.10);
  --shadow-float: 0 18px 44px rgba(6, 26, 58, 0.18);
}

/* ── 2) 기본 ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy2); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

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

.icon { flex-shrink: 0; }

/* ── 3) 레이아웃 ───────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
.brand__mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--navy);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; letter-spacing: 0.4px;
}
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__name { font-size: 15px; font-weight: 800; color: var(--ink); }
.brand__sub { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; }

/* 역할을 알기 전(=/api/me 응답 전)에는 어느 쪽 메뉴도 보여 주지 않는다 —
   직원 화면에 대표 메뉴가 한 번 스쳤다 사라지지 않게. app.mjs 가 body[data-role] 을 채운다. */
body:not([data-role]) [data-owner-only],
body:not([data-role]) [data-staff-only] { display: none !important; }

.nav-item {
  height: 40px;
  border-radius: var(--r-btn);
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  color: #475467;
}
.nav-item:hover { background: var(--soft); color: var(--navy2); }
.nav-item--active,
.nav-item--active:hover { background: var(--navy); color: #ffffff; font-weight: 800; }
.nav-item--disabled,
.nav-item--disabled:hover { color: #98a2b3; background: transparent; cursor: default; }

.sidebar__foot {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar__logout { width: 100%; }

.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip__avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.user-chip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-chip__name { font-size: 13px; font-weight: 800; color: var(--ink); }
.user-chip__role { font-size: 11px; color: var(--muted); }

.main {
  flex: 1;
  min-width: 0;
  padding: 28px 36px;
  display: flex; flex-direction: column; gap: 16px;
}

.page__head { display: flex; flex-direction: column; gap: 4px; }
.page__title { font-size: 22px; font-weight: 850; color: var(--navy); line-height: 1.3; }
.page__sub { font-size: 13px; color: var(--muted); }

/* ── 4) 컴포넌트 ───────────────────────────────────────────── */

/* 카드 */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.card__title { font-size: 16px; font-weight: 800; color: var(--ink); }

/* 숫자 요약 타일 */
.kpi {
  min-height: 110px;
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.kpi__label { font-size: 12px; font-weight: 800; color: var(--muted); }
.kpi__value { font-size: 26px; font-weight: 900; color: var(--ink); }
.kpi__note { font-size: 10.5px; color: var(--muted); }
.kpi--navy { background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-navy); }
.kpi--navy .kpi__label { color: rgba(255, 255, 255, 0.72); }
.kpi--navy .kpi__value { color: #ffffff; }
.kpi--navy .kpi__note { color: rgba(255, 255, 255, 0.6); }

/* 표 */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 900; color: var(--muted); letter-spacing: 0.3px;
  white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafcff; }
.table .num { text-align: right; font-weight: 800; }

/* 상태 필 */
.pill {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11.5px; font-weight: 900;
  white-space: nowrap;
}
.pill--done { background: var(--pill-done-bg); color: var(--pill-done-fg); }
.pill--wait { background: var(--pill-wait-bg); color: var(--pill-wait-fg); }
.pill--partial { background: var(--pill-partial-bg); color: var(--pill-partial-fg); }
.pill--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }
.pill--confirm { background: var(--pill-confirm-bg); color: var(--pill-confirm-fg); }
.pill--overdue { background: var(--pill-overdue-bg); color: var(--pill-overdue-fg); }

/* 버튼 */
.btn {
  min-height: var(--control-h);
  padding: 0 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--navy);
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.btn:hover { background: var(--soft); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.btn--primary:hover { background: var(--navy2); border-color: var(--navy2); }
.btn--ghost { background: var(--panel); border-color: var(--line); color: var(--navy); }
/* 작은 버튼도 높이는 일반 버튼과 같게 둔다(손가락이 닿는 최소 크기). 좌우 여백과 글자만 줄여 좁아 보이게 한다. */
.btn--sm { min-height: var(--control-h); padding: 0 12px; font-size: 12.5px; }

/* 입력 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; font-weight: 800; color: var(--muted); }
.input, .select {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
}
.input::placeholder { color: var(--muted); font-weight: 400; }
.input:focus, .select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(37, 88, 216, 0.12); }
.select { appearance: none; padding-right: 32px; font-weight: 700; cursor: pointer; }

/* 필터 줄 + 칩 */
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #475467;
  white-space: nowrap;
}

/* 빈 상태 */
.empty { padding: 20px 0; color: var(--muted); font-size: 13.5px; }

/* 모달 */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 26, 58, 0.32);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal__panel {
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--panel);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__title { font-size: 16px; font-weight: 800; color: var(--ink); }
.modal__close {
  width: var(--control-h); height: var(--control-h); flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal__close:hover { background: var(--soft); color: var(--ink); }
.modal__body { display: flex; flex-direction: column; gap: 12px; }
.modal__message { font-size: 14px; color: var(--ink); }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 토스트 */
.toast-host {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  border-radius: var(--r-tile);
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 800;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  max-width: min(420px, calc(100vw - 32px));
}
.toast--done { background: var(--pill-done-bg); color: var(--pill-done-fg); border-color: var(--pill-done-bg); }
.toast--wait { background: var(--pill-wait-bg); color: var(--pill-wait-fg); border-color: var(--pill-wait-bg); }
.toast--overdue { background: var(--pill-overdue-bg); color: var(--pill-overdue-fg); border-color: var(--pill-overdue-bg); }

/* 모바일 탭바 (기본은 감춰 두고 좁은 화면에서만 보인다) */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.tabbar__item {
  flex: 1;
  min-height: 44px;
  border: 0;
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted);
  cursor: pointer;
}
.tabbar__label { font-size: 11px; font-weight: 800; }
.tabbar__item--active { color: var(--navy); }

/* 더보기 시트 */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 26, 58, 0.32);
  display: flex; align-items: flex-end;
}
.sheet__panel {
  width: 100%;
  background: var(--panel);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-float);
}
.sheet__item {
  min-height: 44px;
  border-radius: var(--r-btn);
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: #475467;
}
.sheet__item .chip { margin-left: auto; }
.sheet__item--disabled { color: #98a2b3; cursor: default; }
.sheet__logout { margin-top: 4px; }

/* 장부 — 머리줄 · 빠른 등록 · 필터 · 표 · 합계 바 */
.page__head--row { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.page__head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.quickadd { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; }
.quickadd__date { width: 150px; }
.quickadd__vendor { flex: 1 1 180px; min-width: 0; }
.quickadd__amount { width: 170px; }
.quickadd__hint { font-size: 11.5px; color: var(--muted); }
/* 계산 결과는 등록 줄 아래에 따로 한 줄로 선다 — 숫자가 길어져도 위 칸들이 밀리지 않게 */
.quickadd__hint--row { flex: 1 1 100%; }
.quickadd__hint--live { color: var(--ink); font-weight: 800; } /* 안내 문구가 아니라 지금 값일 때 */
.input.num { text-align: right; } /* 금액 칸은 오른쪽 맞춤 */

/* 매출/매입 세그먼트 */
.seg { display: inline-flex; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; }
.seg__btn {
  min-height: var(--control-h);
  padding: 0 16px;
  border: 0; background: transparent;
  color: #475467; font-size: 13.5px; font-weight: 800;
  cursor: pointer;
}
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn[aria-pressed="true"] { background: var(--navy); color: #ffffff; }

/* 금액 표시 기준(부가세 포함 · 미포함) 스위치 — 필터 줄과 홈 KPI 위에 선다 */
.seg--sm .seg__btn { padding: 0 12px; font-size: 12.5px; }
.filters__end { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.kpi-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.kpi-head__label { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.summary__basis { color: var(--muted); font-weight: 700; }

/* 누를 수 있는 칩은 손가락이 닿는 크기로 (모바일 44px) */
.chip--btn { min-height: 40px; cursor: pointer; }
.chip--btn:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 88, 216, 0.12); }
.filter__label { color: var(--muted); font-weight: 800; }
.filter__select, .filter__input {
  appearance: none;
  min-height: 38px;
  padding: 0;
  border: 0; background: transparent;
  color: var(--navy); font-family: var(--font); font-size: 12.5px; font-weight: 800;
  cursor: pointer;
}
.filter__select:focus, .filter__input:focus { outline: none; }
.filter__input { width: 190px; cursor: text; font-weight: 700; }
.filter__input::placeholder { color: var(--muted); font-weight: 600; }
.filter--search { margin-left: auto; }

.card--table { padding: 0; gap: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.table tbody tr.row--click { cursor: pointer; }
/* 금액·날짜·버튼은 줄바꿈하지 않는다. 좁아지면 표 전체가 가로로 밀린다. */
.table--ledger td, .table--ledger th { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.table--ledger td[data-label="비고"] { white-space: normal; min-width: 140px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.row-related { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; }

.summary {
  padding: 14px 18px;
  background: var(--soft);
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; color: var(--ink);
}
.summary__profit--up { color: var(--green); }
.summary__profit--down { color: var(--pill-overdue-fg); }
.summary__unknown { color: var(--muted); font-weight: 700; } /* 못 불러왔을 때 — 지난 숫자를 남기지 않는다 */

/* 거래 · 입금 모달 안쪽 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .field--wide { grid-column: 1 / -1; }
.field__error { color: var(--pill-overdue-fg); font-size: 12px; font-weight: 800; }
.field__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field__row .input { flex: 1 1 120px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--toggle { min-height: 40px; cursor: pointer; }
.chip--toggle[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.toggle-row { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; font-weight: 700; cursor: pointer; }

.pay-body { display: flex; flex-direction: column; gap: 14px; }
.pay-list { display: flex; flex-direction: column; gap: 8px; }
.pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-tile); padding: 8px 10px; }
.pay-row__amount { font-weight: 900; }
.pay-row__meta { color: var(--muted); font-size: 12px; font-weight: 700; }
.pay-row__spacer { flex: 1 1 auto; }
.tx-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  background: var(--soft); border-radius: var(--r-tile); padding: 10px 12px;
  font-size: 13px; font-weight: 800;
}
.tx-head__muted { color: var(--muted); font-weight: 700; }

/* 홈 — 숫자 타일 줄 · 못 받은 돈 · 확인 대기 · 할 일 */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi__stack { display: flex; flex-direction: column; gap: 3px; }
.kpi__value--positive { color: var(--green); }
.kpi__value--negative { color: var(--pill-overdue-fg); }

.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.home-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-card__total { font-size: 15px; font-weight: 900; color: var(--navy); white-space: nowrap; }

.home-list { display: flex; flex-direction: column; }
.home-row { min-height: 56px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-row + .home-row { border-top: 1px solid var(--soft); }
.home-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-row__name { font-size: 14px; font-weight: 800; color: var(--ink); }
.home-row__sub { font-size: 12px; color: var(--muted); }
.home-row__side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.home-row__amount { font-size: 15px; font-weight: 900; color: var(--ink); white-space: nowrap; }

/* 들어올 돈 — 카드 안쪽이 통째로 장부로 가는 링크다 */
.home-cash { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.home-cash:hover { color: var(--ink); }
.home-cash:hover .home-cash__value { color: var(--blue); }
.home-cash__label { font-size: 12px; font-weight: 800; color: var(--muted); }
.home-cash__value { font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1.2; }
.home-cash__bar { height: 8px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; margin-top: 4px; }
.home-cash__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--navy); }
.home-cash__ratio { font-size: 12px; color: var(--muted); }
.home-cash__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* 미수금이 여덟 줄을 넘을 때 나머지를 장부에서 보게 하는 줄 */
.home-more { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--blue); }
.home-more .icon { transform: rotate(-90deg); }

.home-todo { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.home-todo + .home-todo { border-top: 1px solid var(--soft); }
.home-todo:hover { color: var(--navy2); }
.home-todo__text { font-size: 13.5px; font-weight: 700; }
.home-todo__go { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--blue); font-size: 12.5px; font-weight: 800; }
.home-todo__go .icon { transform: rotate(-90deg); } /* 아래 꺾쇠를 오른쪽으로 눕혀 '이동' 표시로 쓴다 */

.home-retry { display: flex; } /* 실패 카드의 '다시 시도' 가 카드 폭만큼 늘어나지 않게 */

/* 부가세 납부 기록 — 타일 줄 아래 '납부 기록' 버튼과 그 버튼이 여는 모달 */
.vat-bar { display: flex; justify-content: flex-end; margin-top: -4px; }

.vat { display: flex; flex-direction: column; gap: 12px; }
.vat__hint { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.vat__form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.vat__field { flex: 1 1 120px; min-width: 0; }
.vat__field--period { flex: 2 1 180px; }
.vat__field--memo { flex: 2 1 160px; }
/* 칸 넷이 한 줄을 채우면 버튼은 아랫줄로 내려간다 — 그때 오른쪽 끝에 서게 둔다(모달 아래 버튼들과 같은 자리) */
.vat__form-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 표가 다섯 칸이라 이 모달만 조금 넓힌다. :has 를 못 읽는 브라우저에서는
   기본 폭 그대로 두고 .table-scroll 이 가로로 밀어 준다 — 어느 쪽이든 칸이 뭉개지지는 않는다. */
.modal__panel:has(.vat) { width: min(680px, 100%); }
.vat__table { min-width: 440px; }
.vat__table th, .vat__table td { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
/* 기간과 메모만 줄바꿈을 허용한다 — 날짜·금액·버튼이 두 줄로 쪼개지면 표가 읽히지 않는다 */
.vat__table td[data-label="기간"], .vat__memo { white-space: normal; }
.vat__memo { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.vat__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; color: var(--navy);
}
.vat__last { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* 모바일에서는 폼이 한 줄에 하나씩 서고 버튼이 폭을 채운다(표는 아래 5) 규칙이 한 줄=한 카드로 바꾼다) */
@media (max-width: 768px) {
  .vat__field, .vat__field--period, .vat__field--memo { flex: 1 1 100%; }
  .vat__form-actions { width: 100%; }
  .vat__form-actions .btn { flex: 1 1 auto; }
  /* 표가 카드가 되면 가로로 밀 일이 없다 — 최소 폭을 풀지 않으면 좁은 화면에서 가로 스크롤이 생긴다 */
  .vat__table { min-width: 0; }
  .vat__table th, .vat__table td { white-space: normal; }
  .vat__table .row-actions { justify-content: flex-start; width: 100%; }
  .vat__table .row-actions .btn { flex: 1 1 auto; }
}

/* 로그인 화면 */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login__card {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-navy);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.brand--login { padding: 0 0 4px; }
.login__title { font-size: 20px; font-weight: 850; color: var(--navy); }
.login__sub { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.login__error {
  border-radius: var(--r-tile);
  padding: 10px 12px;
  background: var(--pill-overdue-bg);
  color: var(--pill-overdue-fg);
  font-size: 13px; font-weight: 800;
}
.login__submit { width: 100%; margin-top: 4px; }

/* ── 5) 반응형 (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .tabbar { display: flex; align-items: center; }

  .main {
    padding: 16px 16px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
    gap: 14px;
  }

  /* 모바일에서는 누르는 것 전부 44px 이상 */
  .btn, .btn--sm { min-height: 44px; }
  .modal__close { width: 44px; height: 44px; }
  .input, .select { min-height: 44px; }

  .page__title { font-size: 20px; }
  .card { padding: 16px; border-radius: var(--r-card); }
  .kpi { min-height: 92px; padding: 14px 16px; }
  .kpi__value { font-size: 22px; }

  /* 홈: 타일도 카드도 한 줄에 하나. 금액·상태·버튼은 이름 아래로 내려온다. */
  .kpi-grid, .home-grid { grid-template-columns: 1fr; }
  .home-row { flex-wrap: wrap; align-items: flex-start; }
  .home-row__side { width: 100%; justify-content: flex-start; }

  .toast-host { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }

  /* 표는 한 행이 한 장의 카드가 된다. 각 칸의 data-label 이 왼쪽 라벨로 붙는다. */
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .table tbody tr:hover { background: var(--panel); }
  .table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 5px 0;
    border-bottom: 0;
    text-align: left;
  }
  .table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 12px; font-weight: 800; color: var(--muted);
  }
  .table td:empty { display: none; }
  .table .num { text-align: right; }

  /* 장부: 표가 카드가 되면 바깥 카드는 테두리를 벗는다 */
  .card--table { border: 0; background: transparent; }
  .table--ledger td, .table--ledger th { white-space: normal; }
  .row-actions { flex-wrap: wrap; }
  .summary { border: 1px solid var(--line); border-radius: var(--r-tile); }

  .chip--btn, .chip--toggle, .seg__btn { min-height: 44px; }
  .filter--search { margin-left: 0; flex: 1 1 100%; }
  .filter__input { width: 100%; }
  .quickadd__date, .quickadd__amount { flex: 1 1 140px; width: auto; }
  .quickadd__submit { flex: 1 1 100%; }
  .quickadd__hint { flex: 1 1 100%; }
  .form-grid { grid-template-columns: 1fr; }
}

/* 아주 좁은 화면(360px)에서도 가로 스크롤이 생기지 않게 여백을 줄인다. */
@media (max-width: 380px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .login { padding: 16px; }
  .login__card { padding: 24px 18px; }
}

/* ── 6) 거래처 화면 ────────────────────────────────────────── */

.vendors__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vendors__head-text { display: flex; flex-direction: column; gap: 4px; }
.vendors__head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 연도처럼 짧은 선택은 알약 모양 칩으로 */
.select--chip { width: auto; border-radius: var(--r-pill); padding: 0 28px 0 14px; font-size: 13px; }

.vendors__layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.vendors__list { padding: 0; gap: 0; overflow: hidden; }
.vendors__detail { gap: 14px; box-shadow: var(--shadow-navy); }

.vendors__toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vendors__search { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.vendors__search .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.vendors__search-input { padding-left: 36px; }
.vendors__sort-mobile { display: none; width: auto; max-width: 46%; }

/* 금액 열이 두 줄로 접히지 않게 붙잡고, 그래도 좁으면 표만 옆으로 밀린다 */
.vendors__list-body { min-width: 0; overflow-x: auto; }
.vendors__table { min-width: 580px; }
.vendors__table th, .vendors__table td { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.vendors__table th { padding-top: 10px; padding-bottom: 10px; }
.vendors__table th:first-child, .vendors__table td:first-child { padding-left: 16px; }
.vendors__table th:last-child, .vendors__table td:last-child { padding-right: 16px; }
.vendors__table .vendors__name-cell { white-space: normal; } /* 긴 이름만 접히고 금액은 그대로 */
.vendors__table td.num { font-size: 12.5px; } /* 금액 다섯 열이 이름 자리를 뺏지 않게 */
.vendors__sort-btn {
  min-height: 28px;
  border: 0; padding: 0;
  background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 900; letter-spacing: 0.3px;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.vendors__sort-btn:hover { color: var(--navy2); }
.vendors__sort-btn--active { color: var(--navy); }
.vendors__sort-arrow { transition: none; }
.vendors__sort-arrow--asc { transform: rotate(180deg); }

.vendors__row { cursor: pointer; }
.vendors__row--active, .vendors__row--active:hover { background: var(--soft); box-shadow: inset 3px 0 0 0 var(--navy); }
.vendors__name-cell { min-width: 0; }
.vendors__name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.vendors__name:hover { color: var(--blue); }
.vendors__internal { margin-left: 6px; }
.vendors__rate--good { color: var(--green); }
.vendors__minus { color: var(--pill-overdue-fg); }

.vendors__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 16px 20px; }
.vendors__empty .empty { padding-bottom: 0; }
.vendors__empty-note { font-size: 12.5px; color: var(--muted); }

/* 상세 패널 */
.vendors__detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vendors__detail-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.vendors__detail-name { font-size: 18px; font-weight: 900; color: var(--navy); }
.vendors__back { display: none; }
.vendors__back-icon { transform: rotate(90deg); }
/* 상세를 못 그린 자리(불러오는 중·없는 거래처·오류)에도 돌아가기 버튼을 남긴다 */
.vendors__detail-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vendors__detail-fallback .vendors__empty { padding-left: 0; padding-right: 0; }
.vendors__rule { height: 1px; background: var(--soft); }

/* 사업자등록증 첨부 — 정보 줄 바로 아래 */
.vendors__docs { display: flex; flex-direction: column; gap: 8px; }
.vendors__docs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vendors__docs-list { display: flex; flex-direction: column; gap: 6px; }
.vendors__docs-empty { font-size: 12.5px; color: var(--muted); }
.vendors__docs-note { font-size: 11.5px; color: var(--muted); }
.vendors__docs-file { display: none; }
.vendors__doc {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 6px 8px 6px 12px;
}
.vendors__doc-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

/* 이 화면에는 스위치가 없으니 지금 어느 기준으로 보고 있는지 한 줄로 적어 둔다 */
.vendors__basis { font-size: 11.5px; color: var(--muted); padding: 10px 16px 0; }
.vendors__detail-body .vendors__basis { padding: 0; }

.vendors__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vendors__info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vendors__info-item--wide { grid-column: 1 / -1; }
.vendors__info-label { font-size: 11.5px; color: var(--muted); }
.vendors__info-value { font-size: 13px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

.vendors__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vendors__kpi { background: var(--soft); border-radius: var(--r-tile); padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vendors__kpi-label { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.vendors__kpi-value { font-size: 15px; font-weight: 900; color: var(--ink); }
.vendors__kpi-value--good { color: var(--green); }

.vendors__recent { display: flex; flex-direction: column; gap: 6px; }
.vendors__sub-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.vendors__timeline { display: flex; flex-direction: column; }
.vendors__tl-row {
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--soft);
}
.vendors__tl-row:first-child { border-top: 0; }
.vendors__tl-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.vendors__tl-head { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vendors__tl-note { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vendors__tl-amount { font-size: 13px; font-weight: 900; color: var(--ink); white-space: nowrap; }

/* 거래처 추가·수정 모달 */
.vendors__form { display: flex; flex-direction: column; gap: 12px; }
.vendors__form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vendors__form-error {
  border-radius: var(--r-tile);
  padding: 10px 12px;
  background: var(--pill-overdue-bg); color: var(--pill-overdue-fg);
  font-size: 12.5px; font-weight: 800;
}
.field__error { font-size: 12px; font-weight: 700; color: var(--pill-overdue-fg); }
.vendors__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vendors__cat { min-height: 40px; cursor: pointer; }
.vendors__cat:hover { background: var(--soft); }
.vendors__cat--on, .vendors__cat--on:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.vendors__check { min-height: 40px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.vendors__check-box { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; }
.vendors__memo { padding: 8px 12px; min-height: 64px; resize: vertical; line-height: 1.4; }

/* ── 7) 내 요청 (직원 화면) ────────────────────────────────── */

/* 목록은 카드 한 장 안에 요청 한 건씩. 합계 줄도 통계도 없다. */
.requests__list { padding: 0; gap: 0; }
.request { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.request + .request { border-top: 1px solid var(--line); }
.request__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.request__vendor { font-size: 15px; font-weight: 800; color: var(--ink); }
.request__amount { margin-left: auto; font-size: 15px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.request__meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.request__meta span + span::before { content: '·'; margin-right: 10px; color: var(--line); }
.request__note { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.request__memo {
  border-radius: var(--r-tile);
  padding: 10px 12px;
  background: var(--pill-overdue-bg); color: var(--pill-overdue-fg);
  font-size: 12.5px; font-weight: 700;
  overflow-wrap: anywhere;
}
.request__actions { display: flex; align-items: center; gap: 8px; }

/* 요청 작성·수정 모달 — 한 줄에 한 칸(모바일에서 그대로 쓰인다) */
.request-form { display: flex; flex-direction: column; gap: 12px; }
.request-form__hint { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.request-form__note { min-height: 84px; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.seg--wrap { flex-wrap: wrap; }

/* ── 8) 고정지출 (장부 안쪽 모달) ──────────────────────────── */

.recurring { display: flex; flex-direction: column; gap: 12px; }
.recurring__hint { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.recurring__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recurring__stamp { font-size: 12.5px; font-weight: 800; color: var(--muted); }

.recurring__list { display: flex; flex-direction: column; }
.recurring__row { min-height: 56px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.recurring__row + .recurring__row { border-top: 1px solid var(--soft); }
.recurring__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recurring__name { font-size: 14px; font-weight: 800; color: var(--ink); }
.recurring__sub { font-size: 12px; color: var(--muted); }
.recurring__side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.recurring__amount { font-size: 15px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.recurring__foot { display: flex; }
.recurring__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 대표 장부 쪽 — 거래처 이름 옆 '요청' 표시와 거래 수정 모달의 읽기 전용 요청 블록 */
.row-request { margin-left: 6px; }
.tx-request {
  background: var(--soft);
  border-radius: var(--r-tile);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.tx-request__head { font-size: 13px; font-weight: 800; color: var(--ink); }
.tx-request__note { font-size: 12.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
/* 거래처 상세의 최근 거래 — 요청으로 올라온 건에 붙는 요청자 이름 */
.vendors__tl-who { font-size: 11.5px; font-weight: 800; color: var(--pill-partial-fg); white-space: nowrap; }

/* ── 8) 입금 관리 (은행 대사) ──────────────────────────────── */

.deposits__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deposits__note { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* 파일 올리는 자리 */
.deposits__drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-panel);
  background: var(--soft);
  padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.deposits__drop--over { border-color: var(--blue); background: var(--pill-partial-bg); }
.deposits__drop-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.deposits__drop-sub { font-size: 12.5px; color: var(--muted); }
.deposits__drop .btn { margin-top: 6px; min-height: var(--control-h); }
.deposits__file { display: none; }
.deposits__upload-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deposits__upload-foot:empty { display: none; }
.deposits__picker { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }

/* 은행에서 파일 받는 법 — 평소에는 접어 두고 필요할 때만 편다 */
.deposits__help { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.deposits__help-btn .icon { transition: transform 0.15s ease; }
.deposits__help-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.deposits__help-panel {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--soft);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: #475467; line-height: 1.6;
}
.deposits__help-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-top: 6px; }
.deposits__help-title:first-child { margin-top: 0; }
.deposits__help-steps { padding-left: 18px; list-style: decimal; }
.deposits__help-tips { padding-left: 18px; list-style: disc; }
.deposits__help-banks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.deposits__help-bank { display: flex; gap: 8px; min-width: 0; }
.deposits__help-bank-name { font-weight: 800; color: var(--ink); flex: 0 0 76px; }
.deposits__help-bank-path { min-width: 0; overflow-wrap: anywhere; }

/* 제안 한 줄: 은행 라인 · 근거 · 장부 건 · 버튼 */
.deposits__list { display: flex; flex-direction: column; }
.deposits__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--soft);
}
.deposits__row:first-child { border-top: 0; }
.deposits__row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.deposits__line { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deposits__line-date { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.deposits__line-name { font-size: 14px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.deposits__line-amount { font-size: 15px; font-weight: 900; color: var(--navy); }
.deposits__line-memo { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deposits__reason { display: flex; flex-wrap: wrap; gap: 6px; }
.deposits__items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.deposits__item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.deposits__item-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.deposits__item-text { font-size: 12.5px; color: var(--muted); }
.deposits__item-amount { margin-left: auto; font-size: 13px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.deposits__actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.deposits__actions .btn { min-height: var(--control-h); }

/* 업로드 이력 */
.deposits__history { display: flex; flex-direction: column; }
.deposits__history-row {
  min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border: 0; border-top: 1px solid var(--soft);
  background: transparent; text-align: left; cursor: pointer;
  color: var(--ink);
}
.deposits__history-row:first-child { border-top: 0; }
.deposits__history-row:hover { color: var(--blue); }
.deposits__history-row--on { font-weight: 900; }
.deposits__history-name { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deposits__history-sub { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* 열 맞추기·수동 연결 모달 */
.deposits__mapping, .deposits__link { display: flex; flex-direction: column; gap: 12px; }
.deposits__mapping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deposits__preview { min-width: 520px; font-size: 12px; }
.deposits__preview th, .deposits__preview td { white-space: nowrap; }
.deposits__candidates { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.deposits__candidate {
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--soft);
}
.deposits__candidate:first-child { border-top: 0; }
.deposits__candidate .btn { min-height: var(--control-h); white-space: nowrap; }

/* ── 9) 계정 관리 (대표 전용) ──────────────────────────────── */

/* 사람 이름 아래 두 버튼. 비밀번호 바꾸기는 대표에게만 보인다(app.html 의 data-owner-only) */
.sidebar__password { width: 100%; }
.sheet__password { margin-top: 4px; }

.users__table { min-width: 620px; }
.users__table th, .users__table td { white-space: nowrap; }
.users__th-actions { text-align: right; }
.users__username { font-weight: 800; color: var(--ink); }
.users__name { font-weight: 700; }
.users__me { margin-left: 6px; }
/* 꺼 둔 계정은 글자를 흐리게 — 필과 함께 한눈에 갈린다 */
.users__row--off .users__username, .users__row--off .users__name { color: var(--muted); }
/* 꺼 둔 계정은 목록 아래 따로 모인다. 평소에 보는 구역이 아니라 제목도 조용하게. */
.users__group-title {
  padding: 14px 14px 0;
  font-size: 12.5px; font-weight: 800; color: var(--muted);
}
.users__foot-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 창 안쪽 — 계정 만들기 · 비밀번호 재설정 · 비밀번호 바꾸기 */
.users__modal, .users__form { display: flex; flex-direction: column; gap: 12px; }
.users__hint { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.users__done { display: flex; flex-direction: column; gap: 10px; }
.users__done-line { font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* 만든 비밀번호는 옮겨 적는 값이라 큼직하게 보여 준다 */
.users__password {
  flex: 1 1 160px;
  min-height: var(--control-h);
  padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--soft);
  display: flex; align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* 폭이 좁아지면 목록과 상세를 위아래로 */
@media (max-width: 1080px) {
  .vendors__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .vendors__head-actions { width: 100%; }
  .vendors__head-actions .btn { flex: 1; }
  .vendors__list { padding: 0; }
  .vendors__toolbar { padding: 12px; }
  .vendors__sort-mobile { display: block; }
  .vendors__list-body { padding: 12px; overflow-x: visible; }
  /* 한 행이 한 장의 카드가 되므로 표에 걸어 둔 최소 너비와 칸 여백을 되돌린다 */
  .vendors__table { min-width: 0; }
  .vendors__table th, .vendors__table td,
  .vendors__table th:first-child, .vendors__table td:first-child,
  .vendors__table th:last-child, .vendors__table td:last-child { padding-left: 0; padding-right: 0; white-space: normal; }
  .vendors__table tr { cursor: pointer; }
  .vendors__row--active { box-shadow: inset 3px 0 0 0 var(--navy); border-color: var(--navy); }
  .vendors__empty { padding: 4px 12px 16px; }

  /* 상세를 열면 목록을 덮고 전체 화면으로 */
  .vendors__layout--detail .vendors__list { display: none; }
  .vendors__layout:not(.vendors__layout--detail) .vendors__detail { display: none; }
  .vendors__layout--detail .vendors__back { display: inline-flex; }

  .vendors__cat { min-height: 44px; }
  .vendors__check { min-height: 44px; }
  /* 첨부 줄: 이름은 한 줄을 차지하고 버튼 둘이 아래에서 손가락 크기로 선다 */
  .vendors__doc { flex-wrap: wrap; padding: 8px 10px; }
  .vendors__doc-name { flex: 1 1 100%; }
  .vendors__doc .btn { flex: 1; min-height: 44px; }
  .vendors__docs-head .btn { min-height: 44px; }
  .vendors__form-row { grid-template-columns: minmax(0, 1fr); }

  /* 고정지출: 좁은 화면에서는 금액·버튼이 이름 아래 한 줄로 내려온다 */
  .page__head-actions { width: 100%; }
  .page__head-actions .btn { flex: 1; }
  .recurring__row { align-items: flex-start; }
  .recurring__side { width: 100%; justify-content: flex-start; }
  .recurring__foot .btn, .recurring__actions .btn { flex: 1; }

  /* 내 요청: 손가락으로 쓰는 화면이라 버튼이 줄을 꽉 채운다 */
  .request { padding: 14px 12px; }
  .request__amount { margin-left: 0; width: 100%; }
  .request__actions .btn { flex: 1; }
  .seg--wrap .seg__btn { flex: 1 1 auto; }

  /* 입금 관리: 네 칸을 위아래로 쌓고 버튼은 줄을 꽉 채운다 */
  .deposits__row, .deposits__row--plain { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .deposits__actions { justify-content: stretch; }
  .deposits__actions .btn { flex: 1; min-height: 44px; }
  .deposits__drop .btn { min-height: 44px; width: 100%; }
  .deposits__item-amount { margin-left: 0; }
  .deposits__picker { width: 100%; }
  .deposits__upload-foot .btn { width: 100%; min-height: 44px; }
  .deposits__help { align-items: stretch; }
  .deposits__help-btn { width: 100%; min-height: 44px; }
  .deposits__help-banks { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .deposits__history-row { flex-wrap: wrap; gap: 2px 10px; }
  .deposits__history-sub { margin-left: 0; width: 100%; white-space: normal; }
  .deposits__mapping-grid { grid-template-columns: minmax(0, 1fr); }
  .deposits__candidate { flex-direction: column; align-items: stretch; }
  .deposits__candidate .btn { width: 100%; min-height: 44px; }

  /* 계정 관리: 한 행이 한 장의 카드가 되므로 표에 걸어 둔 최소 너비를 되돌리고, 버튼 셋은 줄을 나눠 갖는다 */
  .users__table { min-width: 0; }
  /* 바깥 카드가 테두리를 벗으므로 비활성 구역 제목도 왼쪽 끝에 맞춘다 */
  .users__group-title { padding: 2px 0 6px; }
  .users__table th, .users__table td { white-space: normal; }
  .users__table .row-actions { justify-content: flex-start; width: 100%; }
  .users__table .row-actions .btn { flex: 1 1 auto; }
  .users__done .btn { flex: 1 1 auto; }
}