:root {
            --bg-main: #f8fafc; --bg-card: #ffffff; --border: #e2e8f0;
            --text-strong: #0f172a; --text: #334155; --text-muted: #64748b;
            --accent: #5278bd; --accent-soft: #f2f5fb;
            --danger: #cf6f6f; --success: #5fa080; --warning: #d6ad62;
            --reader-font-size: 1.16rem;
            --reader-line-height: 2.0;
        }
        body { margin: 0; font-family: 'Pretendard', sans-serif; background: var(--bg-main); color: var(--text); line-height: 1.6; }
        .container { max-width: 760px; margin: 24px auto 60px; padding: 0 18px; }
        body.tg-training .container { max-width: 980px; }

        .glass-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 30px; box-shadow: 0 4px 20px rgba(15,23,42,0.04); }

        .logo-wrap { text-align: center; margin-bottom: 28px; }
        .logo-icon { width: 62px; height: 62px; line-height: 62px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); font-size: 1.9rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 1px solid rgba(82,120,189,0.2); }
        .logo-title { font-family: 'Orbitron', 'Pretendard', sans-serif; font-size: 1.85rem; font-weight: 900; color: var(--text-strong); margin: 0; }

        .src-tabs { display: flex; gap: 6px; background: #f1f5f9; padding: 5px; border-radius: 12px; margin-bottom: 18px; }
        .src-tab { flex: 1; padding: 10px 14px; border: none; background: transparent; cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .src-tab.active { background: #fff; color: var(--accent); box-shadow: 0 2px 6px rgba(15,23,42,0.06); font-weight: 800; }

        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-size: 0.82rem; font-weight: 800; color: var(--text-strong); margin-bottom: 8px; }
        input, select, textarea { width: 100%; padding: 13px 15px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; color: var(--text-strong); font-size: 0.96rem; font-family: inherit; box-sizing: border-box; outline: none; }
        input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(82,120,189,0.15); }
        textarea { min-height: 160px; line-height: 1.6; }

        .ebs-filter { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
        .ebs-filter select { flex: 1; min-width: 110px; padding: 10px !important; }
        .btn-mini { padding: 10px 14px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); border-radius: 10px; font-size: 0.84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

        .ebs-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: #fafbfc; }
        .ebs-item { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: 0.15s; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
        .ebs-item:hover { background: var(--accent-soft); }
        .ebs-item.selected { background: var(--accent-soft); border-left: 4px solid var(--accent); padding-left: 10px; }
        .ebs-item .sub-tag { padding: 2px 8px; background: #fff; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; font-size: 0.72rem; font-weight: 800; }
        .ebs-item.selected .sub-tag { background: var(--accent); color: white; }

        .btn-start { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--accent), #3f5e9e); color: white; border: none; border-radius: 14px; font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px rgba(82,120,189,0.3); margin-top: 24px; }

        /* 훈련 진행 화면 */
        .training-hud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
        .timer-box { font-family: 'Orbitron', monospace; font-size: 1.6rem; font-weight: 900; color: var(--accent); display: flex; align-items: center; gap: 6px; }
        .progress-deck { flex: 1; min-width: 140px; height: 10px; background: rgba(0,0,0,0.06); border-radius: 5px; overflow: hidden; }
        .progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #8fbfd9); border-radius: 5px; transition: width 0.3s; }

        .reader-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 38px 42px;
            min-height: 420px;
            font-size: var(--reader-font-size);
            line-height: var(--reader-line-height);
            color: var(--text-strong);
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            position: relative;
            text-align: justify;
            text-justify: inter-word;
            word-break: keep-all;
        }
        @media (max-width: 600px) {
            .reader-card { padding: 24px 20px; min-height: 320px; text-align: justify; text-justify: inter-word; }
        }

        /* [고도화 V5.1] 지문 양쪽 맞춤 및 밑줄 완전 제거 스타일 */
        #text-display {
            text-align: justify !important;
            text-justify: inter-word !important;
            word-break: keep-all;
            letter-spacing: -0.012em;
        }
        #text-display p, #text-display div {
            text-align: justify !important;
            text-justify: inter-word !important;
            word-break: keep-all;
            margin: 0 0 1.3em 0;
        }
        #text-display u, #text-display ins, .reader-card u, .reader-card ins {
            text-decoration: none !important;
            border-bottom: none !important;
            font-style: normal;
        }

        /* 최소 시간 가드 알림 */
        .pacing-warning { display: none; background: #fbe4e4; border: 1px solid #fca5a5; color: #b55c5c; padding: 12px 16px; border-radius: 12px; font-size: 0.88rem; font-weight: 700; margin-top: 14px; align-items: center; gap: 8px; }

        /* 검문소 (Checkpoint) UI */
        .checkpoint-deck { display: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 34px 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .checkpoint-deck h3 { margin: 0 0 10px; font-size: 1.35rem; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 8px; }
        
        .keyword-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; justify-content: center; }
        .kw-chip { background: #f1f5f9; border: 1px solid var(--border); color: var(--text); padding: 3px 9px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
        .kw-chip.matched { background: #e6f3ec; border-color: #86efac; color: #3d7a5a; }

        .quiz-box { background: #f8fafc; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 18px 0; text-align: left; }
        .quiz-title { font-weight: 800; font-size: 0.98rem; color: var(--text-strong); margin-bottom: 12px; }
        .quiz-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: white; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
        .quiz-option:hover { background: var(--accent-soft); border-color: var(--accent); }
        .quiz-option.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 800; }

        .btn-finish-reading { width: 100%; padding: 18px; background: var(--accent); color: white; border: none; border-radius: 14px; font-size: 1.05rem; font-weight: 800; cursor: pointer; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .btn-next-step { width: 100%; padding: 16px; background: var(--success); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }

        /* [고도화 V4] 러닝머신 페이서 & AI 코치 피드백 스타일 */
        .pacer-beam { position: absolute; left: 0; width: 100%; height: 38px; background: linear-gradient(180deg, rgba(82,120,189,0.18), rgba(143,191,217,0.06)); border-top: 2px solid var(--accent); pointer-events: none; transition: top 0.25s ease-out; border-radius: 4px; box-shadow: 0 0 16px rgba(82,120,189,0.2); }
        .pacer-toggle-btn { background: #f1f5f9; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: var(--text); padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
        .pacer-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
        
        .ai-feedback-box { margin-top: 12px; padding: 14px 18px; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 12px; text-align: left; display: none; }
        .ai-feedback-box.show { display: block; animation: fadeIn 0.3s ease; }
        .ai-feedback-box.alert-bad { background: #fff1f2; border-color: #fecdd3; }
        .ai-coach-tag { font-size: 0.76rem; font-weight: 900; color: #3d7a5a; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
        /* [고도화 V5.0] 뷰어 집중 툴바 & 테마 시스템 */
        .reader-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px 14px;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        }
        .toolbar-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .toolbar-lbl {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            margin-right: 2px;
        }
        .toolbar-btn {
            background: #f1f5f9;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px 9px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-strong);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .toolbar-btn:hover {
            background: #e2e8f0;
        }
        .theme-chip {
            background: #f8fafc;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .theme-chip.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        /* 테마별 스타일 오버라이드 */
        body.tg-theme-sepia {
            background: #f4ecd8 fixed !important;
        }
        body.tg-theme-sepia .reader-card {
            background: #fbf0d9 !important;
            color: #3b2e1e !important;
            border-color: #e5d5b7 !important;
            box-shadow: 0 4px 20px rgba(78, 59, 32, 0.08) !important;
        }
        body.tg-theme-sepia .reader-toolbar {
            background: #f7eee0 !important;
            border-color: #e5d5b7 !important;
        }
        body.tg-theme-sepia #theme-btn-sepia {
            background: #a8783a !important;
            color: #fff !important;
            border-color: #a8783a !important;
        }

        body.tg-theme-dark {
            background: #090d16 fixed !important;
            color: #e2e8f0 !important;
        }
        body.tg-theme-dark .reader-card {
            background: #131d2e !important;
            color: #f1f5f9 !important;
            border-color: #1e2e46 !important;
            box-shadow: 0 4px 25px rgba(0,0,0,0.5) !important;
        }
        body.tg-theme-dark .reader-toolbar {
            background: #111827 !important;
            border-color: #1f2937 !important;
        }
        body.tg-theme-dark .toolbar-btn {
            background: #1f2937 !important;
            color: #e2e8f0 !important;
            border-color: #374151 !important;
        }
        body.tg-theme-dark .toolbar-lbl {
            color: #9ca3af !important;
        }
        body.tg-theme-dark .theme-chip {
            background: #1f2937 !important;
            color: #9ca3af !important;
            border-color: #374151 !important;
        }
        body.tg-theme-dark #theme-btn-dark {
            background: #8da0cc !important;
            color: #fff !important;
            border-color: #8da0cc !important;
        }

        /* [고도화 V6.0] 순수 텍스트 뷰어 방어막 및 퀴즈 옵션 배지 스타일 */
        #text-display, .reader-card, .card {
            text-decoration: none !important;
        }
        #text-display u, #text-display ins, .reader-card u, .reader-card ins, .card u, .card ins {
            text-decoration: none !important;
            font-style: normal !important;
            font-weight: inherit !important;
        }
        .quiz-option {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 12px 16px !important;
            border-radius: 10px !important;
            transition: all 0.2s ease !important;
        }
        .quiz-opt-num {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 24px !important;
            height: 24px !important;
            border-radius: 50% !important;
            background: #e2e8f0 !important;
            color: #475569 !important;
            font-size: 0.8rem !important;
            font-weight: 800 !important;
            font-family: 'Orbitron', 'Pretendard', sans-serif !important;
            flex-shrink: 0 !important;
            transition: 0.2s !important;
        }
        .quiz-option.selected .quiz-opt-num {
            background: var(--accent) !important;
            color: #fff !important;
            box-shadow: 0 2px 6px rgba(143,171,217,0.4) !important;
        }
        .quiz-opt-text {
            flex: 1 !important;
            font-size: 0.93rem !important;
            line-height: 1.55 !important;
            word-break: keep-all !important;
        }

        /* @media print 인쇄 최적화 */
        @media print {
            body { background: #fff !important; color: #000 !important; padding: 0 !important; }
            .no-print, .btn-action, .btn-start, .btn-mini, .src-tabs, .training-hud, .reader-toolbar, form, .report-action-bar, .sub-nav, .portal-nav, nav, header {
                display: none !important;
            }
            .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
            .inbody-card { box-shadow: none !important; border: 1px solid #cbd5e1 !important; padding: 20px !important; }
            .kpi-box { border: 1px solid #e2e8f0 !important; box-shadow: none !important; }
        }