/* ============================================ */
        /* HODE — shadcn-inspired theme (Pretendard)   */
        /* ============================================ */
        :root {
            --hode-background: 0 0% 100%;
            --hode-foreground: 240 10% 3.9%;
            --hode-muted: 240 4.8% 95.9%;
            --hode-muted-foreground: 240 3.8% 46.1%;
            --hode-border: 240 5.9% 90%;
            --hode-input: 240 5.9% 90%;
            --hode-accent: 240 4.8% 95.9%;
            --hode-accent-foreground: 240 5.9% 10%;
            --hode-ring: 240 5% 65%;
            --hode-radius: 0.5rem;
            --hode-canvas: 0 0% 98%;              /* body 배경 — #fafafa (톤업) */
            --hode-table-head: 0 0% 93%;          /* thead 배경 — #ededed */
            --hode-table-row-hover: 0 0% 99%;     /* 행 hover — 거의 흰색 */
            --hode-table-total: 0 0% 90%;         /* 합계(0번) 행 — #e6e6e6 */
            --hode-search-bg: 0 0% 93%;           /* 검색 영역 — #ededed (thead 와 동일 톤) */
        }

        /* 타이포 */
        html, body,
        .navbar, .dropdown-menu, .card, .table,
        .btn, .form-control, .form-select, input, select, textarea, button {
            font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                         system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
        }
        body {
            background: hsl(var(--hode-canvas));
            color: hsl(var(--hode-foreground));
            font-size: 13px;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* === 카드 === */
        .card {
            background: hsl(var(--hode-background));
            border: 1px solid hsl(var(--hode-border));
            border-radius: var(--hode-radius);
            box-shadow: none;
        }

        /* === 좌측 사이드바 === */
        .left-sidebar {
            background: hsl(var(--hode-background)) !important;
            border-right: 1px solid hsl(var(--hode-border));
            box-shadow: none !important;
        }
        .left-sidebar .brand-logo {
            border-bottom: 1px solid hsl(var(--hode-border));
            padding: 14px 20px;
        }

        /* 사이드바 — 대메뉴 라벨 */
        #sidebarnav .nav-small-cap {
            padding: 18px 20px 6px !important;
            margin: 0 !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
            color: hsl(var(--hode-muted-foreground)) !important;
        }
        #sidebarnav .nav-small-cap .hide-menu {
            color: hsl(var(--hode-muted-foreground)) !important;
        }
        #sidebarnav .nav-small-cap .nav-small-cap-icon {
            display: none !important;
        }

        /* 사이드바 — 메뉴 아이템 */
        .sidebar-nav ul .sidebar-item {
            padding: 0 12px !important;
            margin: 1px 0 !important;
        }
        .sidebar-nav ul .sidebar-item .sidebar-link {
            padding: 8px 12px !important;
            border-radius: var(--hode-radius) !important;
            color: hsl(var(--hode-foreground)) !important;
            font-weight: 500 !important;
            font-size: 13px !important;
            transition: background-color 0.15s ease, color 0.15s ease;
        }
        .sidebar-nav ul .sidebar-item .sidebar-link i {
            color: hsl(var(--hode-muted-foreground));
            font-size: 16px;
        }
        .sidebar-nav ul .sidebar-item .sidebar-link:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-accent-foreground)) !important;
        }
        .sidebar-nav ul .sidebar-item .sidebar-link:hover i {
            color: hsl(var(--hode-accent-foreground));
        }
        .sidebar-nav ul .sidebar-item .sidebar-link.active,
        .sidebar-nav ul .sidebar-item .sidebar-link.active:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-accent-foreground)) !important;
            font-weight: 600 !important;
            box-shadow: none !important;
        }
        .sidebar-nav ul .sidebar-item .sidebar-link.active i {
            color: hsl(var(--hode-foreground));
        }

        /* 사이드바 하단 프로필 박스 */
        .fixed-profile {
            background: hsl(var(--hode-muted)) !important;
            border-radius: var(--hode-radius) !important;
            border: 1px solid hsl(var(--hode-border)) !important;
        }
        .fixed-profile .john-img {
            background: hsl(var(--hode-background));
            width: 36px; height: 36px;
            border-radius: 50%;
            border: 1px solid hsl(var(--hode-border));
            display: flex; align-items: center; justify-content: center;
        }

        /* === 상단 헤더 (slim, shadcn breadcrumb 톤) === */
        .app-header {
            background: hsl(var(--hode-background)) !important;
            border-bottom: 0 !important;
            box-shadow: none !important;
        }
        /* topbar 자체 padding 제거 — 내부 container-fluid 가 카드와 동일한 여백을 제공 */
        .topbar {
            padding: 0 !important;
        }
        .app-header .navbar,
        .with-vertical > .navbar {
            background: transparent;
            padding: 0 !important;
            min-height: 40px;
        }
        /* horizontal 레이아웃 기본 60px 강제 override */
        html[data-layout=horizontal] .app-header .navbar {
            min-height: 40px !important;
        }
        /* HODE 로고 — 높이 20px, 가로 비율 자동 */
        .app-header img.dark-logo,
        .with-vertical img.dark-logo {
            height: 20px !important;
            width: auto !important;
            max-width: 100px;
            object-fit: contain;
        }
        /* 데스크톱 body-wrapper padding-top — navbar(40px) 가림 방지 */
        .body-wrapper {
            padding-top: 40px !important;
        }
        /* container-fluid 좌우 여백을 body-wrapper 의 카드와 동일하게 (Bootstrap 기본 0.75rem = 12px) */
        .app-header .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }

        /* 로고 좌측 여백 +10px 추가 (카드 여백 + 10px) */
        .app-header .navbar > ul.navbar-nav:first-child > li.nav-item.d-none.d-xl-block,
        .app-header .navbar > div.d-block.d-xl-none {
            padding-left: 10px !important;
        }

        /* 토글 버튼 옆 세로 구분선 */
        .app-header .navbar > ul.navbar-nav:first-child + ul.navbar-nav.quick-links,
        .with-vertical > .navbar > ul.navbar-nav:first-child + ul.navbar-nav.quick-links {
            border-left: 1px solid hsl(var(--hode-border));
            padding-left: 10px;
            margin-left: 6px;
        }

        /* navbar quick-links — 색 빼고 텍스트 톤만 */
        .navbar-nav.quick-links {
            gap: 2px;
        }
        .navbar-nav.quick-links .nav-item {
            margin: 0 !important;
        }
        .navbar-nav.quick-links .nav-link {
            color: hsl(var(--hode-muted-foreground)) !important;
            font-size: 13px;
            font-weight: 500;
            border-radius: var(--hode-radius);
            padding: 6px 10px !important;
            background: transparent !important;
            transition: color 0.15s ease;
        }
        /* hover / focus / 드롭다운 열림 / active+hover 모두 검정 텍스트 강제 */
        .app-header .navbar-nav.quick-links .nav-link:hover,
        .app-header .navbar-nav.quick-links .nav-link:focus,
        .app-header .navbar-nav.quick-links .nav-link.show,
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link,
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link:hover,
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link:focus,
        .app-header .navbar-nav.quick-links .nav-item.active > .hover-dd > .nav-link,
        .app-header .navbar-nav.quick-links .nav-item.active > .hover-dd > .nav-link:hover,
        .with-vertical .navbar-nav.quick-links .nav-link:hover,
        .with-vertical .navbar-nav.quick-links .nav-link:focus,
        .with-vertical .navbar-nav.quick-links .nav-link.show,
        .with-vertical .navbar-nav.quick-links .nav-item.active .nav-link,
        .with-vertical .navbar-nav.quick-links .nav-item.active .nav-link:hover,
        .with-vertical .navbar-nav.quick-links .nav-item.active > .hover-dd > .nav-link,
        .with-vertical .navbar-nav.quick-links .nav-item.active > .hover-dd > .nav-link:hover {
            background: transparent !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link,
        .with-vertical .navbar-nav.quick-links .nav-item.active .nav-link {
            font-weight: 600;
        }
        .navbar-nav.quick-links .nav-link i {
            color: hsl(var(--hode-muted-foreground));
            font-size: 13px;
        }
        .app-header .navbar-nav.quick-links .nav-link:hover i,
        .app-header .navbar-nav.quick-links .nav-link.show i,
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link i,
        .app-header .navbar-nav.quick-links .nav-item.active .nav-link:hover i,
        .with-vertical .navbar-nav.quick-links .nav-link:hover i,
        .with-vertical .navbar-nav.quick-links .nav-link.show i,
        .with-vertical .navbar-nav.quick-links .nav-item.active .nav-link i,
        .with-vertical .navbar-nav.quick-links .nav-item.active .nav-link:hover i {
            color: hsl(var(--hode-foreground)) !important;
        }
        /* 메인메뉴 hover 배경 박스 제거 */
        .navbar-nav.quick-links .nav-icon-hover-bg,
        .navbar-nav.quick-links .nav-item.nav-icon-hover-bg {
            background: transparent !important;
        }

        /* 좌측 토글 / 우측 아이콘 버튼 — 슬림한 hover */
        .app-header .navbar-nav > .nav-item .nav-link.sidebartoggler {
            padding: 6px 8px !important;
            color: hsl(var(--hode-foreground));
        }
        .nav-icon-hover-bg {
            transition: background-color 0.15s ease;
            background: transparent !important;
        }
        .nav-icon-hover-bg:hover {
            background: hsl(var(--hode-accent)) !important;
        }

        /* 우측 상단 로그아웃 아이콘 (로그인 아이디 옆) */
        .app-header .nav-item:has(> .hode-logout-icon),
        .with-vertical .nav-item:has(> .hode-logout-icon) {
            flex: 0 0 auto !important;
            width: auto !important;
        }
        .app-header .nav-item .nav-link.hode-logout-icon,
        .with-vertical .nav-item .nav-link.hode-logout-icon {
            padding: 2px 4px !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: auto !important;
            min-width: 0 !important;
            flex: 0 0 auto !important;
            color: hsl(var(--hode-muted-foreground));
            border-radius: var(--hode-radius);
            margin-left: -2px;  /* 로그인 정보와 더 가깝게 */
        }
        .app-header .nav-item .nav-link.hode-logout-icon i,
        .with-vertical .nav-item .nav-link.hode-logout-icon i {
            font-size: 13px;
            color: hsl(var(--hode-muted-foreground));
        }
        .app-header .nav-item .nav-link.hode-logout-icon:hover,
        .with-vertical .nav-item .nav-link.hode-logout-icon:hover {
            background: hsl(var(--hode-accent));
            color: hsl(var(--hode-foreground));
        }
        .app-header .nav-item .nav-link.hode-logout-icon:hover i,
        .with-vertical .nav-item .nav-link.hode-logout-icon:hover i {
            color: hsl(var(--hode-foreground));
        }

        /* 우측 프로필 드롭다운 (shadcn 컴팩트) */
        .hode-user-menu {
            min-width: 200px;
            padding: 4px !important;
        }
        .hode-user-info {
            padding: 6px 10px 4px;
        }
        .hode-user-name {
            font-weight: 600;
            font-size: 11px;
            color: hsl(var(--hode-foreground));
            line-height: 1.3;
        }
        .hode-user-email {
            color: hsl(var(--hode-muted-foreground));
            font-size: 10px;
            margin-top: 2px;
            line-height: 1.3;
            word-break: break-all;
        }
        .hode-user-menu .dropdown-divider {
            margin: 4px 0;
            border-top: 1px solid hsl(var(--hode-border));
            opacity: 1;
        }
        .hode-user-menu .hode-user-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 8px !important;
            font-size: 10px;
            color: hsl(var(--hode-foreground)) !important;
            border-radius: calc(var(--hode-radius) - 2px) !important;
        }
        .hode-user-menu .hode-user-item span {
            font-size: 10px;
        }
        .hode-user-menu .hode-user-item i {
            font-size: 11px;
            color: hsl(var(--hode-muted-foreground));
            flex-shrink: 0;
        }
        .hode-user-menu .hode-user-item:hover,
        .hode-user-menu .hode-user-item:focus {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        .hode-user-menu .hode-user-item:hover i,
        .hode-user-menu .hode-user-item:focus i {
            color: hsl(var(--hode-foreground));
        }

        /* 우측 프로필 영역 슬림 정렬 — 로그인 정보와 로그아웃 아이콘 가깝게 */
        .app-header .navbar .navbar-nav.flex-row,
        .with-vertical .navbar .navbar-nav.flex-row {
            gap: 0;
        }

        /* === HODE — 로그인 정보 + 로그아웃 영역 우측 끝으로 이동 (전 화면) === */
        .app-header .navbar > .navbar-collapse,
        .with-vertical .navbar > .navbar-collapse {
            margin-left: auto !important;
            justify-content: flex-end !important;
        }
        .app-header .navbar-collapse > .d-flex,
        .with-vertical .navbar-collapse > .d-flex {
            margin-left: auto !important;
            justify-content: flex-end !important;
            padding-right: 0 !important;
        }
        .app-header .navbar-collapse .navbar-nav.flex-row,
        .with-vertical .navbar-collapse .navbar-nav.flex-row {
            margin-left: auto !important;
        }
        .app-header .nav-item.dropdown > .nav-link,
        .with-vertical .nav-item.dropdown > .nav-link {
            padding: 4px 8px !important;
            border-radius: var(--hode-radius);
            font-size: 12px;
        }
        .app-header .nav-item.dropdown > .nav-link#drop1 > span,
        .with-vertical .nav-item.dropdown > .nav-link#drop1 > span {
            font-size: 12px;
        }

        /* === 사용자 설정 검색 input === */
        .navbar-nav .nav-item > div[style*="border-bottom: solid 1px"] {
            border: 1px solid hsl(var(--hode-input)) !important;
            border-radius: var(--hode-radius) !important;
            background: hsl(var(--hode-background)) !important;
            width: 240px !important;
            padding: 0 10px !important;
            display: flex; align-items: center;
            height: 36px;
            margin-right: 12px !important;
        }
        .navbar-nav .nav-item input[name="set_login_id"] {
            border: 0 !important;
            background: transparent !important;
            font-size: 13px !important;
            outline: none !important;
            flex: 1;
            padding: 0 !important;
            color: hsl(var(--hode-foreground));
        }
        .navbar-nav .nav-item input[name="set_login_id"]::placeholder {
            color: hsl(var(--hode-muted-foreground));
        }
        .navbar-nav .nav-item div[style*="border-bottom: solid 1px"] a {
            color: hsl(var(--hode-muted-foreground));
            display: inline-flex; align-items: center;
        }

        /* === 프로필 드롭다운 === */
        .dropdown-menu {
            border: 1px solid hsl(var(--hode-border)) !important;
            border-radius: var(--hode-radius) !important;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
            background: hsl(var(--hode-background));
            padding: 6px !important;
        }
        .dropdown-menu .dropdown-item,
        .dropdown-menu > a {
            border-radius: calc(var(--hode-radius) - 2px) !important;
            font-size: 13px;
            color: hsl(var(--hode-foreground));
        }
        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu > a:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-accent-foreground)) !important;
        }
        .profile-dropdown .border-bottom {
            border-color: hsl(var(--hode-border)) !important;
        }

        /* === 버튼 — shadcn black 컨셉 (compact) === */
        body .btn {
            --bs-btn-padding-y: 0;
            --bs-btn-padding-x: 12px;
            border-radius: var(--hode-radius);
            font-weight: 500;
            font-size: 12px;
            line-height: 1;
            padding: 0 12px !important;
            height: 32px !important;
            min-height: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
            box-shadow: none !important;
        }
        body .form-control,
        body .form-select {
            height: 32px !important;
            min-height: 0;
            padding: 0 10px !important;
        }
        body textarea.form-control {
            height: auto !important;
            padding: 6px 10px !important;
            min-height: 64px;
        }
        body .input-group .btn,
        body .input-group .form-control,
        body .input-group .form-select {
            height: 32px !important;
        }
        /* sm/lg 변형도 같이 정렬 */
        body .btn-sm { height: 28px !important; padding: 0 10px !important; font-size: 11px; }
        body .form-control-sm,
        body .form-select-sm { height: 28px !important; padding: 0 8px !important; font-size: 11px; }
        body .btn-lg { height: 38px !important; padding: 0 16px !important; font-size: 13px; }
        body .form-control-lg,
        body .form-select-lg { height: 38px !important; padding: 0 12px !important; font-size: 13px; }
        body .btn-sm {
            font-size: 11px;
            padding: 3px 10px;
        }
        body .btn-lg {
            font-size: 13px;
            padding: 7px 16px;
        }
        /* 버튼 안 아이콘도 같이 작게 */
        body .btn i {
            font-size: 13px;
            vertical-align: middle;
        }

        /* primary — 검정 배경 + 흰 텍스트 */
        body .btn-primary,
        body [data-color-theme] .btn-primary {
            --bs-btn-bg: hsl(var(--hode-foreground));
            --bs-btn-border-color: hsl(var(--hode-foreground));
            --bs-btn-color: hsl(var(--hode-background));
            --bs-btn-hover-bg: hsl(var(--hode-foreground) / 0.88);
            --bs-btn-hover-border-color: hsl(var(--hode-foreground) / 0.88);
            --bs-btn-hover-color: hsl(var(--hode-background));
            --bs-btn-active-bg: hsl(var(--hode-foreground));
            --bs-btn-active-border-color: hsl(var(--hode-foreground));
            --bs-btn-active-color: hsl(var(--hode-background));
            --bs-btn-disabled-bg: hsl(var(--hode-muted-foreground) / 0.4);
            --bs-btn-disabled-border-color: hsl(var(--hode-muted-foreground) / 0.4);
            --bs-btn-disabled-color: hsl(var(--hode-background));
        }
        body .btn-primary:focus,
        body .btn-primary:focus-visible {
            box-shadow: 0 0 0 3px hsl(var(--hode-foreground) / 0.18) !important;
        }

        /* outline primary — 흰 배경 + 1px 보더 + 검정 텍스트 */
        body .btn-outline-primary {
            --bs-btn-color: hsl(var(--hode-foreground));
            --bs-btn-border-color: hsl(var(--hode-border));
            --bs-btn-bg: hsl(var(--hode-background));
            --bs-btn-hover-bg: hsl(var(--hode-accent));
            --bs-btn-hover-border-color: hsl(var(--hode-border));
            --bs-btn-hover-color: hsl(var(--hode-foreground));
            --bs-btn-active-bg: hsl(var(--hode-foreground));
            --bs-btn-active-border-color: hsl(var(--hode-foreground));
            --bs-btn-active-color: hsl(var(--hode-background));
            border-width: 1px;
        }
        body .btn-outline-primary:focus,
        body .btn-outline-primary:focus-visible {
            box-shadow: 0 0 0 3px hsl(var(--hode-foreground) / 0.12) !important;
        }

        /* secondary / light — muted 톤 (보조 버튼) */
        body .btn-light,
        body .btn-secondary {
            --bs-btn-bg: hsl(var(--hode-muted));
            --bs-btn-border-color: hsl(var(--hode-border));
            --bs-btn-color: hsl(var(--hode-foreground));
            --bs-btn-hover-bg: hsl(var(--hode-accent));
            --bs-btn-hover-border-color: hsl(var(--hode-border));
            --bs-btn-hover-color: hsl(var(--hode-foreground));
            --bs-btn-active-bg: hsl(var(--hode-accent));
            --bs-btn-active-border-color: hsl(var(--hode-border));
            --bs-btn-active-color: hsl(var(--hode-foreground));
        }

        /* dark — 그대로 검정으로 */
        body .btn-dark {
            --bs-btn-bg: hsl(var(--hode-foreground));
            --bs-btn-border-color: hsl(var(--hode-foreground));
            --bs-btn-color: hsl(var(--hode-background));
            --bs-btn-hover-bg: hsl(var(--hode-foreground) / 0.88);
            --bs-btn-hover-border-color: hsl(var(--hode-foreground) / 0.88);
            --bs-btn-hover-color: hsl(var(--hode-background));
        }

        /* === 폼 컨트롤 (compact) === */
        body .form-control,
        body .form-select {
            border: 1px solid hsl(var(--hode-input));
            border-radius: var(--hode-radius);
            font-size: 12px;
            line-height: 1.4;
            padding: 5px 10px;
            min-height: 0;
            height: auto;
            color: hsl(var(--hode-foreground));
            background: hsl(var(--hode-background));
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        body .form-control-sm,
        body .form-select-sm {
            font-size: 11px;
            padding: 3px 8px;
        }
        body .form-control-lg,
        body .form-select-lg {
            font-size: 13px;
            padding: 7px 12px;
        }
        body .form-control:focus,
        body .form-select:focus {
            border-color: hsl(var(--hode-ring));
            box-shadow: 0 0 0 3px hsl(var(--hode-ring) / 0.18);
        }
        body .form-control::placeholder { color: hsl(var(--hode-muted-foreground)); }
        /* input-group 내 input 높이도 같이 축소 */
        body .input-group .form-control,
        body .input-group .form-select,
        body .input-group .btn {
            min-height: 0;
        }
        /* 라벨/체크박스 폰트 톤 */
        body .form-label {
            font-size: 12px;
            margin-bottom: 4px;
        }

        /* === 테이블 (shadcn data table 톤, compact) === */
        .table {
            font-size: 13px;
            color: hsl(var(--hode-foreground));
            margin-bottom: 0;
            --bs-table-bg: transparent;
            --bs-table-striped-bg: transparent;
            --bs-table-hover-bg: hsl(var(--hode-table-row-hover));
        }
        .table > :not(caption) > * > * {
            border-color: hsl(var(--hode-border));
            border-left: 0 !important;
            border-right: 0 !important;
            padding: 7px 12px;
            vertical-align: middle !important;
            background: transparent;
        }
        body .table > tbody > tr > td,
        body .table > tbody > tr > th,
        body .table > thead > tr > td,
        body .table > thead > tr > th {
            vertical-align: middle !important;
        }
        body .table > tbody > tr > td > p,
        body .table > tbody > tr > td > p:last-child {
            margin-bottom: 0 !important;
        }
        /* 세로 줄 제거 — .table-bordered 변형까지 커버 */
        body .table,
        body .table-bordered,
        body .table-bordered > :not(caption) > * {
            border-left: 0 !important;
            border-right: 0 !important;
        }
        body .table-bordered > :not(caption) > * > * {
            border-left: 0 !important;
            border-right: 0 !important;
        }
        .table > thead {
            background: transparent;
        }
        .table > thead th,
        .table > thead > tr > th {
            background: transparent !important;
            color: hsl(var(--hode-muted-foreground));
            font-weight: 500;
            font-size: 11px;
            text-transform: none;
            letter-spacing: 0;
            border-bottom: 1px solid hsl(var(--hode-border));
            padding: 9px 12px;
            white-space: nowrap;
        }
        .table > tbody > tr {
            border-color: hsl(var(--hode-border));
        }
        .table > tbody > tr > td {
            border-bottom: 1px solid hsl(var(--hode-border));
        }
        .table > tbody > tr:last-child > td {
            border-bottom: 0;
        }
        .table > tbody > tr:hover > td,
        .table.table-hover > tbody > tr:hover > td {
            background: hsl(var(--hode-table-row-hover));
        }
        /* 카드 안 테이블은 카드 보더와 겹치지 않게 */
        .card > .table,
        .card > .table-responsive > .table {
            border-radius: 0;
        }
        /* 컴팩트 변형이 필요한 곳 */
        .table-sm > :not(caption) > * > * {
            padding: 5px 10px;
        }

        /* HODE — 테이블 셀 전부 좌측 정렬 (기존 .text-end / .text-center / .text-right 무력화) */
        body .table > :not(caption) > * > *,
        body .table > thead > tr > th,
        body .table > tbody > tr > td,
        body .table > tfoot > tr > th,
        body .table > tfoot > tr > td,
        body .table th.text-end,
        body .table td.text-end,
        body .table th.text-right,
        body .table td.text-right,
        body .table th.text-center,
        body .table td.text-center {
            text-align: left !important;
        }

        /* HODE — 캠페인 ID 컬럼은 가운데 정렬 */
        body .table:has(th[data-sort="camp_id"]) th[data-sort="camp_id"],
        body .table:has(th[data-sort="camp_id"]) > tbody > tr > td:first-child {
            text-align: center !important;
        }

        /* HODE — Report 컬럼은 가운데 정렬 */
        body .table th.col-report,
        body .table td.col-report {
            text-align: center !important;
        }

        /* HODE — 채널 코드 컬럼은 가운데 정렬 */
        body .table th.th_sort[data-sort="code"],
        body .table td.channel_cd {
            text-align: center !important;
        }

        /* HODE — 정산 금액 컬럼: 캠페인 목록(.list_table 아님)은 좌측, 일자별 상세(.list_table)는 우측 */
        body .table.list_table th.media_budget,
        body .table.list_table td.media_budget {
            text-align: right !important;
        }

        /* HODE — 테이블 내 링크(캠페인명 등) 클릭 가능 시각 표현 + hover underline */
        body .table a.a_link,
        body .table td a.detail,
        body .table td a {
            color: hsl(var(--hode-foreground)) !important;
            text-decoration: none !important;
            cursor: pointer;
            transition: color 0.15s ease;
        }
        body .table a.a_link:hover,
        body .table td a.detail:hover,
        body .table td a:hover {
            color: var(--bs-primary) !important;
            text-decoration: underline !important;
            text-underline-offset: 2px;
        }
        /* btn 클래스가 붙은 링크는 위 룰에서 제외 (조회/캠페인목록 등 버튼) */
        body .table td a.btn,
        body .table td a.btn:hover {
            text-decoration: none !important;
        }

        /* HODE — 상단 전체(total) 라인 — 로고 컬러(브랜드 primary) 옅은 톤 활용 */
        body .table > tbody > tr[data-row-index="0"],
        body .table > tbody > tr[data-row-index="0"] > td,
        body .table > tbody > tr[data-row-index="0"] > td.bg-danger-subtle {
            background: rgba(var(--bs-primary-rgb), 0.12) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        body .table > tbody > tr[data-row-index="0"] > td:first-child {
            font-weight: 600;
        }

        /* === 배지 === */
        .badge {
            border-radius: calc(var(--hode-radius) - 2px);
            font-weight: 500;
            padding: 4px 8px;
            font-size: 11px;
        }

        /* ============================================ */
        /* HODE — 반응형 처리                            */
        /* (1) 좌측 사이드바: 모든 작은 화면에서 비활성  */
        /* (2) 상단 메뉴: 항상 노출 (quick-links)        */
        /* ============================================ */
        @media (max-width: 1299.98px) {
            /* 좌측 사이드바 + 오버레이 차단 */
            aside.left-sidebar,
            #main-wrapper.show-sidebar aside.left-sidebar {
                display: none !important;
            }
            .dark-transparent,
            .show-sidebar + .dark-transparent {
                display: none !important;
            }
            /* 사이드바 토글 / 햄버거 버튼 자체 숨김 */
            .app-header .sidebartoggler,
            .app-header .navbar-toggler {
                display: none !important;
            }
            /* 사이드바 자리만큼 비워둔 본문 좌측 여백 제거 */
            .page-wrapper { margin-left: 0 !important; }
            /* 모바일 전용 보조 vertical 헤더는 항상 숨김 */
            .with-vertical { display: none !important; }
            /* modernize 기본은 <1300px 에서 with-horizontal 을 숨기므로 hode 한정 강제 노출 */
            .with-horizontal,
            .app-header.with-horizontal {
                display: block !important;
            }

            /* 작은 화면에서 가시 요소 순서: 로고(좌) → Report → 우측(프로필) */
            .app-header .navbar > div.d-block.d-xl-none { order: 0; }
            .app-header .navbar > ul.navbar-nav:first-child { order: 1; }
            .app-header .navbar > ul.navbar-nav.quick-links { order: 2; }
            .app-header .navbar > .navbar-collapse { order: 4; flex: 1 1 auto; justify-content: flex-end; }
            /* 작은 화면 전용 모바일 로고 자체는 보이게 (xl-none 무력화 X 정상 노출) */
            .app-header .navbar > div.d-block.d-xl-none {
                padding-right: 12px;
            }
            /* 작은 화면에서도 로고 우측 separator 유지 */
            .app-header .navbar > ul.navbar-nav.quick-links {
                border-left: 1px solid hsl(var(--hode-border));
                padding-left: 10px;
                margin-left: 0;
            }

            /* 상단 메뉴(quick-links) 항상 노출 — d-none/d-xl-flex/d-lg-block 무력화 */
            .app-header .navbar-nav.quick-links {
                display: flex !important;
            }
            .app-header .navbar-nav.quick-links > .nav-item {
                display: list-item !important;
            }
            /* navbar-collapse 가 collapse 되어 우측 영역 사라지지 않도록 */
            .app-header .navbar-collapse {
                display: flex !important;
                flex-basis: auto !important;
            }
        }

        /* 모바일 사이즈 — 헤더 한 줄 유지 + 사용자 트리거 텍스트 truncate */
        @media (max-width: 767.98px) {
            /* 헤더 자체 한 줄로 유지 (wrap 금지) — 모바일 임시 50px */
            .app-header .navbar {
                flex-wrap: nowrap !important;
                row-gap: 0;
                column-gap: 6px;
                padding: 0 !important;
                min-height: 50px;
            }
            /* 모바일 nav-link 50px 는 전역 규칙으로 이동 — 별도 override 불필요 */
            /* 모바일 container-fluid 좌우 여백 = body-wrapper 와 동일 (8px) */
            .app-header .container-fluid {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            /* 로고: container-fluid 좌측 여백 + 10px 추가 */
            .app-header .navbar > div.d-block.d-xl-none {
                flex: 0 0 auto !important;
                padding-left: 10px !important;
                padding-right: 8px !important;
                margin-left: 0 !important;
            }
            .app-header .navbar > div.d-block.d-xl-none .nav-link,
            .app-header .navbar > div.d-block.d-xl-none a {
                padding: 4px 0 !important;
                margin-left: 0 !important;
                display: inline-flex;
                align-items: center;
            }
            .app-header .navbar > div.d-block.d-xl-none img.dark-logo {
                height: 20px !important;
                width: auto !important;
                max-width: 100px;
                object-fit: contain;
            }

            /* navbar-collapse: 남는 공간 차지 + 우측 정렬 + overflow 방지 */
            .app-header .navbar > .navbar-collapse {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                order: 4;
                justify-content: flex-end;
            }
            .app-header .navbar-collapse > .d-flex {
                width: 100%;
                min-width: 0;
                padding: 0 !important;
                justify-content: flex-end;
            }
            .app-header .navbar-collapse .navbar-nav.flex-row {
                min-width: 0;
                gap: 2px;
                flex-wrap: nowrap !important;
            }

            /* 사용자 정보 트리거: 너무 길면 ellipsis 처리 */
            .app-header .nav-item.dropdown > .nav-link#drop1 {
                padding: 4px 6px !important;
                max-width: calc(100vw - 180px); /* 로고 + 로그아웃 아이콘 자리 제외 */
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 12px;
            }
            .app-header .nav-item.dropdown > .nav-link#drop1 > span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                max-width: 100%;
                vertical-align: middle;
                font-size: 12px;
            }

            /* 본문 컨테이너 — fixed .topbar(50px) 가림 방지 */
            .body-wrapper {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 50px !important;
            }
            .body-wrapper > .container-fluid,
            .page-wrapper > .container-fluid,
            .body-wrapper .container-fluid {
                padding-left: 8px !important;
                padding-right: 8px !important;
                max-width: 100vw !important;
                overflow-x: hidden;
            }
            .page-wrapper {
                margin-left: 0 !important;
                width: 100% !important;
                overflow-x: hidden;
            }

            /* 카드 — 모바일에서 좌우 가장자리 터치 + 모서리 제거 */
            .card {
                margin-left: -4px;
                margin-right: -4px;
                border-radius: calc(var(--hode-radius) - 2px);
            }
            .card-header.px-3,
            .card-header {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            /* 검색 폼 — 다운로드 버튼 등 기타 col 은 풀 폭으로 줄바꿈 */
            #search_frm .row.g-2 > [class*="col-"] {
                flex: 0 0 100%;
                max-width: 100%;
            }
            /* 단, 날짜 input 과 조회 버튼은 같은 줄에 — 날짜 input 좁히고 조회 버튼 옆에 */
            #search_frm .row.g-2 > [class*="col-"]:has(> #search_date) {
                flex: 1 1 auto !important;
                max-width: calc(100% - 80px) !important;
                min-width: 0 !important;
                width: auto !important;
            }
            #search_frm .row.g-2 > [class*="col-"]:has(> #search) {
                flex: 0 0 auto !important;
                width: auto !important;
                max-width: none !important;
            }
            #search_frm .col-4 { display: none; } /* 빈 컬럼 숨김 */
            #search_frm .col-md-auto > .input-group,
            #search_frm .col-md-auto > .form-control,
            #search_frm .col-md-auto > #search_date {
                width: 100% !important;
            }

            /* setDatePicker(nInputWidth: 220) 인라인 스타일 무력화 + 인풋 명확하게 */
            body #search_date[style],
            body #search_date,
            body input[id="search_date"],
            body input[name="search_date"],
            body .col-md-auto > input.form-control {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: 32px !important;            /* 모바일에서도 btn-sm(28px) 과 비슷한 컴팩트 톤 */
                padding: 0 10px !important;
                font-size: 12px !important;
                border: 1px solid #d4d4d8 !important;  /* zinc-300 — 명확한 보더 */
                background: #ffffff !important;
                color: hsl(var(--hode-foreground)) !important;
                border-radius: var(--hode-radius) !important;
                box-sizing: border-box;
            }
            /* 모바일에서도 조회 버튼은 input 과 동일 높이로 정렬 */
            body #search_frm a#search.btn,
            body #search_frm a#search.btn.btn-sm {
                height: 32px !important;
            }
            body #search_date::placeholder {
                color: hsl(var(--hode-muted-foreground)) !important;
                opacity: 1;
            }
            /* 인풋 컬럼 자체 표시 보장 (조회 버튼과 같은 줄 유지를 위해 width 100% 제거) */
            #search_frm .col-md-auto:has(> #search_date) {
                display: block !important;
                margin-bottom: 0;
            }
            /* daterangepicker — 모바일: 헤더 아래 fixed 시트로 고정 (헤더 가림 방지) */
            .daterangepicker {
                position: fixed !important;
                top: 56px !important;            /* 헤더(50px) 아래 + 6px gap */
                left: 8px !important;
                right: 8px !important;
                bottom: auto !important;
                width: auto !important;
                max-width: calc(100vw - 16px) !important;
                max-height: calc(100vh - 66px);
                overflow-y: auto;
                z-index: 10000 !important;       /* 헤더(z-index ~10) 위로 */
                margin: 0 !important;
            }
            .daterangepicker .ranges,
            .daterangepicker .drp-calendar {
                float: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            .daterangepicker .ranges ul {
                width: 100% !important;
            }
            /* 두 달 노출 시 가로로 안 펼치고 세로로 쌓이게 */
            .daterangepicker.show-calendar .drp-calendar.left,
            .daterangepicker.show-calendar .drp-calendar.right {
                margin: 0 !important;
                border: 0 !important;
            }
            .daterangepicker .drp-calendar.right { display: none !important; }

            /* 테이블 영역 — 가로 스크롤은 table-responsive 안에만 */
            .card-body {
                max-width: 100%;
                overflow-x: hidden;
            }
            .table-responsive,
            #list_wrap {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                max-width: 100%;
            }
            #list_wrap th { min-width: 70px !important; }

            /* 페이지네이션 줄바꿈 */
            .card-body .d-flex.justify-content-between {
                flex-wrap: wrap;
                gap: 8px;
                padding: 8px;
            }
        }

        /* === Breadcrumb 숨김 (HODE 한정) === */
        .body-wrapper .card:has(nav[aria-label="breadcrumb"]) {
            display: none !important;
        }

        /* === 달력 (Flatpickr — shadcn 톤) === */
        .flatpickr-calendar {
            background: hsl(var(--hode-background));
            border: 1px solid hsl(var(--hode-border));
            border-radius: var(--hode-radius);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
            padding: 8px;
        }
        .flatpickr-calendar.arrowTop:before,
        .flatpickr-calendar.arrowTop:after,
        .flatpickr-calendar.arrowBottom:before,
        .flatpickr-calendar.arrowBottom:after { display: none; }

        .flatpickr-months { padding: 2px 4px 6px; }
        .flatpickr-months .flatpickr-month {
            color: hsl(var(--hode-foreground));
            height: auto;
            background: transparent;
        }
        .flatpickr-current-month {
            font-size: 11px;
            font-weight: 500;
            padding: 4px 0;
            color: hsl(var(--hode-foreground));
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months,
        .flatpickr-current-month input.cur-year {
            color: hsl(var(--hode-foreground));
            font-weight: 500;
            font-size: 11px;
            background: transparent;
        }
        .flatpickr-monthDropdown-months:hover {
            background: hsl(var(--hode-accent)) !important;
        }
        .flatpickr-prev-month,
        .flatpickr-next-month {
            color: hsl(var(--hode-muted-foreground)) !important;
            fill: hsl(var(--hode-muted-foreground)) !important;
            padding: 6px !important;
            border-radius: calc(var(--hode-radius) - 2px);
            transition: background 0.15s ease, color 0.15s ease;
        }
        .flatpickr-prev-month:hover,
        .flatpickr-next-month:hover {
            background: hsl(var(--hode-accent));
            color: hsl(var(--hode-foreground)) !important;
            fill: hsl(var(--hode-foreground)) !important;
        }
        .flatpickr-prev-month svg,
        .flatpickr-next-month svg { width: 12px; height: 12px; }

        .flatpickr-weekdays { background: transparent; height: 22px; }
        span.flatpickr-weekday {
            background: transparent !important;
            color: hsl(var(--hode-muted-foreground)) !important;
            font-weight: 400 !important;
            font-size: 11px;
        }

        .flatpickr-day {
            color: hsl(var(--hode-foreground));
            border: 0 !important;
            border-radius: 50% !important;
            height: 28px;
            line-height: 28px;
            max-width: 28px;
            width: 28px;
            font-size: 11px;
            margin: 1px 0;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .flatpickr-day.prevMonthDay,
        .flatpickr-day.nextMonthDay {
            color: hsl(var(--hode-muted-foreground) / 0.5);
        }
        .flatpickr-day:hover,
        .flatpickr-day:focus {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        .flatpickr-day.today,
        .flatpickr-day.today:hover,
        .flatpickr-day.today:focus {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            color: #ffffff !important;
            font-weight: 600;
            border: 0 !important;
        }
        .flatpickr-day.selected,
        .flatpickr-day.selected:hover,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange,
        .flatpickr-day.startRange:hover,
        .flatpickr-day.endRange:hover {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            color: #ffffff !important;
            border: 0 !important;
            box-shadow: none !important;
            font-weight: 600;
        }
        .flatpickr-day.inRange,
        .flatpickr-day.inRange:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }
        .flatpickr-day.flatpickr-disabled,
        .flatpickr-day.flatpickr-disabled:hover {
            color: hsl(var(--hode-muted-foreground) / 0.4) !important;
            background: transparent !important;
        }

        /* === DateRangePicker (오늘/어제/최근7일/최근30일 등) — black 톤 === */
        .daterangepicker {
            background: hsl(var(--hode-background));
            border: 1px solid hsl(var(--hode-border));
            border-radius: var(--hode-radius);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
            font-family: 'Pretendard Variable', Pretendard, sans-serif;
        }
        .daterangepicker:after,
        .daterangepicker:before { display: none; }

        /* 좌측 프리셋 (오늘/어제/최근7일/최근30일/이번달/지난달/맞춤날짜) */
        .daterangepicker .ranges {
            border-right: 1px solid hsl(var(--hode-border));
        }
        .daterangepicker .ranges ul {
            padding: 4px;
            width: 120px;
        }
        .daterangepicker .ranges li,
        body .daterangepicker .ranges li {
            color: hsl(var(--hode-foreground));
            background: transparent;
            border: 0;
            border-radius: 9999px;          /* oval/pill */
            padding: 4px 12px;
            font-size: 11px !important;
            margin-bottom: 2px;
            transition: background 0.15s ease, color 0.15s ease;
        }
        /* 달력 전반 폰트 11px 통일 */
        .daterangepicker { font-size: 11px; }
        .daterangepicker .ranges li:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        .daterangepicker .ranges li.active {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            color: #ffffff !important;
            font-weight: 500;
        }

        /* 캘린더 본체 */
        .daterangepicker .calendar-table {
            border: 0;
            background: transparent;
        }
        .daterangepicker .calendar-table th,
        .daterangepicker .calendar-table td,
        body .daterangepicker .calendar-table th,
        body .daterangepicker .calendar-table td {
            color: hsl(var(--hode-foreground));
            border-radius: 9999px;     /* oval/원형 */
            font-size: 11px !important;
            min-width: 24px;
            height: 24px;
            line-height: 1;
            padding: 4px;
        }
        .daterangepicker .calendar-table th {
            color: hsl(var(--hode-muted-foreground));
            font-weight: 500;
        }
        .daterangepicker td.off,
        .daterangepicker td.off.in-range,
        .daterangepicker td.off.start-date,
        .daterangepicker td.off.end-date {
            color: hsl(var(--hode-muted-foreground) / 0.5);
            background: transparent;
        }
        body .daterangepicker td.available,
        body .daterangepicker th.available {
            background: transparent !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        body .daterangepicker td.available:hover,
        body .daterangepicker th.available:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        body .daterangepicker td.in-range,
        body .daterangepicker td.in-range:hover {
            background: hsl(var(--hode-accent)) !important;
            color: hsl(var(--hode-foreground)) !important;
            border-radius: 0 !important;
        }
        body .daterangepicker td.active,
        body .daterangepicker td.active:hover,
        body .daterangepicker td.start-date,
        body .daterangepicker td.start-date:hover,
        body .daterangepicker td.end-date,
        body .daterangepicker td.end-date:hover,
        body .daterangepicker td.start-date.end-date {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            color: #ffffff !important;
            font-weight: 600;
        }
        .daterangepicker td.start-date { border-radius: 9999px 0 0 9999px !important; }
        .daterangepicker td.end-date { border-radius: 0 9999px 9999px 0 !important; }
        .daterangepicker td.start-date.end-date { border-radius: 9999px !important; }

        /* 월/년 선택 셀렉트 */
        .daterangepicker select.monthselect,
        .daterangepicker select.yearselect {
            border: 1px solid hsl(var(--hode-border));
            border-radius: calc(var(--hode-radius) - 2px);
            background: hsl(var(--hode-background));
            color: hsl(var(--hode-foreground));
            font-size: 11px;
            padding: 2px 4px;
        }

        /* 하단 적용/취소 버튼 */
        .daterangepicker .drp-buttons {
            border-top: 1px solid hsl(var(--hode-border));
            padding: 8px;
        }
        .daterangepicker .drp-buttons .btn,
        body .daterangepicker .drp-buttons .btn {
            border-radius: 9999px !important;   /* oval/pill */
            font-size: 11px !important;
            padding: 0 14px !important;
            font-weight: 500 !important;
            height: 24px !important;
            min-height: 0 !important;
            line-height: 1 !important;
        }
        .daterangepicker .drp-buttons .btn.btn-primary,
        .daterangepicker .drp-buttons .applyBtn {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            border-color: #1EAAE0 !important;
            color: #ffffff !important;
        }
        .daterangepicker .drp-buttons .btn.btn-primary:hover,
        .daterangepicker .drp-buttons .applyBtn:hover {
            background: linear-gradient(135deg, #1990BF 0%, #1EAAE0 100%) !important;
            border-color: #1990BF !important;
            color: #ffffff !important;
        }
        .daterangepicker .drp-buttons .btn.btn-default,
        .daterangepicker .drp-buttons .cancelBtn {
            background: hsl(var(--hode-background)) !important;
            border: 1px solid hsl(var(--hode-border)) !important;
            color: hsl(var(--hode-foreground)) !important;
        }
        .daterangepicker .drp-buttons .btn.btn-default:hover,
        .daterangepicker .drp-buttons .cancelBtn:hover {
            background: hsl(var(--hode-accent)) !important;
        }

        /* 화살표 / 좌우 네비 */
        .daterangepicker .calendar-table .prev,
        .daterangepicker .calendar-table .next {
            border-radius: calc(var(--hode-radius) - 2px);
        }
        .daterangepicker .calendar-table .prev:hover,
        .daterangepicker .calendar-table .next:hover {
            background: hsl(var(--hode-accent));
        }

        /* === HODE — 조회(#search) 버튼 — 로그인 버튼과 동일 컬러(브랜드 sky blue 그라디언트) === */
        body a#search.btn,
        body a#search.btn.btn-primary,
        body a#search.btn.btn-primary.btn-sm {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            border-color: #1EAAE0 !important;
            color: #ffffff !important;
            box-shadow: 0 2px 8px rgba(30, 170, 224, 0.25);
        }
        body a#search.btn:hover,
        body a#search.btn.btn-primary:hover {
            background: linear-gradient(135deg, #1990BF 0%, #1EAAE0 100%) !important;
            border-color: #1990BF !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(30, 170, 224, 0.35);
        }
        body a#search.btn:focus,
        body a#search.btn:focus-visible {
            box-shadow: 0 0 0 3px rgba(30, 170, 224, 0.25) !important;
        }

        /* === HODE — 비밀번호 변경 모달 폰트 축소 === */
        body #password_pop .modal-title,
        body #password_pop .modal-header h5,
        body #password_pop .modal-header .modal-title {
            font-size: 14px !important;
            font-weight: 600 !important;
        }
        body #password_pop .modal-header {
            padding: 12px 16px !important;
            background: transparent !important;
            border-bottom: 0 !important;
        }
        /* HODE 모달 전반의 헤더 배경 + 하단 보더 제거 (일관성) */
        body .modal .modal-header {
            background: transparent !important;
            border-bottom: 0 !important;
        }
        body #password_pop .modal-body {
            padding: 0 !important;
        }
        body #password_pop #pw_card {
            padding: 16px 18px !important;
        }
        body #password_pop #pw_card .card-subtitle,
        body #password_pop #pw_card h5.card-subtitle {
            font-size: 11px !important;
            font-weight: 400 !important;
            color: hsl(var(--hode-muted-foreground)) !important;
            line-height: 1.5 !important;
            margin-bottom: 16px !important;
        }
        body #password_pop .form-label {
            font-size: 11px !important;
            margin-bottom: 4px !important;
        }
        body #password_pop input.form-control {
            font-size: 12px !important;
            height: 32px !important;
            padding: 0 10px !important;
        }
        body #password_pop .mb-3 {
            margin-bottom: 12px !important;
        }
        body #password_pop .modal-footer {
            padding: 10px 14px !important;
        }
        body #password_pop .modal-footer .btn {
            font-size: 11px !important;
            height: 28px !important;
            padding: 0 12px !important;
        }
        /* 적용 버튼 — 조회 버튼과 동일 sky blue 그라디언트 */
        body #password_pop #btn_password_save,
        body #password_pop a#btn_password_save.btn,
        body #password_pop a#btn_password_save.btn.btn-primary {
            background: linear-gradient(135deg, #1EAAE0 0%, #38d0e8 100%) !important;
            border-color: #1EAAE0 !important;
            color: #ffffff !important;
            box-shadow: 0 2px 8px rgba(30, 170, 224, 0.25);
        }
        body #password_pop #btn_password_save:hover,
        body #password_pop a#btn_password_save.btn:hover {
            background: linear-gradient(135deg, #1990BF 0%, #1EAAE0 100%) !important;
            border-color: #1990BF !important;
            color: #ffffff !important;
        }
        /* 비밀번호 변경 — 인풋 하단 인라인 에러 메시지 */
        body #password_pop #pw_card .pw-field-msg {
            min-height: 14px;
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.3;
            color: #dc2626;
            display: none;
        }
        body #password_pop #pw_card .pw-field-msg.is-error {
            display: block;
        }
        body #password_pop #pw_card input.form-control.error {
            border-color: #dc2626 !important;
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.10) !important;
        }
        body #password_pop #pw_card input.form-control.error:focus {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20) !important;
        }

        /* === HODE — 안내 버튼 + hover popover === */
        body #list_wrap ul.notice {
            display: none !important;
        }
        /* HODE — 테이블 위 wrapper(notice + 다운로드) 자체 숨김 — pt-3 여백 제거 */
        body #list_wrap > form > .d-flex.pt-3,
        body #list_wrap form > .d-flex.pt-3.pb-0 {
            display: none !important;
        }
        .hode-notice-wrap {
            position: relative;
            display: inline-block;
        }
        .hode-notice-popover {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: hsl(var(--hode-background));
            border: 1px solid hsl(var(--hode-border));
            border-radius: var(--hode-radius);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
            padding: 10px 14px;
            width: max-content;             /* 가장 긴 줄에 맞춰 자동 확장 */
            min-width: 320px;
            max-width: calc(100vw - 24px);
            z-index: 1050;
            font-size: 11px;
            line-height: 1.5;
            color: hsl(var(--hode-foreground));
            text-align: left;
            white-space: nowrap;            /* 한 줄로 표시 */
        }
        .hode-notice-wrap:hover .hode-notice-popover,
        .hode-notice-wrap:focus-within .hode-notice-popover,
        .hode-notice-wrap.show .hode-notice-popover {
            display: block;
        }
        .hode-notice-popover ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .hode-notice-popover li {
            padding: 5px 0;
            position: relative;
            padding-left: 12px;
        }
        .hode-notice-popover li::before {
            content: '';
            position: absolute;
            left: 2px;
            top: 11px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: hsl(var(--hode-muted-foreground));
        }
        .hode-notice-popover li:not(:last-child) {
            border-bottom: 1px solid hsl(var(--hode-border));
        }
        @media (max-width: 767.98px) {
            /* 모바일: 부모 overflow-x:hidden 영향 없게 fixed 로 헤더 아래 띄움 */
            .hode-notice-popover {
                position: fixed !important;
                top: 56px !important;
                left: 12px !important;
                right: 12px !important;
                width: auto !important;
                max-width: none !important;
                min-width: 0 !important;
                max-height: 60vh;
                overflow-y: auto;
                white-space: normal;
                z-index: 10001 !important;
            }
        }

        /* === HODE — 목록 카드 최소 높이: 화면 꽉 채우기 ===
           차감: body-wrapper padding-top(40px) + 캠페인 정보 카드(~36px) + row mb(4px) + 여백 */
        body #search_frm > .row > .col-md-12 > .card {
            min-height: calc(100vh - 90px);
            min-height: calc(100dvh - 90px);
            display: flex;
            flex-direction: column;
        }
        body #search_frm > .row > .col-md-12 > .card > .card-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        body #search_frm > .row > .col-md-12 > .card > .card-body > #list_wrap,
        body #search_frm > .row > .col-md-12 > .card > .card-body > .table-responsive {
            flex: 1 1 auto;
            min-height: 0;
        }
        @media (max-width: 767.98px) {
            body #search_frm > .row > .col-md-12 > .card {
                min-height: calc(100vh - 86px);
                min-height: calc(100dvh - 86px);
            }
        }

        /* === HODE — 검색 폼 영역(card-header) 배경 제거 + 하단 라인 제거 === */
        body #search_frm > .row > .col-md-12 > .card > .card-header,
        body form[name="search_frm"] .card > .card-header {
            background: transparent !important;
            border-bottom: 0 !important;
        }

        /* === HODE — 리포트 상세 캠페인 정보 카드 (높이 컴팩트화) === */
        .hode-camp-info-row {
            margin-bottom: 4px !important;
        }
        .hode-camp-info {
            border: 1px solid hsl(var(--hode-border));
            background: hsl(var(--hode-background));
            margin-bottom: 0 !important;
        }
        .hode-camp-info .card-body {
            padding: 8px 12px !important;  /* p-3(16px) → 8px 로 약 70% 높이 */
        }
        .hode-camp-info .hode-camp-id {
            font-size: 11px;
            font-weight: 600;
            color: hsl(var(--hode-muted-foreground));
            background: hsl(var(--hode-muted));
            padding: 1px 7px;
            border-radius: 9999px;
            line-height: 1.4;
        }
        .hode-camp-info .hode-camp-nm {
            font-size: 13px;
            font-weight: 600;
            color: hsl(var(--hode-foreground));
            line-height: 1.3;
            word-break: break-all;
        }
        .hode-camp-info .hode-camp-list-btn {
            height: 26px !important;
            padding: 0 10px !important;
            font-size: 11px;
        }
        @media (max-width: 767.98px) {
            .hode-camp-info .card-body { padding: 6px 10px !important; }
            .hode-camp-info .hode-camp-nm { font-size: 12px; }
        }

        /* === HODE — modernize 기본 .topbar 헤더 하단 border 제거 === */
        .topbar .navbar .navbar-collapse {
            border-top: 0 !important;
        }
        /* HODE — topbar nav-link 아이콘 폰트 사이즈 통일 */
        .topbar .navbar .navbar-nav .nav-item .nav-link i {
            font-size: 15px !important;
        }
        /* HODE — modernize 기본 nav-link line-height/height 70px → 50px (전 화면) */
        .topbar .navbar .navbar-nav .nav-item .nav-link {
            line-height: 50px !important;
            height: 50px !important;
        }

        /* === HODE — 상단 메뉴(quick-links) 숨김 === */
        .app-header .navbar-nav.quick-links,
        .with-vertical .navbar-nav.quick-links {
            display: none !important;
        }
        /* 작은 화면에서 quick-links 강제 노출하던 규칙 무력화 */
        @media (max-width: 1299.98px) {
            .app-header .navbar-nav.quick-links {
                display: none !important;
            }
            .app-header .navbar-nav.quick-links > .nav-item {
                display: none !important;
            }
            /* 토글 버튼 옆 세로 구분선 제거 (quick-links 가 사라졌으므로) */
            .app-header .navbar > ul.navbar-nav.quick-links {
                border-left: 0 !important;
                padding-left: 0 !important;
                margin-left: 0 !important;
            }
        }

        /* === HODE — cps/report* 페이지 한정: 로그인 페이지와 동일 배경 === */
        body.hode-report-page {
            background: #f4f7fb !important;
            position: relative;
        }
        body.hode-report-page::before {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background:
                radial-gradient(ellipse at 15% 30%, rgba(30, 170, 224, 0.10) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 70%, rgba(108, 92, 231, 0.06) 0%, transparent 50%);
            z-index: 0;
            pointer-events: none;
        }
        /* topbar / 본문이 그라디언트 위에 깔끔하게 보이도록 stacking 보장 — topbar 의 fixed 는 유지 */
        body.hode-report-page .page-wrapper,
        body.hode-report-page .body-wrapper {
            position: relative;
            z-index: 1;
        }

        /* === HODE — cps/report* 페이지 한정: 버튼 oval(pill) 모양 === */
        body.hode-report-page .btn,
        body.hode-report-page .btn-sm,
        body.hode-report-page .btn-lg,
        body.hode-report-page .input-group .btn {
            border-radius: 9999px !important;
        }
        body.hode-report-page .daterangepicker .drp-buttons .btn {
            border-radius: 9999px !important;
        }

        /* === 스크롤바 === */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-thumb {
            background: hsl(var(--hode-border));
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: hsl(var(--hode-muted-foreground) / 0.4);
        }