* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #211f1c; --paper: #f6f4ef; --surface: #fffdfb;
  --line: #e2ddd0; --muted: #867d6e; --faint: #a89f8f; --submuted: #5c5346; --tint: #efe9dd;

  --primary: #0d6b56; --primary-bg: #e1efe8;
  --stay: #a8552e; --stay-bg: #f5e6da;
  --danger: #ab3327; --danger-bg: #f6e1dc;
  --success: #3c7a45; --success-bg: #e4efe0;
  --warning: #93641c; --warning-bg: #f3ead1;
  --card-pay: #3c6c8a; --card-pay-bg: #e0ebf1;
  --online: #8a4a6b; --online-bg: #f1e3ea;
}
html { font-size: 16px; }
body { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 12px; transition: transform .08s ease, background-color .15s ease, border-color .15s ease; }
button:not(:disabled):active { transform: scale(0.96); }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
/* 수정 — 추가(primary)와 혼동되지 않도록 다른 색으로 구분 */
button.edit { background: var(--warning); color: #fff; border-color: var(--warning); font-weight: 700; }
input, select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); color: var(--ink); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Phosphor 아이콘 정렬 — 텍스트와 나란히 놓일 때 베이스라인 보정 */
.ph { line-height: 1; vertical-align: -0.125em; }
.hidden { display: none !important; }
.err { color: var(--danger); font-size: 14px; min-height: 20px; margin-top: 8px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* 로그인 */
.overlay { position: fixed; inset: 0; background: var(--paper); z-index: 100; display: flex; align-items: center; justify-content: center; }
.login-box { display: flex; flex-direction: column; gap: 12px; width: min(320px, 85vw); text-align: center; }
.login-box h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.login-box input { text-align: center; font-size: 20px; padding: 12px; }
.login-box select { text-align: center; font-size: 18px; padding: 12px; }
.login-box button { padding: 12px; font-size: 18px; }
/* 로그인 역할 선택 — 계정은 사용자/관리자 둘뿐이다 */
.login-roles { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.login-roles button { flex: 1; border: none; border-radius: 0; background: var(--surface); color: var(--muted); font-weight: 700; }
.login-roles button + button { border-left: 1px solid var(--line); }
.login-roles button.on { background: var(--primary); color: #fff; }

/* 상단바 / 하단탭 */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 10px; z-index: 10; }
#topbar #date-today { flex: 1; text-align: center; font-weight: 700; border: none; background: none; font-size: 16px; }
/* 날짜 화살표: 박스 버튼이 아니라 고스트 아이콘 버튼 (Toss식 절제) */
#topbar #date-prev, #topbar #date-next { width: 36px; height: 36px; padding: 0; border: none; background: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--submuted); }
#topbar #date-prev:hover, #topbar #date-next:hover, #topbar #date-today:hover { background: var(--tint); }
#current-user { font-size: 14px; font-weight: 700; color: var(--submuted); padding: 0 4px 0 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#current-user:empty { padding: 0; }
/* 근무자 선택 — 사용자 계정은 여기서 이름을 바꿔가며 쓴다 */
#staff-pick { font-size: 14px; font-weight: 700; color: var(--submuted); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--surface); max-width: 110px; }
#btn-logout { width: 36px; height: 36px; padding: 0; border: none; background: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--submuted); }
#btn-logout:hover { background: var(--tint); color: var(--danger); }

/* 근무자 로그인 비밀번호 설정 행 */
/* 로그인 비밀번호 — 관리자·사용자 두 계정 */
.acct-pw-row { display: flex; gap: 6px; align-items: center; padding: 7px 0; flex-wrap: wrap; }
.acct-pw-row + .acct-pw-row { border-top: 1px solid var(--line); }
.acct-pw-name { min-width: 128px; font-size: 14px; font-weight: 700; }
.acct-pw-row input { flex: 1 1 140px; min-width: 0; }
#tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--surface); border-top: 1px solid var(--faint); display: flex; z-index: 10; }
#tabbar button { flex: 1; border: none; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; color: var(--muted); }
#tabbar button .ph { font-size: 22px; }
#tabbar button span { font-size: 11px; font-weight: 600; }
#tabbar button.active { color: var(--primary); }
/* 처리 안 한 메모 개수 — 아이콘 오른쪽 위에 붙는 작은 원 */
#tabbar button { position: relative; }
.tab-badge { position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; }
/* 사이드바 하단 요약 — 데스크톱에서만 보인다 (모바일 탭바에는 자리가 없다) */
#nav-summary { display: none; }
#view { padding: 62px 10px 80px; max-width: 720px; margin: 0 auto; } /* 하단 80px = 고정 탭바(60px) + 여백, 마지막 콘텐츠가 가려지지 않도록 */
#view.has-entrybar { padding-bottom: 340px; } /* ledger.js의 고정 입력 독(.entry-panel)이 가리지 않도록 여백 확보 */

/* 칩/배지 */
.chip { border-radius: 999px; padding: 5px 12px; font-size: 14px; }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.badge { border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 700; }
.badge.rental { background: var(--primary-bg); color: var(--primary); }
.badge.stay { background: var(--stay-bg); color: var(--stay); }
.badge.noshow { background: var(--danger-bg); color: var(--danger); }
/* 연박 — 숙박 갈색과 인접하되 구분되는 앰버. 대실=초록/숙박=갈색 기억을 건드리지 않는다 */
.badge.longstay { background: var(--warning-bg); color: var(--warning); }

/* 노쇼 토글 — 메모 섹션 라벨 줄 오른쪽의 작은 칩 */
.noshow-toggle { float: right; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px 10px; font-size: 12px; color: var(--muted); }
.noshow-toggle.on { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
.pay { border-radius: 6px; padding: 2px 8px; font-size: 13px; }
.pay-cash { background: var(--success-bg); color: var(--success); }
.pay-card { background: var(--card-pay-bg); color: var(--card-pay); }
.pay-online { background: var(--online-bg); color: var(--online); }
.pay-transfer { background: var(--warning-bg); color: var(--warning); }

/* 장부 리스트 */
/* 전체/대실/숙박/삭제됨 — 필터가 아니라 뷰를 바꾸는 탭이라는 걸 명확히: 밑줄 탭 스타일 */
.filters { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 2px solid var(--line); }
.filter-tab { flex: 1; border: none; border-radius: 0; background: none; padding: 12px 4px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 16px; }
.filter-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
/* 리스트: 각 기록을 위아래 여백이 있는 개별 카드로 표시한다.
   각 칸에 고정 너비를 줘서(min-width가 아니라 width) 내용 길이가 달라도 세로로 줄이 맞는다.
   비고만 flex:1로 남는 공간을 갖고, 넘치는 칸은 ...으로 줄인다. */
.list { display: flex; flex-direction: column; }
/* 항목은 개별 카드이며, 안쪽 텍스트 크기와 무관하게 균일한 세로 높이를 갖는다 (min-height + 세로 가운데 정렬) */
.row { display: flex; flex-direction: column; justify-content: center; min-height: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; }
.row:last-child { margin-bottom: 0; }
@media (hover: hover) { .row:hover { border-color: var(--faint); } }
.row.editing { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }
/* 묶음 결제(같은 결제를 여러 방으로 나눠 표기) — 한 결제를 방마다 줄로 나누되
   카드 사이 간격 없이 붙이고 내부는 점선으로 나눠 하나의 블록임을 표시한다.
   금액/결제수단은 첫 줄에만 표기(render에서 처리). */
.row.grouped-first { min-height: 0; margin-bottom: 0; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 6px; }
.row.grouped-mid { min-height: 0; margin-bottom: 0; border-top: 1px dashed var(--line); border-bottom: none; border-radius: 0; padding: 6px 14px; }
.row.grouped-last { min-height: 0; border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 6px; }
.row-main { display: flex; align-items: center; gap: 5px; }
.row-main .no { color: var(--faint); background: var(--tint); border-radius: 4px; font-size: 12px; font-weight: 700; width: 20px; flex: 0 0 20px; text-align: center; padding: 2px 0; font-variant-numeric: tabular-nums; }
.row-main .time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; width: 38px; flex: 0 0 38px; }
.row-main .badge { width: 40px; flex: 0 0 40px; padding: 2px 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.row-main .rooms { font-weight: 700; width: 64px; flex: 0 0 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main .memo { color: var(--muted); font-size: 13px; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main .amount { font-weight: 700; font-variant-numeric: tabular-nums; width: 70px; flex: 0 0 70px; text-align: right; }
.row-main .pay { width: 54px; flex: 0 0 54px; padding: 2px 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.row-staff { margin-top: 4px; padding-left: 25px; font-size: 11px; color: var(--muted); }
/* 하단 고정 패널 — 요약/빠른금액/입력바를 세로로 쌓는 단일 컨테이너.
   entrybar가 좁은 화면에서 여러 줄로 줄바꿈돼도 서로 겹치지 않는다 (bottom 오프셋을
   각자 추측해 고정하는 대신, 컨테이너 자체만 tabbar 위 60px에 고정하고 내부는 자연 흐름). */
/* 탭바와 맞닿아 있으므로 세 가지로 분리한다: 위로 퍼지는 그림자(떠 있는 층),
   상단 라운드(독의 시작점), 그리고 탭바의 흰색과 다른 배경 톤. */
.entry-panel { position: fixed; bottom: 60px; left: 0; right: 0; display: flex; flex-direction: column; z-index: 9; box-shadow: 0 -10px 28px rgba(33, 31, 28, .16); }
/* 입력 독 접기 핸들 — 모바일에서만 보인다 (데스크톱은 우측 사이드바라 접을 필요가 없다) */
.panel-toggle { display: none; }
@media (max-width: 1023px) {
  .panel-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    align-self: center; margin-bottom: -1px; padding: 5px 16px 6px;
    border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0;
    background: var(--surface); font-size: 12px; font-weight: 600; color: var(--submuted);
  }
  .entry-panel.collapsed .entry-card { display: none; }
  /* 접었을 때는 요약 줄만 남으므로 목록 아래 여백도 그만큼 줄인다 */
  #view.has-entrybar.entry-collapsed { padding-bottom: 150px; }
}
.summary { background: var(--ink); color: #fff; padding: 8px 14px; font-size: 13px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sum-item { display: flex; align-items: baseline; gap: 5px; }
.sum-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.sum-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-flags { font-size: 12px; font-weight: 700; color: #eec2b8; }
.sum-note { font-size: 13px; }

/* 입력 카드 (모바일 하단 독) — 섹션(.es)을 display:contents로 펼쳐서 컴팩트한 flex-wrap 바로 만든다.
   섹션 라벨(.es-label)은 데스크톱 사이드바 전용이라 여기선 숨긴다. */
.entry-card { background: var(--tint); border-top: 2px solid var(--primary); padding: 8px 10px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.entry-card .es, .entry-card .es-actions, .entry-card .es-row { display: contents; }
.entry-card .es-label { display: none; }
#in-amount { width: 110px; font-size: 14px; }
#in-memo { flex: 1; min-width: 80px; }
#in-guest { width: 110px; }
#in-nights { width: 56px; text-align: right; }
#btn-rooms.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.entry-card button:disabled { opacity: 0.5; cursor: not-allowed; }
.stay-edit-hint { flex-basis: 100%; font-size: 12px; color: var(--primary); font-weight: 700; }

/* 대실/숙박 세그먼트 — 두 값이 모두 보여서 탭 한 번으로 선택 */
.type-seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.type-seg button { border: none; border-radius: 0; background: var(--surface); padding: 8px 14px; font-weight: 600; color: var(--muted); }
.type-seg button + button { border-left: 1px solid var(--line); }
/* 선택된 항목 — 기본은 주요색, 숙박만 러스트색으로 구분한다 (선결제/매일결제 등 다른 세그먼트도 이 규칙을 쓴다) */
.type-seg button.on { background: var(--primary-bg); color: var(--primary); font-weight: 700; }
.type-seg button.on[data-type="stay"] { background: var(--stay-bg); color: var(--stay); }
.type-seg button:disabled { opacity: 0.5; cursor: not-allowed; }

/* 결제수단 — 드롭다운 대신 버튼 그룹에서 하나 선택 */
.pay-seg { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.pay-seg button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 12px; font-size: 13px; color: var(--muted); }
.pay-seg button.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
/* 숙박을 고르면 입력 패널 전체가 숙박 색(러스트)으로 바뀐다 — 대실과 헷갈리지 않게 */
.entry-card.mode-stay .pay-seg button.on,
.entry-card.mode-stay .roomcell.on,
.entry-card.mode-stay .chip.on { background: var(--stay); border-color: var(--stay); color: #fff; }
.entry-card.mode-stay #btn-save.primary { background: var(--stay); border-color: var(--stay); }

.quick { flex-basis: 100%; background: none; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
/* 예약 폼은 좁은 고정 독이 아니라 세로 공간이 넉넉한 카드형 폼이므로, 스크롤 대신 항상 줄바꿈한다.
   금액 버튼과 바로 아래 입력창 사이 간격은 장부 입력 패널(.entry-card .quick)과 같은 8px로 맞춘다. */
#sf-quick { flex-wrap: wrap; overflow-x: visible; margin-bottom: 8px; }

/* 시간 입력 — 직접 타이핑 + 마우스로 고르는 시/분 패널 */
/* 모바일 독에서는 .es가 display:contents라 이 둘이 직접 flex 자식이 된다 —
   전체 폭을 차지하게 해서 '추가' 버튼이 옆으로 밀리지 않게 한다 */
.time-row { display: flex; gap: 6px; align-items: center; flex: 1 1 100%; flex-wrap: wrap; }
.time-row #in-time { flex: 1 1 90px; }
.timepick { flex-basis: 100%; }
.time-row #in-time { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.time-row button { padding: 8px 10px; font-size: 13px; color: var(--submuted); }
.time-row .tstep { padding: 8px 8px; font-size: 13px; font-weight: 700; color: var(--submuted); flex: 0 0 auto; }
.time-row .tstep:hover { background: var(--tint); }

/* 대화상자 (시스템 prompt 대체) */
.modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(33, 31, 28, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 16px; width: min(440px, 100%); max-height: 85dvh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(33, 31, 28, .3); }
.modal-head { padding: 16px 16px 10px; }
.modal-head h3 { font-size: 16px; margin: 0 0 2px; }
.modal-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.lg-free, .lg-busy { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-free { border: 1px solid var(--line); background: var(--surface); }
.lg-busy { background: var(--stay-bg); margin-left: 8px; }
.modal-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 16px 12px; overflow-y: auto; }
.modal-foot { padding: 10px 16px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.modal-foot button { padding: 10px 20px; }

/* 현금+카드 — 두 금액을 나란히 받고 총액은 아래에 합산해 보여준다 */
.split-row { display: flex; align-items: flex-end; gap: 6px; }
.split-f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.split-f span { font-size: 12px; font-weight: 600; color: var(--muted); }
.split-f input { width: 100%; min-width: 0; text-align: right; }
.split-plus { padding-bottom: 10px; color: var(--muted); font-weight: 700; }
.split-total { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.split-total b { font-size: 16px; color: var(--text); }

/* 저장 결과 알림 — 멀리서도 무엇이 기록됐는지 읽히도록 호실·금액을 크게 세우고,
   대실(초록)·숙박(갈색)·수정(노랑)을 위쪽 색띠와 글자색으로 구분한다. */
.modal-back.saved { background: rgba(33, 31, 28, .28); }
.saved-modal { width: min(320px, 100%); padding: 0; overflow: hidden; animation: saved-in .16s ease-out; }
@keyframes saved-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .saved-modal { animation: none; } }

/* 색 구분 — 상단 굵은 띠 + 구분 배지 배경 */
.saved-modal::before { content: ''; display: block; height: 6px; background: var(--tone); }
.saved-modal.tone-rental { --tone: var(--primary); --tone-bg: var(--primary-bg); }
.saved-modal.tone-stay { --tone: var(--stay); --tone-bg: var(--stay-bg); }
.saved-modal.tone-edit { --tone: var(--warning); --tone-bg: var(--warning-bg); }
.saved-modal.tone-longstay { --tone: var(--warning); --tone-bg: var(--warning-bg); }

.saved-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; }
.saved-type { background: var(--tone-bg); color: var(--tone); border-radius: 6px; padding: 3px 10px; font-size: 14px; font-weight: 800; }
.saved-title { font-size: 17px; font-weight: 800; color: var(--tone); letter-spacing: -0.01em; }
/* 호실 — 이 알림에서 가장 먼저 확인하는 값 */
.saved-lead { margin: 10px 18px 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.saved-lead:empty { display: none; }
.saved-amount { margin: 2px 18px 14px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tone); }
.saved-amount span { font-size: 16px; font-weight: 700; margin-left: 2px; }

.saved-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.saved-table tr { border-top: 1px solid var(--line); }
.saved-table th { width: 62px; text-align: left; font-weight: 600; color: var(--muted); padding: 9px 0 9px 18px; vertical-align: top; }
.saved-table td { padding: 9px 18px 9px 0; font-weight: 600; word-break: break-all; }

/* 호실 팝업 (모바일) — 데스크톱에선 항상 펼쳐진 인라인 섹션으로 재정의된다 */
.roomgrid { position: absolute; bottom: 100%; left: 10px; right: 10px; max-width: 700px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(33,31,28,.18); padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; z-index: 20; max-height: 60vh; overflow-y: auto; }
.roomcell { padding: 12px 0; font-weight: 700; font-size: 16px; }
.roomcell.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 오늘 밤 이미 사용 중인 객실 — 선택은 가능하되(중복 판매/수정 대비) 한눈에 구분되게 한다 */
.roomcell.busy { background: var(--stay-bg); color: var(--stay); border-color: var(--stay-bg); }
.roomcell.busy.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 타입별 잔여 객실 */
.vac-row { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.vac { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--tint); border-radius: 5px; padding: 1px 6px; }
.vac b { color: var(--primary); font-weight: 800; }
.vac.full b { color: var(--danger); }

/* 정산 */
.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.card-box h3 { font-size: 15px; margin: 0 0 10px; } /* 섹션 제목 통일 스케일: 15px */
.settle-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.settle-table td { padding: 10px 4px; border-bottom: 1px solid var(--line); }
.settle-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-table tr.total td { font-size: 18px; border-top: 2px solid var(--ink); }
.settle-table tr.cash td { font-size: 18px; color: var(--success); }
/* 입출금 합계 — 입금·지출 두 줄을 하나로 요약한 순액 */
.settle-table tr.flow td, .report-settle tr.flow td { color: var(--submuted); border-top: 2px solid var(--line); }
/* 최종 합계 — 매출에 입출금까지 반영한 그날의 최종 금액. 매출 합계와 같은 무게로 강조한다 */
.settle-table tr.final td { font-size: 18px; border-top: 2px solid var(--ink); }
.report-settle tr.final td { font-size: 16px; border-top: 2px solid var(--ink); }
/* 온라인 채널별 하위 항목 — 상위 행보다 들여쓰고 작게 */
.settle-table tr.sub-row td, .report-settle tr.sub-row td { font-size: 13px; color: var(--muted); padding-top: 5px; padding-bottom: 5px; }
.settle-table tr.sub-row td:first-child, .report-settle tr.sub-row td:first-child { padding-left: 16px; }
.settle-table tr.sub-row td:last-child, .report-settle tr.sub-row td:last-child { font-weight: 600; }
.sub { color: var(--muted); font-size: 13px; }
.exp-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.exp-row .amount { margin-left: auto; font-weight: 700; }
/* 지출 입력폼 — 섹션(.board-sect)의 padding-bottom이 0이므로 폼 자체가 아래 여백을 갖는다 */
/* 지출 입력폼 — 인풋은 기본 폭(약 170px)이 있어서 min-width:0 이 없으면 좁은 화면에서 넘친다.
   모바일에서는 내역이 한 줄을 다 쓰고 금액·추가가 다음 줄로 내려간다. */
.exp-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-bottom: 14px; }
.exp-form input[name=label] { flex: 1 1 100%; min-width: 0; }
.exp-form input[name=amount] { flex: 1 1 0; min-width: 0; text-align: right; }
.exp-form button { flex: 0 0 auto; }
/* 입금의 현금/카드 선택 — 기본 .pay-seg는 한 줄을 다 쓰지만 여기서는 금액·추가와 같은 줄에 둔다 */
.exp-form .pay-seg { flex: 0 0 auto; flex-wrap: nowrap; }

/* 통계 */
.range-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bar-label { min-width: 64px; font-size: 13px; }
.bar { flex: 1; background: var(--tint); border-radius: 4px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 4px; }
.bar-fill.alt { background: var(--stay); }
.bar-val { min-width: 90px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
h3.sect { margin: 18px 0 8px; font-size: 15px; }

/* KPI의 전기간 대비 증감 표시 */
.kpi-delta { font-size: 11px; font-weight: 700; margin-left: 6px; color: var(--muted); }
.kpi-delta.up { color: var(--primary); }
.kpi-delta.down { color: var(--danger); }

/* 일별 매출 SVG 차트 */
.stat-chart svg { display: block; width: 100%; height: auto; }
.chart-legend { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.chart-legend .lg-cur { color: var(--primary); font-weight: 700; }
.chart-legend .lg-prev { color: var(--faint); font-weight: 700; margin-left: 10px; }

/* 월별 스택 막대 — 대실(초록) + 숙박(갈색)을 한 막대에 */
.bar-seg { height: 100%; display: inline-block; vertical-align: top; }
.bar-seg.rental { background: var(--primary); }
.bar-seg.stay { background: var(--stay); }
.bar-seg.longstay { background: var(--warning); }
.seg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 3px 0 8px; }
.seg-dot.rental { background: var(--primary); }
.seg-dot.stay { background: var(--stay); }
.seg-dot.longstay { background: var(--warning); }

/* 직접선택 날짜 입력 */
.range-bar input[type="date"] { padding: 5px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

/* 통계 요약 지표 — 막대만 반복되던 화면 상단에 핵심 수치를 먼저 보여준다 */
.kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi-value { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.kpi-sub { font-size: 11px; color: var(--faint); }
/* 차트 카드 묶음 — 모바일은 1열, 데스크톱에서 2열(시계열은 전폭)로 확장된다 */
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.stats-grid .card-box { margin-bottom: 0; }

/* 설정 카드 묶음 — 모바일 1열. 데스크톱에서 2열 매서너리(카드가 쪼개지지 않음)로 확장 */
.settings-grid { column-count: 1; }

/* 설정 */
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-bg); color: var(--primary); border-radius: 999px; padding: 6px 12px; margin: 3px; font-weight: 600; cursor: grab; }
.tag.dragging { opacity: 0.4; }
.tag.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.tag button { border: none; background: none; color: inherit; padding: 0; font-size: 15px; cursor: pointer; }
.add-form { display: flex; gap: 6px; margin-top: 10px; }
.add-form input { flex: 1; }
.method-row { display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.method-row input { flex: 1; }
/* 호실 관리 — 호실번호 + 타입 + 삭제 */
.room-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.room-row { display: flex; gap: 6px; align-items: center; cursor: grab; }
.room-row.dragging { opacity: 0.4; }
.room-row.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.room-no { min-width: 44px; font-weight: 700; font-size: 14px; }
.room-type { flex: 1; min-width: 0; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.toggle-row input { width: 18px; height: 18px; }

/* 예약 메뉴는 파란 계열로 통일 — 장부(초록)와 다른 페이지임을 색으로 인식하게 한다 */
#view[data-view="stays"] button.primary { background: var(--card-pay); border-color: var(--card-pay); }
#view[data-view="stays"] .sf-seg button.on,
#view[data-view="stays"] .roomcell.on,
#view[data-view="stays"] .chip.on { background: var(--card-pay); border-color: var(--card-pay); color: #fff; }
#view[data-view="stays"] .type-seg button.on { background: var(--card-pay-bg); color: var(--card-pay); }
#view[data-view="stays"] .stay-new-head { color: var(--card-pay); }
#view[data-view="stays"] .cal-cell.today { border-color: var(--card-pay); }
#view[data-view="stays"] .cal-cell.occupied { background: var(--card-pay-bg); }
#view[data-view="stays"] .cal-arrivals { color: var(--card-pay); }

/* 예약 상단 캘린더 — 월간 일정 개요. 각 날짜에 입실 건수 + 투숙 점유 표시.
   settle 달력의 cal-* 스타일을 재사용하되 더 컴팩트한 셀로 오버라이드한다. */
.stay-cal { margin-bottom: 24px; }
.stay-cal .cal-header h2 .sub { font-weight: 600; }
.stay-cal .cal-cell { aspect-ratio: auto; min-height: 62px; align-items: stretch; justify-content: flex-start; padding: 5px 3px; gap: 2px; overflow: hidden; }

/* 연박 막대 — 같은 손님이 여러 날에 걸쳐 이어져 보이도록 칸 좌우 여백까지 채운다.
   칸마다 같은 줄(lane) 순서로 그리므로 가로로 자연히 이어진다. */
.cal-bars { display: flex; flex-direction: column; gap: 2px; margin: 0 -3px; }
.cal-bar { height: 14px; line-height: 14px; font-size: 10px; font-weight: 700; color: #fff;
  padding: 0 3px; white-space: nowrap; overflow: hidden; }
.cal-bar.hole { background: none; }          /* 빈 줄 — 아래 막대의 세로 위치를 맞추는 자리 */
.cal-bar.start { border-radius: 7px 0 0 7px; margin-left: 3px; }
.cal-bar.end { border-radius: 0 7px 7px 0; margin-right: 3px; }
.cal-bar.start.end { border-radius: 7px; }
.cal-bar.c0 { background: var(--primary); }
.cal-bar.c1 { background: var(--card-pay); }
.cal-bar.c2 { background: var(--stay); }
.cal-bar.c3 { background: var(--online); }
.cal-bar.c4 { background: var(--warning); }
.cal-bar.c5 { background: var(--success); }
.cal-more { font-size: 10px; font-weight: 700; color: var(--muted); padding-left: 3px; }
/* 좁은 화면에선 이름을 빼고 색 막대만 — 글자를 넣으면 잘려서 오히려 안 읽힌다 */
@media (max-width: 640px) {
  .cal-bar { font-size: 0; height: 10px; line-height: 10px; }
  .stay-cal .cal-cell { min-height: 54px; }
}
.stay-cal .cal-cell.empty { min-height: 62px; }
.stay-cal .cal-cell.occupied { background: var(--primary-bg); }
.stay-cal .cal-cell.today { border-color: var(--primary); border-width: 2px; }
.stay-cal .cal-day { font-size: 12px; align-self: flex-start; }
.stay-cal .cal-arrivals { font-size: 10px; font-weight: 700; color: var(--primary); margin-top: auto; align-self: flex-start; white-space: nowrap; }

/* 예약·투숙 탭 — 다른 메뉴와 같은 카드박스 언어: 제목이 카드 안에 있고,
   행 리스트는 카드 좌우 패딩을 상쇄해 꽉 채운다. 색은 왼쪽 인셋 바 + 상태 텍스트로만. */
.board-sect { padding-bottom: 0; margin-bottom: 28px; }
.board-sect h3 { display: flex; align-items: center; gap: 8px; }
.board-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 섹션 제목 컬러 액센트 — 앞 점 + 글자색으로 섹션 성격을 구분한다 */
.board-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; background: var(--faint); }
.board-arrive h3 { color: var(--primary); }
.board-arrive .board-dot { background: var(--primary); }
.board-stay h3 { color: var(--stay); }
.board-stay .board-dot { background: var(--stay); }
.board-depart h3 { color: var(--submuted); }
.board-depart .board-dot { background: var(--muted); }
.board-upcoming h3 { color: var(--card-pay); }
.board-upcoming .board-dot { background: var(--card-pay); }
.board-list { margin: 0 -14px; border-top: 1px solid var(--line); }
.board-empty { padding: 12px 14px; font-size: 13px; color: var(--faint); }
.board-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.board-row:last-child { border-bottom: none; }
.board-row.arriving { box-shadow: inset 3px 0 0 var(--primary); }
.board-row.unpaid { box-shadow: inset 3px 0 0 var(--danger); }
.board-row.done { color: var(--muted); }
.br-anchor { width: 52px; flex: 0 0 52px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.br-anchor.muted { font-size: 13px; font-weight: 600; color: var(--faint); }
.br-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-status { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.br-status.unpaid { color: var(--danger); }
.br-status.ok { color: var(--success); }
.br-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.br-actions button { padding: 6px 10px; font-size: 13px; }
.br-actions button.del { color: var(--faint); padding: 6px 8px; }
.br-actions button.del:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
/* 좁은 화면: 액션 버튼이 이름을 밀어내지 않도록 둘째 줄로 내려 본문에 정렬 */
@media (max-width: 1023px) {
  .board-row { flex-wrap: wrap; }
  .br-actions { flex-basis: 100%; padding-left: 64px; }
}

/* 새 예약 등록 — 아코디언 행. 보드가 주 화면이므로 기본은 접힘 */
.stay-new { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stay-new-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 14px; border: none; border-radius: 0; background: none; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; }
.stay-new-head .chev { margin-left: auto; color: var(--muted); transition: transform 0.15s ease; }
.stay-new.open .stay-new-head .chev { transform: rotate(180deg); }
.stay-form { display: none; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.stay-new.open .stay-form { display: block; }
/* 폼 필드 — 라벨 위, 컨트롤 아래 (장부 우측 패널과 같은 언어) */
.sf-field { margin-bottom: 12px; }
.sf-label { display: block; font-size: 12px; font-weight: 600; color: var(--submuted); margin-bottom: 6px; }
.sf-field > input { width: 100%; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 선택지 버튼 그룹 — 드롭다운을 대체한다 */
.sf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sf-seg button { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 9px 4px; font-size: 13px; color: var(--muted); }
.sf-seg button.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
/* 호실 선택 — 장부와 같은 그리드. '미정'은 전폭으로 맨 위에 둔다 */
.sf-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sf-rooms .roomcell { padding: 9px 0; font-size: 14px; }
.sf-rooms .roomcell.undecided { grid-column: 1 / -1; font-size: 13px; }
.stay-form .type-seg button { flex: 1; padding: 10px; }
.stay-form > button[type=submit] { width: 100%; padding: 12px; margin-top: 4px; }

/* 장부의 가상 줄 (예약대기/미수/선결제 연박표시) — 순번 없이 목록 맨 위에 표시된다.
   플랫 리스트라 카드 테두리 대신 왼쪽 인셋 바 + 배경 틴트로 상태를 표시한다. */
.row.virtual-waiting { border-color: var(--primary); background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary); }
.row.virtual-waiting .memo { color: var(--primary); font-weight: 600; }
.row.virtual-unpaid { border-color: var(--danger); background: var(--danger-bg); box-shadow: inset 3px 0 0 var(--danger); }
.row.virtual-unpaid .memo { color: var(--danger); font-weight: 600; }
.row.virtual-prepaid-cont { background: var(--tint); color: var(--muted); cursor: default; }
.row.virtual-prepaid-cont .memo { color: var(--muted); }

/* 리포트 (종이 장부 형식 인쇄용) */
.report-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 10px; }
.report-header h2 { font-size: 18px; letter-spacing: -0.01em; }
.report-title { margin: 18px 0 8px; font-size: 15px; }
.report-table, .report-settle { width: 100%; border-collapse: collapse; background: var(--surface); }
.report-table th, .report-table td { border: 1px solid var(--line); padding: 6px 8px; font-size: 13px; text-align: center; }
.report-table th { background: var(--tint); }
/* 숙박/대실 현황표 — 내용에 따라 열 폭이 제각각 계산되지 않도록 고정해 두 표를 동일하게 맞춘다.
   (지출내역도 .report-table을 쓰므로 현황표 래퍼 안으로 범위를 한정한다) */
.report-tables .report-table { table-layout: fixed; }
.report-tables .report-table th, .report-tables .report-table td { overflow: hidden; text-overflow: ellipsis; }
/* 열 폭 (NO / 호실 / 시간 / 금액 / 카드 / 비고) — 비고가 나머지를 차지.
   좁은 화면에서 NO·시간이 잘리지 않도록 비율을 잡고 가로 여백을 줄인다. */
.report-tables .report-table th, .report-tables .report-table td { padding-left: 4px; padding-right: 4px; }
.report-tables .report-table th:nth-child(1) { width: 10%; }
.report-tables .report-table th:nth-child(2) { width: 14%; }
.report-tables .report-table th:nth-child(3) { width: 17%; }
.report-tables .report-table th:nth-child(4) { width: 22%; }
.report-tables .report-table th:nth-child(5) { width: 14%; }
.report-table td:nth-child(4) { font-variant-numeric: tabular-nums; font-weight: 700; }
/* 비고·내역 — 가운데 정렬. 한글이 음절 중간에서 끊기지 않도록 낱말 단위로 줄바꿈한다 */
.report-memo { text-align: center; word-break: keep-all; }
.report-empty { color: var(--muted); padding: 16px; }
.report-settle td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.report-settle td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-settle tr.total td { border-top: 2px solid var(--ink); font-size: 16px; }
.report-settle tr.cash td { color: var(--success); font-size: 16px; }

/* 인쇄 — A4 세로 2장 기준. 1장: 숙박·대실 현황표 / 2장: 정산내역·지출내역 */
@page { size: A4 portrait; margin: 12mm 10mm; }
@media print {
  .no-print, #topbar, #tabbar, #login { display: none !important; }
  #view, #view.has-entrybar { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
  body { background: #fff; }
  /* 종이 장부는 전통적인 세로 스택 형식을 유지한다 (데스크톱 2열·카드 배치 무시) */
  .report-body { display: block !important; }
  .report-tables, .report-side { border: none !important; padding: 0 !important; background: none !important; }

  /* 정산·지출은 페이지를 강제로 넘기지 않고 이어서 흘린다 — 강제로 넘기면 첫 장 아래가 비어
     기록이 조금만 많아져도 3장이 된다. 대신 이 블록은 중간에서 잘리지 않게 한 덩어리로 유지한다. */
  .report-side { break-inside: avoid; }

  /* A4 폭에 맞춰 여백과 글자를 줄여 한 장에 최대한 담는다 */
  .report-header { margin-bottom: 2mm; }
  .report-header h2 { font-size: 14pt; }
  .report-header .sub { font-size: 8.5pt; }
  .report-title { font-size: 10.5pt; margin: 3mm 0 1.5mm; }
  .report-table, .report-settle { font-size: 8.5pt; }
  .report-table th, .report-table td { padding: 0.9mm 1.5mm; line-height: 1.25; }
  .report-settle td { padding: 1.5mm 1mm; font-size: 9.5pt; }
  .report-settle tr.total td, .report-settle tr.cash td, .report-settle tr.final td { font-size: 10.5pt; }
  .report-settle tr.sub-row td { font-size: 8.5pt; }
  /* 행이 페이지 경계에서 잘리지 않게 */
  tr { break-inside: avoid; }
  thead { display: table-header-group; } /* 표가 다음 장으로 넘어가면 머리글도 반복 */
}

/* 메모(할 일) 탭 */
.memo-add { padding: 12px 14px; }
.memo-form { display: flex; gap: 8px; }
.memo-form input { flex: 1; min-width: 0; }
.memo-sect { padding-bottom: 0; margin-bottom: 20px; }
.memo-sect h3 { display: flex; align-items: center; gap: 8px; }
.memo-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 섹션별 컬러 — 할 일(처리 필요)은 주황, 완료는 녹색 */
.memo-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; background: var(--faint); }
.memo-pending h3 { color: var(--stay); }
.memo-pending .memo-dot { background: var(--stay); }
.memo-done h3 { color: var(--success); }
.memo-done .memo-dot { background: var(--success); }
.memo-list { margin: 0 -14px; border-top: 1px solid var(--line); }
.memo-empty { padding: 14px; font-size: 13px; color: var(--faint); }
.memo-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.memo-item:last-child { border-bottom: none; }
/* 처리 체크 — 원형 버튼, 완료 시 채워짐 */
.memo-check { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: transparent; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 1px; }
.memo-check:hover { border-color: var(--success); }
.memo-item.done .memo-check { background: var(--success); border-color: var(--success); color: #fff; }
.memo-body { flex: 1 1 0; min-width: 0; }
.memo-content { font-size: 15px; font-weight: 500; word-break: break-word; }
.memo-item.done .memo-content { text-decoration: line-through; color: var(--muted); }
.memo-meta { margin-top: 3px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.memo-del { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--faint); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.memo-del:hover { background: var(--danger-bg); color: var(--danger); }

/* 월간 기록 — 예약 메뉴와 같은 섹션 언어(컬러 점 + 제목). 월 이동은 우측 정렬. */
.cal-card { margin-bottom: 20px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--submuted); }
/* 지출 내역 행의 금액 — 예약 행(board-row) 안에서 우측 정렬 */
.exp-amount { flex: 0 0 auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* minmax(0,1fr) — 셀의 aspect-ratio가 트랙 폭을 밀어내 컨테이너를 넘치지 않도록 한다 */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; gap: 2px; }
.cal-cell.empty { border: none; background: none; cursor: default; }
.cal-cell.today { border-color: var(--primary); border-width: 2px; }
.cal-cell.selected { background: var(--primary); border-color: var(--primary); }
.cal-cell.selected .cal-day, .cal-cell.selected .cal-total { color: #fff; }
.cal-day { font-size: 13px; font-weight: 700; }
.cal-total { font-size: 11px; color: var(--success); font-weight: 600; }
/* 날짜별 대실/숙박 건수 — 장부의 대실(초록)·숙박(러스트) 색과 동일하게 맞춘다 */
.cal-counts { display: flex; gap: 4px; flex-wrap: wrap; font-size: 10px; font-weight: 700; line-height: 1.2; }
.cal-counts .cnt-rental { color: var(--primary); }
.cal-counts .cnt-stay { color: var(--stay); }
.cal-counts .cnt-longstay { color: var(--warning); }
.cal-cell.selected .cal-counts .cnt-rental, .cal-cell.selected .cal-counts .cnt-stay,
.cal-cell.selected .cal-counts .cnt-longstay { color: rgba(255, 255, 255, 0.9); }

/* ───────────────────────────────────────────────────────────
   데스크톱 (≥1024px): 하단 탭바를 왼쪽 사이드바로 전환하고 본문을 넓힌다.
   모바일 레이아웃은 이 블록 밖에서 그대로 유지된다. DOM/JS 변경 없이 CSS만으로 처리.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 사이드바 폭은 220px로 통일 — 아래 여러 곳에서 반복 사용된다 */

  /* 하단 탭바 → 왼쪽 세로 사이드바 (Linear식: 페이지와 같은 배경의 플랫 구조, 활성 항목만 틴트 필) */
  #tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 220px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 2px;
    padding: 64px 12px 16px;
    background: var(--paper);
    border-top: none; border-right: 1px solid var(--line);
  }
  /* 사이드바 상단 워드마크 — 상단바(날짜) 높이와 맞춰 정렬 */
  #tabbar::before {
    content: "숙박 장부";
    position: absolute; top: 0; left: 0; right: 0; height: 52px;
    display: flex; align-items: center; padding: 0 22px;
    font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  }
  #tabbar button {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 10px;
    height: 38px; padding: 0 10px; border-radius: 8px; color: var(--submuted);
  }
  #tabbar button .ph { font-size: 18px; color: var(--muted); }
  #tabbar button span { font-size: 14px; }
  #tabbar button:hover { background: var(--tint); }
  #tabbar button.active { background: var(--primary-bg); color: var(--primary); }
  #tabbar button.active .ph { color: var(--primary); }
  /* 사이드바에서는 배지를 메뉴 줄 오른쪽 끝에 세로 가운데로 */
  .tab-badge { position: static; margin-left: auto; }

  /* 사이드바 하단 한눈 요약 — 어느 화면에 있든 오늘 상황이 보이게 */
  #nav-summary {
    display: block; margin-top: auto; padding: 12px 10px 4px;
    border-top: 1px solid var(--line); font-size: 12px;
  }
  .ns-title { font-size: 11px; font-weight: 800; color: var(--faint); margin-bottom: 6px; }
  .ns-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; }
  .ns-row span { color: var(--muted); }
  .ns-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
  .ns-row.cash b { color: var(--success); }
  .ns-todo { margin-top: 8px; padding: 5px 8px; border-radius: 7px;
    background: var(--warning-bg); color: var(--warning); font-weight: 700; text-align: center; }

  /* 상단바: 사이드바 오른쪽에서 시작. 날짜 조절기를 왼쪽에 붙인다(넓은 폭에서 가운데 뜨지 않게) */
  #topbar { left: 220px; padding: 0 24px; gap: 2px; }
  #topbar #date-today { flex: 0 0 auto; height: 36px; padding: 0 10px; border-radius: 10px; }
  #staff-select { margin-left: auto; max-width: 160px; }

  /* 본문: 사이드바만큼 밀고, 모든 페이지가 같은 좌상단 기준점에서 시작한다.
     가운데 정렬 금지 — 콘텐츠 최대폭 1200px, 왼쪽 정렬로 통일 (Linear/Stripe 방식). */
  #view, #view.has-entrybar { margin-left: 220px; max-width: none; padding: 72px 40px 56px; }
  /* 가로 정렬만 좌상단으로 리셋하고, 각 블록의 세로 여백(margin-bottom)은 유지해 섹션 간 리듬을 살린다 */
  #view > * { width: 100%; max-width: 1200px; margin-left: 0; margin-right: 0; }

  /* 장부 재해석: 모바일의 하단 고정 독을 → 좌측 기록 리스트 + 우측 상시 입력 패널 2열로.
     DOM은 그대로(.filters/.list/.entry-panel)이고 그리드 영역으로 재배치한다. */
  #view.has-entrybar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto 1fr; /* 남는 세로 공간은 리스트 행이 갖는다 — 필터 줄이 늘어나지 않게 */
    grid-template-areas: "filters entry" "list entry";
    align-content: start;
    column-gap: 28px;
    row-gap: 18px; /* 필터 ↔ 리스트 세로 여백 (그리드 자식은 margin이 0으로 초기화되므로 gap으로 준다) */
    max-width: 1200px; /* 다른 페이지의 콘텐츠 최대폭과 동일 기준 */
    padding-bottom: 56px;
  }
  #view.has-entrybar > * { width: auto; max-width: none; margin: 0; } /* 폭은 그리드가 정한다 */
  #view.has-entrybar > .filters { grid-area: filters; }
  #view.has-entrybar > .list { grid-area: list; align-self: start; }
  /* 필터 탭: 전폭으로 퍼뜨리지 않고 왼쪽 정렬 탭 (Stripe 탭 패턴) */
  .filter-tab { flex: 0 0 auto; padding: 12px 20px; font-size: 17px; }
  /* PC에서는 리스트 항목을 조금 더 크게 */
  .list .row { min-height: 56px; padding: 10px 18px; }
  .list .row.grouped-first, .list .row.grouped-mid, .list .row.grouped-last { min-height: 0; }
  .row-main { gap: 7px; }
  .row-main .time { font-size: 14px; width: 42px; flex-basis: 42px; }
  .row-main .rooms { font-size: 16px; }
  .row-main .memo { font-size: 14px; }
  .row-main .amount { font-size: 16px; width: 84px; flex-basis: 84px; }

  /* 하단 고정 독 → 우측 컬럼: 위에 오늘 요약 카드, 아래에 입력 카드 (sticky) */
  #view.has-entrybar > .entry-panel {
    grid-area: entry; align-self: start;
    position: sticky; top: 72px; left: auto; right: auto; bottom: auto;
    display: flex; flex-direction: column; gap: 12px;
    background: none; border: none; box-shadow: none;
    /* 객실 전부 표시 + 5개 섹션이면 패널이 뷰포트보다 커질 수 있다.
       sticky 요소가 화면보다 크면 하단(추가 버튼)에 닿지 못하므로 패널 내부 스크롤을 허용한다.
       객실 그리드 자체는 여전히 스크롤 없이 전부 렌더된다. */
    max-height: calc(100dvh - 84px); overflow-y: auto; padding-right: 2px;
  }
  /* 패널이 flex column이라 자식이 줄어들면 entry-card(overflow:hidden) 안에서 추가 버튼이 잘린다.
     자식을 자연 높이로 고정해 넘칠 때 패널 자체가 스크롤되도록 한다. */
  #view.has-entrybar > .entry-panel > * { flex-shrink: 0; }
  /* 1. 오늘 요약 — 별도 카드로 승격, 수치를 크게 */
  .entry-panel > .summary {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    color: var(--ink); padding: 14px 16px;
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px;
  }
  .entry-panel > .summary .sum-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .entry-panel > .summary .sum-label { color: var(--muted); }
  .entry-panel > .summary .sum-val { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
  .entry-panel > .summary .sum-item.total .sum-val { color: var(--primary); }
  .entry-panel > .summary .sum-flags { grid-column: 1 / -1; color: var(--danger); }
  .entry-panel > .summary .sum-note { color: var(--muted); }
  /* 2. 입력 카드 — 라벨 있는 세로 섹션 폼: 유형 → 객실(전부표시) → 금액 → 결제수단(버튼) → 예약자·메모 → 추가 */
  .entry-card {
    display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 6px 20px rgba(33, 31, 28, .06); overflow: hidden; padding: 0; border-top: none;
  }
  .entry-card .es { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .entry-card .es-label { display: block; font-size: 12px; font-weight: 600; color: var(--submuted); margin-bottom: 8px; }
  .entry-card .es-row { display: flex; gap: 8px; margin-top: 8px; }
  .entry-card #in-amount, .entry-card #in-memo, .entry-card #in-guest,
  .entry-card #in-nights, .entry-card #in-paymode, .entry-card #in-time { width: 100%; }
  .entry-card #in-amount { font-size: 14px; }
  /* 유형: 두 버튼 균등 분할 */
  .entry-card .type-seg button { flex: 1; padding: 10px; }
  /* 객실: 토글 버튼 숨기고 그리드를 항상 인라인으로, 스크롤 없이 전부 표시 */
  .entry-card #btn-rooms { display: none; }
  .entry-card .es-rooms #roomgrid {
    display: grid !important; position: static; left: auto; right: auto; bottom: auto;
    max-width: none; max-height: none; margin: 0; padding: 0; box-shadow: none; border: none; overflow: visible;
    grid-template-columns: repeat(5, 1fr); gap: 6px;
  }
  .entry-card .roomcell { padding: 9px 0; font-size: 14px; }
  /* 금액: 빠른칩은 가로 스크롤 없이 줄바꿈으로 전부 나열 */
  .entry-card .quick { flex-basis: auto; margin-bottom: 8px; flex-wrap: wrap; overflow-x: visible; }
  /* 결제수단: 버튼 3열 그리드 */
  .entry-card .pay-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .entry-card .pay-seg button { padding: 9px 4px; text-align: center; }
  /* 추가/수정/삭제 */
  .entry-card .es-actions { display: flex; gap: 8px; padding: 12px 14px; }
  .entry-card .es-actions #btn-save { flex: 1; }

  /* 예약: 좌측 보드 + 우측 '새 예약 등록' 사이드바 (장부의 2열 구조와 같은 언어) */
  #view[data-view="stays"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 28px;
    align-content: start;
    max-width: 1200px;
  }
  #view[data-view="stays"] > * { width: auto; max-width: none; }
  /* 사이드바는 스크롤을 따라오고, 내용이 길면 패널 안에서 스크롤된다 */
  .stay-new {
    align-self: start; position: sticky; top: 72px;
    max-height: calc(100dvh - 84px); overflow-y: auto;
  }
  /* 사이드바에서는 항상 펼친 상태 — 접기 토글은 모바일 전용이다 */
  .stay-new .stay-form { display: block; }
  .stay-new-head { cursor: default; }
  .stay-new-head .chev { display: none; }

  /* 통계: 요약 4열 + 차트 2열(일별·월별 시계열은 전폭) */
  .kpi-row { grid-template-columns: repeat(3, 1fr); gap: 12px; } /* KPI 6개 → 2×3 */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .stats-grid .card-box.wide { grid-column: 1 / -1; }

  /* 설정: 2열 매서너리. 카드는 열 사이에서 쪼개지지 않고, 호실만 전폭으로 얹는다 */
  .settings-grid { column-count: 2; column-gap: 16px; }
  .settings-grid > .card-box { break-inside: avoid; }
  .settings-grid > .sg-wide { column-span: all; }

  /* 일일정산: 현황표(좌, 넓게) + 정산·지출 요약(우) 2열.
     양쪽 다 카드 컨테이너로 감싸 다른 페이지의 카드 언어와 맞춘다 */
  .report-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
  .report-tables, .report-side { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
  .report-tables .report-title:first-child, .report-side .report-title:first-child { margin-top: 0; }
  .report-table th, .report-table td { padding: 9px 10px; font-size: 14px; }
  .report-tables .report-table th, .report-tables .report-table td { padding-left: 8px; padding-right: 8px; }
  .report-settle td { padding: 10px 6px; }

  /* 월간 달력: 헤더도 좌상단 기준 정렬, 커진 칸에 맞춰 글자 확대 */
  .cal-header { justify-content: flex-start; gap: 8px; }
  .cal-grid { gap: 8px; }
  /* 예약 상단 캘린더는 개요용이라 settle 달력만큼 크지 않게 유지 */
  .stay-cal .cal-cell { min-height: 62px; }
  .stay-cal .cal-cell.empty { min-height: 62px; }
  .stay-cal .cal-day { font-size: 14px; }
  .stay-cal .cal-arrivals { font-size: 12px; }
  .cal-dow { font-size: 14px; }
  .cal-cell { aspect-ratio: auto; min-height: 96px; align-items: stretch; justify-content: flex-start; padding: 10px 12px; border-radius: 12px; }
  .cal-day { font-size: 18px; align-self: flex-start; }
  .cal-counts { font-size: 13px; gap: 8px; margin-top: 3px; }
  .cal-total { font-size: 15px; font-weight: 700; margin-top: auto; align-self: flex-end; }
  /* 선택한 날짜 상세: 정산 | 지출 2열 */
  /* 정산은 전폭, 입금·지출은 나란히 2열 */
  #cal-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  #cal-detail .card-box { margin-bottom: 0; }
  #cal-detail > .board-arrive { grid-column: 1 / -1; }
}

/* 작업 기록 탭 — 누가 언제 무엇을 했는지. 등록·수정·삭제를 색으로 구분한다. */
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
button.danger-ghost { border-color: var(--danger); color: var(--danger); background: var(--surface); padding: 6px 12px; font-size: 13px; font-weight: 700; }
button.danger-ghost:hover { background: var(--danger-bg); }

.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 84px 46px 44px 1fr auto auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.log-at { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-act { text-align: center; border-radius: 6px; padding: 2px 0; font-size: 12px; font-weight: 800; }
.log-act.act-create { background: var(--primary-bg); color: var(--primary); }
.log-act.act-update { background: var(--warning-bg); color: var(--warning); }
.log-act.act-delete { background: var(--danger-bg); color: var(--danger); }
.log-target { font-size: 12px; font-weight: 700; color: var(--submuted); }
.log-summary { font-size: 14px; font-weight: 600; word-break: break-all; }
.log-staff { font-size: 12px; color: var(--muted); white-space: nowrap; }
.log-del { border: none; background: none; color: var(--faint); padding: 2px 4px; }
.log-del:hover { color: var(--danger); }

/* 모바일 — 요약을 아랫줄로 내려 가로 폭을 확보한다 */
@media (max-width: 640px) {
  .log-row { grid-template-columns: auto 46px 44px 1fr auto; row-gap: 4px; }
  .log-summary { grid-column: 1 / -1; }
}