/* public/css/theme-d.css — 디자인 D "컬러 블록".
 *
 * style.css(기존 디자인) 위에 덧씌우는 파일이다. 이 파일만 끄면 기존 디자인으로 돌아간다
 * (설정 → 화면 디자인, 또는 index.html의 <link id="theme-d">를 비활성화).
 * 기존 규칙과 같은 선택자·같은 미디어 조건으로 다시 써서, 나중에 읽히는 이 파일이 이긴다.
 *
 * 색의 역할:
 *   --primary  대실(청록) — 차트·배지·객실 선택이 이미 이 토큰을 '대실 색'으로 쓴다
 *   --stay     숙박(주황)
 *   --action   누르는 것(파랑) — 일반 버튼, 포커스, 합계 강조
 *   --nav      사이드바(남색)
 */
:root {
  --ink: #15203a; --paper: #eef1f6; --surface: #ffffff;
  --line: #dde3ee; --muted: #67728a; --faint: #9aa4b8; --submuted: #3f4a63; --tint: #f1f4f9;

  --primary: #0b9b80; --primary-bg: #dcf4ee;
  --stay: #e2621f; --stay-bg: #ffe9dc;
  --danger: #d23a2e; --danger-bg: #fde6e3;
  --success: #1c8a55; --success-bg: #e0f3e9;
  --warning: #b0700f; --warning-bg: #fdf0d6;
  --card-pay: #3a5fa8; --card-pay-bg: #e3ebfb;
  --online: #b0165a; --online-bg: #ffe0ec;

  --action: #1f5eff; --action-bg: #e6eeff;
  --nav: #1d2a44; --nav-on: #2f4170; --nav-ink: #aebadb;
  --shadow-s: 0 1px 2px rgba(21, 32, 58, .06);
  --shadow-m: 0 2px 8px rgba(21, 32, 58, .07);
  --shadow-l: 0 20px 60px rgba(21, 32, 58, .28);

  /* 통계 — 지난달 막대와 요일 열지도는 차가운 회색·청록 단계로 */
  --st-prev: #c3cad8; --st-h1: #e3f5f0; --st-h2: #b6e6d9; --st-h3: #7fd0bb; --st-h4: #34b294; --st-h5: #0b8a72;
}

/* ── 기본 요소 ─────────────────────────────────────────── */
button { border-radius: 10px; }
button.primary { background: var(--action); border-color: var(--action); }
input, select { border-radius: 10px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--action); }
.login-roles button.on { background: var(--action); }

/* 배지 — 채운 색 면. 글자보다 색이 먼저 읽힌다 */
.badge { border-radius: 8px; }
.badge.rental { background: var(--primary); color: #fff; }
.badge.stay { background: var(--stay); color: #fff; }
.badge.longstay { background: var(--warning); color: #fff; }
.badge.noshow { background: var(--danger); color: #fff; }
.pay-cash, .pay-card, .pay-online, .pay-transfer { border-radius: 8px; }

/* 단골 배지 */
.vip { background: #ffe27a; color: #5a4300; }
.vip.re { background: var(--tint); color: var(--submuted); }

/* 칩 — 선택은 파랑 (예약·설정 등 장부 입력 밖에서) */
.chip.on { background: var(--action); border-color: var(--action); }

/* ── 카드 · 섹션 — 테두리 대신 떠 있는 면 ───────────────── */
.card-box { border: none; border-radius: 18px; box-shadow: var(--shadow-m); }

/* ── 장부 목록 — 줄마다 떠 있는 카드 ─────────────────────── */
.row { border: none; border-radius: 14px; box-shadow: var(--shadow-s); margin-bottom: 7px; }
@media (hover: hover) { .row:hover { border-color: transparent; box-shadow: 0 3px 12px rgba(21, 32, 58, .10); } }
.row.editing { box-shadow: 0 0 0 2px var(--action); }
.row.grouped-mid, .row.grouped-last { border-top: 1px dashed var(--line); }
.row-main .no { background: var(--tint); color: var(--faint); border-radius: 6px; }
.row-main .rooms { font-weight: 800; }
.row-main .amount { font-weight: 800; }

/* 필터 탭 — 밑줄 탭 대신 알약. 선택은 짙은 남색으로 채운다 */
.filters { border-bottom: none; gap: 4px; }
.filter-tab { border-radius: 999px; border-bottom: none; margin-bottom: 0; padding: 9px 4px; }
.filter-tab.on { background: var(--ink); color: #fff; border-bottom: none; }

/* 대실/숙박 등 세그먼트 — 옅은 바탕 위에 선택된 칸만 채운다 */
.type-seg { border: none; background: var(--tint); padding: 4px; gap: 4px; border-radius: 12px; }
.type-seg button { border-radius: 9px; background: transparent; }
.type-seg button + button { border-left: none; }
.type-seg button.on { background: var(--action); color: #fff; }
.type-seg button.on[data-type="rental"] { background: var(--primary); color: #fff; }
.type-seg button.on[data-type="stay"] { background: var(--stay); color: #fff; }
.type-seg button.on[data-type="longstay"] { background: var(--warning); color: #fff; }

/* 결제수단 버튼 */
.pay-seg button { border-color: var(--line); }

/* 객실 칸 — 옅은 면, 사용 중은 주황 면 */
.roomcell { background: var(--tint); border-color: transparent; border-radius: 12px; }
.roomcell.busy { background: var(--stay-bg); color: var(--stay); border-color: transparent; }
.vac { border-radius: 6px; }

/* 입력 독(폰) — 위쪽 선을 대실 색 대신 남색으로 */
.entry-card { border-top-color: var(--ink); }
.summary { background: var(--nav); }

/* 온라인예약 카드 — 줄무늬 대신 색 면 */
.online-card { border: none; border-radius: 16px; box-shadow: var(--shadow-m); }
.online-card.rental { box-shadow: var(--shadow-m); background: #effaf7; }
.online-card.stay { box-shadow: var(--shadow-m); background: #fff4ee; }
.online-card:hover { border-color: transparent; background: var(--action-bg); }

/* 대화상자 */
.modal { border-radius: 20px; box-shadow: var(--shadow-l); }
.modal-back { background: rgba(21, 32, 58, .45); }

/* 달력 */
.cal-cell { border-radius: 10px; }
.cal-cell.today { border-color: var(--action); }
.cal-cell.selected { background: var(--action); border-color: var(--action); }

/* 숫자 키패드 */
.numpad .np-done { background: var(--action); border-color: var(--action); }

/* ── 폰: 하단 탭바 선택색 ─────────────────────────────────── */
#tabbar button.active { color: var(--action); }

/* ── 데스크톱 (≥1024px) ───────────────────────────────────── */
@media (min-width: 1024px) {
  /* 남색 사이드바 */
  #tabbar { background: var(--nav); border-right: none; }
  #tabbar::before { color: #fff; }
  #tabbar button { color: var(--nav-ink); background: transparent; border-color: transparent; }
  #tabbar button .ph { color: var(--nav-ink); }
  #tabbar button:hover { background: rgba(255, 255, 255, .07); }
  #tabbar button.active { background: var(--nav-on); color: #fff; }
  #tabbar button.active .ph { color: #fff; }
  #nav-summary { border-top-color: rgba(255, 255, 255, .12); color: #fff; }
  .ns-title { color: var(--nav-ink); }
  .ns-row span { color: var(--nav-ink); }
  .ns-row b { color: #fff; }
  .ns-row.cash b { color: #7fe0c2; }
  .ns-todo { background: rgba(255, 226, 122, .16); color: #ffe27a; }

  #topbar { border-bottom-color: var(--line); }

  /* 필터 탭은 폭을 균등하게 늘리지 않고 알약만큼만 */
  .filter-tab { flex: 0 0 auto; padding: 9px 20px; font-size: 16px; }

  /* 오른쪽 요약·입력 카드 — 테두리 없이 떠 있는 면 */
  .entry-panel > .summary { border: none; border-radius: 18px; box-shadow: var(--shadow-m); background: var(--surface); }
  .entry-panel > .summary .sum-item.total .sum-val { color: var(--action); }
  .entry-card { border: none; border-radius: 18px; box-shadow: var(--shadow-m); }
  .entry-card .roomcell { border-radius: 10px; }
  /* 입력 카드의 저장 버튼은 대실(청록)·숙박(주황) 모드 색을 따른다 */
  .entry-card #btn-save.primary { background: var(--primary); border-color: var(--primary); }
  .entry-card.mode-stay #btn-save.primary { background: var(--stay); border-color: var(--stay); }
}

/* ── 폰(≤640px) 장부 줄 — 이름·단골 배지 자리를 만든다 ─────────
   줄 번호 칸을 좁히고 호실·결제 칸을 조여, 이름 칸이 한두 글자로 찌그러지지 않게 한다. */
@media (max-width: 640px) {
  .row { padding: 10px 12px; }
  .row-main { gap: 6px; }
  .row-main .no { width: 18px; flex-basis: 18px; font-size: 11px; }
  .row-main .rooms { width: 40px; flex-basis: 40px; }
  .row-main .amount { width: auto; flex: 0 0 auto; }
  .row-main .pay { width: 48px; flex-basis: 48px; font-size: 11px; }
  .row-main .memo .vip { font-size: 10px; padding: 1px 5px; }
}