/* Onyx — dark hospitality desk. Serif display, champagne accent, hairline structure. */
body{--font-ui:'Geist';--font-serif:'Instrument Serif';--font-mono:'Plex Mono';--bg:#0f0e0c;--surface:#151311;--raised:#1c1916;--field:#1c1916;--text:#ece5d8;--muted:#978d7d;--line:#2a2621;--line-strong:#3a352e;--accent:#d4b273;--gold:#d4b273;--gold-deep:#a8894e;--gold-soft:rgba(212,178,115,.13);--ok:#9dc4a0;--warn:#d9a15b;--danger:#d97b6f;--info:#8fb3c9;--radius-sm:6px;--radius-lg:14px;--hover:rgba(236,229,216,.06);--focus:#d4b273;--backdrop:rgba(0,0,0,.6);--toast-bg:#ece5d8;--toast-text:#0f0e0c;--toast-icon:#6f8c58;color-scheme:dark;font-family:'Geist','Pretendard',sans-serif}
h1,.o-big,.o-brand,.o-date,.o-hero-caption em{font-family:var(--font-serif),'Pretendard',serif;font-weight:400}
.muted{color:var(--muted)}
::selection{background:var(--gold);color:#0f0e0c}

/* top */
.o-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:62px;padding:0 28px;border-bottom:1px solid var(--line)}
.o-brand{font-size:26px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:12px}
.o-brand span{font:500 10px 'Geist',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.o-date{font-size:17px;color:var(--text);text-align:center}
.o-date em{color:var(--gold)}
.o-date span{color:var(--muted)}
.o-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.o-cmd{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:12.5px;transition:border-color .15s,color .15s}
.o-cmd:hover{border-color:var(--line-strong);color:var(--text)}
.o-cmd .icon{width:15px;height:15px}
.o-cmd kbd{font:11px var(--font-mono),monospace;opacity:.8}
.o-bell{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--muted)}
.o-bell:hover{background:var(--hover);color:var(--text)}
.o-bell i{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.o-user{display:flex;align-items:center;gap:10px}
.o-user strong{display:block;font-size:13px;font-weight:500}
.o-user small{display:block;font-size:11px;color:var(--muted)}
.o-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gold-soft);color:var(--gold);font:500 12px var(--font-mono),monospace;border:1px solid rgba(212,178,115,.35)}

/* frame */
.o-frame{display:grid;grid-template-columns:200px 1fr;min-height:calc(100dvh - 62px)}
.o-nav{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;padding:34px 0 28px 28px;border-right:1px solid var(--line);height:calc(100dvh - 62px)}
.o-nav a[data-route]{display:flex;align-items:baseline;gap:12px;padding:11px 0;font-size:15px;color:var(--muted);transition:color .15s;position:relative}
.o-nav a[data-route]:hover{color:var(--text)}
.o-nav a[data-route].active{color:var(--text)}
.o-nav a[data-route].active::after{content:'';position:absolute;right:-1px;top:8px;bottom:8px;width:2px;background:var(--gold)}
.o-nav-n{font:400 11px var(--font-mono),monospace;color:var(--gold-deep);letter-spacing:.06em}
.o-nav a[data-route].active .o-nav-n{color:var(--gold)}
.o-nav-today{margin-top:auto;padding:16px 20px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.o-nav-today strong{color:var(--text);font-weight:500}
.o-nav-note{font-size:11.5px;margin-top:6px}
.o-nav-back{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:12px;color:var(--muted)}
.o-nav-back:hover{color:var(--text)}
.o-nav-back .icon{width:14px;height:14px}
.o-main{outline:0;min-width:0}
.o-page{padding:38px 40px 70px;max-width:1440px}
.o-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
h1{font-size:40px;line-height:1.05;letter-spacing:-.01em}
.o-lead{max-width:560px;margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.7;text-wrap:pretty}
.o-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* buttons */
.o-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;border:1px solid var(--line-strong);background:var(--raised);font-size:13px;font-weight:500;color:var(--text);transition:background .15s,border-color .15s,transform .1s}
.o-btn .icon{width:15px;height:15px}
.o-btn:hover{border-color:#57503f}
.o-btn:active{transform:translateY(1px)}
.o-btn.primary{background:var(--gold);border-color:var(--gold);color:#17140e}
.o-btn.primary:hover{background:#e2c48a;border-color:#e2c48a}
.o-btn.ghost{background:transparent}
.o-btn.tiny{padding:4px 9px;font-size:11.5px;border-color:transparent;color:var(--muted)}
.o-btn.tiny:hover{color:var(--danger);border-color:var(--line-strong)}
.o-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-strong);color:var(--muted)}
.o-icon:hover:not(:disabled){color:var(--text);background:var(--hover)}
.o-pager{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text)}

/* hero */
.o-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;padding-bottom:30px;border-bottom:1px solid var(--line)}
.o-big{font-size:104px;line-height:.9;letter-spacing:-.03em;margin-top:6px;display:flex;align-items:baseline}
.o-big small{font-size:32px;color:var(--gold);margin-left:6px}
.o-big.small{font-size:72px}
.o-big.small small:first-child{margin:0 8px 0 0}
.o-hero-caption{margin-top:14px;font-size:14px;color:var(--muted);max-width:420px;line-height:1.6}
.o-hero-caption em{font-style:italic;font-size:19px;color:var(--text)}
.o-hero-caption em.up{color:var(--ok)}.o-hero-caption em.down{color:var(--danger)}
.o-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.o-stats>div{padding:4px 18px 0;border-left:1px solid var(--line)}
.o-stats dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.o-stats dd{margin:6px 0 0;font:400 30px var(--font-serif),serif;letter-spacing:-.01em;line-height:1.1}
.o-stats dd small{font-size:16px;color:var(--gold);margin-left:2px}
.o-stats>div>small{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.o-stats.compact{grid-template-columns:repeat(3,1fr)}

/* rack */
.o-split{display:grid;grid-template-columns:1fr 320px;gap:36px;margin-top:30px}
.o-rack-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.o-rack-head h2,.o-aside-head h2,.o-card-head h2{font-size:15px;font-weight:500;letter-spacing:-.005em}
.o-seg{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.o-seg button{padding:5px 11px;border-radius:5px;font:500 12px var(--font-mono),monospace;color:var(--muted)}
.o-seg button[aria-pressed=true]{background:var(--raised);color:var(--gold);box-shadow:0 0 0 1px var(--line-strong)}
.o-floor{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.o-floor-label strong{display:block;font:400 22px var(--font-serif),serif;color:var(--text)}
.o-floor-label small{font-size:11px;color:var(--muted)}
.o-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.o-tile{position:relative;display:grid;gap:3px;align-content:start;min-height:66px;padding:9px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);text-align:left;transition:transform .12s,border-color .15s,background .15s}
.o-tile:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.o-tile-no{font-size:12px;color:var(--muted)}
.o-tile-guest{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-tile-guest.muted{font-weight:400}
.o-tile-eta{position:absolute;top:8px;right:9px;font-size:10px;color:var(--gold)}
.icon.vip{width:11px;height:11px;color:var(--gold);fill:var(--gold);flex-shrink:0}
.o-tile.occupied{background:linear-gradient(180deg,rgba(212,178,115,.16),rgba(212,178,115,.08));border-color:rgba(212,178,115,.35)}
.o-tile.occupied .o-tile-no{color:var(--gold)}
.o-tile.arriving{border-style:dashed;border-color:rgba(212,178,115,.55)}
.o-tile.departing{background:rgba(143,179,201,.1);border-color:rgba(143,179,201,.35)}
.o-tile.departing .o-tile-no{color:var(--info)}
.o-tile.cleaning{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(217,161,91,.12) 5px 10px);border-color:rgba(217,161,91,.35)}
.o-tile.maintenance{background:#141210;border-color:#241f1a;color:var(--muted)}
.o-tile.maintenance .o-tile-no{text-decoration:line-through}
.o-tile.vacant{background:transparent}
.o-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;font-size:12px;color:var(--muted)}
.o-legend span{display:flex;align-items:center;gap:7px}
.o-legend b{font-weight:500;color:var(--text)}
.o-legend i{width:14px;height:10px;border-radius:2px;border:1px solid var(--line-strong)}
.o-legend i.occupied{background:rgba(212,178,115,.3);border-color:rgba(212,178,115,.5)}.o-legend i.arriving{border-style:dashed;border-color:rgba(212,178,115,.6)}.o-legend i.departing{background:rgba(143,179,201,.25)}.o-legend i.cleaning{background:repeating-linear-gradient(135deg,transparent 0 2px,rgba(217,161,91,.5) 2px 4px)}.o-legend i.maintenance{background:#141210}.o-legend i.vacant{background:transparent}
.o-legend i.bar{background:var(--gold);border:0;height:12px;width:8px}.o-legend i.bar.weekend{background:var(--gold-deep)}
.o-arrivals{border-left:1px solid var(--line);padding-left:28px}
.o-aside-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.o-aside-head span{font:400 26px var(--font-serif),serif;color:var(--gold)}
.o-arrivals li button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);transition:color .15s}
.o-arrivals li button:hover{color:var(--text)}
.o-arrivals li button .icon{width:14px;height:14px}
.o-time{font-size:12px;color:var(--gold)}
.o-arr-main{display:grid;gap:2px;min-width:0}
.o-arr-main strong{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:var(--text)}
.o-arr-main small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-empty{padding:26px 0;font-size:13px;color:var(--muted);line-height:1.6}
.o-aside-note{margin-top:22px;padding:16px;border-radius:10px;background:var(--surface);font-size:12.5px;color:var(--muted);line-height:1.6}
.o-aside-note strong{color:var(--text)}

/* drawer content */
.o-state{display:inline-block;padding:4px 9px;border-radius:4px;font-size:11.5px;font-weight:500;letter-spacing:.02em;background:var(--raised);border:1px solid var(--line-strong)}
.o-state.occupied{color:var(--gold);border-color:rgba(212,178,115,.4)}.o-state.arriving{color:var(--gold);border-style:dashed}.o-state.departing{color:var(--info)}.o-state.cleaning{color:var(--warn)}.o-state.maintenance{color:var(--muted)}.o-state.vacant{color:var(--ok)}
.o-guest{display:flex;align-items:center;gap:14px;margin-top:18px}
.o-guest strong{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:500;font-family:var(--font-serif),serif}
.o-guest small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.o-guest-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--gold-soft);color:var(--gold);font:400 22px var(--font-serif),serif;flex-shrink:0}
.o-guest-avatar.small{width:32px;height:32px;font-size:16px;border-radius:8px}
.o-vip{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;font:500 10px 'Geist',sans-serif;letter-spacing:.08em;background:var(--gold);color:#17140e}
.o-vip .icon{width:10px;height:10px;fill:currentColor}
.o-drawer-note{margin-top:16px;color:var(--muted);font-size:13px}
.o-kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:22px 0 0;font-size:13.5px}
.o-kv dt{color:var(--muted);font-size:12px;padding-top:2px}
.o-kv dd{margin:0}
.o-kv dd small{color:var(--muted)}
.o-drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.o-inline-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.o-drawer-lead{font-size:14px;color:var(--muted)}
.o-drawer-lead strong{font:400 22px var(--font-serif),serif;color:var(--text)}
.o-booking-list{display:grid;margin-top:14px}
.o-booking-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.o-booking-list strong{display:block;font-size:13.5px;font-weight:500}
.o-booking-list small{font-size:11.5px;color:var(--muted)}
.o-quote{padding:12px 14px;border-radius:8px;background:var(--gold-soft);font-size:13px;color:var(--muted);margin-bottom:8px}
.o-quote strong{font:400 18px var(--font-serif),serif;color:var(--gold)}
.o-notices{display:grid;gap:14px}
.o-notices li{display:flex;gap:12px;align-items:flex-start}
.o-notices strong{display:block;font-size:13.5px;font-weight:500}
.o-notices small{color:var(--muted);font-size:12px}
.o-notice-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--raised);color:var(--gold)}

/* calendar */
.o-cal-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.o-cal{min-width:860px;table-layout:fixed}
.o-cal th,.o-cal td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0}
.o-cal th:last-child,.o-cal td:last-child{border-right:0}
.o-cal thead th{padding:12px 10px;text-align:center;font-weight:500;color:var(--muted);background:var(--raised)}
.o-cal thead th:first-child{text-align:left;padding-left:18px;width:190px}
.o-cal thead th .mono{display:block;font-size:13px;color:var(--text)}
.o-cal thead th small{font-size:11px}
.o-cal thead th.weekend{background:#221e19}
.o-cal thead th.today .mono{color:var(--gold)}
.o-cal tbody th{text-align:left;padding:14px 18px;font-weight:400}
.o-cal tbody th strong{display:block;font:400 18px var(--font-serif),serif}
.o-cal tbody th small{font-size:11px;color:var(--muted)}
.o-cell{display:grid;place-content:center;width:100%;height:74px;background:color-mix(in srgb,var(--gold) calc(var(--p) * 42%),transparent);color:var(--text);transition:box-shadow .15s;font-size:18px}
.o-cell b{font:400 22px var(--font-serif),serif}
.o-cell small{font-size:11px;color:var(--muted)}
.o-cell:hover{box-shadow:inset 0 0 0 2px var(--gold)}
.o-cell.full b{color:var(--gold)}
.o-cell.full::after{content:'FULL';font:500 9px 'Geist',sans-serif;letter-spacing:.14em;color:var(--gold);text-align:center;margin-top:2px}
.o-cal-total th,.o-cal-total td{background:var(--raised);border-bottom:0}
.o-total{display:grid;gap:6px;padding:12px 12px;text-align:center}
.o-total b{font:400 20px var(--font-serif),serif}
.o-total b small{font-size:12px;color:var(--muted)}
.o-total i{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold) calc(var(--p) * 100%),var(--line) 0)}
.o-cal-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.o-scale{display:flex;align-items:center;gap:4px}
.o-scale i{width:18px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--gold) calc(var(--p) * 42%),var(--surface));border:1px solid var(--line)}
.o-scale i:last-of-type{margin-right:6px}

/* revenue */
.o-rev-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.o-rev-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:26px}
.o-card{padding:22px 24px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.o-card.wide{grid-column:span 1}
.o-card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.o-card-head small{font-size:11.5px;color:var(--muted)}
.o-bars{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;height:180px;align-items:end;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.o-bar-col{position:relative;height:100%;display:flex;align-items:flex-end}
.o-bar-col i{width:100%;height:var(--h);background:var(--gold);border-radius:2px 2px 0 0;opacity:.9;transition:opacity .15s}
.o-bar-col i.weekend{background:var(--gold-deep)}
.o-bar-col:hover i{opacity:1}
.o-bar-col small{position:absolute;top:100%;left:0;margin-top:6px;font-size:10px;color:var(--muted)}
.o-bars+.o-legend{margin-top:30px}
.o-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.o-stack i{width:var(--w)}
.c0{background:var(--gold)}.c1{background:#8fb3c9}.c2{background:#9dc4a0}.c3{background:#c9a9d6}
.o-channel{display:grid;gap:10px;margin-top:18px}
.o-channel li{display:flex;align-items:center;gap:10px;font-size:13px}
.o-channel i{width:10px;height:10px;border-radius:3px}
.o-channel b{margin-left:auto;font-weight:500}
.o-card-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
.o-table-wrap{overflow-x:auto}
.o-table th,.o-table td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px}
.o-table th{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.o-table tr:last-child td{border-bottom:0}
.o-table .r{text-align:right}

.s-dialog,.s-drawer{background:var(--surface)}
.s-dialog-head h2,.s-drawer-head h2{font:400 24px var(--font-serif),serif}
.s-field input,.s-field select,.s-field textarea{background:var(--field)}

/* responsive */
@media (max-width:1240px){.o-split{grid-template-columns:1fr}.o-arrivals{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}.o-rev-grid{grid-template-columns:1fr}.o-stats{grid-template-columns:repeat(2,1fr);row-gap:18px}.o-hero{grid-template-columns:1fr}}
@media (max-width:900px){
  .o-top{grid-template-columns:1fr auto;height:58px;padding:0 16px}.o-date{display:none}.o-user span:last-child{display:none}.o-cmd span{display:none}
  .o-frame{grid-template-columns:1fr}
  .o-nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 4px;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .o-nav a[data-route]{padding:10px 10px;font-size:13.5px}
  .o-nav a[data-route].active::after{right:auto;left:10px;right:10px;top:auto;bottom:0;height:2px;width:auto}
  .o-nav-today,.o-nav-back{display:none}
  .o-page{padding:24px 16px 56px}h1{font-size:32px}.o-big{font-size:72px}.o-big.small{font-size:56px}
  .o-stats>div{padding-left:12px}
  .o-floor{grid-template-columns:44px 1fr}.o-floor-label strong{font-size:18px}.o-floor-label small{display:none}
  .o-tiles{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .o-bars{gap:2px}
}