@font-face {
    font-family: 'D2Coding';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'D2Coding', monospace;
    margin-bottom: 0;
}

/* ── 페이지 로딩 진행 바 ──────────────────────────── */
#kbs-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--bs-primary);
    z-index: 9999;
    transition: width 0.2s ease;
    pointer-events: none;
}

    #kbs-progress.done {
        opacity: 0;
        transition: width 0.1s ease, opacity 0.4s ease 0.1s;
    }

/* ── 사이드바 레이아웃 ─────────────────────────────── */
:root {
    --sidebar-width: 220px;
    --topbar-height: 50px;
    /* MD3 토널 팔레트 (라이트) */
    --md-nav-hover: rgba(0, 0, 0, .055);
    --md-nav-ripple: rgba(0, 0, 0, .10);
    --md-nav-active-bg: rgba(13, 110, 253, .12);
    --md-nav-active-fg: #0b5ed7;
    --md-nav-fg: #45464f;
    --md-nav-label: #74777f;
    --md-nav-divider: rgba(0, 0, 0, .08);
}


[data-bs-theme="dark"] {
    --md-nav-hover: rgba(255, 255, 255, .07);
    --md-nav-ripple: rgba(255, 255, 255, .14);
    --md-nav-active-bg: rgba(120, 160, 255, .20);
    --md-nav-active-fg: #b8ccff;
    --md-nav-fg: #c7c6d0;
    --md-nav-label: #91909a;
    --md-nav-divider: rgba(255, 255, 255, .09);
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    transition: width .2s cubic-bezier(.2, 0, 0, 1), min-width .2s cubic-bezier(.2, 0, 0, 1);
    overflow: hidden;
    background: var(--bs-body-bg);
}

    .sidebar.sidebar-hidden {
        width: 0;
        min-width: 0;
    }

/* 브랜드 헤더 */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 64px;
    padding: 0 1rem;
    font-size: .95rem;
    color: var(--md-nav-label);
    white-space: nowrap;
    border-bottom: 1px solid var(--md-nav-divider) !important;
}

    .sidebar-brand a {
        color: var(--bs-body-color);
        letter-spacing: -.01em;
    }

/* 스크롤 영역 */
.sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem .75rem 1rem !important;
    scrollbar-width: thin;
    scrollbar-color: var(--md-nav-divider) transparent;
}

    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--md-nav-divider);
        border-radius: 3px;
    }

/* 섹션 라벨 */
.sidebar-section {
    display: flex;
    align-items: center;
    height: 36px;
    margin-top: .75rem;
    padding: 0 1rem !important;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--md-nav-label);
    white-space: nowrap;
    border-top: 1px solid var(--md-nav-divider);
    padding-top: .75rem !important;
}

    .sidebar-section:first-child {
        border-top: 0;
        margin-top: 0;
    }

/* 내비게이션 아이템 — MD3 pill */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 44px;
    padding: 0 1rem;
    margin-bottom: 2px;
    border-radius: 22px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--md-nav-fg);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .15s ease, color .15s ease;
}

    .sidebar-link .material-symbols-outlined {
        font-size: 20px;
        flex: 0 0 auto;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
        transition: font-variation-settings .15s ease;
    }

    .sidebar-link .nav-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-link:hover {
        background: var(--md-nav-hover);
        color: var(--bs-body-color);
    }

    /* 리플(터치 리스폰스) */
    .sidebar-link::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--md-nav-ripple);
        opacity: 0;
        transition: opacity .35s ease;
        z-index: -1;
    }

    .sidebar-link:active::after {
        opacity: 1;
        transition: opacity 0s;
    }

    .sidebar-link:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: -2px;
        box-shadow: none;
    }

    /* 활성 상태 — secondary container */
    .sidebar-link.active {
        background: var(--md-nav-active-bg);
        color: var(--md-nav-active-fg);
        font-weight: 600;
    }

        .sidebar-link.active .material-symbols-outlined {
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        }

        .sidebar-link.active:hover {
            background: var(--md-nav-active-bg);
            color: var(--md-nav-active-fg);
        }

    /* 우측 뱃지(선택) */
    .sidebar-link .nav-badge {
        margin-left: auto;
        font-size: .6875rem;
        font-weight: 600;
        color: var(--md-nav-label);
    }

/* 푸터 아이콘 버튼 */
.sidebar-footer {
    white-space: nowrap;
    border-top: 1px solid var(--md-nav-divider) !important;
}

.md-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-nav-fg);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .md-icon-btn:hover {
        background: var(--md-nav-hover);
        color: var(--bs-body-color);
    }

    .md-icon-btn:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
        box-shadow: none;
    }

    .md-icon-btn .material-symbols-outlined {
        font-size: 22px;
        line-height: 1;
    }

/* ── 모바일 오버레이 드로어 ─────────────────────── */
#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 300;
        transform: translateX(0);
        transition: transform .25s cubic-bezier(.2, 0, 0, 1);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        background-color: var(--bs-body-bg);
        border-radius: 0 16px 16px 0; /* MD3 modal drawer */
    }

        .sidebar.sidebar-hidden {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            transform: translateX(calc(-1 * var(--sidebar-width)));
        }

    #main-wrapper {
        width: 100%;
        margin-left: 0 !important;
    }

    #sidebar-backdrop.show {
        display: block;
    }
}

/*.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
}

    .sidebar.sidebar-hidden {
        width: 0;
        min-width: 0;
    }

.sidebar-brand a {
    color: var(--bs-body-color);
}

.sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color);
    padding: 0 0.5rem;
    white-space: nowrap;
}

.sidebar-link {
    display: block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

    .sidebar-link:hover {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

    .sidebar-link.active {
        background: var(--bs-primary);
        color: #fff;
    }

.sidebar-footer {
    white-space: nowrap;
}*/

/* ── 모바일 사이드바 오버레이 ─────────────────────── */
/*#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 300;
        transform: translateX(0);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
        background-color: var(--bs-body-bg);
    }

        .sidebar.sidebar-hidden {
            width: var(--sidebar-width);*/ /* 모바일에서는 너비 유지, transform으로 숨김 */
            /*min-width: var(--sidebar-width);
            transform: translateX(calc(-1 * var(--sidebar-width)));
        }

    #main-wrapper {
        width: 100%;
    }

    .sidebar.sidebar-hidden + #main-wrapper,
    #main-wrapper {
        margin-left: 0 !important;
    }

    #sidebar-backdrop.show {
        display: block;
    }
}*/

/* ── 상단 헤더 ────────────────────────────────────── */
.topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bs-body-bg);
}

.topbar-toggle {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border-radius: 0.375rem;
    line-height: 1;
}

    .topbar-toggle:hover {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

/* 검색바 — 레퍼런스 디자인 */
.topbar-search {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 600px;
    background: var(--bs-secondary-bg);
    border-radius: 8px;
    padding: 0 0.75rem;
    gap: 0.5rem;
}

.topbar-search-icon {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    line-height: 1;
}

.topbar-search-input {
    flex-grow: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    padding: 0.45rem 0;
}

    .topbar-search-input::placeholder {
        color: var(--bs-secondary-color);
    }

/* 검색창 클릭 시 테두리 강조 */
.topbar-search:focus-within {
    outline: 1px solid var(--bs-primary);
}

#main-wrapper {
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

/* 검색 키워드 하이라이트 */
mark {
    background: rgba(255, 213, 0, 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

table thead th {
    text-align: center;
}

table tbody td {
    vertical-align: middle;
}

.Count {
    text-align: center;
    width: 100px;
}

.CreatedAt {
    text-align: center;
    width: 170px;
}

.btn-es {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
}

/*---------------------------------------------------------------------*/
.text-custom-dark {
    color: var(--bs-body-color) !important;
}


.fs-7 {
    font-size: 0.8rem;
}

.fs-8 {
    font-size: 0.7rem;
}

.item-more-menu-btn {
    color: inherit;
}

    .item-more-menu-btn .material-symbols-outlined {
        font-size: 20px;
        vertical-align: middle;
    }

.item-more-menu-list {
    min-width: 8rem;
    --bs-dropdown-link-active-bg: rgba(255,255,255,.08);
}

    .item-more-menu-list .material-symbols-outlined {
        font-size: 18px;
    }

    .item-more-menu-list .dropdown-item.text-danger:hover,
    .item-more-menu-list .dropdown-item.text-danger:focus {
        background-color: rgba(240,96,95,.12);
    }


.badge-question {
    display: inline-block;
    padding: var(--bs-badge-padding-y, 0.35em) var(--bs-badge-padding-x, 0.65em);
    font-size: 0.75em;
    font-weight: 400;
    line-height: 1;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: rgba(215, 225, 255, 0.5);
    border: 1px solid var(--bs-primary);
    border-radius: 50rem;
}

/* 공통 */
.badge-soft {
    display: inline-block;
    padding: 0.35em 0.75em;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
    color: var(--bdg-fg);
    background-color: var(--bdg-bg);
    border: 1px solid var(--bdg-bd);
}

    /* 라이트 모드 */
    .badge-soft.blue {
        --bdg-bg: #e7edff;
        --bdg-fg: #1f47c4;
        --bdg-bd: #b7c7ff;
    }

    .badge-soft.green {
        --bdg-bg: #e2f6ea;
        --bdg-fg: #15693b;
        --bdg-bd: #a6dcbd;
    }

    .badge-soft.amber {
        --bdg-bg: #fff3d8;
        --bdg-fg: #8a5800;
        --bdg-bd: #efcd8a;
    }

    .badge-soft.rose {
        --bdg-bg: #ffe8ea;
        --bdg-fg: #a3213a;
        --bdg-bd: #f5b3bd;
    }

    .badge-soft.violet {
        --bdg-bg: #f1e9ff;
        --bdg-fg: #5a34b0;
        --bdg-bd: #cbb4f4;
    }

    .badge-soft.cyan {
        --bdg-bg: #e0f7fa;
        --bdg-fg: #006875;
        --bdg-bd: #a2e3eb;
    }

    .badge-soft.gray {
        --bdg-bg: #f1f3f5;
        --bdg-fg: #495057;
        --bdg-bd: #ced4da;
    }

/* 다크 모드 (Bootstrap 5.3 다크 테마 기준) */
[data-bs-theme="dark"] .badge-soft.blue {
    --bdg-bg: rgba(90,140,255,.18);
    --bdg-fg: #a9c4ff;
    --bdg-bd: rgba(120,160,255,.45);
}

[data-bs-theme="dark"] .badge-soft.green {
    --bdg-bg: rgba(52,199,110,.18);
    --bdg-fg: #7fe3a9;
    --bdg-bd: rgba(90,210,140,.45);
}

[data-bs-theme="dark"] .badge-soft.amber {
    --bdg-bg: rgba(255,186,50,.18);
    --bdg-fg: #ffd479;
    --bdg-bd: rgba(240,190,80,.45);
}

[data-bs-theme="dark"] .badge-soft.rose {
    --bdg-bg: rgba(255,95,120,.18);
    --bdg-fg: #ffa6b4;
    --bdg-bd: rgba(255,125,150,.45);
}

[data-bs-theme="dark"] .badge-soft.violet {
    --bdg-bg: rgba(165,115,255,.20);
    --bdg-fg: #cbb0ff;
    --bdg-bd: rgba(180,140,255,.45);
}

[data-bs-theme="dark"] .badge-soft.cyan {
    --bdg-bg: rgba(0, 200, 225, 0.18);
    --bdg-fg: #7ee8fa;
    --bdg-bd: rgba(80, 215, 235, 0.45);
}

[data-bs-theme="dark"] .badge-soft.gray {
    --bdg-bg: rgba(173, 181, 189, 0.18);
    --bdg-fg: #dee2e6;
    --bdg-bd: rgba(173, 181, 189, 0.45);
}

/* 아이콘 색상 및 애니메이션 정의 */
#theme-toggle {
    transition: all 0.2s ease-in-out;
}

#theme-icon {
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 라이트 모드일 때: 달 아이콘 (보라/네이비 톤) */
[data-bs-theme="light"] #theme-icon {
    color: #5e35b1!important; /* 신비로운 딥 퍼플 */
}

[data-bs-theme="light"] #theme-toggle:hover {
}

/* 다크 모드일 때: 해 아이콘 (따뜻한 앰버/골드 톤) */
[data-bs-theme="dark"] #theme-icon {
    color: #ffb300!important; /* 따뜻한 앰버/황금색 */
}

[data-bs-theme="dark"] #theme-toggle:hover {
}

.no-hover-focus:hover {
    background-color: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    outline: none !important;
}

.no-hover-focus:focus {
    background-color: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    outline: none !important;
}






.qa-cell {
    padding: .5rem .25rem;
}

.qa-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .875rem;
    border: 1px solid rgba(148, 130, 238, .22);
    border-left: 3px solid #8b7cf6;
    border-radius: .625rem;
    background: rgba(139, 124, 246, .04);
}

/* Q / A 한 줄 */
.qa-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.qa-tag {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

    .qa-tag.q {
        background: #8b7cf6;
        color: #fff;
    }

    .qa-tag.a {
        background: rgba(139, 124, 246, .16);
        color: #8b7cf6;
    }

.qa-text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    word-break: break-word;
}

.qa-question .qa-text {
    font-weight: 600;
}

.qa-answer .qa-text {
    opacity: .78;
    font-size: .8125rem;
}

.qa-answer {
    padding-top: .5rem;
    border-top: 1px dashed rgba(148, 130, 238, .22);
}

/* 메타 배지 */
.qa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .125rem;
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 1.4;
    background: rgba(139, 124, 246, .12);
    color: #a99bfb;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 22px;
}

    .qa-chip svg {
        flex: 0 0 auto;
        opacity: .8;
    }

    .qa-chip.is-answer {
        background: rgba(94, 234, 212, .12);
        color: #5eead4;
    }

    .qa-chip.is-time {
        background: rgba(255, 255, 255, .06);
        color: #9aa0ae;
    }

[data-bs-theme="light"] .qa-chip svg {
    flex: 0 0 auto;
    opacity: .9;
}

[data-bs-theme="light"] .qa-chip.is-answer {
    background-color: #e6f7f5;
    color: #0d9488;
}

[data-bs-theme="light"] .qa-chip.is-time {
    background-color: #f1f3f5;
    color: #495057;
}


/* 범례 */
.qa-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
}

.qa-legend-title {
    font-size: .6875rem;
    font-weight: 600;
    color: #9aa0ae;
    margin-right: .125rem;
}

.qa-dot {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* 배지 (범례·카드 공용) */
.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(139, 124, 246, .14); /* 질문자 — 보라 */
    color: #a99bfb;
}

    .qa-chip.is-answer { /* 답변자 — 청록 */
        background: rgba(94, 234, 212, .14);
        color: #5eead4;
    }

    .qa-chip.is-wrong { /* 틀려요 — 주황/빨강 */
        background: rgba(248, 113, 113, .14);
        color: #f87171;
    }

    .qa-chip.is-time { /* 일시 — 회색 */
        background: rgba(255, 255, 255, .06);
        color: #9aa0ae;
    }






/* ── 통계 카드 (Material 3 Stat Tile) ─────────────── */
.stat-grid {
    --stat-gap: .75rem;
}

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .875rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--stat-bd);
    border-radius: 16px;
    background: var(--stat-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .18s cubic-bezier(.2,0,0,1), transform .18s cubic-bezier(.2,0,0,1), background-color .18s ease;
}

a.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10);
    color: var(--bs-body-color);
}

a.stat-card:focus-visible {
    outline: 2px solid var(--stat-fg);
    outline-offset: 2px;
}

.stat-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--stat-icon-bg);
    color: var(--stat-fg);
}

    .stat-icon .material-symbols-outlined {
        font-size: 24px;
        line-height: 1;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

.stat-body {
    min-width: 0;
}

.stat-value {
    display: block;
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--stat-fg);
}

.stat-label {
    display: block;
    margin-top: .125rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 톤 — 라이트 */
.stat-card.blue {
    --stat-bg: #eef2ff;
    --stat-bd: #c6d2ff;
    --stat-fg: #1f47c4;
    --stat-icon-bg: rgba(31,71,196,.12);
}

.stat-card.green {
    --stat-bg: #e8f7ee;
    --stat-bd: #b3ddc5;
    --stat-fg: #15693b;
    --stat-icon-bg: rgba(21,105,59,.12);
}

.stat-card.violet {
    --stat-bg: #f4edff;
    --stat-bd: #d4c2f6;
    --stat-fg: #5a34b0;
    --stat-icon-bg: rgba(90,52,176,.12);
}

.stat-card.cyan {
    --stat-bg: #e4f7fa;
    --stat-bd: #aae2ea;
    --stat-fg: #006875;
    --stat-icon-bg: rgba(0,104,117,.12);
}

.stat-card.amber {
    --stat-bg: #fff6e2;
    --stat-bd: #f0d296;
    --stat-fg: #8a5800;
    --stat-icon-bg: rgba(138,88,0,.12);
}

.stat-card.rose {
    --stat-bg: #ffecee;
    --stat-bd: #f5bcc4;
    --stat-fg: #a3213a;
    --stat-icon-bg: rgba(163,33,58,.12);
}

.stat-card.gray {
    --stat-bg: #f2f4f6;
    --stat-bd: #d3d8de;
    --stat-fg: #495057;
    --stat-icon-bg: rgba(73,80,87,.12);
}

/* 톤 — 다크 */
[data-bs-theme="dark"] .stat-card.blue {
    --stat-bg: rgba(90,140,255,.10);
    --stat-bd: rgba(120,160,255,.28);
    --stat-fg: #a9c4ff;
    --stat-icon-bg: rgba(120,160,255,.20);
}

[data-bs-theme="dark"] .stat-card.green {
    --stat-bg: rgba(52,199,110,.10);
    --stat-bd: rgba(90,210,140,.28);
    --stat-fg: #7fe3a9;
    --stat-icon-bg: rgba(90,210,140,.20);
}

[data-bs-theme="dark"] .stat-card.violet {
    --stat-bg: rgba(165,115,255,.10);
    --stat-bd: rgba(180,140,255,.28);
    --stat-fg: #cbb0ff;
    --stat-icon-bg: rgba(180,140,255,.20);
}

[data-bs-theme="dark"] .stat-card.cyan {
    --stat-bg: rgba(0,200,225,.10);
    --stat-bd: rgba(80,215,235,.28);
    --stat-fg: #7ee8fa;
    --stat-icon-bg: rgba(80,215,235,.20);
}

[data-bs-theme="dark"] .stat-card.amber {
    --stat-bg: rgba(255,186,50,.10);
    --stat-bd: rgba(240,190,80,.28);
    --stat-fg: #ffd479;
    --stat-icon-bg: rgba(240,190,80,.20);
}

[data-bs-theme="dark"] .stat-card.rose {
    --stat-bg: rgba(255,95,120,.10);
    --stat-bd: rgba(255,125,150,.28);
    --stat-fg: #ffa6b4;
    --stat-icon-bg: rgba(255,125,150,.20);
}

[data-bs-theme="dark"] .stat-card.gray {
    --stat-bg: rgba(173,181,189,.09);
    --stat-bd: rgba(173,181,189,.26);
    --stat-fg: #dee2e6;
    --stat-icon-bg: rgba(173,181,189,.18);
}

/* 아주 좁은 화면 — 아이콘 축소 */
@media (max-width: 419.98px) {
    .stat-card {
        padding: .875rem;
        gap: .625rem;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

        .stat-icon .material-symbols-outlined {
            font-size: 20px;
        }
}