/* 소서제주 관리 — 기존 예약현황 페이지의 디자인 토큰을 그대로 사용 */
html[data-theme="light"] {
  --color-background-primary:#ffffff; --color-background-secondary:#f3f1ea; --color-background-tertiary:#faf9f5;
  --color-background-success:#e3f3e8; --color-background-info:#e6f1fb; --color-background-warning:#fff8ec;
  --color-text-primary:#1c1b18; --color-text-secondary:#6c6b64; --color-text-tertiary:#9a988f;
  --color-text-success:#0f6e56; --color-text-info:#185fa5; --color-text-warning:#b37200;
  --color-border-tertiary:rgba(0,0,0,0.10); --color-border-secondary:rgba(0,0,0,0.18);
}
html[data-theme="dark"] {
  --color-background-primary:#26251f; --color-background-secondary:#302f28; --color-background-tertiary:#1c1b16;
  --color-background-success:#133a2f; --color-background-info:#14304a; --color-background-warning:#3a2f14;
  --color-text-primary:#ecebe3; --color-text-secondary:#aaa89e; --color-text-tertiary:#807e74;
  --color-text-success:#5dcaa5; --color-text-info:#85b7eb; --color-text-warning:#e0b25a;
  --color-border-tertiary:rgba(255,255,255,0.12); --color-border-secondary:rgba(255,255,255,0.22);
}
:root { --border-radius-md:8px; --border-radius-lg:12px; }
* { box-sizing:border-box; }
body {
  margin:0; background:var(--color-background-tertiary); color:var(--color-text-primary);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", Roboto, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;
}
.page { max-width:840px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.muted { color:var(--color-text-tertiary); font-size:13px; padding:6px 0; }
i.ti { vertical-align:-2px; }

/* 공통 버튼 */
.tbtn {
  display:inline-flex; align-items:center; gap:6px; background:transparent;
  border:0.5px solid var(--color-border-secondary); color:var(--color-text-secondary);
  padding:7px 13px; border-radius:var(--border-radius-md); font-size:12.5px; cursor:pointer;
  white-space:nowrap; font-family:inherit; text-decoration:none;
}
.tbtn:hover { background:var(--color-background-secondary); }
.tbtn[disabled] { cursor:default; opacity:.85; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:0.5px solid var(--color-border-secondary); background:var(--color-background-secondary);
  color:var(--color-text-primary); padding:10px 16px; border-radius:var(--border-radius-md);
  font-size:13.5px; font-family:inherit; text-decoration:none;
}
.btn.primary { background:var(--color-text-success); border-color:transparent; color:#fff; font-weight:500; }
.btn.block { width:100%; }

/* 상단바 */
.topbar {
  max-width:840px; margin:0 auto; padding:1.1rem 1.25rem 0.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--color-text-primary); }
.brand-mark {
  width:30px; height:30px; border-radius:8px; background:var(--color-text-success); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
}
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:15px; font-weight:600; }
.brand-text em { font-size:11px; font-style:normal; color:var(--color-text-tertiary); }
.topbar-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* 플래시 */
.flash { max-width:840px; margin:10px auto 0; padding:10px 14px; border-radius:var(--border-radius-md); font-size:13px; }
.flash.ok  { background:var(--color-background-success); color:var(--color-text-success); }
.flash.err { background:var(--color-background-warning); color:var(--color-text-warning); }
.flash.inline { margin:0 0 12px; }

/* 헤더 */
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:1.25rem; }
.head-title { font-size:22px; font-weight:500; }
.head-meta { font-size:13px; color:var(--color-text-tertiary); margin-top:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmeta { display:inline-flex; align-items:center; gap:4px; }
.cbadge {
  display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px;
  border-radius:3px; font-size:10px; font-weight:500; color:#fff; flex:none;
}
.cbadge.naver { background:#03C75A; }
.cbadge.stay  { background:var(--color-text-primary); color:var(--color-background-primary); }
.cbadge.etc   { background:var(--color-text-tertiary); }

/* 요약 카드 */
.sum-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:1.75rem; }
.sum-card { background:var(--color-background-secondary); border-radius:var(--border-radius-md); padding:0.85rem; }
.sum-card.success { background:var(--color-background-success); }
.sum-label { font-size:12px; color:var(--color-text-secondary); }
.sum-card.success .sum-label { color:var(--color-text-success); }
.sum-num { font-size:22px; font-weight:500; margin-top:4px; }
.sum-card.success .sum-num { color:var(--color-text-success); }
.sum-num.sm { font-size:20px; }
.sum-num span { font-size:12px; color:var(--color-text-tertiary); margin-left:1px; }
.sum-card.success .sum-num span { color:var(--color-text-success); }

/* 섹션 타이틀 */
.sec-title { font-size:14px; font-weight:500; color:var(--color-text-secondary); margin:0 0 10px; }

/* 점유 타임라인 */
.timeline { position:relative; height:62px; background:var(--color-background-secondary); border-radius:var(--border-radius-md); margin-bottom:6px; }
.tl-grid { position:absolute; top:0; bottom:0; width:0.5px; background:var(--color-border-secondary); }
.tl-seg { position:absolute; top:28px; height:22px; min-width:7px; border-radius:4px; background:var(--color-text-success); opacity:0.85; }
.tl-seg.stay { background:var(--color-text-primary); opacity:0.7; }
.tl-seg.etc  { background:var(--color-text-info); opacity:0.8; }
.tl-axis { position:relative; height:16px; margin-bottom:1.75rem; font-size:11px; color:var(--color-text-tertiary); }
.tl-axis span { position:absolute; top:0; white-space:nowrap; transform:translateX(2px); }
.tl-axis span.end { transform:none; }

/* 통계 */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-bottom:1.75rem; }
.stat-box { background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:0.9rem 1rem; }
.stat-h { font-size:13px; font-weight:500; color:var(--color-text-secondary); margin-bottom:10px; }
.bar-row { display:flex; align-items:center; gap:8px; font-size:12px; margin:5px 0; }
.bar-k { width:98px; flex:none; color:var(--color-text-secondary); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-k .cbadge { flex:none; }
.bar-track { flex:1; min-width:34px; height:8px; background:var(--color-background-secondary); border-radius:5px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--color-text-success); border-radius:5px; }
.bar-fill.stay { background:var(--color-text-primary); opacity:.65; }
.bar-fill.etc  { background:var(--color-text-info); }
.bar-v { flex:none; min-width:48px; text-align:right; color:var(--color-text-tertiary); white-space:nowrap; }
.bar-row.simple { justify-content:space-between; }
.bar-row.simple .bar-k { width:auto; }
.bar-row.top-line { border-top:0.5px solid var(--color-border-tertiary); padding-top:7px; margin-top:8px; }

/* 예약 상세 카드 */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:12px; margin-bottom:1.5rem; }
.bk-card { background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:0.9rem 1rem; }
.bk-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bk-ava { width:36px; height:36px; border-radius:50%; background:var(--color-background-info); color:var(--color-text-info); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; flex:none; }
.bk-id { flex:1; min-width:0; }
.bk-name { font-size:15px; font-weight:500; }
.bk-chan { font-size:11.5px; color:var(--color-text-tertiary); display:flex; align-items:center; gap:4px; margin-top:1px; }
.bk-status { font-size:11px; padding:3px 9px; border-radius:var(--border-radius-md); flex:none; background:var(--color-background-success); color:var(--color-text-success); }
.bk-status.cancelled { background:var(--color-background-warning); color:var(--color-text-warning); }
.bk-when { font-size:13px; color:var(--color-text-secondary); margin-bottom:6px; }
.bk-phone { font-size:13px; color:var(--color-text-secondary); margin-bottom:6px; }
.bk-phone a { color:var(--color-text-info); text-decoration:none; }
.bk-phone a:hover { text-decoration:underline; }
.bk-facts { display:flex; gap:14px; font-size:13px; color:var(--color-text-secondary); margin-bottom:8px; flex-wrap:wrap; }
.bk-note { font-size:11px; color:var(--color-text-tertiary); background:var(--color-background-secondary); padding:6px 8px; border-radius:var(--border-radius-md); margin-bottom:6px; line-height:1.5; }
.bk-warn { font-size:11px; color:var(--color-text-warning); background:var(--color-background-warning); padding:6px 8px; border-radius:var(--border-radius-md); margin-bottom:8px; line-height:1.5; }
.bk-foot { border-top:0.5px solid var(--color-border-tertiary); padding-top:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bk-amt { font-size:16px; font-weight:500; }
.bk-amt span { font-size:12px; color:var(--color-text-tertiary); }
.bk-right { display:inline-flex; align-items:center; gap:10px; }
.bk-pay { font-size:11px; color:var(--color-text-tertiary); white-space:nowrap; }
.bk-del { margin:0; }
.bk-del button { background:none; border:0; color:var(--color-text-tertiary); cursor:pointer; padding:2px; font-size:15px; line-height:1; }
.bk-del button:hover { color:var(--color-text-warning); }

/* 새 예약 추가 */
.add-box { background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:0.6rem 1rem; }
.add-box summary { cursor:pointer; font-size:13.5px; font-weight:500; color:var(--color-text-secondary); list-style:none; padding:4px 0; }
.add-box summary::-webkit-details-marker { display:none; }
.add-form { padding-top:10px; display:flex; flex-direction:column; gap:10px; }
.fld { display:flex; flex-direction:column; gap:4px; }
.fld.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fld label, .fld.row2 > div > label { font-size:12px; color:var(--color-text-secondary); }
.fld.row2 > div { display:flex; flex-direction:column; gap:4px; }
.add-form input {
  font-family:inherit; font-size:14px; padding:9px 11px; border-radius:var(--border-radius-md);
  border:0.5px solid var(--color-border-secondary); background:var(--color-background-tertiary); color:var(--color-text-primary);
}
.add-form .btn.primary { margin-top:4px; align-self:flex-start; }

/* 로그인 */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.25rem; }
.login-card { width:100%; max-width:340px; background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:1.75rem 1.5rem; }
.login-brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:600; margin-bottom:1.25rem; }
.login-brand .brand-mark { width:28px; height:28px; }
.login-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 16px; border:1px solid #dadce0; border-radius:8px; background:#fff; color:#3c4043; font-size:14px; font-weight:600; text-decoration:none; }
.login-google:hover { background:#f7f8f8; box-shadow:0 1px 3px rgba(60,64,67,.15); }
.login-or { margin:16px 0 12px; text-align:center; color:var(--color-text-tertiary); font-size:12.5px; }
.login-hint { margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--color-text-tertiary); }
.login-hint b { color:var(--color-text-secondary); }
.login-form { display:flex; flex-direction:column; gap:10px; }
.login-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--color-text-secondary); }
.login-form input { font-family:inherit; font-size:14px; padding:10px 12px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-secondary); background:var(--color-background-tertiary); color:var(--color-text-primary); }
.login-form button { margin-top:4px; padding:11px; border:0; border-radius:var(--border-radius-md); background:var(--color-text-success); color:#fff; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; }