/* ==========================================================================
   CuratorOS Theme Overlay
   Applies the CuratorOS visual style on top of existing my_css.css.
   Loaded after my_css.css, so rules here override the older sidebar / nav.
   ========================================================================== */

:root {
    --co-bg: #fffbff;
    --co-surface: #fffbff;
    --co-surface-low: #fdf9f1;
    --co-surface: #fffbff;
    --co-surface-high: #f1eee2;
    --co-surface-highest: #ece8db;
    --co-surface-container: #f7f3ea;
    --co-on-surface: #39382f;
    --co-on-variant: #66655a;
    --co-secondary: #6d6354;
    --co-secondary-container: #eee1cd;
    --co-outline: #bcb9ad;
    --co-primary: #5f5e5e;
    --co-primary-dim: #535252;
    --co-on-primary: #faf7f6;
    --co-tertiary: #fdc003;
    --co-tertiary-on: #553e00;
    --co-error: #fe8b70;
    --co-error-on: #742410;
    --co-blue: #2563eb;
    --co-blue-soft: #eff4ff;
    --co-slate-50: #f8fafc;
    --co-slate-100: #f1f5f9;
    --co-slate-200: #e2e8f0;
    --co-slate-300: #cbd5e1;
    --co-slate-400: #94a3b8;
    --co-slate-500: #64748b;
    --co-slate-600: #475569;
    --co-slate-700: #334155;
    --co-slate-800: #1e293b;
    --co-slate-900: #0f172a;
    --co-slate-950: #020617;
}

body {
    font-family: 'Plus Jakarta Sans', 'Apple SD Gothic Neo', Roboto, sans-serif !important;
    background-color: var(--co-bg);
    color: var(--co-on-surface);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    vertical-align: middle;
}

/* ==========================================================================
   Layout shell — sidebar width / main padding sync
   ========================================================================== */
#aside {
    /* Layout — floating card panel */
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    bottom: 40px !important;
    width: 256px !important;
    height: auto !important;
    z-index: 4;

    /* Visual — NO borders, NO shadows, NO outline at all.
       Edges of the sidebar are defined ONLY by the background-color contrast
       between the sidebar and the white-ish body background.
       This makes it physically impossible for the right side to render
       differently from the other 3. */
    /* 워밍 크림 솔리드 (#F1EEE2) — 운영현황 카드 #F7F3EA 보다 한 단계 진함 */
    background: #F1EEE2 !important;
    background-color: #F1EEE2 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-clip: padding-box !important;

    /* Inner content clipping — no inner element can paint over the rounded edge */
    padding: 16px 14px 16px 14px !important;
    overflow: hidden !important;
}

/* Inner scroll container — only this scrolls; #aside itself never shows a track */
#aside #layout-menu,
#aside .menu-inner,
#aside ul.menu-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

/* Force ALL descendant elements of #aside to have transparent background
   so the parent #aside cream color shows through everywhere. */
#aside .aside_accordion,
#aside .aside_collapse,
#aside .aside_submenu_collapse,
#aside .menu-inner-shadow,
#aside aside,
#aside ul,
#aside li,
#aside div:not(.aside_div):not(.aside_a):not(.aside_b):not(.aside_btn) {
    background: transparent !important;
    background-color: transparent !important;
}

/* NUCLEAR scrollbar kill — every descendant of #aside, every browser */
#aside,
#aside * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#aside::-webkit-scrollbar,
#aside *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}
#aside::-webkit-scrollbar-thumb,
#aside *::-webkit-scrollbar-thumb,
#aside::-webkit-scrollbar-track,
#aside *::-webkit-scrollbar-track,
#aside::-webkit-scrollbar-corner,
#aside *::-webkit-scrollbar-corner {
    background: transparent !important;
    display: none !important;
}
#main {
    padding-left: 280px !important;
    padding-top: 76px !important;
    background: var(--co-bg) !important;
    min-height: 100vh;
    overflow-x: hidden !important;
}
#main #content_div { overflow-x: hidden; }

/* Override the legacy body { white-space: nowrap } from my_css.css inside dashboard */
.co-bento-page,
.co-bento-page * { white-space: normal; }
/* Keep ellipsis truncation for items that explicitly need a single line */
.co-profile-name,
.co-profile-sub,
.co-list-meta,
.co-list-title,
.co-info-val,
.co-orb-tag,
.co-orb-mini-tag,
.co-stat-tag,
.co-tag,
.co-pill-tag,
.co-pill-tag-light,
.co-kpi-tile .co-kpi-tag,
.co-op-kpi-tag,
.co-bento-subtitle { white-space: nowrap; }
.co-bento-subtitle { overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Sidebar (Aside) — CuratorOS look
   ========================================================================== */
#layout-menu {
    width: 100% !important;
    gap: 4px;
}

/* Top-level accordion buttons */
.aside_btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--co-slate-800) !important;
    text-align: left;
    padding: 11px 14px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
}
.aside_btn:hover {
    color: var(--co-blue);
    background: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}
.aside_btn img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
    filter: invert(36%) sepia(8%) saturate(720%) hue-rotate(178deg) brightness(91%) contrast(86%);
    transition: filter 0.18s ease;
}
.aside_btn:hover img {
    filter: invert(31%) sepia(99%) saturate(2106%) hue-rotate(214deg) brightness(96%) contrast(96%);
}
.aside_btn .nav_title {
    color: inherit !important;
    margin-left: 0 !important;
    font-size: 13px;
    font-weight: 700;
}

/* Active accordion (open) */
.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"] {
    background: #ffffff;
    color: var(--co-blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-weight: 700;
}
.aside_btn.active_aside_btn img,
.aside_btn[aria-expanded="true"] img {
    filter: invert(31%) sepia(99%) saturate(2106%) hue-rotate(214deg) brightness(96%) contrast(96%);
}

/* Collapse panels */
.aside_collapse,
.aside_submenu_collapse {
    overflow: hidden;
    max-height: 0;
    transition: all 0.22s ease;
}
.aside_div {
    background: transparent !important;
    border-radius: 12px;
    padding: 4px 4px 4px 8px !important;
    display: flex;
    flex-flow: column;
    gap: 2px;
    margin: 2px 0 6px 0;
}

/* First-level menu links inside accordion */
.aside_a {
    font-size: 12.5px;
    text-decoration: none;
    padding: 8px 12px 8px 30px !important;
    margin: 1px 0 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--co-slate-700) !important;
    font-weight: 500;
    transition: background 0.16s ease, color 0.16s ease;
    position: relative;
}
.aside_a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--co-slate-300);
    transition: background 0.16s ease, transform 0.16s ease;
}
.aside_a:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--co-blue) !important;
    font-weight: 600;
}
.aside_a:hover::before {
    background: var(--co-blue);
    transform: translateY(-50%) scale(1.3);
}
.aside_a.aside_active {
    background: #ffffff !important;
    color: var(--co-blue) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.aside_a.aside_active::before {
    background: var(--co-blue);
}

/* Sub-menu (level 2) buttons */
.aside_submenu_btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--co-slate-700);
    text-align: left;
    padding: 8px 12px 8px 14px !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    transition: color 0.16s ease, background 0.16s ease;
}
.aside_submenu_btn:hover {
    color: var(--co-blue);
    background: rgba(255, 255, 255, 0.6);
}
.aside_submenu_btn .nav_middle_title {
    color: inherit !important;
    margin-left: 4px !important;
    font-size: 12.5px;
    font-weight: 600;
}
.aside_submenu_btn .custom_arrow {
    color: var(--co-slate-400) !important;
    font-size: 18px;
    transition: transform 0.2s ease, color 0.16s ease;
}
.aside_submenu_btn:hover .custom_arrow {
    color: var(--co-blue) !important;
}

/* Sub-menu links (level 2) */
.aside_b {
    font-size: 12.5px;
    text-decoration: none;
    padding: 7px 12px 7px 38px !important;
    margin: 1px 0 !important;
    border-radius: 10px;
    color: var(--co-slate-700) !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.16s ease, color 0.16s ease;
}
.aside_b:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--co-blue) !important;
    font-weight: 600;
}
.aside_b.aside_active {
    background: #ffffff !important;
    color: var(--co-blue) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Hide old white-on-dark color helper INSIDE the aside */
#aside .color_white { color: inherit !important; }

/* Sidebar scroll — hide scrollbar entirely (no visual line on right edge) */
#aside { scrollbar-width: none; -ms-overflow-style: none; }
#aside::-webkit-scrollbar { width: 0 !important; display: none !important; }
#aside::-webkit-scrollbar-thumb { background: transparent; }
#aside::-webkit-scrollbar-track { background: transparent; }

/* Hide leftover perfect-scrollbar / simplebar rails — these were rendering
   as a darker vertical line on the right edge of the sidebar. */
#aside .ps__rail-x,
#aside .ps__rail-y,
#aside .ps__thumb-x,
#aside .ps__thumb-y,
#aside .simplebar-track,
#aside .simplebar-track.simplebar-vertical,
#aside .simplebar-track.simplebar-horizontal,
#aside .simplebar-scrollbar,
#aside .simplebar-scrollbar::before {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Reset borders / shadows / backgrounds on inner sidebar containers
   and hide their scrollbars, so nothing else can draw a line. */
#aside #layout-menu,
#aside .menu-inner,
#aside .menu-inner-shadow {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
#aside #layout-menu::-webkit-scrollbar,
#aside .menu-inner::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}
#aside #layout-menu,
#aside .menu-inner {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Brand row at top — inserted by template */
.co-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 10px 8px;
    margin-bottom: 12px;
}
.co-brand-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--co-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.co-brand-icon .material-symbols-outlined { font-size: 22px; }
.co-brand h1 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: var(--co-slate-800);
    line-height: 1.1;
}
.co-brand p {
    font-size: 9px;
    color: var(--co-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin: 2px 0 0 0;
}

/* ==========================================================================
   Top Nav Bar — CuratorOS look
   ========================================================================== */
#nav,
body #nav,
nav#nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px !important;
    background-color: #5f5e5e !important;
    background-image:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.14), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.12), transparent 60%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 20px rgba(57, 56, 47, 0.12) !important;
    padding: 0 24px 0 16px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#base_logo_div {
    margin: 0 !important;
    padding: 0 8px !important;
    height: 64px;
    display: flex;
    align-items: center;
    width: 240px;
}
#logo_img {
    width: auto !important;
    height: 38px !important;
    object-fit: contain !important;
}
#nav_right {
    display: flex !important;
    gap: 10px !important;
    align-items: center;
    margin-right: 0 !important;
}

/* Top-nav action chips */
.username-badge {
    background: var(--co-slate-100) !important;
    color: var(--co-slate-700) !important;
    border: 1px solid var(--co-slate-200) !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
.inquiry-btn {
    background: var(--co-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(95, 94, 94, 0.18) !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.inquiry-btn:hover {
    background: var(--co-primary-dim) !important;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.28) !important;
    color: #fff !important;
}
.logout-btn {
    background: #ffffff !important;
    color: var(--co-slate-600) !important;
    border: 1px solid var(--co-slate-200) !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.logout-btn:hover {
    background: var(--co-slate-100) !important;
    color: var(--co-slate-800) !important;
    transform: translateY(-1px);
}

/* Memo button (sticky note) — round chip */
.memo-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--co-slate-600) !important;
    border: 1px solid var(--co-slate-200) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.memo-btn:hover {
    background: var(--co-slate-100) !important;
    color: var(--co-blue) !important;
}
.memo-btn .material-icons { font-size: 20px !important; }

/* ==========================================================================
   Dashboard (index) — bento panels
   ========================================================================== */
.co-page {
    padding: 24px 28px 40px 28px;
    max-width: 1600px;
    margin: 0 auto;
}
.co-page-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.co-page-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--co-on-surface);
    margin: 0 0 6px 0;
}
.co-page-subtitle {
    color: var(--co-on-variant);
    font-size: 13.5px;
    margin: 0;
    max-width: 560px;
}

/* Glass / lift panels reused by index cards */
.co-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    box-shadow:
        0 16px 32px rgba(57, 56, 47, 0.06),
        0 6px 12px rgba(57, 56, 47, 0.04);
    padding: 22px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.co-panel:hover {
    transform: translateY(-1px);
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.08),
        0 10px 16px rgba(57, 56, 47, 0.05);
}

.co-panel-dark {
    background: var(--co-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 18px 40px rgba(95, 94, 94, 0.18);
}
.co-panel-dark .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

/* Override Bootstrap card inside dashboard — make it glassy */
#tab_list_load .card,
#carouselExample .card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 18px !important;
    box-shadow:
        0 14px 28px rgba(57, 56, 47, 0.06),
        0 6px 10px rgba(57, 56, 47, 0.04) !important;
}
#tab_list_load .card .card-body { padding: 22px 22px; }
#tab_list_load .card-title {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
}

/* KPI tile avatar circle */
#tab_list_load .avatar-xs .avatar-title {
    background: var(--co-secondary-container, #eee1cd) !important;
    color: var(--co-secondary, #6d6354) !important;
    width: 36px !important; height: 36px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
#tab_list_load h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.badge.badge-soft-success { background: rgba(34, 197, 94, 0.12) !important; color: #16a34a !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }
.badge.badge-soft-danger  { background: rgba(254, 139, 112, 0.18) !important; color: #b91c1c !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }
.badge.badge-soft-warning { background: rgba(253, 192, 3, 0.2) !important; color: #92400e !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }

/* Tab buttons inside dashboard */
#carouselExample .nav-tabs {
    border: none !important;
    gap: 6px !important;
    padding-left: 6px !important;
}
#carouselExample .nav-tabs .nav-link {
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    background: transparent !important;
    color: var(--co-on-variant) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
#carouselExample .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--co-on-surface) !important;
}
#carouselExample .nav-tabs .nav-link.active {
    background: var(--co-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.2);
}

/* Page-level background tint on dashboard */
main#main #content_div { background: transparent; }

/* Smooth select2 widget on dashboard date row */
#tab_list_load .select2-container--default .select2-selection--single,
#carouselExample .select2-container--default .select2-selection--single {
    border-radius: 999px !important;
    border: 1px solid var(--co-slate-200) !important;
    background: #fff !important;
}

/* Dashboard primary action button (date 변경) — soft pill */
#carouselExample form#form_date button[type="submit"] {
    background: var(--co-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 14px rgba(95, 94, 94, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#carouselExample form#form_date button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(95, 94, 94, 0.26);
}

/* ==========================================================================
   CuratorOS Bento Dashboard (used by index.html main hero + tab1)
   ========================================================================== */
.co-bento-page {
    padding: 24px 28px 40px 28px;
    max-width: 1600px;
    margin: 0 auto;
    background: transparent;
}

/* Header row */
.co-bento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.co-bento-heading h2.co-bento-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--co-on-surface);
    margin: 0 0 6px 0;
    line-height: 1.1;
}
.co-bento-heading .co-bento-subtitle {
    color: var(--co-on-variant);
    font-size: 13.5px;
    margin: 0;
    max-width: none;
}
.co-date-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 8px 20px rgba(57, 56, 47, 0.06);
}
.co-date-form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--co-on-variant);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.co-date-form input[type="date"],
.co-date-form input[type="text"] {
    border: none !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--co-on-surface);
    outline: none;
    padding: 6px 8px;
    width: 130px;
}
.co-btn {
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.co-btn-primary {
    background: var(--co-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.25);
}
.co-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(95, 94, 94, 0.32);
}

/* Bento grid */
.co-bento-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}
.co-bento-row > .co-col-4 { grid-column: span 4; }
.co-bento-row > .co-col-5 { grid-column: span 5; }
.co-bento-row > .co-col-6 { grid-column: span 6; }
.co-bento-row > .co-col-7 { grid-column: span 7; }
.co-bento-row > .co-col-8 { grid-column: span 8; }
.co-bento-row > .co-col-12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .co-bento-row > .co-col-4,
    .co-bento-row > .co-col-5,
    .co-bento-row > .co-col-6,
    .co-bento-row > .co-col-7,
    .co-bento-row > .co-col-8 { grid-column: span 12; }
}

.co-bento-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
/* Second card (집행/입사 list) grows to fill remaining height
   so the stack bottom aligns with sibling panels (orb / dark info) */
.co-bento-stack > .co-glass:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.co-bento-stack > .co-glass:last-child .co-list {
    flex: 1 1 auto;
    justify-content: space-between;
}

/* Generic glass panel */
.co-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow:
        0 12px 24px rgba(57, 56, 47, 0.05),
        0 4px 8px rgba(57, 56, 47, 0.03);
    padding: 18px 20px;
    overflow: hidden;
}
.co-glass::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(109, 99, 84, 0.05);
    filter: blur(40px);
    pointer-events: none;
}

/* Light warm-cream panel + 다홍/옐로우 코너 글로우 (원본 스타일) */
.co-dark {
    background:
        radial-gradient(380px 200px at 100% 0%, rgba(253, 192, 3, 0.18), transparent 60%),
        radial-gradient(280px 160px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        linear-gradient(135deg, #fdf9f1 0%, #f1eee2 100%);
    color: var(--co-on-surface);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow:
        0 12px 24px rgba(57, 56, 47, 0.05),
        0 4px 8px rgba(57, 56, 47, 0.03);
    position: relative;
    overflow: hidden;
}
.co-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(220px 120px at 50% 50%, rgba(255, 255, 255, 0.4), transparent 70%);
    pointer-events: none;
}

/* Panel headers */
.co-panel-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.co-panel-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
    margin: 0;
}
.co-panel-title-light {
    font-size: 18px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
}
.co-panel-sub-light {
    font-size: 14px;
    color: var(--co-on-variant);
    margin: 4px 0 0 0;
}
.co-panel-more {
    color: var(--co-secondary);
    cursor: pointer;
}
.co-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-on-variant);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 8px 0;
}
.co-pill-tag {
    display: inline-block;
    background: var(--co-surface-high);
    color: var(--co-secondary);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 5px 10px;
    border-radius: 999px;
}

/* Orb panel — the showcase visual */
.co-orb-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.co-orb-stage {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    /* 패널이 넓은 모니터에서도 오브 3개가 13" MacBook 시점처럼 자연스럽게 겹치도록 폭 고정 */
    max-width: 340px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.co-orb {
    border-radius: 9999px;
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}
.co-orb-primary {
    width: 190px;
    height: 190px;
    background: var(--co-primary);
    color: #fff;
    z-index: 10;
}
.co-orb-primary .co-orb-value {
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}
.co-orb-primary .co-orb-tag {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
    margin-top: 9px;
    font-weight: 700;
}
.co-orb-photo {
    width: 88%;
    height: 88%;
    object-fit: cover;
    border-radius: 50%;
}
.co-orb-yellow {
    width: 140px;
    height: 140px;
    background: #fdc003;
    color: #553e00;
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 24px rgba(253, 192, 3, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.05);
    top: -10px;
    right: -28px;
    z-index: 20;
}
.co-orb-yellow .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 600; }
.co-orb-coral {
    width: 96px;
    height: 96px;
    background: #fe8b70;
    color: #fff;
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 24px rgba(254, 139, 112, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.05);
    bottom: 6px;
    left: 8px;
    z-index: 30;
}
.co-orb-coral .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 600; }

/* Numbers inside the small orbs (real ERP metrics, not decorative) */
.co-orb-mini-value {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.co-orb-coral .co-orb-mini-value { font-size: 28px; }
.co-orb-mini-tag {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-top: 5px;
    opacity: 0.9;
}
.co-orb-coral .co-orb-mini-tag { font-size: 12px; margin-top: 3px; }

.co-orb-stats {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.co-orb-stat {
    flex: 1;
    background: var(--co-surface-high);
    border-radius: 12px;
    padding: 8px 10px;
    text-align: center;
}
.co-orb-stat .co-stat-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 5px 0;
}
.co-orb-stat .co-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
    letter-spacing: -0.02em;
}

/* KPI big number tile */
.co-stat-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.co-stat-mega {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--co-on-surface);
    line-height: 1;
}
.co-stat-suffix {
    font-size: 16px;
    font-weight: 700;
    color: var(--co-secondary);
}
.co-icon-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-secondary);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
.co-icon-bubble .material-symbols-outlined { font-size: 20px; }

.co-progress {
    margin-top: 10px;
    width: 100%;
    height: 6px;
    background: var(--co-surface-high);
    border-radius: 999px;
    overflow: hidden;
}
.co-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fdc003, #fe8b70);
    border-radius: 999px;
}
.co-progress-fill.co-progress-success {
    background: linear-gradient(90deg, #34d399, #22c55e);
}
.co-progress-fill.co-progress-danger {
    background: linear-gradient(90deg, #fe8b70, #ef4444);
}
.co-progress-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--co-on-variant);
}
.co-progress-text { font-size: 11px; }

/* List rows in glass panel (Weight Loss Plan style) */
.co-list { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.co-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    padding: 5px 8px;
    transition: background 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}
.co-list-item:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(2px);
}
.co-list-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-list-icon .material-symbols-outlined { font-size: 15px; }
.co-list-icon-yellow { background: #fdc003; color: #553e00; }
.co-list-icon-coral { background: #fe8b70; color: #fff; }
.co-list-icon-secondary { background: var(--co-secondary-container); color: var(--co-secondary); }
.co-list-body { flex-grow: 1; min-width: 0; }
.co-list-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1.3;
}
.co-list-meta {
    font-size: 13px;
    color: var(--co-on-variant);
    margin: 3px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-list-chev {
    color: var(--co-secondary);
    opacity: 0.55;
    flex-shrink: 0;
}

/* Dark info panel — 운수사 운영 KPI 변형 */
.co-info-card { display: flex; flex-direction: column; min-height: 320px; gap: 14px; }

.co-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.co-profile-meta { min-width: 0; }
.co-profile-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-profile-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--co-on-variant);
    margin: 3px 0 0 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-pill-tag-light {
    background: rgba(109, 99, 84, 0.12) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(109, 99, 84, 0.16);
    font-size: 12px !important;
    padding: 6px 12px !important;
    font-weight: 800;
}

/* 운영 KPI 2×2 grid (보유 차량 / 운행 노선 / 당월 사고 / 당월 민원) */
.co-op-kpi-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-grow: 1;
}
.co-op-kpi {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(109, 99, 84, 0.10);
    border-radius: 12px;
    padding: 10px 11px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}
.co-op-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-op-kpi-icon .material-symbols-outlined { font-size: 20px; }
/* 원본 KPI 아이콘 컬러 (옐로우/코랄/라이트/소프트) 복원 */
.co-op-kpi-icon-light  { background: rgba(109, 99, 84, 0.16); color: var(--co-secondary); }
.co-op-kpi-icon-yellow { background: rgba(253, 192, 3, 0.22);   color: #b27e00; }
.co-op-kpi-icon-coral  { background: rgba(254, 139, 112, 0.22); color: #c54a31; }
.co-op-kpi-icon-soft   { background: rgba(109, 99, 84, 0.10); color: var(--co-secondary); }

.co-op-kpi-body { min-width: 0; }
.co-op-kpi-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-secondary);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0 0 4px 0;
}
.co-op-kpi-num {
    font-size: 24px;
    font-weight: 900;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}
.co-op-kpi-num span {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-on-variant);
    margin-left: 4px;
}

/* legacy info-row styles (kept for fallback) */
.co-avatar-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(109, 99, 84, 0.12);
    border: 2px solid rgba(109, 99, 84, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-secondary);
    overflow: hidden;
}
.co-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.co-avatar-circle .material-symbols-outlined { font-size: 20px; }
.co-info-rows { position: relative; z-index: 1; flex-grow: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.co-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.co-info-row:last-child { border-bottom: none; }
.co-info-key {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.co-info-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-info-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}
.co-info-stat { display: flex; align-items: center; gap: 6px; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.co-dot-yellow { background: #fdc003; }
.co-dot-coral { background: #fe8b70; }
.co-dot-light { background: rgba(255, 255, 255, 0.6); }

/* Pill tabs */
.co-tab-row {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 20px;
}
.co-tab {
    border: none;
    background: transparent;
    color: var(--co-on-variant);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.co-tab:hover { color: var(--co-on-surface); }
.co-tab.co-tab-active,
.co-tab.active {
    background: var(--co-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.22);
}

/* KPI strip in tab1 */
.co-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
@media (max-width: 1100px) { .co-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.co-kpi-tile {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 12px 22px rgba(57, 56, 47, 0.05);
    position: relative;
    overflow: hidden;
}
.co-kpi-tile.co-kpi-yellow {
    background: linear-gradient(135deg, #fdc003 0%, #ecb200 100%);
    border: none;
    color: #553e00;
}
.co-kpi-tile.co-kpi-yellow .co-kpi-tag,
.co-kpi-tile.co-kpi-yellow .co-kpi-meta { color: rgba(85, 62, 0, 0.7); }
.co-kpi-tile.co-kpi-coral {
    background: linear-gradient(135deg, #fe8b70 0%, #f06b51 100%);
    border: none;
    color: #fff;
}
.co-kpi-tile.co-kpi-coral .co-kpi-tag,
.co-kpi-tile.co-kpi-coral .co-kpi-meta { color: rgba(255, 255, 255, 0.85); }
.co-kpi-tile.co-kpi-dark {
    background: var(--co-primary);
    border: none;
    color: #fff;
}
.co-kpi-tile.co-kpi-dark .co-kpi-tag,
.co-kpi-tile.co-kpi-dark .co-kpi-meta { color: rgba(255, 255, 255, 0.7); }

.co-kpi-tile .co-kpi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.co-kpi-tile .co-kpi-head .co-kpi-bubble {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    display: flex; align-items: center; justify-content: center;
    color: currentColor;
}
.co-kpi-tile .co-kpi-tag {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--co-on-variant);
}
.co-kpi-tile h3.co-kpi-num {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.1;
}
.co-kpi-tile .co-kpi-meta {
    font-size: 14px;
    color: var(--co-on-variant);
    margin-top: 12px;
}

/* Tab1 chart bento */
.co-chart-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    margin-bottom: 22px;
}
.co-chart-grid > .co-c4 { grid-column: span 4; }
.co-chart-grid > .co-c5 { grid-column: span 5; }
.co-chart-grid > .co-c6 { grid-column: span 6; }
.co-chart-grid > .co-c7 { grid-column: span 7; }
.co-chart-grid > .co-c8 { grid-column: span 8; }
.co-chart-grid > .co-c12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .co-chart-grid > [class*="co-c"] { grid-column: span 12; }
}

.co-chart-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    box-shadow: 0 14px 26px rgba(57, 56, 47, 0.05);
    padding: 22px 22px;
}
.co-chart-panel h4.co-chart-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
    margin: 0 0 14px 0;
}

/* radial chart text rows from cost_statistic */
.co-chart-panel table.table { background: transparent; }
.co-chart-panel table.table td { border: none !important; padding: 6px 8px; }

/* Hide the legacy bootstrap-card backgrounds when inside bento page */
.co-bento-page .card { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.co-bento-page .card .card-body { padding: 0 !important; }


/* Site search (select2) in top nav — round pill to match the chips next to it */
#nav_right .select2-container { width: 240px !important; }
#nav_right .select2-container--default .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--co-slate-200) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 0 16px 0 38px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
#nav_right .select2-container--default .select2-selection--single::before {
    content: 'search';
    font-family: 'Material Icons';
    font-size: 18px;
    color: var(--co-on-variant, #64748b);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
#nav_right .select2-container--default .select2-selection--single:hover {
    border-color: var(--co-slate-300, #cbd5e1) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
#nav_right .select2-container--default.select2-container--focus .select2-selection--single,
#nav_right .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--co-primary) !important;
    box-shadow: 0 0 0 3px rgba(95, 94, 94, 0.14);
}
#nav_right .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 0 !important;
    padding-right: 18px !important;
    color: var(--co-slate-700, #334155) !important;
    font-size: 13px;
    font-weight: 600;
}
#nav_right .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--co-on-variant, #64748b);
    font-weight: 500;
}
#nav_right .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 10px !important;
}

/* Nudge logo a bit to the right inside the top nav */
#base_logo_div { padding-left: 24px !important; }

/* Center the logo above the sidebar (sidebar is 256px wide) */
#base_logo_div {
    width: 256px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}

/* Nudge logo slightly to the left within the centered band */
#base_logo_div { padding-right: 24px !important; }

/* (legacy #aside background overrides removed — the single #aside rule
   near the top of this file controls the sidebar background flat-cream) */

/* Top nav — switch base to warm dark brown so it harmonizes with the cream menu/dashboard */
#nav {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.16), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        var(--co-secondary) !important;
    box-shadow: 0 4px 14px rgba(85, 62, 0, 0.14) !important;
}
.inquiry-btn {
    background: var(--co-secondary) !important;
}
.inquiry-btn:hover {
    background: #5b5247 !important;
}

/* Top sidebar (#nav) — warm dark brown harmonizing with cream menu/dashboard */
#nav {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.16), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        var(--co-secondary) !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 8px 20px rgba(85, 62, 0, 0.18) !important;
}
/* 문의게시판 버튼 — 화이트 솔리드 */
.inquiry-btn {
    background: #ffffff !important;
    color: var(--co-slate-700) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    font-weight: 700 !important;
}
.inquiry-btn:hover {
    background: #f8fafc !important;
    color: var(--co-slate-700) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-1px);
}

/* Tint the white logo so it isn't pure stark white — warm cream that matches the palette */
#logo_img {
    filter: sepia(0.55) saturate(1.45) brightness(0.93) contrast(1.05);
}

/* Inset the top sidebar from the screen edges so its rounded corners breathe */
#nav {
    left: 12px !important;
    right: 12px !important;
}

/* Float the top sidebar with all 4 corners rounded */
#nav {
    top: 12px !important;
    border-radius: 22px !important;
}
#main { padding-top: 88px !important; }
#aside { padding-top: 92px !important; }

/* Make left/right insets explicit and equal so the top sidebar floats symmetrically,
   and push the menu bar (aside) further down so it doesn't touch the nav */
#nav {
    width: auto !important;
    left: 16px !important;
    right: 16px !important;
    box-sizing: border-box !important;
}
#aside { padding-top: 108px !important; }
#main { padding-top: 96px !important; }

/* Drop the menu bar below the floating top nav so a real gap is visible,
   and pull the menu items back up by trimming the inner top padding */
#aside {
    top: 90px !important;
    bottom: 0 !important;
    height: auto !important;
    padding-top: 10px !important;
}
#main { padding-top: 92px !important; }

/* Bump menu text 1-2pt larger and shift labels slightly to the right (text only) */
.aside_btn { font-size: 16.5px !important; gap: 14px !important; }
.aside_btn .nav_title { font-size: 16.5px !important; margin-left: 4px !important; }
.aside_submenu_btn { font-size: 15.5px !important; gap: 8px !important; }
.aside_submenu_btn .nav_middle_title { font-size: 15.5px !important; margin-left: 4px !important; }
.aside_a { font-size: 15px !important; padding-left: 38px !important; }
.aside_a::before { left: 18px !important; }
.aside_b { font-size: 15px !important; padding-left: 46px !important; }

/* Give the last menu item ("기초정보관리") room so its text isn't clipped at the bottom */
#aside { padding-bottom: 40px !important; }
#aside .menu-inner { padding-bottom: 24px !important; }

/* Shift the logo a bit more to the left and enlarge it within the top sidebar */
#base_logo_div { padding-right: 56px !important; }
#logo_img { height: 48px !important; }

/* Swap the blue hover/active color in the menu for a warm rust that matches the cream palette */
.aside_btn:hover,
.aside_a:hover,
.aside_b:hover,
.aside_submenu_btn:hover,
.aside_submenu_btn:hover .custom_arrow,
.memo-btn:hover { color: #a8431f !important; }

.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"],
.aside_a.aside_active,
.aside_b.aside_active { color: var(--co-error-on) !important; }

.aside_a:hover::before { background: #a8431f !important; }
.aside_a.aside_active::before { background: var(--co-error-on) !important; }

/* Switch hover/active highlight from red rust to warm golden-brown to match the yellow accent */
.aside_btn:hover,
.aside_a:hover,
.aside_b:hover,
.aside_submenu_btn:hover,
.aside_submenu_btn:hover .custom_arrow,
.memo-btn:hover { color: #553e00 !important; }

.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"],
.aside_a.aside_active,
.aside_b.aside_active { color: #553e00 !important; }

.aside_a:hover::before { background: #553e00 !important; }
.aside_a.aside_active::before { background: #553e00 !important; }

/* ==========================================================================
   Global UI — apply CuratorOS palette to ERP-wide buttons, tables, modals,
   forms (everything outside the dashboard hero panel)
   ========================================================================== */

/* ── Buttons (Bootstrap-based) ─────────────────────────────────────── */
#main .btn,
.modal .btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    letter-spacing: 0.01em;
}
#main .btn-sm, .modal .btn-sm { border-radius: 8px !important; }

/* Primary → 옐로우 액센트 (대시보드 톤과 통일, 저장/주요 CTA용) */
#main .btn-primary,
.modal .btn-primary {
    background: var(--co-tertiary) !important;
    border-color: var(--co-tertiary) !important;
    color: var(--co-tertiary-on) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(253, 192, 3, 0.28) !important;
}
#main .btn-primary:hover,
#main .btn-primary:focus,
#main .btn-primary:active,
.modal .btn-primary:hover {
    background: #ffd340 !important;
    border-color: #ffd340 !important;
    box-shadow: 0 6px 18px rgba(253, 192, 3, 0.42) !important;
    color: var(--co-tertiary-on) !important;
    transform: translateY(-1px);
}

/* Secondary → secondary taupe */
#main .btn-secondary,
.modal .btn-secondary {
    background: var(--co-secondary) !important;
    border-color: var(--co-secondary) !important;
    color: #fff !important;
}
#main .btn-secondary:hover,
.modal .btn-secondary:hover {
    background: #5c5343 !important;
    border-color: #5c5343 !important;
    color: #fff !important;
}

/* Success → softer green (kept distinct from green-coded ERP semantics) */
#main .btn-success,
.modal .btn-success {
    background: #2c9c66 !important;
    border-color: #2c9c66 !important;
    color: #fff !important;
}
#main .btn-success:hover,
.modal .btn-success:hover {
    background: #258256 !important;
    border-color: #258256 !important;
}

/* Danger → coral */
#main .btn-danger,
.modal .btn-danger {
    background: #d65c45 !important;
    border-color: #d65c45 !important;
    color: #fff !important;
}
#main .btn-danger:hover,
.modal .btn-danger:hover {
    background: #b94833 !important;
    border-color: #b94833 !important;
}

/* Warning → tertiary yellow */
#main .btn-warning,
.modal .btn-warning {
    background: var(--co-tertiary) !important;
    border-color: var(--co-tertiary) !important;
    color: var(--co-tertiary-on) !important;
}
#main .btn-warning:hover,
.modal .btn-warning:hover {
    background: #ecb200 !important;
    border-color: #ecb200 !important;
}

/* Info → secondary container (warm cream) */
#main .btn-info,
.modal .btn-info {
    background: var(--co-secondary-container) !important;
    border-color: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
}
#main .btn-info:hover,
.modal .btn-info:hover {
    background: #e3d5b9 !important;
    border-color: #e3d5b9 !important;
    color: var(--co-secondary) !important;
}

/* Light / Dark / Outline */
#main .btn-light,
.modal .btn-light {
    background: var(--co-surface-container) !important;
    border: 1px solid var(--co-outline) !important;
    color: var(--co-on-surface) !important;
}
#main .btn-light:hover,
.modal .btn-light:hover { background: var(--co-surface-high) !important; }
#main .btn-dark,
.modal .btn-dark {
    background: var(--co-on-surface) !important;
    border-color: var(--co-on-surface) !important;
    color: #fff !important;
}

#main .btn-outline-primary,
.modal .btn-outline-primary {
    color: var(--co-primary) !important;
    border-color: var(--co-primary) !important;
    background: transparent !important;
}
#main .btn-outline-primary:hover,
.modal .btn-outline-primary:hover {
    background: var(--co-primary) !important;
    color: #fff !important;
}
#main .btn-outline-secondary,
.modal .btn-outline-secondary {
    color: var(--co-secondary) !important;
    border-color: var(--co-secondary) !important;
    background: transparent !important;
}
#main .btn-outline-secondary:hover,
.modal .btn-outline-secondary:hover {
    background: var(--co-secondary) !important;
    color: #fff !important;
}

/* ── Standard <table> — 헤더 다크그레이 통일 ─────────────────────────────────────────────── */
#main .table thead th,
#main .table > thead > tr > th,
.modal .table thead th {
    background: #2d2d2d !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
    text-transform: none;
}
#main .table tbody tr:hover {
    background: rgba(238, 225, 205, 0.35) !important;
}

/* ── Tabulator ─────────────────────────────────────────────────────── */
#main .tabulator {
    border: 1px solid rgba(188, 185, 173, 0.4) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
#main .tabulator .tabulator-header,
#main .tabulator .tabulator-header .tabulator-col {
    background: #2d2d2d !important;
    border-bottom: 0 !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}
#main .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: none;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(188, 185, 173, 0.18) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
    background: var(--co-surface-low) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background: rgba(238, 225, 205, 0.45) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {
    background: var(--co-secondary-container) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border-right: 1px solid rgba(188, 185, 173, 0.18) !important;
    color: var(--co-on-surface) !important;
}

/* ── th.table_main on plain HTML tables (.my_table_data / .my_table_data_no_child / .my_table_input)
   원래 navy gradient #172852→#294ca1 였던 것 → 따뜻한 차콜 톤으로 통일. */
.my_table_data th.table_main,
.my_table_data_no_child th.table_main,
.my_table_input th.table_main,
#main .my_table_data th.table_main,
#main .my_table_data_no_child th.table_main,
#main .my_table_input th.table_main,
.modal .my_table_data th.table_main,
.modal .my_table_data_no_child th.table_main,
.modal .my_table_input th.table_main,
table th.table_main,
#main table th.table_main,
.modal table th.table_main {
    background: #2d2d2d !important;
    background-image: none !important;
    color: #fff !important;
    border-bottom: 2px solid #2d2d2d !important;
    font-weight: 700 !important;
}

/* table_main 모든 테이블 헤더 → 모던 뉴트럴 다크그레이(#2d2d2d) 통일 */
.tabulator .tabulator-header.table_main,
.tabulator.table_main .tabulator-header,
.tabulator.table_main .tabulator-header .tabulator-col,
#main .tabulator .tabulator-header.table_main,
#main .tabulator.table_main .tabulator-header,
#main .tabulator.table_main .tabulator-header .tabulator-col,
.modal .tabulator .tabulator-header.table_main,
.modal .tabulator.table_main .tabulator-header,
.modal .tabulator.table_main .tabulator-header .tabulator-col {
    background: #2d2d2d !important;
    border-bottom: 0 !important;
}
.tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
#main .tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
.modal .tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
    font-weight: 700 !important;
}

/* 일반 Tabulator 헤더 + 모달 안 표준 table 헤더 → 다크그레이 통일 */
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.modal .tabulator .tabulator-header,
.modal .tabulator .tabulator-header .tabulator-col,
.modal .table thead th,
.modal .table > thead > tr > th {
    background: #2d2d2d !important;
    color: #fff !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
.modal .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
}

/* Editing cell border (was navy #172852) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid var(--co-tertiary) !important;
}

/* Active tab — was navy #172852 */
.nav-tabs .nav-link.active,
#main .nav-tabs .nav-link.active,
.modal .nav-tabs .nav-link.active {
    background-color: var(--co-surface-container) !important;
    color: var(--co-on-surface) !important;
    border-bottom-color: var(--co-tertiary) !important;
    font-weight: 700 !important;
}

/* Navy buttons → warm primary (운수사 #002060 / #001238 #172852 등) */
.btn_blue,
#main .btn_blue,
.modal .btn_blue {
    background-color: var(--co-primary) !important;
    color: #fff !important;
}
.btn_blue:hover,
#main .btn_blue:hover,
.modal .btn_blue:hover {
    background-color: var(--co-primary-dim) !important;
    color: #fff !important;
}

/* ── Bootstrap card ─────────────────────────────────────────────────── */
#main .card:not(.co-bento-page .card) {
    border: 1px solid rgba(188, 185, 173, 0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.04) !important;
}
#main .card-header:not(.co-bento-page .card-header) {
    background: var(--co-surface-container) !important;
    border-bottom: 1px solid var(--co-secondary-container) !important;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700 !important;
    color: var(--co-on-surface) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 48px rgba(57, 56, 47, 0.18) !important;
    overflow: hidden;
}
.modal-header {
    background: var(--co-surface-container) !important;
    border-bottom: 1px solid var(--co-secondary-container) !important;
}
.modal-title {
    color: var(--co-on-surface) !important;
    font-weight: 700 !important;
}
.modal-footer {
    background: var(--co-surface-low) !important;
    border-top: 1px solid var(--co-secondary-container) !important;
}

/* ── Form controls ─────────────────────────────────────────────────── */
#main .form-control,
#main .form-select,
#main input[type="text"],
#main input[type="number"],
#main input[type="date"],
#main input[type="email"],
#main input[type="password"],
#main input[type="tel"],
#main input[type="search"],
#main select,
#main textarea,
.modal .form-control,
.modal .form-select,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="email"],
.modal input[type="password"],
.modal select,
.modal textarea {
    border: 1px solid var(--co-outline) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#main .form-control:focus,
#main .form-select:focus,
#main input:focus,
#main select:focus,
#main textarea:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 3px rgba(109, 99, 84, 0.12) !important;
    outline: none !important;
}

/* select2 widget — match form theme */
#main .select2-container--default .select2-selection--single,
.modal .select2-container--default .select2-selection--single {
    border: 1px solid var(--co-outline) !important;
    border-radius: 8px !important;
    background: #fff !important;
}
#main .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 3px rgba(109, 99, 84, 0.12) !important;
}
.select2-dropdown {
    border: 1px solid var(--co-outline) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
    min-width: 200px !important;  /* 드롭다운이 좁아 이름 잘리던 문제 — 최소 너비 보장 */
    width: auto !important;
}
/* select2 박스(닫힌 상태)도 너무 좁던 문제 — 최소 너비 보장 (nav_right는 자체 width:240px가 우선되어 유지됨) */
.select2-container--default {
    min-width: 150px !important;
}
/* 드롭다운 항목 한 줄 유지(가로스크롤 방지) */
.select2-results__option {
    white-space: nowrap !important;
}
.select2-results__option--highlighted {
    background: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
}

/* ── Pagination ────────────────────────────────────────────────────── */
#main .pagination .page-link,
.modal .pagination .page-link {
    color: var(--co-on-surface) !important;
    border: 1px solid var(--co-outline) !important;
    background: #fff !important;
}
#main .pagination .page-link:hover,
.modal .pagination .page-link:hover {
    background: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
    border-color: var(--co-outline) !important;
}
#main .pagination .page-item.active .page-link,
.modal .pagination .page-item.active .page-link {
    background: var(--co-primary) !important;
    border-color: var(--co-primary) !important;
    color: #fff !important;
}

/* ── Bootstrap tabs (대시보드 pill 탭 .co-tab-row 는 제외) ────────────── */
#main .nav-tabs:not(.co-tab-row),
.modal .nav-tabs:not(.co-tab-row) { border-bottom: 1px solid var(--co-secondary-container) !important; }
#main .nav-tabs:not(.co-tab-row) .nav-link,
.modal .nav-tabs:not(.co-tab-row) .nav-link {
    color: var(--co-on-variant) !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}
#main .nav-tabs:not(.co-tab-row) .nav-link:hover,
.modal .nav-tabs:not(.co-tab-row) .nav-link:hover {
    background: var(--co-surface-container) !important;
    color: var(--co-on-surface) !important;
}
#main .nav-tabs:not(.co-tab-row) .nav-link.active,
.modal .nav-tabs:not(.co-tab-row) .nav-link.active {
    color: var(--co-primary) !important;
    background: #fff !important;
    border-bottom: 2px solid var(--co-primary) !important;
    font-weight: 700 !important;
}
/* 대시보드 .co-tab-row 는 자체 pill 스타일 유지 (Bootstrap nav-tabs 영향 차단) */
#main .co-tab-row.nav-tabs,
.co-tab-row.nav-tabs {
    border-bottom: 0 !important;
    border-radius: 999px !important;
}

/* 인사정보 탭바(#tab_btns) 색 통일 — my_css(구 navy/gray) vs curator 충돌로 탭마다 색이 달라보이던 것 단일화.
   비활성 전부 동일 회색, hover/focus도 동일(색 안 바뀜), 활성만 흰색+주황 밑줄로 구분 */
#tab_btns .nav-link,
#tab_btns .nav-link:hover,
#tab_btns .nav-link:focus,
#tab_btns .nav-link:active {
    background-color: #eef0f3 !important;
    color: #707070 !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
}
#tab_btns .nav-link.active {
    background-color: #fff !important;
    color: var(--co-primary) !important;
    border-bottom: 2px solid var(--co-primary) !important;
    font-weight: 700 !important;
}

/* ── Badges (bg-* utilities) ───────────────────────────────────────── */
#main .badge.bg-primary { background: var(--co-primary) !important; color: #fff !important; }
#main .badge.bg-secondary { background: var(--co-secondary) !important; color: #fff !important; }
#main .badge.bg-success { background: #2c9c66 !important; color: #fff !important; }
#main .badge.bg-warning { background: var(--co-tertiary) !important; color: var(--co-tertiary-on) !important; }
#main .badge.bg-danger { background: #d65c45 !important; color: #fff !important; }
#main .badge.bg-info { background: var(--co-secondary-container) !important; color: var(--co-secondary) !important; }

/* ── Don't apply globals to the dashboard hero (it has its own theme) ─ */
.co-bento-page .btn-primary,
.co-bento-page .nav-tabs .nav-link {
    /* dashboard already styled via co-* classes; bootstrap classes inside
       are largely cosmetic — let dashboard styles win via existing rules */
}

/* ==========================================================================
   Sidebar collapse / expand toggle (chuncheon-inspired)
   ========================================================================== */
#aside, #main { transition: width 0.25s ease, padding-left 0.25s ease, opacity 0.2s ease; }

/* Collapse button — sits inside the cream menu bar at its top-right */
#sidebar-collapse-btn {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--co-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(57, 56, 47, 0.16);
    transition: all 0.18s ease;
    z-index: 5;
}
#sidebar-collapse-btn:hover {
    background: var(--co-secondary);
    color: #fdc003;
    transform: scale(1.08);
}
#sidebar-collapse-btn .material-icons { font-size: 18px; }

/* Expand button — appears at the top-left when the menu is collapsed */
#sidebar-expand-btn {
    position: fixed;
    top: 96px;
    left: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--co-secondary);
    color: #fdc003;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.28);
    transition: all 0.18s ease;
    z-index: 1002;
}
#sidebar-expand-btn:hover {
    background: var(--co-primary);
    color: #fdc003;
    transform: scale(1.08);
}
#sidebar-expand-btn .material-icons { font-size: 22px; }

/* Collapsed state — hide the menu and reclaim the space */
body.sidebar-collapsed #aside {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    opacity: 0;
}
body.sidebar-collapsed #main { padding-left: 0 !important; }
body.sidebar-collapsed #sidebar-collapse-btn { display: none; }
body.sidebar-collapsed #sidebar-expand-btn { display: flex; }

/* Tables (.scroll_div / .sot) — match the new 256px menu bar and adjust on collapse */
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) {
    left: 270px !important;
}
body.sidebar-collapsed .scroll_div:not([style*="left:"]),
body.sidebar-collapsed .sot:not([style*="left:"]) {
    left: 20px !important;
}

/* Slim down the menu bar so tables have more horizontal room */
#aside { width: 220px !important; }
#main { padding-left: 220px !important; }
#base_logo_div { width: 220px !important; padding-right: 40px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 234px !important; }

/* Match the chuncheon project's menu bar width (240px) */
#aside { width: 240px !important; }
#main { padding-left: 240px !important; }
#base_logo_div { width: 240px !important; padding-right: 48px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 254px !important; }

/* Stop the page header / filter row from extending under the menu bar */
#main { overflow-x: hidden !important; }
#main #content_div,
#main #content_load,
#main .content_li {
    max-width: 100%;
    box-sizing: border-box;
    /* white-space: normal 제거 — body의 nowrap이 기본으로 상속되어야 한글 라벨이 글자별로 세로로 깨지지 않음 */
}
/* 검색 필터 / 버튼 바: 강제 가로 정렬 + nowrap (한글 라벨이 세로로 깨지는 문제 차단) */
#main .search_box,
#main .button_box,
.modal .search_box,
.modal .button_box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
/* 컬럼들 (col-auto 등) 자기 콘텐츠 폭만큼만 차지 */
#main .search_box > .col,
#main .search_box > .col-auto,
#main .search_box > [class*="col-"],
.modal .search_box > .col,
.modal .search_box > .col-auto,
.modal .search_box > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}
/* input-group 도 가로 한 줄, 안 깨지게 */
#main .search_box .input-group,
.modal .search_box .input-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    align-items: stretch !important;
}
#main .search_box .input-group > *,
.modal .search_box .input-group > * {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* 라벨 텍스트는 절대 줄 안 바뀌게 */
#main .search_box .input-group-text,
#main .search_box label,
#main .search_box .label-form-style,
#main .button_box label,
.modal .search_box .input-group-text,
.modal .search_box label,
.modal .search_box .label-form-style {
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0 !important;
}
#content_load { padding-left: 20px !important; padding-right: 16px !important; }

/* Add a clear gap between the menu bar and the page content / table */
#content_load { padding-left: 36px !important; padding-right: 20px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 280px !important; }

/* ==========================================================================
   Page content polish — table containers + spacing
   ========================================================================== */
/* Scroll containers shouldn't draw an empty box below short tables */
.scroll_div {
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 460px) !important;
    border: none !important;
    background: transparent !important;
    overflow: auto !important;
}
.sot {
    border: none !important;
}

/* Page-specific: more breathing room between 수입금등록 form and 수입금정보 table */
.scroll_div[style*="top: 400px"] { top: 432px !important; }

/* Card-style data + input tables — 강제 table 레이아웃 + nowrap (display 깨져도 복원) */
.my_table_data,
.my_table_data_no_child,
.my_table_input {
    display: table !important;
    border-collapse: collapse !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(57, 56, 47, 0.07) !important;
    background: #ffffff !important;
}
.my_table_data > thead, .my_table_data > tbody, .my_table_data > tfoot,
.my_table_data_no_child > thead, .my_table_data_no_child > tbody, .my_table_data_no_child > tfoot,
.my_table_input > thead, .my_table_input > tbody, .my_table_input > tfoot {
    display: table-row-group !important;
}
.my_table_data tr,
.my_table_data_no_child tr,
.my_table_input tr {
    display: table-row !important;
}
.my_table_data > tbody > tr > th,
.my_table_data > tbody > tr > td,
.my_table_data > thead > tr > th,
.my_table_data > thead > tr > td,
.my_table_data_no_child > tbody > tr > th,
.my_table_data_no_child > tbody > tr > td,
.my_table_data_no_child > thead > tr > th,
.my_table_data_no_child > thead > tr > td,
.my_table_input > tbody > tr > th,
.my_table_input > tbody > tr > td,
.my_table_input > thead > tr > th,
.my_table_input > thead > tr > td {
    display: table-cell !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
}
.my_table_data th.table_main,
.my_table_data_no_child th.table_main,
.my_table_input th.table_main {
    background: linear-gradient(170deg, var(--co-primary) 0%, var(--co-secondary) 100%) !important;
    border-radius: 14px 14px 0 0;
    padding: 10px 14px !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
}

/* Buttons row above the input table — give it a bit of bottom space */
#content_load .button_box { margin-bottom: 8px !important; }
#first_load { margin-bottom: 4px; }

/* ==========================================================================
   Universal page layout — make scroll_div / sot flow with the content
   (eliminates per-page inline top:NNNpx overlaps with filters/headers)
   ========================================================================== */
.scroll_div, .sot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 240px);
    margin-top: 16px !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
}

/* Comfortable spacing around page header chunks */
.sub_title { margin-bottom: 12px !important; }
.nav-tabs { margin-bottom: 12px !important; }
.search_box { margin-bottom: 8px !important; }
#content_load { padding-bottom: 32px !important; }

/* Ensure inner table fills its card cleanly */
.scroll_div > div, .scroll_div > form, .sot > div, .sot > form { width: 100%; }
.scroll_div table, .sot table { width: 100% !important; }

/* HARD reset — beat any prior `.scroll_div:not([style*=...])` left/top/right rules */
body .scroll_div,
body .sot,
body .scroll_div[style],
body .sot[style] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* FINAL hard reset — use #main to beat every earlier .scroll_div:not(...) rule */
#main .scroll_div,
#main .sot,
#main form.scroll_div,
#main form.sot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Search filter inputs — revert to a more squared look (less round) */
.search_box input,
.search_box select,
.search_box .form-control,
.search_box .form-select,
.search_box textarea,
.search_box .select2-container--default .select2-selection--single {
    border-radius: 4px !important;
}

/* Skip the universal flow reset for 2-pane layouts (scroll_div with inline width or left) */
#main .scroll_div:not([style*="width"]):not([style*="left"]),
#main .sot:not([style*="width"]):not([style*="left"]),
#main form.scroll_div:not([style*="width"]):not([style*="left"]),
#main form.sot:not([style*="width"]):not([style*="left"]) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* 2-pane left list — keep original fixed positioning at left: 250 (matches sidebar 240 + gap) */
#main .scroll_div[style*="width"] {
    position: fixed !important;
    left: 250px !important;
    bottom: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 260px) !important;
    overflow: auto !important;
    border: 1px solid var(--co-slate-200) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.06);
}

/* Car management — clean flex 2-pane (replaces fixed-position legacy) */
.car-twopane {
    height: calc(100vh - 260px);
    min-height: 480px;
}
.car-twopane-list {
    width: 320px;
    flex-shrink: 0;
    border: 1px solid var(--co-slate-200);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.06);
}
.car-twopane-list table { margin: 0 !important; box-shadow: none !important; border-radius: 12px !important; }
.car-twopane-detail {
    border: 1px solid var(--co-slate-200);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.06);
    padding: 12px 14px;
}

/* ==========================================================================
   Operation Evaluation — HR / Car evaluation dashboard card redesign
   (compact horizontal layout, vivid bubble icons, badge-style trend pill)
   ========================================================================== */
.dashboard-card {
    border: none !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(57, 56, 47, 0.07) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    height: auto !important;
}
.dashboard-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(57, 56, 47, 0.12) !important;
}

.dashboard-card .card-body {
    padding: 14px 16px !important;
    min-height: 0 !important;
}
.dashboard-card .card-body > .d-flex {
    margin-bottom: 6px !important;
    align-items: center !important;
}

/* Compact title + number */
.dashboard-card .card-title {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 0 4px 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dashboard-card .main-number {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
}

/* Vivid bubble icons (soft tinted background + saturated icon) */
.dashboard-card .card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    margin: 0 !important;
    font-size: 18px !important;
    flex-shrink: 0;
}
.dashboard-card .card-icon.icon-blue   { background: rgba(102, 126, 234, 0.14) !important; color: #4f6fd1 !important; }
.dashboard-card .card-icon.icon-orange { background: rgba(245, 87, 108, 0.16) !important; color: #e74c52 !important; }
.dashboard-card .card-icon.icon-green  { background: rgba(34, 197, 144, 0.16) !important; color: #109f73 !important; }
.dashboard-card .card-icon.icon-red    { background: rgba(250, 112, 154, 0.16) !important; color: #e85585 !important; }
.dashboard-card .card-icon.icon-purple { background: rgba(147, 112, 219, 0.16) !important; color: #7050b8 !important; }

/* Trend badge — pill chip with subtle tinted bg */
.dashboard-card .trend-indicator {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 9px;
    border-radius: 999px;
    line-height: 1.5;
}
.dashboard-card .trend-indicator.trend-up { color: #16a34a !important; background: rgba(34, 197, 94, 0.12); }
.dashboard-card .trend-indicator.trend-down { color: #dc2626 !important; background: rgba(220, 38, 38, 0.10); }

/* Header title */
.header-title {
    color: var(--co-on-surface) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1.25rem !important;
}

/* Chart card polish (matches the new card style) */
.chart-card {
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(57, 56, 47, 0.06) !important;
    padding: 18px !important;
    border: none !important;
    background: #ffffff !important;
}
.chart-title {
    color: var(--co-on-surface) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.chart-subtitle { color: #64748b !important; font-size: 11.5px !important; }

/* Tab buttons inside evaluation pages — match the cleaner palette */
#nav-1-tab, #nav-2-tab, #nav-3-tab, #nav-4-tab, #nav-5-tab {
    border-radius: 10px !important;
    border: 1px solid var(--co-slate-200) !important;
    background: #ffffff !important;
    color: var(--co-slate-600) !important;
    font-weight: 700 !important;
    transition: all 0.15s ease;
}
#nav-1-tab.active, #nav-2-tab.active, #nav-3-tab.active,
#nav-4-tab.active, #nav-5-tab.active {
    background: var(--co-primary) !important;
    color: #ffffff !important;
    border-color: var(--co-primary) !important;
    box-shadow: 0 4px 10px rgba(95, 94, 94, 0.18);
}

/* ==========================================================================
   Operation Evaluation — bento-style KPI cards (modern, vivid, distinct)
   ========================================================================== */
.dashboard-card {
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden;
    position: relative;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
    height: auto !important;
    background: #ffffff;
}
.dashboard-card:hover { transform: translateY(-3px) !important; }

.dashboard-card .card-body {
    padding: 18px 20px !important;
    position: relative;
    z-index: 1;
}
.dashboard-card .card-body > .d-flex {
    align-items: flex-start !important;
    margin-bottom: 10px !important;
}

.dashboard-card .card-title {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.16em !important;
    margin: 0 0 8px 0 !important;
    opacity: 0.72;
}
.dashboard-card .main-number {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em;
    line-height: 1 !important;
    margin: 0 !important;
}
.dashboard-card .card-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    margin: 0 !important;
    font-size: 18px !important;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}
.dashboard-card .trend-indicator {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 10px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
}

/* Card 1 — Yellow gradient (총 승무원수 / 총 차량) */
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card {
    background: linear-gradient(135deg, #fdc003 0%, #ecb200 100%) !important;
    box-shadow: 0 14px 30px rgba(253, 192, 3, 0.28) !important;
}
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-title,
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .main-number,
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-icon { color: #553e00 !important; }
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-icon { background: rgba(85, 62, 0, 0.18) !important; }
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator {
    background: rgba(85, 62, 0, 0.14) !important; color: #553e00 !important;
}

/* Card 2 — Coral gradient (평균 점수 / 정비비) */
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card {
    background: linear-gradient(135deg, #fe8b70 0%, #f06b51 100%) !important;
    box-shadow: 0 14px 30px rgba(254, 139, 112, 0.30) !important;
}
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .card-title,
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .main-number,
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .card-icon { color: #ffffff !important; }
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .card-icon { background: rgba(255, 255, 255, 0.24) !important; }
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .trend-indicator {
    background: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important;
}

/* Card 3 — Glass white card (우수 승무원 / 보존 가능 차량) */
.row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card {
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(57, 56, 47, 0.08) !important;
    border: 1px solid rgba(34, 197, 144, 0.18) !important;
}
.row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card .card-icon {
    background: rgba(34, 197, 144, 0.16) !important;
    color: #109f73 !important;
}
.row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card .main-number { color: #1e293b !important; }
.row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card .card-title { color: #64748b !important; }

/* Card 4 — Soft rose tinted card (개선 필요 / 폐차 차량) */
.row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card {
    background: linear-gradient(135deg, #fff1f3 0%, #ffd7de 100%) !important;
    box-shadow: 0 10px 26px rgba(229, 92, 117, 0.16) !important;
}
.row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .card-icon {
    background: rgba(229, 92, 117, 0.20) !important;
    color: #c93958 !important;
}
.row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .main-number { color: #6b1d2c !important; }
.row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .card-title { color: #8b3a4d !important; }
.row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .trend-indicator {
    background: rgba(229, 92, 117, 0.16) !important; color: #c93958 !important;
}

/* Card 5 — Dark primary panel (목표 달성률 / 평균 잔존수명) */
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card {
    background: linear-gradient(135deg, #5f5e5e 0%, #3a3a3a 100%) !important;
    box-shadow: 0 14px 30px rgba(95, 94, 94, 0.32) !important;
}
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-title,
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .main-number { color: #ffffff !important; }
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-icon {
    background: rgba(253, 192, 3, 0.22) !important;
    color: #fdc003 !important;
}
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator {
    background: rgba(253, 192, 3, 0.20) !important; color: #fdc003 !important;
}

/* Decorative blur orb for dimensional depth on filled cards */
.row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card::after,
.row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card::after,
.row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card::after {
    content: '';
    position: absolute;
    width: 140px; height: 140px;
    right: -40px; top: -40px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

/* ==========================================================================
   FINAL Evaluation cards — 2-color only (white + warm brown accent)
   Overrides the rainbow nth-child styles above with higher specificity
   ========================================================================== */
#content_load .row.g-3 .dashboard-card {
    background: #ffffff !important;
    border: 1px solid var(--co-slate-200) !important;
    box-shadow: 0 4px 14px rgba(57, 56, 47, 0.05) !important;
    border-radius: 16px !important;
}
#content_load .row.g-3 .dashboard-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(57, 56, 47, 0.10) !important;
}
#content_load .row.g-3 .dashboard-card::after { display: none !important; }

#content_load .row.g-3 .dashboard-card .card-body {
    padding: 18px 20px !important;
}
#content_load .row.g-3 .dashboard-card .card-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 6px 0 !important;
    opacity: 1 !important;
}
#content_load .row.g-3 .dashboard-card .main-number {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    color: var(--co-on-surface, #39382f) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em;
    margin: 0 !important;
}

/* All icons — same warm brown bubble, no rainbow */
#content_load .row.g-3 .dashboard-card .card-icon,
#content_load .row.g-3 .dashboard-card .card-icon.icon-blue,
#content_load .row.g-3 .dashboard-card .card-icon.icon-orange,
#content_load .row.g-3 .dashboard-card .card-icon.icon-green,
#content_load .row.g-3 .dashboard-card .card-icon.icon-red,
#content_load .row.g-3 .dashboard-card .card-icon.icon-purple {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(109, 99, 84, 0.10) !important;
    color: var(--co-secondary, #6d6354) !important;
    margin: 0 !important;
    font-size: 18px !important;
    backdrop-filter: none !important;
}

/* Trend — simple text, only green for up / red for down (functional, not decorative) */
#content_load .row.g-3 .dashboard-card .trend-indicator {
    background: transparent !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 4px;
}
#content_load .row.g-3 .dashboard-card .trend-indicator.trend-up { color: #16a34a !important; }
#content_load .row.g-3 .dashboard-card .trend-indicator.trend-down { color: #dc2626 !important; }

/* ==========================================================================
   Evaluation cards — 2-color scheme: white base + yellow accent (key metrics)
   ========================================================================== */
/* All cards: clean white base (already set above, just keeping spacing) */
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card {
    background: linear-gradient(135deg, #fdc003 0%, #ecb200 100%) !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(253, 192, 3, 0.28) !important;
}

#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-title,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-title {
    color: #553e00 !important;
    opacity: 0.9 !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .main-number,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .main-number {
    color: #3d2c00 !important;
}

#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-icon,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-icon {
    background: rgba(85, 62, 0, 0.20) !important;
    color: #553e00 !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator {
    color: #553e00 !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator.trend-up,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator.trend-up { color: #1a6b1f !important; }
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator.trend-down,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator.trend-down { color: #8b1f1f !important; }

/* Decorative orb on the highlighted yellow cards for depth */
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card::after,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    width: 140px; height: 140px;
    right: -40px; top: -40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-body,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-body {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Evaluation cards — 2-color: mint accent + light slate (replace yellow)
   ========================================================================== */
/* Highlight cards (1st and 5th) — mint filled */
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card {
    background: linear-gradient(135deg, #2c9c66 0%, #1f7a4f 100%) !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(44, 156, 102, 0.26) !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-title,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-title {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .main-number,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .main-number {
    color: #ffffff !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-icon,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-icon {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator {
    color: rgba(255, 255, 255, 0.95) !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator.trend-up,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator.trend-up {
    color: #d4f5e2 !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .trend-indicator.trend-down,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .trend-indicator.trend-down {
    color: #ffd9d9 !important;
}

/* Decorative orb on mint cards */
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card::after,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    width: 140px; height: 140px;
    right: -40px; top: -40px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

/* Middle 3 cards — soft light slate background instead of pure white */
#content_load .row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.05) !important;
}
#content_load .row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .card-icon,
#content_load .row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card .card-icon,
#content_load .row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .card-icon {
    background: #ffffff !important;
    color: #2c9c66 !important;
}

/* ==========================================================================
   Responsive — tablet & mobile breakpoints
   ========================================================================== */

/* ── Tablet (≤ 1100px) ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    body { white-space: normal; }
    #aside { width: 220px !important; }
    #main { padding-left: 240px !important; }
    #nav .username-badge { display: none !important; }
    #base_logo_div { width: 200px !important; }

    .co-bento-row { grid-template-columns: 1fr !important; }
    .co-bento-row > [class*="co-col-"] { grid-column: 1 / -1 !important; }
    .co-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
    .co-chart-grid > [class*="co-c"] { grid-column: span 12 !important; }
    .co-bento-header { flex-wrap: wrap; gap: 16px; }
    .co-bento-heading h2.co-bento-title { font-size: 26px; }
}

/* ── Mobile (≤ 768px) — sidebar overlays, content full-width ───── */
@media (max-width: 768px) {
    body:not(.sidebar-collapsed) #aside {
        position: fixed !important;
        top: 60px !important;
        left: 8px !important;
        bottom: 8px !important;
        width: min(280px, calc(100vw - 16px)) !important;
        z-index: 1000 !important;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18) !important;
    }
    #main {
        padding-left: 0 !important;
        padding-top: 60px !important;
    }
    body:not(.sidebar-collapsed)::after {
        content: '';
        position: fixed;
        inset: 60px 0 0 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    #nav { height: 60px !important; padding: 0 8px !important; }
    #nav_right { gap: 6px !important; }
    #nav table.d-none,
    #nav .username-badge,
    #nav #search-form { display: none !important; }
    #nav .inquiry-btn,
    #nav .logout-btn {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
    }
    #nav .inquiry-btn .material-icons,
    #nav .logout-btn .material-icons { font-size: 18px !important; }
    #base_logo_div { width: auto !important; padding: 0 6px !important; }
    #logo_img { height: 30px !important; }
    .memo-btn { width: 36px !important; height: 36px !important; }

    .co-bento-page { padding: 16px 12px 24px 12px !important; }
    .co-bento-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .co-bento-heading h2.co-bento-title { font-size: 22px; }
    .co-bento-heading .co-bento-subtitle {
        font-size: 12px;
        white-space: normal !important;
    }
    .co-date-form { align-self: flex-start; }
    .co-date-form input[type="date"],
    .co-date-form input[type="text"] { width: 110px !important; font-size: 12px; }

    .co-orb-panel,
    .co-info-card { min-height: 240px !important; }
    .co-orb-primary { width: 130px !important; height: 130px !important; }
    .co-orb-primary .co-orb-value { font-size: 32px !important; }
    .co-orb-primary .co-orb-tag { font-size: 11px !important; }
    .co-orb-yellow {
        width: 90px !important; height: 90px !important;
        top: 4px !important; right: 4px !important;
    }
    .co-orb-yellow .co-orb-mini-value { font-size: 22px !important; }
    .co-orb-yellow .co-orb-mini-tag { font-size: 10px !important; }
    .co-orb-coral {
        width: 64px !important; height: 64px !important;
        bottom: 4px !important; left: 6px !important;
    }
    .co-orb-coral .co-orb-mini-value { font-size: 17px !important; }
    .co-orb-coral .co-orb-mini-tag { font-size: 9px !important; margin-top: 1px !important; }

    .co-stat-mega { font-size: 28px !important; }
    .co-stat-suffix { font-size: 13px !important; }
    .co-op-kpi-grid { gap: 6px !important; }
    .co-op-kpi { padding: 8px 10px !important; }
    .co-op-kpi-num { font-size: 19px !important; }
    .co-op-kpi-tag { font-size: 11px !important; }

    .co-kpi-strip { grid-template-columns: 1fr !important; gap: 12px !important; }
    .co-kpi-tile h3.co-kpi-num { font-size: 24px !important; }

    .co-tab-row { flex-wrap: wrap; }
    .co-tab { padding: 8px 14px !important; font-size: 12px !important; }

    .co-chart-panel { padding: 16px 14px !important; }
    .co-chart-panel h4.co-chart-title { font-size: 15px !important; }

    #main .card .card-body { padding: 14px !important; }

    #main .table-responsive,
    #main .tabulator {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog { margin: 0 !important; max-width: 100vw !important; height: 100vh !important; }
    .modal-content { height: 100vh !important; border-radius: 0 !important; }
    #inquiry_modal .modal-content { height: 100vh !important; }
    #inquiry_modal .modal-body { height: calc(100vh - 56px) !important; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .co-bento-page { padding: 12px 8px 20px 8px !important; }
    .co-bento-heading h2.co-bento-title { font-size: 20px; }
    .co-bento-heading .co-bento-subtitle { font-size: 11.5px; }

    .co-orb-primary { width: 110px !important; height: 110px !important; }
    .co-orb-primary .co-orb-value { font-size: 26px !important; }
    .co-orb-yellow { width: 76px !important; height: 76px !important; }
    .co-orb-yellow .co-orb-mini-value { font-size: 18px !important; }
    .co-orb-coral { width: 54px !important; height: 54px !important; }
    .co-orb-coral .co-orb-mini-value { font-size: 14px !important; }
    .co-orb-coral .co-orb-mini-tag { display: none !important; }

    .co-op-kpi-grid { grid-template-columns: 1fr !important; }
    .co-profile-sub { font-size: 11px !important; }

    #nav .inquiry-btn span:not(.material-icons),
    #nav .logout-btn span:not(.material-icons) { display: none !important; }
    #nav .inquiry-btn,
    #nav .logout-btn {
        width: 36px !important; height: 36px !important;
        padding: 0 !important; border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center; justify-content: center;
    }
}

/* ── Wide (≥ 1600px) ─────────────────────────────────────────────── */
@media (min-width: 1600px) {
    .co-bento-page { max-width: 1600px; }
}

/* ==========================================================================
   Evaluation cards — readability tweaks (no border + larger card titles)
   ========================================================================== */
/* Remove all borders */
#content_load .row.g-3 .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card {
    border: none !important;
}

/* Card titles — larger, no uppercase, easier to read at a glance */
#content_load .row.g-3 .dashboard-card .card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

/* Slightly larger numbers too for better hierarchy */
#content_load .row.g-3 .dashboard-card .main-number {
    font-size: 2rem !important;
}

/* Mint cards: title stays white but a touch softer */
#content_load .row.g-3 > [class*="col-"]:nth-child(1) .dashboard-card .card-title,
#content_load .row.g-3 > [class*="col-"]:nth-child(5) .dashboard-card .card-title {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

/* Gray cards: stronger title for readability */
#content_load .row.g-3 > [class*="col-"]:nth-child(2) .dashboard-card .card-title,
#content_load .row.g-3 > [class*="col-"]:nth-child(3) .dashboard-card .card-title,
#content_load .row.g-3 > [class*="col-"]:nth-child(4) .dashboard-card .card-title {
    color: #475569 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Global font — Pretendard (modern Korean-friendly sans, much cleaner)
   ========================================================================== */
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
table,
.modal,
.swal2-popup {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
                 system-ui, 'Apple SD Gothic Neo', 'Helvetica Neue', Roboto, sans-serif !important;
    font-feature-settings: 'tnum' on, 'lnum' on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* ==========================================================================
   Index dashboard — bigger / darker labels for readability
   ========================================================================== */
/* "당월 수입금액" 같은 KPI 카드 상단 태그 */
.co-bento-page .co-tag {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--co-on-surface, #39382f) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.85;
    margin: 0 0 8px 0 !important;
}

/* "당월 비용 집행", "당월 운전직 입사" 같은 리스트 항목 타이틀 */
.co-bento-page .co-list-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--co-on-surface, #39382f) !important;
    line-height: 1.3 !important;
}

/* 그 아래 작은 메타 (금액 · 전월대비 ...) */
.co-bento-page .co-list-meta {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-top: 3px !important;
}

/* Orb 안의 mini 태그 (배차 운전자, 연차, 휴무) */
.co-bento-page .co-orb-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.95 !important;
}
.co-bento-page .co-orb-mini-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.95 !important;
}

/* 당월 수입/비용 stat 박스 안 라벨 */
.co-bento-page .co-stat-tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--co-on-surface, #39382f) !important;
    opacity: 0.85;
}
.co-bento-page .co-stat-num {
    font-size: 16px !important;
    font-weight: 800 !important;
}
.co-bento-page .co-stat-suffix {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--co-on-surface, #39382f) !important;
    opacity: 0.7;
}

/* "전월대비 수입금 실적" 같은 progress meta */
.co-bento-page .co-progress-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--co-on-surface, #39382f) !important;
}

/* Pill tag like "당월" */
.co-bento-page .co-pill-tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    padding: 5px 12px !important;
}

/* Panel title like "금일 운행 현황" */
.co-bento-page .co-panel-title,
.co-bento-page .co-panel-title-light {
    font-size: 15.5px !important;
    font-weight: 800 !important;
}

/* Info card key/val (사업장, 이름, 부서/직위) */
.co-bento-page .co-info-key {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
.co-bento-page .co-info-val {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
.co-bento-page .co-info-stat {
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Index dashboard — bump label sizes again (one more notch up)
   ========================================================================== */
.co-bento-page .co-tag             { font-size: 15px !important; }
.co-bento-page .co-list-title      { font-size: 17px !important; }
.co-bento-page .co-list-meta       { font-size: 14px !important; }
.co-bento-page .co-orb-tag         { font-size: 14px !important; }
.co-bento-page .co-orb-mini-tag    { font-size: 13px !important; }
.co-bento-page .co-stat-tag        { font-size: 13.5px !important; }
.co-bento-page .co-stat-num        { font-size: 19px !important; }
.co-bento-page .co-stat-suffix     { font-size: 16px !important; }
.co-bento-page .co-progress-text   { font-size: 14.5px !important; }
.co-bento-page .co-pill-tag        { font-size: 13px !important; padding: 6px 14px !important; }
.co-bento-page .co-panel-title,
.co-bento-page .co-panel-title-light { font-size: 17.5px !important; }
.co-bento-page .co-info-key        { font-size: 13px !important; }
.co-bento-page .co-info-val        { font-size: 15px !important; }
.co-bento-page .co-info-stat       { font-size: 14px !important; }

/* ==========================================================================
   FINAL: kill ALL borders on evaluation dashboard cards (both HR + Car pages)
   Higher specificity than every prior rule (uses body + .card.dashboard-card)
   ========================================================================== */
body #content_load .card.dashboard-card,
body #content_load .card.dashboard-card.h-100,
body #content_load .card.dashboard-card.h-80,
body #content_load .row.g-3 > [class*="col-"] .card.dashboard-card,
body #content_load .row.g-3 > [class*="col-"]:nth-child(1) .card.dashboard-card,
body #content_load .row.g-3 > [class*="col-"]:nth-child(2) .card.dashboard-card,
body #content_load .row.g-3 > [class*="col-"]:nth-child(3) .card.dashboard-card,
body #content_load .row.g-3 > [class*="col-"]:nth-child(4) .card.dashboard-card,
body #content_load .row.g-3 > [class*="col-"]:nth-child(5) .card.dashboard-card {
    border: none !important;
    outline: none !important;
}

/* Beat the global #main .card border rule on evaluation dashboard cards */
#main #content_load .card.dashboard-card,
#main #content_load .card.dashboard-card.h-100,
#main #content_load .card.dashboard-card.h-80 {
    border: none !important;
    outline: none !important;
}

/* ==========================================================================
   Evaluation pages — kill borders on EVERY card variant for visual consistency
   ========================================================================== */
#main #content_load .chart-card,
#main #content_load .chart2-card,
#main #content_load .chart2_metric_card,
#main #content_load .chart2_info_card,
#main #content_load .chart2_risk_card,
#main #content_load .chart3_card,
#main #content_load .chart4_card,
#main #content_load .chart5_card,
#main #content_load .chart6_card,
#main #content_load .card,
#main #content_load .card.dashboard-card,
#main #content_load .card.dashboard-card.h-100,
#main #content_load .card.dashboard-card.h-80 {
    border: none !important;
    outline: none !important;
}

/* Force "출근률" and "금일 결행" stat boxes to the requested cream color */
.co-bento-page .co-orb-stat {
    background: #f1eee2 !important;
}

/* ==========================================================================
   금일 운행 현황 panel — apply "Steps for Today" glass card style
   ========================================================================== */
.co-bento-page .co-orb-panel {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.06),
        0 10px 10px rgba(57, 56, 47, 0.04) !important;
    padding: 28px !important;
    position: relative;
    overflow: hidden;
}
.co-bento-page .co-orb-panel::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: -24px !important;
    top: -24px !important;
    width: 128px !important;
    height: 128px !important;
    background: rgba(109, 99, 84, 0.10) !important;
    border-radius: 50% !important;
    filter: blur(40px) !important;
    pointer-events: none;
    z-index: 0;
    transition: background 0.3s ease;
}
.co-bento-page .co-orb-panel:hover::after {
    background: rgba(109, 99, 84, 0.20) !important;
}
.co-bento-page .co-orb-panel > * {
    position: relative;
    z-index: 1;
}

/* Inner depth + outer glow on orbs (from "Steps for Today" reference) */
.co-bento-page .co-orb {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.co-bento-page .co-orb-primary {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.08) !important;
}
.co-bento-page .co-orb-yellow {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 0 30px rgba(253, 192, 3, 0.35),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.co-bento-page .co-orb-coral {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 0 30px rgba(254, 139, 112, 0.35),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Force the 운행현황 panel to opaque white so the yellow radial behind it doesn't tint it */
body .co-bento-page .co-orb-panel.co-glass,
body .co-bento-page .co-orb-panel {
    background: #ffffff !important;
}

/* ==========================================================================
   Neutralize the cream warmth on the dashboard background
   ========================================================================== */
body { background-color: #ffffff !important; }
main#main { background: #ffffff !important; }
main#main #content_div { background: #ffffff; }

/* Remove the warm yellow + coral radial glows from the bento page itself */
.co-bento-page {
    background: #ffffff !important;
}

/* Restore original page background — only the orb panel stays white */
body { background-color: var(--co-bg) !important; }
main#main { background: var(--co-bg) !important; }
.co-bento-page {
    background:
        radial-gradient(1200px 600px at 0% -10%, rgba(253, 192, 3, 0.08), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(254, 139, 112, 0.08), transparent 60%),
        var(--co-bg) !important;
}

/* Force solid white on every bento glass panel — outer cards no longer look cream */
body .co-bento-page .co-glass,
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: #ffffff !important;
}

/* ==========================================================================
   운행현황 panel — EXACT match to "Steps for Today" card spec
   .glass-panel + .ambient-lift + .p-8 + .rounded-xl(=3rem) + decorative orb
   ========================================================================== */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: none !important;
    border-radius: 3rem !important;
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.06),
        0 10px 10px rgba(57, 56, 47, 0.04) !important;
    padding: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
}

body .co-bento-page .co-orb-panel::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: -1.5rem !important;
    top: -1.5rem !important;
    width: 8rem !important;
    height: 8rem !important;
    background: rgba(109, 99, 84, 0.10) !important;
    border-radius: 9999px !important;
    filter: blur(64px) !important;
    -webkit-filter: blur(64px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: background 0.3s ease;
}

body .co-bento-page .co-orb-panel:hover::after {
    background: rgba(109, 99, 84, 0.20) !important;
}

body .co-bento-page .co-orb-panel > * {
    position: relative;
    z-index: 1;
}

/* Reset — entire background = #fffbff, no per-area overrides, no radials */
body,
main#main,
main#main #content_div,
.co-bento-page {
    background: #fffbff !important;
    background-image: none !important;
}

/* Menu bar — muted greige (gray-mixed beige) version of cream */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.06), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.05), transparent 60%),
        linear-gradient(180deg, #ebe9e1 0%, #ddd9d0 100%) !important;
    border-right: 1px solid #cfcbc1 !important;
}

/* Menu bar — lighter muted greige (toned down further) */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.04), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.03), transparent 60%),
        linear-gradient(180deg, #f4f2ea 0%, #ebe8df 100%) !important;
    border-right: 1px solid #ddd9d0 !important;
}

/* Menu bar — even lighter, no right border / shadow */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.03), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.02), transparent 60%),
        linear-gradient(180deg, #faf8f1 0%, #f3f0e8 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — even lighter (close to white with very subtle warm tint) */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.02), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.015), transparent 60%),
        linear-gradient(180deg, #fdfcf6 0%, #f8f6ef 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — neutral light gray (less yellow undertone) */
#aside {
    background: linear-gradient(180deg, #f6f5f3 0%, #efeeeb 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — cool muted light gray (matches the dark gray nav family) */
#aside {
    background: linear-gradient(180deg, #f4f5f6 0%, #eaecee 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* 출근률 / 금일 결행 stat boxes — match the new cool gray sidebar tone */
.co-bento-page .co-orb-stat {
    background: #eaecee !important;
}

/* 운행현황 panel — keep glass blur, swap cream tint for the same cool gray */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(234, 236, 238, 0.75) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

/* Revert 운행현황 (left orb panel) back to glass white */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

/* 운영현황 (right admin panel) inner KPI tiles — replace cream-looking white with cool gray */
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(234, 236, 238, 0.65) !important;
    border: 1px solid rgba(234, 236, 238, 0.20) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(234, 236, 238, 0.85) !important;
}

/* ==========================================================================
   운영현황 outer panel — cool gray (matches 출근률 cards) with blur kept
   ========================================================================== */
body .co-bento-page .co-dark {
    background: rgba(234, 236, 238, 0.85) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    color: var(--co-on-surface, #39382f) !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
}
body .co-bento-page .co-dark::before {
    display: none !important;
}

/* Inside text/icons — flip from light-on-dark to dark-on-light */
body .co-bento-page .co-dark .co-profile-name {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-profile-sub {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(95, 94, 94, 0.12) !important;
    border: 2px solid rgba(95, 94, 94, 0.18) !important;
    color: var(--co-secondary) !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(95, 94, 94, 0.10) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(95, 94, 94, 0.14) !important;
}
body .co-bento-page .co-dark .co-op-kpi {
    background: #ffffff !important;
    border: 1px solid rgba(95, 94, 94, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: #fafafa !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: var(--co-on-variant, #66655a) !important;
}

/* ==========================================================================
   운영현황 panel — REVERT outer back to dark, only swap yellow glow → cool gray
   ========================================================================== */
body .co-bento-page .co-dark {
    background: var(--co-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(95, 94, 94, 0.18) !important;
}

/* Replace cream/yellow radial glow with cool gray, keep coral glow */
body .co-bento-page .co-dark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(400px 200px at 100% 0%, rgba(234, 236, 238, 0.16), transparent 60%),
        radial-gradient(300px 150px at 0% 100%, rgba(254, 139, 112, 0.10), transparent 60%) !important;
    pointer-events: none !important;
}

/* Restore inner text/icons to light-on-dark */
body .co-bento-page .co-dark .co-profile-name { color: #ffffff !important; }
body .co-bento-page .co-dark .co-profile-sub { color: rgba(255, 255, 255, 0.62) !important; }
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: rgba(255, 255, 255, 0.7) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: #ffffff !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ==========================================================================
   운영현황 panel — outer cool gray, inner 4 tiles original, coral glow kept
   ========================================================================== */
body .co-bento-page .co-dark {
    background: #eaecee !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    color: var(--co-on-surface, #39382f) !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
}

/* Glows on the panel: keep coral, swap yellow for soft slate (so no cream tint) */
body .co-bento-page .co-dark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(400px 200px at 100% 0%, rgba(95, 94, 94, 0.06), transparent 60%),
        radial-gradient(300px 150px at 0% 100%, rgba(254, 139, 112, 0.18), transparent 60%) !important;
    pointer-events: none !important;
}

/* Inner 4 KPI tiles — restore ORIGINAL semi-transparent white */
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(109, 99, 84, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.85) !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: var(--co-on-variant, #66655a) !important;
}

/* Profile + pill — flip light-on-dark to dark-on-light */
body .co-bento-page .co-dark .co-profile-name {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-profile-sub {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(95, 94, 94, 0.12) !important;
    border: 2px solid rgba(95, 94, 94, 0.18) !important;
    color: var(--co-secondary) !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(95, 94, 94, 0.10) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(95, 94, 94, 0.14) !important;
}