/* ═══════════════════════════════════════════════════════════════
   이룸덴탈랩 - 스타일 시트
   수정 시 이 파일만 수정하면 됩니다.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg:#f1f4f9;
    --surface:#ffffff;
    --surface2:#f7f9fc;
    --surface3:#eef1f8;
    --border:#e0e5ef;
    --border-strong:#c8d0e0;
    --text:#1a1d2e;
    --text2:#4a5568;
    --text3:#8a95b0;
    --blue:#2563eb;
    --blue-l:#eff4ff;
    --blue-d:#1d4ed8;
    --blue-mid:#3b82f6;
    --green:#16a34a;
    --green-l:#f0fdf4;
    --yellow:#d97706;
    --yellow-l:#fffbeb;
    --orange:#ea580c;
    --orange-l:#fff7ed;
    --purple:#7c3aed;
    --purple-l:#f5f3ff;
    --red:#dc2626;
    --red-l:#fff1f1;
    --navy:#0f172a;
    --navy2:#1e293b;
    --navy3:#334155;
    --radius:14px;
    --radius-sm:8px;
    --radius-xs:5px;
    --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
    --shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
    --shadow-lg:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
    --sidebar-w:248px;
}

* { box-sizing:border-box;margin:0;padding:0 }
body { font-family:'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6 }
button { font-family:inherit;cursor:pointer }
input,select,textarea { font-family:inherit }

/* ── 로그인 화면 ── */
.login-screen { position:fixed;inset:0;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);display:flex;align-items:center;justify-content:center;z-index:1000;overflow:hidden }
.login-bg-shapes { position:absolute;inset:0;overflow:hidden;pointer-events:none }
.login-bg-shapes::before,.login-bg-shapes::after { content:'';position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out }
.login-bg-shapes::before { width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,0.15) 0%,transparent 70%);top:-100px;right:-100px }
.login-bg-shapes::after { width:300px;height:300px;background:radial-gradient(circle,rgba(22,163,74,0.1) 0%,transparent 70%);bottom:-50px;left:-50px;animation-delay:-10s }
.login-shape { position:absolute;font-size:24px;opacity:0.08;animation:floatShape 15s infinite ease-in-out }
.login-shape:nth-child(1) { top:20%;left:10%;animation-delay:0s }
.login-shape:nth-child(2) { top:60%;left:5%;animation-delay:-5s }
.login-shape:nth-child(3) { top:30%;right:10%;animation-delay:-3s }
.login-shape:nth-child(4) { top:70%;right:15%;animation-delay:-7s }
.login-shape:nth-child(5) { top:45%;left:20%;animation-delay:-2s }
@keyframes float { 0%,100% { transform:translate(0,0) rotate(0deg) } 50% { transform:translate(30px,-30px) rotate(5deg) } }
@keyframes floatShape { 0%,100% { transform:translateY(0) rotate(0deg) } 50% { transform:translateY(-20px) rotate(10deg) } }
.login-box { background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.1);text-align:center;position:relative;animation:slideUp 0.6s ease-out }
@keyframes slideUp { from { opacity:0;transform:translateY(30px) } to { opacity:1;transform:translateY(0) } }
.login-brand { width:120px;height:120px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 10px 30px rgba(37,99,235,0.3) }
.login-brand-icon { font-size:48px }
.login-title { font-size:26px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,#0f172a,#1e293b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
.login-sub { font-size:14px;color:var(--text3);margin-bottom:32px;font-weight:500 }
.login-form { text-align:left }
.form-group { margin-bottom:20px;position:relative }
.form-group label { display:block;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px }
.form-group .input-icon { position:absolute;left:14px;top:38px;font-size:16px;color:var(--text3);z-index:1 }
.form-group input { width:100%;padding:14px 14px 14px 44px;border:2px solid var(--border);border-radius:12px;font-size:14px;transition:all .2s;background:var(--surface) }
.form-group input:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.1) }
.form-group input::placeholder { color:var(--text3) }
.login-btn { width:100%;padding:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;transition:all .2s;margin-top:8px;position:relative;overflow:hidden }
.login-btn:hover { transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,99,235,0.4) }
.login-btn:active { transform:translateY(0) }
.login-btn.loading { pointer-events:none }
.login-btn.loading::after { content:'';position:absolute;width:20px;height:20px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;left:50%;top:50%;transform:translate(-50%,-50%) }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg) } }
.login-links { display:flex;justify-content:center;gap:16px;margin-top:24px;font-size:13px;padding-top:20px;border-top:1px solid var(--border) }
.login-links a { color:var(--text2);text-decoration:none;font-weight:500;transition:color .15s }
.login-links a:hover { color:var(--blue) }
.login-error { background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#dc2626;padding:14px 16px;border-radius:12px;font-size:13px;margin-bottom:20px;display:none;border:1px solid #fecaca;animation:shake 0.4s ease }
@keyframes shake { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-5px) } 75% { transform:translateX(5px) } }
.login-error.show { display:block }
.login-footer { position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,0.4);font-size:12px }

/* ── 메인 레이아웃 ── */
.app { min-height:100vh;display:none }
.app.logged-in { display:flex }

/* ── 사이드바 ── */
.sidebar {
    width:var(--sidebar-w);
    background:linear-gradient(180deg, #0f172a 0%, #162032 100%);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;z-index:100;
    border-right:1px solid rgba(255,255,255,0.04);
}
.sidebar-logo {
    padding:22px 20px 18px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    display:flex;align-items:center;gap:12px;
}
.sidebar-logo-icon {
    width:38px;height:38px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0;
    box-shadow:0 4px 12px rgba(37,99,235,0.35);
}
.sidebar-logo-text { flex:1;min-width:0; }
.sidebar-logo .logo-title { color:#fff;font-size:14px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sidebar-logo .logo-sub { color:rgba(255,255,255,.35);font-size:10px;margin-top:2px;letter-spacing:.3px }
.sidebar-nav { flex:1;padding:10px 0;overflow-y:auto }
.nav-section { padding:16px 20px 6px;font-size:9px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:1.5px;text-transform:uppercase }
.nav-item {
    display:flex;align-items:center;gap:10px;
    padding:10px 20px;
    color:rgba(255,255,255,.55);
    font-size:13px;font-weight:500;
    cursor:pointer;
    transition:all .18s;
    text-decoration:none;border:none;background:none;
    width:100%;text-align:left;
    position:relative;
    border-radius:0;
    margin:1px 0;
}
.nav-item:hover {
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.95);
}
.nav-item.active {
    background:rgba(37,99,235,.2);
    color:#93b4ff;
}
.nav-item.active::before {
    content:'';
    position:absolute;left:0;top:0;bottom:0;
    width:3px;background:#2563eb;
    border-radius:0 2px 2px 0;
}
.nav-item .icon { font-size:16px;width:22px;text-align:center;flex-shrink:0 }
.nav-item .nav-label { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.nav-item .badge {
    margin-left:auto;
    background:#ef4444;color:#fff;
    font-size:10px;font-weight:700;
    padding:2px 7px;border-radius:999px;
    flex-shrink:0;
}
.sidebar-footer {
    padding:12px 16px 16px;
    border-top:1px solid rgba(255,255,255,.07);
}
.sidebar-user-card {
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    margin-bottom:10px;
}
.sidebar-user-avatar {
    width:32px;height:32px;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;flex-shrink:0;
}
.sidebar-user-info { flex:1;min-width:0; }
.sidebar-user-name { font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sidebar-user-role { font-size:10px;color:rgba(255,255,255,.4);margin-top:1px }
.logout-btn {
    width:100%;padding:9px;border-radius:8px;border:none;
    background:rgba(239,68,68,.15);
    color:rgba(252,165,165,.8);
    font-size:12px;font-weight:600;cursor:pointer;
    transition:all .18s;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.logout-btn:hover { background:rgba(239,68,68,.25);color:#fff }

/* ── 메인 콘텐츠 영역 ── */
.main { margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0 }

/* ── 탑바 ── */
.topbar {
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:0 28px;height:62px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:50;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.topbar-left { display:flex;align-items:center;gap:0 }
.topbar-breadcrumb {
    display:flex;align-items:center;gap:6px;
}
.topbar-breadcrumb .bc-home {
    color:var(--text3);font-size:12px;font-weight:500;
}
.topbar-breadcrumb .bc-sep {
    color:var(--border-strong);font-size:12px;
}
.topbar-title {
    font-size:16px;font-weight:700;color:var(--text);
    display:flex;align-items:center;gap:8px;
}
.topbar-title-icon {
    width:30px;height:30px;
    background:var(--blue-l);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
}
.topbar-right { display:flex;align-items:center;gap:10px }
.topbar-date {
    font-size:12px;color:var(--text3);font-weight:500;
    padding:5px 12px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:999px;
    white-space:nowrap;
}
.topbar-user {
    padding:5px 14px;border-radius:999px;
    font-size:12px;font-weight:700;
    background:var(--blue-l);color:var(--blue);
    border:1px solid rgba(37,99,235,.15);
}
.topbar-user.admin { background:var(--yellow-l);color:var(--yellow);border-color:rgba(217,119,6,.2) }
.content { padding:24px 28px }

/* ── 공통 컴포넌트 ── */
.btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;
    border-radius:var(--radius-sm);border:none;
    font-size:13px;font-weight:600;cursor:pointer;
    transition:all .18s;text-decoration:none;white-space:nowrap;
    letter-spacing:-.1px;
}
.btn-primary { background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25) }
.btn-primary:hover { background:var(--blue-d);box-shadow:0 4px 12px rgba(37,99,235,.35);transform:translateY(-1px) }
.btn-secondary { background:var(--surface);color:var(--text2);border:1px solid var(--border) }
.btn-secondary:hover { background:var(--surface2);color:var(--text);border-color:var(--border-strong) }
.btn-danger { background:var(--red-l);color:var(--red);border:1px solid rgba(220,38,38,.2) }
.btn-danger:hover { background:#fecaca }
.btn-sm { padding:5px 12px;font-size:12px }
.btn-ghost { background:none;border:none;color:var(--text3);padding:5px 8px }
.btn-ghost:hover { color:var(--text);background:var(--surface2) }

.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card-header {
    padding:16px 22px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--surface);
    border-radius:var(--radius) var(--radius) 0 0;
}
.card-title {
    font-size:14px;font-weight:700;color:var(--text);
    display:flex;align-items:center;gap:7px;
}
.card-body { padding:20px 22px }

/* ── 상태 배지 ── */
.status {
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 12px;border-radius:6px;
    font-size:11px;font-weight:700;
    letter-spacing:.2px;
}
.status::before { content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0 }
.status-working { background:#fffbeb;color:#92400e;border:none }
.status-working::before { background:#f59e0b }
.status-design { background:#f5f3ff;color:#5b21b6;border:none }
.status-design::before { background:#8b5cf6 }
.status-manufacturing { background:#fff7ed;color:#c2410c;border:none }
.status-manufacturing::before { background:#ea580c }
.status-ship { background:var(--blue-l);color:#1e40af;border:none }
.status-ship::before { background:#2563eb }
.status-done { background:var(--green-l);color:#166534;border:none }
.status-done::before { background:#16a34a }

/* ── 히어로 스탯 ── */
.hero-stats { display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px }
.hero-stat {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px 22px 18px;
    display:flex;flex-direction:column;gap:0;
    position:relative;overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform .18s,box-shadow .18s;
}
.hero-stat:hover { transform:translateY(-2px);box-shadow:var(--shadow-md) }
.hero-stat-top {
    display:flex;align-items:flex-start;justify-content:space-between;
    margin-bottom:12px;
}
.hero-stat-icon {
    width:40px;height:40px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0;
}
.hs-working .hero-stat-icon { background:#fffbeb }
.hs-design .hero-stat-icon { background:#f5f3ff }
.hs-manufacturing .hero-stat-icon { background:#fff7ed }
.hs-ship .hero-stat-icon { background:var(--blue-l) }
.hs-done .hero-stat-icon { background:var(--green-l) }
.hero-num {
    font-size:38px;font-weight:800;
    font-family:'DM Mono',monospace;line-height:1;
    margin-bottom:4px;
}
.hs-working .hero-num { color:#d97706 }
.hs-design .hero-num { color:#7c3aed }
.hs-manufacturing .hero-num { color:#ea580c }
.hs-ship .hero-num { color:#1d4ed8 }
.hs-done .hero-num { color:#15803d }
.hero-label { font-size:12px;font-weight:600;color:var(--text2) }
.hero-stat-bar {
    height:3px;border-radius:999px;
    margin-top:14px;
    background:var(--surface3);overflow:hidden;
}
.hero-stat-bar-fill {
    height:100%;border-radius:999px;transition:width .6s ease;
}
.hs-working .hero-stat-bar-fill { background:#f59e0b }
.hs-design .hero-stat-bar-fill { background:#8b5cf6 }
.hs-manufacturing .hero-stat-bar-fill { background:#ea580c }
.hs-ship .hero-stat-bar-fill { background:#2563eb }
.hs-done .hero-stat-bar-fill { background:#16a34a }

/* ── 필터바 ── */
.filter-bar {
    display:flex;gap:6px;align-items:center;flex-wrap:wrap;
    margin-bottom:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 14px;
    box-shadow:var(--shadow);
}
.filter-bar-left { display:flex;gap:5px;align-items:center;flex-wrap:wrap;flex:1 }
.filter-bar-right { display:flex;gap:8px;align-items:center;flex-shrink:0 }
.filter-tab {
    padding:6px 14px;
    border-radius:7px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text2);
    font-size:12px;font-weight:600;
    cursor:pointer;transition:all .15s;
    white-space:nowrap;
}
.filter-tab .status-count {
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--blue);color:#fff;
    border-radius:999px;
    padding:1px 6px;font-size:10px;
    margin-left:4px;min-width:18px;
}
.filter-tab:hover { background:var(--surface3);color:var(--text);border-color:var(--border) }
.filter-tab.active {
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
    box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.filter-tab.active .status-count { background:rgba(255,255,255,.3) }
.filter-divider {
    width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;
}
.filter-search { position:relative }
.filter-search input {
    padding:7px 12px 7px 32px;
    border:1px solid var(--border);
    border-radius:8px;font-size:12px;
    width:200px;background:var(--surface2);
    transition:all .18s;color:var(--text);
}
.filter-search input:focus { outline:none;border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 3px rgba(37,99,235,.08) }
.filter-search::before { content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none }
.filter-select {
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:12px;font-weight:600;
    background:var(--surface2);
    color:var(--text2);
    cursor:pointer;
    transition:border-color .15s;
}
.filter-select:focus { outline:none;border-color:var(--blue) }

/* ── 테이블 ── */
.case-table { width:100%;border-collapse:collapse }
.case-table thead tr { background:var(--surface2) }
.case-table thead th {
    padding:11px 14px;
    font-size:11px;font-weight:700;
    color:var(--text3);
    text-align:left;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
    letter-spacing:.4px;
    text-transform:uppercase;
}
.case-table thead th:nth-child(4),
.case-table thead th:nth-child(6),
.case-table thead th:nth-child(8),
.case-table thead th:nth-child(9) { text-align:center }
.case-table td:nth-child(4),
.case-table td:nth-child(6),
.case-table td:nth-child(8),
.case-table td:nth-child(9) { text-align:center }
.case-table thead th:first-child { border-radius:var(--radius-sm) 0 0 0;padding-left:18px }
.case-table thead th:last-child { border-radius:0 var(--radius-sm) 0 0;padding-right:18px }
.case-table tbody tr { transition:background .1s }
.case-table tbody tr:nth-child(even) { background:#fafbfd }
.case-table tbody tr:hover { background:#eef2fb }
.case-table td {
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    font-size:13px;color:var(--text);
    vertical-align:middle;
}
.case-table tbody td:first-child { padding-left:18px }
.case-table tbody td:last-child { padding-right:18px }
.case-table .patient-name { font-weight:700;color:var(--text) }
.case-table .clinic-name { font-size:12px;color:var(--text2) }
.case-table .tooth-num {
    font-family:'DM Mono',monospace;
    font-size:13px;font-weight:700;
    background:linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%);
    border:2px solid #818cf8;
    border-radius:6px;
    padding:3px 10px;
    display:inline-block;
    color:#4338ca;
    white-space:nowrap;
}
.row-actions { display:flex;gap:4px;justify-content:center;opacity:1 }
.case-table tbody tr:hover .row-actions { opacity:1 }
.action-btn {
    width:28px;height:28px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--surface);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;cursor:pointer;
    transition:all .15s;
    color:var(--text2);
}
.action-btn:hover { background:var(--blue-l);border-color:var(--blue);color:var(--blue) }

/* ── 긴급/리메이크 ── */
.row-urgent { background:#fff8f8 !important }
.row-urgent:hover { background:#fff1f1 !important }
.row-remake { background:#fff8f8 !important }

/* ── 출고 임박 배지 ── */
.ship-badge {
    display:inline-flex;align-items:center;gap:3px;
    padding:2px 7px;border-radius:5px;
    font-size:10px;font-weight:700;
}
.ship-badge-today { background:#fff3cd;color:#856404 }
.ship-badge-late { background:#fff1f1;color:#dc2626 }
.ship-badge-soon { background:#e7f3ff;color:#0d47a1 }

/* ── 체크박스 ── */
.case-checkbox, #selectAll { width:16px;height:16px;cursor:pointer;accent-color:var(--blue) }
#selectAll { width:15px;height:15px }

/* ── 반응형 ── */
@media(max-width:1100px) { .hero-stats { grid-template-columns:repeat(3,1fr) } }
@media(max-width:900px) {
    :root { --sidebar-w:210px }
    .hero-stats { grid-template-columns:1fr 1fr }
    .content { padding:16px 18px }
}

/* ── 모바일 ── */
.mobile-menu-btn { display:none;background: none;border: none;font-size: 24px;cursor: pointer;padding: 8px;margin-right: 8px;color: var(--text); }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99; }
.sidebar-overlay.open { display:block; }

@media(max-width:768px) {
    .mobile-menu-btn { display:block; }
    .sidebar { transform:translateX(-100%);transition:transform .3s ease; }
    .sidebar.mobile-open { transform:translateX(0); }
    .main { margin-left:0 }
    .topbar { padding:0 16px;height:56px; }
    .topbar-date { display:none; }
    .topbar-right { gap:6px; }
    .topbar-right .btn { padding:6px 10px;font-size:12px; }
    .hero-stats { grid-template-columns:1fr 1fr;gap:10px; }
    .hero-stat { padding:12px; }
    .case-table { font-size:11px;table-layout:auto; }
    .case-table th,.case-table td { padding:6px 4px;white-space:nowrap; }
    .case-table .tooth-num { font-size:11px;padding:2px 6px; }
    .case-table .row-actions { opacity:1;gap:2px; }
    .case-table .row-actions .btn-sm { padding:4px 6px;font-size:11px;min-height:auto; }
    .card-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .btn { min-height:44px;padding:10px 16px;font-size:14px; }
    .btn-sm { min-height:36px;padding:8px 12px;font-size:13px; }
    .form-input,.form-select,.form-textarea { min-height:44px;font-size:16px; }
    .modal-bg { padding:10px; }
    .modal { max-height:85vh;border-radius:12px; }
    .modal-header { padding:16px; }
    .modal-body { padding:16px; }
    .modal-footer { padding:12px 16px;flex-wrap:wrap; }
    .modal-footer .btn { flex:1;min-width:100px; }
    .toast-container { left:10px;right:10px;bottom:10px; }
    .toast { max-width:100%; }
}

@media(max-width:480px) {
    .topbar-title { font-size:14px; }
    .topbar-title-icon { width:26px;height:26px;font-size:13px; }
    .content { padding:12px; }
    .hero-stats { grid-template-columns:1fr; }
    .case-table { font-size:10px;table-layout:auto; }
    #caseTableContainer { overflow-x:auto;-webkit-overflow-scrolling:touch; }
    .case-table th,.case-table td { padding:5px 3px; }
    .case-table .tooth-num { font-size:10px;padding:1px 4px; }
    .case-table .row-actions .btn-sm { padding:3px 5px;font-size:10px; }
}

/* ── 모달 ── */
.modal-bg { position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:20px }
.modal-bg.open { opacity:1;pointer-events:all }
.modal { background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(20px);transition:transform .25s }
.modal-bg.open .modal { transform:translateY(0) }
.modal-header { padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between }
.modal-title { font-size:15px;font-weight:700 }
.modal-body { padding:20px 24px }
.modal-footer { padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface2);border-radius:0 0 16px 16px }
.form-row { margin-bottom:14px }
.form-label { font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;display:block }
.form-label .req { color:var(--red) }
.form-input,.form-select,.form-textarea { width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;transition:border-color .15s;background:var(--surface) }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.08) }
.form-textarea { min-height:80px;resize:vertical }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.form-section { margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border) }
.form-section:last-child { border-bottom:none;margin-bottom:0;padding-bottom:0 }
.form-section-title { font-size:13px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:6px }
.radio-group { display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px }
.radio-label { display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;padding:6px 12px;border-radius:var(--radius-sm);transition:background .15s }
.radio-label:hover { background:var(--surface2) }
.radio-label input[type="radio"] { margin:0 }
.checkbox-label { display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px }
.checkbox-label input { width:16px;height:16px;margin:0 }
.remake-label { background:#fff5f5;border:1px solid var(--red);color:var(--red);font-weight:600 }
.remake-label:hover { background:#fff0f0 }

/* ── 고급 검색 필터 ── */
.quick-date-filters { display:flex;gap:4px; }
.quick-date-btn { padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s; }
.quick-date-btn:hover { border-color:var(--blue);color:var(--blue);background:var(--blue-l); }
.quick-date-btn.active { background:var(--blue);color:#fff;border-color:var(--blue); }
.filter-date-input { padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--surface); }
.filter-date-input:focus { border-color:var(--blue);outline:none; }

/* ── 치아 선택기 ── */
.tooth-selector { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center }
.tooth-selector.open { display:flex }
.tooth-modal { background:var(--surface);border-radius:16px;padding:24px;max-width:500px;width:95%;max-height:90vh;overflow-y:auto }
.tooth-modal h3 { font-size:16px;font-weight:700;margin-bottom:16px;text-align:center }
.tooth-quadrant { margin-bottom:16px }
.tooth-quadrant-title { font-size:12px;font-weight:700;color:var(--text3);margin-bottom:8px;text-align:center }
.tooth-row { display:flex;justify-content:center;gap:4px;flex-wrap:wrap }
.tooth-btn { width:36px;height:36px;border-radius:8px;border:2px solid var(--border);background:var(--surface);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s }
.tooth-btn:hover { border-color:var(--blue);background:var(--blue-l) }
.tooth-btn.selected { background:var(--blue);color:#fff;border-color:var(--blue) }
.tooth-selected-list { margin-top:16px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm);text-align:center;min-height:44px }
.tooth-selected-list span { display:inline-block;padding:4px 10px;background:var(--blue);color:#fff;border-radius:999px;font-size:12px;font-weight:600;margin:2px }
.tooth-modal-btns { display:flex;gap:8px;justify-content:center;margin-top:16px }

/* ── 사진 업로드 ── */
.photo-upload { display:flex;gap:8px;flex-wrap:wrap;margin-top:8px }
.photo-thumb { width:80px;height:80px;border-radius:8px;object-fit:cover;border:2px solid var(--border);cursor:pointer;transition:transform .15s }
.photo-thumb:hover { transform:scale(1.05);border-color:var(--blue) }
.photo-add-btn { width:80px;height:80px;border-radius:8px;border:2px dashed var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;color:var(--text3);transition:all .15s }
.photo-add-btn:hover { border-color:var(--blue);color:var(--blue) }
.photo-count { font-size:11px;color:var(--text3);margin-top:4px }
.case-table .photo-add-btn { width:32px;height:32px;font-size:16px;border-width:1px }
.case-table .photo-thumb { width:32px;height:32px;border-width:1px }
.storage-warning { background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:10px 14px;border-radius:8px;font-size:12px;margin-bottom:12px;display:none }
.storage-warning.show { display:block }
.backup-notice { background:#e7f3ff;border:1px solid #2196F3;color:#0d47a1;padding:10px 14px;border-radius:8px;font-size:12px;margin-top:8px }

/* ── 가격 숨김 ── */
.price-hidden .price-col { display:none }
.price-hidden th.price-col { display:none }
.clinic-only { display:none }

/* ── 토스트 ── */
.toast-container { position:fixed;bottom:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:10px }
.toast { background:#fff;border-left:4px solid #2563eb;padding:14px 18px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);max-width:340px;animation:slideIn 0.3s ease }
.toast.clinic-toast { border-left-color:#16a34a }
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px }
.toast-title { font-weight:700;color:#1e293b;font-size:13px }
.toast-close { background:none;border:none;font-size:16px;cursor:pointer;color:#94a3b8;padding:0 }
.toast-body { font-size:12px;color:#475569;line-height:1.5 }
.toast-time { font-size:10px;color:#94a3b8;margin-top:4px }
.toast .btn { padding:6px 12px;font-size:12px;border-radius:6px }

/* ── 날짜 범위 ── */
.date-range-bar { padding:12px 16px;background:#f8fafc;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.date-range-bar[style*="display: flex"] { display:flex !important; }

/* ── 사진 컨테이너 ── */
#caseTableContainer { overflow-x:auto; }

/* ── 상태 선택 ── */
.status-select {
    padding:4px 8px;border-radius:999px;border:1.5px solid;
    background:white;font-size:12px;font-weight:700;cursor:pointer;
}