@font-face {
    font-family: "Pretendard";
    src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root,
html[data-theme="light"] {
    color-scheme: light;
    --page-bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f3f4f6;
    --border: #e5e7eb;
    --border-strong: #d7dde7;
    --text: #111827;
    --text-sub: #6b7280;
    --text-soft: #94a3b8;
    --primary: #2563eb;
    --primary-strong: #155eef;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-float: 0 18px 48px rgba(15, 23, 42, 0.14);
    --overlay: rgba(15, 23, 42, 0.36);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0b1220;
    --surface: #0f172a;
    --surface-soft: #111b2a;
    --surface-muted: #172033;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #ffffff;
    --text-sub: #cbd5e1;
    --text-soft: #94a3b8;
    --primary: #3b82f6;
    --primary-strong: #2563eb;
    --shadow-card: none;
    --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.36);
    --overlay: rgba(2, 6, 23, 0.62);
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Pretendard", "Malgun Gothic", Arial, sans-serif !important;
}

body {
    background: var(--page-bg) !important;
    color: var(--text) !important;
}

/* Dashboard */
.dashboard-page {
    width: 100%;
    min-height: 100vh;
    padding: clamp(18px, 2.6vw, 40px) !important;
    padding-bottom: 104px !important;
    background: var(--page-bg) !important;
}

.dashboard-header {
    padding: 0 !important;
    margin-bottom: 24px !important;
}

.dashboard-title-wrap .eyebrow,
.dashboard-header .eyebrow,
.brand-label {
    color: var(--primary) !important;
}

.dashboard-title-wrap h1,
.dashboard-header h1 {
    margin: 8px 0 14px !important;
    color: var(--text) !important;
    font-size: clamp(28px, 2.4vw, 38px) !important;
    font-weight: 750 !important;
    letter-spacing: -0.045em !important;
}

.dashboard-time-wrap .date,
.dashboard-time-wrap .clock,
.date,
.clock {
    color: var(--text) !important;
}

.dashboard-time-wrap .date {
    color: var(--text-sub) !important;
}

.dashboard-logout-btn {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.pms-status-chip,
.status-chip {
    border: 0 !important;
    box-shadow: none !important;
}

.pms-status-chip.online,
.status-chip.online {
    color: #059669 !important;
    background: #e8f8f2 !important;
}

.pms-status-chip.stale,
.status-chip.stale {
    color: #b7791f !important;
    background: #fff7df !important;
}

.pms-status-chip.offline,
.status-chip.offline {
    color: #dc2626 !important;
    background: #feecec !important;
}

.summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.summary-card {
    min-height: 116px !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card) !important;
}

.summary-card span {
    color: var(--text) !important;
    font-weight: 600 !important;
}

.summary-card strong {
    margin-top: 11px !important;
    color: var(--text) !important;
    font-size: 32px !important;
    font-weight: 750 !important;
}

.summary-card .yellow { color: #f59e0b !important; }
.summary-card .blue { color: #2563eb !important; }
.summary-card .muted { color: #64748b !important; }

.floor-tabs {
    gap: 10px !important;
    margin-bottom: 22px !important;
}

.floor-tabs button {
    min-width: 76px !important;
    height: 42px !important;
    padding: 0 20px !important;
    background: var(--surface-muted) !important;
    color: var(--text) !important;
    border: 0 !important;
    font-weight: 650 !important;
}

.floor-tabs button.active {
    color: #ffffff !important;
    background: var(--primary) !important;
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.18) !important;
}

.room-grid,
.floor-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    gap: 16px !important;
}

.room-card {
    min-height: 150px !important;
    padding: 20px 22px !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 4px !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}

.room-card:hover {
    filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
}

.room-card .room-no {
    color: var(--text) !important;
    font-size: 30px !important;
    font-weight: 750 !important;
}

.room-card .room-type,
.room-card .room-time,
.room-info-line {
    color: var(--text-sub) !important;
}

.room-menu-btn {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-sub) !important;
    border-radius: 50% !important;
}

.room-menu-btn:hover {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}

.room-card.room-empty,
.room-card.room-rent-ready,
.room-card.room-stay-ready,
.room-card.room-ready,
.room-card.room-reserved,
.room-card.room-rent-use,
.room-card.room-stay-use,
.room-card.room-use,
.room-card.room-long,
.room-card.room-clean-wait,
.room-card.room-cleaning,
.room-card.room-unknown {
    background: var(--surface) !important;
}

.room-card.room-empty { border-left-color: #94a3b8 !important; }
.room-card.room-rent-ready { border-left-color: #10b981 !important; }
.room-card.room-stay-ready,
.room-card.room-ready { border-left-color: #7c3aed !important; }
.room-card.room-reserved { border-left-color: #ec4899 !important; }
.room-card.room-rent-use { border-left-color: #38bdf8 !important; }
.room-card.room-stay-use,
.room-card.room-use { border-left-color: #2563eb !important; }
.room-card.room-long { border-left: 6px solid #ef4444 !important; }
.room-card.room-clean-wait { border-left-color: #f59e0b !important; }
.room-card.room-cleaning { border-left-color: #ef4444 !important; }

.room-card .room-badge,
.room-card .room-badge.inline {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.room-card.room-empty .room-badge { color: #475569 !important; background: #eef2f6 !important; }
.room-card.room-rent-ready .room-badge { color: #059669 !important; background: #e8f8f2 !important; }
.room-card.room-stay-ready .room-badge,
.room-card.room-ready .room-badge { color: #7c3aed !important; background: #f0eaff !important; }
.room-card.room-reserved .room-badge { color: #ec4899 !important; background: #fdeaf2 !important; }
.room-card.room-rent-use .room-badge { color: #0284c7 !important; background: #e8f6fd !important; }
.room-card.room-stay-use .room-badge,
.room-card.room-use .room-badge { color: #2563eb !important; background: #eaf1ff !important; }
.room-card.room-long .room-badge,
.room-card.room-cleaning .room-badge { color: #ef4444 !important; background: #feecec !important; }
.room-card.room-clean-wait .room-badge { color: #f59e0b !important; background: #fff5dd !important; }

.room-guest-name { color: var(--text) !important; }
.room-channel-chip { border-radius: 7px !important; }
.empty-room-message { background: var(--surface-soft) !important; color: var(--text-sub) !important; border: 1px solid var(--border) !important; }

.dashboard-utility-dock {
    left: clamp(18px, 2.6vw, 40px) !important;
    right: auto !important;
    bottom: 22px !important;
    padding: 0 !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.utility-dock-btn {
    min-width: 230px !important;
    height: 48px !important;
    justify-content: center !important;
    padding: 0 22px !important;
    border-radius: 16px !important;
}

.utility-dock-btn.reservation {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
}

.utility-dock-btn.command {
    background: linear-gradient(135deg, #2563eb, #0b6bf2) !important;
}

/* Drawer / modal / menu */
.reservation-queue-drawer,
.command-log-drawer,
.room-modal,
.command-modal,
.room-quick-menu,
.login-alert {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-float) !important;
}

.reservation-queue-header,
.command-log-header,
.room-modal-header,
.command-modal-header {
    border-color: var(--border) !important;
}

.reservation-queue-header h2,
.command-log-header h2,
.room-modal-header h2,
.command-modal-header h2,
.room-modal-section h3,
.detail-label {
    color: var(--text) !important;
}

.reservation-queue-header p,
.command-log-header p,
.room-modal-header p,
.command-modal-header p,
.command-modal-desc {
    color: var(--text-sub) !important;
}

.reservation-queue-close,
.command-log-close,
.room-modal-close,
.command-modal-close {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}

.room-modal-backdrop,
.command-modal-backdrop,
.login-alert-backdrop {
    background: var(--overlay) !important;
}

.queue-reserve-card,
.recent-command-item,
.command-option,
.room-modal-section {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Login */
.login-page {
    background: #ffffff !important;
    padding: 32px 20px !important;
}

.login-card {
    width: min(680px, 100%) !important;
    max-width: 680px !important;
    padding: 68px 70px 72px !important;
    border-radius: 40px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.10) !important;
}

.login-brand-logo {
    display: block;
    width: 190px;
    height: auto;
    margin: 28px 0 24px;
    image-rendering: auto;
}

.login-card h1 { display: none !important; }
.login-desc { margin: 0 0 48px !important; color: var(--text-sub) !important; font-size: 22px !important; }
.login-card label { margin-bottom: 26px !important; color: var(--text) !important; font-size: 17px !important; font-weight: 650 !important; }
.login-card input {
    height: 74px !important;
    margin-top: 12px !important;
    padding: 0 24px !important;
    border-radius: 18px !important;
    border: 1px solid #dfe3e9 !important;
    background: #ffffff !important;
    color: var(--text) !important;
    font-size: 20px !important;
}
.login-card input:focus { border-color: #2563eb !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important; }
.login-card button[type="submit"] {
    height: 76px !important;
    margin-top: 4px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #2563eb, #155eef) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
}
.api-status { display: none !important; }
.login-alert h2 { color: var(--text) !important; }
.login-alert p { color: var(--text-sub) !important; }

@media (max-width: 900px) {
    .dashboard-header { align-items: flex-start !important; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .room-grid,
    .floor-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .utility-dock-btn { min-width: 0 !important; flex: 1 1 0 !important; }
    .dashboard-utility-dock { right: 18px !important; }
}

@media (max-width: 640px) {
    .dashboard-page { padding: 18px 14px 96px !important; }
    .dashboard-header { gap: 12px !important; }
    .dashboard-title-wrap h1,
    .dashboard-header h1 { font-size: 24px !important; }
    .dashboard-time-wrap .clock { font-size: 24px !important; }
    .summary-grid { gap: 10px !important; }
    .summary-card { min-height: 90px !important; padding: 16px 10px !important; }
    .summary-card strong { font-size: 28px !important; }
    .room-grid,
    .floor-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .room-card { min-height: 142px !important; padding: 16px 14px !important; }
    .room-card .room-no { font-size: 26px !important; }
    .room-card .room-type { font-size: 12px !important; }
    .dashboard-utility-dock { left: 14px !important; right: 14px !important; bottom: 14px !important; gap: 8px !important; }
    .utility-dock-btn { height: 48px !important; padding: 0 10px !important; border-radius: 14px !important; }
    .utility-dock-btn strong { font-size: 13px !important; }
    .login-card { padding: 44px 28px 48px !important; border-radius: 28px !important; }
    .login-brand-logo { width: 164px; }
    .login-desc { margin-bottom: 34px !important; font-size: 18px !important; }
    .login-card input { height: 62px !important; font-size: 17px !important; }
    .login-card button[type="submit"] { height: 64px !important; font-size: 19px !important; }
}

/* =========================================================
   2026-08-03 white theme correction
   - utility buttons return to the right
   - desktop drawers reserve layout space instead of overlaying
   - channel / queue text colors optimized for white surfaces
========================================================= */

html[data-theme="light"] .dashboard-utility-dock {
    left: auto !important;
    right: clamp(18px, 2.6vw, 40px) !important;
}

@media (min-width: 901px) {
    html[data-theme="light"] .dashboard-page.with-reservation-queue,
    html[data-theme="light"] .dashboard-page.with-command-log {
        padding-right: 470px !important;
    }

    html[data-theme="light"] .dashboard-page.with-reservation-queue .room-grid,
    html[data-theme="light"] .dashboard-page.with-reservation-queue .floor-section-grid,
    html[data-theme="light"] .dashboard-page.with-command-log .room-grid,
    html[data-theme="light"] .dashboard-page.with-command-log .floor-section-grid {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    }

    html[data-theme="light"] body:has(.reservation-queue-drawer.open) .dashboard-utility-dock,
    html[data-theme="light"] body:has(.command-log-drawer.open) .dashboard-utility-dock {
        right: 452px !important;
    }
}

/* Room channel chips: light theme uses pastel backgrounds and dark text. */
html[data-theme="light"] .room-channel-chip.channel-general {
    background: #f1f3f5 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .room-channel-chip.channel-goodchoice {
    background: #feecec !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

html[data-theme="light"] .room-channel-chip.channel-yanolja {
    background: #eaf1ff !important;
    color: #1d4ed8 !important;
    border-color: #c7d7fe !important;
}

html[data-theme="light"] .room-channel-chip.channel-ggulstay {
    background: #fff7d6 !important;
    color: #9a6700 !important;
    border-color: #fde68a !important;
}

html[data-theme="light"] .room-channel-chip.channel-naver {
    background: #e8f8f2 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

html[data-theme="light"] .room-channel-chip.channel-airbnb {
    background: #ffe8ee !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
}

html[data-theme="light"] .room-channel-chip.channel-agoda {
    background: #f7eaf7 !important;
    color: #93338c !important;
    border-color: #e9c7e7 !important;
}

html[data-theme="light"] .room-channel-chip.channel-booking {
    background: #e8f0ff !important;
    color: #003b95 !important;
    border-color: #bfd2f5 !important;
}

html[data-theme="light"] .room-channel-chip.channel-trip {
    background: #e9edff !important;
    color: #2446d8 !important;
    border-color: #c7d0ff !important;
}

html[data-theme="light"] .room-channel-chip.channel-expedia {
    background: #fff8d8 !important;
    color: #755b00 !important;
    border-color: #f5df70 !important;
}

/* Drawer list readability in the white theme. */
html[data-theme="light"] .queue-reserve-time,
html[data-theme="light"] .queue-reserve-name,
html[data-theme="light"] .recent-command-left strong {
    color: #111827 !important;
}

html[data-theme="light"] .queue-reserve-goods,
html[data-theme="light"] .recent-command-left span,
html[data-theme="light"] .recent-command-meta,
html[data-theme="light"] .recent-command-result {
    color: #6b7280 !important;
}

html[data-theme="light"] .queue-tag.channel {
    background: #feecec !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* Reservation queue channel colors */
html[data-theme="light"] .queue-tag.channel.channel-general {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .queue-tag.channel.channel-goodchoice {
    background: #fff0f0 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

html[data-theme="light"] .queue-tag.channel.channel-yanolja {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

html[data-theme="light"] .queue-tag.channel.channel-ggulstay {
    background: #fff9db !important;
    color: #8a6800 !important;
    border-color: #f5df70 !important;
}

html[data-theme="light"] .queue-tag.channel.channel-naver {
    background: #e8fff5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

html[data-theme="light"] .queue-tag.channel.channel-airbnb {
    background: #fff0f4 !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
}

html[data-theme="light"] .queue-tag.channel.channel-agoda {
    background: #faefff !important;
    color: #9333a8 !important;
    border-color: #e9d5ff !important;
}

html[data-theme="light"] .queue-tag.channel.channel-booking {
    background: #edf4ff !important;
    color: #003b95 !important;
    border-color: #bfdbfe !important;
}

html[data-theme="light"] .queue-tag.channel.channel-trip {
    background: #eef1ff !important;
    color: #2446ff !important;
    border-color: #c7d2fe !important;
}

html[data-theme="light"] .queue-tag.channel.channel-expedia {
    background: #fff8d8 !important;
    color: #755b00 !important;
    border-color: #f5df70 !important;
}

html[data-theme="light"] .queue-tag.move.walk {
    color: #1d4ed8 !important;
    background: #eaf1ff !important;
}

html[data-theme="light"] .queue-tag.move.car {
    color: #c2410c !important;
    background: #fff0e5 !important;
}

html[data-theme="light"] .queue-reserve-rent {
    color: #5b21b6 !important;
    background: #ede9fe !important;
}

@media (max-width: 900px) {
    html[data-theme="light"] .dashboard-page.with-reservation-queue,
    html[data-theme="light"] .dashboard-page.with-command-log {
        padding-right: clamp(18px, 2.6vw, 40px) !important;
    }

    html[data-theme="light"] body:has(.reservation-queue-drawer.open) .dashboard-utility-dock,
    html[data-theme="light"] body:has(.command-log-drawer.open) .dashboard-utility-dock {
        right: 18px !important;
    }
}

@media (max-width: 640px) {
    html[data-theme="light"] .dashboard-utility-dock {
        left: 14px !important;
        right: 14px !important;
    }
}

/* =========================================================
   2026-08-03 white theme readability correction 2
   - room sale amount
   - reservation queue toolbar/actions
   - command log status badges
========================================================= */

html[data-theme="light"] .room-sale-amount {
    background: #f3e8ff !important;
    color: #6d28d9 !important;
    border: 1px solid #e9d5ff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .room-card.room-rent-ready .room-sale-amount {
    background: #dcfce7 !important;
    color: #047857 !important;
    border-color: #bbf7d0 !important;
}

html[data-theme="light"] .room-card.room-stay-ready .room-sale-amount,
html[data-theme="light"] .room-card.room-ready .room-sale-amount {
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
}

html[data-theme="light"] .reservation-queue-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 0 10px !important;
}

html[data-theme="light"] .reservation-select-btn,
html[data-theme="light"] .reservation-delete-btn {
    min-width: 72px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] .reservation-select-btn {
    background: #eef2f7 !important;
    color: #334155 !important;
    border-color: #dbe2ea !important;
}

html[data-theme="light"] .reservation-select-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .reservation-select-btn.active {
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border-color: #c4b5fd !important;
}

html[data-theme="light"] .reservation-delete-btn {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

html[data-theme="light"] .reservation-delete-btn:disabled {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    opacity: 1 !important;
}

html[data-theme="light"] .queue-select-check {
    accent-color: #7c3aed !important;
}

html[data-theme="light"] .queue-assign-btn {
    color: #ffffff !important;
    border-color: #60a5fa !important;
    opacity: 1 !important;
}

html[data-theme="light"] .recent-command-status {
    border: 1px solid transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .recent-command-status.pending {
    color: #92400e !important;
    background: #fef3c7 !important;
    border-color: #fde68a !important;
}

html[data-theme="light"] .recent-command-status.pulled {
    color: #1d4ed8 !important;
    background: #dbeafe !important;
    border-color: #bfdbfe !important;
}

html[data-theme="light"] .recent-command-status.success {
    color: #047857 !important;
    background: #d1fae5 !important;
    border-color: #a7f3d0 !important;
}

html[data-theme="light"] .recent-command-status.failed {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border-color: #fecaca !important;
}

html[data-theme="light"] .recent-command-status.expired,
html[data-theme="light"] .recent-command-status.cancelled,
html[data-theme="light"] .recent-command-status.unknown {
    color: #475569 !important;
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .recent-command-empty {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

/* =========================================================
   White theme readability fixes: quick menu / detail / alerts
========================================================= */
html[data-theme="light"] .room-quick-menu {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .room-quick-menu button {
    background: transparent !important;
    color: #1f2937 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .room-quick-menu button:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .room-quick-menu button:disabled {
    color: #94a3b8 !important;
    background: transparent !important;
    opacity: 0.7 !important;
}

html[data-theme="light"] .room-quick-menu-divider {
    background: #e5e7eb !important;
}

html[data-theme="light"] .room-modal {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #dbe3ee !important;
}

html[data-theme="light"] .room-modal-header {
    border-bottom-color: #e5e7eb !important;
}

html[data-theme="light"] .room-modal-title-line h2,
html[data-theme="light"] .room-modal-header h2,
html[data-theme="light"] .room-modal-section h3 {
    color: #111827 !important;
}

html[data-theme="light"] .room-modal-header p {
    color: #64748b !important;
}

html[data-theme="light"] .room-modal-section {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
}

html[data-theme="light"] .modal-info-row {
    border-bottom-color: #e5e7eb !important;
}

html[data-theme="light"] .modal-info-row:last-child {
    border-bottom: 0 !important;
}

html[data-theme="light"] .modal-info-row span {
    color: #64748b !important;
    opacity: 1 !important;
}

html[data-theme="light"] .modal-info-row strong {
    color: #111827 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .room-modal-status-chip {
    color: #7c3aed !important;
    background: #ede9fe !important;
    border-color: #ddd6fe !important;
}

html[data-theme="light"] .dashboard-confirm-backdrop {
    background: rgba(15, 23, 42, 0.42) !important;
}

html[data-theme="light"] .dashboard-confirm {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .dashboard-confirm-header {
    border-bottom: 1px solid #eef2f7 !important;
}

html[data-theme="light"] .dashboard-confirm-header h2 {
    color: #111827 !important;
}

html[data-theme="light"] .dashboard-confirm-close {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

html[data-theme="light"] .dashboard-confirm-message {
    color: #1f2937 !important;
}

html[data-theme="light"] .dashboard-confirm-sub {
    color: #64748b !important;
}

html[data-theme="light"] .dashboard-confirm-actions {
    background: #f8fafc !important;
    border-top: 1px solid #eef2f7 !important;
}

html[data-theme="light"] .dashboard-confirm-btn.cancel {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .dashboard-confirm-btn.ok {
    color: #ffffff !important;
}

html[data-theme="light"] .toast-item {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .toast-title {
    color: #111827 !important;
}

html[data-theme="light"] .toast-message {
    color: #64748b !important;
}

html[data-theme="light"] .toast-item.success { border-left: 5px solid #10b981 !important; }
html[data-theme="light"] .toast-item.error { border-left: 5px solid #ef4444 !important; }
html[data-theme="light"] .toast-item.info { border-left: 5px solid #2563eb !important; }

/* =========================================================
   Light theme v5 - left-side partner mockup is the visual source of truth
   Room card scale / spacing / chips / accent lines
========================================================= */
html[data-theme="light"] .room-grid,
html[data-theme="light"] .floor-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 16px !important;
}

html[data-theme="light"] .room-card {
    min-height: 156px !important;
    padding: 18px 18px 16px 20px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-left-width: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .room-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 20px rgba(17, 24, 39, 0.09) !important;
}

html[data-theme="light"] .room-card .room-no {
    color: #111827 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

html[data-theme="light"] .room-card .room-type {
    margin-top: 8px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
}

html[data-theme="light"] .room-card-info {
    margin-top: 15px !important;
    gap: 7px !important;
}

html[data-theme="light"] .room-info-line {
    gap: 8px !important;
}

html[data-theme="light"] .room-info-top {
    gap: 7px !important;
    flex-wrap: wrap !important;
}

html[data-theme="light"] .room-card .room-badge,
html[data-theme="light"] .room-channel-chip,
html[data-theme="light"] .room-sale-amount {
    min-height: 25px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    box-shadow: none !important;
}

html[data-theme="light"] .room-card-info > .room-badge:not(.inline) {
    align-self: flex-start !important;
}

html[data-theme="light"] .room-guest-name {
    margin-top: 1px !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .room-card .room-time {
    margin-top: 0 !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}

html[data-theme="light"] .room-menu-btn {
    top: 13px !important;
    right: 13px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

html[data-theme="light"] .room-menu-btn:hover {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

/* left accent colors from partner guide */
html[data-theme="light"] .room-card.room-rent-ready { border-left-color: #10b981 !important; }
html[data-theme="light"] .room-card.room-stay-ready,
html[data-theme="light"] .room-card.room-ready { border-left-color: #7c3aed !important; }
html[data-theme="light"] .room-card.room-reserved { border-left-color: #ec4899 !important; }
html[data-theme="light"] .room-card.room-clean-wait { border-left-color: #f59e0b !important; }
html[data-theme="light"] .room-card.room-cleaning { border-left-color: #ef4444 !important; }
html[data-theme="light"] .room-card.room-empty { border-left-color: #94a3b8 !important; }
html[data-theme="light"] .room-card.room-rent-use { border-left-color: #38bdf8 !important; }
html[data-theme="light"] .room-card.room-stay-use,
html[data-theme="light"] .room-card.room-use { border-left-color: #2563eb !important; }
html[data-theme="light"] .room-card.room-long { border-left-color: #ef4444 !important; }

/* status chips - pale fill and saturated text, matching left mockup */
html[data-theme="light"] .room-card.room-rent-ready .room-badge {
    background: #e7f8f2 !important;
    color: #059669 !important;
}
html[data-theme="light"] .room-card.room-stay-ready .room-badge,
html[data-theme="light"] .room-card.room-ready .room-badge {
    background: #f0eaff !important;
    color: #7c3aed !important;
}
html[data-theme="light"] .room-card.room-reserved .room-badge {
    background: #fde8f2 !important;
    color: #ec4899 !important;
}
html[data-theme="light"] .room-card.room-clean-wait .room-badge {
    background: #fff3d9 !important;
    color: #d97706 !important;
}
html[data-theme="light"] .room-card.room-cleaning .room-badge {
    background: #feecec !important;
    color: #ef4444 !important;
}
html[data-theme="light"] .room-card.room-empty .room-badge {
    background: #eef2f6 !important;
    color: #64748b !important;
}
html[data-theme="light"] .room-card.room-rent-use .room-badge {
    background: #e7f7ff !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .room-card.room-stay-use .room-badge,
html[data-theme="light"] .room-card.room-use .room-badge {
    background: #eaf1ff !important;
    color: #2563eb !important;
}

/* sale amount follows the same visual family as its status */
html[data-theme="light"] .room-card.room-rent-ready .room-sale-amount {
    background: #e7f8f2 !important;
    color: #059669 !important;
}
html[data-theme="light"] .room-card.room-stay-ready .room-sale-amount,
html[data-theme="light"] .room-card.room-ready .room-sale-amount {
    background: #f0eaff !important;
    color: #6d28d9 !important;
}

/* channel chips */
html[data-theme="light"] .room-channel-chip.channel-general {
    background: #eef2f6 !important;
    color: #4b5563 !important;
}
html[data-theme="light"] .room-channel-chip.channel-goodchoice {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}
html[data-theme="light"] .room-channel-chip.channel-yanolja {
    background: #fff0e7 !important;
    color: #f97316 !important;
}
html[data-theme="light"] .room-channel-chip.channel-ggulstay {
    background: #fff7d6 !important;
    color: #a16207 !important;
}
html[data-theme="light"] .room-channel-chip.channel-naver {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
html[data-theme="light"] .room-channel-chip.channel-airbnb {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
}
html[data-theme="light"] .room-channel-chip.channel-agoda {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .room-channel-chip.channel-booking {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}
html[data-theme="light"] .room-channel-chip.channel-trip {
    background: #e0e7ff !important;
    color: #4338ca !important;
}
html[data-theme="light"] .room-channel-chip.channel-expedia {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

@media (max-width: 760px) {
    html[data-theme="light"] .dashboard-page {
        padding: 16px !important;
        padding-bottom: 92px !important;
    }

    html[data-theme="light"] .room-grid,
    html[data-theme="light"] .floor-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html[data-theme="light"] .room-card {
        min-height: 150px !important;
        padding: 16px 13px 14px 15px !important;
    }

    html[data-theme="light"] .room-card .room-no {
        font-size: 24px !important;
    }

    html[data-theme="light"] .room-card .room-type {
        margin-top: 7px !important;
        font-size: 12px !important;
    }

    html[data-theme="light"] .room-card-info {
        margin-top: 13px !important;
    }

    html[data-theme="light"] .room-card .room-badge,
    html[data-theme="light"] .room-channel-chip,
    html[data-theme="light"] .room-sale-amount {
        min-height: 23px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    html[data-theme="light"] .room-guest-name {
        font-size: 12px !important;
    }
}

/* =========================================================
   Partner guide button system - light theme
   Left-side applied design is the visual source of truth.
   ========================================================= */
html[data-theme="light"] button {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* logout: compact outline button */
html[data-theme="light"] .dashboard-logout-btn {
    min-width: 72px !important;
    height: 38px !important;
    padding: 0 17px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 19px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}
html[data-theme="light"] .dashboard-logout-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .dashboard-logout-btn:active { transform: translateY(1px) !important; }

/* floor filter tabs */
html[data-theme="light"] .floor-tabs button {
    min-width: 64px !important;
    height: 40px !important;
    padding: 0 19px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease !important;
}
html[data-theme="light"] .floor-tabs button:hover {
    background: #e9edf3 !important;
}
html[data-theme="light"] .floor-tabs button.active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .20) !important;
}
html[data-theme="light"] .floor-tabs button:active { transform: translateY(1px) !important; }

/* bottom primary actions from guide */
html[data-theme="light"] .dashboard-utility-dock {
    gap: 12px !important;
}
html[data-theme="light"] .utility-dock-btn {
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .14) !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}
html[data-theme="light"] .utility-dock-btn.reservation {
    background: linear-gradient(100deg, #7c3aed 0%, #6d28d9 100%) !important;
}
html[data-theme="light"] .utility-dock-btn.command {
    background: linear-gradient(100deg, #2563eb 0%, #0b6bf2 100%) !important;
}
html[data-theme="light"] .utility-dock-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
}
html[data-theme="light"] .utility-dock-btn:active { transform: translateY(1px) !important; }
html[data-theme="light"] .utility-dock-btn .utility-icon {
    min-width: 34px !important;
    height: 22px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .19) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .utility-dock-btn strong {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* room card menu button */
html[data-theme="light"] .room-menu-btn {
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}
html[data-theme="light"] .room-menu-btn:active { transform: scale(.95) !important; }

/* drawer close button */
html[data-theme="light"] .reservation-queue-close,
html[data-theme="light"] .command-log-close,
html[data-theme="light"] .room-modal-close,
html[data-theme="light"] .command-modal-close {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}
html[data-theme="light"] .reservation-queue-close:hover,
html[data-theme="light"] .command-log-close:hover,
html[data-theme="light"] .room-modal-close:hover,
html[data-theme="light"] .command-modal-close:hover {
    background: #e5e7eb !important;
}

/* reservation queue controls */
html[data-theme="light"] .reservation-select-btn,
html[data-theme="light"] .reservation-delete-btn {
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .reservation-select-btn.active {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}
html[data-theme="light"] .reservation-delete-btn:not(:disabled) {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}
html[data-theme="light"] .reservation-select-btn:active,
html[data-theme="light"] .reservation-delete-btn:not(:disabled):active { transform: translateY(1px) !important; }

/* room assignment: blue filled pill */
html[data-theme="light"] .queue-assign-btn {
    min-width: 78px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .23) !important;
}
html[data-theme="light"] .queue-assign-btn:hover { background: #1d4ed8 !important; }
html[data-theme="light"] .queue-assign-btn:active { transform: translateY(1px) !important; }

/* modal confirm buttons */
html[data-theme="light"] .dashboard-confirm-btn {
    min-width: 104px !important;
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .dashboard-confirm-btn.cancel {
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #374151 !important;
}
html[data-theme="light"] .dashboard-confirm-btn.ok {
    border: 1px solid #2563eb !important;
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .20) !important;
}
html[data-theme="light"] .dashboard-confirm-btn.ok.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    box-shadow: 0 6px 14px rgba(239, 68, 68, .18) !important;
}

/* visible keyboard focus */
html[data-theme="light"] button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22) !important;
    outline-offset: 2px !important;
}

@media (max-width: 760px) {
    html[data-theme="light"] .floor-tabs button {
        min-width: 55px !important;
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    html[data-theme="light"] .utility-dock-btn {
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 12px !important;
        border-radius: 15px !important;
    }
    html[data-theme="light"] .utility-dock-btn strong { font-size: 13px !important; }
}

/* v7: design-guide utility button sizing */
html[data-theme="light"] .dashboard-utility-dock {
    gap: 12px !important;
}
html[data-theme="light"] .utility-dock-btn.reservation,
html[data-theme="light"] .utility-dock-btn.payment,
html[data-theme="light"] .utility-dock-btn.command {
    min-width: 0 !important;
}
@media (max-width: 760px) {
    html[data-theme="light"] .utility-dock-btn.reservation,
    html[data-theme="light"] .utility-dock-btn.command {
        min-width: 0 !important;
    }
}

/* v8: guide-matched floor filter buttons */
html[data-theme="light"] .floor-tabs { gap: 8px !important; margin-bottom: 18px !important; padding-bottom: 0 !important; }
html[data-theme="light"] .floor-tabs button { min-width: 50px !important; width: auto !important; height: 34px !important; padding: 0 15px !important; border: 0 !important; border-radius: 17px !important; background: #f8fafc !important; color: #111827 !important; font-size: 13px !important; line-height: 34px !important; font-weight: 600 !important; box-shadow: none !important; }
html[data-theme="light"] .floor-tabs button:first-child { min-width: 58px !important; padding-left: 17px !important; padding-right: 17px !important; }
html[data-theme="light"] .floor-tabs button:hover { background: #f1f5f9 !important; }
html[data-theme="light"] .floor-tabs button.active { background: #2563eb !important; color: #ffffff !important; box-shadow: none !important; }
@media (max-width: 760px) {
 html[data-theme="light"] .floor-tabs { gap: 8px !important; margin-bottom: 16px !important; }
 html[data-theme="light"] .floor-tabs button { min-width: 48px !important; height: 32px !important; padding: 0 13px !important; border-radius: 16px !important; font-size: 12px !important; line-height: 32px !important; }
 html[data-theme="light"] .floor-tabs button:first-child { min-width: 54px !important; padding-left: 15px !important; padding-right: 15px !important; }
}

/* v9: exact guide floor tabs */
html[data-theme="light"] .floor-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 18px 0 !important;
}
html[data-theme="light"] .floor-tabs button {
    flex: 0 0 auto !important;
    min-width: 52px !important;
    width: 52px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: #f6f7f9 !important;
    color: #111827 !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 13px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .floor-tabs button:first-child {
    min-width: 60px !important;
    width: 60px !important;
}
html[data-theme="light"] .floor-tabs button.active {
    background: #2563eb !important;
    color: #ffffff !important;
}
html[data-theme="light"] .floor-tabs button:hover:not(.active) {
    background: #eceff3 !important;
}
@media (max-width: 760px) {
    html[data-theme="light"] .floor-tabs { gap: 8px !important; overflow-x: auto !important; }
    html[data-theme="light"] .floor-tabs button { min-width: 50px !important; width: 50px !important; height: 32px !important; line-height: 32px !important; border-radius: 16px !important; font-size: 12px !important; }
    html[data-theme="light"] .floor-tabs button:first-child { min-width: 58px !important; width: 58px !important; }
}

/* v11: clickable summary filters and detail status colors */
html[data-theme="light"] .summary-card {
    appearance: none !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease !important;
}
html[data-theme="light"] .summary-card:hover {
    border-color: #bfdbfe !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .10) !important;
    transform: translateY(-1px) !important;
}
html[data-theme="light"] .summary-card.active {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .10) !important;
}
html[data-theme="light"] .summary-card.active span { color: #1d4ed8 !important; }
html[data-theme="light"] .summary-card:focus-visible { outline: 3px solid rgba(37, 99, 235, .22) !important; outline-offset: 2px !important; }

html[data-theme="light"] .room-modal-status-chip.room-empty { color:#475569 !important; background:#eef2f6 !important; border-color:#e2e8f0 !important; }
html[data-theme="light"] .room-modal-status-chip.room-rent-ready { color:#059669 !important; background:#e8f8f2 !important; border-color:#bbf7d0 !important; }
html[data-theme="light"] .room-modal-status-chip.room-stay-ready { color:#7c3aed !important; background:#f1eafd !important; border-color:#ddd6fe !important; }
html[data-theme="light"] .room-modal-status-chip.room-reserved { color:#ec4899 !important; background:#fce7f3 !important; border-color:#fbcfe8 !important; }
html[data-theme="light"] .room-modal-status-chip.room-rent-use { color:#0284c7 !important; background:#e8f6fd !important; border-color:#bae6fd !important; }
html[data-theme="light"] .room-modal-status-chip.room-stay-use { color:#2563eb !important; background:#e8f0ff !important; border-color:#bfdbfe !important; }
html[data-theme="light"] .room-modal-status-chip.room-clean-wait { color:#f59e0b !important; background:#fff5dd !important; border-color:#fde68a !important; }
html[data-theme="light"] .room-modal-status-chip.room-cleaning { color:#ef4444 !important; background:#feecec !important; border-color:#fecaca !important; }

/* v12: clickable summary filters */
html[data-theme="light"] .summary-card {
    cursor: pointer !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
html[data-theme="light"] .summary-card:hover {
    border-color: #bfdbfe !important;
    background: #f8fbff !important;
    transform: translateY(-1px);
}
html[data-theme="light"] .summary-card.active,
html[data-theme="light"] .summary-card[aria-pressed="true"] {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.12) !important;
}
html[data-theme="light"] .summary-card:focus-visible {
    outline: 3px solid rgba(37,99,235,.22) !important;
    outline-offset: 2px;
}

/* 65차: PMS 슬롯의 WebChannel0~9 색상을 웹 슬롯 예약 채널 문구에 동일 적용 */
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-general {
    background: #8E9096 !important;
    color: #FFFFFF !important;
    border-color: #8E9096 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-goodchoice {
    background: #C94A4A !important;
    color: #FFFFFF !important;
    border-color: #C94A4A !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-yanolja {
    background: #1A2F56 !important;
    color: #FFFFFF !important;
    border-color: #1A2F56 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-ggulstay {
    background: #9A7A00 !important;
    color: #FFFFFF !important;
    border-color: #9A7A00 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-naver {
    background: #15966B !important;
    color: #FFFFFF !important;
    border-color: #15966B !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-airbnb {
    background: #C94A5D !important;
    color: #FFFFFF !important;
    border-color: #C94A5D !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-agoda {
    background: #8F4A93 !important;
    color: #FFFFFF !important;
    border-color: #8F4A93 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-booking {
    background: #174C91 !important;
    color: #FFFFFF !important;
    border-color: #174C91 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-trip {
    background: #3656B8 !important;
    color: #FFFFFF !important;
    border-color: #3656B8 !important;
}
html[data-theme="light"] .slot-display-memo.room-channel-chip.channel-expedia {
    background: #B87900 !important;
    color: #FFFFFF !important;
    border-color: #B87900 !important;
}