/*
========================================================================================
🚨 [CRITICAL WARNING] - DO NOT EDIT WITHOUT READING 'PRE_WORK_CHECKLIST.md' 🚨
모든 수정/보완/지시 수행 전, 반드시 프로젝트 루트의 `PRE_WORK_CHECKLIST.md`를 읽고
5대 절대 원칙을 마음속으로 복창한 뒤에만 작업을 진행하십시오.
이 경고를 무시하면 사용자의 150시간이 다시 사라집니다.
========================================================================================
*/
        /* [Google Sans & Noto Sans KR Only] */
        :root {
            --ys-navy: #013976;
            --ys-gold: #f8e67e;
            --ys-white: #FFFFFF;
            --ys-black: #000000;
            --ys-bg: #F8FAFC;
            --header-h: 96px;
            --footer-h: 40px;
            /* 최하단바 높이 */
            --sidebar-w: 320px;
            /* [Resize] 340px -> 320px */
        }

        /* [핵폭탄급 폰트 강제 적용] 모든 요소 명시 */
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video,
        button,
        input,
        textarea,
        select,
        option {
            font-family: 'Google Sans', 'Noto Sans KR', sans-serif !important;
            word-break: keep-all;
        }

        /* [플레이스홀더 통일] */
        ::placeholder {
            font-size: 14.5px !important;
            color: #94a3b8 !important;
            opacity: 1 !important;
        }

        * {
            box-sizing: border-box;
            border-color: #E2E8F0;
            -webkit-tap-highlight-color: transparent;
        }

        /* 폰트 사이즈 규격화 */
        /* 폰트 사이즈 규격화 [User Request Standard] */
        .fs-32 {
            font-size: 24px !important;
            line-height: 1.2;
            font-weight: 800 !important;
            /* Extra Bold */
            color: inherit;
        }

        .fs-18 {
            font-size: 17px !important;
            line-height: 1.4;
            font-weight: 700 !important;
            /* Bold */
            color: inherit;
        }

        /* [New] 17px Regular for Config Descriptions */
        .fs-17-reg {
            font-size: 17px !important;
            line-height: 1.5;
            font-weight: 400 !important;
            /* Regular */
            color: inherit;
        }

        /* 14px Regular for Auxiliary/Footer */
        .fs-14 {
            font-size: 14px !important;
            line-height: 1.4;
            font-weight: 400 !important;
            /* Regular */
            color: inherit;
        }

        /* Legacy support but re-mapped if needed, or kept for un-specified large text */
        .fs-24 {
            font-size: 18px !important;
            line-height: 1.3;
            font-weight: 700;
            color: inherit;
        }

        .fs-64 {
            font-size: 40px !important;
            line-height: 1.1;
            font-weight: 900;
            color: inherit;
        }

        h2.fs-32 {
            margin-top: 0;
            margin-bottom: 0;
        }

        @keyframes unifiedFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .unified-animate {
            animation: unifiedFloat 3s ease-in-out infinite;
        }

        .unified-animate:hover {
            transform: scale(1.08) !important;
            filter: drop-shadow(0 20px 30px rgba(1, 57, 118, 0.2)) !important;
            cursor: pointer;
        }

        body {
            background-color: var(--ys-bg);
            color: var(--ys-black) !important;
            margin: 0;
            overflow: hidden;
            /* [Global Fix] Body 스크롤 방지 */
            text-align: left;
            display: flex;
            flex-direction: column;
            height: 100vh;
            /* [Global Fix] 뷰포트 고정 */
        }

        /* --- New Layout Structure CSS --- */
        #app-header {
            height: var(--header-h);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 5000;
            background-color: white;
            border-bottom: 2px solid var(--ys-navy);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 17px !important;
            font-weight: 700 !important;
        }

        #main-container {
            display: flex;
            margin-top: var(--header-h);
            /* 헤더 높이만큼 밀기 */
            height: calc(100vh - var(--header-h) - var(--footer-h));
            /* [Global Fix] 정확한 높이 계산 (스크롤 영역 확보) */
            width: 100%;
            overflow: hidden;
            /* [Global Fix] 컨테이너 자체 스크롤 방지 */
            position: relative;
        }

        #app-sidebar {
            width: var(--sidebar-w);
            background-color: var(--ys-navy);
            color: white;
            display: none;
            /* 기본 숨김 */
            flex-direction: column;
            padding: 24px 24px 40px 24px;
            /* Sidebar is now inside flex container, height 100% of parent */
            height: 100%;
            position: relative;
            /* Fixed가 아닌 Flex Item 사용 */
            /* top/bottom 속성 제거 (Flex Item이므로 자동 높이) */
            overflow-y: auto;
            z-index: 4000;
            border-right: 2px solid rgba(255, 255, 255, 0.1);
            font-size: 17px !important;
            font-weight: 700 !important;
            flex-shrink: 0;
            /* [Fix] 절대 줄어들지 않도록 고정 */
        }

        #app-canvas {
            flex-grow: 1;
            background-color: var(--ys-bg);
            padding: 24px 40px 40px;
            overflow-y: auto;
            /* [Global Fix] 여기가 유일한 스크롤 컨테이너 */
            height: 100%;
            /* 부모 높이(calc) 꽉 채움 */
            width: 100%;
            /* 사이드바 없을 때 꽉 차게 */
            margin-left: 0;
            /* 사이드바 없을 때 */
            transition: margin-left 0.3s ease;
            scrollbar-width: none;        /* Firefox */
            -ms-overflow-style: none;     /* IE/Edge */
        }

        #app-canvas::-webkit-scrollbar {
            display: none;                /* Chrome/Safari */
        }

        /* 사이드바가 보일 때 캔버스 밀기 -> Flex 구조이므로 자동 처리됨 */
        body.has-sidebar #app-canvas {
            /* margin-left: var(--sidebar-w); -> 제거 (Flexbox 자동 배치) */
            width: 100%;
            /* Flex item이므로 남은 공간 채움 */
        }

        body.has-sidebar #app-sidebar {
            display: flex;
        }

        #app-footer {
            height: var(--footer-h);
            background-color: #f1f5f9;
            border-top: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px !important;
            /* [Standard] 14px */
            font-weight: 400 !important;
            /* [Standard] Regular */
            color: #64748b;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 5000;
        }

        /* --- UI Components --- */
        .btn-ys {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 28px;
            background-color: var(--ys-navy);
            color: var(--ys-white);
            border-radius: 12px;
            font-weight: 700;
            /* Bold */
            font-size: 17px;
            /* [Standard] 17px */
            cursor: pointer;
            border: none;
            box-shadow: 0 4px 12px rgba(1, 57, 118, 0.2);
            transition: all 0.2s ease-in-out;
        }

        .btn-ys:hover {
            opacity: 1;
            transform: scale(1.02);
            box-shadow: 0 6px 16px rgba(1, 57, 118, 0.3);
            filter: brightness(1.15);
        }

        .btn-ys:active {
            transform: scale(0.95);
            filter: brightness(0.9);
        }

        .card {
            background: var(--ys-white);
            border-radius: 16px;
            padding: 32px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
            border: 2px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            transition: all 0.3s ease-in-out;
        }

        .card:hover {
            transform: scale(1.005);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
        }

        .preview-box {
            width: 100%;
            aspect-ratio: 16/9;
            background-color: #f1f5f9;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--ys-navy);
            color: var(--ys-navy);
            font-weight: 400;
            font-size: 14px;
            /* [Standard] 12px -> 14px */
            text-transform: uppercase;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .preview-box:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-style: solid;
        }

        .ys-field {
            width: 100%;
            padding: 16px 22px;
            height: 62px;
            border-radius: 14px;
            background-color: #f8fafc;
            border: 2px solid #e2e8f0;
            outline: none;
            font-weight: 400 !important;
            color: var(--ys-navy);
            font-size: 16px !important;
            transition: all 0.2s;
        }

        .ys-field:focus {
            background-color: #fff;
            border-color: var(--ys-navy);
            box-shadow: 0 0 0 4px rgba(1, 57, 118, 0.1);
        }

        select.ys-field {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23013976' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 1.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 4rem;
            cursor: pointer;
        }

        /* [Fix] 학생 로그인 학년 선택 - input placeholder와 동일한 크기 */
        #sgr {
            font-size: 14.5px !important;
        }

        .ys-label {
            font-size: 17px !important;
            /* 17px로 조정 */
            font-weight: 700 !important;
            /* Bold */
            color: var(--ys-navy);
            display: block;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        #toast {
            visibility: hidden;
            min-width: 300px;
            margin-left: -150px;
            background: var(--ys-black);
            color: var(--ys-white);
            text-align: center;
            border-radius: 20px;
            padding: 20px;
            position: fixed;
            z-index: 9999;
            left: 50%;
            bottom: 60px;
            /* footer 위로 */
            font-weight: 400;
            font-size: 16px;
        }

        #toast.show {
            visibility: visible;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }

        @keyframes fadein {
            from {
                bottom: 0;
                opacity: 0;
            }

            to {
                bottom: 60px;
                opacity: 1;
            }
        }

        @keyframes fadeout {
            from {
                bottom: 60px;
                opacity: 1;
            }

            to {
                bottom: 0;
                opacity: 0;
            }
        }

        .master-text {
            color: var(--ys-gold) !important;
        }

        .admin-text {
            color: var(--ys-white) !important;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* [Fix] 일반 UI용 Fade In - bottom 이동 제거 (레이아웃 안전) */
        .animate-fade-in {
            animation: fadeinSafe 0.5s ease-out forwards;
        }

        /* [New] 안전한 일반 UI용 Fade In (위치 이동 없음) */
        @keyframes fadeinSafe {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-fade-in-safe {
            animation: fadeinSafe 0.5s ease-out forwards;
        }

        .animate-fade-in-up {
            animation: fadeinSafe 0.5s ease-out forwards;
            /* 임시로 Safe로 매핑 */
        }

        img {
            image-rendering: -webkit-optimize-contrast;
            transform: translateZ(0);
            max-width: 100%;
        }

        /* 캔버스 센터 정렬용 (로그인 박스 등) */
        .canvas-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100%;
        }

        /* [PREMIUM] 통합 박스 스타일 (01~04용) */
        .canvas-premium-box {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 3.5rem 3.5rem;
            border-radius: 4rem;
            border: 2px solid rgba(1, 57, 118, 0.1);
            width: fit-content;
            min-width: 25rem;
            max-width: 90%;
            /* Adjusted for better hugging */
            box-shadow:
                0 20px 50px rgba(1, 57, 118, 0.08),
                0 4px 12px rgba(1, 57, 118, 0.04);
            text-align: center;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .canvas-premium-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #60a5fa, #6366f1, #a855f7);
        }

        .canvas-premium-box:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow:
                0 30px 70px rgba(1, 57, 118, 0.12),
                0 8px 20px rgba(1, 57, 118, 0.06);
            border-color: rgba(1, 57, 118, 0.2);
        }

        /* [PREMIUM] Canvas Title Spacing Fix */
        .canvas-title {
            margin-bottom: 2rem !important;
            /* Synced with space-y-8 */
            display: block;
        }

        /* [PREMIUM] Flatpickr Masterpiece Edition - NO MORE ERRORS */
        .flatpickr-calendar {
            background: #ffffff !important;
            border-radius: 1.5rem !important;
            border: 2px solid #013976 !important;
            box-shadow: 0 40px 80px -15px rgba(1, 57, 118, 0.3) !important;
            width: 320px !important;
            padding: 0 !important;
            overflow: hidden !important;
            font-family: 'Google Sans', 'Noto Sans KR', sans-serif !important;
            box-sizing: border-box !important;
        }

        .flatpickr-calendar *,
        .flatpickr-calendar *:before,
        .flatpickr-calendar *:after {
            box-sizing: border-box !important;
        }

        /* 1. Header Centering & Arrows */
        .flatpickr-months {
            background: #f8fafc !important;
            border-bottom: 2px solid #013976;
            height: 65px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
            padding: 0 !important;
        }

        .flatpickr-month {
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 1 !important;
        }

        .flatpickr-current-month {
            padding: 0 !important;
            position: static !important;
            width: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            font-size: 17px !important;
            /* 레이블과 동기화 */
            font-weight: 700 !important;
            color: #013976 !important;
        }

        /* 드롭다운 최종 스타일 - Label(18px, Bold) 동기화 */
        .flatpickr-monthDropdown-months,
        select.flatpickr-monthDropdown-months {
            font-size: 16px !important;
            font-weight: 400 !important;
            color: #013976 !important;
            background: white !important;
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 10px !important;
            padding: 5px 28px 5px 12px !important;
            appearance: none !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23013976' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 8px center !important;
            background-size: 15px !important;
            cursor: pointer !important;
            line-height: 1 !important;
            outline: none !important;
        }

        /* 화살표 - 절대 위치로 밸런스 파괴 방지 */
        .flatpickr-prev-month,
        .flatpickr-next-month {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 44px !important;
            height: 44px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            z-index: 10 !important;
        }

        .flatpickr-prev-month {
            left: 8px !important;
        }

        .flatpickr-next-month {
            right: 8px !important;
        }

        .flatpickr-prev-month svg,
        .flatpickr-next-month svg {
            width: 14px !important;
            height: 14px !important;
            fill: #013976 !important;
        }

        /* 2. Weekdays - Full Width No Cut-off */
        .flatpickr-weekdays {
            background: #013976 !important;
            height: 40px !important;
            width: 100% !important;
            padding: 0 10px !important;
            /* 내부 여백으로 정중앙 배치 */
            display: flex !important;
            align-items: center !important;
        }

        .flatpickr-weekdaycontainer {
            display: flex !important;
            width: 100% !important;
        }

        .flatpickr-weekday {
            background: transparent !important;
            color: #ffffff !important;
            font-weight: 400 !important;
            /* Regular */
            font-size: 16px !important;
            /* 16px */
            flex: 1 !important;
            text-align: center !important;
            line-height: 40px !important;
        }

        /* 3. Days Container - Solid 6 Lines */
        .flatpickr-innerContainer {
            width: 100% !important;
            padding: 0 !important;
        }

        .flatpickr-rContainer {
            width: 100% !important;
            padding: 0 !important;
        }

        .flatpickr-days {
            width: 100% !important;
            padding: 10px !important;
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            min-height: 240px !important;
        }

        .flatpickr-day {
            width: 40px !important;
            height: 40px !important;
            line-height: 40px !important;
            font-size: 16px !important;
            /* 16px */
            font-weight: 400 !important;
            /* Regular */
            margin: 1px !important;
            border-radius: 12px !important;
            color: #334155 !important;
            border: 2px solid transparent !important;
        }

        /* 비해당 월 흐리게 */
        .flatpickr-day.prevMonthDay,
        .flatpickr-day.nextMonthDay {
            color: #cbd5e1 !important;
        }

        /* [!] 오늘(Today) - Premium Contrast (No Bold) */
        .flatpickr-day.today {
            border-color: #013976 !important;
            /* 선명한 네이비 테두리 */
            background: #f1f5f9 !important;
            /* 연한 회청색 배경 */
            color: #013976 !important;
            font-weight: 400 !important;
        }

        /* [!] 선택됨(Selected) (No Bold) */
        .flatpickr-day.selected,
        .flatpickr-day.selected:hover {
            background: #013976 !important;
            border-color: #013976 !important;
            color: #ffffff !important;
            font-weight: 400 !important;
        }

        .flatpickr-day:hover {
            background: #f1f5f9 !important;
            border-color: transparent !important;
        }

        /* 연도 선택 영역 - 입력창은 숨기고 수동 select만 노출 */
        .numInputWrapper {
            display: flex !important;
            align-items: center !important;
            width: auto !important;
        }

        .numInputWrapper input.cur-year {
            display: none !important;
        }

        .numInputWrapper span {
            display: none !important;
        }

        /* 월/년 드롭다운 사이 간격 */
        .flatpickr-monthDropdown-months+.numInputWrapper {
            margin-left: 4px !important;
        }

        /* [New] ContentEditable Placeholder */
        [contenteditable]:empty::before {
            content: attr(data-placeholder);
            color: #94a3b8;
            pointer-events: none;
            display: block;
            /* For correct positioning */
        }

        /* [Custom Scrollbar - Slim] */
        .custom-scrollbar::-webkit-scrollbar {
            width: 10px;
            /* User requested thicker */
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 6px;
            border: 2px solid transparent;
            background-clip: content-box;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }

        /* [New] Scroll Indicators (Arrows) */
        .scroll-arrow {
            position: absolute;
            right: 12px;
            z-index: 20;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0;
            pointer-events: none;
            /* Hidden by default */
            font-size: 18px;
            color: #013976;
            /* var(--ys-navy) */
        }

        .scroll-arrow.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .scroll-arrow:hover {
            background-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        .scroll-arrow.up {
            top: 12px;
        }

        .scroll-arrow.down {
            bottom: 12px;
        }

        /* Hide scrollbar but allow scrolling */
        .no-scrollbar {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari and Opera */
        }

        .scroll-container {
            position: relative;
            /* For absolute arrow positioning */
        }

/* ========================================
   인쇄 레포트 스타일 (@media print)
   레포트(#report-display)용 전용
======================================== */
@media print {
    /* 헤더/사이드바/푸터/버튼 숨김 */
    #app-header, #app-sidebar, #app-footer,
    #loading-overlay, #toast,
    .no-print { display: none !important; }

    /* 레이아웃 초기화 */
    body { background: white !important; }
    #main-container {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #app-canvas {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    #dynamic-content {
        padding: 0 !important;
    }

    /* 레포트 전용 인쇄 */
    #report-display {
        display: block !important;
        width: 100% !important;
        page-break-inside: auto;
    }

    /* 차트 인쇄 대응 */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Card 인쇄 스타일 */
    .card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* 인쇄 배너 - 페이지 하단 고정 */
    .print-banner-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
}