/* ===== K-IB EDUCATION PLATFORM CSS ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #4F46E5;
    --primary-light: #6366F1;
    --primary-dark: #3730A3;
    --primary-bg: #EEF2FF;
    --accent-teal: #0D9488;
    --accent-blue: #0284C7;
    --accent-amber: #D97706;
    --accent-emerald: #059669;
    --accent-rose: #E11D48;
    --accent-purple: #7C3AED;
    
    --bg-main: #F8FAFC;
    --bg-white: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --border: #E2E8F0;
    --border-light: #F1F5F9;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    
    --sidebar-width: 270px;
    --sidebar-collapsed: 68px;
    --header-height: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-brand: 'Outfit', sans-serif;
    --transition: all 0.22s ease-in-out;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

/* ===== APP LAYOUT ===== */
#app { display: flex; min-height: 100vh; width: 100%; overflow-x: hidden; }

/* ===== SIDEBAR ===== */
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 60;
    transition: var(--transition);
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .nav-text, 
.sidebar.collapsed .nav-badge, 
.sidebar.collapsed .nav-ai-badge,
.sidebar.collapsed .nav-badge-accent,
.sidebar.collapsed .nav-badge-lock,
.sidebar.collapsed .nav-section-title, 
.sidebar.collapsed .sidebar-semester, 
.sidebar.collapsed .role-badge-box,
.sidebar.collapsed .school-info-card,
.sidebar.collapsed .logo-brand,
.sidebar.collapsed .nav-add-btn { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 12px; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; }
.logo-emoji { font-size: 24px; }
.logo-brand { font-family: var(--font-brand); font-size: 20px; font-weight: 800; color: #1E293B; }
.logo-accent { color: var(--primary); }
.sidebar-collapse-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); color: var(--text-muted); transition: var(--transition);
}
.sidebar-collapse-btn:hover { background: var(--border-light); color: var(--text-primary); }

.sidebar-semester { padding: 14px 18px; border-bottom: 1px solid var(--border-light); background: #FAFBFD; }
.semester-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.semester-select {
    width: 100%; padding: 8px 12px; border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    background: #FFFFFF; color: var(--text-primary); outline: none; transition: var(--transition);
}
.semester-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }

.role-badge-box {
    padding: 10px 18px; background: #F1F5F9; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 2px;
}
.role-pill {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm);
    width: fit-content;
}
.role-pill.teacher { background: #E0E7FF; color: #3730A3; }
.role-pill.student { background: #DCFCE7; color: #166534; }
.role-pill.parent { background: #FEF3C7; color: #92400E; }
.role-pill.admin { background: #FEE2E2; color: #991B1B; }
.role-desc { font-size: 11px; color: var(--text-secondary); }

.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.nav-section { margin-bottom: 16px; }
.nav-section-title {
    padding: 6px 12px 6px; font-size: 11px; font-weight: 800;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px;
}
.nav-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500;
    color: var(--text-secondary); transition: var(--transition); margin-bottom: 3px;
    position: relative;
}
.nav-item:hover { background: #F1F5F9; color: var(--text-primary); }
.nav-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 700; }
.nav-icon { font-size: 16px; min-width: 20px; text-align: center; }
.nav-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-badge {
    background: #E2E8F0; color: var(--text-secondary); font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: var(--radius-full);
}
.nav-badge-accent {
    background: #EEF2FF; color: var(--primary); font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: var(--radius-full); border: 1px solid #C7D2FE;
}
.nav-badge-lock {
    background: #F8FAFC; color: #64748B; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: var(--radius-full); border: 1px solid #CBD5E1;
}
.nav-ai-badge {
    background: linear-gradient(135deg, #6366F1, #8B5CF6); color: white;
    font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: var(--radius-full);
}

.nav-add-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
    margin-top: 4px; border: 1px dashed #CBD5E1; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; color: #64748B; background: transparent;
    transition: var(--transition);
}
.nav-add-btn:hover { background: #F1F5F9; color: var(--primary); border-color: var(--primary-light); }

.sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border-light); background: #FAFBFD; }
.school-info-card { text-align: center; padding: 8px; border-radius: var(--radius-sm); background: #F1F5F9; }
.school-badge { font-weight: 800; font-size: 13px; color: #1E293B; }
.school-program { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1; margin-left: var(--sidebar-width); min-height: 100vh;
    display: flex; flex-direction: column; transition: var(--transition);
}
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); }

/* TOP HEADER */
.top-header {
    min-height: var(--header-height); background: var(--bg-white); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    position: sticky; top: 0; z-index: 40; gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mobile-sidebar-btn { display: none; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-separator { color: var(--text-muted); }
.breadcrumb-item.active { font-weight: 700; color: var(--text-primary); }

/* 헤더 중앙 역할 전환기 */
.header-role-switcher {
    display: flex; align-items: center; gap: 8px; background: #F1F5F9;
    padding: 4px 8px; border-radius: var(--radius-full); border: 1px solid var(--border);
    flex-shrink: 0;
}
.role-switch-label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-left: 4px; white-space: nowrap; }
.role-btn-group { display: flex; gap: 4px; align-items: center; }
.role-toggle-btn {
    padding: 5px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600;
    color: #475569; transition: var(--transition); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.role-toggle-btn:hover { background: #E2E8F0; color: var(--text-primary); }
.role-toggle-btn.active {
    background: var(--primary); color: #FFFFFF; font-weight: 700;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
}
.btn-maintext { font-weight: inherit; }
.btn-subtext { font-weight: normal; opacity: 0.85; }

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.search-box {
    display: flex; align-items: center; gap: 8px; background: #F8FAFC;
    border: 1px solid #CBD5E1; padding: 6px 12px; border-radius: var(--radius-full);
    transition: var(--transition);
}
.search-box:focus-within { border-color: var(--primary); background: #FFFFFF; box-shadow: 0 0 0 3px var(--primary-bg); }
.search-input { border: none; background: transparent; outline: none; font-size: 12.5px; width: 160px; transition: var(--transition); }
.header-btn {
    position: relative; width: 36px; height: 36px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; background: #F8FAFC;
    border: 1px solid #E2E8F0; font-size: 16px; transition: var(--transition); flex-shrink: 0;
}
.header-btn:hover { background: #F1F5F9; }
.notif-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    background: #EF4444; border-radius: 50%; border: 2px solid white;
}
.user-menu { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radius-md); flex-shrink: 0; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--primary-bg);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.user-text-info { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: 13px; font-weight: 700; color: #1E293B; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub { font-size: 11px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 알림 패널 */
.notif-panel {
    display: none; position: fixed; right: 30px; top: 68px; width: 340px;
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl); z-index: 100; overflow: hidden;
}
.notif-panel.active { display: block; animation: fadeIn 0.2s ease; }
.notif-header {
    display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
    border-bottom: 1px solid var(--border-light); background: #FAFBFD;
}
.notif-list { list-style: none; max-height: 360px; overflow-y: auto; }
.notif-list li {
    padding: 12px 18px; border-bottom: 1px solid var(--border-light); font-size: 12.5px;
    display: flex; flex-direction: column; gap: 4px;
}
.notif-list li:hover { background: #F8FAFC; }
.notif-type { font-weight: 700; color: var(--primary); font-size: 11px; }
.notif-time { font-size: 11px; color: var(--text-muted); }

/* ===== PAGE CONTAINER & CARDS ===== */
.page-container { flex: 1; padding: 28px; max-width: 1320px; width: 100%; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-top-banner {
    display: flex; justify-content: space-between; align-items: flex-start;
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 24px 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.tag-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tag-item {
    font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full);
    background: #F1F5F9; color: var(--text-secondary);
}
.tag-item.ai { background: linear-gradient(135deg, #EEF2FF, #FAF5FF); color: var(--primary); border: 1px solid #C7D2FE; }
.page-heading { font-size: 22px; font-weight: 800; color: #0F172A; margin-bottom: 6px; }
.page-desc { font-size: 13.5px; color: var(--text-secondary); max-width: 820px; line-height: 1.5; }
.banner-actions { display: flex; gap: 10px; align-items: center; }

.student-notice-box {
    display: flex; gap: 12px; align-items: center; background: #EFF6FF; border: 1.5px solid #93C5FD;
    border-radius: var(--radius-md); padding: 12px 18px; margin-bottom: 20px; color: #1E40AF; font-size: 13px;
}

/* 필터 툴바 */
.filter-toolbar {
    display: flex; justify-content: space-between; align-items: center; background: #FFFFFF;
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 20px;
    margin-bottom: 20px; flex-wrap: wrap; gap: 16px;
}
.filter-group { display: flex; align-items: center; gap: 10px; }
.filter-group label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.chip-group { display: flex; gap: 6px; }
.chip-btn {
    padding: 6px 14px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 600;
    background: #F1F5F9; color: var(--text-secondary); transition: var(--transition);
}
.chip-btn:hover { background: #E2E8F0; }
.chip-btn.active { background: var(--primary); color: white; }
.filter-select {
    padding: 6px 14px; border: 1px solid #CBD5E1; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; background: white; outline: none;
}

/* 유닛 플랜 카드 그리드 */
.unit-plan-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; margin-bottom: 28px;
}
.unit-card {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition);
    display: flex; flex-direction: column; cursor: pointer;
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #CBD5E1; }
.unit-card-header { padding: 16px 20px; color: white; display: flex; justify-content: space-between; align-items: center; }
.unit-card-header.sci { background: linear-gradient(135deg, #059669, #10B981); }
.unit-card-header.soc { background: linear-gradient(135deg, #0284C7, #38BDF8); }
.unit-card-header.eng { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.unit-card-header.kor { background: linear-gradient(135deg, #EA580C, #FB923C); }
.unit-card-header.art { background: linear-gradient(135deg, #DB2777, #F472B6); }
.unit-card-subject { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.unit-card-grade { font-size: 11.5px; background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: var(--radius-full); }

.unit-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.unit-card-title { font-size: 16.5px; font-weight: 700; color: #1E293B; line-height: 1.4; }
.unit-card-soi {
    font-size: 12.5px; color: #475569; background: #F8FAFC; border-left: 3px solid var(--primary);
    padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic;
}
.unit-meta-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.meta-chip { font-size: 11px; padding: 2px 8px; background: #F1F5F9; border-radius: var(--radius-sm); color: #64748B; }
.unit-card-footer {
    padding: 12px 20px; background: #FAFBFD; border-top: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #64748B;
}

/* 유닛 상세 뷰어 & 매니지백 양식 */
.unit-detail-container {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); margin-top: 24px; overflow: hidden;
}
.detail-header-bar {
    display: flex; justify-content: space-between; align-items: center; padding: 18px 24px;
    background: #F8FAFC; border-bottom: 1px solid var(--border);
}
.detail-title-wrap h2 { font-size: 19px; font-weight: 800; color: #0F172A; margin: 4px 0 2px; }
.view-unit-meta { font-size: 12.5px; color: #64748B; }
.detail-action-buttons { display: flex; gap: 8px; }

/* MANAGEBAC PAPER STYLE FOR PRINT/PDF */
.managebac-paper {
    padding: 36px 40px; background: #FFFFFF; max-width: 960px; margin: 0 auto;
}
.mb-doc-header {
    display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0F172A;
    padding-bottom: 16px; margin-bottom: 24px;
}
.mb-school-logo h3 { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
.mb-school-logo p { font-size: 12px; color: #64748B; font-weight: 600; }
.stamp-box {
    border: 2px solid #059669; color: #059669; font-weight: 800; font-size: 11px;
    padding: 6px 12px; border-radius: var(--radius-sm); letter-spacing: 1px;
}
.mb-section-title {
    font-size: 14px; font-weight: 800; color: #1E293B; background: #F1F5F9;
    padding: 8px 14px; border-left: 4px solid var(--primary); margin: 24px 0 10px;
}
.mb-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 12.5px; }
.mb-table th, .mb-table td {
    border: 1px solid #CBD5E1; padding: 9px 12px; text-align: left; vertical-align: middle;
}
.mb-table th { background: #F8FAFC; font-weight: 700; color: #334155; }
.highlight-cell { background: #FAF5FF; font-weight: 600; color: #4338CA; }
.mb-inquiry-box { display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.mb-content-box {
    border: 1px solid #CBD5E1; padding: 14px 18px; border-radius: var(--radius-sm);
    background: #FAFBFD; font-size: 12.5px; line-height: 1.6;
}
.mb-content-box ul { padding-left: 20px; }
.atl-tag {
    display: inline-block; background: #EEF2FF; color: #3730A3; font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px; margin-right: 6px; margin-bottom: 4px;
}
.criteria-row-display { display: flex; gap: 8px; flex-wrap: wrap; }
.crit-badge {
    background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; font-size: 11.5px;
    font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm);
}
.mb-footer-sign {
    display: flex; justify-content: space-between; margin-top: 36px; padding-top: 20px;
    border-top: 1px dashed #CBD5E1; font-size: 12px; color: #475569;
}

/* CLIPO WORKFLOW STEPPER */
.clipo-step-stepper {
    display: flex; align-items: center; justify-content: space-between; background: #FFFFFF;
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 24px;
    margin-bottom: 24px; box-shadow: var(--shadow-sm); overflow-x: auto;
}
.step-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.step-num {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 13px; background: #F1F5F9; color: #64748B;
}
.step-item.active .step-num { background: var(--primary); color: white; }
.step-item.completed .step-num { background: #10B981; color: white; }
.step-label { font-size: 13px; font-weight: 700; color: #334155; }
.step-item.active .step-label { color: var(--primary); }
.step-connector { flex: 1; height: 2px; background: #E2E8F0; margin: 0 16px; min-width: 24px; }

.process-panel-card {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.student-box-highlight { border: 2px solid #93C5FD; background: #FBFDFF; }

/* AI 채점 결과 그리드 */
.ai-scoring-result-card {
    background: #FAFBFD; border: 1px solid #E2E8F0; border-radius: var(--radius-md);
    padding: 20px; margin-top: 16px;
}
.scoring-student-meta { font-size: 13.5px; color: #334155; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #E2E8F0; }
.rubric-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rubric-box {
    background: #FFFFFF; border: 1.5px solid #CBD5E1; border-radius: var(--radius-md);
    padding: 14px; box-shadow: var(--shadow-sm);
}
.rubric-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.crit-name { font-size: 11px; font-weight: 800; color: var(--primary); background: var(--primary-bg); padding: 2px 6px; border-radius: 4px; }
.crit-title { font-size: 12px; font-weight: 700; color: #334155; }
.score-input-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.score-num-input {
    width: 60px; padding: 6px 10px; font-size: 18px; font-weight: 800; border: 2px solid var(--primary-light);
    border-radius: var(--radius-sm); text-align: center; color: var(--primary-dark);
}
.score-max { font-size: 13px; font-weight: 700; color: #64748B; }
.rubric-ai-note { font-size: 11.5px; color: #475569; line-height: 1.4; background: #F8FAFC; padding: 6px 8px; border-radius: 4px; }
.ai-feedback-box { margin-bottom: 16px; }
.fb-title { font-size: 13px; font-weight: 700; color: #1E293B; margin-bottom: 6px; }

/* 성적 뱃지 */
.badge-score { font-size: 12px; font-weight: 700; background: #EEF2FF; color: #3730A3; padding: 3px 8px; border-radius: 4px; }
.badge-grade { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); }
.badge-grade.g7 { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-grade.g5 { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

/* NAVER CAFE STYLE INTERFACE */
.class-tab-nav { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
.class-tab-btn {
    padding: 9px 18px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 700;
    background: #FFFFFF; border: 1px solid var(--border); color: #475569; transition: var(--transition);
}
.class-tab-btn:hover { background: #F1F5F9; color: var(--text-primary); }
.class-tab-btn.active { background: #03C75A; color: white; border-color: #03C75A; box-shadow: 0 2px 6px rgba(3, 199, 90, 0.3); }

.cafe-container { display: flex; gap: 20px; align-items: flex-start; }
.cafe-sidebar { width: 260px; display: flex; flex-direction: column; gap: 14px; }
.cafe-info-card {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 18px; box-shadow: var(--shadow-sm); text-align: center;
}
.cafe-title { font-size: 15px; font-weight: 800; color: #1E293B; margin-bottom: 6px; }
.cafe-stats { font-size: 12px; color: #64748B; margin-bottom: 14px; }
.btn-block { width: 100%; justify-content: center; }

.cafe-menu-list {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 10px 0; box-shadow: var(--shadow-sm);
}
.cafe-menu-header { padding: 6px 18px 8px; font-size: 11px; font-weight: 800; color: #94A3B8; text-transform: uppercase; }
.cafe-menu-item {
    display: block; padding: 9px 18px; font-size: 13px; font-weight: 600; color: #475569;
    transition: var(--transition);
}
.cafe-menu-item:hover { background: #F8FAFC; color: #03C75A; }
.cafe-menu-item.active { background: #F0FDF4; color: #15803D; font-weight: 700; border-left: 3px solid #03C75A; }

.cafe-main { flex: 1; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.cafe-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid #E2E8F0; padding-bottom: 12px; }
.cafe-list-title { font-size: 16px; font-weight: 800; color: #1E293B; }
.cafe-search-box input { padding: 6px 12px; border: 1px solid #CBD5E1; border-radius: var(--radius-sm); font-size: 12.5px; }

.cafe-post-item {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
    border-bottom: 1px solid #F1F5F9; transition: var(--transition);
}
.cafe-post-item:hover { background: #FAFBFD; }
.post-left { display: flex; align-items: center; gap: 10px; }
.post-cat { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #F1F5F9; color: #64748B; }
.post-cat.notice { background: #FEE2E2; color: #B91C1C; }
.post-title { font-size: 13.5px; font-weight: 600; color: #1E293B; }
.post-cmt-count { font-size: 11.5px; font-weight: 700; color: #03C75A; margin-left: 4px; }
.post-right { display: flex; gap: 14px; font-size: 12px; color: #94A3B8; }

/* 성찰일지 / 소감문 레이아웃 */
.reflection-layout { display: flex; gap: 20px; align-items: flex-start; }
.program-folders-col { width: 300px; background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.folder-header h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.program-folder-item {
    padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: var(--radius-md);
    margin-bottom: 8px; cursor: pointer; transition: var(--transition);
}
.program-folder-item:hover { border-color: var(--primary); background: #F8FAFC; }
.program-folder-item.active { border-color: var(--primary); background: var(--primary-bg); }
.pf-title { font-size: 13px; font-weight: 700; color: #1E293B; }
.pf-sub { font-size: 11px; color: #64748B; margin-top: 2px; }

.program-detail-col { flex: 1; background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.program-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 16px; border-bottom: 1px solid #E2E8F0; margin-bottom: 20px;
}
.badge-prog { font-size: 11px; font-weight: 700; background: #DCFCE7; color: #15803D; padding: 2px 8px; border-radius: var(--radius-full); }
.reflection-card {
    background: #FAFBFD; border: 1px solid #E2E8F0; border-radius: var(--radius-md);
    padding: 16px 20px; margin-bottom: 14px;
}
.ref-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ref-author { font-size: 13px; font-weight: 700; color: #1E293B; }
.ref-body { font-size: 13px; color: #334155; line-height: 1.6; margin-bottom: 10px; }
.ref-teacher-comment {
    background: #FFFFFF; border-left: 3px solid #10B981; padding: 8px 12px;
    border-radius: 0 4px 4px 0; font-size: 12px; color: #047857;
}

/* GOOGLE DRIVE STYLE TEACHER DRIVE */
.drive-path-bar {
    display: flex; justify-content: space-between; align-items: center; background: #FFFFFF;
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 20px;
    margin-bottom: 20px;
}
.path-items { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.path-item { color: #475569; cursor: pointer; }
.path-item.active { color: var(--primary); }
.drive-storage-status { font-size: 12px; font-weight: 600; color: #64748B; }
.drive-section-title { font-size: 13px; font-weight: 800; color: #64748B; margin-bottom: 10px; text-transform: uppercase; }

.drive-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.drive-folder-card {
    display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: var(--transition);
}
.drive-folder-card:hover { border-color: var(--primary); background: #F8FAFC; transform: translateY(-2px); }
.df-icon { font-size: 22px; }
.df-name { font-size: 13px; font-weight: 700; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drive-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.drive-file-card {
    background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 16px; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; gap: 10px;
}
.drive-file-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.drive-file-top { display: flex; align-items: center; gap: 10px; }
.file-badge-type { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: #EFF6FF; color: #1E40AF; }
.drive-file-name { font-size: 13.5px; font-weight: 700; color: #0F172A; }
.drive-file-meta { font-size: 11.5px; color: #94A3B8; display: flex; justify-content: space-between; }
.drive-action-hint { font-size: 11px; color: var(--primary); font-weight: 600; text-align: right; }

/* 7대 통계 대시보드 */
.stats-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-box { padding: 20px; border-radius: var(--radius-lg); color: white; display: flex; flex-direction: column; }
.stat-box.grad-1 { background: linear-gradient(135deg, #4F46E5, #6366F1); }
.stat-box.grad-2 { background: linear-gradient(135deg, #059669, #10B981); }
.stat-box.grad-3 { background: linear-gradient(135deg, #0284C7, #38BDF8); }
.stat-box.grad-4 { background: linear-gradient(135deg, #D97706, #F59E0B); }
.stat-sub { font-size: 12px; font-weight: 600; opacity: 0.9; margin-bottom: 6px; }
.stat-val { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.stat-desc { font-size: 11px; opacity: 0.8; }

.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid #F1F5F9; padding-bottom: 10px; }
.chart-header h4 { font-size: 14.5px; font-weight: 800; color: #1E293B; }

.atl-ranking-bars { display: flex; flex-direction: column; gap: 14px; }
.rank-bar-item { display: flex; flex-direction: column; gap: 4px; }
.bar-info { display: flex; justify-content: space-between; font-size: 12px; color: #334155; }
.progress-track { height: 8px; background: #F1F5F9; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

.concept-breakdown h5 { font-size: 12.5px; font-weight: 700; color: #64748B; margin-bottom: 8px; }
.tag-cloud { display: flex; gap: 8px; flex-wrap: wrap; }
.cloud-tag { padding: 4px 10px; border-radius: var(--radius-full); font-weight: 700; }
.cloud-tag.tag-lg { background: #EEF2FF; color: #3730A3; font-size: 13.5px; }
.cloud-tag.tag-md { background: #E0F2FE; color: #0369A1; font-size: 12.5px; }
.cloud-tag.tag-sm { background: #F1F5F9; color: #475569; font-size: 11.5px; }

.context-pill-list { display: flex; flex-direction: column; gap: 8px; }
.ctx-item {
    display: flex; justify-content: space-between; font-size: 12px; padding: 7px 12px;
    background: #F8FAFC; border-radius: var(--radius-sm); border: 1px solid #E2E8F0;
}
.ctx-pct { font-weight: 800; color: var(--primary); }

/* 관리자 메뉴 스타일 */
.admin-tab-nav { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
.admin-tab-btn {
    padding: 10px 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700;
    background: white; border: 1px solid var(--border); color: #475569; transition: var(--transition);
}
.admin-tab-btn:hover { background: #F8FAFC; }
.admin-tab-btn.active { background: #1E293B; color: white; border-color: #1E293B; }
.admin-panel-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }

/* 학부모 안심 포털 스타일 */
.parent-portal-header {
    background: linear-gradient(135deg, #1E1B4B, #312E81); color: white; border-radius: var(--radius-lg);
    padding: 30px; margin-bottom: 24px; box-shadow: var(--shadow-md);
}
.portal-badge {
    display: inline-block; background: rgba(255,255,255,0.2); font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 10px;
}
.portal-desc { font-size: 13.5px; opacity: 0.85; max-width: 800px; margin-top: 6px; }

.parent-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pstat-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); }
.pstat-label { font-size: 12px; font-weight: 700; color: #64748B; margin-bottom: 4px; }
.pstat-val { font-size: 20px; font-weight: 800; color: #0F172A; }
.pstat-sub { font-size: 11.5px; color: #94A3B8; margin-top: 2px; }
.parent-feedback-quote {
    background: #F8FAFC; border-left: 4px solid var(--primary); padding: 14px 18px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 13.5px; color: #334155; line-height: 1.6;
}

/* DATA TABLE */
.content-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header-flex h3, .card-header-flex h4 { font-size: 16px; font-weight: 800; color: #1E293B; }
.text-sub { font-size: 12.5px; color: #64748B; margin-top: 2px; }

.table-responsive { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid #E2E8F0; }
.data-table th { background: #F8FAFC; font-weight: 700; color: #475569; }
.data-table tr:hover { background: #FAFBFD; }
.notice-row-must { background: #FFFBEB !important; }

/* BADGES & BUTTONS */
.badge-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); }
.badge-pill.success { background: #DCFCE7; color: #166534; }
.badge-pill.warning { background: #FEF3C7; color: #92400E; }
.badge-pill.info { background: #DBEAFE; color: #1E40AF; }
.badge-pill.ai-badge { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.badge-must { background: #EF4444; color: white; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.badge-count { font-size: 11px; font-weight: 700; background: #FEE2E2; color: #991B1B; padding: 2px 8px; border-radius: var(--radius-full); }

.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
    border-radius: var(--radius-md); font-size: 13px; font-weight: 700;
    transition: var(--transition); white-space: nowrap;
}
.btn-primary,
.btn.btn-primary,
.btn-xs.btn-primary { 
    background: #2563eb !important; 
    color: #ffffff !important; 
    border: 1px solid #1d4ed8 !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-xs.btn-primary:hover { 
    background: #1d4ed8 !important; 
    color: #ffffff !important;
    border-color: #1e40af !important;
}
.btn-outline,
.btn.btn-outline,
.btn-xs.btn-outline {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-outline:hover,
.btn.btn-outline:hover,
.btn-xs.btn-outline:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
.btn-secondary { background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; }
.btn-secondary:hover { background: #E2E8F0; }
.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }
.btn-danger-outline { border: 1px solid #FCA5A5; color: #DC2626; background: transparent; }
.btn-danger-outline:hover { background: #FEF2F2; }
.btn-ai { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: white; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25); }
.btn-ai:hover { opacity: 0.95; transform: scale(1.02); }
.btn-ai-sm {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full);
    background: #EEF2FF; color: var(--primary); border: 1px solid #C7D2FE;
}
.btn-ai-sm:hover { background: var(--primary); color: white; }
.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: 4px; border: 1px solid #CBD5E1; background: white; color: #334155; font-weight: 600; }
.btn-xs:hover { background: #F1F5F9; }

/* MODALS */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal-window {
    background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-window.modal-lg { max-width: 880px; }
.modal-header {
    display: flex; justify-content: space-between; align-items: center; padding: 18px 24px;
    border-bottom: 1px solid var(--border); background: #FAFBFD;
}
.modal-header h3 { font-size: 17px; font-weight: 800; color: #0F172A; }
.modal-close-btn { font-size: 18px; color: #94A3B8; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background: #F1F5F9; color: #0F172A; }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--border); background: #FAFBFD;
}

/* FORMS */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.required { color: #EF4444; }
.form-input, .form-select, .form-textarea, .drive-textarea {
    width: 100%; padding: 9px 12px; border: 1.5px solid #CBD5E1; border-radius: var(--radius-sm);
    font-size: 13px; color: #0F172A; background: white; outline: none; transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .drive-textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-divider { border: none; border-top: 1px solid #E2E8F0; margin: 18px 0; }
.form-section-head { font-size: 13px; font-weight: 800; color: var(--primary); margin-bottom: 12px; text-transform: uppercase; }

.label-with-ai-btn { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.checkbox-pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 6px 12px; background: #F1F5F9; border-radius: var(--radius-full); cursor: pointer;
}
.standards-selector-box {
    border: 1.5px solid #CBD5E1; border-radius: var(--radius-sm); padding: 10px 14px;
    max-height: 140px; overflow-y: auto; background: #FAFBFD; font-size: 12.5px;
}
.std-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.inquiry-3-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.inq-tag { display: block; font-size: 11px; font-weight: 800; color: #64748B; margin-bottom: 4px; }

/* FILE UPLOAD DROPZONE */
.file-dropzone {
    border: 2px dashed #94A3B8; border-radius: var(--radius-md); padding: 24px;
    text-align: center; cursor: pointer; background: #F8FAFC; transition: var(--transition);
}
.file-dropzone:hover { border-color: var(--primary); background: #EEF2FF; }
.file-icon { font-size: 26px; display: block; margin-bottom: 6px; }

/* DRIVE EDITOR TOOLBAR */
.drive-editor-toolbar {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
    font-size: 12px; color: #64748B;
}
.drive-textarea { font-family: monospace; font-size: 13px; line-height: 1.5; resize: vertical; }

/* PRINT STYLES */
@media print {
    body * { visibility: hidden; }
    #managebacPrintArea, #managebacPrintArea * { visibility: visible; }
    #managebacPrintArea { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; padding: 0; }
    .sidebar, .top-header, .filter-toolbar, .detail-action-buttons, .header-role-switcher { display: none !important; }
}

/* RESPONSIVE & MOBILE OPTIMIZATIONS */
/* 1. 태블릿 & 작은 데스크톱 (최대 1200px) */
@media (max-width: 1200px) {
    .role-switch-label { display: none; }
    .btn-subtext { display: none; }
    .user-sub { display: none; }
    .search-input { width: 120px; }
}

/* 2. 소형 태블릿 (최대 992px) */
@media (max-width: 992px) {
    .top-header { padding: 0 16px; }
    .search-input { width: 100px; }
    .user-name { max-width: 90px; }
    .charts-row { grid-template-columns: 1fr; }
    .inquiry-3-grid { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .cafe-container, .reflection-layout { flex-direction: column; }
    .cafe-sidebar, .program-folders-col { width: 100%; }
}

/* 3. 모바일 화면 (스마트폰 & 패블릿 - 최대 768px) */
@media (max-width: 768px) {
    /* 사이드바 모바일 오프캔버스화 */
    .sidebar {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 280px !important;
        max-width: 82vw !important;
        z-index: 1000 !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.45) !important;
    }
    .sidebar.collapsed { width: 280px; }
    .sidebar.collapsed .nav-text, 
    .sidebar.collapsed .nav-badge, 
    .sidebar.collapsed .nav-ai-badge,
    .sidebar.collapsed .nav-badge-accent,
    .sidebar.collapsed .nav-badge-lock,
    .sidebar.collapsed .nav-section-title, 
    .sidebar.collapsed .sidebar-semester, 
    .sidebar.collapsed .role-badge-box,
    .sidebar.collapsed .school-info-card,
    .sidebar.collapsed .logo-brand,
    .sidebar.collapsed .nav-add-btn { display: block; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 9px 12px; }

    /* 메인 컨텐츠 및 컨테이너 가로 오버플로우 완전 차단 (390px 핏) */
    html, body, #app {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .main-content,
    .sidebar.collapsed ~ .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    .page-container {
        padding: 12px 10px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }

    /* TOP HEADER: 스마트 2행(2-Tier) Flex Layout (모바일 100% 핏 & 직관적 터치) */
    .top-header {
        height: auto; min-height: 52px; padding: 8px 10px;
        flex-wrap: wrap; gap: 6px 0; justify-content: space-between;
        width: 100% !important; max-width: 100% !important; box-sizing: border-box;
    }

    /* [1행 좌측]: 햄버거 메뉴 버튼 + 유연한 말줄임 브레드크럼 */
    .header-left {
        order: 1; flex: 1 1 auto; min-width: 0; gap: 8px;
        max-width: calc(100% - 135px); /* 우측 3개 요소 공간(검색+알림+아바타) 철저 보장 */
        display: flex; align-items: center;
    }
    .mobile-sidebar-btn {
        display: flex !important; width: 32px; height: 32px;
        align-items: center; justify-content: center; border-radius: var(--radius-sm);
        border: 1px solid var(--border); background: #F8FAFC; color: #1E293B;
        flex-shrink: 0;
    }
    .mobile-sidebar-btn:hover { background: #E2E8F0; }
    .breadcrumb {
        font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        flex: 1 1 auto; min-width: 0;
    }
    .breadcrumb-item:first-child, .breadcrumb-separator {
        display: none; /* 모바일에서는 앞의 "교과 학습 /"을 숨기고 현재 메뉴명만 컴팩트하게 노출 */
    }

    /* [1행 우측]: 검색창 + 알림 + 프로필 아바타 (3개 모두 한 줄에 예쁘게 안착) */
    .header-right {
        order: 2; flex: 0 0 auto; justify-content: flex-end; gap: 4px;
        align-items: center; margin-left: auto;
    }
    .search-box {
        padding: 3px 6px; border-radius: var(--radius-full); width: 60px;
        box-sizing: border-box; gap: 4px; transition: width 0.2s ease;
    }
    .search-box:focus-within {
        width: 95px;
    }
    .search-box svg { width: 12px; height: 12px; flex-shrink: 0; }
    .search-input {
        width: 38px; min-width: 0; font-size: 11px; padding: 0;
    }
    .search-input:focus {
        width: 70px;
    }
    .search-input::placeholder {
        font-size: 10px;
    }
    .header-btn {
        width: 30px; height: 30px; font-size: 13px; flex-shrink: 0;
    }
    .user-menu {
        padding: 0; gap: 0; flex-shrink: 0;
    }
    .user-avatar {
        width: 30px; height: 30px; font-size: 14px; flex-shrink: 0;
    }
    .user-text-info {
        display: none !important;
    }

    /* [2행 전폭]: 4대 역할 버튼이 한 화면에 100% 핏(Fit)으로 균등 4분할 */
    .header-role-switcher {
        order: 3; width: 100% !important; margin-top: 5px;
        padding: 3px; background: #F1F5F9;
        border-radius: var(--radius-md); border: 1px solid var(--border);
        box-sizing: border-box;
    }
    .role-switch-label {
        display: none !important;
    }
    .role-btn-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4개 버튼 1:1:1:1 균등 4분할 */
        gap: 3px; width: 100%; box-sizing: border-box;
    }
    .role-toggle-btn {
        min-width: 0; width: 100%; justify-content: center;
        padding: 6px 1px; font-size: 11px; font-weight: 700;
        border-radius: 6px; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        box-sizing: border-box;
    }
    .btn-subtext {
        display: none !important;
    }

    /* 페이지 내부 요소 가로 오버플로우 방지 */
    .unit-plan-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .unit-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    .chip-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 4px;
    }
    .chip-btn {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    /* 페이지 컨테이너 및 내부 요소 모바일 최적화 */
    .page-container {
        padding: 14px 10px;
    }
    .page-top-banner {
        padding: 16px 14px; flex-direction: column; gap: 12px;
    }
    .page-heading { font-size: 18px; }
    .page-desc { font-size: 12.5px; }
    .banner-actions { width: 100%; }
    .banner-actions .btn { width: 100%; justify-content: center; }

    .filter-toolbar {
        flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px;
    }
    .chip-group {
        overflow-x: auto; width: 100%; padding-bottom: 2px;
    }
    .filter-select {
        width: 100%;
    }

    .unit-plan-grid {
        grid-template-columns: 1fr; gap: 14px;
    }

    .clipo-step-stepper {
        padding: 10px 12px; gap: 4px;
    }
    .step-num { width: 26px; height: 26px; font-size: 11px; }
    .step-label { font-size: 10.5px; white-space: nowrap; }
    .step-connector { margin: 0 4px; min-width: 8px; }

    .rubric-score-grid {
        grid-template-columns: 1fr;
    }
    .stats-overview-grid {
        grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .stat-box { padding: 14px; }
    .stat-val { font-size: 18px; }

    .class-tab-nav {
        overflow-x: auto; width: 100%; padding-bottom: 6px;
    }
    .class-tab-btn {
        padding: 7px 12px; font-size: 12px; flex-shrink: 0;
    }

    .modal-window {
        max-width: 95vw; margin: 10px; max-height: 92vh;
    }
    .managebac-paper {
        padding: 16px 12px;
    }
}

/* 4. 초소형 스마트폰 화면 (최대 480px) */
@media (max-width: 480px) {
    .breadcrumb { max-width: 90px; font-size: 11px; }
    .header-left { flex: 1 1 auto; max-width: calc(100% - 125px); }
    .header-right { flex: 0 0 auto; justify-content: flex-end; gap: 3px; }
    .search-box { padding: 2px 5px; width: 52px; }
    .search-box:focus-within { width: 85px; }
    .search-input { width: 30px; font-size: 10.5px; }
    .search-input:focus { width: 60px; }
    .header-btn { width: 28px; height: 28px; font-size: 12px; }
    .user-avatar { width: 28px; height: 28px; font-size: 13px; }
    .role-toggle-btn {
        font-size: 10.5px; padding: 5px 0px; min-width: 0; width: 100%;
    }
    .stats-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* 모바일 사이드바 배경 백드롭 (오버레이) */
.sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px);
    z-index: 990; transition: opacity 0.25s ease;
}
.sidebar-backdrop.active {
    display: block;
}

/* ===== NEW STYLES: 유닛 플래너 탭 네비게이션 ===== */
.planner-tab-nav {
    display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 2px solid var(--border); padding-bottom: 10px;
}
.tab-chip-btn {
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    color: var(--text-secondary); background: #F1F5F9; transition: var(--transition);
}
.tab-chip-btn:hover { background: #E2E8F0; color: var(--text-primary); }
.tab-chip-btn.active {
    background: var(--primary); color: #FFFFFF; box-shadow: var(--shadow-sm);
}

/* ===== NEW STYLES: 교과 평가계획 기준 (A all, Ai..) 인터랙티브 선택기 ===== */
.eval-criteria-interactive-box {
    display: flex; flex-direction: column; gap: 12px; margin-top: 8px;
}
.criterion-card {
    background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 10px;
    padding: 12px 14px; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.criterion-card.has-selected {
    border-color: var(--primary-light); background: #FAF5FF;
}
.criterion-card-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.criterion-badge-title {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #1E293B;
}
.crit-badge-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 800; color: #FFFFFF;
}
.crit-icon-A { background: #3B82F6; }
.crit-icon-B { background: #10B981; }
.crit-icon-C { background: #8B5CF6; }
.crit-icon-D { background: #F59E0B; }

.strand-all-btn {
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
    background: #F1F5F9; color: var(--text-secondary); border: 1px solid #CBD5E1; transition: var(--transition);
}
.strand-all-btn:hover { background: #E2E8F0; }
.strand-all-btn.selected {
    background: #1E293B; color: #FFFFFF; border-color: #0F172A;
}

.strands-chips-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.strand-chip-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: #334155; cursor: pointer;
    transition: all 0.18s ease; text-align: left;
}
.strand-chip-btn:hover {
    border-color: var(--primary); background: #F1F5F9; transform: translateY(-1px);
}
.strand-chip-btn.selected {
    background: #EEF2FF; border-color: var(--primary); color: var(--primary-dark);
    font-weight: 700; box-shadow: 0 1px 3px rgba(79, 70, 229, 0.15);
}
.strand-code {
    font-weight: 800; font-family: var(--font-brand); color: inherit;
}
.strand-desc {
    font-size: 11px; color: var(--text-muted); font-weight: normal;
}
.strand-chip-btn.selected .strand-desc {
    color: var(--primary-dark);
}

/* ===== NEW STYLES: 구글 캘린더 레이아웃 (Google Calendar Style) ===== */
.gcal-container {
    display: grid; grid-template-columns: 260px 1fr; gap: 20px;
    background: #FFFFFF; border: 1px solid var(--border); border-radius: 14px;
    padding: 20px; box-shadow: var(--shadow-sm); min-height: 750px;
}
.gcal-sidebar {
    display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--border-light);
    padding-right: 20px;
}
.gcal-create-fab {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    font-size: 14px; font-weight: 700; color: #1E293B; cursor: pointer;
    transition: all 0.2s ease; width: fit-content;
}
.gcal-create-fab:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); background: #F8FAFC; transform: translateY(-1px);
}
.fab-icon { font-size: 16px; }

/* 미니 달력 */
.gcal-mini-cal {
    background: #F8FAFC; border: 1px solid var(--border-light); border-radius: 10px;
    padding: 12px;
}
.mini-cal-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
    font-size: 13px; font-weight: 700;
}
.btn-mini-nav {
    width: 22px; height: 22px; border-radius: 4px; font-size: 13px; font-weight: bold;
    display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF;
    border: 1px solid #E2E8F0; color: var(--text-secondary);
}
.btn-mini-nav:hover { background: #E2E8F0; }
.mini-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center;
}
.mini-day-cell {
    font-size: 11px; padding: 4px 0; border-radius: 4px; color: var(--text-secondary);
}
.mini-day-cell.header { font-weight: 700; color: var(--text-muted); font-size: 10px; }
.mini-day-cell.today { background: var(--primary); color: #fff; font-weight: bold; }
.mini-day-cell.has-event::after {
    content: '•'; display: block; font-size: 8px; line-height: 0; color: var(--accent-blue);
}

/* 캘린더 카테고리 필터 */
.gcal-cat-box, .gcal-staff-box {
    display: flex; flex-direction: column; gap: 8px;
}
.gcal-box-title {
    font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px;
}
.gcal-cat-item {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; user-select: none;
}
.cat-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.dot-school { background: #3B82F6; }
.dot-ib { background: #10B981; }
.dot-meeting { background: #8B5CF6; }
.dot-event { background: #F59E0B; }

.staff-avatar-list {
    display: flex; flex-direction: column; gap: 6px;
}
.staff-avatar-item {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
    color: #334155; padding: 4px 6px; border-radius: 6px; background: #F8FAFC;
}
.staff-avatar-badge {
    width: 22px; height: 22px; border-radius: 50%; background: #E2E8F0;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}

/* 우측 메인 캘린더 */
.gcal-main {
    display: flex; flex-direction: column; width: 100%;
}
.gcal-toolbar {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border-light);
}
.gcal-tool-left {
    display: flex; align-items: center; gap: 14px;
}
.gcal-nav-group {
    display: flex; align-items: center; gap: 4px;
}
.btn-icon-cal {
    width: 32px; height: 32px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 16px; font-weight: bold;
    color: var(--text-secondary); transition: var(--transition);
}
.btn-icon-cal:hover { background: #F1F5F9; color: var(--text-primary); }
.gcal-current-month {
    font-size: 20px; font-weight: 800; color: #1E293B; margin: 0;
}
.gcal-view-modes {
    display: flex; background: #F1F5F9; padding: 3px; border-radius: 8px; gap: 2px;
}
.view-mode-btn {
    padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
    border-radius: 6px; transition: var(--transition);
}
.view-mode-btn:hover { color: var(--text-primary); }
.view-mode-btn.active {
    background: #FFFFFF; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* 요일 헤더 */
.gcal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size: 12px; font-weight: 700;
    color: var(--text-muted);
}
.weekday-cell.sun { color: #EF4444; }
.weekday-cell.sat { color: #3B82F6; }

/* 월간 그리드 */
.gcal-month-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(115px, 1fr); border-left: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.gcal-day-cell {
    border-right: 1px solid var(--border-light); border-top: 1px solid var(--border-light);
    padding: 6px; display: flex; flex-direction: column; gap: 4px; position: relative;
    background: #FFFFFF; transition: background 0.15s ease; min-height: 110px;
}
.gcal-day-cell:hover { background: #FAFAFA; }
.gcal-day-cell.other-month { background: #F8FAFC; color: #CBD5E1; }
.day-num {
    font-size: 12px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: #475569;
}
.gcal-day-cell.today .day-num {
    background: var(--primary); color: #FFFFFF; font-weight: 800;
}
.gcal-day-cell.sun .day-num { color: #EF4444; }
.gcal-day-cell.sat .day-num { color: #3B82F6; }
.gcal-day-cell.today.sun .day-num, .gcal-day-cell.today.sat .day-num { color: #FFFFFF; }

/* 이벤트 칩 (구글 캘린더 스타일) */
.gcal-event-chip {
    font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    line-height: 1.3; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gcal-event-chip:hover {
    transform: scale(1.02); box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 2;
}
.chip-school { background: #DBEAFE; color: #1E40AF; border-left: 3px solid #3B82F6; }
.chip-ib { background: #D1FAE5; color: #065F46; border-left: 3px solid #10B981; }
.chip-meeting { background: #EDE9FE; color: #5B21B6; border-left: 3px solid #8B5CF6; }
.chip-event { background: #FEF3C7; color: #92400E; border-left: 3px solid #F59E0B; }

/* 토글 스위치 (관리자 교직원 권한 모달) */
.toggle-switch {
    position: relative; display: inline-block; width: 44px; height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1; transition: .3s; border-radius: 24px;
}
.toggle-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: #10B981; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* 모바일 캘린더 대응 */
@media (max-width: 900px) {
    .gcal-container { grid-template-columns: 1fr; }
    .gcal-sidebar { border-right: none; border-bottom: 1px solid var(--border-light); padding-right: 0; padding-bottom: 20px; }
}



/* ===== 2026.10.12 추가 및 개편 컴포넌트 스타일링 ===== */

/* 1. 교과 오버뷰 시트 테이블 */
.overview-custom-table {
    font-family: inherit;
    font-size: 13px;
}
.overview-custom-table th {
    font-weight: 700;
    color: #334155;
    border-bottom: 2px solid #cbd5e1;
}
.overview-custom-table td {
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.overview-custom-table tr:hover td {
    background-color: #f8fafc;
}

/* 2. 대형 네모형 배너 카드 그리드 (학급 모임방 & 성찰일지) */
.class-banner-grid, .reflection-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.class-room-banner-card, .reflection-prog-banner-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.class-room-banner-card:hover, .reflection-prog-banner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
    border-color: #93c5fd;
}

/* 3. ATL 세부 메뉴 아코디언 */
.atl-detail-accordion {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.atl-category-block {
    transition: border-color 0.15s;
}
.atl-category-block:hover {
    border-color: #93c5fd;
}
.atl-cat-header:hover {
    background-color: #f1f5f9 !important;
}

/* 4. 스크롤 선택 박스 및 칩 */
.scroll-selection-box {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.scroll-selection-box::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scroll-selection-box::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}
.cb-chip {
    transition: all 0.15s;
}
.cb-chip:hover {
    background-color: #e2e8f0 !important;
}
.cb-chip input:checked + strong, .cb-chip:has(input:checked) {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8;
}

/* 5. 비밀글 마스킹 카드 */
.reflection-card.secret-masked {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed #94a3b8;
}