/* ═══════════════════════════════════════════
   TableOrder - 통합 다크 테마
   모든 화면에 일관된 디자인 시스템 적용
   ═══════════════════════════════════════════ */

/* ─── 디자인 토큰 ─── */
:root {
    --bg-base: #0a0a0a;
    --bg-surface: #141414;
    --bg-card: #1c1c1e;
    --bg-card-hover: #252528;
    --bg-input: #222224;
    --bg-header: #111113;

    --border-subtle: #2a2a2c;
    --border-medium: #3a3a3c;

    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6e6e73;

    --accent-blue: #64b5f6;
    --accent-green: #66bb6a;
    --accent-red: #ef5350;
    --accent-orange: #ffa726;
    --accent-purple: #ab47bc;
    --accent-cyan: #26c6da;

    --radius-lg: 1rem;
    --radius-md: 0.7rem;
    --radius-sm: 0.4rem;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ─── 기본 설정 ─── */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── 카드 공통 ─── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow);
    color: var(--text-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:active { transform: scale(0.98); }
.card-header { background: var(--bg-surface) !important; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.card-header.bg-white, .card-header.bg-light { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
.card-body { color: var(--text-primary); }

/* ─── 텍스트 공통 ─── */
.text-muted { color: var(--text-secondary) !important; }
.text-dark { color: var(--text-primary) !important; }
.bg-warning.text-dark, .bg-warning .text-dark { color: #fff !important; }
.fw-bold { color: var(--text-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p { color: var(--text-secondary); }
a { color: var(--accent-blue); }
hr { border-color: var(--border-subtle); }

/* ─── 버튼 공통 ─── */
.btn { font-weight: 600; transition: all 0.15s ease; }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1.1rem; }
.btn:active { transform: scale(0.95); }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-medium); }
.btn-outline-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-outline-dark { color: var(--text-secondary); border-color: var(--border-medium); }
.btn-outline-dark:hover { background: var(--text-primary); color: var(--bg-base); }

/* ─── 폼 공통: 체크박스 영역 전체 터치 ─── */
.form-check {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-check .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}
.form-check .form-check-label {
    cursor: pointer;
    margin: 0;
}

/* ─── 폼 공통 ─── */
.form-control, .form-select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(100,181,246,0.15) !important;
}
.form-control::placeholder { color: var(--text-tertiary) !important; }
.form-check-label { color: var(--text-primary) !important; }
.form-check-input { background-color: var(--bg-input); border-color: var(--border-medium); }
.form-check-input:checked { background-color: var(--accent-blue); border-color: var(--accent-blue); }

/* ─── 테이블 공통 ─── */
.table { color: var(--text-primary); --bs-table-bg: var(--bg-card); --bs-table-hover-bg: var(--bg-card-hover); --bs-table-hover-color: #fff; }
.table-light, thead.table-light { --bs-table-bg: var(--bg-surface) !important; }
.table-light th { background: var(--bg-surface) !important; color: var(--text-secondary) !important; }
.table td, .table th { border-color: var(--border-subtle) !important; }
.table-hover tbody tr:hover { background: var(--bg-card-hover) !important; color: #fff; }

/* ─── 배지 보정 ─── */
.badge.bg-light { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; }
.badge.bg-white { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; }
.bg-light { background: var(--bg-surface) !important; }

/* ─── 경고/알림 박스 ─── */
.alert-warning { background: #2a1f00 !important; color: #ffcc02 !important; border-color: #4d3a00 !important; }
.alert-info { background: #0a1e2e !important; color: var(--accent-cyan) !important; border-color: #153d5e !important; }

/* ─── 모달 ─── */
.modal-content { background: #252528 !important; border: 2px solid #555; color: var(--text-primary); box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1); }
.modal-backdrop.show { opacity: 0.4 !important; background: rgb(80,80,100) !important; }
.modal-content .text-muted { color: var(--text-secondary) !important; }
.modal-content .bg-light { background: var(--bg-surface) !important; }

/* ─── 토스트 ─── */
.toast { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

/* ─── 메시지 강조 (공용) ─── */
.msg-highlight { color: var(--accent-blue) !important; font-size: 1.2rem !important; }
.empty-state { color: var(--text-tertiary); }

/* ─── 테이블 번호 배지 ─── */
.table-number-badge {
    display: inline-block; background: rgba(255,255,255,0.15); color: #fff;
    font-weight: 800; font-size: 1rem; padding: 0.4rem 1rem; border-radius: 2rem;
    border: 2px solid rgba(255,255,255,0.3); letter-spacing: 1px;
}
.table-number-badge-sm {
    display: inline-block; background: rgba(255,255,255,0.15); color: #fff;
    font-weight: 800; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.3);
}
.modal .table-number-badge, .modal .table-number-badge-sm {
    background: #1a3a5c; color: var(--accent-blue); border-color: #2a5a8c;
}


/* ═══════════════════════════════════════════
   고객 태블릿 화면
   ═══════════════════════════════════════════ */
.tablet-body { background: var(--bg-base); min-height: 100vh; }

.tablet-container { max-width: 900px; margin: 0 auto; background: var(--bg-surface); min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,0.3); }

.tablet-header {
    background: linear-gradient(135deg, #1a3a5c, #0d2137);
    color: #fff; padding: 0.8rem 1rem; position: sticky; top: 0; z-index: 100;
}

/* 메인 홈 버튼 */
.tablet-big-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; border-radius: var(--radius-lg); text-decoration: none;
    color: #fff; font-size: 1.3rem; font-weight: 700; transition: all 0.2s ease;
    min-height: 160px; position: relative;
}
.tablet-big-btn i { font-size: 3rem; margin-bottom: 0.8rem; }
.tablet-big-btn:hover, .tablet-big-btn:active { color: #fff; transform: scale(0.97); filter: brightness(0.9); }
.btn-menu { background: linear-gradient(135deg, #c62828, #b71c1c); }
.btn-cart { background: linear-gradient(135deg, #e65100, #bf360c); }
.btn-orders { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.btn-request { background: linear-gradient(135deg, #6a1b9a, #4a148c); }

.cart-badge {
    position: absolute; top: 12px; right: 12px; background: var(--accent-red); color: #fff;
    border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; font-weight: 700;
}
.cart-header-badge {
    position: absolute; top: -8px; right: -8px; background: var(--accent-red); color: #fff;
    border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; font-size: 0.85rem; font-weight: 700;
}

/* 카테고리 탭 */
.category-tabs { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 62px; z-index: 99; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs .btn-dark { background: #fff; color: #000; border-color: #fff; }
.category-tabs .btn-outline-dark { color: var(--text-secondary); border-color: var(--border-medium); }

/* 메뉴 카드 */
.menu-card {
    cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) !important; transition: all 0.2s ease; overflow: hidden;
}
.menu-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); border-color: var(--border-medium); }
.menu-card .card-title { color: var(--text-primary); }
.menu-card .text-muted { color: var(--text-secondary) !important; }
.menu-card .text-primary { color: var(--accent-blue) !important; }
.menu-card.sold-out { opacity: 0.4; cursor: not-allowed; }
.menu-card.sold-out::after {
    content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.2);
    border-radius: var(--radius-lg); pointer-events: none;
}

/* 메뉴 이미지 */
.menu-card-img-wrap { position: relative; width: 100%; height: 180px; overflow: hidden; }
.menu-card-img { width: 100%; height: 100%; object-fit: cover; }
.menu-sold-out-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.6); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 800; letter-spacing: 4px;
}

/* 전시전용 카드 */
.menu-card-free {
    background: #0d1f0d !important; border: 2px dashed #2e7d32 !important; cursor: default;
}
.menu-card-free:hover, .menu-card-free:active { transform: none; }
.menu-card-requestable {
    cursor: pointer !important; border-color: #1565c0 !important;
    background: #0d1a2e !important;
}
.menu-card-requestable:hover { box-shadow: 0 4px 20px rgba(21,101,192,0.2) !important; }
.menu-card-requestable:active { transform: scale(0.98) !important; }
.menu-card-soldout { opacity: 0.4 !important; cursor: not-allowed !important; }

/* 장바구니 하단 */
.cart-footer {
    position: sticky; bottom: 0; background: var(--bg-surface); padding: 1.2rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3); border-top: 1px solid var(--border-subtle);
}

/* 서비스 요청 버튼 */
.request-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; border-radius: var(--radius-lg); border: none; color: #fff;
    font-size: 1.2rem; font-weight: 700; min-height: 140px; cursor: pointer; transition: all 0.2s ease;
}
.request-btn i { font-size: 2.5rem; margin-bottom: 0.6rem; }
.request-btn:active { transform: scale(0.95); }
.request-btn small { display: block; font-size: 0.7rem; font-weight: 400; }
.btn-call { background: linear-gradient(135deg, #c62828, #b71c1c); }
.btn-bill { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.btn-free { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.btn-self { background: linear-gradient(135deg, #424242, #303030); cursor: default; }
.btn-self:active { transform: none; }
.btn-soldout { background: linear-gradient(135deg, #555, #444); cursor: not-allowed; opacity: 0.5; }
.btn-soldout:active { transform: none; }

/* 요청 현황 펄스 */
.request-pulse-dot {
    width: 10px; height: 10px; background: var(--accent-orange); border-radius: 50%;
    display: inline-block; animation: req-pulse 1.5s infinite;
}
@keyframes req-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }


/* ═══════════════════════════════════════════
   주방 화면
   ═══════════════════════════════════════════ */
.kitchen-body { background: var(--bg-base); min-height: 100vh; }
.kitchen-container { height: 100vh; display: flex; flex-direction: column; }
.kitchen-header { background: var(--bg-header); padding: 0.8rem 1.2rem; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); }
.kitchen-columns { display: flex; flex: 1; gap: 0; overflow: hidden; }
.kitchen-col { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); }
.kitchen-col:last-child { border-right: none; }
.kitchen-col-header { padding: 0.8rem 1rem; font-weight: 700; font-size: 1.1rem; text-align: center; flex-shrink: 0; }
.kitchen-col-body { flex: 1; overflow-y: auto; padding: 0.8rem; background: var(--bg-base); }

.kitchen-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); margin-bottom: 0.8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); overflow: hidden;
}
.kitchen-card-header {
    padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-subtle); color: var(--text-primary);
}
.kitchen-card-body { padding: 0.8rem 1rem; }
.kitchen-item { padding: 0.4rem 0; border-bottom: 1px dashed var(--border-subtle); font-size: 1.1rem; }
.kitchen-item:last-child { border-bottom: none; }
.kitchen-item .fw-bold { color: #fff !important; }
.kitchen-card-footer { padding: 0.8rem; }

.card-pending { border-left: 5px solid var(--accent-orange); animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0%, 100% { border-left-color: var(--accent-orange); } 50% { border-left-color: var(--accent-red); } }
.card-cooking { border-left: 5px solid var(--accent-red); }
.card-cooked { border-left: 5px solid var(--accent-green); }

/* 슬라이드 버튼 */
.slide-btn { width: 100%; user-select: none; -webkit-user-select: none; }
.slide-btn-track { position: relative; height: 56px; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.slide-btn-danger .slide-btn-track { background: linear-gradient(90deg, #3d1111, #5c1a1a); }
.slide-btn-success .slide-btn-track { background: linear-gradient(90deg, #113d11, #1a5c1a); }
.slide-btn-thumb {
    position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    color: #fff; cursor: grab; z-index: 2; transition: transform 0.3s ease; touch-action: none;
}
.slide-btn-danger .slide-btn-thumb { background: var(--accent-red); box-shadow: 0 2px 8px rgba(239,83,80,0.4); }
.slide-btn-success .slide-btn-thumb { background: var(--accent-green); box-shadow: 0 2px 8px rgba(102,187,106,0.4); }
.slide-btn-thumb:active { cursor: grabbing; }
.slide-btn-label { font-size: 1rem; font-weight: 700; color: var(--text-secondary); z-index: 1; pointer-events: none; transition: opacity 0.15s ease; }
.slide-btn-activated .slide-btn-track { opacity: 0.5; }

/* Undo 토스트 */
.kitchen-undo-toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
    background: var(--bg-card); color: #fff; padding: 1rem 1.5rem; border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); border: 1px solid var(--border-medium);
    z-index: 9999; min-width: 300px; font-size: 1.05rem; font-weight: 600;
}
.undo-timer-bar { position: absolute; bottom: 0; left: 0; height: 4px; width: 100%; background: var(--accent-orange); border-radius: 0 0 1rem 1rem; }
@keyframes undo-shrink { from { width: 100%; } to { width: 0%; } }


/* ═══════════════════════════════════════════
   직원 화면 공통: 고객 서비스 내용 강조
   ═══════════════════════════════════════════ */
/* 수량 배지 크기 */
.kitchen-item .badge, .item-line .badge,
.unified-card-items .badge, .staff-body .card .badge.rounded-pill {
    font-size: 0.95rem !important;
    padding: 0.3rem 0.6rem !important;
}

/* 주문 항목 (가장 중요 — 가장 큰 글씨) */
.kitchen-item .fw-bold, .item-line .fw-bold, .unified-card-items .fw-bold {
    font-size: 1.35rem;
    color: #fff !important;
}

/* 테이블명 (카드 헤더 — 메뉴와 같은 수준으로 크게) */
.kitchen-card-header .fw-bold,
.unified-card-header .fw-bold {
    font-size: 1.3rem;
    color: var(--accent-orange) !important;
}

/* 시간 (작게) */
.kitchen-card-header .text-muted,
.unified-card-header .text-muted {
    font-size: 0.8rem !important;
}

/* 옵션 강조 */
.kitchen-item .text-info, .item-line + .text-info, .unified-card-items .text-info,
.event-card .text-info, .staff-body .card .text-info:not(.fs-1) {
    font-size: 1.15rem !important; font-weight: 700 !important;
    color: var(--accent-cyan) !important; background: #0a2a3e;
    padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); margin-top: 0.3rem; display: inline-block;
}
.staff-body .fs-1.text-info,
.staff-body .fs-1.text-warning,
.staff-body .fs-1.text-success {
    font-size: calc(1.375rem + 1.5vw) !important;
    background: none !important;
    padding: 0 !important;
    display: block !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* 요청사항 강조 */
.kitchen-item .text-danger, .item-line + .text-danger, .unified-card-items .text-danger,
.event-card .text-danger, .staff-body .card .text-danger:not(.btn):not(.badge):not(.fs-1) {
    font-size: 1.2rem !important; font-weight: 800 !important;
    color: #ff8a80 !important; background: #2a0a0a;
    padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
    border-left: 5px solid var(--accent-red); margin-top: 0.3rem;
}

/* 주문 전체 요청사항 */
.kitchen-card .alert-warning, .unified-card .alert-warning,
.staff-body .alert-warning {
    font-size: 1.15rem !important; font-weight: 700 !important;
    padding: 0.6rem 0.8rem !important;
    border-left: 5px solid var(--accent-orange) !important;
}

/* 서비스 요청 칩 */
.chip-type { font-size: 0.9rem; font-weight: 700; }


/* ═══════════════════════════════════════════
   홀 직원 화면
   ═══════════════════════════════════════════ */
.staff-body { background: var(--bg-base); min-height: 100vh; }
.staff-container { max-width: 1000px; margin: 0 auto; }

.staff-nav {
    background: linear-gradient(135deg, #1a3a5c, #0d2137);
    padding: 0.8rem 1rem; position: sticky; top: 0; z-index: 100;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.event-card { transition: all 0.3s ease; border-left: 5px solid transparent; }
.event-new_order { border-left-color: var(--accent-orange); }
.event-new_service_request { border-left-color: var(--accent-red); }
.event-cooking_completed { border-left-color: var(--accent-green); }
.event-serving_required { border-left-color: var(--accent-green); }
.event-menu_sold_out { border-left-color: var(--accent-cyan); }

.table-status-card { transition: all 0.2s ease; }
.table-status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }


/* ═══════════════════════════════════════════
   관리자 화면
   ═══════════════════════════════════════════ */
.admin-body { background: var(--bg-base); min-height: 100vh; }
.admin-container { max-width: 1200px; margin: 0 auto; }
.admin-nav { position: sticky; top: 0; z-index: 100; }


/* ═══════════════════════════════════════════
   로그인 화면
   ═══════════════════════════════════════════ */
.login-body {
    background: var(--bg-base); min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.login-container { width: 100%; max-width: 450px; padding: 1rem; }
.login-card { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }


/* ═══════════════════════════════════════════
   포털 페이지
   ═══════════════════════════════════════════ */
.portal-body { background: var(--bg-base); min-height: 100vh; }
.portal-container { max-width: 1100px; margin: 0 auto; padding-bottom: 2rem; }

.portal-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #1a1a2e 100%);
    padding: 3.5rem 2rem 3rem; text-align: center; color: #fff;
    border-radius: 0 0 2rem 2rem; margin-bottom: 2rem; position: relative; overflow: hidden;
}
.portal-hero::after {
    content: ''; position: absolute; bottom: -40px; left: -10%; width: 120%; height: 80px;
    background: var(--bg-base); border-radius: 50% 50% 0 0;
}
.portal-hero-inner { position: relative; z-index: 1; }
.portal-title { font-size: 3rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 0.3rem; }
.portal-subtitle { font-size: 1.3rem; font-weight: 600; opacity: 0.9; margin-bottom: 0.5rem; }
.portal-desc { font-size: 1.05rem; opacity: 0.6; max-width: 500px; margin: 0 auto; }

.portal-section { padding: 0 1.5rem; margin-bottom: 2.5rem; }
.portal-section-title {
    font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1.2rem;
    border-left: 4px solid var(--accent-blue); padding-left: 0.8rem;
}

/* 통합 대시보드 배너 */
.portal-unified-banner {
    display: block; background: linear-gradient(135deg, #1a1a2e, #0d2137);
    color: #fff; border-radius: var(--radius-lg); padding: 1.5rem 2rem;
    text-decoration: none; box-shadow: var(--shadow); transition: all 0.25s ease;
    border: 1px solid var(--border-subtle);
}
.portal-unified-banner:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.portal-unified-banner p { font-size: 0.9rem; }
.portal-unified-icon {
    width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #c62828, #b71c1c);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}

/* 기능 카드 */
.portal-card {
    display: block; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 1.8rem 1.5rem 1.5rem; text-decoration: none;
    color: var(--text-primary); box-shadow: var(--shadow); transition: all 0.25s ease;
    height: 100%; position: relative; overflow: hidden;
}
.portal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.portal-card-customer::before { background: linear-gradient(90deg, #c62828, #b71c1c); }
.portal-card-kitchen::before { background: linear-gradient(90deg, #e65100, #bf360c); }
.portal-card-staff::before { background: linear-gradient(90deg, #1565c0, #0d47a1); }
.portal-card-admin::before { background: linear-gradient(90deg, #6a1b9a, #4a148c); }
.portal-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); color: var(--text-primary); text-decoration: none; }
.portal-card-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; margin-bottom: 1rem; }
.portal-card-customer .portal-card-icon { background: linear-gradient(135deg, #c62828, #b71c1c); }
.portal-card-kitchen .portal-card-icon { background: linear-gradient(135deg, #e65100, #bf360c); }
.portal-card-staff .portal-card-icon { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.portal-card-admin .portal-card-icon { background: linear-gradient(135deg, #6a1b9a, #4a148c); }
.portal-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.3rem; }
.portal-card > p { font-size: 0.9rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.portal-feature-list { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.88rem; color: var(--text-secondary); }
.portal-feature-list li { padding: 0.25rem 0; }
.portal-feature-list li i { color: var(--accent-green); margin-right: 0.4rem; font-size: 0.8rem; }
.portal-card-link { font-size: 0.9rem; font-weight: 700; color: var(--accent-blue); }

/* 시스템 흐름도 */
.portal-flow {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 2rem 1.5rem; box-shadow: var(--shadow);
}
.portal-flow-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.portal-flow-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; }
.bg-customer { background: linear-gradient(135deg, #c62828, #b71c1c); }
.bg-kitchen { background: linear-gradient(135deg, #e65100, #bf360c); }
.bg-staff { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.bg-success-flow { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.portal-flow-arrow { color: var(--text-tertiary); font-size: 1.3rem; padding: 0 0.3rem; }

/* 테이블 바로가기 */
.portal-tables { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.portal-table-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 1rem 1.2rem; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow); text-decoration: none;
    color: var(--text-primary); font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; min-width: 90px;
}
.portal-table-btn i { font-size: 1.4rem; color: var(--accent-blue); }
.portal-table-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); color: var(--text-primary); }

/* 데모 계정 카드 */
.portal-account-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.8rem 1.2rem; box-shadow: var(--shadow); text-align: center; }
.portal-account-role { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-tertiary); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 1px; }
.portal-account-card code { font-size: 0.95rem; color: var(--text-primary); background: var(--bg-surface); padding: 0.2rem 0.6rem; border-radius: 6px; }

.portal-footer { text-align: center; padding: 1.5rem; color: var(--text-tertiary); font-size: 0.85rem; }


/* ═══════════════════════════════════════════
   통합 대시보드
   ═══════════════════════════════════════════ */
.unified-body { background: #000; min-height: 100vh; }
.unified-container { height: 100vh; display: flex; flex-direction: column; }
.unified-header { background: var(--bg-header); padding: 0.6rem 1rem; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); }

.unified-body-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.unified-requests-bar { background: var(--bg-surface); border-bottom: 2px solid var(--accent-red); flex-shrink: 0; }
.unified-request-chip {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem 0.4rem 0.8rem;
    border-radius: 2rem; white-space: nowrap; color: #fff; font-size: 0.85rem; font-weight: 600;
    animation: chip-pulse 2s infinite;
}
.chip-danger { background: #b71c1c; }
.chip-warning { background: #e65100; }
.chip-info { background: #0d47a1; }
.chip-primary { background: #4a148c; }
.chip-table { font-weight: 800; }
.chip-done { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }

.unified-columns { display: flex; flex: 1; overflow: hidden; }
.unified-col { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); min-width: 0; }
.unified-col:last-child { border-right: none; }
.unified-col-header { padding: 0.5rem 0.8rem; font-weight: 700; font-size: 0.95rem; text-align: center; flex-shrink: 0; }
.unified-col-body { flex: 1; overflow-y: auto; padding: 0.6rem; background: var(--bg-base); }

.unified-card {
    background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); margin-bottom: 0.6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.4); overflow: hidden;
}
.card-type-pending { border-left: 5px solid var(--accent-orange); }
.card-type-cooking { border-left: 5px solid var(--accent-red); }
.card-type-serving { border-left: 5px solid var(--accent-green); }

.unified-card-header { padding: 0.5rem 0.8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); }
.unified-card-header .fw-bold { color: #fff; }
.unified-card-header .text-muted { color: var(--text-tertiary) !important; }
.unified-card-items { padding: 0.5rem 0.8rem; }
.unified-card-items .fw-bold { color: #fff !important; }
.unified-card-items .badge.bg-dark { background: #444 !important; }
.item-line { padding: 0.15rem 0; font-size: 0.95rem; color: var(--text-secondary); }
.item-instant { opacity: 0.4; text-decoration: line-through; font-size: 0.85rem; }
.unified-card-actions { padding: 0.5rem; }

.unified-card .text-info { background: #0a2a3e !important; color: var(--accent-cyan) !important; }
.unified-card .text-danger { background: #2a0a0a !important; color: #ff8a80 !important; border-left-color: var(--accent-red) !important; }
.unified-card .alert-warning { background: #2a1f00 !important; color: #ffcc02 !important; border-color: #4d3a00 !important; }

.unified-table-bar { background: var(--bg-header); border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
.unified-table-chip { display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0.8rem; border-radius: 0.6rem; font-size: 0.75rem; min-width: 60px; text-align: center; cursor: pointer; }
.tbl-name { font-weight: 800; font-size: 0.8rem; }
.tbl-status { font-size: 0.65rem; opacity: 0.85; }
.tbl-empty { background: rgba(76,175,80,0.15); color: #81c784; }
.tbl-ordering { background: rgba(255,152,0,0.15); color: #ffb74d; }
.tbl-dining { background: rgba(33,150,243,0.15); color: #64b5f6; }
.tbl-cleanup { background: rgba(244,67,54,0.15); color: #e57373; }
.tbl-other { background: rgba(255,255,255,0.05); color: #888; }


/* ═══════════════════════════════════════════
   테이블 주문내역 모달
   ═══════════════════════════════════════════ */
.td-order-card { background: var(--bg-surface); border-radius: var(--radius-md); margin-bottom: 0.6rem; overflow: hidden; }
.td-order-card.td-canceled { opacity: 0.4; text-decoration: line-through; }
.td-order-card.td-settled { opacity: 0.5; }
.td-order-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.8rem; background: var(--bg-card-hover); font-size: 0.85rem; }
.td-order-item { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.8rem; font-size: 0.9rem; border-bottom: 1px solid var(--border-subtle); }
.td-order-item:last-child { border-bottom: none; }
.td-section-label { font-size: 0.8rem; font-weight: 800; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); margin-bottom: 0.4rem; margin-top: 0.6rem; }
.td-label-unsettled { background: #2a1f00; color: #ffcc02; }
.td-label-settled { background: #0d1f0d; color: #66bb6a; }
.td-settled-bar { background: #0d1f0d; border: 1px solid #2e7d32; border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-top: 0.6rem; font-size: 0.9rem; color: #66bb6a; }
.td-unsettled-bar { background: #2a0a0a; border: 2px solid #c62828; border-radius: var(--radius-md); padding: 1rem; margin-top: 0.5rem; }


/* ═══════════════════════════════════════════
   구두주문 / 품절관리 모달
   ═══════════════════════════════════════════ */
.quick-order-dialog {
    background: #252528; border: 2px solid #555; border-radius: 1.5rem;
    padding: 1.5rem; max-width: 520px; width: 95%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1);
    transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.custom-modal-overlay.show .quick-order-dialog { transform: scale(1) translateY(0); }

.qo-table-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.qo-table-btn {
    padding: 0.8rem 0.5rem; border: 2px solid var(--border-medium); border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--text-primary); font-weight: 700; font-size: 0.9rem;
    cursor: pointer; transition: all 0.15s ease;
}
.qo-table-btn:hover { border-color: var(--accent-orange); background: #2a1f00; }
.qo-table-btn:active { transform: scale(0.95); }

.qo-category-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; }
.qo-cat-btn {
    padding: 0.4rem 0.8rem; border: 1px solid var(--border-medium); border-radius: 2rem;
    background: var(--bg-surface); color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all 0.15s;
}
.qo-cat-btn.active { background: #fff; color: #000; border-color: #fff; }

.qo-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; max-height: 30vh; overflow-y: auto; }
.qo-menu-btn {
    position: relative; padding: 0.6rem 0.4rem; border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary);
    text-align: center; cursor: pointer; transition: all 0.15s;
}
.qo-menu-btn:hover { border-color: var(--accent-blue); background: #0d1a2e; }
.qo-menu-btn:active { transform: scale(0.95); }
.qo-menu-selected { border-color: var(--accent-orange) !important; background: #2a1f00 !important; }
.qo-menu-soldout { opacity: 0.4; cursor: not-allowed !important; }
.qo-menu-soldout .qo-menu-name { text-decoration: line-through; color: var(--text-tertiary); }
.qo-soldout-label { display: block; font-size: 0.7rem; font-weight: 800; color: var(--accent-red); letter-spacing: 1px; }
.qo-menu-name { display: block; font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.qo-menu-price { display: block; font-size: 0.75rem; color: var(--text-tertiary); }
.qo-qty-badge {
    position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; background: var(--accent-red);
    color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800;
}
.qo-selected-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border-subtle); }
.qo-selected-item:last-of-type { border-bottom: none; }
.qo-serve-toggle { background: #0d1f0d; border: 2px solid #2e7d32; border-radius: var(--radius-md); padding: 0.8rem 1rem; }


/* ═══════════════════════════════════════════
   공용 커스텀 모달 (alert / confirm)
   ═══════════════════════════════════════════ */
.custom-modal-overlay {
    position: fixed; inset: 0; background: rgba(80,80,100,0.5); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); z-index: 10000; display: flex; align-items: center;
    justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.custom-modal-overlay.show { opacity: 1; visibility: visible; }
.custom-modal-dialog {
    background: #252528; border: 2px solid #555; border-radius: 1.5rem;
    padding: 2.5rem 2rem 2rem; max-width: 380px; width: 90%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1);
    transform: scale(0.85) translateY(20px); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.custom-modal-overlay.show .custom-modal-dialog { transform: scale(1) translateY(0); }
.custom-modal-icon {
    width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2rem; margin: 0 auto 1.2rem;
}
.custom-modal-title { font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; }
.custom-modal-desc { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1.8rem; line-height: 1.5; word-break: keep-all; }
.custom-modal-cancel-btn { background: var(--bg-surface) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-medium) !important; }
.custom-modal-cancel-btn:hover { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; }


/* ═══════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════ */
/* ─── 스크롤 힌트 ─── */
/* 스크롤 가능 영역에 하단 그라데이션 */
.scroll-hint {
    position: relative;
}
.scroll-hint::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: block;
    background: linear-gradient(transparent, var(--bg-base));
    pointer-events: none;
}
.scroll-hint-dark::after {
    background: linear-gradient(transparent, #000);
}

/* 페이지 하단 스크롤 안내 화살표 */
.scroll-down-hint {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(255,255,255,0.15);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    animation: bounce-down 2s infinite;
    pointer-events: none;
    transition: opacity 0.3s;
}
@keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@media (max-width: 768px) {
    /* 태블릿/폰 헤더 */
    .tablet-header { padding: 0.7rem 1rem; }

    /* 홈 버튼 */
    .tablet-big-btn { min-height: 100px; padding: 1.2rem 0.6rem; font-size: 1rem; }
    .tablet-big-btn i { font-size: 1.8rem; margin-bottom: 0.4rem; }

    /* 서비스 요청 버튼 */
    .request-btn { min-height: 100px; padding: 1.2rem 0.6rem; font-size: 1rem; }
    .request-btn i { font-size: 1.8rem; margin-bottom: 0.4rem; }

    /* 주방/통합 */
    .kitchen-columns, .unified-columns { flex-direction: column; }
    .kitchen-col, .unified-col { border-right: none; border-bottom: 1px solid var(--border-subtle); max-height: 40vh; }

    /* 직원/관리자 네비 */
    .staff-nav .d-flex { flex-wrap: wrap; gap: 0.3rem !important; }
    .staff-nav .btn { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }
    .admin-nav .d-flex { flex-wrap: wrap; gap: 0.3rem !important; }
    .admin-nav .btn { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }

    /* 통합 헤더 */
    .unified-header { padding: 0.4rem 0.6rem; }
    .unified-header .d-flex { gap: 0.2rem !important; }

    /* 주방 헤더 */
    .kitchen-header { padding: 0.5rem 0.8rem; }
    .kitchen-header .badge { font-size: 0.7rem !important; }
    .kitchen-header .btn { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }
    .kitchen-header h3 { font-size: 1rem !important; }

    /* 포털 */
    .portal-title { font-size: 2rem; }
    .portal-subtitle { font-size: 1rem; }
    .portal-flow-arrow { display: none; }
    .portal-flow { gap: 1rem; }
    .portal-hero { padding: 2rem 1.5rem 2rem; }

    /* ─── 서브 스크롤 완전 제거 — 모든 내용 펼침 ─── */

    /* 주방 */
    .kitchen-container {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }
    .kitchen-columns {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
    }
    .kitchen-col {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        border-right: none;
        border-bottom: 2px solid var(--border-medium);
    }
    .kitchen-col-body {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 통합 대시보드 */
    .unified-container {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }
    .unified-body-content {
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }
    .unified-columns {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }
    .unified-col {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        border-right: none;
        border-bottom: 2px solid var(--border-medium);
    }
    .unified-col-body {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 빈 칼럼 최소화 — 빈 상태 메시지 숨김 */
    .kitchen-col-body .empty-state,
    .unified-col-body .empty-state {
        display: none !important;
    }
    .kitchen-col-body:empty,
    .unified-col-body:empty {
        padding: 0 !important;
    }

    /* 테이블 바: 고정 하단 대신 일반 흐름 */
    .unified-table-bar {
        position: relative;
    }

    /* 스크롤 힌트 그라데이션 불필요 */
    .scroll-hint::after { display: none; }

    /* 통합 테이블바 */
    .unified-table-chip { padding: 0.2rem 0.5rem; min-width: 50px; font-size: 0.65rem; }
    .tbl-name { font-size: 0.7rem; }
    .tbl-status { font-size: 0.55rem; }

    /* 구두주문 */
    .qo-table-grid { grid-template-columns: repeat(4, 1fr); }
    .qo-menu-grid { grid-template-columns: repeat(2, 1fr); max-height: none !important; overflow: visible !important; }

    /* 모달 */
    .quick-order-dialog { padding: 1rem; }
    .custom-modal-dialog { padding: 1.5rem 1.2rem 1.5rem; }
}
@media (min-width: 1200px) {
    .tablet-container { max-width: 1024px; }
}
@media print {
    .staff-nav, .admin-nav, .kitchen-header, .tablet-header { display: none !important; }
}