@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ===== CSS Variables ===== */
:root {
  --color-text-primary: #111;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-bg-primary: #fff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #fafafa;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-accent: #b8a066;
  --color-success: #27ae60;
  --color-danger: #e74c3c;
  --color-warning: #e67e22;
  --color-info: #2c7be5;
  --color-black: #000;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #fff;
    padding: 0;
    color: #111;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ===== Page Transition Progress Bar ===== */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #b8a066;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(184, 160, 102, 0.5), 0 0 4px rgba(184, 160, 102, 0.3);
}
.page-progress::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    width: 60px;
    height: 5px;
    background: rgba(184, 160, 102, 0.4);
    border-radius: 50%;
    filter: blur(3px);
}

/* ===== Page Nav ===== */
.page-nav {
    height: 60px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}
.page-nav .logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #111;
    text-decoration: none;
}
.page-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.page-nav a.back {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
}
.page-nav a.back:hover { opacity: 0.5; }

/* ===== Admin Badge ===== */
.admin-badge {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 2px 8px;
    background: #b8a066;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===== Container & Heading ===== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 15px;
}
h1 {
    font-family: 'Cormorant Garamond', serif;
    text-align: center;
    margin-bottom: 20px;
    color: #111;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 3px;
}

/* ===== Form Section ===== */
.form-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    overflow: hidden;
}
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.form-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #111;
    font-weight: 400;
    letter-spacing: 2px;
}
.form-header .toggle-icon {
    font-size: 18px;
    color: #999;
    transition: transform 0.3s;
}
.form-body { padding: 20px 25px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 4px;
    font-weight: 500;
    color: #111;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
    font-family: 'Noto Sans KR', sans-serif;
    background: transparent;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: #000;
}
.form-group.wide { grid-column: span 3; }
.form-group textarea {
    height: 50px;
    resize: vertical;
    border: 1px solid #e0e0e0;
    padding: 8px;
}
.form-group textarea:focus { border-color: #000; }
.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.required { color: #e74c3c; }

/* ===== Buttons ===== */
.btn-submit {
    padding: 10px 30px;
    background: #000;
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Noto Sans KR', sans-serif;
}
.btn-submit:hover { background: #333; }
.btn-edit, .btn-delete, .btn-save, .btn-cancel {
    padding: 4px 10px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Noto Sans KR', sans-serif;
}
.btn-edit { background: #fff; color: #111; border: 1px solid #111; }
.btn-edit:hover { background: #111; color: #fff; }
.btn-delete { background: #fff; color: #999; border: 1px solid #ccc; }
.btn-delete:hover { border-color: #e74c3c; color: #e74c3c; }
.btn-save { background: #111; color: #fff; }
.btn-save:hover { background: #333; }
.btn-cancel { background: #fff; color: #999; border: 1px solid #ccc; }
.btn-cancel:hover { border-color: #111; color: #111; }
.btn-back {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #111;
    text-decoration: underline;
    font-size: 12px;
    letter-spacing: 1px;
}
.btn-back:hover { opacity: 0.5; }

/* ===== Search Bar ===== */
.search-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.search-bar input {
    flex: 1;
    max-width: 300px;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
    font-family: 'Noto Sans KR', sans-serif;
}
.search-bar input:focus { border-bottom-color: #000; }
.search-bar .btn-search-clear {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Noto Sans KR', sans-serif;
}
.search-bar .btn-search-clear:hover { border-color: #111; color: #111; }

/* ===== Filter Tabs ===== */
.filter-tabs { display: flex; gap: 6px; margin-bottom: 15px; flex-wrap: wrap; }
.filter-tab {
    padding: 6px 16px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s;
    font-family: 'Noto Sans KR', sans-serif;
}
.filter-tab:hover { border-color: #111; color: #111; }
.filter-tab.active { background: #111; color: #fff; border-color: #111; }

/* ===== Table Section ===== */
.table-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-section h2 {
    margin-bottom: 15px;
    font-size: 14px;
    color: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
    background: transparent;
    color: #111;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid #000;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
tbody td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    font-size: 12px;
}
tbody tr:hover { background: #fafafa; }
.no-data {
    text-align: center;
    color: #999;
    padding: 30px 20px;
    font-size: 13px;
}
.action-btns { display: flex; gap: 4px; justify-content: center; }

/* ===== Inline Edit ===== */
.edit-input {
    padding: 3px 5px;
    border: none;
    border-bottom: 1px solid #000;
    font-size: 11px;
    width: 100%;
    min-width: 50px;
    outline: none;
    font-family: 'Noto Sans KR', sans-serif;
}
.edit-select {
    padding: 3px 4px;
    border: none;
    border-bottom: 1px solid #000;
    font-size: 11px;
    outline: none;
    font-family: 'Noto Sans KR', sans-serif;
    background: transparent;
}

/* ===== Status Badge ===== */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ===== Badge Variants ===== */
.badge-대기, .badge-주문대기, .badge-문의대기 { border: 1px solid #999; color: #666; }
.badge-처리중, .badge-주문완료 { border: 1px solid #111; color: #111; }
.badge-문의중 { border: 1px solid #b8a066; color: #b8a066; }
.badge-문의완료 { border: 1px solid #111; color: #111; }
.badge-완료, .badge-입고완료, .badge-출고완료, .badge-수리완료 { background: #111; color: #fff; }
.badge-답변완료 { border: 1px solid #b8a066; color: #b8a066; }
.badge-접수 { border: 1px solid #999; color: #666; }
.badge-수리중, .badge-보류중, .badge-보류 { border: 1px solid #b8a066; color: #b8a066; }
.badge-부분완료 { border: 1px solid #e67e22; color: #e67e22; }
.badge-본사주문, .badge-국내수리, .badge-본사주문-국내수리, .badge-본사문의 { border: 1px solid #2c7be5; color: #2c7be5; }
.badge-일본발송 { border: 1px solid #e67e22; color: #e67e22; }
.badge-거래처답변완료 { border: 1px solid #27ae60; color: #27ae60; }
.status-접수, .status-주문대기 { border: 1px solid #999; color: #666; }
.status-처리중, .status-주문완료 { border: 1px solid #111; color: #111; }
.status-완료, .status-입고완료 { background: #111; color: #fff; }
.status-준비완료 { border: 1px solid #2c7be5; color: #2c7be5; }
.status-출고완료 { background: #111; color: #fff; }
.status-보류 { border: 1px solid #e67e22; color: #e67e22; }
.status-취소 { border: 1px solid #e74c3c; color: #e74c3c; }
.cat-전화주문, .cat-재고주문, .cat-수리건, .cat-문의, .cat-정상반입, .cat-불량반입 { border: 1px solid #999; color: #666; }

/* ===== Inventory Badges ===== */
.badge-데드스탁 { background: #e74c3c; color: #fff; }
.badge-부족 { border: 1px solid #e67e22; color: #e67e22; }
.badge-정상 { border: 1px solid #27ae60; color: #27ae60; }
.alert-banner { background: #fff3cd; border: 1px solid #e67e22; padding: 10px 20px; margin-bottom: 20px; font-size: 12px; letter-spacing: 0.5px; }

/* ===== Receivable Badges ===== */
.badge-미수 { border: 1px solid #e74c3c; color: #e74c3c; }
.badge-완납 { background: #27ae60; color: #fff; }
.badge-미정산 { border: 1px solid #999; color: #666; }
.badge-부분입금 { border: 1px solid #e67e22; color: #e67e22; }
.badge-연체 { background: #e74c3c; color: #fff; }
.badge-과입금 { background: #2980b9; color: #fff; }

/* ===== Brand Type Badges ===== */
.badge-dt { border: 1px solid #27ae60; color: #27ae60; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-agency { border: 1px solid #2980b9; color: #2980b9; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }

/* ===== Transfer/Recall Status Badges ===== */
.badge-확인 { border: 1px solid #b8a066; color: #b8a066; }
.badge-이동완료 { background: #111; color: #fff; }
.badge-이동중 { background: #f39c12; color: #fff; }
.badge-이동불가 { background: #c0392b; color: #fff; }
.badge-이동 { background: #2c7be5; color: #fff; }
.badge-회수 { background: #e67e22; color: #fff; }

/* ===== HQ Order Status Badges (품절/단종/회수불가) ===== */
.badge-품절 { background: #e74c3c; color: #fff; }
.badge-단종 { background: #8e44ad; color: #fff; }
.badge-회수불가 { background: #c0392b; color: #fff; }

/* ===== Release/Backorder Badges ===== */
.badge-출고대기 { border: 1px solid #2c7be5; color: #2c7be5; }
.badge-준비완료 { border: 1px solid #27ae60; color: #27ae60; }
.badge-부분출고 { border: 1px solid #e67e22; color: #e67e22; }
.badge-백오더 { border: 1px solid #e67e22; color: #e67e22; }
.badge-물건이동중 { border: 1px solid #8e44ad; color: #8e44ad; }

/* ===== Best Seller & Standard Part Badges ===== */
.badge-best { background: #b8a066; color: #fff; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-rank-a { background: #b8a066; color: #fff; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-rank-b { border: 1px solid #b8a066; color: #b8a066; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-rank-c { border: 1px solid #ccc; color: #ccc; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-상시부속 { border: 1px solid #8e44ad; color: #8e44ad; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.badge-부속부족 { background: #e67e22; color: #fff; font-size: 9px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }

/* ===== New Feature Badges ===== */
.badge-수리불가 { background: #c0392b; color: #fff; }
.badge-출고정지 { background: #e74c3c; color: #fff; }
.badge-인식완료 { background: #27ae60; color: #fff; font-size: 9px; padding: 1px 6px; }
.badge-미인식 { border: 1px solid #999; color: #666; font-size: 9px; padding: 1px 6px; }
.badge-프리포마 { border: 1px solid #2c7be5; color: #2c7be5; font-size: 9px; padding: 1px 6px; }
.badge-인보이스 { border: 1px solid #27ae60; color: #27ae60; font-size: 9px; padding: 1px 6px; }

/* ===== Alert Widget (Dashboard) ===== */
.alert-widget {
    border: 2px solid #e74c3c;
    margin-bottom: 24px;
    background: #fff;
    overflow: hidden;
}
.alert-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fca5a5;
}
.alert-widget-icon {
    font-size: 20px;
    line-height: 1;
    color: #e74c3c;
}
.alert-widget-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e74c3c;
}
.alert-widget-count {
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.alert-widget-list {
    max-height: 300px;
    overflow-y: auto;
}
.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}
.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: #fafafa; }
.alert-item-icon { font-size: 18px; flex-shrink: 0; }
.alert-item-content { flex: 1; min-width: 0; }
.alert-item-title { font-weight: 600; color: #111; margin-bottom: 2px; }
.alert-item-msg { color: #666; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item-link {
    flex-shrink: 0;
    font-size: 11px;
    color: #b8a066;
    text-decoration: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.alert-item-link:hover { text-decoration: underline; }

/* ===== Block Status Badges ===== */
.badge-거래정지 { background: #e74c3c; color: #fff; }
.badge-면제 { border: 1px solid #27ae60; color: #27ae60; background: transparent; }

/* ===== Warranty Badge ===== */
.warranty-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; margin-left: 4px; background: #27ae60; color: #fff; letter-spacing: 0.5px; vertical-align: middle; }

/* ===== Lens Badge ===== */
.lens-badge { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.lens-yes { background: #111; color: #fff; }
.lens-no { border: 1px solid #999; color: #666; }

/* ===== Common Elements ===== */
.company-name { text-align: center; color: #666; font-size: 13px; margin-bottom: 40px; letter-spacing: 1px; }
.error-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; display: none; }
.success-msg { color: #27ae60; font-size: 13px; margin-top: 10px; display: none; }
.price-cell { font-weight: 600; color: #111; }
.amount-cell { font-weight: 700; color: #111; }

/* ===== Slide Panel ===== */
.slide-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 999;
}
.slide-overlay.active { display: block; }
.slide-panel {
    position: fixed;
    top: 0;
    right: -460px;
    width: 440px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    border-left: 1px solid #e0e0e0;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 30px 25px;
}
.slide-panel.active { right: 0; }
.slide-panel h2,
.slide-panel h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}
.edit-group { margin-bottom: 16px; }
.edit-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 4px;
}
.edit-group input,
.edit-group select,
.edit-group textarea {
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    outline: none;
    font-family: 'Noto Sans KR', sans-serif;
    background: transparent;
    transition: border 0.2s;
}
.edit-group input:focus,
.edit-group select:focus,
.edit-group textarea:focus {
    border-bottom-color: #000;
}
.edit-group textarea {
    height: 60px;
    resize: vertical;
    border: 1px solid #e0e0e0;
    padding: 8px;
}
.edit-group textarea:focus { border-color: #000; }
.edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}
.edit-actions button {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    border: none;
}
.edit-actions .btn-save { background: #111; color: #fff; }
.edit-actions .btn-save:hover { background: #333; }
.edit-actions .btn-cancel { background: #fff; color: #999; border: 1px solid #ccc; }
.edit-actions .btn-cancel:hover { border-color: #111; color: #111; }

/* ===== Status Tooltip ===== */
.status-wrap { position: relative; display: inline-block; cursor: pointer; }
.status-tooltip { display: none; position: fixed; background: #222; color: #fff; padding: 8px 12px; font-size: 11px; font-weight: 400; letter-spacing: 0; white-space: nowrap; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.25); pointer-events: none; border-radius: 3px; }
.status-tooltip table { border-collapse: collapse; width: 100%; background: transparent; }
.status-tooltip table tr { background: transparent; }
.status-tooltip table td { padding: 3px 0; color: #fff; border: none; font-size: 11px; background: transparent; }
.status-tooltip table td:first-child { padding-right: 12px; color: rgba(255,255,255,0.6); }
.status-tooltip table td:last-child { text-align: right; font-weight: 500; }
/* tooltip display controlled by JS for proper positioning */

/* ===== Released / Done rows ===== */
tbody > tr.released > td { background: #f0f0f0 !important; color: #aaa; }
tbody > tr.released > td .status-badge { opacity: 0.6; }
tbody > tr.released > td .action-btns button { opacity: 0.6; }
tbody > tr.done > td { background: #f0f0f0 !important; color: #aaa; }
tbody > tr.done > td .status-badge { opacity: 0.6; }
tbody > tr.done > td .action-btns button { opacity: 0.6; }

/* ===== Loading Overlay ===== */
.loading-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.85);
    z-index: 50;
    align-items: center;
    justify-content: center;
}
.loading-overlay.active { display: flex; }
.loading-spinner {
    width: 28px; height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: #111;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast Notification ===== */
.toast-container {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 340px;
}
.toast.toast-show { transform: translateX(0); }
.toast-success { background: #111; color: #fff; }
.toast-error { background: #e74c3c; color: #fff; }
.toast-info { background: #fff; color: #111; border: 1px solid #e0e0e0; }

/* ===== Notification Bell ===== */
.notification-bell {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.bell-icon {
    font-size: 18px;
    line-height: 1;
    filter: grayscale(1);
    transition: filter 0.2s;
}
.notification-bell:hover .bell-icon { filter: grayscale(0); }
.bell-count {
    position: absolute;
    top: -6px; right: -8px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.notification-dropdown {
    display: none;
    position: absolute;
    top: 36px; right: -10px;
    width: 320px;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    overflow: hidden;
}
.notification-dropdown.active { display: block; }
.noti-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}
.noti-header span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}
.noti-header button {
    background: none;
    border: none;
    color: #b8a066;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
}
.noti-header button:hover { text-decoration: underline; }
.noti-list {
    max-height: 340px;
    overflow-y: auto;
}
.noti-item {
    padding: 10px 16px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 12px;
}
.noti-item.unread { background: #fdf8ee; }
.noti-item:hover { background: #fafafa; }
.noti-msg { color: #333; margin-bottom: 3px; }
.noti-date { color: #999; font-size: 11px; }
.noti-empty { padding: 30px 16px; text-align: center; color: #999; font-size: 12px; }
.noti-item.noti-critical { background: #fff5f5; border-left: 3px solid #e74c3c; }
.noti-item.noti-clickable { cursor: pointer; }
.noti-item.noti-clickable:hover { background: #f0ede6; }
.noti-item.noti-clickable.unread:hover { background: #f5eed8; }
.noti-goto { color: #b8a066; font-weight: 600; margin-left: 6px; }

/* ===== Sortable Headers ===== */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 16px !important;
}
th.sortable:hover { color: #b8a066; }
th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #ccc;
}
th.sortable.sort-asc::after { content: '\2191'; color: #111; }
th.sortable.sort-desc::after { content: '\2193'; color: #111; }

/* ===== Batch Operations ===== */
.batch-checkbox { width: 32px; }
.batch-checkbox input[type="checkbox"] {
    width: 14px; height: 14px;
    cursor: pointer;
    accent-color: #111;
}
.batch-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 52px;
    background: #111;
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 900;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
}
.batch-bar.active { display: flex; }
.batch-count {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}
.batch-btn {
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.2s;
}
.batch-btn:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.batch-btn.danger { border-color: #e74c3c; color: #e74c3c; }
.batch-btn.danger:hover { background: #e74c3c; color: #fff; }

/* ===== Form Validation ===== */
.input-error { border-bottom-color: #e74c3c !important; }
.field-error {
    color: #e74c3c;
    font-size: 10px;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* ===== PDF/Print Button ===== */
.btn-pdf {
    padding: 6px 14px;
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Noto Sans KR', sans-serif;
    margin-left: 8px;
}
.btn-pdf:hover { border-color: #111; }

/* ===== Slide Panel Sticky Save Button ===== */
.slide-panel .panel-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 20px;
    z-index: 10;
}

/* ===== Dashboard Card Hover ===== */
.dash-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== Required Field Indicator ===== */
.edit-group label .required-mark {
    color: #e74c3c;
    margin-left: 2px;
}
.edit-group .input-error {
    border-bottom-color: #e74c3c !important;
}
.field-error {
    color: #e74c3c;
    font-size: 11px;
    margin-top: 2px;
}

/* ===== Modal Overlay (ESC Closable) ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-overlay .modal-content {
    background: #fff;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

/* ===== Filter Section (Collapsible) ===== */
.filter-section { border: 1px solid #e0e0e0; margin-bottom: 20px; }
.filter-header { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; user-select: none; }
.filter-header span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.filter-summary { margin-left: 12px; font-size: 11px; color: #b8a066; font-weight: 500; }
.filter-toggle-icon { margin-left: auto; font-size: 14px; color: #999; }
.filter-body { padding: 0 16px 16px; }
.filter-group { margin-bottom: 10px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-label { font-size: 11px; color: #999; letter-spacing: 1px; margin-bottom: 6px; display: block; }

/* ===== Pagination ===== */
.pagination { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 12px; padding: 24px 0 8px; }
.pagination .page-info { display: flex; align-items: center; gap: 12px; font-family: 'Noto Sans KR', sans-serif; font-size: 11px; color: #999; letter-spacing: 1px; }
.pagination .page-info select { padding: 5px 10px; border: 1px solid #e0e0e0; background: #fff; font-size: 11px; font-family: 'Noto Sans KR', sans-serif; color: #555; letter-spacing: 1px; cursor: pointer; }
.pagination .page-btns { display: flex; align-items: center; gap: 2px; }
.pagination .page-btns button { min-width: 34px; height: 34px; border: none; background: transparent; font-family: 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 400; color: #999; letter-spacing: 1px; cursor: pointer; transition: all 0.15s; }
.pagination .page-btns button:hover:not(:disabled) { color: #111; }
.pagination .page-btns button.active { color: #111; font-weight: 500; background: none; border-bottom: 2px solid #111; }
.pagination .page-btns button:disabled { opacity: 0.25; cursor: default; }
.page-total { font-size: 11px; color: #999; letter-spacing: 1px; }

/* ===== Dash Filter (Period) ===== */
.dash-filter { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-filter-btn { padding: 6px 14px; font-size: 11px; border: none; background: transparent; color: #999; cursor: pointer; letter-spacing: 1px; transition: all 0.15s; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }
.dash-filter-btn:hover { color: #111; background: none; }
.dash-filter-btn.active { color: #111; font-weight: 500; background: none; border: none; border-bottom: 2px solid #111; }
.dash-filter-sep { color: #ddd; font-size: 14px; margin: 0 8px; }
.dash-filter-tilde { color: #999; font-size: 13px; }
.dash-date-input { padding: 5px 8px; font-size: 11px; border: none; border-bottom: 1px solid #ddd; color: #555; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 1px; background: transparent; }
.dash-date-input:focus { border-bottom-color: #111; outline: none; }
.dash-period-label { font-size: 11px; color: #999; letter-spacing: 0.5px; margin-left: 8px; }

/* ===== Company Suggest (Autocomplete) ===== */
.autocomplete-wrap { position: relative; }
.company-suggest { display:none; position:absolute; top:100%; left:0; width:300px; max-height:220px; overflow-y:auto; background:#fff; border:1px solid #e0e0e0; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.company-suggest-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid #f5f5f5; }
.company-suggest-item:hover, .company-suggest-item.active { background:#f8f6f1; }
.company-suggest-item .cs-name { color:#111; }
.company-suggest-item .cs-name em { font-style:normal; color:#b8a066; font-weight:700; }
.company-suggest-item .cs-count { font-size:11px; color:#999; }
.company-suggest-empty { padding:12px 14px; font-size:12px; color:#999; }

/* ===== CSV Export Button ===== */
.btn-csv { padding: 6px 14px; background: #fff; color: #111; border: 1px solid #ddd; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 1px; font-family: 'Noto Sans KR', sans-serif; margin-left: 8px; }
.btn-csv:hover { border-color: #111; }

/* ===== Utility Classes ===== */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-gap-sm { display: flex; gap: 8px; }
.flex-gap-md { display: flex; gap: 12px; }
.flex-gap-lg { display: flex; gap: 16px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: #999; }
.text-bold { font-weight: 600; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 20px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 20px; }
.p-sm { padding: 8px; }
.p-md { padding: 12px; }
.p-lg { padding: 20px; }

/* ===== Table Column Alignment ===== */
.col-date { text-align: center; }
.col-number { text-align: right; }
.col-price { text-align: right; font-weight: 600; }
.col-status { text-align: center; }
.col-code { text-align: center; font-family: monospace; }

/* ===== Slide Panel Size Variants ===== */
.slide-panel-sm { width: 400px; right: -420px; }
.slide-panel-md { width: 500px; right: -520px; }
.slide-panel-lg { width: 600px; right: -620px; }

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    color: #999;
    padding: 50px 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}
.empty-state-text {
    font-size: 13px;
    color: #999;
}

/* ===== Confirm Modal ===== */
.confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.confirm-overlay.active { background: rgba(0,0,0,0.35); }
.confirm-modal {
    background: #fff;
    min-width: 320px;
    max-width: 440px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.confirm-overlay.active .confirm-modal {
    transform: scale(1);
    opacity: 1;
}
.confirm-message {
    font-size: 13px;
    color: #111;
    line-height: 1.7;
    letter-spacing: 0.3px;
    margin-bottom: 24px;
}
.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.confirm-btn {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    border: none;
    transition: all 0.15s;
}
.confirm-btn-cancel {
    background: #fff;
    color: #999;
    border: 1px solid #e0e0e0;
}
.confirm-btn-cancel:hover { border-color: #111; color: #111; }
.confirm-btn-ok {
    background: #111;
    color: #fff;
}
.confirm-btn-ok:hover { background: #333; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .form-grid { grid-template-columns: repeat(3, 1fr); }
    .table-section { padding: 15px; }
    .container { padding: 20px 10px; }
}
@media (max-width: 768px) {
    .page-nav { padding: 0 15px; height: 50px; }
    .page-nav .logo { font-size: 15px; letter-spacing: 1px; }
    .page-nav .nav-right { gap: 10px; }
    .page-nav a.back { font-size: 11px; }
    .container { padding: 15px 8px; }
    h1 { font-size: 22px; margin-bottom: 15px; }
    .form-section, .table-section { padding: 15px 10px; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-group.wide { grid-column: span 2; }
    .slide-panel { width: 100%; right: -100%; padding: 20px 15px; }
    .slide-panel-sm,
    .slide-panel-md,
    .slide-panel-lg { width: 100%; right: -100%; }
    .filter-tabs { flex-wrap: wrap; gap: 4px; }
    .filter-tab { padding: 5px 10px; font-size: 11px; }
    .table-wrap { position: relative; }
    table { font-size: 11px; }
    thead th { padding: 8px 4px; font-size: 10px; letter-spacing: 0.5px; }
    tbody td { padding: 6px 4px; font-size: 11px; }
    .btn-edit, .btn-delete, .btn-save, .btn-cancel { padding: 3px 6px; font-size: 10px; }
    .search-bar input { max-width: 100%; }
    .notification-dropdown { width: 280px; right: -40px; }
    .company-suggest { width: 100%; }
    .batch-bar { height: 48px; gap: 10px; }
    .batch-btn { padding: 5px 10px; font-size: 10px; }
    .edit-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .page-nav { padding: 0 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.wide { grid-column: span 1; }
    .filter-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .filter-tab { flex-shrink: 0; }
    .notification-dropdown { width: calc(100vw - 20px); right: -10px; }
}