/* AI Hub index — theme/goodlearning/ai_hub/index.php 전용 (head.php 이후 로드) */
    /* 코스웨어 토스트 (우측 상단, :root 변수 없이 직접 값) */
    .gl-toast-container {
        position: fixed;
        top: calc(72px + 1rem);
        right: 1rem;
        z-index: 600;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-end;
        max-width: min(100vw - 2rem, 380px);
        pointer-events: none;
        box-sizing: border-box;
    }
    .gl-toast-container .gl-toast { pointer-events: auto; }
    .gl-toast {
        font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.5;
        padding: 1rem 1.25rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-break: keep-all;
        border: 1px solid transparent;
        animation: glToastIn 250ms ease forwards;
    }
    @keyframes glToastIn {
        from { opacity: 0; transform: translateX(12px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .gl-toast--info {
        background: #3B82F6;
        color: #fff;
        border-color: #2563EB;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    }
    .gl-toast--success {
        background: #10B981;
        color: #fff;
        border-color: #059669;
    }
    .gl-toast--neutral {
        background: #1F2937;
        color: #fff;
        border-color: #111827;
    }
    @media (max-width: 480px) {
        .gl-toast-container {
            right: 0.75rem;
            left: 0.75rem;
            max-width: none;
            align-items: stretch;
        }
    }

    /* ==========================================
       [기존] 인덱스 페이지 스타일
       ========================================== */
    .ai_wrap { width: 100%; font-family: 'Pretendard', 'Malgun Gothic', sans-serif; background-color: #fff; color: #000; }
    .ai_container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
    .ai_container1 { width: 100%; box-sizing: border-box; background-color: #F9F9FF; }
    
    /* 관리자 배너 에디터로 넣은 HTML만 대상 (미등록 시 이 블록도 출력 구간 없음) */
    .aihub-hero-editor-out .at-hero__visual {
        display: flex; justify-content: center; align-items: center;
    }
    /* 대시보드 카드: 템플릿(at-hero__*) 또는 에디터 래퍼(aihub-hero-editor-out) 모두 동일 3D 호버 */
    .aihub-hero-editor-out .at-hero__dashboard,
    .at-hero__visual .at-hero__dashboard {
        width: 320px; max-width: 100%; background: #1e1b3a; border-radius: 16px; overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08);
        /* perspective 회전 시 흐림 완화: 별도 컴포지터 레이어 + 뒷면 숨김 */
        transform: perspective(800px) rotateY(-5deg) rotateX(2deg) translate3d(0, 0, 0);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        will-change: transform;
        box-sizing: border-box;
    }
    .aihub-hero-editor-out .at-hero__dashboard:hover,
    .at-hero__visual .at-hero__dashboard:hover {
        transform: perspective(800px) rotateY(0deg) rotateX(0deg) translate3d(0, 0, 0);
    }
    .aihub-hero-editor-out .at-hero__dash-header {
        display: flex; align-items: center; gap: 10px; padding: 10px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .aihub-hero-editor-out .at-hero__dash-dots { display: flex; gap: 5px; }
    .aihub-hero-editor-out .at-hero__dash-dots span {
        width: 8px; height: 8px; border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden;
    }
    .aihub-hero-editor-out .at-hero__dash-dots span:nth-child(1) { background: #ff5f56; }
    .aihub-hero-editor-out .at-hero__dash-dots span:nth-child(2) { background: #ffbd2e; }
    .aihub-hero-editor-out .at-hero__dash-dots span:nth-child(3) { background: #27ca40; }
    .aihub-hero-editor-out .at-hero__dash-title {
        /* #1e1b3a 대비 WCAG 2 AA 4.5:1 이상 (11px 본문급) */
        font-size: 11px; color: #C8C3DC; font-weight: 600;
    }
    .aihub-hero-editor-out .at-hero__dash-body { padding: 20px 16px 16px; }
    .aihub-hero-editor-out .at-hero__dash-stat {
        display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .aihub-hero-editor-out .at-hero__dash-stat-num {
        font-size: 24px; font-weight: 900; color: #A78BFA; letter-spacing: -0.02em;
    }
    .aihub-hero-editor-out .at-hero__dash-stat-lbl { font-size: 11px; color: #B6B1CC; }
    .aihub-hero-editor-out .at-hero__dash-stat-change {
        font-size: 12px; color: #34D399; font-weight: 700; margin-left: auto;
    }
    .aihub-hero-editor-out .at-hero__dash-chart,
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart {
        display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-bottom: 16px;
        /* 대시보드 카드 3D transform 과 분리 → 자식 transform 애니 첫 로드에서도 재생되게 */
        transform: translateZ(0);
        isolation: isolate;
    }
    .aihub-hero-editor-out .at-hero__bar,
    .at-hero__visual .at-hero__dashboard .at-hero__bar {
        flex: 1; border-radius: 4px 4px 0 0; min-width: 20px; font-size: 0; line-height: 0;
        /* flex 기본 min-height:auto 가 height:0 성장 애니를 막음 */
        min-height: 0;
        align-self: flex-end;
        overflow: hidden;
        transform-origin: bottom center;
        animation-name: aihubHeroBarGrow, aihubHeroBarBob;
        /* 성장 짧게 → 곧바로 움직임 느껴지게 */
        animation-duration: 0.55s, 2.2s;
        animation-timing-function: ease-out, ease-in-out;
        /* 출렁임은 ~0.3s부터(성장과 살짝 겹침), 막대별 0.05s만 어긋남 */
        animation-delay: 0s, 0.3s;
        animation-iteration-count: 1, infinite;
        animation-fill-mode: both, none;
    }
    /* 차트 안 줄바꿈 텍스트 노드 때문에 nth-of-type 사용 */
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(1),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(1) { animation-delay: 0s, 0.3s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(2),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(2) { animation-delay: 0s, 0.35s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(3),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(3) { animation-delay: 0s, 0.4s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(4),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(4) { animation-delay: 0s, 0.45s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(5),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(5) { animation-delay: 0s, 0.5s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(6),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(6) { animation-delay: 0s, 0.55s; }
    .aihub-hero-editor-out .at-hero__dash-chart .at-hero__bar:nth-of-type(n+7),
    .at-hero__visual .at-hero__dashboard .at-hero__dash-chart .at-hero__bar:nth-of-type(n+7) { animation-delay: 0s, 0.6s; }
    @keyframes aihubHeroBarGrow {
        from { height: 0 !important; min-height: 0 !important; }
    }
    @keyframes aihubHeroBarBob {
        0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); }
        50% { transform: translate3d(0, 0, 0) scaleY(0.78); }
    }
    @media (prefers-reduced-motion: reduce) {
        .aihub-hero-editor-out .at-hero__bar,
        .at-hero__visual .at-hero__dashboard .at-hero__bar {
            animation: aihubHeroBarGrow 0.55s ease-out both;
        }
    }
    .aihub-hero-editor-out .at-hero__dash-tools { display: flex; gap: 8px; flex-wrap: wrap; }
    .aihub-hero-editor-out .at-hero__dash-tool {
        display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px;
        background: rgba(255,255,255,0.06); font-size: 10px; color: #BAB6CE; font-weight: 600;
    }
    .aihub-hero-editor-out .at-hero__dash-tool i { font-size: 12px; }
    /* 시안: 탭 4열 그리드 + 상태 바 한 줄 — 리드(좌) | 통계(가운데) | 버튼(우) */
    .aihub-hero-tabs-wrap { width: 100%; max-width: 1300px; margin: 0 auto; padding: 50px 20px; box-sizing: border-box; }
    .aihub-hero-tabs {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%;
    }
    @media (max-width: 640px) {
        .aihub-hero-tabs { grid-template-columns: repeat(2, 1fr); }
    }
    .aihub-hero-tab {
        text-align: center; padding: 11px 10px; min-height: 48px; border-radius: 12px;
        font-size: 16px; font-weight: 700; background: #fff; color: #3B44DB;
        border: 1px solid #3B44DB; box-sizing: border-box; cursor: pointer;
        transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
        font-family: inherit; margin: 0; width: 100%;
    }
    .aihub-hero-tab:hover:not(.is-active) { background: #F7F8FF; }
    .aihub-hero-tab.is-active {
        background: #3B44DB; color: #fff; border-color: #3B44DB;
        box-shadow: 0 6px 18px rgba(59, 68, 219, 0.22);
    }
    .aihub-hero-status {
        margin-top: 12px; background: #fff; border-radius: 12px; padding: 18px 28px;
        display: flex; flex-direction: row; align-items: center; justify-content: space-between;
        gap: 16px 24px; flex-wrap: nowrap;
        border: 1px solid #E8E9F0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    }
    .aihub-hero-status__col { min-width: 0; }
    .aihub-hero-status__col--lead {
        flex: 1 1 auto; text-align: left; display: flex; align-items: center; min-width: 0;
    }
    /* 통계 + 버튼 한 묶음 — 시안처럼 서로 붙게 */
    .aihub-hero-status__col--right {
        display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0;
        gap: 12px 14px; justify-content: flex-end;
    }
    /* 시안: 앞문장 검정 일반체, 뒷문장 전체 파랑·굵게 */
    .aihub-hero-status__lead {
        margin: 0; font-size: 15px; color: #000; font-weight: 400; line-height: 1.5;
        letter-spacing: -0.02em;
    }
    .aihub-hero-status__lead .aihub-hero-status__hl { color: #3B44DB; font-weight: 700; }
    .aihub-hero-status__stats {
        display: flex; align-items: center; flex-wrap: wrap; gap: 0; justify-content: flex-end;
    }
    .aihub-hero-status__stat {
        padding: 0 16px; display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
        gap: 4px; border-left: 1px solid #D8DAE5; line-height: 1.35; white-space: nowrap;
    }
    .aihub-hero-status__stat:first-child { border-left: none; padding-left: 0; }
    .aihub-hero-status__stat:last-child { padding-right: 0; }
    .aihub-hero-status__stat-num { color: #3B44DB; font-weight: 800; font-size: 15px; flex-shrink: 0; }
    .aihub-hero-status__stat-lbl { font-size: 14px; color: #6B7280; font-weight: 400; margin: 0; }
    .aihub-hero-status__actions {
        display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
    }
    @media (max-width: 960px) {
        .aihub-hero-status { flex-wrap: wrap; }
        .aihub-hero-status__col--lead { flex: 1 1 100%; justify-content: center; text-align: center; }
        .aihub-hero-status__col--right { flex: 1 1 100%; justify-content: center; gap: 14px 18px; }
        .aihub-hero-status__stats { justify-content: center; }
        .aihub-hero-status__lead { text-align: center; }
    }
    .aihub-btn-status-primary {
        display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
        padding: 13px 26px; background: #3B44DB; color: #fff; font-size: 15px; font-weight: 700;
        border-radius: 10px; text-decoration: none; border: 1px solid #3B44DB;
        transition: background 0.2s, box-shadow 0.2s; box-shadow: none;
    }
    .aihub-btn-status-primary:hover { background: #2f36b8; color: #fff; box-shadow: 0 2px 8px rgba(59, 68, 219, 0.25); }
    /* [hidden] 만으로는 display:inline-flex 에 밀려 숨김 실패하는 브라우저 대응 */
    #aihubStatusPrimary[hidden] {
        display: none !important;
    }
    .aihub-btn-status-secondary {
        display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
        padding: 13px 26px; background: #fff; color: #3B44DB; font-size: 15px; font-weight: 700;
        border-radius: 10px; text-decoration: none; border: 1px solid #3B44DB; transition: background 0.2s;
    }
    .aihub-btn-status-secondary:hover { background: #F7F8FF; color: #2f36b8; }
    .aihub-tab-panel { display: none; }
    .aihub-tab-panel.is-active { display: block; }
    .aihub-tab-placeholder {
        max-width: 720px; margin: 48px auto; padding: 40px 32px; text-align: center;
        background: #fff; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    .aihub-tab-placeholder__tit { font-size: 22px; font-weight: 800; color: #111; margin: 0 0 12px; }
    .aihub-tab-placeholder__desc { font-size: 15px; color: #666; line-height: 1.6; margin: 0; }
    /* 코스웨어 탭: 소개 + 통합 필터 */
    .aihub-cw-wrap { width: 100%; box-sizing: border-box; }
    .at-unified-filter {
        width: 100%;
        background: #F4F6FC;
        border: 1px solid #E8ECF5;
        border-radius: 16px;
        padding: 22px 24px 20px;
        box-sizing: border-box;
    }
    .at-filter-row {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .at-chip-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
    .at-chip-label {
        flex: 0 0 auto;
        min-width: 72px;
        font-size: 13px;
        font-weight: 700;
        color: #374151;
        padding-top: 8px;
    }
    .at-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        flex: 1 1 200px;
        min-width: 0;
    }
    .at-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border: 1px solid #D1D5DB;
        background: #fff;
        color: #4B5563;
        transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
        margin: 0;
    }
    .at-chip:hover { border-color: #3B44DB; color: #3B44DB; background: #F7F8FF; }
    .at-chip.active {
        border-color: #3B44DB;
        background: #3B44DB;
        color: #fff;
        box-shadow: 0 2px 8px rgba(59, 68, 219, 0.2);
    }
    .at-filter-search-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid #E2E8F0;
    }
    .at-search-box {
        flex: 1 1 240px;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 14px 0 16px;
        border-radius: 10px;
        border: 1px solid #E0E0E0;
        background: #fff;
        box-sizing: border-box;
    }
    .at-search-box:focus-within { border-color: #3B44DB; }
    .at-search-box .fas { color: #9CA3AF; font-size: 15px; flex-shrink: 0; }
    .at-search-input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        font-size: 14px;
        background: transparent;
        font-family: inherit;
    }
    .at-search-input::placeholder { color: #9CA3AF; }
    .at-reset-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 10px;
        border: 1px solid #D1D5DB;
        background: #fff;
        color: #4B5563;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }
    .at-reset-btn:hover { background: #F9FAFB; border-color: #9CA3AF; }
    @media (max-width: 640px) {
        .at-chip-label { width: 100%; padding-top: 0; }
        .at-unified-filter { padding: 18px 16px; }
    }
    .aihub-cw-list-mount { margin-top: 28px; min-height: 120px; }
    .aihub-cw-loading-msg { text-align: center; color: #6B7280; font-size: 15px; padding: 40px 16px; margin: 0; }
    .aihub-cw-empty {
        text-align: center; color: #6B7280; font-size: 15px; line-height: 1.55;
        padding: 48px 20px; margin: 16px 0 0;
        background: #F9FAFB; border: 1px dashed #E5E7EB; border-radius: 12px;
        box-sizing: border-box;
    }
    .at-result-bar {
        display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
        margin-bottom: 8px;
    }
    .at-result-count { font-size: 15px; color: #374151; }
    .at-result-count strong { color: #111; font-weight: 800; }
    .dm-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-top: 16px;
    }
    @media (max-width: 900px) {
        .dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 480px) {
        .dm-grid { grid-template-columns: 1fr; }
    }
    .dm-card {
        background: #fff;
        border: 1px solid #E8ECF5;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.2s, border-color 0.2s;
    }
    .dm-card:hover { box-shadow: 0 8px 28px rgba(59, 68, 219, 0.1); border-color: #D8DDF5; }
    .dm-card-header {
        display: flex; gap: 14px; padding: 18px 18px 0;
        align-items: flex-start;
    }
    .dm-card-icon {
        width: 48px; height: 48px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .dm-card-icon i { font-size: 20px; }
    .dm-card-info { min-width: 0; flex: 1; }
    .dm-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .dm-card-badge {
        display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
        line-height: 1.3;
    }
    .dm-card-badge.keris { background: #EEF2FF; color: #4338CA; }
    .dm-card-badge.popular { background: #FEF3C7; color: #B45309; }
    .dm-card-badge.certified { background: #D1FAE5; color: #047857; }
    .dm-card-badge.new { background: #DBEAFE; color: #1D4ED8; }
    .dm-card-title { font-size: 17px; font-weight: 800; color: #111; line-height: 1.3; }
    .dm-card-company { font-size: 13px; color: #6B7280; margin-top: 4px; }
    .dm-card-body { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
    .dm-card-desc { font-size: 13px; color: #4B5563; line-height: 1.55; margin: 0; }
    .dm-card-subjects { display: flex; flex-wrap: wrap; gap: 6px 10px; }
    .dm-card-subject { font-size: 11px; color: #374151; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
    .dm-card-stats {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        padding: 12px 0; border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6;
    }
    .dm-card-stat { text-align: center; }
    .dm-card-stat-value { display: block; font-size: 13px; font-weight: 700; color: #111; line-height: 1.35; }
    .dm-card-stat-label { font-size: 11px; color: #9CA3AF; font-weight: 500; }
    .dm-card-footer {
        display: flex; flex-wrap: nowrap; align-items: stretch;
        gap: 8px; margin-top: auto;
        width: 100%; box-sizing: border-box;
    }
    .aihub-cw-list-mount .dm-card-footer .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    .aihub-cw-list-mount .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 8px;
        cursor: pointer; border: 1px solid transparent; text-decoration: none;
        padding: 8px 12px; margin: 0; line-height: 1.2;
        box-sizing: border-box;
    }
    .aihub-cw-list-mount .btn-sm { min-height: 36px; }
    .aihub-cw-list-mount .btn-primary { background: #3B44DB; color: #fff; border-color: #3B44DB; }
    .aihub-cw-list-mount .btn-primary:hover { background: #2f36b8; border-color: #2f36b8; color: #fff; }
    .aihub-cw-list-mount .btn-secondary { background: #fff; color: #3B44DB; border-color: #C7CAF0; }
    .aihub-cw-list-mount .btn-secondary:hover { background: #F7F8FF; }
    .dm-policy-section {
        margin-top: 48px;
        padding-top: 40px;
        padding-bottom: 48px;
        border-top: 1px solid #E8ECF5;
    }
    .dm-section-title {
        font-size: 18px;
        font-weight: 800;
        color: #111;
        margin: 0 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .dm-section-title i { color: #6B7280; font-size: 1.05em; }
    .dm-policy-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    @media (max-width: 900px) {
        .dm-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 480px) {
        .dm-policy-grid { grid-template-columns: 1fr; }
    }
    .dm-policy-card {
        border: 1px solid #E8ECF5;
        border-radius: 14px;
        padding: 18px 16px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border-top: 3px solid var(--policy-color, #7C3AED);
        box-sizing: border-box;
    }
    .dm-policy-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background: #F3F4F6;
        color: var(--policy-color, #7C3AED);
    }
    .dm-policy-card h4 {
        font-size: 15px;
        font-weight: 800;
        color: #111;
        margin: 12px 0 8px;
        line-height: 1.3;
    }
    .dm-policy-card p {
        font-size: 13px;
        color: #6B7280;
        line-height: 1.55;
        margin: 0 0 12px;
    }
    .dm-policy-count {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        color: var(--policy-color, #7C3AED);
    }
    :root {
        --color-primary: #7C3AED;
        --color-primary-light: #A78BFA;
        --color-primary-lighter: #DDD6FE;
        --color-primary-lightest: #EDE9FE;
        --color-primary-bg: #F5F3FF;
        --color-primary-dark: #6D28D9;
        --color-primary-darker: #5B21B6;
        --color-accent: #8B5CF6;
        --color-accent-warm: #F59E0B;
        --color-accent-green: #10B981;
        --color-accent-blue: #3B82F6;
        --color-accent-pink: #EC4899;
        --color-accent-red: #EF4444;
        --color-white: #FFFFFF;
        --color-gray-50: #F9FAFB;
        --color-gray-100: #F3F4F6;
        --color-gray-200: #E5E7EB;
        --color-gray-300: #D1D5DB;
        --color-gray-400: #9CA3AF;
        --color-gray-500: #6B7280;
        --color-gray-600: #4B5563;
        --color-gray-700: #374151;
        --color-gray-800: #1F2937;
        --color-gray-900: #111827;
        --color-success: #10B981;
        --color-success-bg: #D1FAE5;
        --color-warning: #F59E0B;
        --color-warning-bg: #FEF3C7;
        --color-error: #EF4444;
        --color-error-bg: #FEE2E2;
        --color-info: #3B82F6;
        --color-info-bg: #DBEAFE;
        --font-primary: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        --font-display: 'Pretendard', 'Inter', sans-serif;
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        --text-5xl: 3rem;
        --font-light: 300;
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --leading-tight: 1.25;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.5rem;
        --radius-full: 9999px;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-card-hover: 0 10px 20px rgba(124, 58, 237, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
        --shadow-purple: 0 4px 14px rgba(124, 58, 237, 0.25);
        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;
        --transition-slow: 350ms ease;
        --container-max: 1280px;
        --container-wide: 1440px;
        --sidebar-width: 260px;
        --header-height: 72px;
        --promo-height: 44px;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-fixed: 300;
        --z-modal-backdrop: 400;
        --z-modal: 500;
        --z-tooltip: 600;
    }
    .budget-tab-root {
        width: 100%;
        box-sizing: border-box;
    }
    .budget-tab-root h1 { font-size: var(--text-4xl); }
    .budget-tab-root h2 { font-size: var(--text-3xl); }
    .budget-tab-root h3 { font-size: var(--text-2xl); }
    .budget-tab-root h4 { font-size: var(--text-xl); }
    .budget-tab-root h5 { font-size: var(--text-lg); }
    .budget-tab-root h6 { font-size: var(--text-base); }
    .budget-tab-root .text-sm { font-size: 14px; }
    /* Tailwind-like utility classes (global) */
    .text-xs { font-size: 0.75rem; line-height: 1rem; }
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    .budget-sub-tabs {
        display: flex; flex-wrap: wrap; gap: 10px;
        margin-bottom: 24px;
    }
    .budget-sub-tab {
        flex: 1 1 180px;
        display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        min-height: 48px; padding: 10px 11px; margin: 0;
        border-radius: 12px; border: 1px solid #3B44DB; background: #fff; color: #3B44DB;
        font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
        box-sizing: border-box;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .budget-sub-tab:hover:not(.active) { background: #F7F8FF; }
    .budget-sub-tab.active {
        background: #3B44DB; color: #fff; border-color: #3B44DB;
        box-shadow: 0 6px 18px rgba(59, 68, 219, 0.22);
    }
    .budget-sub-tab i { font-size: 16px; opacity: 0.95; }
    .budget-sub-panels { min-height: 120px; }
    .budget-sub-panel { display: none; padding: 8px 0 0; }
    .budget-sub-panel.is-active { display: block; }
    .budget-sub-panel__lead {
        font-size: 15px; color: #666; line-height: 1.65; margin: 0;
        padding: 20px 22px; background: #F9FAFB; border: 1px solid #E8ECF5; border-radius: 12px;
    }
    .budget-sub-panel--planner { padding: 0; }

    /* 예산 퍼즐 플래너 위저드 (#bsub-planner) */
    #bsub-planner {
        --bp-primary: #7C3AED;
        --bp-accent: #8B5CF6;
        --bp-muted: #6B7280;
        --bp-space-2: 0.5rem;
        --bp-text-xl: 1.25rem;
        max-width: 100%;
        padding-bottom:48px;
    }
    #bsub-planner .bp-text-sm { font-size: 0.875rem; }
    #bsub-planner .bp-text-xs { font-size: 0.75rem; }
    #bsub-planner .bp-text-muted { color: var(--bp-muted); }
    #bsub-planner .bp-font-semibold { font-weight: 600; }
    #bsub-planner .at-wizard-progress {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin-bottom: 28px; flex-wrap: nowrap;
    }
    #bsub-planner .at-wizard-step {
        display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
        min-width: 0; flex: 0 1 auto; opacity: 0.45; transition: opacity 0.2s;
    }
    #bsub-planner .at-wizard-step.active { opacity: 1; }
    #bsub-planner .at-wizard-num {
        width: 32px; height: 32px; border-radius: 50%; background: #E5E7EB; color: #6B7280;
        font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    }
    #bsub-planner .at-wizard-step.active .at-wizard-num { background: #3B44DB; color: #fff; }
    #bsub-planner .at-wizard-label { font-size: 12px; font-weight: 700; color: #374151; line-height: 1.25; }
    #bsub-planner .at-wizard-line { flex: 1 1 24px; height: 2px; background: #E5E7EB; min-width: 12px; margin-bottom: 22px; }
    #bsub-planner .at-wizard-panel { display: none; }
    #bsub-planner .at-wizard-panel.active { display: block; }
    #bsub-planner .at-wizard-panel__header {
        display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px;
        padding: 20px 22px; background: #F9FAFB; border-radius: 12px; border: 1px solid #E8ECF5;
    }
    #bsub-planner .at-wizard-panel__header > i { font-size: 28px; color: #3B44DB; margin-top: 4px; }
    #bsub-planner .at-wizard-panel__header h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #111; }
    #bsub-planner .at-wizard-panel__header p { margin: 0; font-size: 14px; color: #6B7280; line-height: 1.5; }
    #bsub-planner .bp-school-cards {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px;
    }
    @media (max-width: 900px) { #bsub-planner .bp-school-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 480px) { #bsub-planner .bp-school-cards { grid-template-columns: 1fr; } }
    #bsub-planner .bp-school-card {
        position: relative; border: 2px solid #E8ECF5; border-radius: 14px; padding: 18px 14px;
        text-align: center; cursor: pointer; background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
    }
    #bsub-planner .bp-school-card:hover { border-color: #C7CAF0; }
    #bsub-planner .bp-school-card.active { border-color: #3B44DB; box-shadow: 0 4px 16px rgba(59, 68, 219, 0.12); }
    #bsub-planner .bp-school-card--featured .bp-school-card__ribbon {
        position: absolute; top: 10px; right: -4px; background: #3B44DB; color: #fff; font-size: 10px; font-weight: 800;
        padding: 4px 10px; border-radius: 6px 0 0 6px;
    }
    #bsub-planner .bp-school-icon {
        width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 10px;
        display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
    }
    #bsub-planner .bp-school-name { display: block; font-size: 15px; font-weight: 800; color: #111; }
    #bsub-planner .bp-school-budget { display: block; font-size: 14px; font-weight: 700; color: #3B44DB; margin: 6px 0; }
    #bsub-planner .bp-school-desc { font-size: 12px; color: #6B7280; line-height: 1.45; }
    #bsub-planner .at-wizard-nav {
        display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
        margin-top: 8px;
        padding-top: 16px;
    }
    #bsub-planner .bp-puzzle-area {
        margin-top: 0;
        border: 1px solid #E8ECF5;
        border-radius: 14px;
        padding: 16px 18px 20px;
        background: #fff;
    }
    #bsub-planner .bp-puzzle-header {
        display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px;
        margin-bottom: 18px;
    }
    #bsub-planner .bp-puzzle-header h4 {
        margin: 0; font-size: 16px; font-weight: 800; color: #111; display: flex; align-items: center; gap: 8px;
        flex: 1 1 auto; min-width: 0;
    }
    #bsub-planner .bp-puzzle-header h4 i { color: var(--bp-primary); }
    #bsub-planner .bp-budget-indicator {
        flex: 0 0 200px; width: 200px; max-width: 200px; box-sizing: border-box;
    }
    #bsub-planner .bp-total-budget { display: block; font-size: 20px; font-weight: 800; color: #3B44DB; margin: 4px 0 8px; }
    #bsub-planner .bp-budget-bar { height: 8px; background: #E5E7EB; border-radius: 999px; overflow: hidden; }
    #bsub-planner .bp-budget-fill {
        height: 100%; border-radius: 999px;
        background: linear-gradient(90deg, #3B44DB, #5E67E5);
        transition: width 0.2s ease;
    }
    #bsub-planner .bp-modules-grid {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    }
    @media (max-width: 900px) { #bsub-planner .bp-modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { #bsub-planner .bp-modules-grid { grid-template-columns: 1fr; } }
    #bsub-planner .bp-module {
        border: 1px solid #E8ECF5; border-radius: 12px; padding: 14px; background: #fff;
        position: relative; text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    #bsub-planner .bp-module.active {
        border-color: #93C5FD;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }
    #bsub-planner .bp-module-check {
        position: absolute; top: 10px; right: 10px;
        width: 24px; height: 24px; border-radius: 50%;
        border: 2px solid #D1D5DB; background: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; color: transparent; transition: all 0.2s ease;
    }
    #bsub-planner .bp-module.active .bp-module-check {
        border-color: #3B44DB; background: #3B44DB; color: #fff;
    }
    #bsub-planner .bp-module:not(.active) { opacity: 0.82; }
    #bsub-planner .bp-module:not(.active) .bp-module-slider { opacity: 0.5; }
    #bsub-planner .bp-module-icon {
        width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
        font-size: 18px; margin-bottom: 8px;
    }
    #bsub-planner .bp-module-name { font-size: 14px; font-weight: 800; color: #111; }
    #bsub-planner .bp-module-price { font-size: 13px; font-weight: 700; color: #3B44DB; margin: 4px 0 6px; }
    #bsub-planner .bp-module-desc { font-size: 11px; color: #6B7280; line-height: 1.45; margin-bottom: 10px; }
    #bsub-planner .bp-module-slider { width: 100%; margin: 8px 0 4px; accent-color: #3B44DB; }
    #bsub-planner .bp-slider-range { display: flex; justify-content: space-between; }
    #bsub-planner .bp-summary-panel { border: 1px solid #E8ECF5; border-radius: 14px; padding: 20px; background: #FAFAFA; }
    #bsub-planner .bp-summary-header {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px;
        margin-bottom: 16px;
    }
    #bsub-planner .bp-summary-header h4 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
    #bsub-planner .bp-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    #bsub-planner .bp-summary-row {
        display: flex; justify-content: space-between; align-items: center; padding: 10px 0;
        border-bottom: 1px solid #E8ECF5;
    }
    #bsub-planner .bp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
    #bsub-planner .bp-summary-total {
        display: flex; justify-content: space-between; align-items: center; padding: 16px 0 8px; margin-top: 4px;
        border-top: 2px solid #3B44DB;
    }
    #bsub-planner .bp-summary-total .bp-font-semibold { font-size: 16px; font-weight: 700; }
    #bsub-planner .bp-summary-total-amt { font-size: var(--bp-text-xl); font-weight: 800; color: var(--bp-primary); }
    #bsub-planner .bp-summary-footer {
        display: flex; justify-content: space-between; padding-top: var(--bp-space-2); flex-wrap: wrap; gap: 8px;
    }
    #bsub-planner .bp-summary-rem { font-weight: 600; color: #059669; }
    #bsub-planner .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer;
        border: 1px solid transparent; padding: 10px 18px; margin: 0; line-height: 1.2; box-sizing: border-box;
    }
    #bsub-planner .btn-sm { padding: 7px 12px; font-size: 13px; }
    #bsub-planner .btn-primary { background: #3B44DB; color: #fff; border-color: #3B44DB; }
    #bsub-planner .btn-primary:hover { background: #2f36b8; color: #fff; }
    #bsub-planner .btn-secondary { background: #fff; color: #3B44DB; border-color: #C7CAF0; }
    #bsub-planner .btn-secondary:hover { background: #F7F8FF; }
    #bsub-planner .btn-ghost { background: transparent; color: #4B5563; border-color: #E5E7EB; }
    #bsub-planner .btn-ghost:hover { background: #F9FAFB; }

    /* 예산 분석 (#bsub-analysis) */
    #bsub-analysis { display: grid; gap: 24px; }
    #bsub-analysis .dash-stat-grid {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
    }
    #bsub-analysis .mini-stat {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 14px;
        display: grid; gap: 6px;
    }
    #bsub-analysis .stat-icon {
        width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
        align-items: center; justify-content: center; font-size: 14px;
    }
    #bsub-analysis .stat-trend { font-size: 12px; font-weight: 700; }
    #bsub-analysis .stat-trend.up { color: #059669; }
    #bsub-analysis .stat-trend.neutral { color: #6B7280; }
    #bsub-analysis .dash-row-2col {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0;
    }
    #bsub-analysis .dash-panel {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 16px;
    }
    #bsub-analysis .simulator-panel {
        background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
        border: 1px solid #C7CAF0;
        border-radius: 14px;
        padding: 16px;
    }
    #bsub-analysis .fx-rate-card {
        background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
        border: 1px solid #FDE68A;
        border-radius: 14px;
        padding: 16px;
    }
    #bsub-analysis .dash-panel-header {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
    }
    #bsub-analysis .dash-panel-header h4 { margin: 0; font-size: 16px; font-weight: 800; color: #111; }
    #bsub-analysis .period-selector { display: inline-flex; gap: 6px; }
    #bsub-analysis .period-btn {
        border: 1px solid #D6DBF6; background: #fff; color: #3B44DB;
        border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    #bsub-analysis .period-btn.active { background: #3B44DB; border-color: #3B44DB; color: #fff; }
    #bsub-analysis .budget-breakdown { display: grid; gap: 12px; margin-top: 12px; }
    #bsub-analysis .budget-row { display: grid; grid-template-columns: 102px 1fr auto; gap: 10px; align-items: center; }
    #bsub-analysis .budget-row-label { line-height: 1.25; }
    #bsub-analysis .budget-row-label .font-semibold {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        letter-spacing: -0.1px;
        margin-bottom: 2px;
    }
    #bsub-analysis .budget-row-label .text-muted {
        display: inline-block;
        font-size: 12px;
        color: #6B7280;
        font-weight: 500;
    }
    #bsub-analysis .budget-row-bar { height: 8px; border-radius: 999px; background: #E5E7EB; overflow: hidden; }
    #bsub-analysis .budget-row-fill { height: 100%; border-radius: 999px; }
    #bsub-analysis .budget-row-value { font-size: 14px; font-weight: 800; min-width: 72px; text-align: right; }
    #bsub-analysis .sim-sliders-wrap { display: flex; flex-direction: column; gap: 12px; }
    #bsub-analysis .simulator-slider-group {
        display: flex; flex-direction: column; gap: 6px;
        border: 1px solid #EEF2F7; border-radius: 10px; padding: 10px; background: #fff;
    }
    #bsub-analysis .sim-total-box {
        margin-top: 12px; padding: 12px; background: #fff; border-radius: 10px; border: 1px solid #E8ECF5;
    }
    #bsub-analysis .sim-total-head {
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
    }
    #bsub-analysis .sim-total-value {
        font-size: var(--text-2xl); font-weight: 800; color: var(--color-primary);
    }
    #bsub-analysis .sim-total-progress { margin-top: var(--space-2); }
    #bsub-analysis .sim-total-foot {
        display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px;
    }
    #bsub-analysis .sim-remaining { color: var(--color-gray-500); }
    #bsub-analysis .sim-reset-btn {
        font-size: 10px; height: 24px; padding: 0 8px;
        background: transparent !important;
    }
    #bsub-analysis .sim-reset-btn:hover,
    #bsub-analysis .sim-reset-btn:focus {
        background: transparent !important;
    }
    #bsub-analysis .simulator-slider {
        width: 100%; height: 6px; outline: none; cursor: pointer;
        -webkit-appearance: none; appearance: none;
        background: #E5E7EB; border-radius: 3px;
    }
    #bsub-analysis .simulator-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px; height: 18px; border-radius: 50%;
        background: #3B44DB; cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    #bsub-analysis .simulator-slider::-moz-range-thumb {
        width: 18px; height: 18px; border-radius: 50%;
        background: #3B44DB; cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    #bsub-analysis .edu-budget-list { display: grid; gap: 10px; }
    #bsub-analysis .edu-budget-item {
        border: 1px solid #EEF2F7; border-radius: 10px; padding: 10px; position: relative;
    }
    #bsub-analysis .edu-budget-head {
        display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px;
    }
    #bsub-analysis .edu-budget-right {
        display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    }
    #bsub-analysis .edu-apply-btn {
        position: static;
        height: 26px; padding: 0 10px;
        font-size: 11px; font-weight: 700; letter-spacing: -0.1px;
        display: inline-flex; align-items: center; justify-content: center;
        line-height: 1;
        border-radius: 999px;
        background: #3B44DB; border-color: #3B44DB; color: #fff;
        box-shadow: 0 2px 6px rgba(59, 68, 219, 0.22);
    }
    #bsub-analysis .edu-apply-btn:hover {
        background: #2f36b8; border-color: #2f36b8; color: #fff;
        transform: translateY(-1px);
    }
    #bsub-analysis .progress { height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
    #bsub-analysis .progress-bar { height: 100%; border-radius: 999px; }
    #bsub-analysis .year-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
    #bsub-analysis .year-card { border: 1px solid #EEF2F7; border-radius: 10px; padding: 10px; background: #FCFCFD; }
    #bsub-analysis .fx-input-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    #bsub-analysis .fx-card-title {
        margin: 0 0 8px; font-size: 16px; font-weight: 800; color: #111;
        display: flex; align-items: center; gap: 6px;
    }
    #bsub-analysis .fx-card-title i { color: #F59E0B; font-size: 15px; }
    #bsub-analysis .fx-card-lead { margin: 0 0 14px; line-height: 1.45; }
    #bsub-analysis .fx-field { flex: 1; min-width: 0; }
    #bsub-analysis .fx-label {
        display: block; margin-bottom: 4px; color: #6B7280; font-weight: 700;
    }
    #bsub-analysis .fx-input-arrow {
        padding-top: 18px; color: #9CA3AF; display: flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
    }
    #bsub-analysis .fx-range-block { margin-top: 12px; }
    #bsub-analysis .fx-input {
        width: 100%;
        border: 1px solid #D9DFEE;
        border-radius: 10px;
        padding: 0 12px;
        height: 44px;
        font-size: 14px;
        color: #111827;
        background: #fff;
        box-sizing: border-box;
    }
    #bsub-analysis .fx-input:focus {
        outline: none;
        border-color: #3B44DB;
        box-shadow: 0 0 0 3px rgba(59, 68, 219, 0.12);
    }
    #bsub-analysis #fxRange { width: 100%; }
    #bsub-analysis .fx-result {
        text-align: center; border: 1px solid #E8ECF5; border-radius: 10px; padding: 12px; margin-bottom: 12px; background: #fff;
    }
    #bsub-analysis .fx-result .amount { font-size: 24px; font-weight: 800; color: #3B44DB; line-height: 1.2; }
    #bsub-analysis .fx-range-display {
        display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
    }
    #bsub-analysis .fx-range-item { border: 1px solid #EEF2F7; border-radius: 8px; padding: 8px; text-align: center; flex: 1; }
    #bsub-analysis .fx-val { font-size: 13px; font-weight: 700; color: #111827; }
    #bsub-analysis .fx-val-low { color: #10B981; }
    #bsub-analysis .fx-val-high { color: #EF4444; }
    #bsub-analysis .fx-presets { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    #bsub-analysis .fx-preset-btn {
        padding: 4px 12px;
        border: 1px solid #FDE68A;
        border-radius: 999px;
        background: #fff;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    #bsub-analysis .fx-preset-btn:hover { background: #FEF3C7; border-color: #F59E0B; }
    @media (max-width: 1100px) {
        #bsub-analysis .dash-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 820px) {
        #bsub-analysis .dash-row-2col { grid-template-columns: 1fr !important; }
        #bsub-analysis .year-summary-grid { grid-template-columns: 1fr; }
        #bsub-analysis .fx-range-display { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
        #bsub-analysis .dash-stat-grid { grid-template-columns: 1fr; }
    }

    /* 학교 벤치마킹 (#bsub-benchmark) */
    #bsub-benchmark { width: 100%; }
    #bsub-benchmark > * + * { margin-top: 24px; }
    #bsub-benchmark .bm-overview-grid {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
    }
    #bsub-benchmark .bm-stat-card {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 14px 14px 12px;
        display: grid; gap: 6px; min-height: 120px;
    }
    #bsub-benchmark .bm-stat-icon {
        width: 36px; height: 36px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 15px;
        background: #F3F4F6;
        color: var(--bm-color, #3B44DB);
    }
    #bsub-benchmark .bm-stat-value {
        font-size: 22px; font-weight: 800; color: #111827; line-height: 1.15; letter-spacing: -0.02em;
    }
    #bsub-benchmark .bm-stat-label { font-size: 12px; font-weight: 600; color: #6B7280; }
    #bsub-benchmark .bm-stat-trend { font-size: 12px; font-weight: 700; margin-top: auto; }
    #bsub-benchmark .bm-stat-trend.up { color: #059669; }
    #bsub-benchmark .bm-stat-trend.neutral { color: #6B7280; }
    #bsub-benchmark .dash-row-2col {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px;
    }
    #bsub-benchmark .dash-panel {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 20px;
    }
    #bsub-benchmark .dash-panel-header {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
    }
    #bsub-benchmark .dash-panel-header h4 { margin: 0; font-size: 16px; font-weight: 800; color: #111; }
    #bsub-benchmark .bm-filter-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
    #bsub-benchmark .bm-filter-row .select-sm {
        min-width: 116px;
        height: 34px;
        padding: 0 30px 0 10px;
        border: 1px solid #D9DFEE;
        border-radius: 8px;
        background-color: #fff;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        appearance: none;
        -webkit-appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, #9CA3AF 50%), linear-gradient(135deg, #9CA3AF 50%, transparent 50%);
        background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        box-sizing: border-box;
        cursor: pointer;
    }
    #bsub-benchmark .bm-filter-row .select-sm:focus {
        outline: none;
        border-color: #3B44DB;
        box-shadow: 0 0 0 3px rgba(59, 68, 219, 0.12);
    }
    .badge {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 4px 12px; border-radius: 999px; font-weight: 700; line-height: 1.4;
    }
    .badge-success {
        background: var(--color-success-bg);
        color: var(--color-success);
    }
    .badge-warning {
        background: var(--color-warning-bg);
        color: var(--color-warning);
    }
    .badge-error {
        background: var(--color-error-bg);
        color: var(--color-error);
    }
    .badge-info {
        background: var(--color-info-bg);
        color: var(--color-info);
    }
    #bsub-benchmark .bm-table-wrap { width: 100%; overflow-x: auto; }
    #bsub-benchmark .data-table { width: 100%; border-collapse: collapse; }
    #bsub-benchmark .data-table th,
    #bsub-benchmark .data-table td {
        padding: 10px 14px;
        text-align: left;
        font-size: var(--text-sm);
        border-bottom: 1px solid var(--color-gray-100);
        white-space: nowrap;
    }
    #bsub-benchmark .data-table th {
        background: var(--color-gray-50);
        font-weight: 600;
        color: var(--color-gray-500);
        font-size: var(--text-xs);
        text-transform: uppercase;
    }
    #bsub-benchmark .data-table tbody tr { transition: background 0.15s; }
    #bsub-benchmark .data-table tbody tr:hover { background: var(--color-gray-50); }
    #bsub-benchmark .bm-best-practices h4 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #111; }
    #bsub-benchmark .bm-insight-grid {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    }
    #bsub-benchmark .bm-insight-card {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 20px;
    }
    #bsub-benchmark .bm-insight-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    #bsub-benchmark .bm-insight-header .text-sm {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
    }
    #bsub-benchmark .bm-insight-card .text-sm { font-size: 14px; }
    #bsub-benchmark .bm-insight-header .text-xs.text-muted {
        display: inline-block;
        margin-top: 2px;
        font-size: 12px;
        color: #6B7280;
    }
    #bsub-benchmark .bm-insight-rank {
        width: 36px; height: 36px; border-radius: 999px; color: #fff;
        display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
        flex: 0 0 36px;
    }
    #bsub-benchmark .bm-insight-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    #bsub-benchmark .bm-insight-tool-tag {
        display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
        font-size: 11px; font-weight: 600; background: #F3F4F6; color: #374151;
    }
    @media (max-width: 1100px) {
        #bsub-benchmark .bm-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #bsub-benchmark .bm-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
        #bsub-benchmark .bm-overview-grid { grid-template-columns: 1fr; }
        #bsub-benchmark .dash-row-2col { grid-template-columns: 1fr !important; }
        #bsub-benchmark .bm-insight-grid { grid-template-columns: 1fr; }
    }

    /* 구독관리 요약 카드 */
    .sub-summary-row {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    }
    #aihubTabPanel-subscription .aihub-tab-panel__body > .submgt-mb { margin-top: 0 !important; }
    .sub-summary-card {
        border: 1px solid #E8ECF5; border-radius: 14px; background: #fff; padding: 18px 20px;
        display: flex; align-items: center; gap: 14px;
    }
    .sub-summary-icon {
        width: 44px; height: 44px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 44px;
    }
    .sub-summary-card .text-xs { font-size: 14px; line-height: 1.35; color: #6B7280; }
    .sub-summary-card .sub-summary-value.text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 800;
        color: #0F172A;
        margin: 2px 0 3px;
    }
    .sub-dash-row-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
    .sub-dash-panel {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 20px;
    }
    .sub-dash-panel .dash-panel-header { margin-bottom: 10px; }
    .sub-dash-panel .dash-panel-header h4 { margin: 0; font-size: 16px; font-weight: 800; color: #111; }
    .sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .sub-tab {
        border: 1px solid #E5E7EB; background: #fff; color: #374151;
        border-radius: 12px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
    }
    .sub-tab.active { background: #3B44DB; border-color: #3B44DB; color: #fff; }
    .sub-tab-count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; border-radius: 999px; margin-left: 6px;
        font-size: 11px; font-weight: 800; background: rgba(255,255,255,0.22); color: inherit;
    }
    .sub-tab:not(.active) .sub-tab-count { background: #EEF2FF; color: #3B44DB; }
    .sub-status-panel {
        border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 20px;
    }
    .sub-status-panel .dash-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .sub-status-panel .dash-panel-header h4 { margin: 0; font-size: 16px; font-weight: 800; }
    .sub-status-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
    .sub-status-actions .btn {
        border-radius: 12px;
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 700;
    }
    .sub-status-actions .btn-ghost,
    .sub-status-actions .btn-secondary {
        background: #fff;
        border: 1px solid #E5E7EB;
        color: #374151;
    }
    .sub-status-actions .btn-ghost:hover,
    .sub-status-actions .btn-secondary:hover {
        background: #F9FAFB;
        border-color: #D1D5DB;
        color: #111827;
    }
    .sub-status-actions .btn-primary {
        background: #3B44DB;
        border-color: #3B44DB;
        color: #fff;
    }
    .sub-status-actions .btn-primary:hover {
        background: #2f36b8;
        border-color: #2f36b8;
        color: #fff;
    }
    .sub-row {
        display: grid; grid-template-columns: 1.6fr 1.6fr .8fr .9fr .9fr .6fr;
        gap: 12px; align-items: center; padding: 12px 10px; border-bottom: 1px solid #EEF2F7;
    }
    .sub-header-row { font-size: 12px; color: #6B7280; font-weight: 700; background: #F9FAFB; border-radius: 10px; border-bottom: none; }
    .sub-total-row { background: #F8FAFF; border-radius: 10px; border-bottom: none; margin-top: 8px; font-weight: 700; }
    .sub-total-row > div:first-child { font-size: 14px; }
    .sub-service { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .sub-status-panel .text-sm { font-size: 14px; }
    .sub-service-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
    .sub-usage-gauge { margin-top: 4px; height: 6px; border-radius: 999px; background: #E5E7EB; overflow: hidden; }
    .sub-usage-fill { height: 100%; border-radius: 999px; }
    .sub-row > div:nth-child(2) .text-sm { display: inline-block; margin-bottom: 6px; }
    .sub-row > div:nth-child(2) .sub-usage-gauge { margin: 0 0 6px; }
    .sub-row > div:nth-child(2) .text-xs { display: inline-block; margin-top: 2px; }
    .action-dropdown { position: relative; }
    .action-dropdown .btn-ghost {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .action-dropdown .btn-ghost:hover,
    .action-dropdown .btn-ghost:focus {
        background: transparent !important;
        border-color: transparent !important;
    }
    .action-menu {
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
        min-width: 140px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        padding: 6px; display: none;
    }
    .action-menu.show { display: block; }
    .action-menu-item {
        width: 100%; border: none; background: transparent; text-align: left; cursor: pointer;
        display: flex; gap: 6px; align-items: center; border-radius: 8px; padding: 7px 8px; font-size: 12px; color: #374151;
    }
    .action-menu-item:hover { background: #F3F4F6; }
    .action-menu-item.danger { color: #DC2626; }
    .sub-opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .sub-opt-panel { border: 1px solid #E8ECF5; border-radius: 12px; background: #fff; padding: 20px; }
    .sub-opt-panel .dash-panel-header h4 { margin: 0 0 16px; font-size: 14px; font-weight: 800; color: #111827; }
    .license-opt-list { display: grid; gap: 10px; }
    .license-opt-item {
        border: 1px solid #EEF2F7; border-radius: 12px; padding: 14px 12px;
        display: flex; align-items: center; gap: 10px;
    }
    .opt-icon {
        width: 36px; height: 36px; border-radius: 9px;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
    }
    .opt-saving { text-align: right; min-width: 86px; }
    .license-opt-item .text-sm.font-semibold {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }
    .license-opt-item .text-xs.text-muted {
        font-size: 12px;
        color: #6B7280;
        line-height: 1.4;
    }
    .opt-saving .text-xs.text-muted {
        font-size: 12px;
        font-weight: 500;
        color: #6B7280;
    }
    .opt-saving .text-sm.font-semibold {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }
    .renewal-timeline-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; }
    .timeline-card {
        width: 100%; min-width: 0; border: 1px solid #E8ECF5; border-top: 3px solid #10B981;
        border-radius: 10px; padding: 12px; background: #fff;
    }
    .timeline-card .text-sm { font-size: 14px; }
    .at-inline-budget {
        background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
        border: 1px solid rgba(124, 58, 237, 0.15);
        border-radius: 16px;
        padding: var(--space-5);
        margin-top: var(--space-6);
    }
    .at-inline-budget__header {
        display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .at-inline-budget__header h4 { margin: 0; font-size: 15px; font-weight: 800; color: #111827; display: flex; align-items: center; gap: 6px; }
    .at-inline-budget__total { font-size: 20px; font-weight: 800; color: var(--color-primary); }
    .at-inline-budget__bar { height: 10px; border-radius: 999px; background: #fff; overflow: hidden; }
    .at-inline-budget__fill { height: 100%; border-radius: 999px; }
    .at-inline-budget__info {
        display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
    }
    .at-inline-budget__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
    .at-inline-budget__actions .btn {
        border-radius: 12px;
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 700;
    }
    .at-inline-budget__actions .btn-primary {
        background: #3B44DB;
        border-color: #3B44DB;
        color: #fff;
    }
    .at-inline-budget__actions .btn-primary:hover {
        background: #2f36b8;
        border-color: #2f36b8;
        color: #fff;
    }
    .at-inline-budget__actions .btn-ghost {
        background: #fff;
        border: 1px solid #E5E7EB;
        color: #374151;
    }
    .at-inline-budget__actions .btn-ghost:hover {
        background: #F9FAFB;
        border-color: #D1D5DB;
        color: #111827;
    }
    .at-dup-alert {
        border: 1px solid #FCD34D;
        background: linear-gradient(180deg, #FFFBEB 0%, #FFF7ED 100%);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        gap: 12px;
    }
    .at-dup-alert__header { display: flex; align-items: flex-start; gap: 12px; }
    .at-dup-alert__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #FEF3C7;
        color: #D97706;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .at-dup-alert__title { flex: 1; min-width: 0; }
    .at-dup-alert__title h5 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; }
    .at-dup-alert__title p { margin: 4px 0 0; font-size: 13px; color: #6B7280; }
    .at-dup-alert__close {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #9CA3AF;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .at-dup-alert__close:hover { background: #F3F4F6; color: #374151; }
    .at-dup-alert__body {
        display: grid;
        grid-template-columns: minmax(320px, 1fr) auto;
        gap: 32px;
        align-items: center;
    }
    .at-dup-compare {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
        align-items: center;
        max-width: 380px;
    }
    .at-dup-tool {
        background: #fff;
        border: 1px solid #FDE68A;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 700;
        color: #1F2937;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
    }
    .at-dup-overlap { font-size: 12px; font-weight: 700; color: #92400E; text-align: center; line-height: 1.2; }
    .at-dup-overlap span { display: block; font-size: 18px; color: #B45309; }
    .at-dup-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }
    .at-dup-saving { margin-right: 8px; display: inline-flex; flex-direction: column; gap: 2px; }
    .at-dup-saving__label { font-size: 11px; color: #6B7280; }
    .at-dup-saving__val { font-size: 14px; font-weight: 800; color: #047857; }
    @media (max-width: 1100px) {
        .sub-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sub-row { grid-template-columns: 1fr 1fr; }
        .sub-header-row { display: none; }
    }
    @media (max-width: 640px) {
        .sub-summary-row { grid-template-columns: 1fr; }
        .sub-dash-row-2col { grid-template-columns: 1fr; }
        .sub-opt-grid { grid-template-columns: 1fr; }
        .renewal-timeline-scroll { grid-template-columns: 1fr; }
        .at-dup-alert__body { grid-template-columns: 1fr; }
        .at-dup-actions { justify-content: flex-start; }
    }

    @media (max-width: 640px) {
        /* 예산/구독 하위 탭: 좁은 화면에서도 2열 유지 (예: 3개→2+1, 6개→3행) */
        .budget-sub-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .budget-sub-tab {
            width: 100%;
            min-width: 0;
        }
    }
    .aihub-tab-panel__body { padding: 48px 0; }
    .aihub-has-tabs .aihub-tab-panel__body > .top10_sec:first-child { margin-top: 30px; }
    .aihub-has-tabs .aihub-tab-panel__body > .category_sec:first-child { margin-top: 16px; }
    .aihub-hero-banner-image { margin-top: 24px; width: 100%; border-radius: 20px; overflow: hidden; }
    .aihub-hero-banner-image img { width: 100%; height: auto; vertical-align: top; display: block; }
    /* 720px 초과: 데스크톱에서는 모바일 전용 타이틀 숨김 */
    .aihub-mobile-page-head { display: none; }
    .mo_br { display: none; }

    /* 검색창 (필터 패널 / 기타) */
    .filter_search_wrap { display: inline-flex; align-items: center; height: 40px; border: 1px solid #E0E0E0; border-radius: 8px; background: #fff; padding: 0 12px 0 16px; min-width: 200px; }
    .filter_search_wrap:focus-within { border-color: #6f42c1; }
    .filter_search_input { border: none; outline: none; font-size: 14px; background: transparent; flex: 1; min-width: 0; }
    .filter_search_btn { background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer; display: flex; align-items: center; }
    .filter_search_btn--lead { margin-left: 0; margin-right: 8px; flex-shrink: 0; }
    .filter_search_btn .search_icon_img { width: 18px; height: 18px; opacity: 0.6; }
    .search_box { position: relative; width: 500px; height: 56px; border: 1px solid #E0E0E0; border-radius: 8px; background: #fff; display: flex; align-items: center; padding: 0 15px 0 20px; transition: border-color 0.3s; }
    .search_box:focus-within { border-color: #000; }
    .search_box input { width: 100%; border: none; outline: none; font-size: 16px; background: transparent; flex: 1; }
    .search_icon_btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .search_icon_img { width: 24px; height: 24px; object-fit: contain; opacity: 0.6; }
    .subs_btn { display: flex; align-items: center; gap: 10px; background: #222; color: #fff; padding: 0 25px; height: 56px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.3s; }
    .subs_btn:hover { background: #333; }
    .subs_icon_img { width: 20px; height: 20px; object-fit: contain; }

    /* Agent Title */
    .agent_title_sec { text-align: center; margin-bottom: 60px; }
    .agent_tit { font-size: 32px; font-weight: 800; color: #000; margin-bottom: 10px; }
    .agent_sub { font-size: 16px; color: #666; font-weight: 500; }

    .sec_head { font-size: 20px; font-weight: 800; color: #000; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; padding-bottom: 15px; }

    /* Categories + 필터 패널 (통합) */
    .category_sec { margin-bottom: 56px; }
    .category_sec > .sec_head { margin-bottom: 16px; padding-bottom: 0; border-bottom: none; }
    .cate_filter_panel {
        background: #FDFCFF;
        border: 1px solid #DDD6FE;
        border-radius: 16px;
        padding: 20px 22px 22px;
        box-sizing: border-box;
    }
    .cate_filter_row1 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px 14px;
    }
    .cate_filter_search {
        flex: 1 1 260px;
        min-width: 0;
        max-width: 100%;
        height: 46px;
        border-radius: 12px;
        padding: 0 14px 0 12px;
        border: 1px solid #E5E7EB;
        box-sizing: border-box;
        background: #fff;
    }
    .cate_filter_panel .filter_reset {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 46px;
        padding: 0 12px;
        border: none;
        border-radius: 10px;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: #64748B;
        cursor: pointer;
        font-family: inherit;
    }
    .cate_filter_panel .filter_reset:hover { color: #1E293B; background: #F8FAFC; }
    .cate_filter_panel .filter_reset i { font-size: 15px; opacity: 0.85; }
    .cate_filter_selects {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        margin-left: auto;
        flex-shrink: 0;
        position: relative;
    }
    .cate_filter_hidden_selects {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    /* 정렬: 세련된 버튼형 트리거 + 커스텀 옵션 패널 */
    .cate_sort_dd {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .cate_sort_dd__native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0;
        pointer-events: none;
    }
    .cate_sort_dd__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 132px;
        height: 46px;
        padding: 0 12px 0 16px;
        margin: 0;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        font-size: 14px;
        font-weight: 700;
        color: #0F172A;
        letter-spacing: -0.02em;
        cursor: pointer;
        font-family: inherit;
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
        box-sizing: border-box;
    }
    .cate_sort_dd__trigger:hover {
        border-color: #C7D2FE;
        background: linear-gradient(180deg, #fff 0%, #F5F3FF 100%);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(199, 210, 254, 0.5) inset;
    }
    .cate_sort_dd__trigger:focus {
        outline: none;
        border-color: #818CF8;
        box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.35), 0 4px 14px rgba(99, 102, 241, 0.1);
    }
    .cate_sort_dd.is-open .cate_sort_dd__trigger {
        border-color: #818CF8;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25), 0 8px 24px rgba(15, 23, 42, 0.08);
    }
    .cate_sort_dd__trigger-text { flex: 1 1 auto; text-align: left; min-width: 0; }
    .cate_sort_dd__chev {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #F1F5F9;
        color: #475569;
        font-size: 14px;
        line-height: 1;
        transition: transform 0.22s ease, background 0.2s, color 0.2s;
    }
    .cate_sort_dd__trigger:hover .cate_sort_dd__chev {
        background: #EEF2FF;
        color: #4338CA;
    }
    .cate_sort_dd.is-open .cate_sort_dd__chev {
        transform: rotate(180deg);
        background: #EEF2FF;
        color: #4338CA;
    }
    .cate_sort_dd__panel {
        position: absolute;
        z-index: 300;
        right: 0;
        top: calc(100% + 8px);
        min-width: 100%;
        width: max-content;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 14px;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(99, 102, 241, 0.06);
        box-sizing: border-box;
    }
    .cate_sort_dd__panel[hidden] { display: none !important; }
    .cate_sort_dd__opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 12px 11px 14px;
        margin: 0;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        list-style: none;
    }
    .cate_sort_dd__opt:hover {
        background: #F5F3FF;
        color: #312E81;
    }
    .cate_sort_dd__opt.is-selected {
        background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
        color: #3730A3;
    }
    .cate_sort_dd__check {
        flex-shrink: 0;
        font-size: 13px;
        color: #6366F1;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.15s, transform 0.15s;
    }
    .cate_sort_dd__opt.is-selected .cate_sort_dd__check {
        opacity: 1;
        transform: scale(1);
    }
    .cate_chip_block { margin-top: 18px; }
    .cate_chip_row--total { margin-top: 0; margin-bottom: 14px; }
    .cate_chip_group_row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 14px;
        margin-top: 12px;
    }
    .cate_chip_group_row:first-of-type { margin-top: 0; }
    .cate_chip_row_label {
        flex: 0 0 auto;
        min-width: 72px;
        padding-top: 7px;
        font-size: 12px;
        font-weight: 600;
        color: #94A3B8;
        letter-spacing: -0.01em;
    }
    .cate_chip_row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
        padding-top: 0;
        margin-top: 0;
    }
    #cateChipBlock .cate_chip_row--total { flex: 0 0 auto; width: 100%; }
    .cate_chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px 7px 10px;
        border-radius: 999px;
        border: 1px solid #E5E7EB;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #0F172A;
        cursor: pointer;
        font-family: inherit;
        line-height: 1.25;
        transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
    }
    .cate_chip:hover { border-color: #CBD5E1; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
    .cate_chip.is-active:not(.cate_chip--total) {
        background: #fff;
        border-color: #3B44DB;
        color: #0F172A;
        box-shadow: 0 0 0 1px rgba(59, 68, 219, 0.35);
    }
    .cate_chip--total {
        border: 1px solid #0F172A;
        background: #0F172A;
        color: #fff;
        padding: 8px 14px 8px 12px;
        font-weight: 700;
    }
    .cate_chip--total:hover {
        border-color: #1E293B;
        background: #1E293B;
        color: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    }
    .cate_chip--total:not(.is-active) {
        background: #fff;
        border: 1px solid #E2E8F0;
        color: #0F172A;
        box-shadow: none;
    }
    .cate_chip--total:not(.is-active):hover {
        border-color: #CBD5E1;
        background: #F8FAFC;
        color: #0F172A;
    }
    .cate_chip--total .cate_chip__icon { color: #fff !important; }
    .cate_chip--total:not(.is-active) .cate_chip__icon { color: #64748B !important; }
    .cate_chip .cate_chip__icon {
        font-size: 14px;
        width: 1.1em;
        line-height: 1;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .cate_chip.is-active:not(.cate_chip--total) .cate_chip__icon { color: inherit; }
    .cate_chip__label { text-align: left; }
    .at-cat-chip__count {
        display: inline;
        margin-left: 2px;
        padding: 0;
        min-width: 0;
        height: auto;
        border-radius: 0;
        background: transparent !important;
        font-size: 13px;
        font-weight: 600;
        color: #94A3B8;
        line-height: inherit;
        box-sizing: border-box;
    }
    .cate_chip--total .at-cat-chip__count { color: rgba(255, 255, 255, 0.88); }
    .cate_chip--total:not(.is-active) .at-cat-chip__count { color: #94A3B8; }
    .cate_chip.is-active:not(.cate_chip--total) .at-cat-chip__count { color: #94A3B8; }

    /* 코스웨어 탭: 에듀테크형 필터 + 시안(행 구분·라벨) */
    #cwChipBlock .cate_chip_row--total { flex: 0 0 auto; width: 100%; }
    .category_sec--courseware { margin-bottom: 40px; }
    .category_sec--courseware .cate_filter_panel--courseware {
        background: #fff;
        border: 1px solid #E5E7EB;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .category_sec--courseware .cate_filter_row1--courseware {
        margin-bottom: 4px;
    }
    .category_sec--courseware #cwChipBlock .cate_chip_group_row + .cate_chip_group_row {
        border-top: 1px solid #E8EAED;
        margin-top: 14px;
        padding-top: 14px;
    }
    .category_sec--courseware .cate_chip_row_label--cw {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 100px;
        padding-top: 6px;
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        letter-spacing: -0.02em;
    }
    .category_sec--courseware .cate_chip_row_label__ic {
        font-size: 15px;
        width: 1.15em;
        text-align: center;
    }

    .cate_grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
    .cate_box { border-radius: 16px; padding: 24px 20px; height: 140px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform 0.2s; box-sizing: border-box; }
    .cate_box:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    .cate_top { display: flex; justify-content: space-between; align-items: start; }
    .cate_num { font-size: 22px; font-weight: 800; color: #000; }
    .cate_icon { width: 28px; height: 28px; object-fit: contain; }
    .cate_btm { text-align: left; }
    .cate_tit { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 4px; display: block;}
    .cate_sub { font-size: 12px; color: #666; font-weight: 400; }
    .c_mint { background: #F0FBFB; } .c_yellow { background: #FFFDE7; }
    .c_pink { background: #FFF0F5; } .c_blue { background: #F0F4FF; }
    .c_green { background: #F1F8F3; } .c_orange { background: #FFF8E1; }
    .c_purple { background: #F3E5F5; } 

    /* Top 10 — 시안: 제목 좌측, 화살표 우측 상단 */
    .top10_sec { margin-bottom: 100px; position: relative; }
    .top10_sec__head {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        margin-bottom: 10px;
    }
    .top10_sec__head .sec_head { margin-bottom: 0; }
    .top10_sec--grid { margin-bottom: 56px; }
    .top10_sec--grid .top10_sec__head { margin-bottom: 12px; }
    .top10_sec__title { font-size: 20px; font-weight: 800; color: #000; margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
    /* TOP10: 한 줄 가로 스크롤 + 상단 화살표로 이동 */
    .top10_scroll {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE, 구 Edge */
        margin: 0 -2px;
        padding: 0 2px;
    }
    .top10_scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .top10_track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
        width: max-content;
        padding: 2px 2px 10px;
        box-sizing: border-box;
    }
    .top10_track > .top10_card.top10_card--compact.top10_card--tier {
        flex: 0 0 auto;
        width: 200px;
        max-width: 200px;
        box-sizing: border-box;
    }
    @media (max-width: 520px) {
        .top10_track > .top10_card.top10_card--compact.top10_card--tier {
            width: 168px;
            max-width: 168px;
        }
        .top10_track { gap: 12px; }
    }
    /* TOP10 컴팩트 카드 — 순위·헤더 톤·제목·회사·평점/가격 (시안형) */
    .top10_card--compact.top10_card--tier {
        position: relative;
        border-radius: 16px;
        border: 1px solid #E6E3EF;
        background: #fff;
        box-shadow: 0 2px 10px rgba(45, 40, 75, 0.07);
        cursor: pointer;
        outline: none;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .top10_card--compact.top10_card--tier:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(45, 40, 75, 0.12);
    }
    .top10_card--compact.top10_card--tier:focus-visible {
        box-shadow: 0 0 0 2px #3B44DB, 0 2px 10px rgba(45, 40, 75, 0.07);
    }
    .top10_card--compact .badge_hot {
        display: none !important;
    }
    .top10_card__rank {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        padding: 4px 9px 3px;
        border-radius: 8px;
        background: #FFF3C4;
        color: #3D2914;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    /* Top10 순위 뱃지: 1위 기본(#FFF3C4), 2위 #F1F5F9, 3위 #FFF7ED, 4~10위 #F5F3FF */
    .top10_track > .top10_card:nth-child(2) .top10_card__rank {
        background: #F1F5F9;
    }
    .top10_track > .top10_card:nth-child(3) .top10_card__rank {
        background: #FFF7ED;
    }
    .top10_track > .top10_card:nth-child(n+4) .top10_card__rank {
        background: #F5F3FF;
    }
    .top10_card--compact .card_header.card_header--top10 {
        position: relative;
        height: 125px;
        min-height: 125px;
        padding: 0;
        overflow: hidden;
        background: #EDEAF6;
        border-bottom: 1px solid #E2DEEF;
    }
    .top10_card__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top10_card--compact .card_header--top10 .card_logo_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .top10_card--compact .card_header--top10 .placeholder_art {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: 800;
        padding: 12px 10px;
        line-height: 1.25;
    }
    .top10_card--compact .card_body.card_body--top10 {
        padding: 12px 14px 14px;
        background: #fff;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        text-align: left;
    }
    .top10_card--compact .top10_card__tit {
        font-size: 14px;
        font-weight: 800;
        margin: 0 0 4px;
        line-height: 1.35;
        color: #111;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
        letter-spacing: -0.03em;
    }
    .top10_card--compact .top10_card__brand {
        font-size: 12px;
        font-weight: 500;
        color: #888;
        margin: 0 0 10px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 1.3em;
    }
    .top10_card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
        padding-top: 2px;
    }
    .top10_card__rate {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        font-weight: 800;
        color: #E89800;
        flex-shrink: 0;
    }
    .top10_card__star {
        font-size: 12px;
        color: #F5A524;
    }
    .top10_card__fee {
        font-size: 13px;
        font-weight: 800;
        color: #0D9488;
        text-align: right;
        flex-shrink: 0;
        max-width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .top10_nav_btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .top10_nav_btn {
        width: 30px; height: 30px; padding: 0; border: 1px solid #E0E0E0; border-radius: 10px;
        background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
        transition: background 0.2s, border-color 0.2s; box-sizing: border-box;
    }
    .top10_nav_btn:hover { background: #F5F5F5; border-color: #ccc; }
    .top10_nav_btn::after {
        content: ''; display: block; width: 8px; height: 8px;
        border-top: 2px solid #333; border-right: 2px solid #333;
    }
    .top10_nav_prev::after { transform: rotate(-135deg); margin-left: 3px; }
    .top10_nav_next::after { transform: rotate(45deg); margin-right: 3px; }
    .top10_card { width: 100%; background: #fff; border: 1px solid #eee; border-radius: 16px; overflow: hidden; transition: transform 0.3s; display: flex; flex-direction: column; }
    .top10_card:hover:not(.top10_card--compact) { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .top10_card .card_header { flex-shrink: 0; }
    .card_header { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background-color: #f0f0f0; }
    .top10_card__head-link {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        color: inherit;
    }
    .top10_card__head-link:focus-visible {
        outline: 2px solid #3B44DB;
        outline-offset: -2px;
    }
    .card_header .img_alt { display: none; font-size: 24px; color: #555; font-weight: 700; padding: 20px; text-align: center; line-height: 1.2; }
    .card_logo_img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .badge_hot { position: absolute; top: 15px; right: 15px; z-index: 1; background: #D32F2F; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
    .card_body { padding: 20px; text-align: left; }
    .top10_card .card_body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .tag_row { display: flex; gap: 5px; margin-bottom: 10px; }
    .top10_card .tag_row { flex-shrink: 0; }
    .c_tag { font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 4px; }
    .tag_blue { background: #E3F2FD; color: #1565C0; }
    .tag_green { background: #E8F5E9; color: #2E7D32; }
    .c_title { font-size: 18px; font-weight: 800; color: #000; margin-bottom: 6px; display: block; text-decoration: none; }
    a.c_title:hover { color: #051C95; }
    /* TOP10: 제목 2줄 고정 + 말줄임, 카드 하단(버튼) 라인 맞춤 */
    .top10_card .c_title {
        line-height: 1.35;
        min-height: calc(1.35em * 2);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
    }
    .c_desc { font-size: 13px; color: #555; line-height: 1.4; height: 36px; overflow: hidden; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .top10_card .c_desc { flex-shrink: 0; }
    .c_rating { display: flex; align-items: center; font-size: 14px; color: #333; margin-bottom: 12px; font-weight: 600; }
    .top10_card .c_rating { flex-shrink: 0; flex-wrap: wrap; gap: 4px 0; }
    .star_icon { color: #FFB400; font-size: 15px; letter-spacing: -1px; margin-right: 6px; }
    .use_cnt { color: #666; font-weight: 400; font-size: 13px; margin-left: 6px; }
    .c_price_row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 15px; }
    .top10_card .c_price_row { flex-shrink: 0; margin-bottom: 0; }
    .price_main { font-size: 20px; font-weight: 800; color: #051C95; }
    .price_sub { font-size: 12px; color: #666; }
    .c_btn_row { display: flex; gap: 5px; }
    .top10_card .c_btn_row { margin-top: auto; padding-top: 15px; }
    .btn_sub { width: 100%; height: 48px; background: #051C95; color: #fff; font-size: 15px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; }
    .top10_card .c_btn_row .btn_sub,
    .pop_card .c_btn_row .btn_sub { flex: 1; min-width: 0; width: auto; }
    .btn_wish_aihub {
        width: 48px; height: 48px; flex-shrink: 0; box-sizing: border-box;
        border: 1px solid #E0E0E0; border-radius: 8px; background: #fff;
        cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
        color: #9CA3AF; font-size: 18px; line-height: 1; padding: 0; font-family: inherit;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .btn_wish_aihub:hover { border-color: #ccc; color: #E53935; }
    .btn_wish_aihub.is-wished { color: #E53935; border-color: #FECACA; background: #FFF5F5; }
    .btn_info { width: 50px; height: 48px; background: #F5F5F5; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; font-size: 20px; font-weight: 900; line-height: 1; font-family: sans-serif; padding: 0; transition: background 0.2s, color 0.2s; }
    .btn_info:hover { background: #E0E0E0; color: #666; }

    /* Popular Section */
    .popular_sec { margin-top: 0; margin-bottom: 80px; }
    .filter_wrap { display: flex; flex-direction: column; gap: 0; align-items: stretch; width: 100%; }
    .custom_select { position: relative; display: inline-block; }
    .custom_select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 8px 32px 8px 16px; border: 1px solid #E0E0E0; border-radius: 8px; background-color: #fff; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; height: 40px; min-width: 80px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; transition: border-color 0.2s; font-family: inherit; }
    .custom_select select:hover, .custom_select select:focus { border-color: #aaa; outline: none; }
    .filter_reset { padding: 0 12px; font-size: 14px; color: #666; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 40px; font-weight: 500; }
    .filter_reset:hover { color: #333; }
    .filter_reset i { font-size: 12px; }
    .result_count_row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 30px; margin-top: 10px; flex-wrap: wrap; }
    .result_count {font-size: 15px; color: #374151;}
    .btn_view_all { display: inline-flex; align-items: center; padding: 10px 20px; background: #222; color: #fff; font-size: 15px; border-radius: 24px; text-decoration: none; transition: background 0.3s; }
    .btn_view_all:hover { background: #333; color: #fff; }
    .pop_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        overflow: visible;
        padding-bottom: 22px;
        box-sizing: border-box;
    }
    /* overflow:visible — 호버 box-shadow·translateY 가 부모에 잘리지 않음. 모서리는 자식에서만 클립 */
    .pop_card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 16px;
        overflow: visible;
        transition: transform 0.3s, box-shadow 0.3s;
        display: flex;
        flex-direction: column;
    }
    .pop_card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .pop_img_box {
        height: 220px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #f9f9f9;
        border-radius: 16px 16px 0 0;
    }
    .pop_img_box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
    .pop_card:hover .pop_img_box img { transform: scale(1.05); }
    .img_alt { font-size: 14px; color: #555; font-weight: 500; }
    .pop_info_box {
        padding: 24px;
        border-top: 1px solid #f0f0f0;
        background: #fff;
        flex: 1;
        display: flex;
        flex-direction: column;
        border-radius: 0 0 16px 16px;
        overflow: hidden;
    }
    .tags_row { display: flex; gap: 6px; margin-bottom: 12px; }
    .tag_lime { background: #F1F8E9; color: #33691E; } 
    .tag_mint { background: #E0F2F1; color: #00695C; }
    .tag_purple { background: #F3E5F5; color: #7B1FA2; }
    .tag_orange { background: #FFF8E1; color: #BF360C; }
    .card_tit { font-size: 20px; font-weight: 800; color: #000; margin-bottom: 10px; display: block; letter-spacing: -0.5px; }
    .card_desc { font-size: 14px; color: #555; line-height: 1.6; height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 15px; }
    .price_tag { font-size: 22px; font-weight: 800; color: #051C95; margin-bottom: 20px; margin-top: auto; }
    .btn_share { width: 48px; height: 48px; border: 1px solid #E0E0E0; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; font-size: 18px; text-decoration: none; }
    .btn_share:hover { background: #E0E0E0; color: #555; }
    .btn_share i { font-style: normal; } 
    /* 파스텔·밝은 배경 placeholder_colors 대비 WCAG AA — 흰색 글자는 연한 배경에서 실패 */
    /* 글자색은 배경별 WCAG 대비용 인라인 color (contrast.inc.php) */
    .placeholder_art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-weight: 700; font-size: 18px; word-break: keep-all; box-sizing: border-box; }

    /* AI Hub — 상품 상세 모달 */
    .aihub-item-modal {
        position: fixed;
        inset: 0;
        z-index: 920;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px 14px;
        box-sizing: border-box;
    }
    .aihub-item-modal.is-open { display: flex; }
    .aihub-item-modal__overlay {
        position: absolute;
        inset: 0;
        background: rgba(17, 17, 17, 0.48);
        cursor: pointer;
    }
    .aihub-item-modal__panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 520px;
        max-height: min(90vh, 680px);
        overflow: auto;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
        padding: 22px 20px 20px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    .aihub-item-modal__close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border: none;
        border-radius: 10px;
        background: #f3f4f6;
        color: #374151;
        font-size: 20px;
        /* × 문자는 글꼴 ascender 때문에 flex만으로는 위아래가 어색할 수 있어 line-height=높이로 광학 중앙에 맞춤 */
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        padding: 0;
        margin: 0;
        overflow: hidden;
        -webkit-appearance: none;
        appearance: none;
        font-family: inherit;
        transition: background 0.2s, color 0.2s;
    }
    .aihub-item-modal__close:hover { background: #e5e7eb; color: #111; }
    .aihub-item-modal__thumb-wrap {
        border-radius: 12px;
        overflow: hidden;
        background: #f0f0f0;
        margin: 0 0 16px;
        min-height: 160px;
        max-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .aihub-item-modal__img {
        width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: cover;
        object-position: center;
        display: block;
        vertical-align: top;
    }
    .aihub-item-modal__img[hidden] { display: none !important; }
    .aihub-item-modal__placeholder {
        display: none;
        width: 100%;
        min-height: 160px;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        text-align: center;
        font-weight: 800;
        font-size: 18px;
        line-height: 1.35;
        word-break: keep-all;
        box-sizing: border-box;
    }
    .aihub-item-modal__placeholder.is-visible { display: flex; }
    .aihub-item-modal__title {
        margin: 0 0 10px;
        padding-right: 44px;
        font-size: 1.25rem;
        font-weight: 800;
        color: #111;
        line-height: 1.35;
        letter-spacing: -0.03em;
    }
    .aihub-item-modal__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }
    .aihub-item-modal__tag {
        font-size: 11px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 6px;
        background: #E8F5E9;
        color: #2E7D32;
    }
    .aihub-item-modal__desc {
        font-size: 14px;
        line-height: 1.6;
        color: #444;
        margin: 0 0 14px;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .aihub-item-modal__meta {
        font-size: 13px;
        color: #555;
        margin-bottom: 18px;
        line-height: 1.5;
    }
    .aihub-item-modal__meta strong { color: #111; }
    .aihub-item-modal__price {
        font-size: 1.15rem;
        font-weight: 800;
        color: #051C95;
        margin-bottom: 16px;
    }
    .aihub-item-modal__actions {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .aihub-item-modal__btn-primary {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 16px;
        border-radius: 10px;
        border: none;
        background: #051C95;
        color: #fff !important;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
        box-sizing: border-box;
        transition: background 0.2s;
    }
    .aihub-item-modal__btn-primary:hover { background: #04156f; color: #fff !important; }
    .aihub-item-modal__btn-wish {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #FECACA;
        background: #FFF5F5;
        color: #E53935;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        font-family: inherit;
        transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .aihub-item-modal__btn-wish:hover { border-color: #fca5a5; background: #ffe4e6; }
    .aihub-item-modal__btn-wish.is-wished {
        border-color: #FECACA;
        background: #FFF5F5;
        color: #E53935;
    }
    .aihub-item-modal__btn-wish:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .aihub-item-modal__btn-icon-link {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #E5E7EB;
        background: #fff;
        color: #6B7280;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .aihub-item-modal__btn-icon-link:hover { background: #F9FAFB; border-color: #D1D5DB; color: #374151; }
    .aihub-item-modal__btn-icon-link[hidden] { display: none !important; }

    /* Media Queries */
    @media (max-width: 1024px) {
        .cate_grid { grid-template-columns: repeat(3, 1fr); }
        .pop_grid { grid-template-columns: repeat(2, 1fr); }
        .cate_filter_selects { margin-left: 0; width: 100%; }
    }
    @media (max-width: 768px) {
        .aihub-hero-editor-out .at-hero__layout { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
        .aihub-hero-editor-out .at-hero__text { max-width: 100% !important; margin-left: auto; margin-right: auto; }
        .aihub-hero-tabs-wrap { padding: 28px 16px; }
        .aihub-hero-status {
            flex-direction: column; align-items: stretch; text-align: center; gap: 16px; padding: 20px 18px;
        }
        .aihub-hero-status__col--lead,
        .aihub-hero-status__col--right {
            flex: none; width: 100%; justify-content: center;
        }
        .aihub-hero-status__col--right { flex-direction: column; gap: 16px; }
        .aihub-hero-status__lead { text-align: center; }
        .aihub-hero-status__stats { flex-wrap: wrap; width: 100%; justify-content: center; gap: 12px 0; }
        .aihub-hero-status__stat {
            border-left: none; padding: 8px 14px; border-bottom: none; min-width: auto;
            white-space: normal; justify-content: center; text-align: center;
        }
        .aihub-hero-status__stat:not(:first-child) { border-left: 1px solid #D8DAE5; padding-left: 16px; margin-left: 4px; }
        .aihub-hero-status__actions { justify-content: center; width: 100%; }
        .aihub-btn-status-primary, .aihub-btn-status-secondary { flex: 1; min-width: 140px; }
        .filter_search_wrap { min-width: 120px; flex: 1; max-width: 100%; }
        .cate_filter_search { flex: 1 1 100%; min-width: 0; }
        .cate_grid { grid-template-columns: repeat(2, 1fr); }
        .cate_filter_selects { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
        .cate_chip_row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    }

    /* 720px 이하: 상단 에디터·이미지 배너 숨김 + 짧은 페이지 타이틀, 인기 카드 2열·미니멀 */
    @media (max-width: 720px) {
        .aihub-hero-editor-out,
        .aihub-hero-banner-image {
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }
        /* head.php: 모바일(≤768) body margin-top 0 + .bottomHeader 고정 80px → 여기서 헤더 높이만큼 비움 */
        .ai_container1 {
            padding-top: calc(96px + env(safe-area-inset-top, 0px));
            box-sizing: border-box;
        }
        .aihub-mobile-page-head {
            display: block;
            text-align: center;
            padding: 6px 14px 14px;
            max-width: 520px;
            margin: 0 auto;
        }
        .aihub-mobile-page-title {
            margin: 0 0 6px;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -0.04em;
            color: #111;
            line-height: 1.25;
        }
        .aihub-mobile-page-desc {
            margin: 0;
            font-size: 13px;
            font-weight: 500;
            color: #5c5c5c;
            line-height: 1.5;
        }
        .aihub-hero-tabs-wrap {
            padding-top: 4px;
        }
        .pop_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px 12px;
            overflow: visible;
            padding-bottom: 18px;
        }
        .pop_card {
            border-radius: 12px;
        }
        .pop_img_box {
            border-radius: 12px 12px 0 0;
        }
        .pop_card .badge_hot,
        .pop_card .tags_row,
        .pop_card .card_desc,
        .pop_card .c_rating,
        .pop_card .c_btn_row {
            display: none !important;
        }
        .pop_img_box {
            height: 110px;
        }
        .pop_card .placeholder_art {
            font-size: 11px;
            padding: 8px;
            line-height: 1.3;
        }
        .pop_info_box {
            padding: 10px 10px 12px;
            border-top: none;
            border-radius: 0 0 12px 12px;
        }
        .pop_card .card_tit {
            font-size: 13px;
            font-weight: 800;
            margin: 0;
            line-height: 1.35;
            letter-spacing: -0.03em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .pop_card .price_tag {
            font-size: 12px;
            font-weight: 800;
            color: #051C95;
            margin: 8px 0 0;
        }
        .pop_card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }
        .popular_sec .result_count_row {
            margin-bottom: 16px;
        }
    }

    /* ≤768px: 구형(비컴팩트) TOP10 카드만 미니멀 처리 — 컴팩트 그리드는 제목·요약 유지 */
    @media (max-width: 768px) {
        .top10_card:not(.top10_card--compact) {
            border-radius: 12px;
        }
        .top10_card:not(.top10_card--compact):hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }
        .top10_card:not(.top10_card--compact) .card_header {
            height: 110px;
        }
        .top10_card:not(.top10_card--compact) .card_header .placeholder_art {
            font-size: 11px;
            padding: 8px;
            line-height: 1.3;
        }
        .top10_card:not(.top10_card--compact) .badge_hot,
        .top10_card:not(.top10_card--compact) .tag_row,
        .top10_card:not(.top10_card--compact) .c_desc,
        .top10_card:not(.top10_card--compact) .c_rating,
        .top10_card:not(.top10_card--compact) .c_btn_row {
            display: none !important;
        }
        .top10_card:not(.top10_card--compact) .card_body {
            padding: 10px 10px 12px;
        }
        .top10_card:not(.top10_card--compact) .c_title {
            font-size: 13px;
            font-weight: 800;
            min-height: 0;
            margin-bottom: 0;
            line-height: 1.35;
            letter-spacing: -0.03em;
        }
        .top10_card:not(.top10_card--compact) .c_price_row {
            margin-top: 8px;
        }
        .top10_card:not(.top10_card--compact) .price_main {
            font-size: 12px;
            font-weight: 800;
        }
        .top10_card--compact .card_header.card_header--top10 {
            height: 92px;
            min-height: 92px;
        }
        .top10_card--compact .top10_card__tit {
            font-size: 13px;
        }
        .top10_card--compact .top10_card__brand {
            font-size: 11px;
        }
        .top10_card__rate,
        .top10_card__fee {
            font-size: 12px;
        }
    }

    .aihub-tab-panel__body > .category_sec:first-child { margin-top: 44px; }
    .ai_container:not(.aihub-has-tabs) > .top10_sec:first-child,
    .ai_container:not(.aihub-has-tabs) > .category_sec:first-child { margin-top: 44px; }

    /* pop_grid 바로 아래 더 보기 + CTA */
    .popular_sec .aihub_more_row {
        display: flex; justify-content: center;
        margin-top: 50px; margin-bottom: 0;
    }
    .aihub_post_pop { margin-top: 40px; margin-bottom: 0; padding-bottom: 48px; }
    .aihub_btn_more_outline {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 10px 22px; border-radius: 12px; border: 1px solid #3B44DB;
        background: #fff; color: #3B44DB; font-size: 14px; font-weight: 700;
        text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
        font-family: inherit; box-sizing: border-box; cursor: pointer;
    }
    .aihub_btn_more_outline:hover:not(:disabled) { background: #F7F8FF; color: #2F3BB8; border-color: #2F3BB8; }
    .aihub_btn_more_outline:disabled { opacity: 0.55; cursor: wait; }
    .aihub_cta_banner {
        max-width: 100%; margin: 0 auto; padding: 48px 32px 52px;
        border-radius: 24px; text-align: center; box-sizing: border-box;
        background: linear-gradient(90deg, #f8f9fb 0%, #e8e4f7 55%, #dcd6f7 100%);
        box-shadow: 0 12px 40px rgba(59, 68, 219, 0.08), 0 4px 14px rgba(0, 0, 0, 0.04);
    }
    .aihub_cta_tit {
        margin: 0 0 16px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800;
        color: #111; letter-spacing: -0.04em; line-height: 1.35;
    }
    .aihub_cta_desc {
        margin: 0 auto 28px; max-width: 640px; font-size: 15px; line-height: 1.65;
        color: #5c5c5c; font-weight: 500;
    }
    .aihub_cta_btns {
        display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch;
    }
    .aihub_cta_btn_secondary {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 14px 22px; border-radius: 10px; border: 1px solid #D8D8E0;
        background: #fff; color: #1a1a1a; font-size: 15px; font-weight: 700;
        text-decoration: none; transition: background 0.2s, border-color 0.2s;
        font-family: inherit; box-sizing: border-box;
        flex: 1 1 200px; max-width: 280px; min-height: 52px;
    }
    .aihub_cta_btn_secondary:hover { background: #fafafa; border-color: #ccc; color: #111; }
    .aihub_cta_btn_primary {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 14px 22px; border-radius: 10px; border: none;
        background: #051C95; color: #fff; font-size: 15px; font-weight: 700;
        text-decoration: none; transition: background 0.2s, box-shadow 0.2s;
        font-family: inherit; box-sizing: border-box;
        box-shadow: 0 4px 14px rgba(5, 28, 149, 0.25);
        flex: 1 1 200px; max-width: 280px; min-height: 52px;
    }
    .aihub_cta_btn_primary:hover { background: #04125f; color: #fff; box-shadow: 0 6px 18px rgba(5, 28, 149, 0.3); }
    @media (max-width: 640px) {
        .aihub_cta_banner { padding: 36px 20px 40px; border-radius: 18px; }
        .aihub_cta_btns { flex-direction: column; width: 100%; align-items: center; }
        .aihub_cta_btn_secondary, .aihub_cta_btn_primary { width: 100%; max-width: 320px; flex: 0 0 auto; }
    }
    /* ==========================================
   추가 반응형(Responsive) 스타일 보완
   ========================================== */

    /* 1. 태블릿 이하 (960px 이하) */
    @media (max-width: 960px) {
        /* 요청사항: 좁아지면 비주얼(에디터 포함) 요소 숨김 처리 */
        .aihub-hero-editor-out .at-hero__visual,
        .at-hero__visual { 
            display: none !important; 
        }

        /* 히어로 상태바 레이아웃 세로 정렬 보완 */
        .aihub-hero-status {
            flex-direction: column;
            text-align: center;
            gap: 20px;
        }
        .aihub-hero-status__stats {
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Top10 섹션 세로 여백 완화 */
        .top10_sec { margin-bottom: 80px; }
        .aihub-has-tabs .aihub-tab-panel__body > .top10_sec:first-child { margin-top: 20px; }
    }

    /* 2. 모바일/작은 태블릿 (768px 이하) */
    @media (max-width: 768px) {
        /* --- 상단 고정 헤더에 콘텐츠가 먹히는 현상 방지 --- */
        .aihub-hero-editor-out {
            padding-top: 70px !important; /* 모바일 헤더 높이에 맞춰 60~80px 사이로 조절해주세요 */
        }
        .aihub-hero-banner-image { 
            margin-top: 70px !important; /* 이미지 배너일 때도 헤더 아래로 밀어냄 */
            border-radius: 12px; 
        }
        
        /* --- 1. 검색창 & 초기화 버튼 (캡처 이미지처럼 자연스럽게 1줄 배치) --- */
        .cate_filter_row1 { 
            display: flex;
            flex-wrap: wrap; /* 억지로 세로로 꺾지 않고 자연스럽게 둠 */
            align-items: center; 
            gap: 12px; 
        }
        
        .filter_search_wrap.cate_filter_search { 
            flex: 1 1 200px !important; /* 남은 여백을 검색창이 넓게 차지함 */
            height: 48px !important;
            max-width: none !important;
        }
        .filter_search_input { font-size: 15px !important; }
        
        .cate_filter_panel .filter_reset { 
            align-self: center;
            margin: 0;
            padding: 0 4px;
            font-size: 14px;
        }
        
        /* --- 2. 셀렉트 박스 (강제 3등분 꽉 채움 제거, 좌측 정렬 복구) --- */
        .cate_filter_selects { 
            display: flex !important; /* 옹졸하게 만들던 grid 속성 제거 */
            width: 100%; 
            justify-content: flex-start; /* 캡처처럼 좌측으로 가지런히 정렬 */
            margin-left: 0; 
            gap: 8px; 
        }
        .custom_select { flex: 0 1 auto; } /* 안의 글자 길이만큼만 자연스럽게 너비 차지 */
        .custom_select select { width: auto; min-width: 90px; height: 44px; }
        
        /* --- 3. 카테고리 칩 (가로 스크롤 제거, 캡처처럼 여러 줄로 떨어지게 복구) --- */
        .cate_chip_row {
            flex-wrap: wrap !important; /* 여러 줄 바꿈 허용 */
            overflow-x: visible !important; /* 스크롤바 제거 */
            padding-bottom: 0 !important;
        }
        .cate_chip_group_row {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        .cate_chip_group_row .cate_chip_row_label {
            padding-top: 2px;
            min-width: 0;
        }

        .top10_sec { margin-bottom: 64px; }
        .aihub-has-tabs .aihub-tab-panel__body > .top10_sec:first-child { margin-top: 10px; }
        .ai_container:not(.aihub-has-tabs) > .top10_sec:first-child { margin-top: 32px; }

        /* --- CTA 하단 배너 버튼 (버튼 2개 나란히 배치 유지) --- */
        .aihub_cta_btns { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
        .aihub_cta_btn_secondary, .aihub_cta_btn_primary { 
            flex: 1 1 50%; max-width: none; min-height: 48px; padding: 12px 10px; font-size: 14px; 
        }
    }

    /* 3. 모바일 세로 화면 (480px 이하) */
    @media (max-width: 480px) {
        .cate_grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .cate_box { height: auto; min-height: 110px; padding: 14px 12px; }
        .cate_num { font-size: 18px; }
        .cate_tit { font-size: 13px; }
        
        .sec_head, .top10_sec__head .sec_head { font-size: 18px; }
        .top10_nav_btns { display: none; } 

        .top10_sec { margin-bottom: 48px; }
        .top10_sec__head { margin-bottom: 8px; }
        .aihub-has-tabs .aihub-tab-panel__body > .top10_sec:first-child { margin-top: 0px; }
        .ai_container:not(.aihub-has-tabs) > .top10_sec:first-child { margin-top: 24px; }
        
        .aihub-hero-tabs { gap: 6px; }
        .aihub-hero-tab { font-size: 14px; padding: 8px 5px; min-height: 42px; letter-spacing: -0.5px; }
        
        .aihub-hero-status__stats { flex-direction: column; gap: 8px; align-items: center; }
        .aihub-hero-status__stat:not(:first-child) { border-left: none; padding-left: 0; margin-left: 0; }
        
        #bsub-planner .bp-puzzle-header { flex-direction: column; align-items: stretch; }
        #bsub-planner .bp-budget-indicator { width: 100%; max-width: 100%; margin-top: 12px; }

        /* 아주 좁은 화면(아이폰 미니 등)에서만 버튼 위아래 배치하되 정상 높이 유지 */
        .aihub_cta_btns { flex-direction: column; gap: 8px; }
        .aihub_cta_btn_secondary, 
        .aihub_cta_btn_primary { 
            flex: 0 0 auto; /* 높이가 쭉 늘어나는 버그 원천 차단 */
            width: 100%; 
        }
        /* --- 상단 메인 배너(에디터 영역) 버튼 최적화 --- */
        /* 버튼을 감싸는 컨테이너를 강제로 세로 배치 */
        .aihub-hero-editor-out [style*="display: flex"],
        .aihub-hero-editor-out .at-hero__btns {
            flex-direction: column !important;
            align-items: center !important;
            gap: 10px !important;
        }
        
        /* 버튼 자체를 가로로 꽉 차게 (최대 320px 제한으로 예쁘게) */
        .aihub-hero-editor-out a[class*="btn"], 
        .aihub-hero-editor-out button[class*="btn"],
        .aihub-hero-editor-out .at-hero__text a {
            width: 100% !important;
            max-width: 320px !important;
            box-sizing: border-box !important;
            display: flex !important;
            justify-content: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
    /* ==========================================
   초소형 기기 (갤럭시 폴드 등 380px 이하) '전체' 완벽 대응
   ========================================== */
    @media (max-width: 380px) {
        /* 1. 전역 여백 다이어트 (컨테이너 패딩 축소로 실사용 공간 확보) */
        .ai_container, .aihub-hero-tabs-wrap { 
            padding-left: 12px !important; 
            padding-right: 12px !important; 
        }
        .cate_filter_panel, .sub-dash-panel, .sub-status-panel, .sub-opt-panel, 
        .dash-panel, .bm-insight-card, .at-unified-filter, .aihub_cta_banner {
            padding: 16px 14px !important;
        }

        /* 2. 상단 네비게이션: 히어로 탭 4개는 2×2 그리드 유지(패딩만 축소) */
        .aihub-hero-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
        .aihub-hero-tab {
            font-size: 13px !important;
            padding: 7px 5px !important;
            min-height: 38px !important;
            letter-spacing: -0.55px;
            line-height: 1.25;
        }

        /* 예산·구독 하위 탭: 히어로 탭과 같은 밀도(2열은 640px 규칙 상속) */
        .budget-sub-tabs {
            gap: 6px !important;
            margin-bottom: 16px;
        }
        .budget-sub-tab {
            min-height: 40px !important;
            padding: 7px 5px !important;
            font-size: 13px !important;
            letter-spacing: -0.45px;
            line-height: 1.25;
            gap: 4px !important;
        }
        .budget-sub-tab i { font-size: 14px !important; }

        .top10_sec { margin-bottom: 36px !important; }
        .aihub-has-tabs .aihub-tab-panel__body > .top10_sec:first-child { margin-top: 0px !important; }
        .ai_container:not(.aihub-has-tabs) > .top10_sec:first-child { margin-top: 20px !important; }
        
        /* 카테고리 6개 박스 -> 1열 배치하여 글자 겹침 방지 */
        .cate_grid { grid-template-columns: 1fr !important; }
        .cate_box { min-height: auto; flex-direction: row; align-items: center; }
        .cate_top { width: 60px; flex-direction: column; margin-right: 12px; }
        .cate_btm { flex: 1; }
        
        /* 셀렉트박스 3개 세로로 쫙 펴주기 */
        .cate_filter_selects { flex-direction: column !important; align-items: stretch !important; }
        .custom_select, .custom_select select { width: 100% !important; min-width: 100%; }
        .cate_sort_dd { width: 100%; }
        .cate_sort_dd__trigger { width: 100%; min-width: 0; }
        .cate_sort_dd__panel { right: 0; left: 0; width: 100%; min-width: 0; }

        /* 3. 코스웨어 / 예산 도구 레이아웃 붕괴 방지 */
        /* 예산 분석 차트/텍스트 줄바꿈 */
        #bsub-analysis .budget-row { 
            grid-template-columns: 1fr !important; 
            gap: 6px; 
            margin-bottom: 12px; 
        }
        #bsub-analysis .budget-row-value { text-align: left; }
        
        /* 4. 구독 관리 (표 형태) 모바일 리스트 형태로 변환 */
        /* 표 형태 2열 -> 1열로 쌓기 */
        .sub-row { 
            position: relative; /* 점 3개 메뉴 기준점 */
            grid-template-columns: 1fr !important; 
            gap: 12px; 
            padding: 16px 12px !important; 
        }
        .sub-row > div { width: 100%; text-align: left !important; }
        /* 우측 끝에 있던 액션버튼(점 3개)을 우측 상단으로 이동 고정 */
        .sub-row > div:last-child { 
            position: absolute; 
            right: 12px; 
            top: 16px; 
            width: auto; 
        }
        .action-menu { right: 0; left: auto; } /* 드롭다운 메뉴 안 잘리게 */

        /* 5. 중복 구독 알림 (Canva vs Adobe) 레이아웃 */
        .at-dup-compare { grid-template-columns: 1fr !important; gap: 8px; }
        .at-dup-overlap { margin: 8px 0; }
        .at-dup-actions { flex-direction: column; align-items: stretch; width: 100%; }
        .at-dup-saving { text-align: center; margin: 0 0 12px 0; }
        
        /* 최적화 제안 리스트 */
        .license-opt-item { flex-direction: column; align-items: flex-start; gap: 10px; }
        .opt-saving { text-align: left; width: 100%; margin-top: 4px; }

        /* 6. 전체적인 폰트 크기 미세 조정 (글씨가 넘쳐서 깨지는 것 방지) */
        .aihub-hero-status__stat-num, .cate_num, .sub-summary-value { font-size: 85% !important; }
        .aihub_cta_tit { font-size: 20px !important; }
        /* 🚨 추가: 헤더 겹침 완벽 방지 (배경색 파고듦 차단) 🚨 */
        .aihub-hero-editor-out {
            margin-top: 75px !important; /* 상단 헤더 높이만큼 박스 자체를 강제로 내림 */
            padding-top: 10px !important; /* 숨 쉴 수 있는 윗단 여백 살짝 추가 */
        }
        .aihub-hero-banner-image {
            margin-top: 75px !important;
        }
    }

/* 탭 지연 로드 스켈레톤 (코스웨어·구독·예산) */
.aihub-tab-skeleton {
    padding: 20px 4px 28px;
    max-width: 520px;
}
.aihub-tab-skeleton__bar {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 45%, #eef2f7 90%);
    background-size: 200% 100%;
    animation: aihubSkShimmer 1.2s ease-in-out infinite;
}
.aihub-tab-skeleton__bar--short {
    width: 55%;
}
.aihub-tab-skeleton__msg {
    margin: 8px 0 0;
    font-size: 14px;
    color: #64748b;
    letter-spacing: -0.02em;
}
@keyframes aihubSkShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ========== 예산도구 v6 — AI Hub 톤(#3B44DB·보라 포인트·여백) 정리 ========== */
#aihubTabPanel-budget .aihub-tab-panel__body {
    padding-top: 28px;
    padding-bottom: 40px;
}
#aihubTabPanel-budget .aihub-bgt-v6 {
    --bgt-b: #3B44DB;
    --bgt-bl: #F7F8FF;
    --bgt-bm: #C7CAF0;
    --bgt-bd: #2c34a8;
    --bgt-pu: #7C3AED;
    --bgt-pul: #F5F3FF;
    --bgt-pum: #DDD6FE;
    --bgt-pud: #5B21B6;
    --bgt-g: #059669;
    --bgt-gd: #047857;
    --bgt-r: #DC2626;
    --bgt-k: #1e293b;
    --bgt-gray: #64748b;
    --bgt-gray2: #94a3b8;
    --bgt-gray3: #e2e8f0;
    --bgt-gray4: #f1f5f9;
    --bgt-gray5: #f8fafc;
    --bgt-wh: #fff;
    --bgt-rad: 14px;
    --bgt-rsm: 10px;
    --bgt-prod-cols: minmax(0, 1.5fr) minmax(52px, 0.42fr) minmax(72px, 0.55fr) minmax(48px, 0.38fr) minmax(88px, 0.55fr) 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bgt-k);
}
#aihubTabPanel-budget .bgt-sec-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.02em;
}
#aihubTabPanel-budget .bgt-sec-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #d6dbf6, transparent);
}
#aihubTabPanel-budget .bgt-sec-title--sp { margin-top: 28px; }
#aihubTabPanel-budget .bgt-stypes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    #aihubTabPanel-budget .bgt-stypes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#aihubTabPanel-budget .bgt-stcard {
    position: relative;
    background: var(--bgt-wh);
    border: 1px solid #d6dbf6;
    border-radius: var(--bgt-rad);
    padding: 16px 14px 14px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
    box-shadow: 0 1px 2px rgba(59, 68, 219, 0.04);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
#aihubTabPanel-budget .bgt-stcard:hover:not(.bgt-stcard--on) {
    border-color: #a5b4fc;
    box-shadow: 0 4px 14px rgba(59, 68, 219, 0.08);
}
#aihubTabPanel-budget .bgt-stcard--on {
    border-color: var(--bgt-b);
    box-shadow: 0 4px 16px rgba(59, 68, 219, 0.12);
    background: linear-gradient(180deg, #fff 0%, #f7f8ff 100%);
}
#aihubTabPanel-budget .bgt-stribbon {
    position: absolute;
    top: 0;
    right: 14px;
    background: var(--bgt-b);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 0 0 8px 8px;
}
#aihubTabPanel-budget .bgt-sticon { display: block; font-size: 26px; margin-bottom: 8px; line-height: 1; }
#aihubTabPanel-budget .bgt-stlbl { display: block; font-size: 14px; font-weight: 800; color: var(--bgt-k); margin-bottom: 4px; }
#aihubTabPanel-budget .bgt-stbgt { display: block; font-size: 15px; font-weight: 900; color: var(--bgt-b); letter-spacing: -0.02em; }
#aihubTabPanel-budget .bgt-stdesc { display: block; font-size: 12px; color: var(--bgt-gray); margin-top: 4px; line-height: 1.45; }
#aihubTabPanel-budget .bgt-layout { display: grid; grid-template-columns: 1fr min(360px, 100%); gap: 24px 28px; align-items: start; }
@media (max-width: 1024px) {
    #aihubTabPanel-budget .bgt-layout { grid-template-columns: 1fr; gap: 20px; }
}
#aihubTabPanel-budget .bgt-summary-panel { position: static; }
@media (min-width: 1025px) {
    #aihubTabPanel-budget .bgt-summary-panel { position: sticky; top: 80px; align-self: start; }
}
#aihubTabPanel-budget .bgt-moditem {
    border: 1px solid #d6dbf6;
    border-radius: var(--bgt-rad);
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--bgt-wh);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
#aihubTabPanel-budget .bgt-moditem.bgt-moditem--on {
    border-color: #c7caf0;
    box-shadow: 0 4px 16px rgba(59, 68, 219, 0.07);
}
#aihubTabPanel-budget .bgt-mod-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--bgt-gray5);
    user-select: none;
    border: none;
    width: 100%;
    font: inherit;
    text-align: left;
    color: inherit;
}
#aihubTabPanel-budget .bgt-moditem.bgt-moditem--on .bgt-mod-hd {
    background: linear-gradient(90deg, #f7f8ff 0%, #f5f3ff 100%);
}
#aihubTabPanel-budget .bgt-mcheck {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 11px; color: transparent; transition: all 0.13s;
}
#aihubTabPanel-budget .bgt-moditem.bgt-moditem--on .bgt-mcheck {
    background: var(--bgt-b);
    border-color: var(--bgt-b);
    color: #fff;
}
#aihubTabPanel-budget .bgt-mico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
#aihubTabPanel-budget .bgt-minfo { flex: 1; min-width: 0; }
#aihubTabPanel-budget .bgt-mnm { font-size: 15px; font-weight: 800; color: var(--bgt-k); margin-bottom: 2px; }
#aihubTabPanel-budget .bgt-mdesc { font-size: 12px; color: var(--bgt-gray); line-height: 1.4; }
#aihubTabPanel-budget .bgt-mmod-subtotal { text-align: right; }
#aihubTabPanel-budget .bgt-mmod-subtotal-lbl { font-size: 11px; color: var(--bgt-gray); margin-bottom: 2px; }
#aihubTabPanel-budget .bgt-mmod-subtotal-val { font-size: 16px; font-weight: 900; color: var(--bgt-b); letter-spacing: -0.02em; }
#aihubTabPanel-budget .bgt-mod-body { display: none; padding: 16px 18px 18px; background: var(--bgt-wh); }
#aihubTabPanel-budget .bgt-moditem.bgt-moditem--on .bgt-mod-body { display: block; }
#aihubTabPanel-budget .bgt-prod-table-hd {
    display: grid;
    grid-template-columns: var(--bgt-prod-cols);
    gap: 10px 12px;
    padding: 10px 12px;
    background: var(--bgt-gray4);
    border-radius: var(--bgt-rsm);
    font-size: 11px;
    font-weight: 700;
    color: var(--bgt-gray);
    margin-bottom: 8px;
    align-items: center;
}
#aihubTabPanel-budget .bgt-prod-row {
    display: grid;
    grid-template-columns: var(--bgt-prod-cols);
    gap: 10px 12px;
    padding: 12px 12px;
    background: var(--bgt-wh);
    border: 1px solid var(--bgt-gray3);
    border-radius: var(--bgt-rsm);
    margin-bottom: 8px;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
#aihubTabPanel-budget .bgt-prod-row:hover { border-color: #c7caf0; }
#aihubTabPanel-budget .bgt-prod-row.bgt-prod-row--sel {
    border-color: var(--bgt-b);
    background: #f7f8ff;
    box-shadow: inset 0 0 0 1px rgba(59, 68, 219, 0.12);
}
#aihubTabPanel-budget .bgt-prod-row-info { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
#aihubTabPanel-budget .bgt-prod-emoji { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
#aihubTabPanel-budget .bgt-prod-nm { font-size: 13px; font-weight: 700; color: var(--bgt-k); line-height: 1.35; }
#aihubTabPanel-budget .bgt-prod-mk { font-size: 12px; color: var(--bgt-gray2); margin-top: 2px; }
#aihubTabPanel-budget .bgt-prod-qty-input,
#aihubTabPanel-budget .bgt-prod-mo-input {
    width: 100%;
    max-width: 76px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: var(--bgt-rsm);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
#aihubTabPanel-budget .bgt-prod-qty-input:focus,
#aihubTabPanel-budget .bgt-prod-mo-input:focus { border-color: var(--bgt-b); box-shadow: 0 0 0 2px rgba(59, 68, 219, 0.15); }
#aihubTabPanel-budget .bgt-prod-price-cell { font-size: 12px; color: var(--bgt-gray); text-align: center; line-height: 1.35; }
#aihubTabPanel-budget .bgt-pxs { font-size: 10px; opacity: 0.85; }
#aihubTabPanel-budget .bgt-prod-subtotal { font-size: 13px; font-weight: 800; color: var(--bgt-b); text-align: right; padding-right: 2px; }
#aihubTabPanel-budget .bgt-prod-sel {
    width: 34px; height: 34px; border-radius: var(--bgt-rsm); border: 1px solid #cbd5e1;
    background: var(--bgt-wh); display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: transparent; flex-shrink: 0; cursor: pointer; transition: all 0.12s;
}
#aihubTabPanel-budget .bgt-prod-sel.bgt-prod-sel--on {
    background: var(--bgt-b);
    border-color: var(--bgt-b);
    color: #fff;
}
#aihubTabPanel-budget .bgt-txt-muted { color: var(--bgt-gray2); }
#aihubTabPanel-budget .bgt-mod-subtotal-bar { margin-top: 14px; padding: 12px; background: var(--bgt-gray5); border-radius: var(--bgt-rsm); }
#aihubTabPanel-budget .bgt-msb-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
#aihubTabPanel-budget .bgt-msb-lbl { font-size: 12px; color: var(--bgt-gray); }
#aihubTabPanel-budget .bgt-msb-nums { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
#aihubTabPanel-budget .bgt-msb-prod-sum { font-size: 13px; font-weight: 900; color: #ea580c; }
#aihubTabPanel-budget .bgt-msb-sep { font-size: 11px; color: #cbd5e1; }
#aihubTabPanel-budget .bgt-msb-budget { font-size: 13px; font-weight: 800; }
#aihubTabPanel-budget .bgt-msb-diff { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
#aihubTabPanel-budget .bgt-msb-diff--ok { background: #d1fae5; color: var(--bgt-gd); }
#aihubTabPanel-budget .bgt-msb-diff--over { background: #fee2e2; color: #991b1b; }
#aihubTabPanel-budget .bgt-msb-track { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
#aihubTabPanel-budget .bgt-msb-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
#aihubTabPanel-budget .bgt-mod-slider-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bgt-gray3); }
#aihubTabPanel-budget .bgt-mod-slider-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#aihubTabPanel-budget .bgt-mod-slider-lbl { font-size: 12px; color: var(--bgt-gray); }
#aihubTabPanel-budget .bgt-mod-slider-val { font-size: 13px; font-weight: 800; color: var(--bgt-b); }
#aihubTabPanel-budget .bgt-mslider { width: 100%; accent-color: var(--bgt-b); cursor: pointer; height: 6px; }
#aihubTabPanel-budget .bgt-mod-slider-range { display: flex; justify-content: space-between; font-size: 11px; color: var(--bgt-gray2); margin-top: 4px; }
/* 요약 카드: 어두운 헤더 대신 허브용 라이트 패널 */
#aihubTabPanel-budget .bgt-sc {
    background: var(--bgt-wh);
    border: 1px solid #d6dbf6;
    border-radius: var(--bgt-rad);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(59, 68, 219, 0.06);
}
#aihubTabPanel-budget .bgt-sc-hd {
    background: linear-gradient(180deg, #f8f9ff 0%, #eef2ff 100%);
    border-bottom: 1px solid #d6dbf6;
    padding: 18px 16px 16px;
}
#aihubTabPanel-budget .bgt-sc-hd-top { margin-bottom: 12px; }
#aihubTabPanel-budget .bgt-sc-hd-title { font-size: 16px; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
#aihubTabPanel-budget .bgt-sc-hd-sub { font-size: 12px; color: var(--bgt-gray); margin-top: 4px; line-height: 1.45; }
#aihubTabPanel-budget .bgt-sc-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
#aihubTabPanel-budget .bgt-sc-num {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--bgt-rsm);
    padding: 12px 10px;
    text-align: center;
}
#aihubTabPanel-budget .bgt-sc-num-val { font-size: 20px; font-weight: 900; color: var(--bgt-b); line-height: 1.15; letter-spacing: -0.02em; }
#aihubTabPanel-budget .bgt-sc-num-lbl { font-size: 12px; color: var(--bgt-gray); margin-top: 4px; }
#aihubTabPanel-budget .bgt-sc-btrack { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
#aihubTabPanel-budget .bgt-sc-bfill { height: 100%; background: linear-gradient(90deg, var(--bgt-b), var(--bgt-pu)); border-radius: 999px; transition: width 0.4s; }
#aihubTabPanel-budget .bgt-sc-btxt { display: flex; justify-content: space-between; font-size: 11px; color: var(--bgt-gray); }
#aihubTabPanel-budget .bgt-sc-list { padding: 14px 14px 8px; max-height: 340px; overflow-y: auto; }
#aihubTabPanel-budget .bgt-sc-list::-webkit-scrollbar { width: 5px; }
#aihubTabPanel-budget .bgt-sc-list::-webkit-scrollbar-thumb { background: #c7caf0; border-radius: 4px; }
#aihubTabPanel-budget .bgt-sc-mod-block { margin-bottom: 12px; }
#aihubTabPanel-budget .bgt-sc-mod-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; background: var(--bgt-gray4); border-radius: var(--bgt-rsm); margin-bottom: 4px;
}
#aihubTabPanel-budget .bgt-sc-mod-lbl { font-size: 12px; font-weight: 800; color: var(--bgt-k); display: flex; align-items: center; gap: 6px; }
#aihubTabPanel-budget .bgt-sc-mod-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#aihubTabPanel-budget .bgt-sc-mod-amt { font-size: 13px; font-weight: 900; color: var(--bgt-pu); }
#aihubTabPanel-budget .bgt-sc-prod-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 18px; gap: 8px; }
#aihubTabPanel-budget .bgt-sc-prod-lbl { font-size: 12px; color: var(--bgt-gray); line-height: 1.35; }
#aihubTabPanel-budget .bgt-sc-prod-val { font-size: 12px; font-weight: 700; color: var(--bgt-k); flex-shrink: 0; }
#aihubTabPanel-budget .bgt-sc-tot-block {
    padding: 14px 16px;
    border-top: 2px solid #c7caf0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafbff;
}
#aihubTabPanel-budget .bgt-sc-tot-lbl { font-size: 14px; font-weight: 800; color: var(--bgt-k); }
#aihubTabPanel-budget .bgt-sc-tot-val { font-size: 20px; font-weight: 900; color: var(--bgt-b); letter-spacing: -0.02em; }
#aihubTabPanel-budget .bgt-sc-acts { padding: 14px 14px 16px; background: var(--bgt-gray5); border-top: 1px solid var(--bgt-gray3); display: flex; flex-direction: column; gap: 8px; }
#aihubTabPanel-budget .bgt-act-group-lbl { font-size: 11px; font-weight: 800; color: var(--bgt-gray); letter-spacing: 0.04em; margin-bottom: 2px; }
#aihubTabPanel-budget .bgt-scbtn {
    width: 100%;
    min-height: 42px;
    border-radius: var(--bgt-rsm);
    border: none;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#aihubTabPanel-budget .bgt-scbtn--primary { background: var(--bgt-b); color: #fff; border: 1px solid #2c34a8; }
#aihubTabPanel-budget .bgt-scbtn--primary:hover { background: #2c34a8; }
#aihubTabPanel-budget .bgt-scbtn--gradgreen { background: linear-gradient(135deg, var(--bgt-g), #10b981) !important; border: 1px solid var(--bgt-gd) !important; }
#aihubTabPanel-budget .bgt-scbtn--green { background: var(--bgt-g); color: #fff; border: 1px solid var(--bgt-gd); }
#aihubTabPanel-budget .bgt-scbtn--green:hover { background: var(--bgt-gd); }
#aihubTabPanel-budget .bgt-scbtn--blue { background: #4f46e5; color: #fff; border: 1px solid #4338ca; }
#aihubTabPanel-budget .bgt-scbtn--blue:hover { background: #4338ca; }
#aihubTabPanel-budget .bgt-scbtn--outline { background: var(--bgt-wh); color: var(--bgt-k); border: 1px solid #cbd5e1; }
#aihubTabPanel-budget .bgt-scbtn--outline:hover { border-color: var(--bgt-b); color: var(--bgt-b); background: #f7f8ff; }
#aihubTabPanel-budget .bgt-scbtn-divider { height: 1px; background: var(--bgt-gray3); margin: 4px 0; }
#aihubTabPanel-budget .bgt-docgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
@media (max-width: 720px) {
    #aihubTabPanel-budget .bgt-docgrid { grid-template-columns: 1fr; }
}
#aihubTabPanel-budget .bgt-dcard {
    background: var(--bgt-wh);
    border: 1px solid #d6dbf6;
    border-radius: var(--bgt-rad);
    padding: 16px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    border-top: 3px solid var(--bgt-b);
    text-align: left;
    font: inherit;
    color: inherit;
    box-shadow: 0 1px 3px rgba(59, 68, 219, 0.05);
}
#aihubTabPanel-budget .bgt-dcard:hover {
    border-color: var(--bgt-b);
    background: #f7f8ff;
    box-shadow: 0 6px 18px rgba(59, 68, 219, 0.1);
    transform: translateY(-1px);
}
#aihubTabPanel-budget .bgt-dico { font-size: 22px; margin-bottom: 8px; line-height: 1; }
#aihubTabPanel-budget .bgt-dtit { font-size: 14px; font-weight: 800; color: var(--bgt-k); margin-bottom: 4px; }
#aihubTabPanel-budget .bgt-dsub { font-size: 12px; color: var(--bgt-gray); line-height: 1.5; margin-bottom: 8px; }
#aihubTabPanel-budget .bgt-dstep { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef2ff; color: var(--bgt-b); display: inline-block; }
@media (max-width: 640px) {
    #aihubTabPanel-budget .aihub-bgt-v6 { --bgt-prod-cols: minmax(0, 1fr) 48px 56px 44px 72px 36px; padding: 0 4px; }
}
/* —— 모달 (예산도구) — 허브 톤 —— */
.aihubBgtMov {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.45);
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}
.aihubBgtMov.is-open { display: flex; }
.aihubBgtMov__box { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; margin: 20px auto; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); border: 1px solid #e2e8f0; }
.aihubBgtMov__box--wide { max-width: 720px; }
.aihubBgtMov__hd {
    background: linear-gradient(135deg, #3b44db 0%, #5e67e5 55%, #6366f1 100%);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
#aihubBgt-docM .aihubBgtMov__hd { background: linear-gradient(135deg, #3b44db 0%, #4f46e5 100%); }
.aihubBgtMov__hd--green { background: linear-gradient(135deg, #047857, #059669) !important; }
.aihubBgtMov__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.aihubBgtMov__tit { font-size: 17px; font-weight: 900; color: #fff; margin: 0 0 4px; letter-spacing: -0.02em; }
.aihubBgtMov__sub { font-size: 13px; color: rgba(255, 255, 255, 0.88); margin: 0; line-height: 1.45; }
.aihubBgtMov__x { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.15); border: none; color: #fff; cursor: pointer; font-size: 18px; flex-shrink: 0; font-family: inherit; line-height: 1; }
.aihubBgtMov__x:hover { background: rgba(255, 255, 255, 0.28); }
.aihubBgtMov .bgt-doc-tabs { display: flex; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.aihubBgtMov .bgt-dtab {
    flex: 1;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    color: #64748b;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.aihubBgtMov .bgt-dtab--on, .aihubBgtMov .bgt-dtab.bgt-dtab--on { color: #3b44db; border-bottom-color: #3b44db; background: #fff; }
.aihubBgtMov .bgt-dcont { padding: 20px 20px 16px; display: none; }
.aihubBgtMov .bgt-dcont--on, .aihubBgtMov .bgt-dcont.bgt-dcont--on { display: block; }
.bgt-doc-hdr { text-align: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; margin-bottom: 16px; }
.bgt-doc-hdr h3 { font-size: 17px; font-weight: 900; color: #0f172a; margin: 0 0 6px; letter-spacing: -0.02em; }
.bgt-doc-hdr p { font-size: 12px; color: #64748b; margin: 0; }
.bgt-doc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.bgt-doc-info-item { background: #f8fafc; border-radius: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; }
.bgt-doc-info-l { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.bgt-doc-info-v { font-size: 13px; font-weight: 700; color: #0f172a; }
.bgt-doc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 14px; }
.bgt-doc-tbl th { background: #f1f5f9; padding: 8px 10px; text-align: left; font-weight: 700; color: #64748b; border: 1px solid #e2e8f0; }
.bgt-doc-tbl td { padding: 8px 10px; border: 1px solid #e2e8f0; color: #1e293b; }
.bgt-tot-r td { font-weight: 900; background: #eef2ff; color: #3b44db; }
.bgt-doc-footnote { font-size: 12px; color: #64748b; margin: 0 0 10px; line-height: 1.5; }
.aihubBgtMov__ft { padding: 14px 20px; display: flex; gap: 8px; background: #f8fafc; flex-wrap: wrap; border-top: 1px solid #e2e8f0; }
.bgt-mfbtn { flex: 1; min-width: 120px; min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; border: none; }
.bgt-mfbtn--ghost { background: #fff; color: #64748b; border: 1px solid #cbd5e1; }
.bgt-mfbtn--ghost:hover { border-color: #3b44db; color: #3b44db; }
.bgt-mfbtn--green { background: #059669; color: #fff; }
.bgt-mfbtn--green:hover { background: #047857; }
.bgt-mfbtn--block { width: 100%; }
.bgt-success-wrap { text-align: center; padding: 24px 20px 20px; }
.bgt-success-icon { font-size: 48px; line-height: 1; margin-bottom: 10px; }
.bgt-success-tit { font-size: 19px; font-weight: 900; color: #0f172a; margin: 0 0 6px; letter-spacing: -0.02em; }
.bgt-success-sub { font-size: 14px; color: #64748b; line-height: 1.55; margin: 0 0 16px; }
.bgt-success-det { background: #f8fafc; border-radius: 12px; padding: 14px 16px; text-align: left; margin-bottom: 14px; font-size: 13px; border: 1px solid #e2e8f0; }
.bgt-sd-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e2e8f0; gap: 12px; }
.bgt-sd-row:last-child { border-bottom: none; }
.bgt-sd-l { color: #64748b; flex-shrink: 0; }
.bgt-sd-v { font-weight: 700; color: #0f172a; text-align: right; }
.bgt-success-btns { display: flex; flex-direction: column; gap: 10px; }

/* ========== 구독관리 탭 (submgt) — 단일 소스(마크업 인라인 var(--submgt-*)는 .submgt-root 기준) ========== */
#aihubTabPanel-subscription .aihub-tab-panel__body {
    padding-top: 28px;
    padding-bottom: 40px;
}
#aihubTabPanel-subscription .submgt-guest-gate {
    width: 100%;
    box-sizing: border-box;
}
#aihubTabPanel-subscription .submgt-empty-state {
    border-width: 1.5px;
    border-color: var(--submgt-g200);
    background: var(--submgt-g50);
    border-radius: var(--submgt-r12, 12px);
}
#aihubTabPanel-subscription .submgt-root {
    width: 100%;
    box-sizing: border-box;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    font-family: inherit;
    /* 인라인 style="color: var(--submgt-...)"용 — 반드시 유지 */
    --submgt-pu: #7c3aed;
    --submgt-pul: #ede9fe;
    --submgt-pum: #c4b5fd;
    --submgt-pud: #5b21b6;
    --submgt-bl: #3b44db;
    --submgt-bll: #eef2ff;
    --submgt-blm: #c7caf0;
    --submgt-gr: #10b981;
    --submgt-grl: #d1fae5;
    --submgt-am: #f59e0b;
    --submgt-aml: #fef3c7;
    --submgt-amm: #fcd34d;
    --submgt-rd: #ef4444;
    --submgt-rdl: #fee2e2;
    --submgt-rdm: #fca5a5;
    --submgt-g50: #f9fafb;
    --submgt-g100: #f3f4f6;
    --submgt-g200: #e5e7eb;
    --submgt-g400: #9ca3af;
    --submgt-g500: #6b7280;
    --submgt-g700: #374151;
    --submgt-g900: #111827;
    --submgt-wh: #fff;
    --submgt-r8: 8px;
    --submgt-r12: 12px;
    --submgt-r16: 16px;
}
#aihubTabPanel-subscription .submgt-root * { box-sizing: border-box; }
#aihubTabPanel-subscription .budget-sub-tabs {
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 2px;
}
#aihubTabPanel-subscription .budget-sub-tab {
    flex: 1 1 148px;
    min-height: 46px;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    border: 1px solid #c7caf0;
    color: #3b44db;
    background: #fff;
    box-shadow: 0 1px 2px rgba(59, 68, 219, 0.05);
    border-radius: 12px;
}
#aihubTabPanel-subscription .budget-sub-tab:hover:not(.active) {
    background: #f7f8ff;
    border-color: #a5b4fc;
    color: #2c34a8;
}
#aihubTabPanel-subscription .budget-sub-tab.active {
    background: linear-gradient(180deg, #3f48de 0%, #3b44db 100%);
    color: #fff;
    border-color: #3b44db;
    box-shadow: 0 6px 20px rgba(59, 68, 219, 0.22);
}
#aihubTabPanel-subscription .budget-sub-tab .submgt-tb { line-height: 1.25; }
#aihubTabPanel-subscription .submgt-tb {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 8px;
    color: #fff;
    vertical-align: middle;
}
#aihubTabPanel-subscription .submgt-tb-r { background: var(--submgt-rd); }
#aihubTabPanel-subscription .submgt-tb-a { background: var(--submgt-am); }
#aihubTabPanel-subscription .budget-sub-tab .submgt-tb {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    vertical-align: middle;
}
#aihubTabPanel-subscription .budget-sub-tab.active .submgt-tb-r {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #b91c1c !important;
}
#aihubTabPanel-subscription .budget-sub-tab.active .submgt-tb-a {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #b45309 !important;
}
#aihubTabPanel-subscription .submgt-pg { display: none; padding: 6px 0 12px; }
#aihubTabPanel-subscription .submgt-pg.is-active { display: block; }
#aihubTabPanel-subscription .submgt-card {
    background: #fff;
    border: 1.5px solid #b4bce8;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(59, 68, 219, 0.07), 0 4px 14px rgba(15, 23, 42, 0.06);
}
#aihubTabPanel-subscription .submgt-card-hov {
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
#aihubTabPanel-subscription .submgt-card-hov:hover {
    border-color: #3b44db;
    box-shadow: 0 6px 20px rgba(59, 68, 219, 0.1);
}
/* ERP(/adm/erp/subscription/) 미연동 구역: 플레이스홀더 블러 + 준비중 배지 */
#aihubTabPanel-subscription .submgt-erp-prep {
    position: relative;
    border-radius: 14px;
}
#aihubTabPanel-subscription .submgt-erp-prep:not(.submgt-erp-prep--live) .submgt-erp-prep__inner {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
#aihubTabPanel-subscription .submgt-erp-prep .submgt-erp-prep__badge {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 13px;
    font-weight: 800;
    color: var(--submgt-g900);
    background: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
    letter-spacing: -0.02em;
    white-space: nowrap;
    pointer-events: none;
}
#aihubTabPanel-subscription .submgt-erp-prep:not(.submgt-erp-prep--live) .submgt-erp-prep__badge {
    display: flex;
}
#aihubTabPanel-subscription .submgt-bdg {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    line-height: 1.2;
}
#aihubTabPanel-subscription .submgt-bdg-ok { background: var(--submgt-grl); color: #065f46; }
#aihubTabPanel-subscription .submgt-bdg-warn { background: var(--submgt-aml); color: #92400e; }
#aihubTabPanel-subscription .submgt-bdg-danger { background: var(--submgt-rdl); color: #991b1b; }
#aihubTabPanel-subscription .submgt-bdg-info { background: var(--submgt-bll); color: #1e3a8a; }
#aihubTabPanel-subscription .submgt-bdg-pu { background: var(--submgt-pul); color: var(--submgt-pud); }
#aihubTabPanel-subscription .submgt-prog { height: 8px; background: var(--submgt-g200); border-radius: 999px; overflow: hidden; }
#aihubTabPanel-subscription .submgt-pf { height: 100%; border-radius: inherit; transition: width 0.5s; }
#aihubTabPanel-subscription .submgt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}
#aihubTabPanel-subscription .submgt-btn-pu {
    background: #3b44db;
    color: #fff;
    border: 1px solid #2c34a8;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}
#aihubTabPanel-subscription .submgt-btn-pu:hover { background: #2f36b8; color: #fff; }
#aihubTabPanel-subscription .submgt-btn-bl { background: var(--submgt-bl); color: #fff; }
#aihubTabPanel-subscription .submgt-btn-gr { background: var(--submgt-gr); color: #fff; }
#aihubTabPanel-subscription .submgt-btn-am { background: var(--submgt-am); color: #fff; }
#aihubTabPanel-subscription .submgt-btn-ghost {
    background: var(--submgt-wh);
    color: var(--submgt-g700);
    border: 1px solid var(--submgt-g200);
}
#aihubTabPanel-subscription .submgt-btn-sm { padding: 7px 14px; font-size: 13px; font-weight: 800; }
#aihubTabPanel-subscription .submgt-btn-xs { padding: 5px 10px; font-size: 12px; font-weight: 800; border-radius: 6px; }
#aihubTabPanel-subscription .submgt-mb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#aihubTabPanel-subscription .submgt-mb.is-open { display: flex; }
#aihubTabPanel-subscription .submgt-mbox {
    width: 100%;
    max-width: 640px;
    margin: auto;
    background: var(--submgt-wh);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}
#aihubTabPanel-subscription .submgt-mhd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #f8f9ff 0%, #fff 100%);
    border-bottom: 1px solid #e2e8f0;
}
#aihubTabPanel-subscription .submgt-mhd h3 {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}
#aihubTabPanel-subscription .submgt-mclose {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-family: inherit;
    flex-shrink: 0;
}
#aihubTabPanel-subscription .submgt-mclose:hover { background: #e2e8f0; }
#aihubTabPanel-subscription .submgt-mbody { padding: 20px 22px; }
#aihubTabPanel-subscription .submgt-mft {
    padding: 14px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
#aihubTabPanel-subscription .submgt-inp {
    width: 100%;
    height: 40px;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--submgt-r8);
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--submgt-g900);
    background: var(--submgt-wh);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
#aihubTabPanel-subscription .submgt-inp:focus {
    border-color: #3b44db;
    box-shadow: 0 0 0 2px rgba(59, 68, 219, 0.15);
}
#aihubTabPanel-subscription .submgt-lbl {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
    display: block;
    line-height: 1.35;
}
#aihubTabPanel-subscription .submgt-tgl { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
#aihubTabPanel-subscription .submgt-tgl input { opacity: 0; width: 0; height: 0; position: absolute; }
#aihubTabPanel-subscription .submgt-tgl-sl {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s;
}
#aihubTabPanel-subscription .submgt-tgl-sl::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left 0.2s;
}
#aihubTabPanel-subscription .submgt-tgl input:checked + .submgt-tgl-sl { background: #3b44db; }
#aihubTabPanel-subscription .submgt-tgl input:checked + .submgt-tgl-sl::after { left: 20px; }
#aihubTabPanel-subscription .submgt-filter-btn {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#aihubTabPanel-subscription .submgt-filter-btn.is-active {
    border-color: #3b44db !important;
    background: #eef2ff !important;
    color: #1e1b4b !important;
    box-shadow: 0 1px 2px rgba(59, 68, 219, 0.08);
}
#aihubTabPanel-subscription .submgt-filter-btn:not(.is-active) {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    font-weight: 700 !important;
}
#aihubTabPanel-subscription .submgt-filter-btn:not(.is-active):hover {
    border-color: #c7caf0 !important;
    background: #f8fafc !important;
    color: #3b44db !important;
}
#aihubTabPanel-subscription .submgt-rec-hero {
    background: linear-gradient(135deg, #3b44db 0%, #4f5fef 50%, #6366f1 100%);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 28px rgba(59, 68, 219, 0.25);
}
#aihubTabPanel-subscription .submgt-rec-hero .submgt-btn {
    background: #fff;
    color: #3b44db;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-weight: 800;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#aihubTabPanel-subscription .submgt-rec-hero .submgt-btn:hover { background: #f7f8ff; }
@media (max-width: 640px) {
    #aihubTabPanel-subscription .submgt-dash-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #aihubTabPanel-subscription .submgt-dash-cards { grid-template-columns: 1fr !important; }
    #aihubTabPanel-subscription .submgt-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #aihubTabPanel-subscription .submgt-renew-btns { grid-template-columns: 1fr !important; }
    #aihubTabPanel-subscription .submgt-support-grid,
    #aihubTabPanel-subscription .submgt-docs-grid,
    #aihubTabPanel-subscription .submgt-rec-grid { grid-template-columns: 1fr !important; }
}
/* 구독관리 — 본문 가독성(작은 글씨·구역 구분) */
#submgt-pg-dashboard .submgt-dash-kpi { gap: 12px !important; margin-bottom: 14px !important; }
#submgt-pg-dashboard .submgt-kpi-lbl,
#aihubTabPanel-subscription .submgt-txt-secondary {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.4;
    color: var(--submgt-g500) !important;
    margin-top: 4px;
}
#aihubTabPanel-subscription .submgt-sec-tit { font-size: 15px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription .submgt-sec-sub,
#aihubTabPanel-subscription p.submgt-sec-sub {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--submgt-g500) !important;
    margin: 0;
}
#aihubTabPanel-subscription .submgt-budget-hd { font-size: 15px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription p.submgt-budget-hd { margin: 0; }
#aihubTabPanel-subscription .submgt-budget-sub { font-size: 13px !important; margin-top: 4px !important; }
#aihubTabPanel-subscription .submgt-budget-pct { font-size: 17px !important; font-weight: 900 !important; }
#aihubTabPanel-subscription .submgt-budget-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.45;
    color: var(--submgt-g500) !important;
    margin-top: 4px;
}
#aihubTabPanel-subscription .submgt-budget-foot strong { font-size: 14px; }
#aihubTabPanel-subscription .submgt-alert--dash {
    border: 1.5px solid #fcd34d;
    box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.12) inset;
}
#aihubTabPanel-subscription .submgt-alert__tit { font-size: 14px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription .submgt-alert__sub { font-size: 13px !important; line-height: 1.5 !important; }
#aihubTabPanel-subscription .submgt-dlist-hd { font-size: 15px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription .submgt-q-lbl { font-size: 13px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription .submgt-qbtn {
    padding: 15px 12px !important;
    border: 1.5px solid #b4bce8 !important;
    box-shadow: 0 1px 0 rgba(59, 68, 219, 0.05);
    border-radius: 12px;
}
#aihubTabPanel-subscription .submgt-qbtn.submgt-card-hov:hover {
    border-color: #3b44db !important;
    box-shadow: 0 6px 20px rgba(59, 68, 219, 0.12) !important;
}
#aihubTabPanel-subscription .submgt-doc-tit { font-size: 15px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription p.submgt-doc-tit { margin: 0 0 4px; }
#aihubTabPanel-subscription .submgt-doc-desc { font-size: 13px !important; line-height: 1.5 !important; }
#aihubTabPanel-subscription p.submgt-doc-desc { margin: 0 0 10px; }
#aihubTabPanel-subscription .submgt-docflow { border: 1.5px solid #a8b2eb !important; background: #fafbff; }
#aihubTabPanel-subscription .submgt-docflow__tit { font-size: 15px !important; font-weight: 800 !important; }
#aihubTabPanel-subscription .submgt-docflow__row { display: flex; align-items: center; gap: 0; min-width: 400px; }
#aihubTabPanel-subscription .submgt-docflow__col { text-align: center; min-width: 90px; flex-shrink: 0; padding: 0 2px; }
#aihubTabPanel-subscription .submgt-docflow__col .submgt-docflow__step-s { margin-top: 3px; }
#aihubTabPanel-subscription .submgt-docflow__line {
    flex: 1 1 12px;
    min-width: 12px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b8c1ef 0%, #7c8adb 50%, #b8c1ef 100%);
    box-shadow: 0 0 0 0.5px rgba(59, 68, 219, 0.15);
    align-self: center;
}
#aihubTabPanel-subscription .submgt-docflow__n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 13px;
    font-weight: 900;
    border: 2px solid;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.submgt-mbody {
    background-color: #fff;
}
#aihubTabPanel-subscription .submgt-docflow__l1 { background: var(--submgt-bll); border-color: var(--submgt-bl); color: var(--submgt-bl); }
#aihubTabPanel-subscription .submgt-docflow__l2 { background: var(--submgt-pul); border-color: var(--submgt-pu); color: var(--submgt-pu); }
#aihubTabPanel-subscription .submgt-docflow__l3 { background: var(--submgt-aml); border-color: var(--submgt-am); color: var(--submgt-am); }
#aihubTabPanel-subscription .submgt-docflow__l4 { background: var(--submgt-grl); border-color: var(--submgt-gr); color: var(--submgt-gr); }
#aihubTabPanel-subscription .submgt-docflow__step-t { font-size: 13px !important; font-weight: 800; color: var(--submgt-g900) !important; }
#aihubTabPanel-subscription .submgt-docflow__step-s { font-size: 12px !important; color: #4b5563 !important; }
#aihubTabPanel-subscription .submgt-docs-grid { gap: 14px !important; margin-bottom: 18px !important; }
#aihubTabPanel-subscription .submgt-pg--intro .submgt-sec-tit { margin-bottom: 4px; }
@media (max-width: 720px) {
    #aihubTabPanel-subscription .budget-sub-tab { font-size: 14px; min-height: 44px; }
}