/* ===================================================================
   BlogOps Theme — Kmong-inspired
   푸른기 도는 뉴트럴 + 브랜드 그린 액센트 + pill 라운드 + 부드러운 그림자
   style.css 다음에 로드되어 톤을 확정한다.
   =================================================================== */

/* ===== TOKENS ===== */
:root {
    /* 잉크 & 텍스트 — 순회색이 아니라 살짝 푸른 뉴트럴 */
    --ink:      #212224;
    --ink-2:    #303441;
    --text:     #555969;
    --text-2:   #727585;
    --text-3:   #9a9ba7;

    /* 라인 & 면 */
    --line:     #f2f3f7;
    --line-2:   #e8e9ef;
    --border:   #dcdee6;
    --border-strong: #c8cad2;
    --surface:  #ffffff;
    --canvas:   #fafafc;

    /* 브랜드 그린 */
    --brand:        #5dd877;
    --brand-strong: #22a745;
    --brand-deep:   #1b8b37;
    --brand-soft:   #e1f5dc;
    --brand-tint:   #f1fbef;

    /* style.css 토큰 재정의 — 인라인 var(--primary) 사용처가 함께 따라온다.
       크몽처럼 1차 강조는 잉크(검정)이고, 그린은 성공·활성 상태에만 쓴다. */
    --primary:       #212224;
    --primary-dark:  #000000;
    --primary-light: #f2f3f7;
    --primary-50:    #fafafc;

    /* 의미색 */
    --success:       #22a745;
    --success-light: #e1f5dc;
    --warning:       #c88a2e;
    --warning-light: #fdf3e2;
    --danger:        #e5484d;
    --danger-light:  #fdeced;
    --purple:        #6b6f80;
    --purple-light:  #f2f3f7;
    --pink:          #6b6f80;
    --pink-light:    #f2f3f7;
    --orange:        #c07a38;
    --orange-light:  #fcf3ea;

    /* 회색 스케일 → 크몽 뉴트럴로 정렬 */
    --gray-50:  #fafafc;
    --gray-100: #f2f3f7;
    --gray-200: #e8e9ef;
    --gray-300: #dcdee6;
    --gray-400: #9a9ba7;
    --gray-500: #727585;
    --gray-600: #555969;
    --gray-700: #303441;
    --gray-800: #26282e;
    --gray-900: #212224;

    /* 사이드바 — 밝고 넓은 크몽 톤 */
    --sidebar-bg: #ffffff;
    --sidebar-border: #f2f3f7;

    /* 그림자 — 크몽 시그니처 */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
    --shadow:    0 4px 12px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --shadow-xl: 0 16px 44px rgba(0,0,0,0.14);

    /* 모서리 */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --sidebar-width: 244px;
    --topbar-height: 64px;
}

/* ===== BASE ===== */
body {
    background: var(--canvas);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: -0.01em;
    /* 한글은 어절 단위로 끊는다 (한 글자씩 세로로 흐르는 현상 방지) */
    word-break: keep-all;
    overflow-wrap: break-word;
}

a { color: var(--brand-deep); }
a:hover { color: var(--brand-deep); }

/* 금액·수치 자릿수 고정 */
.stat-value, .amount, td, th, .report-value, .detail-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.content-area { padding: 24px 26px !important; min-width: 0; }

/* 와이드 테이블이 플렉스 부모를 밀어내 헤더 버튼이 화면 밖으로 잘리는 것 방지.
   min-width:0 이 있어야 .table-wrapper 안에서만 가로 스크롤된다. */
.main-content { min-width: 0; max-width: 100%; }
.table-wrapper { overflow-x: auto; max-width: 100%; }

/* ===== SIDEBAR — 밝고 넓게 ===== */
.sidebar {
    background: var(--sidebar-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--sidebar-border) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

.sidebar-logo {
    padding: 20px 20px 18px !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

.sidebar-logo-icon {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.sidebar-logo-text h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px;
    color: var(--ink) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.sidebar-logo-text span {
    font-size: 12px !important;
    color: var(--text-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* --- 내비게이션 --- */
.sidebar-nav { padding: 12px 10px 10px !important; gap: 2px !important; }

.nav-item {
    border-radius: var(--radius) !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    gap: 11px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-2) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-item:hover {
    background: var(--line) !important;
    color: var(--ink) !important;
    transform: none !important;
}

.nav-item.active {
    background: var(--brand-soft) !important;
    background-image: none !important;
    color: var(--brand-deep) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.nav-item.active::before { display: none !important; }

/* 메뉴별 색깔 칩 제거 — 단색 라인 아이콘 */
.nav-icon-wrap {
    background: none !important;
    background-image: none !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.nav-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
}

.nav-item svg { opacity: 1 !important; }

.nav-divider { background: var(--sidebar-border) !important; margin: 10px 12px !important; }

.nav-badge {
    background: var(--danger) !important;
    color: var(--on-ink) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: var(--radius-full) !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

.sidebar-footer {
    border-top: 1px solid var(--sidebar-border) !important;
    color: var(--text-3) !important;
    font-size: 11.5px !important;
}

/* --- 워크스페이스 전환 — pill 칩 --- */
.ws-switcher { padding: 10px 12px 12px !important; gap: 5px !important; }

.ws-item {
    border-radius: var(--radius-full) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 4px 11px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text-2) !important;
    transition: all 0.15s !important;
}

.ws-item:hover {
    background: var(--line) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

.ws-item.active {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
}

.ws-dot { width: 5px !important; height: 5px !important; background: var(--border-strong) !important; }
.ws-item.active .ws-dot { background: var(--brand) !important; box-shadow: none !important; }

/* ===== TOPBAR ===== */
.topbar {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    padding: 0 32px !important;
}

.topbar-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    color: var(--ink) !important;
}

.topbar-date { font-size: 13px !important; color: var(--text-3) !important; }

.topbar-avatar {
    background: var(--ink) !important;
    background-image: none !important;
    color: var(--on-ink) !important;
    border-radius: var(--radius-full) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.topbar-user { border-radius: var(--radius-full) !important; }
.topbar-user:hover { background: var(--line) !important; }
.topbar-user-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important; }

.topbar-bell { border-radius: var(--radius-full) !important; }
.topbar-bell:hover { background: var(--line) !important; }
.topbar-bell .badge { background: var(--danger) !important; font-weight: 700 !important; }

/* ===== CARDS ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    border-color: var(--line-2) !important;
    box-shadow: var(--shadow) !important;
    transform: none !important;
}

.card-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--line) !important;
}

.card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ink);
    letter-spacing: -0.3px;
}

.card-subtitle { font-size: 13px !important; color: var(--text-3) !important; }

.card-body { padding: 22px !important; }

.card-footer { background: var(--canvas) !important; border-top: 1px solid var(--line) !important; }

/* ===== STAT CARDS ===== */
.stats-grid { gap: 16px !important; }

.stat-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 22px !important;
    gap: 14px !important;
    align-items: center !important;
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow 0.2s ease !important;
}

.stat-card::after { display: none !important; }

.stat-card:hover {
    transform: none !important;
    box-shadow: var(--shadow) !important;
    border-color: var(--line-2) !important;
}

.stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-full) !important;
    background: var(--line) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}

.stat-icon svg { width: 19px !important; height: 19px !important; }

/* 지표 성격에 따른 최소한의 색 구분 */
.stat-icon.blue   { background: var(--line) !important;       background-image: none !important; color: var(--ink-2) !important; }
.stat-icon.green  { background: var(--brand-soft) !important; background-image: none !important; color: var(--brand-deep) !important; }
.stat-icon.red    { background: var(--danger-light) !important; background-image: none !important; color: var(--danger) !important; }
.stat-icon.amber,
.stat-icon.orange { background: var(--warning-light) !important; background-image: none !important; color: var(--warning) !important; }
.stat-icon.purple,
.stat-icon.pink   { background: var(--line) !important;       background-image: none !important; color: var(--text-2) !important; }

.stat-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.8px !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
    /* 금액이 두 줄로 접히지 않게 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1500px) { .stat-value { font-size: 20px !important; } }

.stat-label {
    font-size: 13px !important;
    color: var(--text-3) !important;
    font-weight: 500 !important;
    margin-top: 3px;
}

/* ===== BANNER ===== */
.banner {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 26px 28px !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-xs) !important;
}

.banner::before, .banner::after { display: none !important; }

.banner h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.6px;
    color: var(--ink) !important;
    line-height: 1.4 !important;
}

.banner p {
    opacity: 1 !important;
    font-size: 14px !important;
    color: var(--text-2) !important;
    margin-top: 4px;
}

/* ===== BUTTONS ===== */
.btn {
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.2px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn:hover { transform: none !important; }

.btn-primary {
    background: var(--ink) !important;
    background-image: none !important;
    border: 1px solid var(--ink) !important;
    color: var(--on-ink) !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    background: var(--ink) !important;
    background-image: none !important;
    border-color: var(--ink) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-secondary {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink-2) !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background: var(--line) !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}

.btn-danger {
    background: var(--danger) !important;
    background-image: none !important;
    border: 1px solid var(--danger) !important;
    color: var(--on-ink) !important;
    box-shadow: none !important;
}

.btn-danger:hover { background: #d13b40 !important; border-color: var(--danger) !important; }

.btn-success {
    background: var(--brand-strong) !important;
    background-image: none !important;
    border: 1px solid var(--brand-strong) !important;
    color: var(--on-ink) !important;
    box-shadow: none !important;
}

.btn-success:hover { background: var(--brand-deep) !important; border-color: var(--brand-deep) !important; }

/* ===== STATUS BADGES — pill ===== */
.status-badge {
    padding: 3px 11px 3px 9px !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    gap: 5px !important;
    border: none !important;
}

.status-badge::before { width: 5px !important; height: 5px !important; }

.status-badge.status-quote_pending { background: var(--warning-light) !important; color: var(--warning) !important; }
.status-badge.status-quote_pending::before { background: var(--warning) !important; }

.status-badge.status-received { background: var(--line) !important; color: var(--text-2) !important; }
.status-badge.status-received::before { background: var(--text-3) !important; }

.status-badge.status-working { background: var(--line) !important; color: var(--ink-2) !important; }
.status-badge.status-working::before { background: var(--ink-2) !important; }

.status-badge.status-done { background: var(--brand-soft) !important; color: var(--brand-deep) !important; }
.status-badge.status-done::before { background: var(--brand-strong) !important; }

.status-badge.status-delivered { background: var(--brand-tint) !important; color: var(--brand-deep) !important; }
.status-badge.status-delivered::before { background: var(--brand) !important; }

.status-badge.status-settled { background: var(--ink) !important; color: var(--on-ink) !important; }
.status-badge.status-settled::before { background: var(--brand) !important; }

/* ===== TABLES =====
   업무 테이블은 컬럼이 많아 여백을 넉넉히 주면 가로로 터진다.
   톤(색·보더·라운드)만 크몽식으로 가져오고 밀도는 유지한다. */
table { font-size: 13px; }

thead th {
    background: var(--canvas) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
    text-transform: none !important;
    letter-spacing: -0.1px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--line-2) !important;
    border-top: none !important;
}

tbody td {
    padding: 11px 12px !important;
    color: var(--ink-2) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* 한글이 한 글자씩 끊겨 세로로 흐르지 않게 — 어절 단위로 줄바꿈 */
thead th, tbody td { word-break: keep-all; overflow-wrap: break-word; }

tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--canvas) !important; }

/* 표 안의 입력 컨트롤은 셀을 부풀리지 않게 */
table .form-input,
table .form-select,
table input,
table select {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    border-radius: var(--radius-sm) !important;
}

/* 표 안 배지는 한 줄 유지 */
table .status-badge { font-size: 11.5px !important; padding: 2px 9px 2px 8px !important; }

/* ===== FORMS ===== */
.form-input,
.form-select,
.form-textarea {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-3) !important; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--brand-strong) !important;
    box-shadow: 0 0 0 3px rgba(93,216,119,0.22) !important;
    outline: none !important;
}

.form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    text-transform: none !important;
    letter-spacing: -0.1px !important;
}

/* ===== SUB TABS — pill ===== */
.sub-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding: 0 0 10px !important;
    gap: 6px;
}

.sub-tab {
    border-radius: var(--radius-full) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 15px !important;
    color: var(--text-2) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.15s !important;
}

.sub-tab:hover { color: var(--ink) !important; background: var(--line) !important; }

.sub-tab.active {
    background: var(--ink) !important;
    box-shadow: none !important;
    color: var(--on-ink) !important;
    border-color: var(--ink) !important;
}

/* ===== FILTER BAR ===== */
.filter-bar { padding: 16px 22px !important; border-bottom: 1px solid var(--line); }

.search-box input,
.filter-select {
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--border) !important;
    font-size: 13px !important;
    padding-right: 14px !important;
}

/* 검색창은 왼쪽 돋보기 아이콘 자리를 비워둔다 */
.search-box input { padding-left: 38px !important; }
.filter-select { padding-left: 14px !important; padding-right: 34px !important; }
.search-box svg { color: var(--text-3) !important; }

.search-box input:focus,
.filter-select:focus {
    border-color: var(--brand-strong) !important;
    box-shadow: 0 0 0 3px rgba(93,216,119,0.22) !important;
}

/* ===== 필터 줄 안의 폼 컨트롤 =====
   .form-select 기본값이 width:100%라, flex 필터 줄에 넣으면 한 줄에 하나씩 떨어진다. */
.filter-bar-row .form-select,
.filter-bar-row .form-input,
.filter-bar .form-select,
.filter-bar .form-input,
.filter-row .form-select,
.filter-row .form-input {
    width: auto !important;
    min-width: 128px;
    border-radius: var(--radius-full) !important;
    padding: 7px 32px 7px 14px !important;
    font-size: 13px !important;
    height: auto !important;
}

.filter-bar-row .form-input,
.filter-bar .form-input,
.filter-row .form-input { padding-right: 14px !important; }

/* 셀렉트 화살표 색을 새 뉴트럴로 */
.form-select,
.filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ba7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

.form-select { padding-right: 34px !important; }

/* ===== 클래스 없이 쓰인 원시 폼 컨트롤 =====
   페이지마다 <select>/<input>을 클래스 없이 쓴 곳이 많아 브라우저 기본 모양으로 남는다.
   :not([class]) 로 한정해 기존 컴포넌트는 건드리지 않는다. */
.content-area select:not([class]),
.content-area input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.content-area textarea:not([class]) {
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.content-area textarea:not([class]) { border-radius: var(--radius); padding: 10px 13px; }

.content-area select:not([class]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ba7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.content-area select:not([class]):focus,
.content-area input:not([class]):focus,
.content-area textarea:not([class]):focus {
    outline: none;
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 3px rgba(93,216,119,0.22);
}

.content-area input:not([class])::placeholder,
.content-area textarea:not([class])::placeholder { color: var(--text-3); }

/* 표 안에서는 컴팩트하게 */
table select:not([class]),
table input:not([class]):not([type="checkbox"]):not([type="radio"]) {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}
table select:not([class]) { padding-right: 26px; background-position: right 8px center; }

/* 체크박스는 브랜드 색으로 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* ===== BULK ACTIONS ===== */
.bulk-actions {
    background: var(--brand-tint) !important;
    background-image: none !important;
    border: 1px solid var(--brand-soft) !important;
    border-radius: var(--radius-lg) !important;
}

/* ===== MODALS ===== */
.modal-overlay {
    background: rgba(33,34,36,0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    border: none !important;
}

.modal-header { padding: 20px 24px !important; border-bottom: 1px solid var(--line) !important; }

.modal-footer {
    padding: 16px 24px !important;
    background: var(--canvas);
    border-top: 1px solid var(--line) !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ===== TOASTS ===== */
.toast {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 14px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    backdrop-filter: none !important;
    border: none !important;
}

.toast.success { background: var(--ink) !important; background-image: none !important; }
.toast.error   { background: var(--danger) !important; background-image: none !important; }
.toast.info    { background: var(--ink) !important; background-image: none !important; }
.toast.warning { background: var(--warning) !important; background-image: none !important; }

/* ===== ALERTS ===== */
.alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: none !important;
    background: var(--canvas) !important;
    color: var(--ink-2) !important;
    font-size: 13.5px !important;
}

.alert-info    { background: var(--brand-tint) !important;  border-color: var(--brand-soft) !important; }
.alert-warning { background: var(--warning-light) !important; border-color: var(--warning-light) !important; }
.alert-danger  { background: var(--danger-light) !important;  border-color: var(--danger-light) !important; }
.alert-success { background: var(--brand-tint) !important;  border-color: var(--brand-soft) !important; }

/* ===== PAGINATION ===== */
.pagination a {
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text-2) !important;
    transition: all 0.15s !important;
}

.pagination a:hover { background: var(--line) !important; border-color: var(--border) !important; color: var(--ink) !important; }

.pagination a.active {
    background: var(--ink) !important;
    background-image: none !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
    box-shadow: none !important;
}

/* ===== BLOGGER TAG ===== */
.blogger-tag {
    background: var(--line) !important;
    background-image: none !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
}

/* ===== AMOUNT ===== */
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.amount.income  { color: var(--ink) !important; }
.amount.expense { color: var(--danger) !important; }
.amount.profit  { color: var(--brand-deep) !important; }

/* ===== CHART BARS ===== */
.chart-bar,
.chart-bar-fill,
.bar-fill,
.progress-fill {
    background-image: none !important;
    border-radius: var(--radius-full) !important;
}

/* ===== EMPTY STATE ===== */
.empty-state { padding: 52px 20px !important; }
.empty-state svg { opacity: 0.18 !important; }
.empty-state p { color: var(--text-3) !important; font-size: 13.5px !important; }

/* ===== LOGIN PAGE ===== */
.login-page {
    background: var(--canvas) !important;
    background-image: none !important;
}

.login-page::before, .login-page::after { display: none !important; }

.login-card {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--ink) !important;
    padding: 44px 40px !important;
}

.login-logo-icon {
    background: var(--ink) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--on-ink) !important;
    box-shadow: none !important;
}

.login-logo h1 { color: var(--ink) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.6px; }
.login-logo p  { color: var(--text-3) !important; }

.login-field label { color: var(--ink-2) !important; font-weight: 600 !important; letter-spacing: -0.1px !important; }

.login-field input {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--ink) !important;
}

.login-field input::placeholder { color: var(--text-3) !important; }

.login-field input:focus {
    border-color: var(--brand-strong) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(93,216,119,0.22) !important;
}

.login-btn {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: var(--radius) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.login-btn:hover { background: var(--ink) !important; box-shadow: var(--shadow-sm) !important; transform: none !important; }

.login-error {
    background: var(--danger-light) !important;
    border: 1px solid var(--danger-light) !important;
    color: var(--danger) !important;
    border-radius: var(--radius) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c8cad2; background-clip: content-box; }

/* ===== SELECTION ===== */
::selection { background: var(--brand-soft); color: var(--ink); }

/* ===== 진입 애니메이션 제거 ===== */
.stat-card, .card { animation: none !important; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .content-area { padding: 16px !important; }
    .sidebar-logo { padding: 16px !important; }
    .sidebar-logo h1 { font-size: 16px; }

    .nav-icon-wrap { width: 18px !important; height: 18px !important; }
    .nav-icon-wrap svg { width: 16px !important; height: 16px !important; }
    .nav-item { padding: 9px 12px !important; font-size: 14px !important; }

    .card:hover { box-shadow: var(--shadow-xs); }

    .install-banner-inner { flex-direction: column; text-align: center; padding: 14px 16px; }
    .install-banner-right { justify-content: center; }
    .install-banner-qr { display: none !important; }

    #feedList .card { margin-bottom: 8px; }
    .bank-tabs a { font-size: 13px; padding: 10px 12px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px !important; gap: 10px !important; }
    .stat-icon { width: 34px !important; height: 34px !important; }
    .stat-icon svg { width: 16px !important; height: 16px !important; }
    .stat-value { font-size: 20px !important; }
    .card-body { padding: 16px !important; }
}