/* ====================================================================
   Design System v1 — Linear / Vercel / shadcn-inspired
   - 기존 style.css 위에 덧씌워 모던화
   - light + dark theme via [data-theme]
   - 반응형 (≥1024 데스크톱 / 768~1023 태블릿 아이콘 모드 / <768 모바일 드로어)
   ==================================================================== */

/* -------- Tokens (Light) -------- */
:root {
    /* Brand (B안 네이비 블루 #3a5fa0) */
    --color-brand:        #3a5fa0;
    --color-brand-fg:     #ffffff;
    --color-brand-soft:   #eef3fb;
    --color-brand-hover:  #315389;

    /* Surfaces */
    --color-bg:           #f3f5fa;
    --color-surface:      #ffffff;
    --color-surface-hover:hsl(220, 20%, 96%);

    /* Text */
    --color-fg:           hsl(222, 47%, 11%);
    --color-muted:        hsl(215, 16%, 47%);
    --color-subtle:       hsl(215, 16%, 65%);

    /* Border */
    --color-border:       hsl(215, 16%, 90%);
    --color-border-strong:hsl(215, 16%, 80%);

    /* Status */
    --color-success:      hsl(160, 84%, 40%);
    --color-success-fg:   #ffffff;
    --color-warning:      hsl(38, 92%, 50%);
    --color-warning-fg:   #ffffff;
    --color-danger:       hsl(0, 84%, 60%);
    --color-danger-fg:    #ffffff;
    --color-info:         hsl(200, 84%, 50%);

    /* Backwards-compat (style.css 변수명 매핑 — primary는 style.css에서 직접 정의) */
    --secondary-color: var(--color-muted);
    --success-color:   var(--color-success);
    --danger-color:    var(--color-danger);
    --warning-color:   var(--color-warning);
    --info-color:      var(--color-info);
    --border-color:    var(--color-border);
    --light-color:     var(--color-bg);
    --dark-color:      var(--color-fg);
    --white-color:     var(--color-surface);

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 hsl(222 47% 11% / 0.04);
    --shadow-sm: 0 1px 3px 0 hsl(222 47% 11% / 0.08);
    --shadow-md: 0 4px 12px -2px hsl(222 47% 11% / 0.10);
    --shadow-lg: 0 12px 32px -4px hsl(222 47% 11% / 0.14);

    /* Motion */
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 120ms;
    --duration:      180ms;
    --duration-slow: 320ms;

    /* Typography */
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    --font-feature: "ss01", "ss02", "tnum";
}

/* -------- Tokens (Dark) -------- */
[data-theme="dark"] {
    --color-brand:        hsl(230, 80%, 72%);
    --color-brand-soft:   hsl(230, 50%, 22%);
    --color-brand-hover:  hsl(230, 80%, 80%);

    --color-bg:           hsl(222, 42%, 11%);   /* A: 6% → 11% */
    --color-surface:      hsl(222, 38%, 16%);   /* A: 9% → 16% */
    --color-surface-hover:hsl(222, 34%, 21%);   /* A: 13% → 21% */

    --color-fg:           hsl(220, 16%, 85%);   /* B: 98% → 85% */
    --color-muted:        hsl(215, 14%, 57%);   /* B: 65% → 57% */
    --color-subtle:       hsl(215, 13%, 46%);   /* B: 50% → 46% */

    --color-border:       hsl(215, 20%, 25%);   /* A: 18% → 25% */
    --color-border-strong:hsl(215, 20%, 33%);   /* A: 26% → 33% */

    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.28);
    --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.38);
    --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.46);
    --shadow-lg: 0 12px 32px -4px hsl(0 0% 0% / 0.56);

    --light-color:  var(--color-surface);
    --white-color:  var(--color-surface);
    --dark-color:   var(--color-fg);
    --text-primary: var(--color-fg);

    --dash-pill-bg: #263c5c;
    --dash-pill-fg: #8aaabf;

    --primary-color: #6b9fe4;
}

/* -------- Body & typography -------- */
html {
    color-scheme: light dark;
    font-size: 100%; /* 기본 크기 */
}

body {
    font-family: var(--font-sans);
    font-feature-settings: var(--font-feature);
    background-color: var(--color-bg);
    color: var(--color-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

/* 브라우저 기본값 무시 — font 상속 강제 */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* -------- Top navbar (B안: 다크 네이비 배경) -------- */
.top-navbar {
    background-color: var(--navbar-bg, #2c3a5c);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(20,28,52,.18);
}
.navbar-title-link { color: #ffffff; }
.navbar-title-link:hover { color: #c8d4f0; }
.navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #aeb8d6;
}

/* -------- Hamburger button refinement -------- */
.sidebar-toggle {
    border-radius: var(--radius-md);
    transition: background-color var(--duration) var(--ease);
}
.sidebar-toggle:hover { background-color: rgba(255,255,255,.08); }
.hamburger,
.hamburger::before,
.hamburger::after { background-color: #cdd3e6; }

/* -------- Theme toggle button (B안: 다크 네이비 배경 위) -------- */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #dfe3f0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration) var(--ease);
    padding: 0;
}
.theme-toggle:hover {
    background: rgba(255,255,255,.1);
    color: #ffffff;
    border-color: rgba(255,255,255,.3);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-flex; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* -------- Lucide icon defaults -------- */
[data-lucide],
.lucide,
.icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex-shrink: 0;
    vertical-align: middle;
}
.nav-icon [data-lucide],
.nav-icon .lucide { width: 18px; height: 18px; }

/* Lucide JS 실행 전 빈 <i> 요소가 공간을 차지하도록 최소 크기 유지
   (SVG 미삽입 상태에서도 레이아웃 유지, FOUC 레이아웃 시프트 방지) */
.nav-icon i[data-lucide]:not(:has(svg)) {
    display: inline-block;
    width: 18px;
    height: 18px;
}

/* -------- Sidebar -------- */
.sidebar {
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: none;
}

.nav-icon {
    color: var(--color-muted);
    transition: color var(--duration) var(--ease);
}

.nav-category .category-header {
    padding: 10px 12px;
    color: var(--color-muted);
    border-radius: var(--radius-md);
    margin: 2px 8px;
}
.nav-category .category-header:hover {
    background: var(--color-surface-hover);
    color: var(--color-fg);
}
.nav-category.active > .category-header {
    color: var(--color-fg);
    background: var(--color-brand-soft);
}
.nav-category.active .nav-icon { color: var(--color-brand); }

.submenu a {
    color: var(--color-muted);
    transition: all var(--duration-fast) var(--ease);
    border-radius: var(--radius-md);
    margin: 1px 8px;
    padding: 9px 12px 9px 47px;
}
.submenu a:hover {
    background: var(--color-surface-hover);
    color: var(--color-fg);
}
.submenu li.active a {
    color: var(--color-brand);
    background: var(--color-brand-soft);
    font-weight: 600;
}

/* Floating submenu (collapsed sidebar) — no rounded item margins inside popup */
.sidebar.collapsed .submenu,
html.sidebar-collapsed .sidebar .submenu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}
.sidebar.collapsed .submenu a,
html.sidebar-collapsed .sidebar .submenu a {
    margin: 0;
    border-radius: 0;
    padding: 12px 24px;
}

/* -------- Buttons (modernize existing .btn) -------- */
.btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: transform var(--duration-fast) var(--ease),
                box-shadow var(--duration) var(--ease),
                background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
    box-shadow: var(--shadow-xs);
    border: 1px solid transparent;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Variant overrides */
.btn-primary {
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    border-color: var(--color-brand);
}
.btn-primary:hover {
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}
.btn-success {
    background-color: var(--color-success);
    color: var(--color-success-fg);
    border-color: var(--color-success);
}
.btn-success:hover {
    background-color: hsl(160, 84%, 36%);
    border-color: hsl(160, 84%, 36%);
}
.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-danger-fg);
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background-color: hsl(0, 84%, 54%);
    border-color: hsl(0, 84%, 54%);
}

/* Print button (수입대장 상세) — 기존 #btnPrint 인라인 스타일 통일 */
#btnPrint {
    background-color: var(--color-success) !important;
    color: var(--color-success-fg) !important;
    border-color: var(--color-success) !important;
}
#btnPrint:hover {
    background-color: hsl(160, 84%, 36%) !important;
    border-color: hsl(160, 84%, 36%) !important;
}

/* -------- Inputs / forms -------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-fg);
    padding: 8px 12px;
    font: inherit;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}

/* -------- Cards / containers -------- */
.table-info,
.instructions,
.add-row-container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* -------- Tables generic -------- */
table {
    background-color: var(--color-surface);
    color: var(--color-fg);
}

/* -------- Sidebar overlay (mobile) -------- */
.sidebar-overlay {
    background: hsl(222 47% 11% / 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* -------- Responsive: tablet (≤1023px) → 사이드바 자동 아이콘 모드 -------- */
@media (max-width: 1023px) and (min-width: 768px) {
    .sidebar:not(.mobile-open) {
        width: var(--sidebar-collapsed-width);
        overflow-x: visible;
    }
    .sidebar:not(.mobile-open) .category-header .nav-text,
    .sidebar:not(.mobile-open) .category-toggle {
        display: none;
    }
    .sidebar:not(.mobile-open) .nav-category .submenu {
        display: none !important;
    }
    .main-content {
        left: var(--sidebar-collapsed-width) !important;
        margin-left: 0 !important;
    }
}

/* -------- Responsive: mobile (<768px) → 드로어 -------- */
@media (max-width: 767px) {
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform var(--duration) var(--ease-out);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    /* main-content는 position:fixed라 left를 0으로 강제해야 마진이 풀림 */
    .main-content,
    .main-content.expanded {
        left: 0 !important;
        margin-left: 0 !important;
    }
    .navbar-container { padding: 0 12px; }
    .navbar-title { }
    .content-wrapper { padding: 16px !important; }
}

/* -------- HandsOnTable font size -------- */
.handsontable td,
.handsontable th,
.handsontable .htCore td,
.handsontable .htCore th {
    font-size: 115%;
    font-family: inherit;
}

/* -------- HandsOnTable dark mode overrides -------- */
[data-theme="dark"] .handsontable {
    background-color: var(--color-surface);
    color: var(--color-fg);
}
[data-theme="dark"] .handsontable td,
[data-theme="dark"] .handsontable th {
    background-color: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}
[data-theme="dark"] .handsontable th {
    background-color: var(--color-bg);
    color: var(--color-muted);
}
[data-theme="dark"] .handsontable tr:hover td {
    background-color: var(--color-surface-hover);
}
[data-theme="dark"] .handsontable .htDropdownMenu td,
[data-theme="dark"] .handsontable.listbox td,
[data-theme="dark"] .autocompleteEditor.handsontable td {
    background-color: var(--color-surface) !important;
    color: var(--color-fg);
}
[data-theme="dark"] .handsontable.listbox tr:hover td,
[data-theme="dark"] .htDropdownMenu td:hover,
[data-theme="dark"] .autocompleteEditor.handsontable td:hover {
    background-color: var(--color-surface-hover) !important;
}
[data-theme="dark"] .htDropdownMenu td.current,
[data-theme="dark"] .handsontable.listbox td.current {
    background-color: var(--color-brand-soft) !important;
    color: var(--color-fg);
}
[data-theme="dark"] .handsontable .area {
    background-color: var(--color-brand-soft) !important;
}

/* invalid-row / highlight-row in dark mode */
/* DataTables 다크모드 헤더 */
[data-theme="dark"] table.dataTable thead th {
    color: var(--color-muted) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .invalid-row {
    background-color: hsl(38 80% 18%) !important;
}
[data-theme="dark"] .highlight-row {
    background-color: hsl(0 70% 20%) !important;
}

/* -------- Action buttons (테이블 행 액션) -------- */
.btn-action {
    color: var(--color-muted);
    border-radius: var(--radius-sm);
    padding: 6px !important;
    line-height: 0;
    transition: color var(--duration) var(--ease),
                background-color var(--duration) var(--ease),
                transform var(--duration-fast) var(--ease) !important;
}
.btn-action:hover {
    background: var(--color-surface-hover);
    transform: none !important;
}
.btn-action.btn-edit:hover,
.btn-action.btn-view:hover { color: var(--color-brand); }
.btn-action.btn-delete:hover { color: var(--color-danger); }
.btn-action [data-lucide],
.btn-action .lucide,
.btn-action svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

/* -------- Verifier row (확인자 입력) -------- */
.verifier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
    margin-top: 4px;

    flex-wrap: wrap;
}
.verifier-row label {
    font-weight: 600;
    color: var(--color-fg);
    flex-shrink: 0;
}
.verifier-row input {
    flex: 1;
    min-width: 200px;
    max-width: 480px;
    padding: 6px 10px;

}
.verifier-status {

    color: var(--color-muted);
    min-width: 60px;
}
.verifier-status.is-saving { color: var(--color-warning); }
.verifier-status.is-saved  { color: var(--color-success); }
.verifier-status.is-error  { color: var(--color-danger); }

/* -------- Mobile card view (수입대장 상세) -------- */
#incomeMobileView { display: none; }

.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration) var(--ease);
}
.mobile-card:hover { box-shadow: var(--shadow-sm); }
.mobile-card.is-warn {
    border-color: var(--color-warning);
    background: hsl(38 92% 96%);
}
[data-theme="dark"] .mobile-card.is-warn {
    background: hsl(38 50% 16%);
    border-color: hsl(38 80% 40%);
}
.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.mobile-card-head {
    margin-bottom: 8px;

    color: var(--color-muted);
}
.mobile-card-name {

    font-weight: 600;
    color: var(--color-fg);
}
.mobile-card-amount {

    font-weight: 700;
    color: var(--color-brand);
    font-feature-settings: "tnum";
}
.mobile-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);

}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);

    font-weight: 600;
    background: var(--color-surface-hover);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}
.chip-type { color: var(--color-brand); border-color: var(--color-brand-soft); background: var(--color-brand-soft); }
.chip-payment-warn { color: var(--color-warning); border-color: hsl(38 92% 80%); background: hsl(38 92% 96%); }
[data-theme="dark"] .chip-payment-warn { background: hsl(38 50% 18%); border-color: hsl(38 80% 35%); }
.mobile-card-memo {
    margin-top: 6px;

    color: var(--color-muted);
    word-break: break-word;
}
.mobile-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.mobile-edit-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-brand-soft);
    color: var(--color-brand);
    border-radius: var(--radius-md);

    font-weight: 500;
}

/* -------- Page header responsive (수입대장 상세 등) -------- */
@media (max-width: 767px) {
    .register-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .register-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .register-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
    }
    /* 모바일에서 HandsOnTable 숨기고 카드뷰 표시 */
    #incomeTableWrapper,
    .add-row-container,
    .scroll-nav {
        display: none !important;
    }
    #incomeMobileView { display: block; }
    /* 합계 줄 모바일에서 폰트 살짝 줄임 */
    .aggregate-totals { gap: 12px; }
    .total-amount { }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}