/* ── Light Mode ── */
        :root {
            --primary: #6c63ff;
            --secondary: #48cfad;
            --dark: #2d3436;
            --light-bg: #f8f9fa;
            --card-shadow: 0 4px 15px rgba(0,0,0,0.08);
            --body-bg: #f5f6fa;
            --card-bg: #fff;
            --text-color: #2d3436;
            --text-muted: #636e72;
            --border-color: #eee;
            --input-bg: #fff;
            --navbar-bg: linear-gradient(135deg, #2d3436, #6c63ff);
            --footer-bg: linear-gradient(135deg, #2d3436, #1e1e2e);
        }
        /* ── Dark Mode ── */
        html.dark-mode {
            --body-bg: #0f0f1a;
            --card-bg: #16213e;
            --text-color: #f0f0f0;
            --text-muted: #b0b0c8;
            --border-color: #2e2e50;
            --input-bg: #0f3460;
            --card-shadow: 0 4px 15px rgba(0,0,0,0.4);
            --navbar-bg: linear-gradient(135deg, #0f3460, #6c63ff);
            --footer-bg: linear-gradient(135deg, #0d0d1a, #1a1a2e);
        }
        /* ── Dark Mode: CSS 변수 기반 (선택자 최소화 → 토글 즉각 반응) ── */
        /* 변수만 바꾸면 상속으로 자동 적용 — 브라우저 재계산 최소화 */
        :root {
            --dm-text:       #f0f0f0;
            --dm-text-muted: #b0b0c8;
            --dm-card-color: #e0e0e0;
            --dm-link-color: #7eb3ff;
            --dm-dropdown-bg: #1e2535;
            --dm-modal-bg:   #1a1a2e;
            --dm-pagination-bg: #16213e;
            --dm-code-bg:    #2d2d2d;
            --dm-pre-bg:     #1a1a2e;
            --dm-select-bg:  #16213e;
        }
        /* 다크모드 — 개별 컴포넌트 변수 전달 (선택자 9개로 압축) */
        html.dark-mode body                          { color: var(--dm-text); }
        html.dark-mode .card,
        html.dark-mode .card-title,
        html.dark-mode .card-text,
        html.dark-mode .text-dark,
        html.dark-mode p,
        html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,
        html.dark-mode h4,html.dark-mode h5,html.dark-mode h6,
        html.dark-mode label,
        html.dark-mode .table                        { color: var(--dm-card-color); }
        html.dark-mode .form-text                    { color: var(--dm-text-muted); }
        html.dark-mode .table-hover tbody tr:hover td{ color:#fff; background:rgba(255,255,255,.05); }
        html.dark-mode .dropdown-menu                { background:var(--dm-dropdown-bg); border-color:#2e2e50; }
        html.dark-mode .dropdown-item                { color: var(--dm-card-color); }
        html.dark-mode .dropdown-item:hover          { background:rgba(108,99,255,.2); color:#fff; }
        html.dark-mode .badge                        { color:#fff; }
        html.dark-mode .modal-content                { background:var(--dm-modal-bg); color:var(--dm-card-color); border-color:#2e2e50; }
        html.dark-mode .modal-header,
        html.dark-mode .modal-footer                 { border-color:#2e2e50; }
        html.dark-mode .btn-close,
        html.dark-mode .close                        { filter:invert(1); color:#fff; text-shadow:none; }
        html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color:var(--dm-link-color); }
        html.dark-mode code                          { background:var(--dm-code-bg); color:#f0f0f0; }
        html.dark-mode pre                           { background:var(--dm-pre-bg); color:#f0f0f0; border-color:#2e2e50; }
        html.dark-mode hr                            { border-color:#2e2e50; }
        html.dark-mode .pagination .page-link        { background:var(--dm-pagination-bg); border-color:#2e2e50; color:var(--dm-text-muted); }
        html.dark-mode .pagination .page-item.active .page-link { background:#6c63ff; border-color:#6c63ff; color:#fff; }
        html.dark-mode .nav-tabs .nav-link           { color:var(--dm-text-muted); border-color:transparent; }
        html.dark-mode .nav-tabs .nav-link.active    { color:#fff; background:#16213e; border-color:#2e2e50 #2e2e50 #16213e; }
        html.dark-mode .tab-content                  { border-color:#2e2e50; }
        html.dark-mode select option                 { background:var(--dm-select-bg); color:var(--dm-card-color); }

        /* ═══ 글자색 대비 보정 (라이트/다크 공통) ═══
           원칙: 배경이 '고정된 밝은색'이면 글자를 어둡게, 배경이 테마를 따르면 글자를 테마에 맞춘다. */
        /* 탭(.nav-tabs): 네비바 밖에서는 테마 글자색을 쓴다 */
        .nav-tabs .nav-link { color: #495057; }
        .nav-tabs .nav-link:hover { color: #6c63ff; }
        .nav-tabs .nav-link.active { color: #6c63ff; }
        html.dark-mode .nav-tabs .nav-link:hover { color: #fff; }
        .nav-pills .nav-link { color: #495057; }
        .nav-pills .nav-link.active { color: #fff; }
        html.dark-mode .nav-pills .nav-link { color: var(--dm-text-muted); }
        html.dark-mode .nav-pills .nav-link.active { color: #fff; }
        /* 밝은 배경 배지는 다크모드에서도 어두운 글자 (기존 .badge{color:#fff}가 흰 배경 배지를 지웠다) */
        html.dark-mode .badge-light, html.dark-mode .bg-light.badge, html.dark-mode .badge-warning { color: #212529; }
        /* 다크모드 카테고리/카운트 배지: 밝은 흰 원 대신 테마에 맞는 보라 톤 + 밝은 글자 */
        html.dark-mode .badge-pill.badge-light { background-color: rgba(108,99,255,.28); color: #e6e4ff; border: 1px solid rgba(140,130,255,.35); }
        .badge-secondary, .badge.bg-secondary { color: #fff; }
        /* text-dark 는 Bootstrap 이 !important 로 고정하므로 다크모드에서 !important 로 되돌린다 */
        html.dark-mode .text-dark, html.dark-mode a.text-dark { color: var(--dm-card-color) !important; }
        html.dark-mode .text-dark:hover, html.dark-mode a.text-dark:hover { color: #fff !important; }
        html.dark-mode .text-muted { color: var(--dm-text-muted) !important; }
        html.dark-mode .text-body { color: var(--dm-card-color) !important; }
        /* 다크모드에서 '연한 고정 배경' 위의 글자는 어둡게 */
        html.dark-mode .bg-light, html.dark-mode .alert-light { color: #212529; }
        html.dark-mode .bg-light .text-dark, html.dark-mode .bg-light a.text-dark { color: #212529 !important; }
        html.dark-mode .table thead th { color: var(--dm-card-color); }
        /* 라이트모드: 흰 배경 위에서 너무 연한 색 글자 보정 */
        html:not(.dark-mode) .text-warning { color: #b8860b !important; }
        html:not(.dark-mode) .text-info { color: #0f7f90 !important; }
        html:not(.dark-mode) .text-success { color: #1e7e34 !important; }
        html:not(.dark-mode) .text-muted { color: #6c757d !important; }
        /* 라이트모드: 흰 배경 위 연한 노랑/청록 버튼·숫자가 안 보이던 문제 */
        html:not(.dark-mode) .btn-outline-warning { color: #8a6500; border-color: #d4a017; }
        html:not(.dark-mode) .btn-outline-warning:hover { color: #212529; background-color: #ffc107; }
        html:not(.dark-mode) .btn-outline-success { color: #1e7e34; }
        html:not(.dark-mode) .btn-outline-success:hover { color: #fff; }
        html:not(.dark-mode) .btn-outline-info { color: #0f7f90; }
        html:not(.dark-mode) .btn-outline-info:hover { color: #fff; }
        html:not(.dark-mode) [style*="color:#48cfad"], html:not(.dark-mode) [style*="color: #48cfad"] { color: #1f9d80 !important; }
        html:not(.dark-mode) [style*="color:#ffc107"], html:not(.dark-mode) [style*="color: #ffc107"] { color: #b8860b !important; }
        html:not(.dark-mode) [style*="color:#F1C40F"], html:not(.dark-mode) [style*="color: #F1C40F"], html:not(.dark-mode) [style*="color:#f1c40f"] { color: #b7950b !important; }
        /* 다크모드 안전장치: '밝은 색을 인라인으로 고정한 배경' 위의 글자는 항상 어둡게.
           (템플릿마다 background:#f8f9fa / #fffde7 등을 직접 지정해서, 테마 글자색(밝음)과 겹쳐 안 보이던 문제) */
        html.dark-mode [style*="background:#f8f9fa"], html.dark-mode [style*="background: #f8f9fa"],
        html.dark-mode [style*="background:#f5f5f5"], html.dark-mode [style*="background: #f5f5f5"],
        html.dark-mode [style*="background:#fafafa"], html.dark-mode [style*="background: #fafafa"],
        html.dark-mode [style*="background:#fffde7"], html.dark-mode [style*="background: #fffde7"],
        html.dark-mode [style*="background:#fff9c4"], html.dark-mode [style*="background:#fff8c0"],
        html.dark-mode [style*="background:#fff;"], html.dark-mode [style*="background:#ffffff"],
        html.dark-mode [style*="background:white"], html.dark-mode [style*="background: white"],
        html.dark-mode [style*="background:#f0f0f0"], html.dark-mode [style*="background:#eee"],
        html.dark-mode [style*="background:#f8f7ff"], html.dark-mode [style*="background:#f6f5ff"], html.dark-mode [style*="background:#eef0ff"],
        html.dark-mode [style*="background:#e4e8e9"],
        html.dark-mode [style*="linear-gradient(135deg,#fffde7"], html.dark-mode [style*="linear-gradient(135deg,#f"]
        { color: #212529 !important; }
        /* 라이트모드: 흰 배경 위 연한 회색/주황/분홍 인라인 글자 보정 */
        html:not(.dark-mode) [style*="color:#aaa"], html:not(.dark-mode) [style*="color: #aaa"],
        html:not(.dark-mode) [style*="color:#999"], html:not(.dark-mode) [style*="color:#9ca3af"],
        html:not(.dark-mode) [style*="color:#bbb"], html:not(.dark-mode) [style*="color:#ccc"],
        html:not(.dark-mode) [style*="color:#888"] { color: #6b7280 !important; }
        html:not(.dark-mode) [style*="color:#f39c12"] { color: #b9770e !important; }
        html:not(.dark-mode) [style*="color:#E67E22"], html:not(.dark-mode) [style*="color:#e67e22"] { color: #b9560f !important; }
        html:not(.dark-mode) [style*="color:#f953c6"], html:not(.dark-mode) [style*="color:#F953C6"] { color: #b3208f !important; }
        html:not(.dark-mode) small, html:not(.dark-mode) .pf-stat small { color: #6b7280; }
        /* 다크모드: Bootstrap 의 고정 흰/연회색 배경 유틸리티는 글자를 어둡게 하는 대신 배경을 다크 톤으로 바꾼다 */
        html.dark-mode .bg-white { background-color: var(--dm-card-bg, #16213e) !important; color: var(--dm-card-color, #e0e0e0); }
        html.dark-mode .table-light, html.dark-mode .table-light > th, html.dark-mode .table-light > td,
        html.dark-mode .thead-light th, html.dark-mode .table .thead-light th { background-color: #1d2a4d !important; color: var(--dm-card-color, #e0e0e0) !important; border-color: #2e2e50; }
        html.dark-mode .card-header.bg-white h1, html.dark-mode .card-header.bg-white h2, html.dark-mode .card-header.bg-white h3,
        html.dark-mode .card-header.bg-white h4, html.dark-mode .card-header.bg-white h5, html.dark-mode .card-header.bg-white h6 { color: var(--dm-card-color, #e0e0e0); }
        html.dark-mode [style*="background:#f8f7ff"] .text-muted, html.dark-mode [style*="background:#f8f9fa"] .text-muted,
        html.dark-mode [style*="background:#f6f5ff"] .text-muted, html.dark-mode .bg-light .text-muted,
        html.dark-mode .bg-light small, html.dark-mode .bg-light .form-text { color: #5f6675 !important; }
        /* 노란/청록/초록 등 '색이 있는 배경'의 배지는 다크모드 링크색·text-dark 밝은색 규칙의 영향을 받지 않게 고정 */
        html.dark-mode .badge.bg-warning, html.dark-mode .badge.bg-warning.text-dark, html.dark-mode .badge-warning,
        html.dark-mode .bg-warning, html.dark-mode .bg-warning.text-dark { color: #212529 !important; }
        html.dark-mode a.badge-info, html.dark-mode a.badge-success, html.dark-mode a.badge-primary,
        html.dark-mode a.badge-danger, html.dark-mode a.badge-secondary, html.dark-mode a.badge-dark { color: #fff !important; }
        html.dark-mode a.badge-info { background-color: #138496; }
        html.dark-mode a.badge-warning, html.dark-mode a.badge-light { color: #212529 !important; }
        /* 다크모드: 표 헤더·카드 헤더·폼 라벨이 밝은 고정 배경 위에 있으면 어둡게 */
        html.dark-mode table th[style*="background"], html.dark-mode thead[style*="background"] th,
        html.dark-mode .card-header[style*="background:#f"], html.dark-mode .card-header[style*="background: #f"] { color: #212529 !important; }
        html.dark-mode .bg-light label, html.dark-mode .bg-light .form-check-label { color: #212529; }
        html:not(.dark-mode) .pf-stat b.text-success { color: #1e7e34 !important; }
        html:not(.dark-mode) .pf-stat b.text-info { color: #0f7f90 !important; }
        html:not(.dark-mode) .pf-stat b.text-warning { color: #9a6b00 !important; }
        /* 다크모드: 밝은 고정 배경(배지 카드 등) 안쪽 자식이 인라인 color 를 직접 가진 경우에도 읽히게 한다 */
        html.dark-mode .badge-card[style*="#fffde7"] [style*="color:#E67E22"] { color: #9a4b00 !important; }
        html.dark-mode .badge-card[style*="#fffde7"] [style*="color:#F1C40F"], html.dark-mode .badge-card [style*="color:#F1C40F"] { color: #8a6d00 !important; }
        html.dark-mode .badge-card[style*="#fafafa"] [style*="color:#ccc"], html.dark-mode .badge-card [style*="color:#ccc"] { color: #6b7280 !important; }
        html.dark-mode .badge-card [style*="color:#999"], html.dark-mode .badge-card [style*="color:#aaa"] { color: #555 !important; }
        html.dark-mode .badge-card [style*="color:#333"] { color: #212529 !important; }
        html.dark-mode .badge-card { opacity: 1; }
        html.dark-mode .badge-card[style*="opacity:0.5"] { opacity: .75; }
        /* 라이트모드: 같은 배지 카드의 연한 글자 */
        html:not(.dark-mode) .badge-card [style*="color:#F1C40F"] { color: #8a6d00 !important; }
        html:not(.dark-mode) .badge-card [style*="color:#E67E22"] { color: #a84c00 !important; }
        /* .card-header 는 기본이 '그라디언트 + 흰 글자'다. 템플릿이 bg-white/연한 배경으로 덮어쓴 헤더는 글자를 어둡게 한다. */
        .card-header.bg-white, .card-header.bg-light, .card-header[style*="background:#f"], .card-header[style*="background: #f"],
        .card-header[style*="background:#fff"], .card-header[style*="background:white"] { color: #2d3436; }
        .card-header.bg-white h1, .card-header.bg-white h2, .card-header.bg-white h3, .card-header.bg-white h4,
        .card-header.bg-white h5, .card-header.bg-white h6, .card-header.bg-light h5, .card-header.bg-light h6 { color: #2d3436; }
        html.dark-mode .card-header.bg-white, html.dark-mode .card-header.bg-white h5 { color: var(--dm-card-color, #e0e0e0); }
        /* 다크모드: 연보라 반투명 배경 위의 #6c63ff 글자/아이콘은 밝은 보라로 */
        html.dark-mode [style*="color:#6c63ff"] { color: #b3adff !important; }
        /* 레벨 색(데이터 값)을 글자색으로 쓰는 요소: 밝은 배경에서는 명도를 낮춰 대비 확보 */
        /* color-mix 로 글자색 자체를 바꾼다(필터 X → 실제 계산 색이 바뀌어 대비가 정확) */
        html:not(.dark-mode) .lv-text { color: color-mix(in srgb, var(--lvc, #555) 52%, #000) !important; }
        html.dark-mode .lv-text { color: color-mix(in srgb, var(--lvc, #ddd) 70%, #fff) !important; }
        /* 등급 로드맵처럼 밝은 고정 배경(#f8f9fa) 위에 놓이는 경우는 다크모드여도 어둡게 */
        html.dark-mode [style*="background:#f8f9fa"] .lv-text, html.dark-mode [style*="background:#e4e8e9"] .lv-text { color: color-mix(in srgb, var(--lvc, #555) 52%, #000) !important; }
        /* 레벨 색을 배경으로 쓰는 흰 글자 버튼: 레벨 색이 밝은 회색/연녹색이면 글자 대비가 모자라 어두운 오버레이를 깐다 */
        /* 레벨 색 배경 + 흰 글자 버튼: 색이 밝아도 글자가 읽히도록 어두운 오버레이 + 글자 그림자 */
        .lv-btn { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
        /* 레벨 색을 배경으로 쓰는 흰 글자 버튼: 밝은 회색 계열 배경에서도 읽히게 */
        a[style*="background:#95a5a6"], a[style*="background: #95a5a6"] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
        html.dark-mode [style*="background:#f8f7ff"] *, html.dark-mode [style*="background:#f6f5ff"] *, html.dark-mode [style*="background:#e4e8e9"] *,
        html.dark-mode [style*="background:#f8f9fa"] *, html.dark-mode [style*="background:#f5f5f5"] *,
        html.dark-mode [style*="background:#fafafa"] *, html.dark-mode [style*="background:#fffde7"] *,
        html.dark-mode [style*="background:#fff9c4"] *, html.dark-mode [style*="background:#fff8c0"] *,
        html.dark-mode [style*="linear-gradient(135deg,#fffde7"] *
        { color: inherit; }


/* 프로필 드롭다운 짤림 방지 */
/* navbar/navbar-collapse에 overflow 설정하면 Bootstrap4 collapse 작동 안 함 → 설정 제거 */
.navbar .dropdown-menu {
  max-height: 80vh;
  overflow-y: auto;
}
/* 스크롤바 스타일 */
.navbar .dropdown-menu::-webkit-scrollbar { width: 4px; }
.navbar .dropdown-menu::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

        body { background-color: var(--body-bg); color: var(--text-color); font-family: 'Segoe UI', Tahoma, sans-serif; overflow-x: hidden; margin: 0; padding: 0; }
        .navbar { background: var(--navbar-bg) !important; box-shadow: 0 2px 15px rgba(108,99,255,0.3); }
        .navbar-brand { color: #fff !important; font-weight: 800; font-size: 1.3rem; padding: 2px 0; line-height:1; }
        .navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
        .navbar .nav-link:hover { color: #fff !important; }
        .card { border: none; border-radius: 12px; box-shadow: var(--card-shadow); background: var(--card-bg); color: var(--text-color); }
        .card-header { background: linear-gradient(135deg, #6c63ff, #48cfad); color: white; border-radius: 12px 12px 0 0 !important; }
        .btn-primary { background: #6c63ff; border-color: #6c63ff; border-radius: 8px; }
        .btn-primary:hover { background: #5a52e0; border-color: #5a52e0; }
        .badge-level { background: linear-gradient(135deg, #6c63ff, #48cfad); color: white; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; }
        .nav-badge { background: #ff6b6b; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; }

        /* ── 네비게이션 정리: 한 줄 유지, 글자 세로 줄바꿈 금지 ── */
        .navbar .nav-link { white-space: nowrap; }
        .navbar .navbar-nav { align-items: center; }
        /* 아이콘 전용 항목: 데스크톱에선 아이콘만(툴팁), 모바일 메뉴에선 글자도 같이 */
        .navbar .nav-icon-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
        .navbar .nav-icon-link .nav-icon-label { display: none; }
        .navbar .nav-icon-link .nav-badge { position: absolute; top: 2px; right: -2px; min-width: 16px; text-align: center; }
        @media (max-width: 991.98px) {
            .navbar .nav-icon-link .nav-icon-label { display: inline; }
            .navbar .nav-icon-link .nav-badge { position: static; margin-left: 4px; }
            .navbar .nav-tools-menu { position: static !important; float: none; box-shadow: none; }
        }
        /* 좁은 데스크톱(992~1399px)에서는 메뉴 글자 간격을 줄여 한 줄에 들어가게 한다 */
        @media (min-width: 992px) and (max-width: 1399.98px) {
            .navbar .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .9rem; }
        }
        .navbar .nav-tools-menu { min-width: 220px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
        .navbar .nav-tools-menu .font-size-btns { justify-content: flex-start; }
        .sidebar-widget { background: var(--card-bg); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: var(--card-shadow); }
        .sidebar-widget h5 { color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin-bottom: 15px; font-size: 0.95rem; }
        footer { background: var(--footer-bg); color: #adb5bd; padding: 25px 0; margin-top: 30px; }
        .level-badge { display: inline-block; background: linear-gradient(135deg, #6c63ff, #48cfad); color: white; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .points-display { color: #6c63ff; font-weight: 700; }
        .alert { border-radius: 10px; border: none; }
        .text-muted { color: var(--text-muted) !important; }
        .form-control { background: var(--input-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; border-radius: 8px; }
        .list-group-item { background: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        /* 읽기 진행률 바 */
        #reading-progress-bar {
            position: fixed; top: 0; left: 0; height: 3px; width: 0%;
            background: linear-gradient(90deg, #6c63ff, #48cfad);
            z-index: 10000; transition: width 0.1s;
        }
        /* 검색 자동완성 */
        .autocomplete-dropdown {
            position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
            background: var(--card-bg); border: 1px solid var(--border-color);
            border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            max-height: 280px; overflow-y: auto;
        }
        .autocomplete-item { padding: 9px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
        .autocomplete-item:hover { background: rgba(108,99,255,0.08); }
        /* 다크모드 토글 */
        .dark-toggle { cursor: pointer; font-size: 1.1rem; color: rgba(255,255,255,0.85) !important; padding: 0.5rem; }
        /* 알림 드롭다운 */
        .notif-dot { width: 8px; height: 8px; background: #ff6b6b; border-radius: 50%; display: inline-block; }

        /* ═══ 반응형: 태블릿 이하 사이드바 ═══ */
        @media (max-width: 767px) {
            /* 모바일에서 사이드바를 메인 하단에 배치 */
            .row > .col-md-8,
            .row > .col-lg-9 {
                order: 1;
            }
            .row > .col-md-4,
            .row > .col-lg-3 {
                order: 2;
                margin-top: 8px;
            }
            /* 모바일 사이드바 위젯을 2열 그리드 */
            .sidebar-mobile-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .sidebar-mobile-grid .sidebar-widget {
                margin-bottom: 0;
            }
            /* 검색 위젯은 전체 너비 */
            .sidebar-search-widget {
                grid-column: 1 / -1;
            }
            /* 유저 위젯도 전체 너비 */
            .sidebar-user-widget {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 576px) {
            .navbar-brand { font-size: 1.1rem !important; }
            .sidebar-widget { padding: 12px; margin-bottom: 10px; border-radius: 10px; }
            .sidebar-widget h5 { font-size: 0.85rem; margin-bottom: 10px; padding-bottom: 6px; }
            body { font-size: 14px; }
        }

        /* 크레딧 배지 네비바 */
        #ai-credit-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            transition: all 0.3s ease;
        }
        #ai-credit-badge.credit-low {
            background: #ef4444 !important;
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* 토스트 */
        #toast-container {
            position: fixed; bottom: 20px; right: 20px;
            z-index: 9999; display: flex; flex-direction: column; gap: 8px;
            pointer-events: none;
        }
        @media (max-width: 576px) {
            #toast-container { bottom: 10px; right: 8px; left: 8px; }
        }
        .toast-msg {
            background: #2d3436; color: #fff;
            padding: 10px 16px; border-radius: 10px;
            font-size: 0.85rem; box-shadow: 0 4px 15px rgba(0,0,0,0.35);
            animation: slideUp 0.3s ease; word-break: break-word;
            pointer-events: all; max-width: 320px;
        }
        @media (max-width: 576px) {
            .toast-msg { max-width: 100%; }
        }
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }
    
/* ── 텍스트 크기 조절 ── */
body.font-s .card-text, body.font-s .post-body, body.font-s p { font-size: 13px !important; }
body.font-m .card-text, body.font-m .post-body, body.font-m p { font-size: 15px !important; }
body.font-l .card-text, body.font-l .post-body, body.font-l p  { font-size: 17px !important; }
body.font-xl .card-text, body.font-xl .post-body, body.font-xl p { font-size: 20px !important; }
.font-size-btns { display:flex; gap:2px; align-items:center; }
.font-size-btns .fs-btn {
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.35);
  background: transparent; color: rgba(255,255,255,0.7); cursor: pointer; line-height:1.4;
}
.font-size-btns .fs-btn.active,
.font-size-btns .fs-btn:hover {
  background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.7);
}