/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.4;
    padding: 0;
    padding-bottom: 45px;
    margin: 0;
}

/* index.html 전용 레이아웃 (body.app-layout) */
body.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* 헤더 - 한 줄 통합 레이아웃 */
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

body.app-layout .header {
    position: static;
    flex-shrink: 0;
}

.header-unified {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}


/* 왼쪽: 로고 */
.logo {
    flex-shrink: 0;
}

.logo h1 {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
}

.logo-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 4px;
    color: #ffffff;
    padding: 0.35rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.1) 100%);
    text-shadow:
        0 1px 0 rgba(200, 200, 220, 0.8),
        0 2px 0 rgba(160, 160, 180, 0.6),
        0 3px 0 rgba(120, 120, 140, 0.5),
        0 4px 0 rgba(80, 80, 100, 0.4),
        0 5px 0 rgba(50, 50, 70, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 255, 255, 0.1);
    position: relative;
    transform: perspective(600px) rotateX(3deg);
    transition: transform 0.3s ease;
}

.logo-title:hover {
    transform: perspective(600px) rotateX(0deg) scale(1.03);
    text-shadow:
        0 1px 0 rgba(200, 200, 220, 0.8),
        0 2px 0 rgba(160, 160, 180, 0.6),
        0 3px 0 rgba(120, 120, 140, 0.5),
        0 4px 0 rgba(80, 80, 100, 0.4),
        0 5px 0 rgba(50, 50, 70, 0.3),
        0 6px 0 rgba(30, 30, 50, 0.2),
        0 7px 0 rgba(20, 20, 40, 0.15),
        0 8px 15px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 255, 255, 0.15);
}

/* 중앙: 메뉴 */
.header-nav {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex: 1;
}

/* 오른쪽: 사용자 정보 + 버튼 (2줄 구조) */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-greeting {
    color: white;
}

.user-greeting span {
    font-size: 0.7rem;
    opacity: 0.95;
}

.action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-btn,
.logout-btn {
    padding: 0.2rem 0.4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.65rem;
    white-space: nowrap;
}

.dashboard-btn:hover,
.logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 헤더 정답 공개 버튼 */
.dashboard-btn.reveal-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    font-weight: 600;
}

/* 헤더 학생 등록 버튼 */
.dashboard-btn.bulk-register-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    font-weight: 600;
}

/* 헤더 내 메뉴 버튼 */
.menu-btn {
    padding: 0.45rem 0.8rem;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.menu-btn.active {
    background-color: white;
    border-color: white;
    color: #667eea;
}

/* 메인 콘텐츠 */
.main-content {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(100vh - 60px - 40px);
    overflow: hidden;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

body.app-layout .main-content {
    height: auto;
    flex: 1 1 0;
    min-height: 0;
}

/* 좌우 패널 위치 교체: 왼쪽 검색, 오른쪽 메인 */
.main-content {
    flex-direction: row-reverse;
}

/* 헤더 내비게이션 - 드롭다운 메뉴 */
.header-nav {
    display: flex;
    gap: 0.5rem;
}

.menu-item {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 0.5rem;
    white-space: nowrap;
}

.menu-item:hover .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.dropdown-menu a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 메뉴/검색 팝업 */
/* 검색창 상단 네비게이션 패널 */
.search-nav-panel {
    flex: 1 1 auto;
    min-height: 280px;
    padding: 0.8rem 0.9rem;
    overflow: auto;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
}

.search-nav-group {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.7rem;
    background: #f9fafb;
}

.search-nav-title {
    width: 100%;
    text-align: left;
    font-weight: 700;
    color: #374151;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.search-nav-items.is-collapsed {
    display: none;
}

.search-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-nav-item.active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.search-nav-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

.search-panel-resizer {
    height: 8px;
    background: #e5e7eb;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* 모바일 반응형 - 드롭다운 메뉴 */
@media (max-width: 768px) {
    .header-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu-item {
        flex: 1 1 auto;
    }

    .menu-btn {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }

    .dropdown-menu {
        min-width: 150px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
    }

    .menu-item:hover .dropdown-menu {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* 콘텐츠 래퍼 */
.content-wrapper {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    min-height: 0;
    padding: 0 0.5rem;
    position: relative;
}

.content-section {
    display: none;
    margin: 0;
    padding: 0;
}

.content-section.active {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 0 0 80px 0;
}

.content-section.active {
    display: block;
}

.section-header {
    margin-bottom: 2rem;
}

.section-header h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.section-header p {
    font-size: 1.1rem;
    color: #666;
}

.content-body {
    margin: 0;
    padding: 0;
}

/* 카드 스타일 */
.card {
    background-color: white;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin: 0;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 메인 콘텐츠 영역의 카드는 hover 효과 제거 */
.content-section .card:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card h3 {
    color: #667eea;
    margin-bottom: 0.6rem;
    font-size: 1.2rem;
}

.card p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* 푸터 - 하단 고정 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    color: #333;
    text-align: center;
    padding: 0.3rem 0;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #e0e0e0;
}

.footer img {
    height: 28px !important;
}

.footer p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0;
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .left-panel {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .header-unified {
        padding: 0.5rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .logo h1 {
        font-size: 1.2rem;
        text-align: center;
    }

    .logo-title {
        font-size: 1.2rem;
        letter-spacing: 2px;
        padding: 0.2rem 0.6rem;
        text-shadow:
            0 1px 0 rgba(200, 200, 220, 0.8),
            0 2px 0 rgba(160, 160, 180, 0.6),
            0 3px 0 rgba(120, 120, 140, 0.5),
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(255, 255, 255, 0.1);
    }

    .header-nav {
        width: 100%;
        flex-direction: column;
        gap: 0.3rem;
    }

    .menu-btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .header-right {
        width: 100%;
        align-items: center;
    }

    .user-greeting span {
        font-size: 0.65rem;
    }

    .action-buttons {
        gap: 0.3rem;
    }

    .main-content {
        padding: 0;
        flex-direction: column;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .card {
        padding: 1rem;
    }

    /* 모바일에서 계산기 입력 필드 2줄로 배치 */
    .calc-input-row {
        flex-wrap: wrap;
    }

    .calc-input-item {
        flex: 0 0 calc(50% - 0.25rem);
    }
}

/* 유틸리티 클래스 */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* 연금 계산기 스타일 */
.pension-calculator {
    background: #f8f9ff;
    padding: 1rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.calc-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.calc-input-item {
    flex: 1;
}

.calc-input-item label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
}

.calc-input-item input {
    width: 100%;
    padding: 0.4rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: border-color 0.3s ease;
}

.calc-input-item input:focus {
    outline: none;
    border-color: #667eea;
}

.calc-input-item input[readonly] {
    background: #f0f0f0;
    color: #666;
    cursor: not-allowed;
}

/* 계산 버튼과 결과 행 - 컴팩트 버전 */
.calc-action-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.3rem;
}

.calc-button-compact {
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.calc-button-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
}

.calc-result-compact {
    flex: 1;
    background: #f8f9ff;
    border: 1px solid #667eea;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.result-label-compact {
    font-size: 0.7rem;
    color: #666;
    white-space: nowrap;
}

.result-amount-compact {
    font-size: 1.1rem;
    font-weight: 700;
    color: #667eea;
}

.detail-button {
    padding: 0.6rem 1rem;
    background: white;
    border: 2px solid #667eea;
    border-radius: 6px;
    color: #667eea;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.detail-button:hover {
    background: #667eea;
    color: white;
}

.calc-button {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.calc-result {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #667eea;
}

.calc-result h4 {
    color: #667eea;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.result-card {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e0e0e0;
}

.result-card.highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.result-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.result-value {
    font-size: 1.3rem;
    font-weight: 700;
}

.result-card.highlight .result-value {
    font-size: 1.5rem;
}

.pension-note {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 0.8rem;
    margin-top: 1.5rem;
    border-radius: 4px;
}

.pension-note p {
    margin: 0 0 0.4rem 0;
    font-weight: 600;
    color: #856404;
    font-size: 0.85rem;
}

.pension-note ul {
    margin: 0;
    padding-left: 1.3rem;
    color: #856404;
}

.pension-note li {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* 연금 계산 결과 헤더 */
.pension-result-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #667eea;
}

.result-question {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.result-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: #667eea;
    margin: 0;
}

/* 차트 컨테이너 */
.pension-chart-container {
    height: 300px;
    margin: 2rem 0;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* 연금 상세보기 팝업 */
.pension-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pension-popup-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.pension-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #667eea;
}

.pension-popup-header h3 {
    color: #667eea;
    font-size: 1.3rem;
    margin: 0;
}

.pension-popup-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.pension-popup-close:hover {
    color: #667eea;
}

.pension-popup-body {
    padding: 2rem;
}

.popup-result-summary {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: white;
}

.popup-result-summary p {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    opacity: 0.9;
}

.popup-result-summary h2 {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0;
}

/* ============================================
   경제수학 실습 서브섹션 스타일
   ============================================ */

.math-subsection {
    display: none;
}

.math-subsection.active {
    display: block;
}

/* 사이드바 활성 링크 스타일 */
.sidebar-menu a {
    display: block;
    padding: 0.6rem 1rem;
    color: #4a5568;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sidebar-menu a:hover {
    background-color: #f7fafc;
    color: #667eea;
}

.sidebar-menu a.active {
    background-color: #667eea;
    color: white;
}

/* 계산 결과 영역 스타일 개선 */
.calc-result-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: #f7fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ============================================
   경제수학 탭 인터페이스 스타일
   ============================================ */

/* 탭 메뉴 행 (탭 + 참고자료 버튼) */
.math-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* 탭 메뉴 컨테이너 */
.math-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    flex: 1;
}

/* 탭 버튼 */
.math-tab-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.4rem 0.6rem;
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.math-tab-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #2d3748;
}

.math-tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 탭 패널 */
.math-tab-panel {
    display: none;
    animation: fadeInTab 0.3s ease-in;
}

.math-tab-panel.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모바일 반응형 - 탭 버튼 */
@media (max-width: 768px) {
    .math-tabs {
        gap: 0.3rem;
        padding: 0.4rem;
    }

    .math-tab-btn {
        min-width: 100px;
        padding: 0.5rem 0.7rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   노란색 섹션 내부 미니 탭 스타일
   ============================================ */

/* 미니 탭 버튼 컨테이너 */
.info-mini-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid rgba(133, 100, 4, 0.2);
    padding-bottom: 0.4rem;
}

/* 미니 탭 버튼 */
.info-mini-tab {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(133, 100, 4, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #856404;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.info-mini-tab:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(133, 100, 4, 0.5);
}

.info-mini-tab.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: #856404;
    color: #856404;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(133, 100, 4, 0.2);
}

/* 미니 탭 콘텐츠 */
.info-tab-content {
    position: relative;
    min-height: 120px;
}

.info-tab-panel {
    display: none;
}

.info-tab-panel.active {
    display: block;
    animation: fadeInInfo 0.25s ease-in;
}

@keyframes fadeInInfo {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모바일 반응형 - 미니 탭 */
@media (max-width: 768px) {
    .info-mini-tabs {
        gap: 0.2rem;
    }

    .info-mini-tab {
        padding: 0.35rem 0.4rem;
        font-size: 0.65rem;
    }
}

/* ============================================
   꿈과 자본 섹션 스타일
   ============================================ */

.dream-subsection {
    display: none;
    margin: 0;
    padding: 0;
}

.dream-subsection.active {
    display: block;
}

.dream-subsection > .card {
    margin-top: 0;
    padding-top: 0.3rem;
}

/* 연봉 정보 iframe */
.salary-iframe-container {
    width: 100%;
    height: 600px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    position: relative;
}

.salary-iframe {
    width: 100%;
    height: 100%;
    border: none;
    transform: scale(0.85);
    transform-origin: 0 0;
    width: 118%;
    height: 118%;
}

/* 드래그 가능한 새 창 열기 버튼 */
.draggable-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 0.7rem 1.2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid white;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
}

.draggable-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
}

.draggable-btn:active {
    cursor: grabbing;
}

.draggable-btn.dragging {
    cursor: grabbing;
    opacity: 0.9;
}

/* 모바일 반응형 - 연봉 iframe */
@media (max-width: 768px) {
    .salary-iframe-container {
        height: 500px;
    }

    .salary-iframe {
        transform: scale(0.75);
        width: 133%;
        height: 133%;
    }

    .draggable-btn {
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
        bottom: 15px;
        right: 15px;
    }
}

/* ============================================
   연금 알아보기 서브섹션 스타일
   ============================================ */

.pension-subsection {
    display: none;
}

.pension-subsection.active {
    display: block;
}

.plan-subsection {
    display: none;
}

.plan-subsection.active {
    display: block;
}

/* 재무설계 저장 버튼 */
.plan-save-btn {
    display: block;
    margin: 1rem auto 0;
    padding: 0.6rem 2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.plan-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ============================================
   연금 시각화 스타일
   ============================================ */

/* 생활비 바 차트 */
.living-cost-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 100px;
}

.bar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.bar-container {
    width: 100%;
    height: 200px;
    background: #f0f0f0;
    border-radius: 8px 8px 4px 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.bar-fill {
    width: 100%;
    height: 0;
    transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fillBar 1.5s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes fillBar {
    from {
        height: 0;
    }
    to {
        height: var(--target-height);
    }
}

.bar-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #667eea;
}

/* 지출 파이 차트 */
.expense-pie-chart {
    position: relative;
}

.pie-segment {
    animation: drawPie 1.5s ease-out forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes drawPie {
    from {
        opacity: 0;
        stroke-dashoffset: 500;
    }
    to {
        opacity: 1;
    }
}

.expense-legend {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 1rem;
}

.legend-label {
    font-size: 0.85rem;
    color: #333;
}

.legend-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #667eea;
}

/* 3층 연금 건물 */
.pension-building-container {
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.pension-building {
    width: 100%;
    max-width: 600px;
}

.pension-floor {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.pension-floor.floor-1 {
    animation: buildUp 0.8s ease-out 0.3s forwards;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 140px;
}

.pension-floor.floor-2 {
    animation: buildUp 0.8s ease-out 0.6s forwards;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    min-height: 120px;
}

.pension-floor.floor-3 {
    animation: buildUp 0.8s ease-out 0.9s forwards;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    min-height: 100px;
}

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

.floor-content {
    padding: 1.2rem;
    color: white;
    position: relative;
}

.floor-number {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.floor-content h4 {
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
}

.floor-content p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.95;
}

.floor-badge {
    display: inline-block;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.floor-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 1.2rem;
    background: rgba(0, 0, 0, 0.1);
    color: white;
}

.pension-floor:hover .floor-detail,
.pension-floor.active .floor-detail {
    max-height: 200px;
    padding: 1rem 1.2rem;
}

.floor-detail p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
}

.floor-detail ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
}

.floor-detail li {
    margin-bottom: 0.3rem;
}

.pension-foundation {
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    color: white;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* 소득 구성 비율 바 */
.income-ratio-bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ratio-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ratio-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.ratio-name {
    font-weight: 600;
    color: #333;
}

.ratio-percent {
    font-weight: 700;
    color: #667eea;
}

.ratio-bar {
    height: 30px;
    background: #f0f0f0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.ratio-fill {
    height: 100%;
    width: 0;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fillRatio 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fillRatio {
    to {
        width: var(--width, 100%);
    }
}

/* 국민연금 계산기 */
.simple-calc-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.ret-inline-inputs {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 0.4rem;
}

.ret-inline-inputs .calc-input-group {
    flex: 1 1 0;
    min-width: 0;
    gap: 0.15rem;
}

.ret-inline-inputs .calc-input-group label {
    font-size: 0.7rem;
    white-space: nowrap;
}

.ret-inline-inputs .calc-input-group input {
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
    min-width: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .ret-inline-inputs {
        flex-wrap: wrap !important;
    }
    .ret-inline-inputs .calc-input-group {
        flex: 1 1 45%;
    }
}

/* 국민연금 계산기: 입력행/버튼행 분리 + 5칸 1행 배치 */
.nps-inline-calc.plan-inline-calc {
    display: block !important;
}

.nps-inline-calc .simple-calc-form.nps-calc-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.nps-calc-row .calc-input-group {
    flex: 1 1 0;
    min-width: 0;
}

.nps-calc-row .calc-input-group label {
    font-size: 0.8rem;
    white-space: nowrap;
}

.nps-calc-row .calc-input-group input {
    padding: 0.55rem 0.5rem;
    font-size: 0.9rem;
    min-width: 0;
    width: 100%;
}

.nps-income-warn {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: #fff8e6;
    color: #b38600;
    border: 1px solid #ffe0a0;
}

/* 계산기 입력을 한 줄로 */
.plan-inline-inputs .calc-input-group {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
}

.plan-inline-inputs .calc-input-group label {
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plan-inline-inputs .calc-input-group input,
.plan-inline-inputs .calc-input-group select {
    width: 100%;
}

.plan-inline-inputs .inline-hint {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
}

.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calc-input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.calc-input-group input {
    padding: 0.6rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.calc-input-group input:focus {
    outline: none;
    border-color: #667eea;
}

.calc-button {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.calc-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.calc-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%);
    border-radius: 8px;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 분수 표기 */
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 0.9em;
    margin: 0 0.15em;
}
.frac .num {
    border-bottom: 1.5px solid currentColor;
    padding: 0 0.25em 0.1em;
    line-height: 1.2;
}
.frac .den {
    padding: 0.1em 0.25em 0;
    line-height: 1.2;
}

.result-highlight {
    text-align: center;
    padding: 0.6rem 0.8rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0;
}

.result-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.result-value {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
}

.result-value.result-value-sub {
    font-size: 1.1rem;
    font-weight: 600;
    color: #888;
}

/* 월 예상 수령액 아래 미래가치 표시 (작은 글씨) */
.result-value-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: #888;
    margin-top: 0.2rem;
}

.result-detail {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

.result-detail-inline {
    background: white;
    display: block;
}

.result-inline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    text-align: center;
}

.result-inline-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-fv-notice {
    text-align: center;
    font-size: 0.8rem;
    color: #6366f1;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.result-fv-notice .notice-key {
    font-weight: 800;
    padding: 0 0.25rem;
    border-radius: 4px;
}

.result-fv-notice .notice-key-future {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.15);
}

.result-fv-notice .notice-key-current {
    color: #b45309;
    background: rgba(245, 158, 11, 0.2);
}


.result-inline-item .result-label {
    margin-bottom: 0.4rem;
}

@media (max-width: 980px) {
    .result-inline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.detail-row span:first-child {
    color: #666;
}

.detail-row span:last-child {
    font-weight: 700;
    color: #333;
}

/* 퇴직연금 비교 카드 */
.retirement-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.comparison-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.comparison-header {
    padding: 1.2rem;
    color: white;
    text-align: center;
    position: relative;
}

.comparison-header h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.comparison-icon {
    font-size: 2rem;
}

.comparison-body {
    padding: 1.5rem;
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.comparison-item:last-child {
    border-bottom: none;
}

.item-label {
    font-size: 0.85rem;
    color: #666;
}

.item-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.comparison-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

.comparison-vs {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
    text-align: center;
}

/* 반응형 */
@media (max-width: 768px) {
    .living-cost-bar {
        min-width: 80px;
    }

    .bar-container {
        height: 150px;
    }

    .expense-pie-chart svg {
        width: 150px;
        height: 150px;
    }

    .retirement-comparison {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .comparison-vs {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .simple-calc-form {
        grid-template-columns: 1fr;
    }

    .nps-inline-calc .simple-calc-form.nps-calc-row {
        flex-wrap: wrap !important;
    }
    .nps-calc-row .calc-input-group {
        flex: 1 1 45%;
    }
}

/* ============================================
   좌우 패널 분할 레이아웃
   ============================================ */

.left-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
}

.panel-resizer {
    width: 8px;
    background: #e0e0e0;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-resizer:hover {
    background: #667eea;
}

.panel-resizer.dragging {
    background: #667eea;
}

.resizer-handle {
    width: 3px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    pointer-events: none;
}

.right-panel {
    flex: 0 0 320px;
    width: 320px;
    min-width: 240px;
    max-width: none;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, width 0.3s ease;
    padding-bottom: 60px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.right-panel.collapsed {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.main-content.panel-collapsed .left-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* ============================================
   검색 패널 스타일
   ============================================ */

.search-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 사이드바 하단 검색 입력 */
.sidebar-search-footer {
    margin-top: auto;
    padding: 0.4rem 0.8rem 0.6rem;
    border-top: 1px solid #eef2f7;
    background: #fff;
    flex-shrink: 0;
}

/* 패널 컨트롤 */
.panel-control {
    padding: 0.5rem;
    display: flex;
    justify-content: flex-end;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.panel-toggle-btn {
    background: #f0f0f0;
    border: none;
    color: #666;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.panel-toggle-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.toggle-icon {
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.right-panel.collapsed .toggle-icon {
    transform: rotate(180deg);
}

/* Floating 패널 토글 버튼 (사용 안 함 - 헤더 버튼으로 대체) */
.floating-panel-toggle {
    display: none !important;
}

/* 사이드바 토글 버튼 (콘텐츠 왼쪽 상단) */
.sidebar-toggle-btn {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0.4rem 0 0 0.5rem;
    border-radius: 8px;
    border: 1.5px solid #d0d5e8;
    background: #f0f4ff;
    color: #667eea;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.sidebar-toggle-icon {
    line-height: 1;
}

/* 사이드바 상단 닫기 바 */
.sidebar-close-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex-shrink: 0;
}

.sidebar-close-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* 검색 메인 영역 */
.search-main-area {
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

/* 검색 엔진 선택 */
.search-engine-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.search-engine-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.search-engine-btn:hover {
    border-color: #667eea;
    transform: scale(1.05);
}

.search-engine-btn.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%);
}

.engine-icon {
    font-size: 1.1rem;
    font-weight: 700;
}

.search-engine-btn[data-engine="google"] .engine-icon {
    color: #4285f4;
}

.search-engine-btn[data-engine="naver"] .engine-icon {
    color: #03c75a;
}

/* 검색 입력 */
.search-input-container {
    display: flex;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
}

.search-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.search-btn:active {
    transform: translateY(0);
}

/* 최근 검색어 */
.recent-searches {
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.clear-recent-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.clear-recent-btn:hover {
    background: #f0f0f0;
    color: #666;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.recent-item:hover {
    background: #e8eeff;
    color: #667eea;
}

.recent-item-text {
    flex: 1;
}

.recent-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.recent-item-remove:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #666;
}

/* 추천 검색어 */
.recommended-searches {
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.recommended-header {
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.recommended-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.recommended-item {
    padding: 0.5rem 0.8rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%);
    border: 1px solid #667eea;
    color: #667eea;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.recommended-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 유용한 링크 */
.useful-links {
    padding: 1rem;
    background: white;
}

.links-header {
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.links-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.link-item:hover {
    background: #e8eeff;
    transform: translateX(5px);
}

.link-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.link-info {
    flex: 1;
}

.link-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
}

.link-desc {
    font-size: 0.75rem;
    color: #999;
}

/* 모바일 전용 요소 */
.mobile-only {
    display: none;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
    .right-panel {
        width: 300px;
    }

    .left-panel {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .mobile-only {
        display: inline-block;
    }

    .main-content {
        flex-direction: column;
    }

    .left-panel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100%;
    }

    .panel-resizer {
        display: none;
    }

    .sidebar-search-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .right-panel {
        position: fixed;
        top: 60px;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: calc(100vh - 60px);
        z-index: 1000;
        transform: translateX(100%);
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
        opacity: 1;
        visibility: visible;
        display: flex;
    }

    /* 모바일: collapsed 클래스 무시 (show-mobile로 제어) */
    .right-panel.collapsed {
        flex: 0 0 auto !important;
        width: 85% !important;
        max-width: 320px !important;
        opacity: 1;
        visibility: visible;
        display: flex;
        transform: translateX(100%);
    }

    .right-panel.show-mobile {
        transform: translateX(0) !important;
        pointer-events: auto;
    }

    .panel-toggle-btn {
        display: none;
    }

    /* 모바일 사이드바 오버레이 배경 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* ============================================
   미션 학습 시스템 스타일
   ============================================ */

/* 진행도 및 배지 통합 컨테이너 */
.progress-badges-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: white;
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 참고 자료 버튼 */
.reference-material-btn {
    padding: 0.5rem 1rem;
    background: #e0e0e0;
    color: #999;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.reference-material-btn.enabled {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
}

.reference-material-btn.enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 참고 자료 팝업 오버레이 */
.reference-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reference-popup-overlay.show {
    opacity: 1;
}

.reference-popup-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.reference-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #667eea;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.reference-popup-header h3 {
    margin: 0;
    color: #667eea;
    font-size: 1.3rem;
}

.reference-popup-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.reference-popup-close:hover {
    color: #667eea;
    background: #f0f0f0;
}

.reference-popup-body {
    padding: 2rem;
    color: #333;
    line-height: 1.8;
}

.reference-popup-body h1,
.reference-popup-body h2,
.reference-popup-body h3,
.reference-popup-body h4 {
    color: #667eea;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.reference-popup-body p {
    margin-bottom: 1rem;
}

.reference-popup-body ul,
.reference-popup-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.reference-popup-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* ============================================
   참고자료 탭 팝업 스타일
   ============================================ */

.reference-popup-content.ref-tabbed {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.reference-popup-content.ref-tabbed .reference-popup-header {
    flex-shrink: 0;
    border-bottom: none;
    padding-bottom: 0.8rem;
}

/* 탭 컨테이너 */
.ref-tab-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* 탭 버튼 영역 */
.ref-tab-buttons {
    display: flex;
    gap: 0;
    padding: 0 1.5rem;
    background: white;
    border-bottom: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.ref-tab-btn {
    padding: 0.7rem 1.2rem;
    border: none;
    background: none;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.ref-tab-btn:hover {
    color: #667eea;
    background: #f8f9ff;
}

.ref-tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: #f8f9ff;
}

/* 탭 패널 영역 */
.ref-tab-panels {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem 2rem;
    scroll-behavior: smooth;
}

.ref-tab-panel {
    display: none;
    animation: refTabFadeIn 0.3s ease;
}

.ref-tab-panel.active {
    display: block;
}

@keyframes refTabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 참고자료 카드 스타일 */
.ref-card {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.ref-card.blue {
    background: #f0f4ff;
    border-left: 4px solid #667eea;
}

.ref-card.yellow {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

.ref-card.green {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
}

.ref-card h3 {
    color: #334155;
    margin: 0 0 0.8rem 0;
    font-size: 1.1rem;
}

.ref-card h4 {
    color: #475569;
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
}

.ref-card p {
    margin-bottom: 0.6rem;
    color: #374151;
    font-size: 0.9rem;
}

.ref-card ul, .ref-card ol {
    padding-left: 1.3rem;
    margin-bottom: 0.6rem;
}

.ref-card li {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: #374151;
}

/* 참고자료 테이블 */
.ref-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6rem 0;
    font-size: 0.85rem;
}

.ref-table th {
    background: #667eea;
    color: white;
    padding: 0.5rem 0.7rem;
    text-align: center;
    font-weight: 600;
    border: 1px solid #5a6fd6;
}

.ref-table td {
    padding: 0.45rem 0.7rem;
    border: 1px solid #e5e7eb;
    text-align: center;
    color: #374151;
}

.ref-table tr:nth-child(even) td {
    background: #f9fafb;
}

.ref-table tr:hover td {
    background: #f0f4ff;
}

/* 참고자료 노트 */
.ref-note {
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    margin-top: 0.5rem;
    font-style: italic;
}

/* 탭 패널 내부 제목 스타일 */
.ref-tab-panel h3 {
    color: #667eea;
    font-size: 1.15rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.ref-tab-panel h4 {
    color: #475569;
    font-size: 1rem;
    margin: 0.8rem 0 0.5rem 0;
}

/* 피라미드 도형 (3층 연금) */
.ref-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 1rem 0;
}

.pyramid-level {
    text-align: center;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    border-radius: 4px;
}

.pyramid-level small {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 0.2rem;
}

.pyramid-level.level-3 {
    background: linear-gradient(135deg, #10b981, #059669);
    width: 55%;
    border-radius: 8px 8px 0 0;
}

.pyramid-level.level-2 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    width: 75%;
}

.pyramid-level.level-1 {
    background: linear-gradient(135deg, #667eea, #5a6fd6);
    width: 95%;
    border-radius: 0 0 8px 8px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .ref-tab-buttons {
        padding: 0 0.8rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ref-tab-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    .ref-tab-panels {
        padding: 1rem;
    }

    .ref-card {
        padding: 0.8rem;
    }

    .ref-table {
        font-size: 0.78rem;
    }

    .ref-table th, .ref-table td {
        padding: 0.35rem 0.4rem;
    }

    .pyramid-level {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }

    .reference-popup-content.ref-tabbed {
        width: 95%;
        max-height: 90vh;
    }
}

/* 진행도 표시 - 컴팩트 */
.progress-display-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    color: white;
    flex: 1;
}

.progress-stats {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.9;
    white-space: nowrap;
}

.stat-value {
    font-size: 0.95rem;
    font-weight: 700;
}

.progress-bar-container {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
    flex: 0 0 100px;
    width: 100px;
}

.progress-bar-fill {
    height: 100%;
    background: white;
    border-radius: 20px;
    transition: width 0.5s ease;
}

/* 배지 표시 - 컴팩트 */
.badges-display-compact {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
}

.badges-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
}

.badges-grid {
    display: flex;
    gap: 0.6rem;
    flex: 1;
    overflow-x: auto;
    padding: 0.2rem 0;
}

.badges-grid::-webkit-scrollbar {
    height: 3px;
}

.badges-grid::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 2px;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%);
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-item:hover {
    transform: translateY(-2px);
}

.badge-icon {
    font-size: 1.2rem;
}

.badge-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #667eea;
}

.badges-empty {
    color: #999;
    font-size: 0.8rem;
    font-style: italic;
}

/* 미션 컨테이너 */
.missions-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 미션 탭 컨테이너 */
.mission-tabs-container {
    background: transparent;
    border-radius: 8px;
    box-shadow: none;
}

/* 연금 알아보기 상단 간격 보정 */
#pension-section .mission-tabs-container {
    margin-top: 0.8rem;
}

/* 연금 알아보기: 탭 버튼 행 오른쪽 여백 (연금 속 수학·다른 페이지와 시각적 통일) */
#pension-section .mission-tabs-row {
    padding-right: 0.8rem;
}

/* 연금 알아보기: 미션 탭 난이도 숨김 */
#pension-section .mission-tabs-container .tab-difficulty {
    display: none;
}

/* 미션 탭 행 (탭 + 참고자료 버튼) */
.mission-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-right: 0;
    background: transparent;
    border-bottom: none;
}

/* 미션 탭 버튼들 - 수학/꿈과 자본 스타일 */
.mission-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    flex: 1;
    overflow: visible;
}

/* 참고자료 버튼 (탭 옆) */
.reference-btn-inline {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: 0.5rem;
}

.reference-btn-inline:hover {
    background: linear-gradient(135deg, #218838, #1ea97f);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.mission-tabs::-webkit-scrollbar {
    height: 3px;
}

.mission-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.mission-tab {
    flex: 1;
    min-width: 100px;
    padding: 0.4rem 0.6rem;
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

.mission-tab:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #2d3748;
}

.mission-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.mission-delete-btn {
    margin-left: 0.3rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    color: #999;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.mission-delete-btn:hover {
    background: #ff4444;
    color: white;
}

.tab-difficulty {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.7;
    padding: 0.1rem 0.3rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.mission-tab.active .tab-difficulty {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    opacity: 1;
}

/* 미션 카드 래퍼 */
.mission-cards-wrapper {
    position: relative;
    min-height: 300px;
}

/* 미션 카드 */
.mission-card {
    background: white;
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: none;
    transition: opacity 0.3s ease;
    display: none;
}

.mission-card.active {
    display: block;
    animation: fadeInMission 0.2s ease;
}

#pension-section .mission-card.active {
    animation: none;
}

@keyframes fadeInMission {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    gap: 1rem;
}

.mission-difficulty {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 메인 섹션 난이도 배지 숨김 */
.mission-difficulty {
    display: none;
}

.difficulty-easy {
    background: #d4edda;
    color: #155724;
}

.difficulty-medium {
    background: #fff3cd;
    color: #856404;
}

.difficulty-hard {
    background: #f8d7da;
    color: #721c24;
}

/* 질문 (헤더 안에서 인라인) */
.mission-question-inline {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    flex: 1;
}

/* 미션 헤더 우측 컨트롤(정답 공개 등) */
.mission-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mission-reveal-btn {
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.mission-reveal-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f8f9ff;
}

.mission-reveal-btn.danger {
    border-color: #f1c0c0;
    color: #c62828;
    background: #fff5f5;
}

.mission-reveal-btn.danger:hover {
    border-color: #c62828;
    color: #c62828;
    background: #ffecec;
}

.mission-reveal-btn.disabled,
.mission-reveal-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.1);
}

/* 교사 도구 드롭다운 */
.teacher-tools-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 상단 메뉴 옆 코드 바 */
#teacherJoinCodeNavItem {
    display: inline-flex;
    align-items: center;
}

/* 교사: 코드 드롭다운 (헤더) */
.joincode-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 10px;
}

.joincode-dropdown-toggle {
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.joincode-dropdown-toggle:hover {
    background: rgba(255,255,255,0.35);
}

.joincode-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 260px;
    max-width: 340px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.15);
    padding: 0.5rem;
    z-index: 2500;
}

.joincode-dropdown-label {
    font-weight: 800;
    font-size: 0.82rem;
    color: #555;
    padding: 0.3rem 0.5rem 0.4rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.3rem;
}

.joincode-saved-list {
    max-height: 240px;
    overflow-y: auto;
}

.joincode-dropdown-empty {
    padding: 0.7rem 0.5rem;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

.joincode-saved-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.joincode-saved-item:hover {
    background: #f0f0ff;
}

.joincode-saved-item .saved-label {
    flex: 1;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.joincode-saved-item .saved-code {
    font-family: monospace;
    font-weight: 600;
    color: #667eea;
    font-size: 0.85rem;
}

.joincode-saved-item .saved-date {
    font-size: 0.75rem;
    color: #aaa;
    white-space: nowrap;
}

/* 저장된 코드 ID 표시 (팝업 내) */
.teacher-joincode-saved-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, #eef0ff 0%, #f5f0ff 100%);
    border: 2px solid #d0d5ff;
    border-radius: 12px;
    margin-bottom: 0.7rem;
}

.teacher-joincode-saved-id .saved-id-icon {
    font-size: 1.2rem;
}

.teacher-joincode-saved-id .saved-id-text {
    font-weight: 900;
    font-size: 1.05rem;
    color: #4f46e5;
}

/* 교사: 수업 참여 코드 팝업 */
.teacher-joincode-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1.2rem;
}

.teacher-joincode-modal {
    width: min(520px, 100%);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}

.teacher-joincode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.teacher-joincode-title {
    font-weight: 900;
    font-size: 1.05rem;
}

.teacher-joincode-close {
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.teacher-joincode-close:hover {
    background: rgba(255,255,255,0.3);
}

.teacher-joincode-body {
    padding: 1.2rem 1.1rem 1.1rem;
}

.teacher-joincode-big {
    text-align: center;
    font-size: 3rem;
    font-weight: 1000;
    letter-spacing: 0.18rem;
    color: #222;
    padding: 0.7rem 0.6rem;
    border: 2px dashed #d9dcff;
    border-radius: 14px;
    background: #f8f9ff;
}

.teacher-joincode-meta {
    margin-top: 0.7rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    min-height: 1.2rem;
}

.teacher-joincode-hint {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* 코드 저장 ID 입력 폼 */
.teacher-joincode-save-form {
    margin-top: 1rem;
}

.teacher-joincode-save-label {
    display: block;
    font-weight: 800;
    font-size: 0.92rem;
    color: #333;
    margin-bottom: 0.4rem;
}

.teacher-joincode-save-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid #d9dcff;
    border-radius: 10px;
    font-size: 1rem;
    color: #333;
    background: #f8f9ff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.teacher-joincode-save-input:focus {
    border-color: #667eea;
    background: #fff;
}

.teacher-joincode-save-hint {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #888;
}

.teacher-joincode-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.teacher-joincode-primary,
.teacher-joincode-secondary {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    font-weight: 900;
    font-size: 0.95rem;
}

.teacher-joincode-primary {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.teacher-joincode-primary:hover {
    filter: brightness(1.03);
}

.teacher-joincode-secondary {
    background: #f0f0f6;
    color: #333;
}

.teacher-joincode-secondary:hover {
    background: #e7e7f2;
}

.teacher-tools-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 0.35rem;
    z-index: 2000;
}

.teacher-tools-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
}

.teacher-tools-item:hover {
    background: #f5f5ff;
    color: #4f55d1;
}

.essay-instruction {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-left: 3px solid #667eea;
    border-radius: 4px;
}

.revealed-answer {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #e8f5e9;
    border-left: 3px solid #4caf50;
    border-radius: 4px;
    font-size: 0.95rem;
}

.revealed-answer-label {
    font-weight: 600;
    color: #2e7d32;
    margin-right: 0.5rem;
}

.revealed-answer-value {
    color: #1b5e20;
    font-weight: 500;
}

.teacher-reveal-btn {
    padding: 0.5rem 1rem;
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 1rem;
}

.teacher-reveal-btn:hover {
    background-color: #f57c00;
}

.teacher-reveal-btn.revealed {
    background-color: #4caf50;
}

.teacher-reveal-btn.revealed:hover {
    background-color: #388e3c;
}

/* 부제목 (작게) */
.mission-subtitle {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* 답변 입력 */
.answer-input {
    margin-bottom: 1.5rem;
}

.option-label {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.option-label:hover {
    background: #e8eeff;
    border-color: #667eea;
}

.option-label.option-correct-revealed {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.option-label.option-correct-revealed:hover {
    background: #def3e2;
    border-color: #2e7d32;
}

.option-badge {
    flex-shrink: 0;
    margin-left: 0.6rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.1;
}

.option-badge.correct {
    background: #2e7d32;
    color: #fff;
}

.answer-input.answer-correct-revealed {
    background: #f3fbf4;
    border: 2px solid #d7f0da;
    border-radius: 10px;
    padding: 0.6rem;
}

.revealed-correct-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
}

.revealed-correct-value {
    font-weight: 900;
    color: #1b5e20;
    word-break: break-word;
}

.option-radio {
    margin-right: 0.8rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.option-radio:checked + .option-text {
    font-weight: 600;
    color: #667eea;
}

.option-text {
    flex: 1;
    font-size: 0.95rem;
    color: #333;
}

.answer-text-input,
.answer-number-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.answer-text-input:focus,
.answer-number-input:focus {
    outline: none;
    border-color: #667eea;
}

.answer-textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s;
}

.answer-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.essay-note {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #999;
}

/* 미션 액션 버튼 */
.mission-actions {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.hint-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    background: white;
    border: 2px solid #667eea;
    border-radius: 8px;
    color: #667eea;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.hint-btn:hover:not(:disabled) {
    background: #667eea;
    color: white;
}

.hint-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.submit-btn {
    flex: 2;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 피드백 */
.mission-feedback {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.feedback-correct {
    background: #d4edda;
    border: 2px solid #c3e6cb;
}

.feedback-incorrect {
    background: #f8d7da;
    border: 2px solid #f5c6cb;
}

.feedback-pending {
    background: #fff3cd;
    border: 2px solid #ffeaa7;
}

.feedback-icon {
    font-size: 1.5rem;
}

.feedback-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
}

.feedback-correct .feedback-text {
    color: #155724;
}

.feedback-incorrect .feedback-text {
    color: #721c24;
}

.feedback-pending .feedback-text {
    color: #856404;
}

/* 해설 */
.mission-explanation {
    padding: 1rem;
    background: #f8f9ff;
    border-left: 4px solid #667eea;
    border-radius: 4px;
}

.explanation-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.explanation-content {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

/* 모바일 반응형 - 미션 */
@media (max-width: 768px) {
    .progress-badges-container {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem;
    }

    .progress-display-compact {
        width: 100%;
        flex-direction: column;
        gap: 0.6rem;
    }

    .progress-stats {
        flex-direction: column;
        gap: 0.4rem;
        width: 100%;
    }

    .stat-item {
        justify-content: space-between;
        width: 100%;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-value {
        font-size: 0.9rem;
    }

    .progress-bar-container {
        width: 100%;
        flex: 1;
    }

    .badges-display-compact {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .badges-grid {
        width: 100%;
    }

    .badge-item {
        padding: 0.25rem 0.5rem;
    }

    .badge-icon {
        font-size: 1rem;
    }

    .badge-name {
        font-size: 0.7rem;
    }

    .mission-tabs {
        padding: 0.4rem 0.4rem 0 0.4rem;
        gap: 0.15rem;
    }

    .mission-tab {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }

    .tab-difficulty {
        font-size: 0.6rem;
        padding: 0.05rem 0.25rem;
    }

    .mission-card {
        padding: 1rem;
    }

    .mission-question-inline {
        font-size: 1rem;
    }

    .mission-actions {
        flex-direction: column;
    }

    .hint-btn,
    .submit-btn {
        width: 100%;
    }
}

/* ============================================
   교사 학생 활동 관리 페이지
   ============================================ */

/* 헤더 중앙: 학급 선택 */
.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.class-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 1rem;
    border-radius: 6px;
}

.class-selector label {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.class-selector select {
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: white;
    color: #333;
    font-size: 0.85rem;
    min-width: 200px;
    cursor: pointer;
}

/* 메인 레이아웃 */
.activity-main {
    display: flex;
    gap: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    min-height: calc(100vh - 150px);
}

/* 왼쪽 사이드바: 학생 명단 */
.students-sidebar {
    width: 200px;
    background: white;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.sidebar-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.student-count {
    font-size: 0.85rem;
    opacity: 0.9;
}

.students-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.student-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.3rem;
    transition: background 0.2s;
    cursor: pointer;
}

.student-item:hover {
    background: #f0f0f0;
}

.student-num {
    flex-shrink: 0;
    width: 30px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.student-name {
    flex: 1;
    font-size: 0.85rem;
    color: #333;
}

/* 중앙: 활동 콘텐츠 */
.activity-content {
    flex: 1;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 섹션 탭 */
.section-tabs {
    display: flex;
    gap: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

.section-tab {
    padding: 0.6rem 1.2rem;
    background: #e0e0e0;
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: -2px;
}

.section-tab:hover {
    background: #d0d0d0;
}

.section-tab.active {
    background: white;
    color: #667eea;
    font-weight: 600;
    border-bottom: 2px solid white;
}

/* 활동 테이블 컨테이너 */
.activity-table-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.activity-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.subsection-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.subsection-title {
    padding: 1rem;
    background: #f8f9ff;
    color: #667eea;
    margin: 0;
    font-size: 1rem;
    border-bottom: 2px solid #667eea;
}

/* 활동 테이블 */
.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.activity-table thead {
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.activity-table th {
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-weight: 600;
    color: #333;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

.activity-table th.student-col {
    min-width: 120px;
    text-align: left;
}

.activity-table th.mission-col {
    min-width: 70px;
}

.activity-table td {
    padding: 0.6rem 0.5rem;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.student-name-col {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left !important;
}

.student-name-col .num {
    flex-shrink: 0;
    width: 30px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.student-name-col .name {
    flex: 1;
    font-size: 0.85rem;
    color: #333;
}

/* 활동 셀 */
.activity-cell {
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.activity-cell:hover {
    background: #f8f9ff;
    transform: scale(1.05);
}

.activity-cell.selected {
    background: #667eea !important;
    color: white;
}

.activity-cell.selected .status-icon,
.activity-cell.selected .points {
    color: white;
}

.activity-cell .status-icon {
    font-size: 1.2rem;
    display: block;
}

.activity-cell .points {
    font-size: 0.7rem;
    color: #666;
    display: block;
    margin-top: 0.2rem;
}

/* 셀 상태별 색상 */
.activity-cell.no-answer {
    background: #f5f5f5;
    color: #999;
}

.activity-cell.correct {
    background: #e8f5e9;
}

.activity-cell.incorrect {
    background: #ffebee;
}

.activity-cell.pending {
    background: #fff9e6;
}

.activity-cell.reviewed {
    background: #e3f2fd;
}

/* 오른쪽 패널: 코멘트 작성 */
.comment-panel {
    width: 320px;
    background: white;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
}

.comment-form {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selected-info {
    text-align: center;
    color: #999;
    padding: 2rem 1rem;
}

.comment-input-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.student-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.info-row .label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.info-row .value {
    font-size: 0.85rem;
    color: #333;
}

.answer-preview {
    font-size: 0.85rem;
    color: #333;
    background: white;
    padding: 0.8rem;
    border-radius: 6px;
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
}

.comment-input-section label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.comment-input-section textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 120px;
}

#essayScoreSection {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#essayScoreSection input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.score-note {
    font-size: 0.85rem;
    color: #666;
}

.save-feedback-btn {
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.save-feedback-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.empty-message {
    text-align: center;
    color: #999;
    padding: 2rem;
    font-size: 0.9rem;
}

/* 반응형 */
@media (max-width: 1400px) {
    .students-sidebar {
        width: 180px;
    }

    .comment-panel {
        width: 280px;
    }
}

@media (max-width: 1200px) {
    .activity-main {
        flex-direction: column;
    }

    .students-sidebar,
    .comment-panel {
        width: 100%;
        border-radius: 8px;
    }

    .activity-content {
        border-radius: 8px;
        margin: 1rem 0;
    }
}

/* ===== 자료 다운로드 섹션 스타일 ===== */
.downloads-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
}

.download-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.download-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.download-table th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.download-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.download-table tbody tr:hover {
    background: #f8f9fa;
}

.download-table tbody tr:last-child td {
    border-bottom: none;
}

.table-view-btn {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    transition: all 0.2s;
}

.table-view-btn.ppt {
    background: #d04423;
}

.table-view-btn.ppt:hover {
    background: #b83a1d;
}

.table-view-btn.pdf {
    background: #e74c3c;
}

.table-view-btn.pdf:hover {
    background: #c0392b;
}

.table-view-btn.zip {
    background: #f39c12;
}

.table-view-btn.zip:hover {
    background: #d68910;
}

.table-view-btn.xlsx {
    background: #217346;
}

.table-view-btn.xlsx:hover {
    background: #1a5c38;
}

.table-download-btn {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    transition: all 0.2s;
    background: #4a6fa5;
}

.table-download-btn:hover {
    background: #3d5a87;
}

.table-download-btn.ppt {
    background: #8b5a2b;
}

.table-download-btn.ppt:hover {
    background: #704821;
}

.table-download-btn.pdf {
    background: #27ae60;
}

.table-download-btn.pdf:hover {
    background: #1e8449;
}

.table-download-btn.zip {
    background: #9b59b6;
}

.table-download-btn.zip:hover {
    background: #7d3c98;
}

.table-download-btn.xlsx {
    background: #217346;
}

.table-download-btn.xlsx:hover {
    background: #1a5c38;
}

.table-broadcast-btn {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    background: #9b59b6;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.table-broadcast-btn:hover {
    background: #8e44ad;
}

.table-delete-btn {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: #e74c3c;
    transition: all 0.2s;
}

.table-delete-btn:hover {
    background: #c0392b;
}

.table-restore-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #4f46e5;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
}

.table-restore-btn:hover {
    background: #4f46e5;
    color: white;
}

/* ===== 관리자 모달 오버레이 ===== */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-overlay .modal-content {
    background-color: white;
    border-radius: 12px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-overlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.modal-overlay .modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.modal-overlay .modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-overlay .modal-close:hover {
    background-color: #f0f0f0;
    color: #333;
}

.modal-overlay .modal-body {
    padding: 1.5rem;
}

.modal-overlay .form-group {
    margin-bottom: 1.2rem;
}

.modal-overlay .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.modal-overlay .form-group input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.modal-overlay .form-group input:focus {
    outline: none;
    border-color: #667eea;
    background: #f8f9ff;
}

.modal-overlay .submit-btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0.5rem;
}

.modal-overlay .submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.modal-overlay .submit-btn:active {
    transform: translateY(0);
}

/* ===== 엑셀 일괄 생성 모달 ===== */

.bulk-info-box {
    background: #f8f9ff;
    border: 1px solid #d0d7ff;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.bulk-info-box p {
    margin: 0;
}

.bulk-template-table-wrap {
    overflow-x: auto;
    margin: 0.8rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.bulk-template-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bulk-template-table th,
.bulk-template-table td {
    padding: 0.45rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
}

.bulk-template-table th {
    background: #667eea;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
}

.bulk-template-table td {
    background: #fff;
    color: #555;
}

.bulk-download-template-btn {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.4rem 1rem;
    background: white;
    border: 1.5px solid #667eea;
    color: #667eea;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bulk-download-template-btn:hover {
    background: #667eea;
    color: white;
}

/* 파일 업로드 드롭존 */
.bulk-drop-zone {
    border: 2.5px dashed #c0c8f0;
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    background: #fafbff;
}

.bulk-drop-zone:hover,
.bulk-drop-zone.drag-active {
    border-color: #667eea;
    background: #eef1ff;
}

.bulk-drop-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.bulk-drop-zone p {
    margin: 0;
    font-weight: 600;
    color: #444;
    font-size: 0.95rem;
}

.bulk-drop-hint {
    font-size: 0.8rem;
    color: #999;
    display: block;
    margin-top: 0.3rem;
}

/* 미리보기 */
.bulk-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.bulk-preview-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.bulk-count-badge {
    display: inline-block;
    background: #667eea;
    color: white;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.4rem;
}

.bulk-reset-btn {
    padding: 0.35rem 0.8rem;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    transition: all 0.2s;
}

.bulk-reset-btn:hover {
    background: #e0e0e0;
}

.bulk-preview-table-wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.8rem;
}

.bulk-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bulk-preview-table th,
.bulk-preview-table td {
    padding: 0.5rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.bulk-preview-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #555;
    position: sticky;
    top: 0;
    z-index: 5;
}

.bulk-preview-table tr:hover {
    background: #f5f5ff;
}

.bulk-row-ok {}

.bulk-row-error {
    background: #fff8f8;
}

.bulk-row-error td {
    color: #c00;
}

.bulk-status-cell {
    font-size: 0.78rem;
    white-space: nowrap;
}

.bulk-validation-msg {
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
}

.bulk-warn {
    color: #e65100;
    font-weight: 600;
}

.bulk-ok {
    color: #2e7d32;
    font-weight: 600;
}

/* 결과 */
.bulk-result-cards {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.bulk-result-card {
    flex: 1;
    text-align: center;
    padding: 0.8rem;
    border-radius: 10px;
    max-width: 140px;
}

.bulk-result-card.success {
    background: #e8f5e9;
    border: 1.5px solid #66bb6a;
}

.bulk-result-card.fail {
    background: #ffebee;
    border: 1.5px solid #ef5350;
}

.bulk-result-card.skip {
    background: #fff3e0;
    border: 1.5px solid #ffa726;
}

.bulk-result-num {
    font-size: 1.6rem;
    font-weight: 700;
}

.bulk-result-card.success .bulk-result-num { color: #2e7d32; }
.bulk-result-card.fail .bulk-result-num { color: #c62828; }
.bulk-result-card.skip .bulk-result-num { color: #e65100; }

.bulk-result-label {
    font-size: 0.82rem;
    color: #555;
    font-weight: 600;
    margin-top: 0.2rem;
}

.bulk-result-detail-wrap {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.bulk-badge-success {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

.bulk-badge-fail {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #ffebee;
    color: #c62828;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

.bulk-badge-skip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #fff3e0;
    color: #e65100;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ===== 화면 전송 모달 ===== */
.screen-share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.screen-share-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.screen-share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
}

.screen-share-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.screen-share-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
}

.screen-share-modal-close:hover {
    color: #333;
}

.screen-share-modal-body {
    padding: 1.5rem;
}

.screen-share-file-name {
    background: #f8f9fa;
    padding: 0.8rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #333;
}

.screen-share-class-select label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #555;
}

.class-select-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.screen-share-select {
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
}

.screen-share-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
}

.screen-share-cancel-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
}

.screen-share-cancel-btn:hover {
    background: #f5f5f5;
}

.screen-share-confirm-btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: #9b59b6;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.screen-share-confirm-btn:hover {
    background: #8e44ad;
}

/* 화면 전송 상태바 */
.screen-share-status-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(155, 89, 182, 0.4);
    z-index: 9999;
}

.screen-share-status-bar .status-indicator {
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.screen-share-stop-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
}

.screen-share-stop-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 학생용 화면 잠금 오버레이 */
.screen-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.screen-lock-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.screen-lock-icon {
    font-size: 1.5rem;
}

.screen-lock-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #000;
}

/* 교사용 화면 프리뷰 */
.teacher-screen-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 교사용 크기 조절 모드 */
.teacher-screen-preview.resizable {
    top: 80px;
    left: auto;
    right: 20px;
    bottom: auto;
    width: 800px;
    height: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    resize: both;
    min-width: 400px;
    min-height: 300px;
}

.teacher-screen-preview.minimized {
    top: 80px;
    left: auto;
    right: 20px;
    bottom: auto;
    width: 350px;
    height: 50px;
    border-radius: 12px;
}

.teacher-screen-preview.minimized .teacher-preview-iframe {
    display: none;
}

.teacher-preview-header {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-icon {
    font-size: 1.2rem;
}

.preview-class-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

.preview-controls {
    display: flex;
    gap: 0.5rem;
}

.preview-resize-btn,
.preview-minimize-btn,
.preview-stop-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.preview-resize-btn:hover,
.preview-minimize-btn:hover,
.preview-stop-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.preview-stop-btn {
    background: #e74c3c;
}

.preview-stop-btn:hover {
    background: #c0392b;
}

.teacher-preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .download-table th,
    .download-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .table-view-btn,
    .table-download-btn,
    .table-delete-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ===== 활동 정리하기 미션 스타일 ===== */
.review-mission-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.review-tab {
    padding: 0.6rem 1.2rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
}

.review-tab:hover {
    background: #e8e8e8;
}

.review-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

.review-mission-content {
    display: none;
    padding: 1.5rem;
    background: #fafafa;
    border-radius: 8px;
    margin-top: 1rem;
}

.review-mission-content.active {
    display: block;
}

.review-question {
    margin-bottom: 1.5rem;
}

.review-question h5 {
    font-size: 1.1rem;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.review-question .question-text {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.review-question .question-hint {
    font-size: 0.85rem;
    color: #888;
}

.review-answer-area {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.review-textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.review-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.char-count-area {
    text-align: right;
    font-size: 0.85rem;
    color: #666;
}

.char-count-area span {
    font-weight: bold;
    color: #667eea;
}

.review-submit-btn {
    align-self: flex-end;
    padding: 0.7rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.review-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .review-mission-tabs {
        flex-wrap: wrap;
    }
    
    .review-tab {
        flex: 1;
        text-align: center;
        min-width: 80px;
    }
    
    .review-textarea {
        min-height: 150px;
    }
}

/* ===== 교사용 학급 선택 드롭다운 ===== */
.class-select-container {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.class-select-container label {
    color: white;
    font-size: 0.75rem;
}

.global-class-select {
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 3px;
    background: white;
    color: #333;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 90px;
}

.global-class-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
}

@media (max-width: 768px) {
    .class-select-container label {
        display: none;
    }
    
    .global-class-select {
        min-width: 80px;
        font-size: 0.65rem;
    }
}

/* ===== 학습 데이터 섹션 스타일 ===== */
.learning-data-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: calc(100vh - 120px);
}

/* 메인 영역 */
.learning-data-main {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

/* 좌측 사이드바 */
.ld-sidebar {
    width: 220px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ld-sidebar-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
}

.ld-sidebar-tab {
    flex: 1;
    padding: 0.6rem;
    border: none;
    background: #f9f9f9;
    color: #666;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ld-sidebar-tab.active {
    background: white;
    color: #667eea;
    border-bottom: 2px solid #667eea;
    margin-bottom: -2px;
}

/* '항목' 자리: 학급 선택 드롭다운 탭 */
.ld-sidebar-tab-select {
    padding: 0;
    display: flex;
    align-items: center;
}

.ld-sidebar-tab-select .ld-class-select {
    width: 100%;
    padding: 0.6rem;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
}

.ld-sidebar-tab-select .ld-class-select:focus {
    outline: none;
}

.ld-sidebar-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.ld-sidebar-panel.active {
    display: flex;
}

.ld-class-info {
    padding: 0.6rem;
    background: #f8f9ff;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #667eea;
}

.ld-student-list, .ld-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.ld-student-item, .ld-item-btn {
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.3rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ld-student-item:hover, .ld-item-btn:hover {
    background: #f0f4ff;
    border-color: #667eea;
}

.ld-student-item.active, .ld-item-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

.ld-student-num {
    font-weight: 700;
    min-width: 24px;
}

.ld-placeholder {
    padding: 1rem;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

/* 아코디언 스타일 */
.ld-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

.ld-accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.ld-accordion-header {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: none;
    background: #f8f9ff;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.ld-accordion-header:hover {
    background: #eef1ff;
}

.ld-accordion-header.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.ld-accordion-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.ld-accordion-header.active .ld-accordion-arrow {
    transform: rotate(180deg);
}

.ld-accordion-content {
    max-height: 0;
    overflow: hidden;
    background: white;
    transition: max-height 0.3s ease;
}

.ld-accordion-content.open {
    max-height: 300px;
}

.ld-accordion-content .ld-item-btn {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    margin: 0;
    padding: 0.5rem 0.8rem 0.5rem 1.5rem;
    font-size: 0.8rem;
}

.ld-accordion-content .ld-item-btn:last-child {
    border-bottom: none;
}

/* 우측 데이터 표시 영역 */
.ld-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ld-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid #e0e0e0;
    background: #f9f9f9;
}

.ld-content-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.ld-download-btn {
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 6px;
    background: #10b981;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ld-download-btn:hover {
    background: #059669;
}

.ld-download-group {
    display: flex;
    gap: 0.4rem;
}

.ld-download-school {
    background: #667eea;
}

.ld-download-school:hover {
    background: #5a6fd6;
}

.ld-content-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.ld-placeholder-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

.ld-placeholder-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* 데이터 테이블 */
.ld-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ld-data-table th, .ld-data-table td {
    padding: 0.6rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.ld-data-table th {
    background: #f8f9ff;
    font-weight: 600;
    color: #667eea;
}

.ld-data-table tr:hover {
    background: #f5f5f5;
}

/* 학습 데이터 통합 테이블 */
.ld-mission-info-box {
    background: #f8f9ff;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid #667eea;
}

.ld-mission-info-item {
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.ld-mission-info-item:last-child {
    margin-bottom: 0;
}

.ld-mission-rate {
    color: #667eea;
    font-weight: 600;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.ld-table-wrapper {
    overflow-x: auto;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.ld-table-wrapper .ld-data-table th,
.ld-table-wrapper .ld-data-table td {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
}

.ld-table-wrapper .ld-data-table th {
    position: sticky;
    top: 0;
    background: #667eea;
    color: white;
    z-index: 1;
}

/* 클릭 가능한 셀 */
.ld-cell-clickable {
    cursor: pointer;
    background: #f0f4ff;
    transition: background 0.2s;
}

.ld-cell-clickable:hover {
    background: #e0e8ff;
    text-decoration: underline;
}

/* 답변 상세 모달 */
.answer-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.answer-detail-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.answer-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9ff;
    border-radius: 12px 12px 0 0;
}

.answer-detail-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.answer-detail-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.answer-detail-close:hover {
    color: #333;
}

.answer-detail-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.answer-detail-body p {
    margin: 0;
    line-height: 1.8;
    font-size: 0.95rem;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .learning-data-main {
        flex-direction: column;
    }
    
    .ld-sidebar {
        width: 100%;
        max-height: 200px;
    }
    
    .learning-data-menu-tabs {
        flex-wrap: wrap;
    }
    
    .ld-menu-tab {
        flex: 1 1 45%;
        font-size: 0.75rem;
    }
}

/* ============================================
   재무설계 테이블 (교사용) - 단일 테이블 + sticky 열
   ============================================ */
.financial-plans-container {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.financial-plans-container .subsection-title {
    font-size: 1rem;
    color: #667eea;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #667eea;
}

/* 단일 테이블 wrapper */
.fp-single-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    position: relative;
}

/* 단일 테이블 */
.fp-single-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    isolation: isolate;
}

/* Sticky 학생 열 헤더 - 공통 */
.fp-sticky-header-top {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 9999 !important;
    min-width: 120px;
    width: 120px;
    border-right: 2px solid #5a67d8;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.15);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 그룹 행의 학생 헤더 */
.fp-sticky-header-group {
    top: 0;
    background: #667eea !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 1rem;
    text-align: center;
    height: 36px;
}

/* 아이템 행의 학생 헤더 (빈 셀) */
.fp-sticky-header-item {
    top: 36px;
    background-color: #e8eaf6 !important;
    height: 28px;
    border-bottom: 1px solid #d0d0d0;
}

/* Sticky 학생 데이터 셀 */
.fp-sticky-cell {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 999 !important;
    background-color: #f8f9fa !important;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    white-space: nowrap;
    border-bottom: 1px solid #e0e0e0;
    border-right: 2px solid #667eea;
    min-width: 120px;
    width: 120px;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.15);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.fp-sticky-cell .num {
    display: inline-block;
    background: #667eea;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-right: 0.4rem;
    min-width: 1.4rem;
    text-align: center;
}

.fp-sticky-cell .name {
    font-weight: 500;
    color: #333;
}

/* 그룹 헤더 (1행) */
.fp-single-table .fp-header-group th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
}

.fp-header-group .fp-group-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    height: 36px;
}

.fp-header-group .fp-group-header:first-child {
    border-left: none;
}

/* 아이템 헤더 (2행) */
.fp-single-table .fp-header-items th {
    position: -webkit-sticky;
    position: sticky;
    top: 36px;
    z-index: 5;
}

.fp-header-items .fp-item-header {
    background-color: #e8eaf6;
    color: #5c6bc0;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.4rem 0.4rem;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    white-space: nowrap;
    min-width: 75px;
    height: 28px;
}

/* 데이터 셀 */
.fp-data-cell {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
    text-align: center;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: white;
    white-space: nowrap;
    position: relative;
    z-index: 0;
}

.fp-single-table tbody tr:hover td.fp-data-cell {
    background-color: #f5f5ff;
}

.fp-single-table tbody tr:hover td.fp-sticky-cell {
    background-color: #e8eaf6 !important;
}

/* 빈 값 스타일 */
.fp-empty {
    color: #bbb;
    font-style: italic;
}

/* 범례 */
.fp-legend {
    margin-top: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: #666;
}

.fp-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.fp-legend-item .legend-icon {
    color: #bbb;
    font-weight: 600;
}

/* 스크롤바 스타일 */
.fp-single-table-wrapper::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.fp-single-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.fp-single-table-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.fp-single-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 반응형 */
@media (max-width: 768px) {
    .fp-single-table-wrapper {
        max-height: 60vh;
    }
    
    .fp-sticky-cell {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
        min-width: 100px;
    }
    
    .fp-data-cell {
        font-size: 0.7rem;
        padding: 0.4rem 0.3rem;
    }
}

/* ============================================
   툴팁 스타일 (물음표 아이콘)
   ============================================ */

.tooltip-info-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: white;
    color: #667eea;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.tooltip-info-white:hover {
    background: #f0f4ff;
}

.tooltip-info-white::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 0.8rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-line;
    width: 320px;
    max-width: 90vw;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-align: left;
    font-weight: normal;
}

.tooltip-info-white:hover::after {
    opacity: 1;
}

/* 툴팁 화살표 */
.tooltip-info-white::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1001;
}

.tooltip-info-white:hover::before {
    opacity: 1;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .tooltip-info-white::after {
        width: 280px;
        font-size: 0.7rem;
        padding: 0.6rem;
    }
}

/* ============================================
   홈 섹션: YouTube 영상 랜딩
   ============================================ */

/* 홈 모드: 사이드바 숨기고 콘텐츠 전체 폭 사용 */
.main-content.home-active .right-panel,
.main-content.home-active .panel-resizer,
.main-content.home-active .floating-panel-toggle {
    display: none !important;
}

.main-content.home-active .left-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
}

.home-video-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.home-video-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 썸네일 상태 */
.home-video-thumbnail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.home-video-thumbnail:hover .home-video-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* iframe 플레이어 */
.home-video-player {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.home-video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 전체화면 버튼 */
.home-video-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

.home-video-container:hover .home-video-fullscreen-btn {
    opacity: 1;
}

.home-video-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 전체화면 활성 시 */
.home-video-container:fullscreen {
    border-radius: 0;
    max-width: none;
}

.home-video-container:-webkit-full-screen {
    border-radius: 0;
    max-width: none;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .home-video-wrapper {
        padding: 1rem 0.5rem;
    }
    .home-video-container {
        border-radius: 10px;
    }
    .home-video-fullscreen-btn {
        opacity: 1;
    }
}

/* ============================================
   모바일 통합 수정 (콘텐츠 잘림 방지)
   ============================================ */
@media (max-width: 768px) {
    body.app-layout {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .main-content {
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.app-layout .main-content {
        flex: 1 1 auto;
    }

    .content-wrapper {
        overflow: visible;
        min-height: auto;
    }

    .right-panel {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .teacher-screen-preview.resizable {
        width: 100%;
        min-width: 0;
        right: 0;
        left: 0;
        border-radius: 0;
    }

    .teacher-screen-preview.minimized {
        width: 90%;
        right: 5%;
    }
}