/* ── 홈(admin/js/home) — 피그마 「본사 · 대시보드」(193:900) · 「가맹점 · 대시보드」(196:4715).
   본사 · 가맹점이 같은 부품 · 같은 글자 크기(사장님 피드백). 색은 base.css · admin.css 토큰. 방 상태 색 rs-* 는 admin.css 끝 공용 ── */
.home { display: grid; gap: 24px; min-width: 0; }
.home-head { gap: 6px; }
.home-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.home-head p { font-size: 13px; }
.home-row { display: grid; gap: 24px; min-width: 0; align-items: stretch; }
.home-row-hero { grid-template-columns: minmax(0, 760fr) minmax(0, 528fr); }
.home-row-hero-s { grid-template-columns: minmax(0, 420fr) minmax(0, 872fr); }
.home-row-2 { grid-template-columns: minmax(0, 900fr) minmax(0, 388fr); }
.home-detail { display: grid; gap: 24px; min-width: 0; scroll-margin-top: 88px; }

/* 흰 판(카드) — 「카드 제목」(183:94) */
.card { min-width: 0; display: grid; gap: 16px; align-content: start; padding: 28px; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.card-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.card-head h2 small { font-size: 13px; font-weight: 400; color: var(--sub); }
.card-head p { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.card-more { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-size: 13px; color: var(--sub); text-decoration: none; white-space: nowrap; }
.card-more:hover { color: var(--ink); }
.card .ico, .hero .ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 「오늘 처리할 일」 주인공 판 — 화면마다 하나(「숫자 카드 · 주인공」 183:168) */
.hero { min-width: 0; display: flex; gap: 32px; padding: 32px; border-radius: 16px; background: var(--accent-soft); }
.hero-main { flex: none; display: flex; flex-direction: column; gap: 16px; min-width: 0; width: 100%; }
.hero-list .hero-main { width: 240px; }
.hero-label { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.hero-num { margin: 0; display: flex; align-items: baseline; gap: 2px; color: var(--ink); }
.hero-num b { font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hero-num span { font-size: 28px; font-weight: 500; }
.hero-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--sub); }
.hero-chip { padding: 5px 11px; border-radius: 99px; background: var(--accent-d); color: var(--white); font-size: 13px; font-weight: 700; }
.hero-btn { margin-top: auto; align-self: flex-start; gap: 7px; min-height: 48px; min-width: 200px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--accent-d); border-color: var(--accent-d); }
.hero-btn .ico { width: 17px; height: 17px; }
.hero-side { flex: 1 1 auto; min-width: 0; padding-left: 32px; border-left: 1px solid var(--accent-line); }

/* 할 일 줄(「할 일 한 줄」 183:136) — 제목 · 설명 · 기한, 급한 것만 빨강 */
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; }
.todo-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
a.todo-row:hover b { text-decoration: underline; }
.todo-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.todo-text b { font-size: 14px; font-weight: 500; color: var(--ink); }
.todo-text small { font-size: 12px; color: var(--sub); }
.todo-due { flex: none; font-size: 12px; color: var(--text); white-space: nowrap; }
.todo-due.urgent { font-weight: 700; color: var(--accent-ink); }
.card > .todo-list { margin-top: -12px; }

/* 숫자 띠(「숫자 카드 · 보통」 183:194) — 흰 판 하나 안에 세로선으로 나눈다 */
.kpi-band { display: grid; gap: 0; padding: 24px 28px; }
.kpi-band.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-band.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; }
.kc { min-width: 0; display: grid; gap: 10px; align-content: center; padding: 4px 0 4px 24px; border-left: 1px solid var(--line); color: inherit; text-decoration: none; }
.cols-2 .kc:nth-child(2n+1), .cols-3 .kc:first-child { padding-left: 0; border-left: 0; }
.cols-2 .kc:nth-child(2n) { padding-left: 24px; }
.cols-2 .kc:nth-child(n+3) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.cols-2 .kc:nth-child(n+3):nth-child(2n) { border-left: 1px solid var(--line); }
a.kc:hover .kc-label { color: var(--ink); }
.kc-label { font-size: 13px; color: var(--sub); }
.kc-val { display: flex; align-items: baseline; gap: 2px; color: var(--ink); }
.kc-val b { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kc-val span { font-size: 18px; font-weight: 500; }
.kc-sub { font-size: 12px; color: var(--sub); }

/* 「단체 신청 단계」 — 흐름 칸 + 멈춤 · 끝남 줄(한 줄 쌓인 막대가 아니다 — 사장님 피드백) */
.stage-cap { margin: 0 0 -6px; font-size: 12px; font-weight: 500; color: var(--sub); }
.flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 8px; }
.flow li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.flow li + li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 4px 0 1px; border-top: 1.5px solid var(--dim); border-right: 1.5px solid var(--dim); transform: rotate(45deg); }
.flow a { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--soft); color: inherit; text-decoration: none; }
.flow a:hover { background: var(--board); }
.flow-label { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; }
.flow-n { display: flex; align-items: baseline; gap: 2px; color: var(--ink); }
.flow-n b { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.flow-n span { font-size: 16px; font-weight: 500; }
.stopped { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.stopped a { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; text-decoration: none; }
.stopped a span { flex: 1 1 auto; }
.stopped b { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stopped .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }

/* 카드 안 표(「데이터 표」) — 머리줄은 옅은 판, 줄은 얇은 선 */
.card .table-wrap { border: 0; border-radius: 0; }
.card .tbl { font-size: 14px; }
.card .tbl thead th { background: var(--soft); font-size: 12px; font-weight: 400; color: var(--sub); border-bottom: 0; padding: 9px 12px; }
.card .tbl thead th:first-child { border-radius: 8px 0 0 8px; }
.card .tbl thead th:last-child { border-radius: 0 8px 8px 0; }
.card .tbl td { padding: 14px 12px; color: var(--ink); }
.card .tbl tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.card .tbl .g-tag { margin-left: 6px; }
.resort-cell { display: grid; gap: 3px; text-decoration: none; color: var(--ink); }
.resort-cell b { font-size: 14px; font-weight: 500; }
.resort-cell small { font-size: 12px; color: var(--sub); }
.card > .hint { margin: 0; font-size: 13px; color: var(--sub); }

/* 자료가 아직 없는 칸 — 「준비 중」 */
.soon-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); }
.soon-chip { padding: 3px 8px; border-radius: 6px; background: var(--soft); color: var(--text); font-size: 12px; font-weight: 500; }

/* 작은 달력(「한 달 달력」 233:10049) — 날마다 입실 단체 · 개인 수 */
.mm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mm-head .card-head { flex: 1 1 auto; }
.mm-nav { flex: none; display: flex; align-items: center; gap: 8px; }
.mm-nav b { min-width: 30px; text-align: center; font-size: 14px; color: var(--ink); }
.mm-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
.mm-grid { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; font-variant-numeric: tabular-nums; }
.mm-grid th { padding: 0 0 8px; font-size: 12px; font-weight: 400; color: var(--sub); }
.mm-grid th.sun { color: var(--accent-ink); }
.mm-grid th.sat { color: var(--st-tentative); }
.mm-grid td { height: 46px; padding: 2px 0; vertical-align: top; }
.mm-day { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 11px; font-size: 13px; color: var(--text); }
.mm-grid td.out .mm-day { color: var(--dim); }
.mm-grid td.today .mm-day { background: var(--accent-d); color: var(--white); font-weight: 700; }
.mm-dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.mm-dots i, .mm-legend i { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--bk); color: var(--white); font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; }
.mm-legend { margin: 0; display: flex; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--sub); }
.mm-legend i { min-width: 10px; height: 10px; padding: 0; border-radius: 3px; }
.mm-legend i + * { margin-right: 6px; }

/* 객실 사용 · 부대시설(아래쪽) */
.room-tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.room-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; min-width: 0; }
.room-tile b { color: var(--ink); font-size: 14px; }
.room-tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: inherit; }
.room-tile .bk-chip { justify-self: start; }
.fac-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.fac-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.fac-list b { color: var(--ink); }
/* 잔금 · 미결제(035) */
tr.row-alert td { background: color-mix(in srgb, var(--err) 6%, transparent); }

@media (max-width: 1180px) {
  .home-row-hero, .home-row-hero-s, .home-row-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .home { gap: 16px; }
  .home-row { gap: 16px; }
  .home-head h1 { font-size: 22px; }
  .card { padding: 20px 16px; }
  .hero { flex-direction: column; gap: 20px; padding: 24px 20px; }
  .hero-list .hero-main { width: 100%; }
  .hero-num b { font-size: 52px; }
  .hero-btn { align-self: stretch; }
  .hero-side { padding: 0; border-left: 0; border-top: 1px solid var(--accent-line); }
  .kpi-band { padding: 20px 16px; }
  .cols-3 .kc { padding-left: 12px; }
  .cols-2 .kc:nth-child(2n) { padding-left: 16px; }
  .kc-val b { font-size: 26px; }
  .flow { flex-wrap: wrap; }
  .flow li { flex: 1 1 calc(33.333% - 8px); }
  .flow li + li::before { display: none; }
  .flow-n b { font-size: 24px; }
  .stopped { grid-template-columns: minmax(0, 1fr); }
}