/* ==========================================================================
   고밥연 지식 아카이브 (Wiki / Guide) CSS
   UI 컨셉: "화이트 페이퍼" — 높은 정보 밀도 + 깔끔한 가독성
   ========================================================================== */

/* ---------- 0. 변수 ---------- */
:root {
    --wiki-primary: #406CB4;
    --wiki-primary-dark: #2e5490;
    --wiki-primary-light: #EEF4FF;
    --wiki-accent: #f59e0b;
    --wiki-accent-light: #fff8e1;
    --wiki-bg: #FAFBFE;
    --wiki-card: #FFFFFF;
    --wiki-border: #E8ECF4;
    --wiki-text: #1E293B;
    --wiki-text-secondary: #64748B;
    --wiki-text-muted: #94A3B8;
    --wiki-radius: 16px;
    --wiki-radius-sm: 10px;
    --wiki-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    --wiki-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --wiki-transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
    --wiki-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- * 기초 초기화 & 박스 모델 강제 * ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 1. 레이아웃 래퍼 ---------- */
.wiki-page {
    font-family: var(--wiki-font);
    background: var(--wiki-bg);
    min-height: 100vh;
    color: var(--wiki-text);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.wiki-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 2. 히어로 섹션 ---------- */
.wiki-hero {
    background: linear-gradient(135deg, #1e3a6e 0%, #406CB4 60%, #5b8fd9 100%);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
}

.wiki-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.wiki-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.wiki-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.wiki-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}

.wiki-hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.wiki-hero p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 28px;
    max-width: 560px;
    line-height: 1.6;
}

/* 검색창 */
.wiki-search-box {
    position: relative;
    max-width: 540px;
}

.wiki-search-box input {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    padding: 0 52px 0 48px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: var(--wiki-text);
    outline: none;
    transition: var(--wiki-transition);
}

.wiki-search-box input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.wiki-search-box input:focus {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(64, 108, 180, 0.3);
}

.wiki-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
}

.wiki-search-kbd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    color: #94a3b8;
    font-family: monospace;
}

/* ---------- 3. 탭 네비게이션 ---------- */
.wiki-tab-nav {
    background: var(--wiki-card);
    border-bottom: 1px solid var(--wiki-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.wiki-tab-list {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.wiki-tab-list::-webkit-scrollbar {
    display: none;
}

.wiki-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: var(--wiki-transition);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.wiki-tab:hover {
    color: var(--wiki-primary);
    background: var(--wiki-primary-light);
    border-radius: 8px 8px 0 0;
}

.wiki-tab.active {
    color: var(--wiki-primary);
    border-bottom-color: var(--wiki-primary);
    font-weight: 700;
}

.wiki-tab i {
    font-size: 15px;
}

.wiki-tab-count {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    min-width: 20px;
    text-align: center;
}

.wiki-tab.active .wiki-tab-count {
    background: var(--wiki-primary);
    color: #fff;
}

/* ---------- 4. 본문 영역 ---------- */
.wiki-body {
    padding: 32px 0 80px;
}

.wiki-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ---------- 5. 카드 아이템 ---------- */
.wiki-card {
    background: var(--wiki-card);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--wiki-transition);
    position: relative;
    overflow: hidden;
}

.wiki-card:hover {
    border-color: var(--wiki-primary);
    box-shadow: var(--wiki-shadow-lg);
    transform: translateY(-2px);
}

.wiki-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.wiki-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    flex-shrink: 0;
}

.wiki-card-icon.blue {
    background: #EEF4FF;
    color: #406CB4;
}

.wiki-card-icon.amber {
    background: #FFF8E1;
    color: #f59e0b;
}

.wiki-card-icon.green {
    background: #ECFDF5;
    color: #10b981;
}

.wiki-card-icon.rose {
    background: #FFF1F2;
    color: #f43f5e;
}

.wiki-card-icon.purple {
    background: #F3E8FF;
    color: #8b5cf6;
}

.wiki-card-info {
    flex: 1;
    min-width: 0;
}

.wiki-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.wiki-card-desc {
    font-size: 13px;
    color: var(--wiki-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wiki-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--wiki-text-muted);
}

.wiki-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wiki-text-secondary);
}

.wiki-card-tag.updated {
    background: #ECFDF5;
    color: #059669;
}

.wiki-card-tag.new {
    background: #FFF7ED;
    color: #d97706;
}

.wiki-card-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 14px;
    transition: var(--wiki-transition);
}

.wiki-card:hover .wiki-card-arrow {
    color: var(--wiki-primary);
    transform: translateY(-50%) translateX(3px);
}

/* ---------- 6. 카테고리 헤더 ---------- */
.wiki-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wiki-border);
}

.wiki-category-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wiki-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.wiki-category-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--wiki-text);
    margin: 0;
}

.wiki-category-subtitle {
    font-size: 13px;
    color: var(--wiki-text-muted);
    margin-left: auto;
}

.wiki-category-section {
    margin-bottom: 40px;
}

/* ---------- 7. 문서 뷰어 (article.php) ---------- */
.wiki-article-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    max-width: 1280px;
    margin: 0;
    padding: 32px 24px 80px;
    align-items: start;
}

/* Sticky 목차 */
.wiki-toc {
    position: sticky;
    top: 80px;
    background: var(--wiki-card);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.wiki-toc-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wiki-text-muted);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wiki-border);
}

.wiki-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wiki-toc-item a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: var(--wiki-transition);
    line-height: 1.4;
}

.wiki-toc-item a:hover {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
}

.wiki-toc-item a.active {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
    border-left-color: var(--wiki-primary);
    font-weight: 600;
}

.wiki-toc-item.sub a {
    padding-left: 24px;
    font-size: 12px;
}

/* 문서 본문 */
.wiki-article-content {
    background: var(--wiki-card);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 40px;
    min-width: 0;
}

.wiki-article-content h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--wiki-text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.wiki-article-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 48px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--wiki-border);
}

.wiki-article-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.wiki-article-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 32px 0 12px;
}

.wiki-article-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    margin: 0 0 16px;
}

.wiki-article-content ul,
.wiki-article-content ol {
    padding-left: 20px;
    margin: 0 0 16px;
}

.wiki-article-content li {
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 4px;
}

/* 문서 메타 정보 */
.wiki-article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wiki-border);
}

.wiki-article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wiki-text-muted);
}

.wiki-article-meta-item i {
    font-size: 13px;
}

/* 인용 & 참고 박스 */
.wiki-callout {
    border-radius: var(--wiki-radius-sm);
    padding: 18px 20px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wiki-callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.wiki-callout.info {
    background: #EEF4FF;
    border-left: 3px solid #406CB4;
    color: #1e3a5f;
}

.wiki-callout.warning {
    background: #FFF8E1;
    border-left: 3px solid #f59e0b;
    color: #78350f;
}

.wiki-callout.danger {
    background: #FFF1F2;
    border-left: 3px solid #f43f5e;
    color: #881337;
}

.wiki-callout.tip {
    background: #ECFDF5;
    border-left: 3px solid #10b981;
    color: #064e3b;
}

/* 데이터 테이블 */
.wiki-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: var(--wiki-radius-sm);
    border: 1px solid var(--wiki-border);
}

.wiki-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wiki-table thead th {
    background: #f8fafc;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--wiki-text);
    border-bottom: 2px solid var(--wiki-border);
    white-space: nowrap;
}

.wiki-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.wiki-table tbody tr:hover {
    background: #fafbfe;
}

/* 내부 링크 스타일 (위키 방식) */
.wiki-link {
    color: var(--wiki-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--wiki-primary);
    font-weight: 500;
    transition: var(--wiki-transition);
}

.wiki-link:hover {
    background: var(--wiki-primary-light);
    border-bottom-style: solid;
}

/* 앱 연동 위젯 */
.wiki-widget-cta {
    background: linear-gradient(135deg, #EEF4FF 0%, #f3f0ff 100%);
    border: 1px solid #ddd6fe;
    border-radius: var(--wiki-radius);
    padding: 24px;
    margin: 28px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.wiki-widget-cta-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wiki-primary);
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.wiki-widget-cta-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 0 0 4px;
}

.wiki-widget-cta-info p {
    font-size: 13px;
    color: var(--wiki-text-secondary);
    margin: 0;
}

/* 업데이트 타임라인 라벨 */
.wiki-update-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ECFDF5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.wiki-update-label i {
    font-size: 11px;
}

/* 브레드크럼 */
.wiki-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wiki-text-muted);
    margin-bottom: 20px;
}

.wiki-breadcrumb a {
    color: var(--wiki-text-secondary);
    text-decoration: none;
}

.wiki-breadcrumb a:hover {
    color: var(--wiki-primary);
}

.wiki-breadcrumb-sep {
    font-size: 10px;
    color: #cbd5e1;
}

/* 보조제 매칭 위젯 */
.wiki-related-box {
    background: #f8fafc;
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 20px;
    margin: 28px 0;
}

.wiki-related-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wiki-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wiki-related-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--wiki-card);
    border: 1px solid var(--wiki-border);
    border-radius: 99px;
    font-size: 13px;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    transition: var(--wiki-transition);
}

.wiki-related-chip:hover {
    border-color: var(--wiki-primary);
    color: var(--wiki-primary);
    background: var(--wiki-primary-light);
}

/* 데이터 비교 차트 자리 */
.wiki-chart-placeholder {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 2px dashed var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 40px 24px;
    text-align: center;
    margin: 20px 0;
}

.wiki-chart-placeholder i {
    font-size: 32px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.wiki-chart-placeholder p {
    color: var(--wiki-text-muted);
    font-size: 14px;
    margin: 0;
}

/* ---------- 8. 검색 결과 오버레이 ---------- */
.wiki-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--wiki-shadow-lg);
    border: 1px solid var(--wiki-border);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    z-index: 200;
}

.wiki-search-results.show {
    display: block;
    animation: wikiSlideDown .2s ease;
}

@keyframes wikiSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wiki-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}

.wiki-search-result-item:last-child {
    border-bottom: none;
}

.wiki-search-result-item:hover {
    background: var(--wiki-primary-light);
}

.wiki-search-result-item i {
    font-size: 16px;
    color: var(--wiki-text-muted);
    width: 20px;
    text-align: center;
}

.wiki-search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wiki-text);
}

.wiki-search-result-cat {
    font-size: 11px;
    color: var(--wiki-text-muted);
    margin-left: auto;
}

.wiki-search-highlight {
    background: #fef3c7;
    border-radius: 2px;
    padding: 0 2px;
}

.wiki-search-empty {
    padding: 24px;
    text-align: center;
    color: var(--wiki-text-muted);
    font-size: 14px;
}

/* ---------- 9. 최근 업데이트 사이드바 ---------- */
.wiki-updates-sidebar {
    background: var(--wiki-card);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.wiki-updates-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wiki-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wiki-updates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wiki-update-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.wiki-update-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wiki-primary);
    flex-shrink: 0;
    margin-top: 6px;
}

.wiki-update-text {
    font-size: 13px;
    color: var(--wiki-text-secondary);
    line-height: 1.4;
}

.wiki-update-date {
    font-size: 11px;
    color: var(--wiki-text-muted);
    margin-top: 2px;
}

/* ---------- 10. 반응형 ---------- */
@media (min-width: 768px) {
    .wiki-hero h1 {
        font-size: 40px;
    }

    .wiki-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .wiki-hero {
        padding: 64px 0 56px;
    }

    .wiki-body {
        padding: 40px 0 100px;
    }

    .wiki-body-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 32px;
        max-width: 1280px;
        margin: 0 auto;
        padding: 40px 24px 100px;
    }
}

@media (max-width: 768px) {
    .wiki-hero {
        padding: 36px 0 32px;
    }

    .wiki-hero h1 {
        font-size: 24px;
    }

    .wiki-hero p {
        font-size: 13px;
    }

    .wiki-search-box input {
        height: 46px;
        font-size: 14px;
    }

    .wiki-tab {
        padding: 12px 14px;
        font-size: 13px;
    }

    .wiki-card {
        padding: 18px;
    }

    .wiki-article-content {
        padding: 24px 18px;
    }

    .wiki-article-content h1 {
        font-size: 22px;
    }

    .wiki-article-content h2 {
        font-size: 18px;
    }

    .wiki-widget-cta {
        flex-direction: column;
        text-align: center;
    }

    .wiki-search-kbd {
        display: none;
    }

    .wiki-category-header {
        flex-wrap: wrap;
    }

    .wiki-category-subtitle {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------- 11. 진입 애니메이션 ---------- */
.wiki-fade-in {
    opacity: 0;
    transform: translateY(16px);
    animation: wikiFadeIn .5s ease forwards;
}

@keyframes wikiFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wiki-fade-in:nth-child(1) {
    animation-delay: .05s;
}

.wiki-fade-in:nth-child(2) {
    animation-delay: .1s;
}

.wiki-fade-in:nth-child(3) {
    animation-delay: .15s;
}

.wiki-fade-in:nth-child(4) {
    animation-delay: .2s;
}

.wiki-fade-in:nth-child(5) {
    animation-delay: .25s;
}

.wiki-fade-in:nth-child(6) {
    animation-delay: .3s;
}

/* progress bar (데이터 시각화용) */
.wiki-progress-bar {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.wiki-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.wiki-progress-fill.blue {
    background: linear-gradient(90deg, #406CB4, #5b8fd9);
}

.wiki-progress-fill.green {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.wiki-progress-fill.amber {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.wiki-progress-fill.rose {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
}

/* 목차 진행 바 (상단) */
.wiki-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #406CB4, #5b8fd9);
    z-index: 9999;
    transition: width .1s linear;
}

/* ==========================================================================
   12. 독립 사이드바 레이아웃 (guide 전용)
   ========================================================================== */

/* 전체 레이아웃 */
body {
    margin: 0;
    font-family: var(--wiki-font);
    background: var(--wiki-bg);
    color: var(--wiki-text);
}

.guide-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* 모바일 전용 레이아웃 리셋 */
@media (max-width: 1024px) {
    .guide-layout {
        display: block;
        /* 플렉스 해제하여 너비 간섭 차단 */
        width: 100%;
        overflow-x: hidden;
    }
}

/* ── 사이드바 ── */
.guide-sidebar {
    width: 280px;
    min-height: 100vh;
    background: #FFFFFF;
    border-right: 1px solid var(--wiki-border);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.guide-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 20px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

/* 브랜드 로고 */
.guide-sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--wiki-border);
    flex-shrink: 0;
}

.guide-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.guide-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a6e, #406CB4);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.guide-logo-title {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--wiki-text);
    line-height: 1.2;
}

.guide-logo-sub {
    display: block;
    font-size: 11px;
    color: var(--wiki-text-muted);
    font-weight: 500;
}

/* 사이드바 내 검색 */
.guide-sidebar-search {
    padding: 16px 16px 8px;
    position: relative;
    flex-shrink: 0;
}

.guide-sidebar-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
    margin-top: 4px;
}

.guide-sidebar-search input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--wiki-border);
    border-radius: 10px;
    padding: 0 12px 0 34px;
    font-size: 13px;
    background: #f8fafc;
    outline: none;
    transition: var(--wiki-transition);
    color: var(--wiki-text);
}

.guide-sidebar-search input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.guide-sidebar-search input:focus {
    border-color: var(--wiki-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(64, 108, 180, 0.08);
}

/* 네비게이션 */
.guide-sidebar-nav {
    flex: 1;
    padding: 8px 12px;
}

.guide-nav-home {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    border-radius: 10px;
    transition: var(--wiki-transition);
    margin-bottom: 4px;
}

.guide-nav-home i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.guide-nav-home:hover {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
}

.guide-nav-home.active {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
    font-weight: 700;
}

/* 본 사이트로 돌아가기 버튼 (상단용) */
.guide-nav-exit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    background: #f1f5f9;
    border: 1px solid var(--wiki-border);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: var(--wiki-transition);
}

.guide-nav-exit:hover {
    background: #e2e8f0;
    color: var(--wiki-text);
    border-color: #cbd5e1;
}

.guide-nav-exit i {
    font-size: 12px;
    color: var(--wiki-text-muted);
}

.guide-nav-divider {
    height: 1px;
    background: var(--wiki-border);
    margin: 8px 8px;
}

/* 카테고리 섹션 */
.guide-nav-section {
    margin-bottom: 2px;
}

.guide-nav-section-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--wiki-text);
    cursor: pointer;
    border-radius: 10px;
    transition: var(--wiki-transition);
    text-align: left;
    line-height: 1.3;
}

.guide-nav-section-btn:hover {
    background: #f8fafc;
}

.guide-nav-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.guide-nav-section-btn i:not(.guide-nav-arrow) {
    font-size: 13px;
    color: var(--wiki-text-secondary);
    width: 16px;
    text-align: center;
}

.guide-nav-arrow {
    margin-left: auto;
    font-size: 10px;
    color: #cbd5e1;
    transition: transform .2s;
}

.guide-nav-section.open .guide-nav-arrow {
    transform: rotate(180deg);
}

.guide-nav-badge {
    font-size: 12px;
    margin-left: 2px;
}

/* 서브 리스트 */
.guide-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.guide-nav-section.open .guide-nav-list {
    max-height: 1000px;
}

.guide-nav-list li a {
    display: block;
    padding: 7px 14px 7px 52px;
    font-size: 13px;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: var(--wiki-transition);
    line-height: 1.4;
}

.guide-nav-list li a:hover {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
}

.guide-nav-list li a.active {
    background: var(--wiki-primary-light);
    color: var(--wiki-primary);
    font-weight: 700;
    position: relative;
}

.guide-nav-list li a.active::before {
    content: '';
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wiki-primary);
}

/* 사이드바 하단 */
.guide-sidebar-footer {
    flex-shrink: 0;
    padding: 0 12px 4px;
    margin-top: auto;
}

.guide-nav-back {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wiki-text-muted);
    text-decoration: none;
    border-radius: 10px;
    transition: var(--wiki-transition);
}

.guide-nav-back i {
    font-size: 12px;
}

.guide-nav-back:hover {
    background: #f8fafc;
    color: var(--wiki-text-secondary);
}

/* 사이드바 오버레이 (모바일) */
.guide-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

.guide-sidebar-overlay.show {
    display: block;
    animation: wikiFadeIn .2s ease;
}

/* ── 메인 래퍼 ── */
.guide-main-wrapper {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── 모바일 탑바 ── */
.guide-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 500;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wiki-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    transition: box-shadow .2s;
}

.guide-topbar.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.guide-topbar-menu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--wiki-text);
    cursor: pointer;
    border-radius: 10px;
    transition: var(--wiki-transition);
    padding: 0;
    min-width: 40px;
}

.guide-topbar-menu:hover {
    background: #f1f5f9;
}

.guide-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wiki-text);
    text-decoration: none;
}

.guide-topbar-brand i {
    color: var(--wiki-primary);
}

.guide-topbar-home {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wiki-text-secondary);
    font-size: 16px;
    text-decoration: none;
    border-radius: 10px;
    transition: var(--wiki-transition);
}

.guide-topbar-home:hover {
    background: #f1f5f9;
    color: var(--wiki-primary);
}

/* ── 가이드 전용 푸터 ── */
.guide-footer {
    background: #f8fafc;
    border-top: 1px solid var(--wiki-border);
    padding: 32px 24px;
    margin-left: 280px;
}

.guide-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.guide-footer-links {
    margin-bottom: 10px;
}

.guide-footer-links a {
    font-size: 13px;
    color: var(--wiki-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.guide-footer-links a:hover {
    color: var(--wiki-primary);
}

.guide-footer-sep {
    color: #cbd5e1;
    margin: 0 8px;
    font-size: 11px;
}

.guide-footer-copy {
    font-size: 12px;
    color: var(--wiki-text-muted);
    margin: 0 0 4px;
}

.guide-footer-note {
    font-size: 11px;
    color: #cbd5e1;
    margin: 0;
}

/* ── 반응형: 모바일 ── */
@media (max-width: 1024px) {
    .guide-sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
        width: 300px;
    }

    .guide-sidebar.open {
        transform: translateX(0);
    }

    .guide-main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .guide-topbar {
        display: flex;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .guide-footer {
        margin-left: 0;
    }

    /* article 레이아웃 조정 */
    .wiki-article-layout {
        grid-template-columns: 1fr;
        padding: 16px 16px 80px;
    }

    .wiki-toc {
        position: relative;
        top: 0;
        max-height: none;
        order: -1;
    }
}

@media (max-width: 480px) {
    .guide-sidebar {
        width: 85%;
        max-width: 320px;
    }

    /* 📱 모바일 파손 방지 커스텀 스타일 */
    .wiki-hero {
        padding: 40px 0 32px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .wiki-hero h1 {
        font-size: 24px !important;
        word-break: break-all !important;
    }

    .wiki-hero p {
        font-size: 14px !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }

    .wiki-hero-inner,
    .wiki-container,
    .wiki-body-with-sidebar {
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wiki-search-box {
        width: 100% !important;
    }

    .wiki-search-box input {
        width: 100% !important;
        height: 48px !important;
        font-size: 14px !important;
        padding: 0 36px !important;
    }

    .wiki-search-icon {
        left: 12px !important;
    }

    .wiki-tab-nav {
        width: 100% !important;
        overflow: hidden !important;
    }

    .wiki-tab-list {
        padding: 0 16px !important;
    }

    .wiki-tab {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .wiki-card-title {
        font-size: 16px !important;
        word-break: break-all !important;
    }

    .wiki-category-title {
        font-size: 18px !important;
    }
}

/* 전역 강제 텍스트 정책 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
div,
input {
    overflow-wrap: break-word;
    word-break: break-all;
}

/* 최후의 수단: 수평 스크롤 박멸 */
.guide-layout,
.guide-main-wrapper,
.guide-main-content,
.wiki-page,
.guide-topbar {
    max-width: 100vw !important;
    position: relative !important;
}