@charset "UTF-8";
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --primary: #2E5490;
            --primary-light: #4A6FA5;
            --primary-dark: #1E3F75;
            --secondary: #E07B39;
            --secondary-light: #F5A962;
            --background: #F5F7FA;
            --card-bg: #FFFFFF;
            --text-dark: #2C3E50;
            --text-light: #5D6D7E;
            --success: #27AE60;
            --error: #E74C3C;
            --shadow: 0 8px 32px rgba(0,0,0,0.1);
            --radius: 20px;
            --font-scale: 1;
        }
        
        /* 글자 크기 조절 */
        body.font-large { --font-scale: 1.2; }
        body.font-xlarge { --font-scale: 1.4; }
        
        /* 고대비 모드 */
        body.high-contrast {
            --primary: #FFD700;
            --primary-light: #FFEB3B;
            --primary-dark: #FFC107;
            --secondary: #00BFFF;
            --secondary-light: #87CEEB;
            --background: #000000;
            --card-bg: #1a1a1a;
            --text-dark: #FFFFFF;
            --text-light: #FFD700;
            --success: #00FF00;
            --error: #FF4444;
            background: #000000 !important;
        }
        
        body.high-contrast header {
            background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%) !important;
            border: 2px solid #FFD700;
        }
        
        body.high-contrast .welcome-card,
        body.high-contrast .menu-card,
        body.high-contrast .game-screen,
        body.high-contrast .score-item,
        body.high-contrast .stat-item,
        body.high-contrast .summary-card,
        body.high-contrast .badge-modal-content,
        body.high-contrast .graph-container {
            background: #1a1a1a !important;
            border: 2px solid #FFD700 !important;
            color: #FFFFFF !important;
        }
        
        body.high-contrast .menu-card h3,
        body.high-contrast .menu-card p,
        body.high-contrast h2, body.high-contrast h3,
        body.high-contrast label,
        body.high-contrast .form-group label {
            color: #FFD700 !important;
        }
        
        body.high-contrast .btn-primary {
            background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%) !important;
            color: #000000 !important;
        }
        
        body.high-contrast .btn-secondary {
            background: linear-gradient(135deg, #00BFFF 0%, #87CEEB 100%) !important;
            color: #000000 !important;
        }
        
        body.high-contrast input,
        body.high-contrast select {
            background: #333333 !important;
            color: #FFFFFF !important;
            border-color: #FFD700 !important;
        }
        
        body.high-contrast .today-stats {
            background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%) !important;
            border: 2px solid #FFD700 !important;
        }
        
        body.high-contrast .game-display,
        body.high-contrast .user-input-display {
            background: #333333 !important;
            color: #FFD700 !important;
            border-color: #FFD700 !important;
        }
        
        body.high-contrast .num-btn,
        body.high-contrast .calc-option,
        body.high-contrast .color-btn,
        body.high-contrast .letter-btn,
        body.high-contrast .count-btn {
            border: 3px solid #FFD700 !important;
        }
        
        body.high-contrast .num-btn.clear-btn,
        body.high-contrast .clear-action-btn {
            background: linear-gradient(135deg, #FF5722 0%, #E64A19 100%) !important;
            border: 3px solid #FFEB3B !important;
            color: #FFEB3B !important;
        }
        
        body.high-contrast .num-btn.submit-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
            border: 3px solid #FFEB3B !important;
        }
        
        body.high-contrast .tts-auto-toggle {
            background: #333333 !important;
            border: 1px solid #FFD700;
        }
        
        body.high-contrast .result-message.success {
            background: #003300 !important;
            border-color: #00FF00 !important;
            color: #00FF00 !important;
        }
        
        body.high-contrast .result-message.error {
            background: #330000 !important;
            border-color: #FF4444 !important;
            color: #FF4444 !important;
        }
        
        body.high-contrast .difficulty-modal-content {
            background: #1a1a1a !important;
            border: 2px solid #FFD700;
        }
        
        body.high-contrast .difficulty-modal h3,
        body.high-contrast .difficulty-modal p {
            color: #FFFFFF !important;
        }
        
        body.high-contrast .difficulty-option {
            border: 2px solid #555 !important;
        }
        
        body.high-contrast .difficulty-option.selected {
            border-color: #FFD700 !important;
        }
        
        body.high-contrast .difficulty-option .diff-desc {
            color: #CCCCCC !important;
        }
        
        body.high-contrast .difficulty-select {
            background-color: #1a1a1a !important;
            color: #FFFFFF !important;
            border-color: #FFD700 !important;
        }
        
        body.high-contrast .difficulty-select option {
            background-color: #1a1a1a;
            color: #FFFFFF;
        }
        
        
        body.high-contrast .game-diff-label {
            color: #FFFFFF !important;
        }
        
        body.high-contrast .game-diff-btn {
            border: 2px solid #555 !important;
        }
        
        body.high-contrast .game-diff-btn.active {
            border-color: #FFD700 !important;
        }
        
        body.high-contrast .category-title {
            background: #333333 !important;
            border-color: #FFD700 !important;
            color: #FFD700 !important;
        }
        
        body.high-contrast .category-item,
        body.high-contrast .story-card {
            background: #333333 !important;
            border-color: #555 !important;
            color: #FFFFFF !important;
        }
        
        body.high-contrast .category-item.selected,
        body.high-contrast .story-card.selected {
            border-color: #FFD700 !important;
            background: #444444 !important;
        }
        
        body.high-contrast .category-item.correct,
        body.high-contrast .story-card.correct {
            border-color: #00FF00 !important;
            background: #003300 !important;
        }
        
        body.high-contrast .category-item.wrong,
        body.high-contrast .story-card.wrong {
            border-color: #FF4444 !important;
            background: #330000 !important;
        }
        
        /* 헤더 우측 영역 */
        .header-right {
            grid-column: 3;
            justify-self: end;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            gap: 5px;
            flex-shrink: 0;
        }
        
        /* 헤더 점수 표시 */
        .header-score {
            display: flex;
            gap: 10px;
        }
        
        .header-score-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 10px;
            min-width: 55px;
        }
        
        .header-score-item .score-label {
            font-size: calc(0.6rem * var(--font-scale));
            opacity: 0.9;
        }
        
        .header-score-item .score-value {
            font-size: calc(0.9rem * var(--font-scale));
            font-weight: 700;
        }
        
        /* 접근성 컨트롤 버튼 */
        .accessibility-controls {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }
        
        .access-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            font-size: calc(0.7rem * var(--font-scale));
            font-weight: 600;
            border: 1px solid rgba(255,255,255,0.5);
            border-radius: 12px;
            background: rgba(255,255,255,0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }
        
        .access-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }
        
        .access-btn.active {
            background: #FFD700;
            color: #000;
            border-color: #FFD700;
        }
        
        .access-btn .btn-icon {
            font-size: 0.85rem;
        }
        
        body.high-contrast .access-btn {
            background: #333333;
            border-color: #FFD700;
            color: #FFD700;
        }
        
        body.high-contrast .access-btn.active {
            background: #FFD700;
            color: #000;
        }
        
        body {
            font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Nanum Gothic', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol';
            background: linear-gradient(135deg, #E8F5E9 0%, #FFF8E1 50%, #FFECB3 100%);
            min-height: 100vh;
            color: var(--text-dark);
            line-height: 1.6;
            font-size: calc(16px * var(--font-scale));
        }
        
        /* 이모지 전용 스타일 */
        .icon, .emoji {
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
        }
        
        .container { max-width: 1350px; margin: 0 auto; padding: 0 20px 20px; }
        
        header {
            /* 하부 .container(1350px, padding 20px)와 헤더 가로폭을 동일하게 맞춤 */
            width: 100%;
            max-width: 1350px;
            margin: 0 auto 25px;
            box-sizing: border-box;
            min-height: 120px;
            height: auto;
            padding: 15px 20px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border-radius: 0 0 40px 40px;
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            align-items: center;
            gap: 12px 16px;
        }


        .header-left {
            grid-column: 1;
            justify-self: start;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex-shrink: 0;
            min-width: 0;
        }

        .header-center {
            grid-column: 2;
            justify-self: center;
            max-width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-center-img {
            height: 120px;
            width: auto;
            border-radius: 0;
            border: none;
            box-shadow: none;
            object-fit: contain;
            background: transparent;
            filter: drop-shadow(0 3px 10px rgba(0,0,0,0.45));
            pointer-events: none;
        }

        /* 로그인 후 헤더 우측 gss 이미지 */
        .header-game-img {
            height: 80px;
            width: auto;
            object-fit: contain;
            background: transparent;
            filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) saturate(1.8) contrast(1.2);
        }

        /* 헤더 타이틀/로고 클릭으로 메인 이동 */
        .header-home-link {
            cursor: pointer;
            user-select: none;
        }
        .header-home-link:hover {
            filter: brightness(1.05);
        }
        .header-home-link:active {
            transform: translateY(1px);
        }
        
        header h1 { font-size: calc(1.6rem * var(--font-scale)); font-weight: 900; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
        header p { font-size: calc(0.85rem * var(--font-scale)); opacity: 0.95; margin: 0; }
        .header-logo { 
            width: 50px; 
            height: 50px; 
            border-radius: 50%; 
            object-fit: cover;
            vertical-align: middle;
        }
        
        /* 헤더 중앙 사용자 배지 */
        .header-user-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.15);
            padding: 8px 15px;
            border-radius: 25px;
            font-size: calc(0.85rem * var(--font-scale));
        }
        
        .header-user-badge strong {
            font-weight: 700;
        }
        
        .header-badge-btn {
            padding: 4px 10px;
            border: 1px solid rgba(255,255,255,0.5);
            border-radius: 12px;
            background: rgba(255,255,255,0.2);
            color: white;
            font-size: calc(0.7rem * var(--font-scale));
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
        }
        
        .header-badge-btn:hover {
            background: rgba(255,255,255,0.35);
            transform: scale(1.05);
        }
        
        .header-badge-btn.home {
            background: rgba(255,255,255,0.28);
            border-color: rgba(255,255,255,0.65);
            font-weight: 900;
        }
        
        .header-badge-btn.home:hover {
            background: rgba(255,255,255,0.40);
        }

        .header-report-btn {
            font-weight: 900;
            padding: 5px 12px;
            border-width: 2px;
            background: rgba(255, 255, 255, 0.38);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }
        .header-report-btn:hover {
            background: rgba(255, 255, 255, 0.52);
        }
        body.high-contrast .header-report-btn {
            border-color: #FFD700 !important;
            color: #000 !important;
            background: #FFD700 !important;
        }

        @media (max-width: 720px) {
            header {
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }
            .header-left {
                grid-column: 1;
                justify-self: center;
                align-items: center;
            }
            .header-center {
                grid-column: 1;
                justify-self: center;
            }
            .header-right {
                grid-column: 1;
                justify-self: center;
                align-items: center;
            }
            .header-user-badge {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
        
        /* 환영/로그인 화면 */
        .welcome-screen {
            display: block;
            width: 1300px;
            height: 1300px;
            margin: 0 auto;
            box-sizing: border-box;
            background-image: url('../assets/pg.jpg');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 20px;
        }
        
        .welcome-screen2 {
            display: block;
            width: 1300px;
            height: 920px;
            margin: 0 auto;
            box-sizing: border-box;
            background-image: url('../assets/PPP.jpg');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 20px;
        }

        /* 헤더 로그인/회원가입 버튼 */
        .header-auth-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 110px;
            height: 44px;
            border-radius: 10px;
            border: 2.5px solid #fff;
            background: rgba(255,255,255,0.15);
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            font-family: inherit;
            letter-spacing: 0.03em;
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
            text-decoration: none;
        }

        .header-auth-btn:hover {
            background: rgba(255,255,255,0.28);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.22);
        }

        .header-auth-btn.primary {
            background: #fff;
            color: #1565C0;
            border-color: #fff;
        }

        .header-auth-btn.primary:hover {
            background: #e3f0ff;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.22);
        }

        .header-principle-link {
            font-weight: 900;
        }

        /* 로그인 후 헤더 우측 유틸 버튼 (화면크기/고대비) */
        .header-util-btns {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .header-util-btn {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            width: 72px;
            height: 52px;
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: 1.5px solid rgba(255,255,255,0.5);
            border-radius: 12px;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.18s, transform 0.15s;
        }

        .header-util-btn:hover {
            background: rgba(255,255,255,0.28);
            transform: translateY(-2px);
        }

        .header-util-btn.active {
            background: #fff;
            color: var(--primary);
        }

        .training-principle-page {
            max-width: 1240px;
            margin: 0 auto 72px;
            padding: 18px 22px 72px;
            color: #0f1f35;
        }

        .training-principle-page.hidden {
            display: none;
        }

        .principle-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, #dbeafe, #ccfbf1);
            color: #0f4f8f;
            border: 1px solid rgba(37, 99, 235, 0.16);
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.1);
            font-weight: 950;
            margin-bottom: 18px;
        }

        .principle-card-head {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .principle-card-head .principle-eyebrow {
            margin-bottom: 0;
        }

        .principle-source-badge {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 0 18px;
            border-radius: 999px;
            background: linear-gradient(135deg, #fff7ed, #fef3c7);
            border: 2px solid rgba(224, 123, 57, 0.36);
            color: #9a3412;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 950;
            box-shadow: 0 12px 26px rgba(224, 123, 57, 0.16);
            white-space: nowrap;
        }

        .principle-hero {
            display: grid;
            grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.35fr) 280px;
            gap: 24px;
            align-items: stretch;
            padding: 34px;
            border-radius: 36px;
            background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(236,253,245,0.94));
            border: 1px solid rgba(37,99,235,0.16);
            box-shadow: 0 24px 54px rgba(30, 64, 175, 0.14);
        }

        .principle-photo-wrap {
            overflow: hidden;
            border-radius: 30px;
            min-height: 100%;
            background: #fff;
            border: 4px solid rgba(255, 255, 255, 0.94);
            box-shadow: 0 22px 44px rgba(30,64,175,0.18);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .principle-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            padding: 0;
        }

        .principle-hero-copy {
            display: grid;
            align-content: center;
            padding: 18px 8px;
        }

        .principle-hero h1 {
            margin: 0;
            font-size: clamp(2rem, 3vw, 3.15rem);
            line-height: 1.18;
            letter-spacing: 0;
            color: #0f1f35;
        }

        .principle-hero h1 strong {
            background: linear-gradient(135deg, #1d4ed8, #059669);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .principle-hero p,
        .principle-content-card p,
        .principle-article-card p,
        .principle-cta p {
            color: #334155;
            font-weight: 800;
            line-height: 1.75;
        }

        .principle-hero-copy p {
            margin: 18px 0 0;
            font-size: 1.12rem;
        }

        .principle-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }

        .principle-summary {
            border-radius: 30px;
            padding: 26px;
            background:
                linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(5, 150, 105, 0.9)),
                url('../assets/gsg.png');
            background-size: cover;
            background-position: center;
            color: white;
            display: grid;
            align-content: center;
            text-align: center;
            box-shadow: 0 22px 44px rgba(37,99,235,0.28);
            border: 1px solid rgba(255,255,255,0.18);
        }

        .principle-summary span {
            font-weight: 950;
            opacity: 0.96;
        }

        .principle-summary b {
            font-size: 4.4rem;
            line-height: 1;
            letter-spacing: 0;
            text-shadow: 0 4px 18px rgba(15, 23, 42, 0.22);
        }

        .principle-summary p {
            margin: 12px 0 0;
            color: rgba(255,255,255,0.9);
        }

        .principle-content-card,
        .principle-article-card {
            margin-top: 26px;
            padding: 30px;
            border-radius: 30px;
            background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,246,255,0.86));
            border: 1px solid rgba(37,99,235,0.15);
            box-shadow: 0 20px 46px rgba(30,64,175,0.11);
        }

        .principle-large {
            padding: 38px;
        }

        .principle-content-card h2,
        .principle-section-title h2,
        .principle-cta h2 {
            margin: 0;
            font-size: clamp(1.7rem, 3vw, 2.6rem);
            line-height: 1.2;
            letter-spacing: 0;
            color: #102a5c;
        }

        .principle-info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 22px;
        }

        .principle-info-box {
            padding: 20px;
            border-radius: 22px;
            background: #fff;
            border: 1px solid rgba(37, 99, 235, 0.14);
            box-shadow: 0 12px 26px rgba(30, 64, 175, 0.08);
        }

        .principle-info-box b {
            display: block;
            font-size: 1.8rem;
            color: var(--primary-dark);
        }

        .principle-info-box span {
            display: block;
            margin-top: 6px;
            color: #334155;
            font-weight: 950;
        }

        .principle-section-title {
            margin: 54px 0 18px;
        }

        .principle-section-title p {
            margin: 10px 0 0;
            color: #475569;
            font-weight: 850;
        }

        .principle-article-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
        }

        .principle-article-card {
            margin-top: 0;
            min-height: 255px;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .principle-article-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 8px;
            background: linear-gradient(90deg, #2563eb, #10b981);
        }

        .principle-article-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 26px 50px rgba(30,64,175,0.13);
        }

        .principle-article-icon {
            width: 62px;
            height: 62px;
            border-radius: 22px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #dbeafe, #ccfbf1);
            border: 1px solid rgba(37, 99, 235, 0.16);
            box-shadow: 0 14px 28px rgba(30, 64, 175, 0.12);
            font-size: 2rem;
        }

        .principle-article-card h3 {
            margin: 20px 0 10px;
            font-size: 1.24rem;
            letter-spacing: 0;
            color: #102a5c;
            font-weight: 950;
        }

        .principle-dark {
            background:
                linear-gradient(135deg, rgba(15, 32, 63, 0.96), rgba(29, 78, 216, 0.9)),
                url('../assets/gsg.png');
            background-size: cover;
            background-position: center;
            color: white;
            border-color: rgba(255,255,255,0.16);
        }

        .principle-dark h2 {
            color: #fff;
        }

        .principle-dark p {
            color: rgba(255,255,255,0.88);
        }

        .principle-list {
            display: grid;
            gap: 14px;
            margin-top: 22px;
        }

        .principle-item {
            padding: 20px;
            border-radius: 22px;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .principle-item b {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: #fff;
        }

        .principle-item p {
            margin: 0;
        }

        .principle-two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .principle-accent {
            background: linear-gradient(145deg, #ffffff, #ecfdf5);
            border-color: rgba(22, 163, 74, 0.18);
        }

        .principle-cta {
            margin-top: 34px;
            padding: 36px;
            border-radius: 34px;
            background:
                linear-gradient(135deg, rgba(29, 78, 216, 0.94), rgba(5, 150, 105, 0.9)),
                url('../assets/gsg.png');
            background-size: cover;
            background-position: center;
            color: white;
            box-shadow: 0 24px 54px rgba(37,99,235,0.24);
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 22px;
            align-items: center;
            border: 1px solid rgba(255,255,255,0.18);
        }

        .principle-cta h2 {
            color: #fff;
        }

        .principle-cta p {
            margin: 12px 0 0;
            color: rgba(255,255,255,0.94);
            text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
        }

        .principle-cta .btn-primary {
            background: #fff;
            color: #0f4f8f;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
        }

        @media (max-width: 1120px) {
            .principle-hero,
            .principle-two-column {
                grid-template-columns: 1fr;
            }

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

        @media (max-width: 720px) {
            .training-principle-page {
                padding: 10px 12px 48px;
            }

            .principle-hero,
            .principle-content-card,
            .principle-large,
            .principle-cta {
                padding: 24px;
                border-radius: 24px;
            }

            .principle-info-grid,
            .principle-article-grid {
                grid-template-columns: 1fr;
            }

            .principle-summary b {
                font-size: 3.5rem;
            }

            .principle-cta {
                grid-template-columns: 1fr;
            }

            .principle-actions .btn,
            .principle-cta .btn {
                width: 100%;
            }
        }

        /* 인증 화면: 이미지 대신 표시되는 로그인/회원가입 */
        .auth-screen {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 1300px;
            min-height: 600px;
            padding: 40px 22px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .auth-back-btn {
            display: inline-block;
            margin-bottom: 18px;
            background: none;
            border: none;
            color: #2196F3;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
            font-family: inherit;
        }

        .auth-back-btn:hover { text-decoration: underline; }

        /* 로그인 검색 */
        .login-search-box { width: 100%; margin-top: 16px; }

        .login-search-fields {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 14px;
        }

        .login-field-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            text-align: left;
        }

        .login-field-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #555;
        }

        .login-field-group input {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            font-family: inherit;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }

        .login-field-group input:focus { border-color: #2196F3; }

        .login-search-btn {
            width: 100%;
            padding: 13px 0;
            background: #2196F3;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            margin-bottom: 16px;
            transition: background 0.2s;
        }

        .login-search-btn:hover { background: #1976D2; }

        /* 사용자 카드 아바타 */
        .user-card-avatar {
            font-size: 1.6rem;
            line-height: 1;
            margin-right: 2px;
        }

        /* 로그인/회원가입 탭 */
        .auth-tabs {
            display: flex;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 24px;
            border: 2px solid #2196F3;
        }

        .auth-tab {
            flex: 1;
            padding: 13px 0;
            font-size: 1.05rem;
            font-weight: 700;
            border: none;
            background: transparent;
            color: #2196F3;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            font-family: inherit;
        }

        .auth-tab.active {
            background: #2196F3;
            color: #fff;
        }

        .auth-tab:first-child { border-radius: 10px 0 0 10px; }
        .auth-tab:last-child  { border-radius: 0 10px 10px 0; }

        .auth-panel { width: 100%; }

        .auth-switch-hint {
            margin-top: 16px;
            font-size: 0.92rem;
            color: #666;
        }

        .auth-switch-hint span {
            color: #2196F3;
            font-weight: 700;
            cursor: pointer;
            text-decoration: underline;
        }

        .welcome-card {
            position: relative;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 22px;
            padding: 34px 28px;
            box-shadow: 0 18px 60px rgba(0,0,0,0.10);
            border: 1px solid rgba(0,0,0,0.06);
            max-width: 480px;
            width: 100%;
            text-align: center;
        }
        
        .welcome-card h2 { font-size: calc(1.8rem * var(--font-scale)); color: var(--primary-dark); margin-bottom: 10px; }
        .welcome-card .subtitle { font-size: calc(1.1rem * var(--font-scale)); color: var(--text-light); margin-bottom: 16px; }
        .welcome-icon { font-size: 4rem; margin-bottom: 15px; }

        /* 공통 SVG 아이콘 */
        .ui-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.15em;
            height: 1.15em;
            vertical-align: -0.15em;
            margin-right: 6px;
            color: currentColor;
        }
        .ui-icon svg { width: 100%; height: 100%; }
        /* 개인/기관 선택 탭(가로 스크롤) */
        .account-type-strip {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px 6px 14px;
            margin: 6px auto 12px;
            scroll-snap-type: x mandatory;
            justify-content: center;
        }
        .account-type-strip::-webkit-scrollbar { height: 8px; }
        .account-type-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }

        .account-type-btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 16px 18px;
            border-radius: 999px;
            border: 2px solid rgba(0,0,0,0.10);
            background: rgba(255,255,255,0.92);
            cursor: pointer;
            font-weight: 900;
            font-size: calc(1.18rem * var(--font-scale));
            color: var(--primary-dark);
            scroll-snap-align: start;
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
            font-family: inherit;
            box-shadow: 0 10px 26px rgba(0,0,0,0.10);
        }
        .account-type-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.14); }
        .account-type-btn.active {
            border-color: rgba(76, 175, 80, 0.55);
            background: rgba(76, 175, 80, 0.16);
        }
        .account-type-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            line-height: 1;
        }
        .account-type-icon svg { width: 100%; height: 100%; }
        .account-type-label { line-height: 1; white-space: nowrap; }

        /* 첫 화면: 사용자 리스트는 기본 숨김 */
        .user-select-section.is-hidden {
            display: none;
        }

        /* 신규 등록(상단) 버튼은 더 눈에 띄게 */
        #newUserTogglePrimary {
            margin: 6px auto 16px;
            box-shadow: 0 14px 34px rgba(76, 175, 80, 0.18);
            background: rgba(255,255,255,0.95);
        }

        .welcome-icon img { 
            width: 150px; 
            height: 150px; 
            border-radius: 50%; 
            object-fit: cover;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .form-group { margin-bottom: 25px; text-align: left; }
        .form-group label { display: block; font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
        
        .form-group input[type="number"],
        .form-group input[type="text"] {
            width: 100%;
            padding: 16px 18px;
            font-size: 1.3rem;
            border: 3px solid #E0E0E0;
            border-radius: 12px;
            font-family: inherit;
            text-align: center;
        }
        
        .form-group input:focus { outline: none; border-color: var(--primary); }
        
        .gender-options { display: flex; gap: 12px; }
        
        .gender-btn {
            flex: 1;
            padding: 18px;
            font-size: 1.2rem;
            font-weight: 600;
            border: 3px solid #E0E0E0;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }
        
        .gender-btn:hover { border-color: var(--primary); }
        .gender-btn.selected { background: var(--primary); color: white; border-color: var(--primary); }
        .gender-btn .gender-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin: 0 auto 6px;
            color: currentColor;
        }
        .gender-btn .gender-icon svg { width: 100%; height: 100%; }
        
        .difficulty-select {
            width: 100%;
            padding: 15px 20px;
            font-size: 1.1rem;
            font-weight: 600;
            border: 3px solid #E0E0E0;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            font-family: inherit;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 20px;
        }
        
        .difficulty-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
        }
        
        .difficulty-select option {
            padding: 10px;
        }
        
        /* 게임 화면 난이도 선택 - 숨김 처리 */
        .game-difficulty-selector {
            display: none;
        }
        
        .game-diff-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .game-diff-btns {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .game-diff-btn {
            padding: 8px 12px;
            font-size: 0.85rem;
            font-weight: 600;
            border: 2px solid transparent;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
            white-space: nowrap;
        }
        
        .game-diff-btn.very-easy { background: #E3F2FD; color: #1565C0; }
        .game-diff-btn.easy { background: #E8F5E9; color: #2E7D32; }
        .game-diff-btn.normal { background: #FFF3E0; color: #E65100; }
        .game-diff-btn.hard { background: #FCE4EC; color: #C2185B; }
        .game-diff-btn.very-hard { background: #FFEBEE; color: #C62828; }
        
        .game-diff-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .game-diff-btn.active {
            border-color: var(--primary);
            box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
            transform: scale(1.08);
        }
        
        @media (max-width: 600px) {
            .game-difficulty-selector {
                flex-direction: column;
                gap: 10px;
            }
            .game-diff-btns {
                gap: 5px;
            }
            .game-diff-btn {
                padding: 6px 10px;
                font-size: 0.8rem;
            }
        }
        
        .start-btn {
            width: 100%;
            padding: 18px;
            font-size: 1.4rem;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            margin-top: 15px;
        }
        
        .start-btn:hover { transform: translateY(-2px); }
        .start-btn:disabled { background: #BDBDBD; cursor: not-allowed; transform: none; }
        
        /* 사용자 배지 */
        .user-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: white;
            padding: 10px 20px;
            border-radius: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 15px;
            font-size: 1rem;
        }
        
        .difficulty-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .difficulty-badge.very-easy { background: #E3F2FD; color: #1565C0; }
        .difficulty-badge.easy { background: #E8F5E9; color: #2E7D32; }
        .difficulty-badge.normal { background: #FFF3E0; color: #E65100; }
        .difficulty-badge.hard { background: #FCE4EC; color: #C2185B; }
        .difficulty-badge.very-hard { background: #FFEBEE; color: #C62828; }
        
        /* 난이도 선택 가능하도록 클릭 효과 */
        .difficulty-badge.clickable {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .difficulty-badge.clickable:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        /* 난이도 선택 모달 */
        .difficulty-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        
        .difficulty-modal.active {
            display: flex;
        }
        
        .difficulty-modal-content {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 30px;
            max-width: 450px;
            width: 90%;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            animation: modalSlideIn 0.3s ease;
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .difficulty-modal h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--text-dark);
        }
        
        .difficulty-modal p {
            color: #666;
            margin-bottom: 20px;
        }
        
        .difficulty-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .difficulty-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-radius: 12px;
            border: 3px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .difficulty-option:hover {
            transform: translateX(5px);
        }
        
        .difficulty-option.selected {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }
        
        .difficulty-option.very-easy { background: #E3F2FD; }
        .difficulty-option.easy { background: #E8F5E9; }
        .difficulty-option.normal { background: #FFF3E0; }
        .difficulty-option.hard { background: #FCE4EC; }
        .difficulty-option.very-hard { background: #FFEBEE; }
        
        .difficulty-option .diff-info {
            text-align: left;
        }
        
        .difficulty-option .diff-name {
            font-size: 1.2rem;
            font-weight: 700;
        }
        
        .difficulty-option.very-easy .diff-name { color: #1565C0; }
        .difficulty-option.easy .diff-name { color: #2E7D32; }
        .difficulty-option.normal .diff-name { color: #E65100; }
        .difficulty-option.hard .diff-name { color: #C2185B; }
        .difficulty-option.very-hard .diff-name { color: #C62828; }
        
        .difficulty-option .diff-desc {
            font-size: 0.85rem;
            color: #666;
            margin-top: 3px;
        }
        
        .difficulty-option .diff-stars {
            font-size: 1.3rem;
        }
        
        .difficulty-modal-btns {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .difficulty-modal-btns .btn {
            min-width: 120px;
        }
        
        .change-profile-btn {
            background: none;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 6px 14px;
            border-radius: 15px;
            font-size: 0.9rem;
            cursor: pointer;
            font-family: inherit;
            margin-left: 10px;
        }
        
        .change-profile-btn:hover { background: var(--primary); color: white; }
        
        .exit-btn {
            background: #E53935 !important;
            color: white !important;
            border-color: #E53935 !important;
        }
        
        .exit-btn:hover {
            background: #C62828 !important;
            border-color: #C62828 !important;
        }
        
        /* 배지 버튼 */
        .badge-btn {
            background: linear-gradient(135deg, #FFD700, #FFA500) !important;
            color: #333 !important;
            border-color: #FFD700 !important;
            font-weight: bold;
        }
        
        .badge-btn:hover {
            background: linear-gradient(135deg, #FFA500, #FF8C00) !important;
            border-color: #FFA500 !important;
        }
        
        /* 배지 모달 */
        .badge-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 3000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .badge-modal.active { display: flex; }
        
        .badge-modal-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 600px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
        }
        
        .badge-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .badge-modal-header h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #333;
        }
        
        .badge-count {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #333;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 1rem;
        }
        
        .badge-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #f5f5f5;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .badge-close-btn:hover { background: #e0e0e0; }
        
        /* 배지 그리드 */
        .badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 15px;
        }
        
        .badge-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }
        
        .badge-card.earned {
            background: linear-gradient(135deg, #FFF8E1, #FFECB3);
            border-color: #FFD700;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
        }
        
        .badge-card.locked {
            background: #f0f0f0;
            opacity: 0.7;
        }
        
        .badge-card.locked .badge-icon {
            filter: grayscale(100%);
            opacity: 0.5;
        }
        
        .badge-icon {
            font-size: 3rem;
            margin-bottom: 10px;
            display: block;
        }
        
        .badge-name {
            font-size: 0.9rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .badge-desc {
            font-size: 0.75rem;
            color: #666;
            line-height: 1.3;
        }
        
        .badge-card.locked .badge-name,
        .badge-card.locked .badge-desc {
            color: #999;
        }
        
        .badge-earned-date {
            font-size: 0.65rem;
            color: #888;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(0,0,0,0.1);
        }
        
        .badge-lock-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1rem;
            opacity: 0.5;
        }
        
        /* 새 배지 획득 알림 */
        .badge-unlock-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 4000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }
        
        .badge-unlock-overlay.active { display: flex; }
        
        .badge-unlock-card {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            max-width: 350px;
            animation: badgePopIn 0.5s ease;
            border: 3px solid #FFD700;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
        }
        
        @keyframes badgePopIn {
            0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
            50% { transform: scale(1.1) rotate(5deg); }
            100% { transform: scale(1) rotate(0); opacity: 1; }
        }
        
        .badge-unlock-title {
            color: #FFD700;
            font-size: 1.3rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        
        .badge-unlock-icon {
            font-size: 5rem;
            margin: 20px 0;
            animation: badgeGlow 1.5s ease infinite;
        }
        
        @keyframes badgeGlow {
            0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
            50% { text-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
        }
        
        .badge-unlock-name {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .badge-unlock-desc {
            color: #aaa;
            font-size: 1rem;
            margin-bottom: 25px;
        }
        
        .badge-unlock-close {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #333;
            border: none;
            padding: 12px 40px;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .badge-unlock-close:hover {
            transform: scale(1.05);
        }
        
        /* 점수 표시 */
        .score-display { display: flex; justify-content: center; gap: 20px; margin: 15px 0; flex-wrap: wrap; }
        
        .score-item {
            background: var(--card-bg);
            padding: 12px 25px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
        }
        
        .score-item .label { font-size: 1rem; color: var(--text-light); }
        .score-item .value { font-size: calc(1.8rem * var(--font-scale)); font-weight: 700; color: var(--primary); }
        
        /* 메인 메뉴 */
        .main-menu {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }

        /* 로그인 후 메인 레이아웃: 좌측 이미지 + 우측 메뉴 */
        .main-layout {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 0;
            width: 100%;
        }

        .main-center-img-wrap {
            flex: 0 0 auto;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 24px 16px 24px 24px;
        }

        .main-center-img {
            width: 220px;
            height: auto;
            filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) saturate(1.8) contrast(1.2);
        }

        .main-right-panel {
            flex: 1 1 0;
            min-width: 0;
        }

        /* 메인 메뉴(카테고리 래퍼) */
        .main-menu-wrapper {
            display: block;
        }

        /* 전체보기: 4개 대분류를 2x2 그리드로 배치 */
        .main-menu-wrapper.all-view {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px 20px;
            align-items: start;
        }

        /* 상단 카테고리 네비는 그리드 전체 폭 */
        .main-menu-wrapper.all-view > .category-nav {
            grid-column: 1 / -1;
        }

        /* 그리드 간격으로 여백을 관리 */
        .main-menu-wrapper.all-view > .menu-category {
            margin-top: 0;
        }

        /* 화면이 너무 좁을 땐 1열로 */
        @media (max-width: 720px) {
            .main-menu-wrapper.all-view {
                grid-template-columns: 1fr;
            }
        }

        /* 카테고리 바로가기(메인 중간 라인 배치) */
        .category-nav {
            position: relative;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
            padding: 16px 14px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.96);
            border: 2px solid rgba(0,0,0,0.10);
            box-shadow: 0 10px 24px rgba(0,0,0,0.10);
            margin: 18px auto 10px;
        }
        .cat-btn {
            --cat-color: var(--primary);
            appearance: none;
            border: 2px solid var(--cat-color);
            background: transparent;
            color: var(--cat-color);
            padding: 14px 18px;
            border-radius: 999px;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 1.25;
        }
        .menu-category-header {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0;
            text-align: center;
        }
        .menu-category-subtitle {
            font-size: inherit; /* same as title */
            font-weight: inherit; /* same weight as title */
            color: inherit; /* same color as title */
            opacity: 0.92;
            letter-spacing: -0.01em;
            margin-left: 6px;
            white-space: nowrap;
        }
        .cat-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }
        .cat-btn.active {
            background: var(--cat-color);
            color: #fff;
        }

        /* 오늘의 추천 훈련 버튼 */
        .recommend-btn {
            margin-left: auto;
            appearance: none;
            border: 0;
            background: linear-gradient(135deg, #FFD700 0%, #FF9800 100%);
            color: #1a1a1a;
            padding: 14px 18px;
            border-radius: 999px;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(255, 152, 0, 0.35);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            white-space: nowrap;
        }
        .recommend-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(255, 152, 0, 0.45);
        }

        /* 추천 배지(메뉴 카드) */
        .menu-card.is-recommended {
            border-color: #FFD700 !important;
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.18), var(--shadow);
            position: relative;
        }
        .menu-card.is-recommended::after {
            content: "오늘의 추천";
            position: absolute;
            top: 10px;
            right: 10px;
            background: linear-gradient(135deg, #FFD700, #FF9800);
            color: #1a1a1a;
            font-weight: 900;
            font-size: calc(0.78rem * var(--font-scale));
            padding: 6px 10px;
            border-radius: 999px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }

        /* 추천 모달 */
        .recommend-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px;
            z-index: 2000;
        }
        .recommend-modal-content {
            width: min(695px, 92vw);
            background: var(--card-bg);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 14px 38px rgba(0,0,0,0.35);
            border: 1px solid rgba(0,0,0,0.08);
            transform: scale(0.85);
            transform-origin: center;
        }
        .recommend-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 7px;
            margin-bottom: 6px;
        }
        .recommend-modal-header h2 {
            margin: 0;
            flex: 1;
            font-size: calc(1.23rem * var(--font-scale));
            font-weight: 900;
            color: #1a1a1a;
            letter-spacing: -0.02em;
            line-height: 1.25;
            text-align: center;
            padding: 8px 13px;
            border-radius: 12px;
            background: linear-gradient(135deg, #fff9c4 0%, #FFD700 40%, #FF9800 100%);
            box-shadow: 0 4px 16px rgba(255, 152, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.45);
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
        .recommend-close {
            appearance: none;
            border: 0;
            background: transparent;
            font-size: calc(0.53rem * var(--font-scale));
            cursor: pointer;
            padding: 4px 5px;
            border-radius: 5px;
        }
        .recommend-close:hover { background: rgba(0,0,0,0.06); }
        .recommend-subtitle {
            margin: 0 0 8px;
            color: var(--text-light);
            font-weight: 600;
            font-size: calc(0.92rem * var(--font-scale));
        }
        .recommend-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 7px;
        }
        .recommend-item {
            border-radius: 13px;
            border: 1px solid rgba(0,0,0,0.08);
            padding: 8px;
            background: rgba(0,0,0,0.02);
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .recommend-item:hover { transform: translateY(-1px); }
        .recommend-preview {
            width: 100%;
        }
        .recommend-category-label {
            margin-top: 10px;
            text-align: center;
            font-size: calc(0.95rem * var(--font-scale));
            font-weight: 900;
            color: var(--cat-color);
            line-height: 1.35;
            letter-spacing: 0.03em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.08);
        }
        /* popup 내부에서는 메뉴 카드가 "미리보기" 역할만 하도록 클릭/hover 제거 */
        .recommend-item .menu-card,
        .recommend-item .rec-menu-card {
            pointer-events: none;
            margin: 0;
        }
        .recommend-item .menu-card:hover,
        .recommend-item .rec-menu-card:hover {
            transform: none !important;
            border-color: transparent !important;
        }
        .recommend-item .rec-menu-card {
            width: 100%;
            aspect-ratio: 1 / 1;
        }
        .recommend-item .rec-menu-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
            display: block;
        }
        .recommend-fallback {
            width: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: calc(0.71rem * var(--font-scale));
            color: var(--cat-color);
            background: rgba(0,0,0,0.03);
            border-radius: 13px;
        }

        /* 작은 화면: 1열 전환 */
        @media (max-width: 520px) {
            .recommend-modal-content { width: min(695px, 92vw); }
            .recommend-list { grid-template-columns: 1fr; }
        }
        .recommend-footer {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .recommend-modal-content .btn {
            padding: 7px 14px;
            font-size: calc(1.02rem * var(--font-scale));
        }

        body.high-contrast .recommend-btn {
            background: #FFD700 !important;
            color: #000 !important;
            box-shadow: none !important;
        }
        body.high-contrast .recommend-modal-content {
            border-color: #FFD700 !important;
        }
        body.high-contrast .recommend-item {
            border-color: #FFD700 !important;
        }
        body.high-contrast .recommend-modal-header h2 {
            background: #FFD700 !important;
            color: #000 !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        body.high-contrast .recommend-category-label {
            color: #FFD700 !important;
            font-size: calc(1.15rem * var(--font-scale)) !important;
            text-shadow: none !important;
        }

        /* 카테고리 섹션 */
        .menu-category {
            margin-top: 18px;
            padding: 14px;
            border-radius: 22px;
            position: relative;
            isolation: isolate;
        }
        /* 카테고리별 배경 색상(은은한 틴트) */
        .menu-category::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--cat-color);
            opacity: 0.07;
            border-radius: 22px;
            z-index: 0;
        }
        /* 실제 콘텐츠는 배경 위로 */
        .menu-category > * {
            position: relative;
            z-index: 1;
        }
        .menu-category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
            border: 2px solid rgba(0,0,0,0.06);
            border-left-width: 10px;
            border-left-color: var(--cat-color);
        }
        .menu-category-title {
            margin: 0;
            font-size: calc(1.15rem * var(--font-scale));
            font-weight: 800;
            color: var(--cat-color);
        }
        .category-grid {
            margin-top: 12px;
        }

        /*
         카테고리별 게임 카드: "카테고리 단독 보기"에서만 한 줄에 4개
         - 전체보기(.all-view)는 기존(auto-fill) 레이아웃 유지 (카테고리 섹션 2x2 포함)
        */
        .main-menu-wrapper:not(.all-view) .main-menu.category-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        @media (max-width: 980px) {
            .main-menu-wrapper:not(.all-view) .main-menu.category-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (max-width: 520px) {
            .main-menu-wrapper:not(.all-view) .main-menu.category-grid {
                grid-template-columns: 1fr;
            }
        }

        body.high-contrast .category-nav {
            background: #111 !important;
            border-color: #FFD700 !important;
        }
        body.high-contrast .menu-category-subtitle {
            color: #FFD700 !important;
            opacity: 1;
        }
        body.high-contrast .cat-btn {
            border-color: #FFD700 !important;
            color: #FFD700 !important;
        }
        body.high-contrast .cat-btn.active {
            background: #FFD700 !important;
            color: #000 !important;
        }
        body.high-contrast .menu-category-header {
            background: #111 !important;
            border-color: #FFD700 !important;
            border-left-color: #FFD700 !important;
        }
        body.high-contrast .menu-category-title {
            color: #FFD700 !important;
        }
        
        .menu-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 25px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
            border: 3px solid transparent;
            min-height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .menu-card:hover { transform: translateY(-5px); border-color: var(--primary); }
        .menu-card .icon { font-size: calc(2.5rem * var(--font-scale)); margin-bottom: 8px; display: block; }
        .menu-card h3 { font-size: calc(1.1rem * var(--font-scale)); font-weight: 700; margin-bottom: 5px; color: var(--primary-dark); }
        .menu-card p { font-size: calc(0.9rem * var(--font-scale)); color: var(--text-light); }
        
        /* 게임 화면 */
        .game-screen {
            display: none;
            position: relative;
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
            min-height: auto;
            text-align: center;
        }

        /* 게임만 전체화면: 배경은 뷰포트 전체, 본문은 상단부터 배치 */
        .game-screen:fullscreen,
        .game-screen:-webkit-full-screen {
            display: flex !important;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            min-height: -webkit-fill-available;
            max-height: 100dvh;
            height: auto;
            max-width: none;
            margin: 0;
            border-radius: 0;
            box-sizing: border-box;
            padding:
                max(10px, env(safe-area-inset-top, 0px))
                max(12px, env(safe-area-inset-right, 0px))
                max(10px, env(safe-area-inset-bottom, 0px))
                max(12px, env(safe-area-inset-left, 0px));
            overflow-x: hidden;
            overflow-y: auto;
            box-shadow: none;
            /* 전체화면 전용: 글자·이미지 확대 기준 (rem 상속) */
            font-size: clamp(1.08rem, 0.78rem + 1.85vmin, 1.48rem);
        }
        body.high-contrast .game-screen:fullscreen,
        body.high-contrast .game-screen:-webkit-full-screen {
            background: #1a1a1a !important;
            border: 2px solid #FFD700 !important;
        }

        /* 전체화면: 설명 듣기·문제 읽기 등 TTS 버튼 숨김 */
        .game-screen:fullscreen .tts-btn,
        .game-screen:-webkit-full-screen .tts-btn {
            display: none !important;
        }

        /* 하단 버튼 줄(시작·다시 등): 콘텐츠 흐름에 맞춤(세로 끝으로 밀지 않음) */
        .game-screen:fullscreen > .btn-group,
        .game-screen:-webkit-full-screen > .btn-group {
            flex-shrink: 0;
            padding-top: 10px;
        }

        /* 주요 플레이 박스: 남는 세로를 늘리지 않고 본문 크기 유지 */
        .game-screen:fullscreen > .match-game-container,
        .game-screen:-webkit-full-screen > .match-game-container,
        .game-screen:fullscreen > .reaction-traffic-wrap,
        .game-screen:-webkit-full-screen > .reaction-traffic-wrap,
        .game-screen:fullscreen > .maze-container,
        .game-screen:-webkit-full-screen > .maze-container,
        .game-screen:fullscreen > .puzzle-container,
        .game-screen:-webkit-full-screen > .puzzle-container,
        .game-screen:fullscreen > .treasure-grid,
        .game-screen:-webkit-full-screen > .treasure-grid,
        .game-screen:fullscreen > .palace-room,
        .game-screen:-webkit-full-screen > .palace-room,
        .game-screen:fullscreen > .palace-question,
        .game-screen:-webkit-full-screen > .palace-question,
        .game-screen:fullscreen > .shadow-main,
        .game-screen:-webkit-full-screen > .shadow-main,
        .game-screen:fullscreen > .focus-panel,
        .game-screen:-webkit-full-screen > .focus-panel,
        .game-screen:fullscreen > .rotate-main,
        .game-screen:-webkit-full-screen > .rotate-main,
        .game-screen:fullscreen > .chain-arena,
        .game-screen:-webkit-full-screen > .chain-arena {
            flex: 0 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .game-screen:fullscreen > .pattern-grid,
        .game-screen:-webkit-full-screen > .pattern-grid,
        .game-screen:fullscreen > .find-diff-grid,
        .game-screen:-webkit-full-screen > .find-diff-grid,
        .game-screen:fullscreen > .sort-grid,
        .game-screen:-webkit-full-screen > .sort-grid,
        .game-screen:fullscreen > .category-options,
        .game-screen:-webkit-full-screen > .category-options,
        .game-screen:fullscreen > .pair-grid,
        .game-screen:-webkit-full-screen > .pair-grid,
        .game-screen:fullscreen > .color-options,
        .game-screen:-webkit-full-screen > .color-options,
        .game-screen:fullscreen > .calc-options,
        .game-screen:-webkit-full-screen > .calc-options,
        .game-screen:fullscreen > .direction-btns,
        .game-screen:-webkit-full-screen > .direction-btns,
        .game-screen:fullscreen > .letter-input,
        .game-screen:-webkit-full-screen > .letter-input,
        .game-screen:fullscreen > .count-options,
        .game-screen:-webkit-full-screen > .count-options,
        .game-screen:fullscreen > .story-cards,
        .game-screen:-webkit-full-screen > .story-cards,
        .game-screen:fullscreen > .melody-piano,
        .game-screen:-webkit-full-screen > .melody-piano,
        .game-screen:fullscreen > .shadow-options,
        .game-screen:-webkit-full-screen > .shadow-options,
        .game-screen:fullscreen > .rotate-options,
        .game-screen:-webkit-full-screen > .rotate-options,
        .game-screen:fullscreen > .word-display,
        .game-screen:-webkit-full-screen > .word-display,
        .game-screen:fullscreen > .counting-grid,
        .game-screen:-webkit-full-screen > .counting-grid {
            flex: 0 1 auto;
            min-height: 0;
            align-self: center;
        }

        .game-screen:fullscreen > .num-pad,
        .game-screen:-webkit-full-screen > .num-pad {
            flex: 0 1 auto;
            min-height: 0;
            max-width: min(98vw, 620px);
            align-content: center;
            align-items: center;
            justify-content: center;
            gap: clamp(10px, 2.2vmin, 18px);
            padding: 8px 4px 16px;
        }

        .game-screen:fullscreen .match-grid,
        .game-screen:-webkit-full-screen .match-grid {
            gap: clamp(8px, 2vmin, 14px);
        }

        .game-screen:fullscreen .sort-grid,
        .game-screen:-webkit-full-screen .sort-grid {
            max-width: min(96vw, 440px);
        }

        .game-screen:fullscreen .maze-container,
        .game-screen:-webkit-full-screen .maze-container {
            max-height: min(78dvh, 720px);
            overflow: auto;
        }

        .game-screen:fullscreen > .maze-controls,
        .game-screen:-webkit-full-screen > .maze-controls {
            flex-shrink: 0;
        }

        /* 전체화면: 이미지는 뷰포트 비율에 맞춰 크게(비율 유지) */
        .game-screen:fullscreen img,
        .game-screen:-webkit-full-screen img {
            max-width: min(98vw, 100vw - 24px);
            max-height: min(72dvh, 88vmin);
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: center top;
            vertical-align: middle;
        }

        .game-screen:fullscreen .game-header h2,
        .game-screen:-webkit-full-screen .game-header h2 {
            font-size: clamp(1.25rem, 0.95rem + 2.2vmin, 1.95rem);
        }

        .game-screen:fullscreen .game-info,
        .game-screen:-webkit-full-screen .game-info,
        .game-screen:fullscreen .level-display,
        .game-screen:-webkit-full-screen .level-display {
            font-size: clamp(0.98rem, 0.85rem + 1.15vmin, 1.22rem);
        }

        .game-screen:fullscreen .level-display .level-number,
        .game-screen:-webkit-full-screen .level-display .level-number {
            font-size: clamp(1.15rem, 1rem + 1.4vmin, 1.45rem);
        }

        /* 반응속도: 전체화면 신호등 확대 */
        .game-screen:fullscreen .traffic-light,
        .game-screen:-webkit-full-screen .traffic-light {
            width: min(110px, 18vmin);
            height: min(110px, 18vmin);
        }
        .game-screen:fullscreen .reaction-click-zone,
        .game-screen:-webkit-full-screen .reaction-click-zone {
            min-height: 120px;
            max-width: 480px;
        }

        .game-screen:fullscreen .num-btn,
        .game-screen:-webkit-full-screen .num-btn {
            width: calc(min(26vmin, 118px) * var(--font-scale));
            height: calc(min(26vmin, 118px) * var(--font-scale));
            aspect-ratio: 1;
            font-size: calc(clamp(1.45rem, 4.8vmin, 2.15rem) * var(--font-scale));
        }

        .game-screen:fullscreen > .game-display,
        .game-screen:-webkit-full-screen > .game-display {
            flex: 0 1 auto;
            font-size: clamp(1.45rem, 1rem + 3.2vmin, 2.65rem);
            min-height: 0;
            padding: clamp(10px, 2.2vmin, 22px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .game-screen:fullscreen .match-grid.grid-2x4,
        .game-screen:-webkit-full-screen .match-grid.grid-2x4 { grid-template-columns: repeat(4, min(22vmin, 114px)); }
        .game-screen:fullscreen .match-grid.grid-3x4,
        .game-screen:-webkit-full-screen .match-grid.grid-3x4 { grid-template-columns: repeat(4, min(21vmin, 107px)); }
        .game-screen:fullscreen .match-grid.grid-4x4,
        .game-screen:-webkit-full-screen .match-grid.grid-4x4 { grid-template-columns: repeat(4, min(19.5vmin, 99px)); }
        .game-screen:fullscreen .match-grid.grid-2x2,
        .game-screen:-webkit-full-screen .match-grid.grid-2x2 { grid-template-columns: repeat(2, min(28vmin, 140px)); }
        .game-screen:fullscreen .match-grid.grid-2x3,
        .game-screen:-webkit-full-screen .match-grid.grid-2x3 { grid-template-columns: repeat(3, min(25vmin, 125px)); }
        .game-screen:fullscreen .match-grid.grid-4x5,
        .game-screen:-webkit-full-screen .match-grid.grid-4x5 { grid-template-columns: repeat(5, min(16.25vmin, 81px)); }
        .game-screen:fullscreen .match-grid.grid-4x6,
        .game-screen:-webkit-full-screen .match-grid.grid-4x6 { grid-template-columns: repeat(6, min(13.5vmin, 68px)); }

        .game-screen:fullscreen .match-card,
        .game-screen:-webkit-full-screen .match-card {
            font-size: clamp(2.275rem, 7.15vmin, 3.9rem);
            aspect-ratio: 1;
        }

        .game-screen:fullscreen .find-diff-grid,
        .game-screen:-webkit-full-screen .find-diff-grid {
            max-width: min(98vw, 920px);
        }

        .game-screen:fullscreen .diff-item,
        .game-screen:-webkit-full-screen .diff-item {
            font-size: clamp(2rem, 6.5vmin, 3.8rem);
            aspect-ratio: 1;
        }

        .game-screen:fullscreen .sort-item,
        .game-screen:-webkit-full-screen .sort-item {
            width: calc(min(22vmin, 108px) * var(--font-scale));
            height: calc(min(22vmin, 108px) * var(--font-scale));
            aspect-ratio: 1;
            font-size: calc(clamp(1.85rem, 5.5vmin, 2.85rem) * var(--font-scale));
        }

        .game-screen:fullscreen .arrow-display,
        .game-screen:-webkit-full-screen .arrow-display {
            width: min(72vmin, 520px);
            min-height: min(72vmin, 520px);
            height: auto;
            line-height: normal;
            padding: clamp(10px, 2vmin, 18px);
        }

        .game-screen:fullscreen .direction-btns,
        .game-screen:-webkit-full-screen .direction-btns {
            display: block;
            grid-template-columns: none;
            grid-template-rows: none;
            gap: clamp(12px, 2.2vmin, 22px);
        }

        .game-screen:fullscreen .swap-board,
        .game-screen:-webkit-full-screen .swap-board {
            max-width: min(66vmin, 480px);
        }

        .game-screen:fullscreen .swap-cell,
        .game-screen:-webkit-full-screen .swap-cell {
            font-size: clamp(2rem, 6vmin, 3.4rem);
        }

        .game-screen:fullscreen .dir-btn:not(.empty),
        .game-screen:-webkit-full-screen .dir-btn:not(.empty) {
            aspect-ratio: 1;
            font-size: clamp(2rem, 7vmin, 3.2rem);
        }

        .game-screen:fullscreen .color-btn,
        .game-screen:-webkit-full-screen .color-btn {
            min-width: min(42vw, 200px);
            min-height: min(14vmin, 72px);
            font-size: clamp(1.15rem, 3.8vmin, 1.65rem);
            aspect-ratio: auto;
        }

        .game-screen:fullscreen .color-word,
        .game-screen:-webkit-full-screen .color-word {
            font-size: clamp(2rem, 7vmin, 3.5rem);
        }

        .game-screen:fullscreen .story-card,
        .game-screen:-webkit-full-screen .story-card {
            font-size: clamp(2rem, 6.5vmin, 3.5rem);
        }

        .game-screen:fullscreen .story-card .card-label,
        .game-screen:-webkit-full-screen .story-card .card-label {
            font-size: clamp(0.9rem, 2.8vmin, 1.1rem);
        }

        .game-screen:fullscreen .piano-key,
        .game-screen:-webkit-full-screen .piano-key {
            min-width: min(11vmin, 56px);
            min-height: min(22vmin, 120px);
            font-size: clamp(1rem, 3.2vmin, 1.35rem);
        }

        .game-screen:fullscreen .pattern-cell,
        .game-screen:-webkit-full-screen .pattern-cell {
            aspect-ratio: 1 / 1;
            font-size: clamp(1.5rem, 5vmin, 2.5rem);
        }

        .game-screen:fullscreen .word-display,
        .game-screen:-webkit-full-screen .word-display {
            font-size: clamp(1.85rem, 1.2rem + 3.5vmin, 3rem);
        }

        .game-screen:fullscreen .letter-btn,
        .game-screen:-webkit-full-screen .letter-btn {
            min-width: min(12vmin, 52px);
            min-height: min(12vmin, 52px);
            font-size: clamp(1.2rem, 4vmin, 1.75rem);
            aspect-ratio: 1;
        }

        .game-screen:fullscreen .calc-option,
        .game-screen:-webkit-full-screen .calc-option {
            font-size: clamp(1.35rem, 4.2vmin, 2rem);
            min-height: min(12vmin, 64px);
        }

        .game-screen:fullscreen .count-btn,
        .game-screen:-webkit-full-screen .count-btn {
            width: calc(min(22vmin, 100px) * var(--font-scale));
            height: calc(min(22vmin, 100px) * var(--font-scale));
            aspect-ratio: 1;
            font-size: calc(clamp(1.75rem, 5vmin, 2.5rem) * var(--font-scale));
        }

        .game-screen:fullscreen .pair-item,
        .game-screen:-webkit-full-screen .pair-item {
            font-size: clamp(1.35rem, 4vmin, 2rem);
            min-height: min(12vmin, 56px);
        }

        .game-screen:fullscreen .category-title,
        .game-screen:-webkit-full-screen .category-title {
            font-size: clamp(1.35rem, 4vmin, 2rem);
        }

        .game-screen:fullscreen .category-options button,
        .game-screen:-webkit-full-screen .category-options button {
            font-size: clamp(1.1rem, 3.5vmin, 1.5rem);
            min-height: min(11vmin, 52px);
        }
        
        .game-screen .game-header,
        .game-screen .btn-group {
            text-align: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .game-screen.active { display: block; animation: fadeIn 0.3s ease; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .game-header h2 { font-size: 1.5rem; color: var(--primary-dark); }
        
        /* 레벨 표시 */
        .level-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 10px 0;
            padding: 12px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 25px;
            color: white;
            font-weight: 700;
        }
        
        .level-display .level-label {
            font-size: calc(1rem * var(--font-scale));
        }
        
        .level-display .level-number {
            font-size: calc(1.3rem * var(--font-scale));
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 15px;
        }
        
        .level-progress {
            display: flex;
            gap: 5px;
            margin-left: 10px;
        }
        
        .level-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transition: all 0.3s ease;
        }
        
        .level-dot.completed {
            background: #4CAF50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
        }
        
        .level-dot.current {
            background: #FFD700;
            animation: pulse 1s infinite;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
        }
        
        .level-reset-btn {
            margin-left: 10px;
            padding: 6px 14px;
            font-size: 0.9rem;
            font-weight: 800;
            background: #FF6B6B;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(0,0,0,0.25);
            transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
            white-space: nowrap;
            letter-spacing: -0.3px;
        }
        .level-reset-btn:hover {
            background: #e05555;
            box-shadow: 0 5px 14px rgba(0,0,0,0.3);
            transform: translateY(-1px);
        }
        .level-reset-btn:active {
            transform: scale(0.93);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        body.high-contrast .level-display {
            background: linear-gradient(135deg, #333 0%, #555 100%);
            border: 2px solid #FFD700;
        }
        
        /* 레벨 업 오버레이 */
        .level-up-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2147483200;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .level-up-overlay.show {
            opacity: 1;
        }
        
        .level-up-message {
            position: relative;
            text-align: center;
            animation: levelUpBounce 0.5s ease;
            display: grid;
            gap: 14px;
            justify-items: center;
            color: #fff;
        }

        .level-up-title {
            font-size: clamp(2rem, 5vw, 3.6rem);
            font-weight: 950;
            text-shadow: 0 4px 18px rgba(0,0,0,0.45);
        }

        .level-up-subtitle {
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(255,255,255,0.35);
            font-size: clamp(1.05rem, 2.5vw, 1.45rem);
            font-weight: 900;
            box-shadow: 0 10px 26px rgba(0,0,0,0.28);
        }

        .level-up-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 48px;
            height: 48px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.72);
            color: #fff;
            font-size: 1.45rem;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
            z-index: 1;
            box-shadow: 0 8px 22px rgba(0,0,0,0.35);
        }

        .level-up-close:hover,
        .level-up-close:focus-visible {
            background: #111;
            outline: 4px solid rgba(255, 255, 255, 0.55);
            outline-offset: 2px;
        }
        
        @keyframes levelUpBounce {
            0% { transform: scale(0.5); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .level-up-icon {
            font-size: 5rem;
            animation: levelUpSpin 0.5s ease;
        }

        .level-up-rank-image {
            display: block;
            width: min(520px, 86vw);
            max-height: 64vh;
            object-fit: contain;
            margin: 0 auto;
            filter: drop-shadow(0 18px 38px rgba(0,0,0,0.35));
        }

        .level-up-next {
            border: 0;
            border-radius: 999px;
            padding: 14px 30px;
            min-height: 54px;
            background: linear-gradient(135deg, #2563eb, #1e40af);
            color: #fff;
            font: inherit;
            font-size: 1.15rem;
            font-weight: 950;
            cursor: pointer;
            box-shadow: 0 14px 32px rgba(37,99,235,0.36);
        }

        .level-up-next:hover,
        .level-up-next:focus-visible {
            transform: translateY(-2px);
            outline: 4px solid rgba(255,255,255,0.5);
            outline-offset: 2px;
        }
        
        @keyframes levelUpSpin {
            from { transform: rotate(-30deg); }
            to { transform: rotate(0deg); }
        }
        
        .level-up-continue {
            font-size: 1.2rem;
            color: #87CEEB;
            margin-top: 15px;
            animation: pulse 1s ease infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* 게임 완료 화면 레벨 표시 */
        .current-level-display {
            margin-bottom: 15px;
        }
        
        .level-badge {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 25px;
            border-radius: 25px;
            font-size: 1.3rem;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .level-up-notice {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 15px 25px;
            border-radius: 15px;
            margin: 15px 0;
            font-size: 1.2rem;
            font-weight: 600;
            animation: pulse 1s ease infinite;
            gap: 6px;
            justify-items: center;
            line-height: 1.45;
        }

        .level-up-notice strong {
            display: block;
            font-size: calc(1.35rem * var(--font-scale));
            font-weight: 950;
        }

        .level-up-notice span {
            display: block;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 800;
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
            color: white;
        }
        
        .btn-danger:hover {
            background: linear-gradient(135deg, #ee5a5a 0%, #dd4444 100%);
            transform: translateY(-2px);
        }
        
        .game-info { display: flex; gap: 15px; font-size: 1.1rem; }
        .game-info span { background: var(--background); padding: 8px 15px; border-radius: 10px; font-weight: 500; }
        
        /* 버튼 */
        .btn {
            display: inline-block;
            padding: 18px 40px;
            font-size: calc(1.3rem * var(--font-scale));
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            min-height: 55px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        }
        
        .btn:active {
            transform: scale(0.98);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
            color: white;
        }
        
        .btn-back { background: #757575; color: white; padding: 10px 20px; font-size: 1rem; }
        .btn-group { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }

        /* 게임 제어 버튼 row — 모든 게임 공통 가로 배열 */
        .game-ctrl-row,
        .match-start-btn-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 16px;
            width: 100%;
            margin-top: 18px;
        }
        /* 시작 버튼 */
        .game-ctrl-row .btn,
        .match-start-btn-row .btn {
            padding: 0;
            font-size: calc(1.2rem * var(--font-scale));
            min-height: 72px;
            width: 120px;
            flex: 0 0 120px;
            line-height: 1.2;
            text-align: center;
            white-space: nowrap;
            font-weight: 700;
        }
        /* 전체화면·일시정지 */
        .game-ctrl-row .btn-game-fullscreen,
        .game-ctrl-row .btn-game-pause,
        .match-start-btn-row .btn-game-fullscreen,
        .match-start-btn-row .btn-game-pause {
            padding: 0;
            font-size: calc(1.25rem * var(--font-scale));
            min-height: 72px;
            width: 180px;
            flex: 0 0 180px;
            line-height: 1.2;
            text-align: center;
            white-space: nowrap;
            font-weight: 700;
        }
        /* X 버튼 */
        .game-ctrl-row .btn-game-exit,
        .match-start-btn-row .btn-game-exit {
            padding: 0;
            font-size: calc(1.1rem * var(--font-scale));
            width: 65px;
            flex: 0 0 65px;
            min-height: 72px;
            line-height: 1.2;
            text-align: center;
            white-space: nowrap;
            font-weight: 700;
        }
        @media (max-width: 480px) {
            .game-ctrl-row, .match-start-btn-row { gap: 8px; }
            .game-ctrl-row .btn,
            .match-start-btn-row .btn {
                width: 88px;
                flex: 0 0 88px;
                font-size: calc(0.95rem * var(--font-scale));
                padding: 14px 0;
            }
            .game-ctrl-row .btn-game-fullscreen,
            .game-ctrl-row .btn-game-pause,
            .match-start-btn-row .btn-game-fullscreen,
            .match-start-btn-row .btn-game-pause {
                width: 112px;
                flex: 0 0 112px;
                font-size: calc(1.0rem * var(--font-scale));
                padding: 0;
            }
            .game-ctrl-row .btn-game-exit,
            .match-start-btn-row .btn-game-exit {
                width: 48px;
                flex: 0 0 48px;
                min-height: 50px;
            }
        }
        .game-pause-overlay {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 99;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(3px);
            border-radius: inherit;
            pointer-events: auto;
        }
        .game-screen.game-paused .game-pause-overlay {
            display: flex;
        }
        .game-pause-overlay-inner {
            text-align: center;
            padding: 24px 28px;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(37, 99, 235, 0.25);
        }
        .game-pause-title {
            margin: 0 0 10px;
            font-size: calc(1.35rem * var(--font-scale));
            font-weight: 800;
            color: var(--primary-dark);
        }
        .game-pause-hint {
            margin: 0;
            font-size: calc(1rem * var(--font-scale));
            color: var(--text-light);
            line-height: 1.45;
        }
        .game-screen.game-paused .game-ctrl-row,
        .game-screen.game-paused .match-start-btn-row,
        .game-screen.game-paused .btn-group {
            position: relative;
            z-index: 120;
        }
        body.high-contrast .game-pause-overlay-inner {
            background: #1a1a1a !important;
            border-color: #FFD700 !important;
        }
        body.high-contrast .game-pause-title {
            color: #FFD700 !important;
        }
        body.high-contrast .game-pause-hint {
            color: #eee !important;
        }

        /* 전체화면 3단계 크기(본문 래퍼만 확대 — 종료/크기 버튼은 비율 유지) */
        .game-screen:fullscreen .game-fs-zoom-wrap,
        .game-screen:-webkit-full-screen .game-fs-zoom-wrap {
            width: 100%;
            box-sizing: border-box;
            transform-origin: top center;
        }
        .game-screen:fullscreen .game-fs-zoom-wrap[data-fs-zoom="1"],
        .game-screen:-webkit-full-screen .game-fs-zoom-wrap[data-fs-zoom="1"] {
            zoom: 1;
        }
        .game-screen:fullscreen .game-fs-zoom-wrap[data-fs-zoom="2"],
        .game-screen:-webkit-full-screen .game-fs-zoom-wrap[data-fs-zoom="2"] {
            zoom: 1.22;
        }
        .game-screen:fullscreen .game-fs-zoom-wrap[data-fs-zoom="3"],
        .game-screen:-webkit-full-screen .game-fs-zoom-wrap[data-fs-zoom="3"] {
            zoom: 1.42;
        }
        #gameFullscreenZoomBar.game-fs-zoom-bar {
            display: none;
            position: fixed;
            left: max(10px, env(safe-area-inset-left, 10px));
            top: max(10px, env(safe-area-inset-top, 10px));
            z-index: 2147482600;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            max-width: calc(100vw - 72px);
            padding: 6px 8px;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.52);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
            font-family: inherit;
        }
        .game-screen:fullscreen #gameFullscreenZoomBar.game-fs-zoom-bar,
        .game-screen:-webkit-full-screen #gameFullscreenZoomBar.game-fs-zoom-bar {
            display: flex;
        }
        .game-fs-zoom-btn {
            margin: 0;
            padding: 8px 12px;
            min-height: 40px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-radius: 10px;
            font-size: calc(0.92rem * var(--font-scale));
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }
        .game-fs-zoom-btn:hover {
            background: rgba(255, 255, 255, 0.22);
            border-color: rgba(255, 255, 255, 0.55);
        }
        .game-fs-zoom-btn.active {
            background: rgba(76, 175, 80, 0.55);
            border-color: #a5d6a7;
            box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.45);
        }
        body.high-contrast .game-fs-zoom-btn {
            border-color: #FFD700 !important;
            color: #FFD700 !important;
            background: #000 !important;
        }
        body.high-contrast .game-fs-zoom-btn.active {
            background: #1a1a1a !important;
            box-shadow: 0 0 0 2px #FFD700 !important;
        }
        body.high-contrast #gameFullscreenZoomBar.game-fs-zoom-bar {
            background: rgba(0, 0, 0, 0.85) !important;
            border: 2px solid #FFD700;
        }

        .game-fullscreen-exit {
            display: none;
            position: fixed;
            top: max(12px, env(safe-area-inset-top, 12px));
            right: max(12px, env(safe-area-inset-right, 12px));
            z-index: 2147483000;
            width: 48px;
            height: 48px;
            padding: 0;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 50%;
            font-size: 1.5rem;
            line-height: 1;
            font-weight: 900;
            cursor: pointer;
            font-family: inherit;
            color: #fff;
            background: rgba(0, 0, 0, 0.55);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
            transition: background 0.15s ease, transform 0.15s ease;
        }
        .game-fullscreen-exit:hover {
            background: rgba(0, 0, 0, 0.72);
            transform: scale(1.05);
        }
        body.high-contrast .game-fullscreen-exit {
            background: #000 !important;
            color: #FFD700 !important;
            border: 3px solid #FFD700 !important;
        }
        
        /* 타이머 바 */
        .timer-bar { height: 8px; background: #E0E0E0; border-radius: 4px; margin: 12px 0; overflow: hidden; }
        .timer-bar .timer-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 4px;
            transition: width 0.1s linear;
        }
        
        /* 결과 메시지 */
        .result-message {
            text-align: center;
            padding: 20px;
            border-radius: 15px;
            margin: 15px 0;
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .result-message.success { background: #E8F5E9; color: var(--success); border: 2px solid var(--success); }
        .result-message.error { background: #FFEBEE; color: var(--error); border: 2px solid var(--error); }
        
        /* 카드 짝 맞추기 게임 */
        .match-game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 15px 0;
        }

        .match-hint {
            min-height: 38px;
            margin: 2px 0 12px;
            padding: 8px 16px;
            border: 2px solid #D7E8D4;
            border-radius: 8px;
            background: #F7FBF4;
            color: #31573A;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 700;
            text-align: center;
        }
        
        .match-grid {
            display: grid;
            gap: 10px;
            margin: 0 auto;
            position: relative;
        }
        
        .match-grid.grid-2x2 { grid-template-columns: repeat(2, min(110px, 28vw)); }
        .match-grid.grid-2x3 { grid-template-columns: repeat(3, min(100px, 26vw)); }
        .match-grid.grid-2x4 { grid-template-columns: repeat(4, min(84px, 22vw)); }
        .match-grid.grid-3x4 { grid-template-columns: repeat(4, min(78px, 20vw)); }
        .match-grid.grid-4x4 { grid-template-columns: repeat(4, min(75px, 19vw)); }
        .match-grid.grid-4x5 { grid-template-columns: repeat(5, min(68px, 17vw)); }
        .match-grid.grid-4x6 { grid-template-columns: repeat(6, min(58px, 14vw)); }

        .match-card {
            aspect-ratio: 1 / 1;
            background: linear-gradient(145deg, #E8F3E2, #C6DFC3);
            border: 2px solid #9DBD9C;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(48,82,53,0.16);
            font-size: calc(2rem * 1.3);
            width: 100%;
            min-width: 0;
            min-height: 0;
        }
        
        .match-card.daily-theme {
            background: linear-gradient(145deg, #F2E8D8, #D9C4A5);
            border-color: #B99B74;
        }
        
        .match-card.snack-theme {
            background: linear-gradient(145deg, #FFF3D6, #F0C878);
            border-color: #D4A642;
        }
        
        .match-card.nature-theme {
            background: linear-gradient(145deg, #E0F1E7, #A8D5BA);
            border-color: #6DA985;
        }
        
        .match-card:hover {
            transform: scale(1.08);
        }
        
        .match-card:active {
            transform: scale(0.95);
        }
        
        .match-card .card-back {
            font-size: calc(1.7rem * 1.3);
            color: #4B6B50;
            text-shadow: 0 1px 0 rgba(255,255,255,0.6);
        }
        
        .match-card .card-front {
            display: none;
            font-size: calc(2.15rem * 1.3);
            filter: saturate(1.18) contrast(1.08);
        }
        
        .match-card.flipped,
        .match-card.previewing {
            background: #FFFFFF !important;
            border: 3px solid #5B9C68;
        }
        
        .match-card.flipped .card-back { display: none; }
        .match-card.flipped .card-front { display: flex; }
        .match-card.previewing .card-back { display: none; }
        .match-card.previewing .card-front { display: flex; }
        
        .match-card.matched {
            background: linear-gradient(145deg, #F4F9E8, #DDEFC4) !important;
            border-color: #6DA85E;
            pointer-events: none;
            animation: matchSuccess 0.5s ease;
        }
        
        .match-card.matched .card-front { display: flex; }
        .match-card.matched .card-back { display: none; }
        
        @keyframes matchSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.15) rotate(5deg); }
            100% { transform: scale(1) rotate(0); }
        }

        /* 판 완료 오버레이 */
        .match-round-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.45);
            border-radius: 12px;
            z-index: 50;
            opacity: 0;
            transition: opacity 0.25s;
            pointer-events: none;
        }
        .match-round-overlay.show { opacity: 1; }
        .match-round-msg {
            background: white;
            border-radius: 20px;
            padding: 24px 36px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .match-round-icon { font-size: 3rem; }
        .match-round-text { font-size: 1.5rem; font-weight: 700; color: #333; margin: 8px 0 4px; }
        .match-round-sub { font-size: 1rem; color: #666; }

        /* 레벨업 오버레이 공통 애니메이션 */
        @keyframes levelupBounce {
            0% { transform: scale(0.7); }
            60% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        
        .stage-buttons {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            margin-bottom: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .stage-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .stage-btn.daily { background: linear-gradient(135deg, #8B6F4E, #6F563A); color: white; }
        .stage-btn.snack { background: linear-gradient(135deg, #E0A02F, #B87419); color: white; }
        .stage-btn.nature { background: linear-gradient(135deg, #4E9A63, #2F7449); color: white; }
        
        .stage-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .stage-btn.active { box-shadow: 0 0 0 3px #333; }
        
        /* 숫자 기억하기: 하나씩 보고 순서를 기억하는 작업기억 게임 */
        #sequenceGame .game-display {
            min-height: 150px;
            padding: 20px;
            border: 2px solid #CFE0F5;
            background: #F5F9FF;
            color: #1D3F69;
        }
        #sequenceGame .game-display.seq-display-prompt {
            min-height: 75px;
            padding: 10px;
        }
        #sequenceGame .user-input-display {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 14px;
            min-height: 70px;
            letter-spacing: 0;
            border: 2px dashed #B7CBE5;
            background: #FFFFFF;
        }
        #sequenceGame .input-hint {
            display: inline-block;
            margin: 8px auto 12px;
            color: #31506F;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 700;
        }
        .seq-ready {
            display: block;
            font-size: calc(1.65rem * var(--font-scale));
            font-weight: 800;
        }
        .seq-input-prompt {
            font-size: calc(0.825rem * var(--font-scale));
        }
        .seq-mode-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 92px;
            height: 34px;
            margin-bottom: 10px;
            padding: 0 14px;
            border-radius: 8px;
            background: #DDEBFA;
            color: #214F82;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 800;
        }
        .seq-digit-card {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 96px;
            height: 96px;
            border: 3px solid #5D8FC5;
            border-radius: 8px;
            background: #FFFFFF;
            color: #12365F;
            font-size: calc(3.5rem * var(--font-scale));
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 8px 18px rgba(30, 64, 105, 0.16);
        }
        .seq-step {
            margin-top: 8px;
            color: #55708E;
            font-size: calc(0.95rem * var(--font-scale));
            font-weight: 700;
        }
        .seq-input-slot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 52px;
            border: 2px solid #C9D8EA;
            border-radius: 8px;
            background: #F8FBFF;
            color: #12365F;
            font-size: calc(1.7rem * var(--font-scale));
            font-weight: 900;
        }
        .seq-input-slot.filled {
            border-color: #4F83BE;
            background: #EAF3FF;
        }
        #sequenceGame .num-pad {
            display: grid;
            grid-template-columns: repeat(6, calc(80px * var(--font-scale) * 0.8));
            justify-content: center;
            justify-items: center;
            gap: calc(15px * 0.8);
            max-width: min(100%, 620px);
            overflow-x: auto;
            padding-bottom: 12px;
        }
        #sequenceGame .num-btn {
            width: calc(80px * var(--font-scale) * 0.8);
            height: calc(80px * var(--font-scale) * 0.8);
            font-size: calc(1.8rem * var(--font-scale) * 0.8);
        }
        #sequenceGame .num-btn.clear-btn,
        #sequenceGame .num-btn.submit-btn {
            width: calc(80px * var(--font-scale) * 0.8);
            height: calc(80px * var(--font-scale) * 0.8);
            font-size: calc(1.2rem * var(--font-scale) * 0.8);
        }
        #sequenceGame.game-screen:fullscreen > .game-display,
        #sequenceGame.game-screen:-webkit-full-screen > .game-display {
            font-size: clamp(1.16rem, 0.8rem + 2.56vmin, 2.12rem);
            padding: clamp(8px, 1.76vmin, 17.6px);
        }
        #sequenceGame.game-screen:fullscreen .num-pad,
        #sequenceGame.game-screen:-webkit-full-screen .num-pad {
            display: grid;
            grid-template-columns: repeat(6, calc(min(26vmin, 118px) * var(--font-scale) * 0.8));
            justify-content: center;
            justify-items: center;
            max-width: min(98vw, 780px);
            overflow-x: auto;
            gap: 12px;
        }
        #sequenceGame.game-screen:fullscreen .num-btn,
        #sequenceGame.game-screen:-webkit-full-screen .num-btn {
            width: calc(min(26vmin, 118px) * var(--font-scale) * 0.8);
            height: calc(min(26vmin, 118px) * var(--font-scale) * 0.8);
            font-size: calc(clamp(1.45rem, 4.8vmin, 2.15rem) * var(--font-scale) * 0.8);
        }
        #sequenceGame .tts-btn {
            padding: calc(12px * 0.8) calc(20px * 0.8);
            font-size: calc(1.1rem * 0.8);
            gap: calc(8px * 0.8);
            margin: calc(10px * 0.8) calc(5px * 0.8);
        }
        #sequenceGame .tts-btn .tts-icon {
            font-size: calc(1.4rem * 0.8);
        }

        /* 숫자 패드 */
        .num-pad { 
            display: flex; 
            justify-content: center; 
            gap: 15px; 
            flex-wrap: wrap; 
            max-width: 500px; 
            margin: 0 auto; 
            padding: 10px;
        }
        
        .num-btn {
            width: calc(80px * var(--font-scale));
            height: calc(80px * var(--font-scale));
            font-size: calc(1.8rem * var(--font-scale));
            font-weight: 700;
            border: none;
            border-radius: 15px;
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }
        
        .num-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        }
        
        .num-btn:active { 
            transform: scale(0.95); 
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        /* 지우기 버튼 강조 */
        .num-btn.clear-btn {
            background: linear-gradient(135deg, #E53935 0%, #C62828 100%) !important;
            border: 3px solid #FFCDD2 !important;
            position: relative;
            animation: pulse-clear 2s infinite;
            width: calc(80px * var(--font-scale));
            height: calc(80px * var(--font-scale));
            font-size: calc(1.2rem * var(--font-scale));
            padding: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.1;
        }
        
        @keyframes pulse-clear {
            0%, 100% { box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3); }
            50% { box-shadow: 0 4px 20px rgba(229, 57, 53, 0.6); }
        }
        
        .num-btn.clear-btn::after {
            content: '←';
            position: absolute;
            top: -8px;
            right: -8px;
            background: #FFC107;
            color: #333;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* 확인 버튼 강조 */
        .num-btn.submit-btn {
            background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%) !important;
            border: 3px solid #C8E6C9 !important;
            width: calc(80px * var(--font-scale));
            height: calc(80px * var(--font-scale));
            font-size: calc(1.2rem * var(--font-scale));
            padding: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.1;
        }
        
        /* 게임 디스플레이 */
        .game-display {
            font-size: calc(3rem * var(--font-scale));
            text-align: center;
            padding: 30px;
            background: var(--background);
            border-radius: var(--radius);
            margin-bottom: 20px;
            font-weight: 700;
            color: var(--primary-dark);
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .game-screen img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            object-position: center;
        }
        .match-grid,
        .find-diff-grid,
        .treasure-grid,
        .shadow-options,
        .counting-grid,
        .puzzle-container,
        .color-options,
        .pair-grid,
        .category-options,
        .calc-options,
        .rotate-options,
        .palace-room {
            justify-items: center;
            align-items: center;
        }
        
        .user-input-display {
            font-size: calc(2rem * var(--font-scale));
            text-align: center;
            padding: 20px;
            margin: 15px 0;
            background: white;
            border: 4px solid var(--primary);
            border-radius: 15px;
            min-height: 70px;
            letter-spacing: 10px;
            font-weight: 600;
            position: relative;
        }
        
        /* 수정 안내 힌트 */
        .input-hint {
            display: block;
            text-align: center;
            font-size: calc(0.9rem * var(--font-scale));
            color: #E53935;
            margin-top: 8px;
            font-weight: 500;
        }
        
        .input-hint::before {
            content: '💡 ';
        }
        
        /* 계산 옵션 */
        .calc-options {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            max-width: 760px;
            margin: 0 auto;
        }
        .calc-option {
            padding: 18px 12px;
            font-size: calc(1.62rem * var(--font-scale));
            font-weight: 700;
            border: 4px solid var(--primary);
            border-radius: 15px;
            background: white;
            cursor: pointer;
            min-height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }
        .calc-option:hover { 
            background: var(--primary); 
            color: white; 
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        }
        .calc-option:active {
            transform: scale(0.98);
        }

        .market-problem {
            width: min(100%, 760px);
            margin: 0 auto;
            display: grid;
            gap: 20px;
        }

        .market-shelf {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
        }

        .market-card {
            min-height: 145px;
            padding: 16px 11px;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            border: 3px solid rgba(47, 128, 237, 0.18);
            box-shadow: 0 10px 22px rgba(30, 64, 175, 0.1);
            display: grid;
            place-items: center;
            gap: 4px;
            color: var(--text-dark);
        }

        .market-card-emoji {
            font-size: calc(2.64rem * var(--font-scale));
            line-height: 1;
        }

        .market-card strong {
            font-size: calc(1.05rem * var(--font-scale));
            color: var(--primary-dark);
        }

        .market-card span:not(.market-card-emoji) {
            font-size: calc(1.1rem * var(--font-scale));
            font-weight: 900;
            color: #047857;
        }

        .market-card em {
            padding: 3px 9px;
            border-radius: 999px;
            background: #dbeafe;
            color: #1d4ed8;
            font-style: normal;
            font-weight: 900;
            font-size: calc(0.88rem * var(--font-scale));
        }

        .market-question {
            margin: 0;
            padding: 18px 20px;
            border-radius: 18px;
            background: #ecfdf5;
            color: #064e3b;
            border: 3px solid rgba(16, 185, 129, 0.22);
            font-size: calc(1.25rem * var(--font-scale));
            font-weight: 950;
            line-height: 1.45;
            word-break: keep-all;
        }

        @media (max-width: 720px) {
            .calc-options {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                max-width: 420px;
            }
        }
        
        /* 색상 게임 */
        .color-word {
            padding: 18px;
            background: #F7FBFF;
            border: 2px solid #D6E4F2;
            border-radius: 14px;
            margin: 0 auto 15px;
            text-align: center;
            max-width: 480px;
        }
        
        .color-ready {
            min-height: 170px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #31506F;
            font-size: calc(1.35rem * var(--font-scale));
            font-weight: 800;
        }
        .color-card {
            --color-card-box: 84px;
            display: grid;
            gap: 12px;
            justify-items: center;
            color: #24364A;
        }
        .color-rule {
            min-width: 120px;
            padding: 6px 14px;
            border-radius: 999px;
            background: #E8F2FF;
            color: #1D4F82;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 900;
        }
        .color-item-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: nowrap;
        }
        .color-object {
            width: var(--color-card-box);
            height: var(--color-card-box);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: #FFFFFF;
            border: 2px solid #D7E3EE;
            font-size: calc(3rem * var(--font-scale));
            box-shadow: 0 6px 16px rgba(35, 64, 92, 0.12);
        }
        .color-patch {
            width: var(--color-card-box);
            height: var(--color-card-box);
            border-radius: 14px;
            border: 4px solid #FFFFFF;
            box-shadow: 0 0 0 2px rgba(30, 50, 70, 0.16), 0 6px 16px rgba(35, 64, 92, 0.14);
        }
        .color-word-label {
            width: var(--color-card-box);
            height: var(--color-card-box);
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #FFFFFF;
            border: 2px solid #D7E3EE;
            border-radius: 14px;
            font-size: calc(1.18rem * var(--font-scale));
            font-weight: 900;
            line-height: 1.15;
            box-shadow: 0 6px 16px rgba(35, 64, 92, 0.10);
            word-break: keep-all;
        }
        .color-helper {
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 800;
            color: #445A70;
            word-break: keep-all;
        }
        .color-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            max-width: 420px;
            margin: 0 auto;
        }
        .color-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 16px;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 900;
            border: 2px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            cursor: pointer;
            color: #1F2933;
            min-height: 76px;
            box-shadow: 0 4px 12px rgba(35, 64, 92, 0.14);
            transition: all 0.2s ease;
        }
        .color-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
            border-color: white;
        }
        .color-btn:active {
            transform: scale(0.98);
        }
        
        .color-btn-swatch {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.9);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
            flex: 0 0 auto;
        }
        .color-btn.red { background: #FFE8E6; }
        .color-btn.blue { background: #E5F1FF; }
        .color-btn.green { background: #E7F6EA; }
        .color-btn.yellow { background: #FFF7CF; }
        @media (max-width: 540px) {
            .color-word { max-width: 100%; padding: 14px; }
            .color-card { --color-card-box: 70px; }
            .color-item-row { gap: 8px; }
            .color-word-label {
                padding: 5px;
                font-size: calc(0.94rem * var(--font-scale));
            }
            .color-options { gap: 10px; }
            .color-btn { min-height: 66px; padding: 14px 10px; }
        }
        
        /* 패턴 그리드 */
        .pattern-grid {
            display: grid;
            grid-template-columns: repeat(var(--pattern-cols, 3), minmax(0, 1fr));
            grid-template-rows: repeat(var(--pattern-rows, 2), auto);
            gap: 16px 18px;
            width: min(88vw, 344px);
            max-width: 344px;
            margin: 0 auto 25px;
            justify-items: stretch;
        }
        
        .pattern-grid.size-3 { grid-template-columns: repeat(3, 1fr); }
        .pattern-grid.size-4 { grid-template-columns: repeat(4, 1fr); }
        .pattern-grid.size-5 { grid-template-columns: repeat(5, 1fr); }
        
        .pattern-cell {
            position: relative;
            aspect-ratio: 1 / 1;
            min-height: 0;
            border: 0;
            border-radius: 6px;
            background: url("../assets/game-icons/KKK.png") center / contain no-repeat;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.16);
            padding: 0;
            outline: none;
            overflow: hidden;
        }

        .pattern-cell::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 6px;
            background: transparent;
            pointer-events: none;
        }
        
        .pattern-cell:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .pattern-cell.active {
            background:
                linear-gradient(rgba(255, 231, 118, 0.58), rgba(255, 183, 77, 0.58)),
                url("../assets/game-icons/KKK.png") center / contain no-repeat;
            box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.32), 0 8px 20px rgba(245, 166, 35, 0.35);
        }

        .pattern-cell.selected {
            background:
                linear-gradient(rgba(87, 210, 135, 0.62), rgba(87, 210, 135, 0.62)),
                url("../assets/game-icons/KKK.png") center / contain no-repeat;
            transform: scale(1.02);
            box-shadow: 0 0 0 4px var(--secondary), 0 8px 18px rgba(52, 152, 219, 0.28);
        }

        .pattern-cell.correct {
            background:
                linear-gradient(rgba(46, 204, 113, 0.66), rgba(46, 204, 113, 0.66)),
                url("../assets/game-icons/KKK.png") center / contain no-repeat;
            box-shadow: 0 0 0 4px var(--success), 0 8px 18px rgba(39, 174, 96, 0.28);
        }

        .pattern-cell.wrong {
            background:
                linear-gradient(rgba(255, 99, 99, 0.66), rgba(255, 99, 99, 0.66)),
                url("../assets/game-icons/KKK.png") center / contain no-repeat;
            box-shadow: 0 0 0 4px var(--error), 0 8px 18px rgba(229, 57, 53, 0.28);
        }
        
        /* 월척을 낚아라 — 수중 반응 패널 */
        .fish-game-panel {
            width: min(100%, 560px);
            margin: 12px auto 16px;
            padding: 18px;
            border: 1px solid rgba(30, 41, 59, 0.12);
            border-radius: 18px;
            background:
                radial-gradient(circle at 20% 10%, rgba(20, 184, 166, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(20, 184, 166, 0.08)),
                #f8fafc;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        }

        .fish-pond {
            display: grid;
            grid-template-columns: repeat(var(--fish-cols, 3), 1fr);
            gap: 10px;
            max-width: var(--fish-pond-width, 340px);
            margin: 0 auto;
        }

        .fish-hole {
            aspect-ratio: 1;
            border-radius: 16px;
            background:
                radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25), transparent 28%),
                linear-gradient(145deg, #0f766e, #1d4ed8);
            border: 2px solid rgba(255,255,255,0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(1.9rem, 6vw, 2.55rem);
            cursor: pointer;
            box-shadow: 0 9px 20px rgba(15,23,42,0.15), inset 0 1px 0 rgba(255,255,255,0.20);
            transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
            user-select: none;
            position: relative;
            overflow: hidden;
        }

        .fish-hole::after {
            content: "";
            position: absolute;
            inset: 12%;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.18);
            pointer-events: none;
        }

        .fish-hole:active { transform: scale(0.93); }

        .fish-hole-up {
            animation: fishPop 0.22s cubic-bezier(.34,1.56,.64,1) forwards;
        }

        .fish-target-symbol {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72%;
            height: 72%;
            border-radius: 14px;
            background: rgba(255,255,255,0.72);
            color: #0f766e;
            font-size: clamp(1.55rem, 5vw, 2.3rem);
            line-height: 1;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85);
            overflow: hidden;
        }

        .fish-hole-bad .fish-target-symbol {
            color: #dc2626;
            background: rgba(255,255,255,0.78);
        }

        .fish-hole-bonus .fish-target-symbol {
            color: #b45309;
            background:
                radial-gradient(circle at 68% 32%, rgba(255,255,255,0.98) 0 7%, transparent 8%),
                rgba(255,251,235,0.86);
            font-size: clamp(1.7rem, 5.3vw, 2.45rem);
        }

        @keyframes fishPop {
            from { transform: scale(0.4); opacity: 0.4; }
            to   { transform: scale(1);   opacity: 1;   }
        }

        .fish-hole-good {
            border-color: rgba(20,184,166,0.8);
            box-shadow: 0 14px 28px rgba(20,184,166,0.22), inset 0 1px 0 rgba(255,255,255,0.25);
        }
        .fish-hole-bad {
            background:
                radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 28%),
                linear-gradient(145deg, #475569, #1e293b);
            border-color: rgba(239,68,68,0.75);
            box-shadow: 0 14px 28px rgba(239,68,68,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
        }
        .fish-hole-bonus {
            background:
                radial-gradient(circle at 50% 30%, rgba(255,255,255,0.34), transparent 30%),
                linear-gradient(145deg, #f59e0b, #14b8a6);
            border-color: rgba(245,158,11,0.9);
            box-shadow: 0 16px 32px rgba(245,158,11,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
            animation: fishPop 0.22s cubic-bezier(.34,1.56,.64,1) forwards, fishGlow 0.7s ease-in-out infinite alternate;
        }
        @keyframes fishGlow {
            from { box-shadow: 0 14px 28px rgba(245,158,11,0.24); }
            to   { box-shadow: 0 18px 36px rgba(245,158,11,0.46); }
        }

        .fish-burst {
            animation: fishBurst 0.45s ease-out forwards !important;
        }
        @keyframes fishBurst {
            0%   { transform: scale(1.3); background: #fff9; }
            100% { transform: scale(1);   background: transparent; }
        }

        .fish-score-guide {
            text-align: center;
            font-size: clamp(0.95rem, 2.4vw, 1.08rem);
            font-weight: 900;
            color: #1e293b;
            margin: 0 auto 14px;
            line-height: 1.55;
            max-width: 760px;
        }
        .fish-score-guide-top {
            padding: 10px 14px;
            background: rgba(255,255,255,0.76);
            border: 1px solid rgba(30,41,59,0.10);
            border-radius: 999px;
        }
        .fish-score-guide strong { color: #0f766e; }
        .fish-score-guide .fish-guide-good { color: #0f766e; }
        .fish-score-guide .fish-guide-bad { color: #dc2626; }
        .fish-score-guide .fish-guide-bonus { color: #b45309; }
        .fish-guide-sep {
            color: #94a3b8;
            margin: 0 10px;
        }

        .fish-feedback {
            text-align: center;
            font-size: 1.35rem;
            font-weight: 800;
            min-height: 2rem;
            margin: 0 0 6px;
            transition: opacity 0.2s;
        }
        .fish-fb-good  { color: #0f766e; }
        .fish-fb-bad   { color: #dc2626; }
        .fish-fb-bonus { color: #b45309; font-size: 1.6rem; }

        /* 신호등 게임 — 반응 연구실 UI */
        .reaction-traffic-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: min(100%, 560px);
            margin: 12px auto 10px;
            padding: 18px;
            border: 1px solid rgba(30, 41, 59, 0.12);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(245, 158, 11, 0.08)),
                #f8fafc;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        }

        .reaction-lab-label {
            align-self: stretch;
            color: #475569;
            font-size: 0.86rem;
            font-weight: 900;
            letter-spacing: 0;
            text-align: left;
        }

        .reaction-traffic {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: 100%;
            background: #1e293b;
            border-radius: 16px;
            padding: 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
            border: 1px solid rgba(15, 23, 42, 0.2);
        }

        .traffic-light {
            width: clamp(78px, 18vw, 116px);
            height: clamp(78px, 18vw, 116px);
            border-radius: 16px;
            background: #334155;
            border: 1px solid rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.50);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 900;
            transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, color 0.16s ease;
            box-shadow: inset 0 -8px 16px rgba(15, 23, 42, 0.30);
        }

        .traffic-light span {
            display: block;
            padding-top: 34px;
            position: relative;
        }

        .traffic-light span::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.18);
        }

        .traffic-light.traffic-on-red {
            background: #ef4444;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(239, 68, 68, 0.32), inset 0 1px 0 rgba(255,255,255,0.22);
        }
        .traffic-light.traffic-on-yellow {
            background: #f59e0b;
            color: #111827;
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255,255,255,0.26);
        }
        .traffic-light.traffic-on-green {
            background: #14b8a6;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 14px 30px rgba(20, 184, 166, 0.36), inset 0 1px 0 rgba(255,255,255,0.24);
            animation: trafficGreenPulse 0.7s ease-in-out infinite alternate;
        }
        @keyframes trafficGreenPulse {
            from { box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28); }
            to   { box-shadow: 0 18px 34px rgba(20, 184, 166, 0.48); }
        }

        .reaction-guide {
            font-size: 1.02rem;
            font-weight: 800;
            color: #1e293b;
            text-align: center;
            margin: 0;
            min-height: 1.6em;
        }

        .reaction-click-zone {
            width: 100%;
            max-width: 560px;
            min-height: 104px;
            margin: 10px auto 12px;
            border-radius: 16px;
            background: #ffffff;
            border: 2px solid rgba(30, 41, 59, 0.14);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: default;
            transition: background 0.16s ease, border-color 0.16s ease, transform 0.10s ease, box-shadow 0.16s ease;
            user-select: none;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }
        .reaction-click-zone.rz-active {
            background: #ecfdf5;
            border-color: #14b8a6;
            cursor: pointer;
            box-shadow: 0 16px 30px rgba(20, 184, 166, 0.20);
            animation: rzPulse 0.55s ease-in-out infinite alternate;
        }
        @keyframes rzPulse {
            from { transform: scale(1); }
            to   { transform: scale(1.015); }
        }
        .reaction-click-kicker {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0;
        }
        .reaction-click-label {
            color: #1e293b;
            font-size: clamp(1.45rem, 4vw, 2.05rem);
            font-weight: 900;
        }

        .reaction-result-area {
            text-align: center;
            min-height: 44px;
            margin: 4px 0 6px;
        }
        .reaction-badge {
            display: inline-block;
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 1rem;
            font-weight: 900;
            color: #fff;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
        }
        .reaction-perfect { background: #7c3aed; }
        .reaction-great   { background: #2563eb; }
        .reaction-good    { background: #14b8a6; color: #fff; }
        .reaction-ok      { background: #f59e0b; color: #111827; }
        .reaction-early   { background: #ef4444; }

        /* 다른 것 찾기 — 시각 비교 패널 */
        .find-diff-panel {
            width: min(100%, 560px);
            margin: 12px auto 18px;
            padding: 18px;
            border: 1px solid rgba(30, 41, 59, 0.12);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(37, 99, 235, 0.06)),
                #f8fafc;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        }

        .find-diff-instruction {
            color: #1e293b;
            font-size: 1.04rem;
            font-weight: 850;
            text-align: center;
            margin: 0 0 14px;
            min-height: 1.5em;
        }

        .find-diff-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            max-width: 430px;
            margin: 0 auto;
        }
        
        .diff-item {
            aspect-ratio: 1;
            min-width: 0;
            padding: 0;
            font-size: clamp(1.6rem, 6vw, 2.45rem);
            font-weight: 900;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tile-accent, #14b8a6);
            background:
                radial-gradient(circle at 50% 40%, rgba(255,255,255,0.94), rgba(255,255,255,0.62)),
                var(--tile-bg, #ecfeff);
            border: 2px solid var(--tile-line, rgba(20, 184, 166, 0.22));
            border-radius: 14px;
            cursor: pointer;
            transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
            user-select: none;
        }
        
        .diff-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.13);
        }

        .diff-symbol {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72%;
            height: 72%;
            transform: rotate(var(--symbol-rotation, 0deg)) scale(var(--symbol-scale, 1));
            filter: saturate(var(--symbol-saturation, 1));
        }

        .diff-item.diff-pattern .diff-symbol {
            color: transparent;
            border-radius: 14px;
            background:
                repeating-linear-gradient(45deg, var(--tile-accent, #14b8a6) 0 8px, rgba(20, 184, 166, 0.32) 8px 14px);
            box-shadow: inset 0 0 0 2px rgba(255,255,255,0.72);
        }

        .diff-item.found {
            background: #ecfdf5;
            border-color: #14b8a6;
            box-shadow: 0 14px 28px rgba(20, 184, 166, 0.22);
        }

        .diff-item.wrong {
            background: #fef2f2;
            border-color: #ef4444;
            animation: chainShake 0.3s ease;
        }
        
        /* 순서 정렬 */
        .sort-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
            margin: 0 auto 25px;
            padding: 10px;
        }
        
        .sort-item {
            width: calc(80px * var(--font-scale));
            height: calc(80px * var(--font-scale));
            font-size: calc(2rem * var(--font-scale));
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--secondary);
            color: white;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }
        .sort-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }
        
        .sort-item.clicked { background: var(--success); pointer-events: none; }
        .sort-item.wrong { background: var(--error); animation: shake 0.3s; }
        
        /* 방향 게임 */
        .arrow-display {
            width: min(360px, 92vw);
            min-height: 300px;
            text-align: center;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            border-radius: 18px;
            background: linear-gradient(135deg, #F7FBFF, #FFF7E6);
            border: 2px solid #C8DDF0;
            box-shadow: 0 12px 28px rgba(36, 74, 104, 0.12);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .dir-board {
            width: 100%;
            max-width: 288px;
            aspect-ratio: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
        }
        .dir-cell {
            border-radius: 14px;
            border: 2px solid #D8E7F4;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(2rem * var(--font-scale));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 12px rgba(36, 74, 104, 0.08);
        }
        .dir-center {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #2F80C5;
            color: #FFFFFF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: calc(1.1rem * var(--font-scale));
        }
        .dir-target {
            font-size: calc(2.5rem * var(--font-scale));
            filter: saturate(1.08) drop-shadow(0 4px 6px rgba(36, 74, 104, 0.18));
        }
        .dir-distractor {
            font-size: calc(2.1rem * var(--font-scale));
            opacity: 0.72;
            filter: grayscale(0.25);
        }
        .dir-ready {
            color: #365A76;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 900;
        }
        .swap-ready {
            color: #365A76;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 900;
        }
        .swap-board {
            width: 100%;
            max-width: 326px;
            aspect-ratio: 1;
            display: grid;
            grid-template-columns: repeat(var(--swap-size), 1fr);
            grid-template-rows: repeat(var(--swap-size), 1fr);
            gap: 9px;
        }
        .swap-cell {
            border-radius: 14px;
            border: 2px solid #9EC7E8;
            background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FF 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(2.2rem * var(--font-scale));
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 14px rgba(36, 74, 104, 0.13);
            transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
        }
        .swap-cell:hover {
            transform: translateY(-2px);
            background: linear-gradient(180deg, #FFF8E6 0%, #FFE8A8 100%);
            border-color: #E0A92E;
            box-shadow: 0 12px 24px rgba(224, 169, 46, 0.26);
        }
        .swap-cell span {
            filter: saturate(1.14) contrast(1.04) drop-shadow(0 4px 6px rgba(36, 74, 104, 0.24));
        }
        .arrow-display.dir-show {
            animation: dirShowPop 0.3s ease-out forwards;
        }
        .arrow-display.dir-hidden {
            animation: dirHideFade 0.3s ease-in forwards;
        }

        .direction-rule-hint {
            min-height: 42px;
            margin: 0 auto 10px;
            text-align: center;
            color: var(--text);
            font-size: 1.2rem;
            font-weight: 800;
        }

        .direction-rule-hint.reverse {
            color: var(--error);
        }
        @keyframes dirShowPop {
            0%   { opacity: 0; transform: scale(0.7); }
            60%  { opacity: 1; transform: scale(1.12); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes dirHideFade {
            0%   { opacity: 1; transform: scale(1); }
            100% { opacity: 0.3; transform: scale(0.85); }
        }
        
        .direction-btns {
            display: grid;
            grid-template-columns: repeat(3, calc(90px * var(--font-scale)));
            grid-template-rows: repeat(3, calc(90px * var(--font-scale)));
            gap: 15px;
            justify-content: center;
        }
        #directionControls {
            display: block;
        }
        
        .dir-btn {
            font-size: calc(2.5rem * var(--font-scale));
            border: none;
            border-radius: 15px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }
        
        .dir-btn:hover { 
            background: var(--primary-dark); 
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }
        .dir-btn:active {
            transform: scale(0.95);
        }
        .dir-btn.empty { background: transparent; cursor: default; box-shadow: none; }
        .dir-btn.inactive {
            visibility: hidden;
            pointer-events: none;
        }
        
        /* 단어 게임 */
        .word-display {
            text-align: center;
            padding: 0;
            background: transparent;
            border-radius: 0;
            margin-bottom: 20px;
            letter-spacing: 0;
            font-weight: 700;
        }

        #wordGame .word-display {
            font-size: calc(1rem * var(--font-scale));
        }

        .word-problem-card,
        .word-answer-card {
            width: min(760px, 100%);
            margin: 0 auto;
            padding: 24px;
            border-radius: 22px;
            background: linear-gradient(135deg, #fff7ed, #eff6ff);
            border: 3px solid rgba(33, 150, 243, 0.16);
            box-shadow: 0 14px 30px rgba(30, 64, 175, 0.1);
            display: grid;
            gap: 14px;
            place-items: center;
        }

        .word-type-pill {
            padding: 7px 14px;
            border-radius: 999px;
            background: #fff;
            color: #1d4ed8;
            border: 2px solid rgba(37, 99, 235, 0.16);
            font-size: calc(0.9rem * var(--font-scale));
            font-weight: 950;
        }

        .word-prompt {
            margin: 0;
            color: #1f2937;
            font-size: calc(1.25rem * var(--font-scale));
            font-weight: 900;
            line-height: 1.45;
            word-break: keep-all;
        }

        .word-blank {
            width: min(100%, 620px);
            padding: 18px;
            border-radius: 18px;
            background: #fff;
            color: #0f3057;
            border: 3px solid rgba(251, 140, 0, 0.25);
            font-size: calc(1.9rem * var(--font-scale));
            font-weight: 950;
            line-height: 1.35;
            letter-spacing: 0;
            word-break: keep-all;
        }

        .word-answer-card {
            color: #0f766e;
            font-size: calc(2rem * var(--font-scale));
            font-weight: 950;
        }
        
        .letter-input {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 10px;
        }
        
        .letter-btn {
            min-width: calc(112px * var(--font-scale));
            min-height: calc(64px * var(--font-scale));
            padding: 10px 18px;
            font-size: calc(1.25rem * var(--font-scale));
            font-weight: 700;
            border: 3px solid var(--primary);
            border-radius: 12px;
            background: white;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }

        #wordGame .letter-btn {
            min-width: calc(128px * var(--font-scale));
            min-height: calc(68px * var(--font-scale));
            font-size: calc(1.32rem * var(--font-scale));
        }
        
        .letter-btn:hover { 
            background: var(--primary); 
            color: white; 
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .letter-btn:active {
            transform: scale(0.95);
        }
        .letter-btn.used { background: #E0E0E0; pointer-events: none; border-color: #BDBDBD; }

        #reverseGame .reverse-display {
            font-size: calc(1rem * var(--font-scale));
            padding: 0;
            background: transparent;
            letter-spacing: 0;
        }

        .reverse-memory-card {
            width: min(760px, 100%);
            margin: 0 auto;
            padding: 24px;
            border-radius: 22px;
            background: linear-gradient(135deg, #eef2ff, #ecfdf5);
            border: 3px solid rgba(79, 70, 229, 0.18);
            box-shadow: 0 14px 30px rgba(30, 64, 175, 0.1);
            display: grid;
            gap: 12px;
            place-items: center;
        }

        .reverse-memory-card span {
            padding: 7px 14px;
            border-radius: 999px;
            background: #fff;
            color: #1d4ed8;
            border: 2px solid rgba(37, 99, 235, 0.16);
            font-size: calc(0.9rem * var(--font-scale));
            font-weight: 950;
        }

        .reverse-memory-card strong {
            width: min(100%, 640px);
            padding: 18px;
            border-radius: 18px;
            background: #fff;
            color: #172554;
            border: 3px solid rgba(16, 185, 129, 0.22);
            font-size: calc(2rem * var(--font-scale));
            font-weight: 950;
            line-height: 1.35;
            word-break: keep-all;
        }

        .reverse-memory-card em {
            color: #4b5563;
            font-size: calc(1rem * var(--font-scale));
            font-style: normal;
            font-weight: 800;
        }

        .reverse-memory-card.hidden strong {
            color: #0f766e;
            background: #f0fdfa;
        }

        #reverseInput {
            width: min(760px, 100%);
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 0;
            color: #0f3057;
            font-size: calc(1.6rem * var(--font-scale));
            font-weight: 950;
            line-height: 1.35;
            word-break: keep-all;
        }

        #reverseGame .reverse-token-btn {
            min-width: calc(104px * var(--font-scale));
            min-height: calc(64px * var(--font-scale));
            border-color: #4f46e5;
        }

        #reverseGame .reverse-token-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 지우기/다시하기 버튼 */
        .clear-action-btn {
            display: block;
            margin: 15px auto;
            padding: 15px 30px;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 700;
            background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
            color: white;
            border: 3px solid #FFCDD2;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
            animation: pulse-clear 2s infinite;
        }
        
        .clear-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(229, 57, 53, 0.4);
        }
        
        /* 카운팅 게임 */
        .counting-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            max-width: 760px;
            margin: 0 auto 20px;
            padding: 20px;
            background: linear-gradient(180deg, #fffaf0, #eef8ff);
            border: 3px solid rgba(33, 150, 243, 0.16);
            border-radius: var(--radius);
            box-shadow: 0 12px 28px rgba(30, 64, 175, 0.08);
        }
        
        .counting-item {
            min-height: 58px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: #fff;
            border: 2px solid rgba(33, 150, 243, 0.12);
            box-shadow: 0 4px 10px rgba(0,0,0,0.06);
            font-size: 2rem;
            text-align: center;
        }

        #countingGame #countTarget {
            width: min(760px, 100%);
            display: grid;
            gap: 10px;
            text-align: center;
            font-size: calc(1.28rem * var(--font-scale)) !important;
            padding: 14px 18px;
            border: 3px solid rgba(251, 140, 0, 0.28);
            border-radius: 16px;
            background: linear-gradient(135deg, #FFF8E1, #ECFDF5);
            color: #BF360C;
            font-weight: 900;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
            margin: 0 auto 15px;
        }

        #countingGame #countTarget strong {
            color: #0f3057;
            line-height: 1.35;
            word-break: keep-all;
        }

        .count-level-pill {
            justify-self: center;
            padding: 6px 13px;
            border-radius: 999px;
            background: #fff;
            color: #1d4ed8;
            border: 2px solid rgba(37, 99, 235, 0.16);
            font-size: calc(0.88rem * var(--font-scale));
            font-weight: 950;
        }

        #countingGame .counting-item {
            font-size: calc(2rem * 1.2);
        }

        .count-bundle,
        .count-basket-card {
            min-height: 140px;
            padding: 14px;
            border-radius: 18px;
            background: #fff;
            border: 3px solid rgba(33, 150, 243, 0.16);
            box-shadow: 0 8px 18px rgba(30, 64, 175, 0.09);
            display: grid;
            place-items: center;
            gap: 8px;
            text-align: center;
        }

        .count-bundle-items {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
            max-width: 170px;
        }

        .count-bundle-items span,
        .count-basket-card span {
            font-size: calc(1.7rem * var(--font-scale));
            line-height: 1;
        }

        .count-bundle strong,
        .count-basket-card strong {
            color: #1565C0;
            font-weight: 950;
        }

        .count-basket-card em {
            padding: 5px 13px;
            border-radius: 999px;
            background: #FEF3C7;
            color: #92400E;
            font-style: normal;
            font-weight: 950;
            font-size: calc(1.05rem * var(--font-scale));
        }
        
        .count-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            padding: 10px;
        }
        
        .count-btn {
            width: calc(90px * var(--font-scale));
            height: calc(90px * var(--font-scale));
            font-size: calc(2.2rem * var(--font-scale));
            font-weight: 700;
            border: 4px solid var(--primary);
            border-radius: 18px;
            background: white;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }
        
        .count-btn:hover { 
            background: var(--primary); 
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
        }
        .count-btn:active {
            transform: scale(0.95);
        }

        /* 개수 세기: 정답 버튼 20% 축소 */
        #countingGame .count-btn {
            width: calc(90px * var(--font-scale) * 0.8);
            height: calc(90px * var(--font-scale) * 0.8);
            font-size: calc(2.2rem * var(--font-scale) * 0.8);
            border-width: calc(4px * 0.8);
            border-radius: calc(18px * 0.8);
        }
        
        /* 짝 연결 게임 */
        .pair-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            max-width: 720px;
            margin: 0 auto 25px;
            align-items: start;
        }
        
        .pair-column {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px;
            border-radius: 18px;
            border: 2px solid rgba(36, 74, 104, 0.12);
        }
        #pairLeft { background: linear-gradient(180deg, #EEF7FF 0%, #F8FBFF 100%); }
        #pairRight { background: linear-gradient(180deg, #FFF7DF 0%, #FFFCF2 100%); }
        
        .pair-item {
            width: 100%;
            padding: 14px 12px;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 800;
            border: 3px solid #D8E4EF;
            border-radius: 14px;
            background: white;
            cursor: pointer;
            text-align: center;
            min-height: 74px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #244A68;
            box-shadow: 0 6px 16px rgba(36, 74, 104, 0.10);
            transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
        }
        
        .pair-item:hover {
            transform: translateY(-2px);
            border-color: #7DB7E8;
            box-shadow: 0 12px 24px rgba(36, 74, 104, 0.14);
        }

        .pair-icon {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            border-radius: 13px;
            background: #FFFFFF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: inset 0 0 0 1px rgba(36, 74, 104, 0.08);
        }

        .pair-label {
            flex: 1;
            line-height: 1.25;
            word-break: keep-all;
        }
        
        .pair-item.selected {
            border-color: #2F80C5;
            background: #E8F4FF;
            transform: scale(1.02);
            box-shadow: 0 0 0 4px rgba(47, 128, 197, 0.16), 0 12px 24px rgba(36, 74, 104, 0.14);
        }
        .pair-item.matched {
            border-color: #4FA66A;
            background: #E7F8EC;
            color: #245E37;
            pointer-events: none;
        }
        .pair-item.wrong { border-color: var(--error); animation: shake 0.3s; }
        
        /* 시간 맞추기 */
        .time-display {
            font-size: 5rem;
            text-align: center;
            padding: 30px;
            background: var(--background);
            border-radius: var(--radius);
            margin-bottom: 20px;
            font-weight: 700;
            font-family: monospace;
        }
        
        .time-target {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text-light);
        }
        
        .stop-btn {
            display: block;
            width: calc(220px * var(--font-scale));
            height: calc(220px * var(--font-scale));
            margin: 0 auto;
            border-radius: 50%;
            border: 6px solid rgba(255,255,255,0.3);
            background: var(--error);
            color: white;
            font-size: calc(1.7rem * var(--font-scale));
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4);
        }
        
        .stop-btn:hover { transform: scale(1.05); }
        
        /* 카테고리 분류 게임 */
        .category-display {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .category-title {
            font-size: calc(1.6rem * var(--font-scale));
            font-weight: 700;
            color: var(--primary-dark);
            padding: 20px;
            background: var(--background);
            border-radius: 15px;
            border: 3px solid var(--primary);
        }

        #categoryGame .category-title {
            display: inline-grid;
            gap: 6px;
            width: min(820px, 100%);
            background: linear-gradient(135deg, #EFF6FF, #ECFDF5);
            border: 3px solid rgba(37, 99, 235, 0.22);
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);
        }

        #categoryGame .category-title span {
            color: #1D4ED8;
            font-size: calc(0.95rem * var(--font-scale));
            font-weight: 950;
        }

        #categoryGame .category-title strong {
            color: #0F3057;
            font-size: calc(1.38rem * var(--font-scale));
            line-height: 1.3;
            word-break: keep-all;
        }

        #categoryGame .category-title em {
            color: #475569;
            font-style: normal;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 850;
        }
        
        .category-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            max-width: 450px;
            margin: 0 auto 20px;
        }

        #categoryGame .category-options {
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
            gap: 14px;
            max-width: 920px;
        }
        
        .category-item {
            padding: 18px 12px;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 600;
            border: 3px solid #E0E0E0;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        #categoryGame .category-item {
            min-height: 148px;
            flex-direction: column;
            gap: 10px;
            border: 3px solid rgba(33, 150, 243, 0.14);
            border-radius: 18px;
            background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
            box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
        }

        .category-card-icon {
            width: 72px;
            height: 72px;
            display: grid;
            place-items: center;
            border-radius: 20px;
            background: linear-gradient(135deg, #DBEAFE, #FEF3C7);
            border: 3px solid rgba(37, 99, 235, 0.12);
            font-size: calc(2.7rem * var(--font-scale));
            line-height: 1;
        }

        .category-card-label {
            color: #1F2937;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 950;
            line-height: 1.25;
            word-break: keep-all;
        }
        
        .category-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .category-item.selected {
            border-color: #1D4ED8;
            background: linear-gradient(180deg, #DBEAFE, #BFDBFE);
            color: #0F172A;
            transform: scale(1.04);
            box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22), 0 12px 24px rgba(30, 64, 175, 0.22);
        }

        #categoryGame .category-item.selected .category-card-icon {
            background: #FFFFFF;
            border-color: #2563EB;
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
        }

        #categoryGame .category-item.selected .category-card-label {
            color: #0B1F55;
        }

        #categoryGame .category-item.selected {
            border-color: #1D4ED8;
            background: linear-gradient(180deg, #DBEAFE, #BFDBFE);
            color: #0F172A;
            transform: scale(1.04);
            box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22), 0 12px 24px rgba(30, 64, 175, 0.22);
        }

        .category-item.locked {
            cursor: default;
            pointer-events: none;
        }
        
        .category-item.correct {
            border-color: var(--success);
            background: #C8E6C9;
        }
        
        .category-item.wrong {
            border-color: var(--error);
            background: #FFCDD2;
        }
        
        /* 이야기 순서 게임 */
        .story-display {
            text-align: center;
            margin-bottom: 15px;
        }
        
        .story-instruction {
            font-size: calc(1.3rem * var(--font-scale));
            font-weight: 600;
            color: var(--primary-dark);
        }

        /* 이야기 순서: 설명 굵고 눈에 띄게 */
        #storyGame .story-instruction {
            display: inline-block;
            font-size: calc(1.3rem * var(--font-scale) * 1.1);
            font-weight: 900;
            color: #1B5E20;
            background: #E8F5E9;
            border: 3px solid #43A047;
            border-radius: 14px;
            padding: 10px 14px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.12);
        }
        
        .story-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            max-width: 550px;
            margin: 0 auto 20px;
        }
        
        .story-card {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            font-size: 2.5rem;
            border: 4px solid #E0E0E0;
            border-radius: 15px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        /* 이야기 순서: 카드(이모지) 10% 확대 */
        #storyGame .story-card {
            font-size: calc(2.5rem * 1.1);
        }
        
        .story-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        }
        
        .story-card.selected {
            border-color: var(--primary);
            background: #E8F5E9;
        }
        
        .story-card.selected::after {
            content: attr(data-order);
            position: absolute;
            top: -10px;
            right: -10px;
            width: 28px;
            height: 28px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            font-size: 1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .story-card.correct {
            border-color: var(--success);
            background: #C8E6C9;
        }
        
        .story-card.wrong {
            border-color: var(--error);
            background: #FFCDD2;
        }
        
        .story-card .card-label {
            font-size: calc(0.85rem * var(--font-scale));
            margin-top: 5px;
            color: var(--text-light);
        }

        /* 이야기 순서: 카드(이모지) 안 설명 문구도 굵고 크게 */
        #storyGame .story-card .card-label {
            font-size: calc(0.85rem * var(--font-scale) * 1.3);
            font-weight: 800;
            color: #2E2E2E;
            margin-top: 8px;
        }

        #storyGame .story-instruction {
            display: inline-grid;
            gap: 5px;
            font-size: calc(1.08rem * var(--font-scale));
            background: linear-gradient(135deg, #E8F5E9, #EFF6FF);
            border: 3px solid rgba(67, 160, 71, 0.45);
            border-radius: 18px;
            padding: 14px 18px;
            max-width: min(760px, 100%);
        }

        #storyGame .story-instruction span {
            color: #1D4ED8;
            font-size: calc(0.9rem * var(--font-scale));
        }

        #storyGame .story-instruction strong {
            color: #0F3057;
            font-size: calc(1.35rem * var(--font-scale));
            line-height: 1.25;
        }

        #storyGame .story-instruction em {
            color: #475569;
            font-style: normal;
            font-size: calc(1rem * var(--font-scale));
            line-height: 1.35;
        }

        #storyGame .story-cards {
            grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
            gap: 16px;
            max-width: 920px;
        }

        #storyGame .story-card {
            aspect-ratio: auto;
            min-height: 190px;
            gap: 10px;
            padding: 16px;
            font-size: calc(1rem * var(--font-scale));
            border: 4px solid rgba(33, 150, 243, 0.14);
            border-radius: 18px;
            background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
            box-shadow: 0 10px 22px rgba(30, 64, 175, 0.08);
        }

        .story-card-visual {
            width: 86px;
            height: 86px;
            display: grid;
            place-items: center;
            border-radius: 22px;
            background: linear-gradient(135deg, #DBEAFE, #DCFCE7);
            border: 3px solid rgba(37, 99, 235, 0.12);
            font-size: calc(3.1rem * var(--font-scale));
            line-height: 1;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,0.75);
        }

        #storyGame .story-card .card-label {
            width: 100%;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 900;
            color: #1F2937;
            margin-top: 0;
            line-height: 1.3;
            word-break: keep-all;
            text-align: center;
        }
        
        .story-order {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .order-label {
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .order-display {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .order-item {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        @media (max-width: 600px) {
            .category-options {
                grid-template-columns: repeat(2, 1fr);
            }
            .story-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            .story-card {
                font-size: 2rem;
            }
        }
        
        /* ========== 새로운 9종 게임 CSS ========== */
        
        /* 17. 미로 탈출 */
        .maze-container {
            display: grid;
            gap: 3px;
            justify-content: center;
            margin: 15px auto;
            background: linear-gradient(180deg, #EAF5FF 0%, #F0FBF5 100%);
            border: 2px solid #B7D5F0;
            padding: 12px;
            border-radius: 18px;
            max-width: 100%;
            overflow: auto;
            width: fit-content;
            box-shadow: 0 10px 24px rgba(36, 74, 104, 0.14);
        }
        .maze-ready {
            color: #244A68;
            text-align: center;
            padding: 30px;
            font-weight: 800;
        }
        .maze-cell {
            width: var(--maze-cell-size, 42px);
            height: var(--maze-cell-size, 42px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--maze-cell-size, 42px) * 0.55);
            border-radius: 8px;
            font-weight: 900;
            transition: transform 0.12s ease, background 0.16s ease;
        }
        .maze-cell.wall {
            background: #6B7A90;
            box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);
        }
        .maze-cell.path { background: #FFFFFF; }
        .maze-cell.trail { background: #DFF4FF; }
        .maze-cell.player {
            background: #FFE082;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
            transform: scale(1.05);
        }
        .maze-cell.goal {
            background: #C8F7D4;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
        }
        .maze-cell.goal.locked {
            background: #E8EDF5;
            color: #64748B;
        }
        .maze-cell.key {
            background: #FFF2B8;
            box-shadow: 0 0 0 2px rgba(231, 200, 91, 0.25);
        }
        .maze-cell.trap {
            background: #FFE4E6;
            color: #BE123C;
            font-size: calc(var(--maze-cell-size, 42px) * 0.48);
        }
        .maze-cell.hint {
            background: #FDE68A;
            color: #8A5A00;
            font-size: calc(var(--maze-cell-size, 42px) * 0.48);
            animation: mazeHintPulse 0.6s ease-in-out infinite alternate;
        }
        @keyframes mazeHintPulse {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }
        .maze-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin: 15px 0;
        }
        .maze-btn-row { display: flex; gap: 8px; }
        .maze-btn {
            width: 60px;
            height: 60px;
            font-size: 1.8rem;
            border: 2px solid #9FC3E6;
            border-radius: 15px;
            background: #EAF5FF;
            color: #244A68;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(36, 74, 104, 0.14);
        }
        .maze-btn:hover { transform: scale(1.1); }
        .maze-btn:active { transform: scale(0.95); }
        /* 18. 멜로디 기억 */
        .melody-piano {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 2px;
            width: fit-content;
            max-width: 100%;
            margin: 22px auto 20px;
            padding: 20px 22px 24px;
            border: 4px solid #2563eb;
            border-radius: 22px;
            background:
                radial-gradient(circle at 14% 16%, rgba(255,255,255,0.92) 0 12%, transparent 13%),
                linear-gradient(135deg, #dbeafe 0%, #bfdbfe 42%, #fde68a 100%);
            box-shadow: 0 20px 42px rgba(37, 99, 235, 0.28), inset 0 2px 0 rgba(255,255,255,0.85);
            overflow-x: auto;
        }
        .piano-key {
            position: relative;
            width: 58px;
            height: 146px;
            border: 2px solid rgba(15, 23, 42, 0.34);
            border-bottom-width: 6px;
            border-radius: 0 0 14px 14px;
            background: linear-gradient(180deg, #ffffff 0%, #fefce8 52%, #fde68a 100%);
            color: #111827;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 13px;
            box-shadow: inset 0 2px 0 #fff, inset 0 -12px 18px rgba(245, 158, 11, 0.22), 0 9px 16px rgba(15, 23, 42, 0.18);
        }
        .piano-key::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            width: 20px;
            height: 62px;
            border-radius: 0 0 8px 8px;
            background: linear-gradient(180deg, #1f2937, #020617);
            transform: translateX(-50%);
            box-shadow: 0 6px 12px rgba(15, 23, 42, 0.4);
        }
        .piano-key::after {
            content: '';
            position: absolute;
            right: 10px;
            bottom: 40px;
            left: 10px;
            height: 8px;
            border-radius: 999px;
            opacity: 1;
        }
        .piano-key:nth-child(1)::after { background: #ef4444; }
        .piano-key:nth-child(2)::after { background: #f97316; }
        .piano-key:nth-child(3)::after { background: #eab308; }
        .piano-key:nth-child(4)::after { background: #22c55e; }
        .piano-key:nth-child(5)::after { background: #0ea5e9; }
        .piano-key:nth-child(6)::after { background: #8b5cf6; }
        .piano-key:nth-child(7)::after { background: #ec4899; }
        .piano-key.active { transform: translateY(5px); filter: brightness(1.08); box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.36), inset 0 1px 0 #fff, inset 0 -6px 12px rgba(245, 158, 11, 0.28), 0 4px 10px rgba(15, 23, 42, 0.2); }
        .piano-key.hint { transform: translateY(2px); box-shadow: 0 0 0 7px rgba(250, 204, 21, 0.7), inset 0 1px 0 #fff, 0 8px 18px rgba(15, 23, 42, 0.18); }
        .piano-key:disabled { opacity: 0.64; cursor: not-allowed; }
        .melody-assist-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            min-height: 46px;
            margin: -5px 0 12px;
        }
        .melody-timer {
            min-width: 112px;
            color: #555;
            font-size: 1.05rem;
            font-weight: 700;
            text-align: center;
        }

        /* 멜로디 기억하기: 이모지/문자 30% 확대 */
        #melodyGame .game-header h2 {
            font-size: calc(2.2rem * 1.3);
        }
        #melodyGame #melodyInstruction {
            font-size: calc(1.2rem * 1.3) !important;
        }
        #melodyGame .tts-btn {
            font-size: calc(1.1rem * 1.3);
        }
        #melodyGame .tts-btn .tts-icon {
            font-size: calc(1.4rem * 1.3);
        }
        #melodyGame .piano-key {
            width: calc(58px * 1.3);
            height: calc(146px * 1.3);
            font-size: calc(1rem * 1.3);
            padding-bottom: calc(13px * 1.3);
        }
        #melodyGame #melodyResult {
            font-size: calc(1.2rem * 1.3);
        }
        
        /* 19. 퍼즐 맞추기 */
        .puzzle-container {
            display: grid;
            gap: 3px;
            justify-content: center;
            margin: 15px auto;
            background: #333;
            padding: 8px;
            border-radius: 15px;
            max-width: 280px;
        }
        .puzzle-piece {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            background: var(--card-bg);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 700;
            color: var(--primary);
        }
        .puzzle-piece.empty { background: #444; cursor: default; }
        .puzzle-piece:not(.empty):hover { transform: scale(1.05); background: #E3F2FD; }
        
        /* 20. 보물 찾기 */
        .treasure-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            max-width: 320px;
            margin: 15px auto;
        }
        .treasure-cell {
            aspect-ratio: 1;
            background: linear-gradient(145deg, #8B4513, #A0522D);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid #654321;
        }
        .treasure-cell:hover { transform: scale(1.05); }
        .treasure-cell.revealed { background: #FFF8DC; }
        .treasure-cell.found { background: linear-gradient(145deg, #FFD700, #FFA500); animation: treasureGlow 0.5s ease; }
        @keyframes treasureGlow {
            0%, 100% { box-shadow: 0 0 10px #FFD700; }
            50% { box-shadow: 0 0 30px #FFD700; }
        }
        
        /* 21. 그림자 찾기 */
        .shadow-main {
            text-align: center;
            padding: 22px;
            background: linear-gradient(135deg, #F7FBFF 0%, #EEF7E8 100%) !important;
            border: 2px solid #B8D8F0 !important;
            border-radius: 18px;
            margin: 16px auto;
            max-width: 560px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 28px rgba(36, 74, 104, 0.12);
        }
        .shadow-object {
            min-height: 128px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .shadow-object-card {
            width: 180px;
            min-height: 122px;
            padding: 14px;
            border-radius: 16px;
            background: #FFFFFF;
            border: 2px solid #D7E7F4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #244A68;
            font-size: 1.05rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 18px rgba(36, 74, 104, 0.12);
        }
        .shadow-real-object {
            font-size: 4.4rem;
            line-height: 1;
            filter: saturate(1.08) contrast(1.05) drop-shadow(0 5px 8px rgba(36, 74, 104, 0.22));
        }
        .shadow-ready {
            color: #49677E;
            font-weight: 800;
            font-size: 1.15rem;
        }
        .shadow-guide {
            margin: 8px 0 0;
            color: #365A76;
            font-size: 1.05rem;
            font-weight: 800;
        }
        body.high-contrast .shadow-main {
            background: #fff8dc !important;
            border-color: #FFD700 !important;
            color: #111 !important;
        }
        .shadow-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            max-width: 520px;
            margin: 16px auto;
        }
        .shadow-option {
            aspect-ratio: 1;
            background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FB 100%);
            border: 2px solid #BFD7EA;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
            color: #111;
            box-shadow: 0 8px 18px rgba(36, 74, 104, 0.1);
        }
        .shadow-option:hover {
            transform: translateY(-3px) scale(1.03);
            background: #FFF7D8;
            border-color: #F2B84B;
            box-shadow: 0 14px 26px rgba(242, 184, 75, 0.24);
        }
        .shadow-silhouette {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 3.9rem;
            line-height: 1;
            filter: grayscale(1) brightness(0.18) contrast(1.18);
            opacity: 0.68;
            text-shadow: none;
            transform-origin: center;
        }

        body.high-contrast .shadow-option {
            background: #fff2b3 !important;
            border-color: #111 !important;
            color: #111 !important;
        }
        body.high-contrast .shadow-option:hover { background: #ffe36e !important; }
        body.high-contrast .shadow-silhouette {
            filter: grayscale(1) brightness(0) contrast(1.5) !important;
            opacity: 1;
        }
        
        /* 22. 집중 타겟 */
        .focus-panel {
            width: min(100%, 620px);
            margin: 12px auto 16px;
            padding: 18px;
            border: 1px solid rgba(30, 41, 59, 0.12);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(37, 99, 235, 0.07)),
                #f8fafc;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        }

        .focus-rule-text {
            color: #1e293b;
            font-size: 1.04rem;
            font-weight: 850;
            text-align: center;
            margin: 0 0 14px;
            min-height: 1.5em;
        }

        .focus-arena {
            width: 100%;
            height: 320px;
            background:
                linear-gradient(rgba(148,163,184,0.16) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148,163,184,0.16) 1px, transparent 1px),
                linear-gradient(135deg, #f8fafc, #ecfeff);
            background-size: 34px 34px, 34px 34px, auto;
            border: 1px solid rgba(30, 41, 59, 0.12);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            margin: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
        }

        .focus-arena::after {
            content: "";
            position: absolute;
            inset: 12px;
            border: 1px solid rgba(20,184,166,0.14);
            border-radius: 12px;
            pointer-events: none;
        }

        .focus-target {
            position: absolute;
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.14s ease;
            animation: focusPulse 1.05s ease infinite;
            z-index: 1;
        }

        .focus-target:hover {
            transform: scale(1.12);
            z-index: 2;
        }

        .focus-token {
            border-radius: 14px;
            background: rgba(255,255,255,0.78);
            box-shadow: 0 10px 22px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.85);
        }

        .focus-token::before,
        .focus-token::after {
            content: "";
            position: absolute;
            display: block;
        }

        .focus-shape-circle::before {
            inset: 13px;
            border-radius: 50%;
            background: currentColor;
        }

        .focus-shape-square::before {
            inset: 14px;
            border-radius: 6px;
            background: currentColor;
        }

        .focus-shape-triangle::before {
            left: 14px;
            top: 12px;
            width: 28px;
            height: 30px;
            background: currentColor;
            clip-path: polygon(50% 0, 100% 100%, 0 100%);
        }

        .focus-shape-diamond::before {
            left: 15px;
            top: 15px;
            width: 25px;
            height: 25px;
            background: currentColor;
            transform: rotate(45deg);
            border-radius: 5px;
        }

        .focus-color-teal { color: #14b8a6; }
        .focus-color-blue { color: #2563eb; }
        .focus-color-amber { color: #f59e0b; }

        .focus-size-small::before {
            inset: 18px;
        }

        .focus-size-large::before {
            inset: 10px;
        }

        .focus-outline::before {
            background: transparent;
            border: 5px solid currentColor;
        }

        .focus-good {
            border: 2px solid rgba(20,184,166,0.68);
        }

        .focus-bad {
            border: 2px solid rgba(100,116,139,0.22);
            filter: saturate(0.92);
        }

        .focus-miss {
            background: #fef2f2;
            border-color: #ef4444;
        }

        .focus-hit {
            background: #ecfdf5;
            border-color: #14b8a6;
        }

        @keyframes focusPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        
        /* 23. 창문 기억하기 */
        .palace-room {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            max-width: 440px;
            margin: 18px auto;
            padding: 22px;
            background:
                radial-gradient(circle at 18% 12%, rgba(255,255,255,0.75) 0 9%, transparent 10%),
                linear-gradient(145deg, #fef3c7 0%, #fde68a 38%, #93c5fd 100%);
            border-radius: 24px;
            border: 5px solid #2563eb;
            box-shadow: 0 18px 42px rgba(37,99,235,0.28), inset 0 2px 0 rgba(255,255,255,0.8);
        }
        .palace-spot {
            aspect-ratio: 1;
            min-width: 0;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.15s;
        }
        /* 열린 창문 (물건 있음) */
        .palace-spot.open-window {
            background: linear-gradient(160deg, #ffffff 0%, #dbeafe 48%, #bfdbfe 100%);
            border: 4px solid #0284c7;
            box-shadow: 0 8px 18px rgba(2,132,199,0.28), inset 0 2px 5px rgba(255,255,255,0.9);
        }
        .palace-spot.open-window .window-frame {
            position: absolute;
            top: 2px; left: 2px; right: 2px; bottom: 2px;
            font-size: 3.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.22;
            pointer-events: none;
        }
        .palace-spot.open-window .window-item {
            position: relative;
            font-size: 3.35rem;
            z-index: 1;
            line-height: 1;
            transform: scale(1.05);
            filter: drop-shadow(0 4px 7px rgba(15,23,42,0.32));
        }
        /* 빈 창문 (물건 없음) */
        .palace-spot.empty-window {
            background: linear-gradient(160deg, #f8fafc 0%, #e0f2fe 100%);
            border: 4px dashed #60a5fa;
            opacity: 0.72;
        }
        .palace-spot.empty-window .window-frame {
            font-size: 3.3rem;
            opacity: 0.52;
        }
        /* 닫힌 창문 (숨김 상태) */
        .palace-spot.hidden-spot {
            background: linear-gradient(160deg, #1d4ed8 0%, #1e3a8a 56%, #312e81 100%);
            border: 4px solid #facc15;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(30,58,138,0.38), inset 0 1px 4px rgba(255,255,255,0.16);
        }
        .palace-spot.hidden-spot:hover {
            transform: scale(1.06);
            box-shadow: 0 9px 22px rgba(37,99,235,0.46);
        }
        .palace-spot.hint-zone {
            border-color: #f97316;
            box-shadow: 0 0 0 5px rgba(249,115,22,0.28), 0 10px 22px rgba(249,115,22,0.28);
            transform: scale(1.03);
        }
        .palace-spot.hidden-spot .window-closed {
            font-size: 3.45rem;
            opacity: 0.92;
            position: absolute;
            filter: drop-shadow(0 3px 5px rgba(0,0,0,0.32));
        }
        .palace-spot.hidden-spot .window-curtain {
            font-size: 1.65rem;
            position: absolute;
            bottom: 6px;
            right: 7px;
            opacity: 1;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
        }
        .palace-question {
            max-width: 520px;
            margin: 18px auto;
            padding: 22px;
            background: linear-gradient(135deg, #fefce8 0%, #dbeafe 100%);
            border-radius: 22px;
            border: 5px solid #2563eb;
            box-shadow: 0 14px 28px rgba(37,99,235,0.18);
        }
        .palace-timer-bar {
            max-width: 520px;
            height: 12px;
            margin: 10px auto 14px;
            border: 2px solid #2563eb;
            background: #dbeafe;
            box-shadow: 0 8px 16px rgba(37,99,235,0.14);
        }
        .palace-timer-bar .timer-fill {
            background: linear-gradient(90deg, #22c55e 0%, #facc15 55%, #ef4444 100%);
        }
        .palace-question #palaceAsk {
            text-align: center;
            font-size: 1.45rem;
            font-weight: 900;
            color: #1e3a8a;
            margin-bottom: 16px;
            line-height: 1.35;
        }
        .palace-ask-emoji {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            min-height: 56px;
            margin: 0 8px 6px 0;
            font-size: 2.85rem;
            line-height: 1;
            vertical-align: middle;
            border-radius: 17px;
            background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
            border: 4px solid #f59e0b;
            box-shadow: 0 10px 20px rgba(245,158,11,0.22);
            filter: drop-shadow(0 4px 6px rgba(15,23,42,0.22));
        }
        .palace-ask-place {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 999px;
            background: #dbeafe;
            color: #1d4ed8;
            border: 2px solid #60a5fa;
            font-size: 1.2em;
        }
        .palace-ask-hint {
            display: block;
            margin-top: 8px;
            color: #c2410c;
            font-size: 0.92em;
        }
        .palace-choices {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 0;
        }
        .palace-choice {
            min-height: 52px;
            padding: 9px 8px;
            font-size: 0.81rem;
            font-weight: 900;
            border: 4px solid #2563eb;
            border-radius: 13px;
            background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
            color: #1e40af;
            cursor: pointer;
            transition: all 0.18s;
            box-shadow: 0 6px 14px rgba(15,23,42,0.14);
        }
        .palace-choice:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(37,99,235,0.26);
        }
        
        /* 24. 도형 회전 */
        .rotate-main {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
        }
        .rotate-original {
            text-align: center;
            padding: 18px 22px;
            background: linear-gradient(180deg, #F0F7FF 0%, #ECFDF3 100%);
            border: 2px solid #B7D5F0;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(36, 74, 104, 0.12);
        }
        .rotate-panel-title {
            margin-bottom: 10px;
            font-size: calc(1rem * var(--font-scale));
            font-weight: 900;
            color: #244A68;
        }
        .rotate-shape {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        .rotate-ready {
            color: #64748B;
            font-weight: 800;
            font-size: calc(1.05rem * var(--font-scale));
        }
        .rotate-instruction {
            width: fit-content;
            max-width: 100%;
            margin: 10px auto;
            padding: 9px 18px;
            border-radius: 999px;
            background: #FFF7D6;
            border: 2px solid #E7C85B;
            color: #5F4A12;
            text-align: center;
            font-size: calc(1.08rem * var(--font-scale));
            font-weight: 900;
            word-break: keep-all;
        }
        .rotate-symbol-shape {
            width: 112px;
            height: 112px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5.6rem;
            line-height: 1;
            font-weight: 900;
            transform-origin: center;
            transition: transform 0.2s ease;
            filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.16));
        }
        .rotate-options {
            display: grid;
            grid-template-columns: repeat(4, minmax(92px, 1fr));
            gap: 12px;
            max-width: 520px;
            margin: 15px auto;
        }
        .rotate-option {
            aspect-ratio: 1;
            background: #FFFFFF;
            border: 2px solid #C9D8EA;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 5px 14px rgba(36, 74, 104, 0.12);
        }
        .rotate-option .rotate-symbol-shape {
            width: 74px;
            height: 74px;
            font-size: 3.8rem;
        }
        .rotate-option:hover { border-color: #3B82F6; transform: translateY(-2px); }
        @media (max-width: 540px) {
            .rotate-shape { width: 128px; height: 128px; }
            .rotate-symbol-shape { width: 96px; height: 96px; font-size: 4.8rem; }
            .rotate-options {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                max-width: 320px;
                gap: 10px;
            }
            .rotate-option .rotate-symbol-shape { width: 68px; height: 68px; font-size: 3.4rem; }
        }
        
        /* 25. 연쇄 반응 */
        .chain-arena {
            width: min(100%, 560px);
            min-height: 300px;
            background: linear-gradient(180deg, #F7FBFF 0%, #EEF7F1 100%);
            border: 2px solid #C9DFD3;
            border-radius: 16px;
            position: relative;
            margin: 15px auto;
            padding: 16px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
        }
        .chain-arena.chain-grid {
            display: grid;
            grid-template-columns: repeat(var(--chain-cols, 4), minmax(48px, 78px));
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
        .chain-ready {
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #446A54;
            font-size: calc(1.35rem * var(--font-scale));
            font-weight: 800;
        }
        .chain-progress {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            min-height: 40px;
            padding: 6px 8px;
            border-radius: 10px;
            background: #FFFFFF;
            border: 1px solid #D6E5DD;
        }
        .chain-step-dot {
            min-width: 34px;
            height: 30px;
            padding: 0 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #EDF2F7;
            color: #526170;
            font-size: calc(0.9rem * var(--font-scale));
            font-weight: 800;
        }
        .chain-step-dot.current {
            background: #FFE8B8;
            color: #8A5500;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
        }
        .chain-step-dot.done {
            background: #DDEFD9;
            color: #2F6B38;
        }
        .chain-number {
            width: 100%;
            aspect-ratio: 1 / 1;
            min-height: 0;
            background: #FFFFFF;
            border: 2px solid #BFD6C8;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(1.65rem * var(--font-scale));
            font-weight: 900;
            color: #244635;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(46, 79, 60, 0.12);
        }
        .chain-number:hover { transform: translateY(-2px); border-color: #5B9C68; }
        .chain-number.done {
            background: #DCEFD9;
            border-color: #68A85D;
            color: #2F6B38;
            opacity: 0.72;
            transform: scale(0.96);
        }
        .chain-number.chain-distractor {
            background: #F7F2EC;
            border-style: dashed;
            color: #8A7868;
        }
        .chain-number.wrong {
            background: #FFE2E2;
            border-color: #E85C5C;
            color: #B42323;
            animation: chainShake 0.3s ease;
        }
        @keyframes chainShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        @media (max-width: 540px) {
            .chain-arena { width: min(100%, 360px); padding: 12px; min-height: 280px; }
            .chain-arena.chain-grid {
                grid-template-columns: repeat(var(--chain-cols, 4), minmax(44px, 62px));
                gap: 8px;
            }
            .chain-number { min-height: 0; font-size: calc(1.35rem * var(--font-scale)); }
            .chain-step-dot { min-width: 30px; height: 28px; font-size: calc(0.78rem * var(--font-scale)); }
        }
        
        /* 게임 완료 */
        .game-complete { text-align: center; padding: 30px; }
        .game-complete h2 { font-size: 2rem; color: var(--primary); margin-bottom: 15px; }
        .game-complete .final-score { font-size: 3.5rem; font-weight: 900; color: var(--secondary); margin: 20px 0; }
        .game-complete p { font-size: 1.2rem; color: var(--text-light); margin-bottom: 25px; }
        
        /* 통계 */
        .today-stats {
            background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
            border-radius: var(--radius);
            padding: 20px;
            margin: 15px 0;
            text-align: center;
        }
        
        .today-stats h3 { font-size: 1.2rem; color: var(--secondary); margin-bottom: 12px; }
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .stat-item { background: white; padding: 12px; border-radius: 10px; }
        .stat-item .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
        .stat-item .stat-label { font-size: 0.85rem; color: var(--text-light); }
        
        /* 애니메이션 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            75% { transform: translateX(8px); }
        }
        
        .shake { animation: shake 0.4s ease; }
        .bounce { animation: bounce 0.4s ease; }
        @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
        
        .hidden { display: none !important; }
        
        /* 그래프 모달 */
        .graph-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
        }
        
        .graph-modal.active { display: flex; }
        
        .graph-container {
            background: white;
            border-radius: var(--radius);
            padding: 30px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow);
        }
        
        /* 제목 줄 → 훈련 리포트 전용 줄 → 탭 (버튼이 탭과 겹쳐 보이지 않도록 세로로 분리) */
        .graph-header {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            margin-bottom: 20px;
        }
        .graph-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            width: 100%;
        }
        .graph-header-top .close-graph-btn {
            flex-shrink: 0;
        }
        .graph-header-heading {
            margin: 0;
            font-size: 1.6rem;
            color: var(--primary-dark);
            font-weight: 700;
            line-height: 1.35;
            flex: 1;
            min-width: 0;
        }
        .graph-report-strip {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 14px;
            border-radius: 14px;
            background: linear-gradient(90deg, rgba(255, 213, 79, 0.35) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0.95) 100%);
            border: 2px solid rgba(255, 152, 0, 0.55);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        body.high-contrast .graph-report-strip {
            background: #2a2a00 !important;
            border-color: #FFD700 !important;
        }

        .graph-header-report-btn {
            flex-shrink: 0;
            appearance: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-weight: 900;
            font-size: calc(1rem * var(--font-scale));
            padding: 12px 20px;
            border-radius: 999px;
            color: #1a1a1a;
            background: linear-gradient(135deg, #fff9c4 0%, #FFD700 40%, #FF9800 100%);
            box-shadow: 0 6px 20px rgba(255, 152, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.5);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            white-space: nowrap;
        }
        .graph-header-report-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(255, 152, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.5);
        }
        .graph-header-report-btn:active {
            transform: translateY(0);
        }
        body.high-contrast .graph-header-report-btn {
            background: #FFD700 !important;
            color: #000 !important;
            box-shadow: none !important;
            border: 2px solid #000 !important;
        }
        
        .close-graph-btn {
            background: #757575;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            font-family: inherit;
        }
        
        .graph-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .graph-tab {
            padding: 10px 20px;
            border: 2px solid var(--primary);
            border-radius: 10px;
            background: white;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s;
        }
        
        .graph-tab.active, .graph-tab:hover {
            background: var(--primary);
            color: white;
        }

        /* 훈련 리포트 */
        .training-report-area { padding-top: 8px; }
        .report-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .report-toolbar-hint { font-size: 0.9rem; color: var(--text-light); }
        .training-report-sheet { background: #fff; border-radius: 12px; padding: 4px 0 8px; }
        .training-report-header { margin-bottom: 16px; border-bottom: 2px solid #e0e0e0; padding-bottom: 12px; }
        .training-report-title { margin: 0 0 8px; font-size: 1.35rem; color: var(--primary-dark); }
        .training-report-meta { margin: 0; color: var(--text-light); font-size: 0.95rem; }
        .training-report-lead { line-height: 1.65; color: var(--text-dark); margin: 12px 0 0; }
        .training-report-section-title {
            margin: 20px 0 10px;
            font-size: 1.08rem;
            color: #333;
            border-left: 4px solid var(--primary);
            padding-left: 10px;
        }
        .training-report-table-wrap { overflow-x: auto; margin-bottom: 6px; }
        .training-report-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
        .training-report-table th,
        .training-report-table td { border: 1px solid #bdbdbd; padding: 8px 10px; }
        .training-report-table th { background: #f0f0f0; font-weight: 700; text-align: left; }
        .training-report-table--compact { font-size: 0.86rem; }
        .training-report-list { margin: 8px 0 0; padding-left: 22px; line-height: 1.7; }
        .training-report-footnote { font-size: 0.82rem; color: #777; margin-top: 18px; }

        /* 현재 페이지 인쇄: display로 나머지 제거 → 빈 페이지(visibility 잔류 높이) 방지 */
        @media print {
            @page { margin: 12mm; size: auto; }

            html.training-report-printing,
            html.training-report-printing body {
                margin: 0 !important;
                padding: 0 !important;
                background: white !important;
                height: auto !important;
                min-height: 0 !important;
            }

            html.training-report-printing body > *:not(#graphModal) {
                display: none !important;
            }

            html.training-report-printing #graphModal {
                position: static !important;
                display: block !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                background: white !important;
                box-shadow: none !important;
                inset: auto !important;
            }

            html.training-report-printing #graphModal .graph-header,
            html.training-report-printing #graphModal .graph-tabs,
            html.training-report-printing #graphModal #scoreGraph,
            html.training-report-printing #graphModal #accuracyGraph,
            html.training-report-printing #graphModal #gamesGraph,
            html.training-report-printing #graphModal #historyList,
            html.training-report-printing #graphModal .stats-summary,
            html.training-report-printing #graphModal .report-no-print {
                display: none !important;
            }

            html.training-report-printing #graphModal .graph-container {
                max-height: none !important;
                overflow: visible !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
                border-radius: 0 !important;
            }

            html.training-report-printing #graphModal #reportGraph {
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                background: transparent !important;
                border: none !important;
            }

            html.training-report-printing #trainingReportPrint {
                max-width: 100% !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            html.training-report-printing #trainingReportPrint .training-report-section-title {
                page-break-after: avoid;
            }
            html.training-report-printing #trainingReportPrint .training-report-table {
                page-break-inside: auto;
            }
        }

        .chart-area {
            background: var(--background);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .chart-title {
            text-align: center;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--text-dark);
        }
        
        .bar-chart {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 200px;
            padding: 10px;
            border-left: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
            margin: 0 10px;
        }
        
        .bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            max-width: 60px;
        }
        
        .bar {
            width: 30px;
            background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 5px 5px 0 0;
            transition: height 0.5s ease;
            min-height: 5px;
        }
        
        .bar-value {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--primary);
        }
        
        .bar-label {
            font-size: 0.75rem;
            margin-top: 8px;
            color: var(--text-light);
            text-align: center;
            word-break: keep-all;
        }
        
        .game-detail-select {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .game-detail-select label {
            font-weight: bold;
            color: var(--primary);
        }
        
        .game-detail-select select {
            flex: 1;
            padding: 10px 15px;
            border: 2px solid var(--primary);
            border-radius: 10px;
            font-size: 1rem;
            background: white;
            cursor: pointer;
        }
        
        .game-detail-history {
            margin-top: 15px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .detail-record {
            background: white;
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid var(--primary);
        }
        
        .detail-record:nth-child(even) {
            border-left-color: var(--secondary);
        }
        
        .detail-info {
            flex: 1;
        }
        
        .detail-date {
            font-size: 0.85rem;
            color: var(--text-light);
            margin-bottom: 5px;
        }
        
        .detail-stats {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .detail-stats span {
            font-size: 0.9rem;
            color: var(--text);
        }
        
        .detail-stats span strong {
            color: var(--primary);
        }
        
        .detail-score {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--success);
            min-width: 70px;
            text-align: right;
        }
        
        .line-chart {
            position: relative;
            height: 200px;
            padding: 10px 10px 30px 40px;
        }
        
        .line-chart canvas {
            width: 100%;
            height: 100%;
        }
        
        .stats-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .summary-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        
        .summary-card .summary-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .summary-card .summary-label {
            font-size: 0.95rem;
            color: var(--text-light);
            margin-top: 5px;
        }
        
        .history-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: white;
            border-radius: 10px;
            margin-bottom: 8px;
        }
        
        .history-date {
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .history-score {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .history-details {
            font-size: 0.9rem;
            color: var(--text-light);
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: var(--text-light);
            font-size: 1.1rem;
        }
        
        /* 사용자 선택 */
        .user-select-section {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 2px dashed #E0E0E0;
        }
        
        .user-select-section h3 {
            font-size: 1.1rem;
            color: var(--text-light);
            margin-bottom: 15px;
        }
        
        .existing-users {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .user-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            background: var(--background);
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .user-card:hover {
            border-color: var(--primary);
            background: #E8F5E9;
        }
        
        .user-card.selected {
            border-color: var(--primary);
            background: #E8F5E9;
        }
        
        .user-card-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-card-icon {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(33,150,243,0.10);
            color: rgba(33,150,243,0.95);
            flex: 0 0 auto;
        }
        .user-card-icon svg { width: 22px; height: 22px; }
        
        .user-card-details {
            text-align: left;
        }
        
        .user-card-name {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-dark);
        }
        
        .user-card-meta {
            font-size: 0.9rem;
            color: var(--text-light);
        }
        
        .user-card-stats {
            text-align: right;
            font-size: 0.85rem;
            color: var(--text-light);
        }
        
        .user-card-score {
            font-weight: 700;
            color: var(--primary);
        }
        
        .delete-user-btn {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            padding: 5px;
            font-size: 1rem;
            margin-left: 10px;
        }
        
        .delete-user-btn:hover {
            color: var(--error);
        }
        
        .new-user-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            background: white;
            border: 2px dashed var(--primary);
            border-radius: 12px;
            color: var(--primary);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
        }
        
        .new-user-toggle:hover {
            background: var(--primary);
            color: white;
            border-style: solid;
        }
        
        .new-user-form {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px dashed #E0E0E0;
        }
        
        .new-user-form.active {
            display: block;
        }
        
        .new-user-form h3 {
            font-size: 1.1rem;
            color: var(--primary-dark);
            margin-bottom: 20px;
            text-align: center;
        }
        
        /* 폭죽 효과 */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }
        
        .confetti {
            position: absolute;
            width: 12px;
            height: 12px;
            opacity: 0;
            animation: confetti-fall 3s ease-out forwards;
        }
        
        .confetti.circle { border-radius: 50%; }
        .confetti.square { border-radius: 2px; }
        .confetti.star {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 12px solid currentColor;
            background: none !important;
        }
        
        @keyframes confetti-fall {
            0% {
                opacity: 1;
                transform: translateY(0) rotate(0deg) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(100vh) rotate(720deg) scale(0.5);
            }
        }
        
        /* 축하 오버레이 */
        .celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .celebration-overlay.active {
            opacity: 1;
        }
        
        .celebration-emoji {
            font-size: 8rem;
            animation: celebration-bounce 0.6s ease infinite;
        }
        
        @keyframes celebration-bounce {
            0%, 100% { transform: scale(1) rotate(-5deg); }
            50% { transform: scale(1.2) rotate(5deg); }
        }
        
        /* 음성 안내 버튼 */
        .tts-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 1.1rem;
            font-weight: 600;
            border: 3px solid #9C27B0;
            border-radius: 30px;
            background: linear-gradient(135deg, #E1BEE7, #F3E5F5);
            color: #7B1FA2;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            margin: 10px 5px;
        }
        
        .tts-btn:hover {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            transform: scale(1.05);
        }
        
        .tts-btn.speaking {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            animation: pulse-tts 1s infinite;
        }
        
        @keyframes pulse-tts {
            0%, 100% { box-shadow: 0 0 0 0 rgba(156, 39, 176, 0.4); }
            50% { box-shadow: 0 0 0 10px rgba(156, 39, 176, 0); }
        }
        
        .tts-btn .tts-icon {
            font-size: 1.4rem;
        }
        
        /* 자동 음성 토글 */
        .tts-auto-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 10px 0;
            padding: 8px 15px;
            background: #F3E5F5;
            border-radius: 20px;
            font-size: 1rem;
        }
        
        .tts-auto-toggle label {
            color: #7B1FA2;
            font-weight: 500;
        }
        
        label.tts-toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            cursor: pointer;
            vertical-align: middle;
        }
        
        .tts-toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        
        .tts-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.3s;
            border-radius: 26px;
        }
        
        .tts-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }
        
        .tts-toggle-switch input:checked + .tts-slider {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
        }
        
        .tts-toggle-switch input:checked + .tts-slider:before {
            transform: translateX(24px);
        }
        
        /* 다시보기 찬스 버튼 */
        .chance-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 1.1rem;
            font-weight: 600;
            border: 3px solid #FF5722;
            border-radius: 30px;
            background: linear-gradient(135deg, #FFCCBC, #FFAB91);
            color: #BF360C;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            margin: 8px 5px;
            position: relative;
        }
        
        .chance-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #FF5722, #E64A19);
            color: white;
            transform: scale(1.05);
        }
        
        .chance-btn:disabled {
            background: #E0E0E0;
            border-color: #BDBDBD;
            color: #9E9E9E;
            cursor: not-allowed;
            transform: none;
        }
        
        .chance-btn .chance-icon {
            font-size: 1.4rem;
        }
        
        .chance-btn .chance-count {
            background: #FF5722;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: bold;
        }
        
        .chance-btn:disabled .chance-count {
            background: #9E9E9E;
        }
        
        /* 찬스 사용 애니메이션 */
        @keyframes chanceUsed {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .chance-used {
            animation: chanceUsed 0.5s ease;
        }
        
        .tts-speed-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 15px;
        }
        
        .tts-speed-control label {
            font-size: 0.9rem;
            color: #666;
        }
        
        .tts-speed-control select {
            padding: 5px 10px;
            border: 2px solid #9C27B0;
            border-radius: 8px;
            font-size: 0.9rem;
            background: white;
            cursor: pointer;
        }
        
        /* 반응형 */
        @media (max-width: 600px) {
            header h1 { font-size: 1.6rem; }
            .welcome-card { padding: 25px 20px; }
            .main-menu { gap: 15px; }
            .menu-card { padding: 18px 12px; min-height: 120px; }
            .menu-card .icon { font-size: 2rem; }
            .menu-card h3 { font-size: 1rem; }
            .game-display { font-size: 2rem; padding: 20px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .tts-btn { font-size: 1rem; padding: 10px 15px; }
            .tts-auto-toggle { flex-wrap: wrap; }
            
            /* 버튼 크기 조절 */
            .num-pad { gap: 10px; max-width: 100%; }
            .num-btn { width: 65px; height: 65px; font-size: 1.4rem; }
            .calc-options { gap: 15px; }
            .calc-option { padding: 18px; min-height: 65px; }
            .color-options { gap: 15px; }
            .color-btn { padding: 20px 15px; min-height: 70px; }
            .letter-input { gap: 8px; }
            .letter-btn { width: 50px; height: 50px; font-size: 1.3rem; }
            .count-options { gap: 12px; }
            .count-btn { width: 70px; height: 70px; font-size: 1.8rem; }
            .direction-btns { gap: 10px; grid-template-columns: none; grid-template-rows: none; }
            .dir-btn { font-size: 2rem; }
            .pair-grid { gap: 12px; }
            .pair-column { padding: 10px; gap: 10px; }
            .pair-item { padding: 12px 8px; min-height: 64px; }
            .pair-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.65rem; }
            .pattern-grid { gap: 12px; width: min(90vw, 300px); max-width: 300px; }
            .sort-grid { gap: 12px; }
            .sort-item { width: 60px; height: 60px; font-size: 1.5rem; }
            .stop-btn { width: 180px; height: 180px; font-size: 1.4rem; }
            .btn { padding: 14px 30px; min-height: 50px; }
        }

        /* ── 칠교놀이 ──────────────────────────────── */
        .tanagram-wrap {
            display: flex;
            gap: 24px;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            margin: 8px 0;
        }
        .tanagram-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .tanagram-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .tanagram-label {
            font-size: 0.82rem;
            color: var(--text-light);
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        #tangramTarget {
            border: 2px dashed var(--primary-light);
            border-radius: 10px;
            background: #f0f4ff;
            display: block;
        }
        #tangramBoardWrap {
            border: 2px solid var(--primary);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        }
        #tangramBoard, #tangramPieces {
            display: block;
        }
        #tangramPieces {
            cursor: grab;
        }
        #tangramPieces:active {
            cursor: grabbing;
        }
        .tanagram-hint {
            font-size: 0.82rem;
            color: var(--primary-dark);
            text-align: center;
            padding: 6px 12px;
            background: #eef2ff;
            border-radius: 8px;
            border: 1px solid #c5cef0;
            max-width: 200px;
        }
        @media (max-width: 700px) {
            .tanagram-wrap { flex-direction: column; align-items: center; }
            #tangramTarget { width: 140px !important; height: 140px !important; }
            #tangramBoardWrap { width: 280px !important; height: 280px !important; }
            #tangramBoard, #tangramPieces { width: 280px !important; height: 280px !important; }
        }

        /* ── 그림 퍼즐 ──────────────────────────────── */
        .jigsaw-stage-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin: 10px 0;
        }
        .jigsaw-stage-label {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: 0.02em;
        }
        .jigsaw-stage-dots {
            display: flex;
            gap: 8px;
        }
        .jigsaw-stage-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #dde3f0;
            transition: background 0.2s;
        }
        .jigsaw-stage-dot.done  { background: var(--success); }
        .jigsaw-stage-dot.current { background: var(--primary); box-shadow: 0 0 0 3px rgba(46,84,144,0.25); }

        .jigsaw-wrap {
            display: grid;
            grid-template-columns: 207px 330px minmax(240px, auto);
            gap: 20px;
            align-items: flex-start;
            justify-content: center;
            margin: 8px 0;
            padding: 14px;
            border-radius: 16px;
            background: linear-gradient(180deg, #F6FAFF 0%, #F0FBF5 100%);
            border: 2px solid #D7E7F4;
        }
        .jigsaw-preview-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: 207px;
            padding: 10px;
            border-radius: 14px;
            background: #EAF5FF;
            border: 2px solid #9FC9EE;
        }
        .jigsaw-board-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 330px;
            padding: 10px;
            border-radius: 14px;
            background: #ECFDF3;
            border: 2px solid #91D5A8;
        }
        .jigsaw-tray-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 240px;
            max-width: 420px;
            padding: 10px;
            border-radius: 14px;
            background: #FFF7D6;
            border: 2px solid #E7C85B;
        }
        .jigsaw-section-label {
            font-size: 1.08rem;
            line-height: 1.35;
            color: #244A68;
            font-weight: 800;
            text-align: center;
        }
        #jigsawPreview {
            border: 3px solid #FFFFFF;
            border-radius: 12px;
            display: block;
            box-shadow: 0 0 0 2px #A9CFF0, 0 8px 18px rgba(36, 74, 104, 0.14);
        }
        .jigsaw-board-container {
            position: relative;
            width: 330px;
            height: 330px;
            flex-shrink: 0;
            border: 3px solid #5EA0D8;
            border-radius: 14px;
            overflow: hidden;
            background: #FFFFFF;
            box-shadow: 0 10px 24px rgba(36, 74, 104, 0.16);
        }
        .jigsaw-tray-container {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            display: flex;
            justify-content: flex-start;
            padding: 8px 0 4px;
        }
        #jigsawTray {
            display: block;
            cursor: grab;
            touch-action: none;
            border: 2px dashed #9FC3E6;
            border-radius: 12px;
            background: #FFFFFF;
        }
        #jigsawBoard, #jigsawPieces { display: block; }
        #jigsawPieces { cursor: grab; }
        #jigsawPieces:active { cursor: grabbing; }
        .jigsaw-hint-msg {
            font-size: 0.9rem;
            color: #244A68;
            text-align: center;
            padding: 6px 12px;
            background: #EAF5FF;
            border-radius: 8px;
            border: 1px solid #B7D5F0;
            max-width: 160px;
        }
        @media (max-width: 700px) {
            .jigsaw-wrap { grid-template-columns: 1fr; padding: 10px; }
            .jigsaw-preview-wrap { width: 100%; }
            #jigsawPreview { width: 138px !important; height: 138px !important; }
            .jigsaw-board-wrap { min-width: 0; }
            .jigsaw-tray-wrap { min-width: 0; max-width: 100%; }
            .jigsaw-board-container,
            #jigsawBoard { width: 300px !important; height: 300px !important; }
            .jigsaw-tray-container { width: min(100%, 300px) !important; justify-content: flex-start; }
        }

        /* ==================== 기억의 보물찾기 ==================== */
        .cm-theme-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin: 10px 0 12px;
        }
        .cm-theme-btn {
            padding: 8px 16px;
            border: 2px solid var(--primary-light);
            border-radius: 20px;
            background: #fff;
            color: var(--primary-dark);
            font-size: calc(0.9rem * var(--font-scale));
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .cm-theme-btn.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        .cm-round-info {
            display: block;
            text-align: center;
            font-size: calc(1.08rem * var(--font-scale));
            font-weight: 800;
            color: #5F452B;
            background: #FFF8E8;
            border: 2px solid #D9B86C;
            border-radius: 10px;
            padding: 9px 18px;
            margin: 8px auto 10px;
            max-width: 360px;
            white-space: pre-wrap;
        }
        .cm-preview-banner {
            text-align: center;
            font-size: calc(1.05rem * var(--font-scale));
            font-weight: 700;
            color: #5a3e00;
            background: #fff8e1;
            border: 2px solid #ffc107;
            border-radius: 12px;
            padding: 10px 16px;
            margin: 8px 0;
            animation: cmBannerPulse 1s ease-in-out infinite alternate;
        }
        @keyframes cmBannerPulse {
            from { opacity: 0.8; }
            to   { opacity: 1; }
        }
        .cm-result-msg {
            display: none !important;
        }
        .cm-result-correct { background: #e8f5e9; color: #2e7d32; border: 2px solid #a5d6a7; }
        .cm-result-wrong   { background: #fff3e0; color: #e65100; border: 2px solid #ffcc80; }
        .cm-result-levelup { background: #e3f2fd; color: #1565c0; border: 2px solid #90caf9; }

        /* 카드 그리드 */
        .cm-grid {
            --cm-cols: 4;
            --cm-card-size: clamp(56px, 17vw, 112px);
            display: grid;
            grid-template-columns: repeat(var(--cm-cols), var(--cm-card-size));
            gap: 12px;
            justify-content: center;
            align-items: center;
            margin: 12px auto;
            max-width: 100%;
            width: fit-content;
        }
        /* 카드 */
        .cm-card {
            aspect-ratio: 3/4;
            min-width: 0;
            max-width: none;
            width: var(--cm-card-size);
            cursor: pointer;
            perspective: 600px;
            position: relative;
            container-type: size;
        }
        .cm-card-spacer {
            aspect-ratio: 3/4;
            min-width: 0;
            max-width: none;
            width: var(--cm-card-size);
            visibility: hidden;
            pointer-events: none;
        }
        .cm-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.4s ease;
            border-radius: 14px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        }
        .cm-card.cm-revealed .cm-card-inner,
        .cm-card.cm-matched .cm-card-inner {
            transform: rotateY(180deg);
        }
        .cm-card-back, .cm-card-front {
            position: absolute;
            inset: 0;
            border-radius: 14px;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .cm-card-back {
            flex-direction: column;
            gap: 2px;
            padding: 4px 2px;
            color: #fff;
            overflow: hidden;
        }
        .cm-card-back::before {
            content: "";
            position: absolute;
            inset: 8px;
            border: 2px solid rgba(255,255,255,0.45);
            border-radius: 10px;
            pointer-events: none;
        }
        .cm-card-back::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 28% 22%, rgba(255,255,255,0.42) 0 9%, transparent 10%),
                radial-gradient(circle at 72% 78%, rgba(255,255,255,0.28) 0 8%, transparent 9%),
                linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,0.16) 45% 55%, transparent 56% 100%);
            pointer-events: none;
        }
        .cm-card-back.hwatu-1 { background: linear-gradient(160deg, #4F8A68, #1F5A45); }
        .cm-card-back.hwatu-2 { background: linear-gradient(160deg, #C47786, #8F3E58); }
        .cm-card-back.hwatu-3 { background: linear-gradient(160deg, #3E6EA8, #233F73); }
        .cm-card-back.hwatu-4 { background: linear-gradient(160deg, #6E7FA5, #3E4E70); }
        .cm-card-back.hwatu-5 { background: linear-gradient(160deg, #D49A48, #8A5A22); }
        .hwatu-sub {
            position: absolute;
            top: 10px;
            left: 12px;
            font-size: 13cqw;
            font-weight: 900;
            opacity: 0.62;
            line-height: 1;
            z-index: 1;
        }
        .hwatu-emoji {
            font-size: 4rem;        /* 폴백 */
            font-size: 52cqw;
            line-height: 1;
            z-index: 1;
            filter: saturate(1.08) contrast(1.05) drop-shadow(0 5px 8px rgba(0,0,0,0.26));
        }
        .hwatu-symbol {
            position: absolute;
            right: 12px;
            bottom: 10px;
            font-size: 18cqw;
            font-weight: 900;
            letter-spacing: 1px;
            line-height: 1;
            z-index: 1;
            text-shadow: 0 1px 4px rgba(0,0,0,0.28);
        }
        .cm-card-front {
            background:
                linear-gradient(180deg, #ffffff 0%, #F8F1E6 100%);
            border: 2px solid #C8A978;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 4px;
        }
        .cm-emoji {
            font-size: calc(2.85rem * var(--font-scale));
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: saturate(1.15) contrast(1.08) drop-shadow(0 4px 6px rgba(72,48,28,0.18));
        }
        .cm-name {
            font-size: calc(0.78rem * var(--font-scale));
            font-weight: 700;
            color: #5F452B;
            text-align: center;
            word-break: keep-all;
        }
        /* 매칭 완료 */
        .cm-card.cm-matched .cm-card-front {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-color: #66bb6a;
            opacity: 0.75;
        }
        .cm-card.cm-matched {
            pointer-events: none;
        }
        /* 힌트 반짝임 */
        .cm-card.cm-hint .cm-card-inner {
            animation: cmHintShine 0.4s ease-in-out 3;
        }
        @keyframes cmHintShine {
            0%   { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
            50%  { box-shadow: 0 0 0 8px rgba(255,193,7,0.7); }
            100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
        }
        @media (max-width: 540px) {
            .cm-grid { --cm-card-size: clamp(52px, 17vw, 82px); gap: 8px; max-width: 100%; }
            .cm-card,
            .cm-card-spacer { min-width: 0; max-width: none; }
            .cm-emoji { font-size: calc(1.7rem * var(--font-scale)); }
            .cm-name  { font-size: calc(0.65rem * var(--font-scale)); }
        }

        /* ==================== 브레인 추천 세션 ==================== */
        .brain-btn {
            background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%);
            color: #fff;
            box-shadow: 0 2px 8px rgba(123,31,162,0.35);
        }
        .brain-btn:hover { filter: brightness(1.1); }

        .brain-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.52);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            z-index: 2100;
        }
        .brain-modal-content {
            width: min(520px, 92vw);
            background: var(--card-bg);
            border-radius: 18px;
            padding: 24px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.38);
            border: 1px solid rgba(0,0,0,0.08);
        }
        .brain-modal-header {
            text-align: center;
            margin-bottom: 12px;
        }
        .brain-modal-header h2 {
            margin: 0;
            font-size: calc(1.4rem * var(--font-scale));
            font-weight: 900;
            background: linear-gradient(135deg, #7B1FA2, #AB47BC);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .brain-desc {
            text-align: center;
            color: var(--text-light);
            font-size: calc(1rem * var(--font-scale));
            margin: 0 0 16px;
            line-height: 1.6;
        }
        .brain-queue-preview {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        .brain-queue-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(0,0,0,0.03);
            border: 1.5px solid var(--cat-color, #ccc);
        }
        .brain-queue-num {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--cat-color, #888);
            color: #fff;
            font-weight: 900;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .brain-queue-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .brain-queue-info { flex: 1; }
        .brain-queue-name {
            font-weight: 800;
            font-size: calc(1rem * var(--font-scale));
            color: var(--text-primary);
        }
        .brain-queue-cat {
            font-size: calc(0.82rem * var(--font-scale));
            color: var(--cat-color, #888);
            font-weight: 600;
            margin-top: 2px;
        }
        .brain-footer {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 4px;
        }

        /* 카운트다운 */
        .brain-countdown-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            text-align: center;
        }
        .brain-game-done {
            font-size: calc(1.5rem * var(--font-scale));
            font-weight: 900;
            color: #4CAF50;
        }
        .brain-next-label {
            font-size: calc(0.95rem * var(--font-scale));
            color: var(--text-light);
            font-weight: 600;
        }
        .brain-next-name {
            font-size: calc(1.1rem * var(--font-scale));
            font-weight: 900;
            color: var(--text-primary);
        }
        .brain-count-num {
            font-size: calc(3.5rem * var(--font-scale));
            font-weight: 900;
            color: #7B1FA2;
            line-height: 1;
            min-width: 80px;
            text-align: center;
            animation: brain-pulse 1s ease-in-out infinite;
        }
        @keyframes brain-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50%       { transform: scale(1.15); opacity: 0.7; }
        }

        /* 결과 화면 */
        .brain-result-body { margin: 8px 0 16px; }
        .brain-result-total {
            text-align: center;
            font-size: calc(1.2rem * var(--font-scale));
            font-weight: 700;
            margin-bottom: 14px;
            color: var(--text-primary);
        }
        .brain-result-total strong {
            color: #7B1FA2;
            font-size: calc(1.5rem * var(--font-scale));
        }
        .brain-result-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .brain-result-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(0,0,0,0.03);
            border: 1.5px solid var(--cat-color, #ccc);
        }
        .brain-result-info { flex: 1; }
        .brain-result-score {
            font-weight: 900;
            font-size: calc(1.1rem * var(--font-scale));
            color: #7B1FA2;
        }

        @media (max-width: 480px) {
            .brain-modal-content { padding: 16px; }
            .brain-count-num { font-size: calc(2.8rem * var(--font-scale)); }
        }

        /* ==================== 2026 메인페이지/공통 테마 ==================== */
        :root {
            --primary: #2563eb;
            --primary-light: #3b82f6;
            --primary-dark: #1e40af;
            --secondary: #10b981;
            --secondary-light: #34d399;
            --accent: #f59e0b;
            --background: #f5f8ff;
            --card-bg: #ffffff;
            --text-dark: #172033;
            --text-light: #667085;
            --line: rgba(37, 99, 235, 0.14);
            --shadow: 0 22px 60px rgba(30, 64, 175, 0.14);
            --radius: 22px;
        }

        body {
            color: var(--text-dark);
            background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 48%, #ffffff 100%);
            overflow-x: hidden;
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }

        html {
            overflow-x: hidden;
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }

        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        body.app-page {
            height: 100vh;
            min-height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        body.app-page > header {
            flex: 0 0 auto;
        }

        body.app-page > .container {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        body.app-page > .container::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        .container {
            max-width: 1240px;
            padding: 0 22px 72px;
        }

        body.app-page > .container {
            --app-scrollbar-offset: 18px;
            --app-page-x: max(22px, calc((100vw - 1240px) / 2 + 22px));
            width: calc(100% + var(--app-scrollbar-offset));
            max-width: none;
            margin: 0 calc(var(--app-scrollbar-offset) * -1) 0 0;
            padding-left: var(--app-page-x);
            padding-right: calc(var(--app-page-x) + var(--app-scrollbar-offset));
        }

        header {
            position: sticky;
            top: 0;
            z-index: 50;
            width: 100%;
            max-width: none;
            min-height: 92px;
            margin: 0;
            padding: 18px max(22px, calc((100vw - 1240px) / 2 + 22px));
            background: rgba(255, 255, 255, 0.82);
            color: var(--text-dark);
            border-radius: 0;
            border-bottom: 1px solid rgba(37, 99, 235, 0.08);
            box-shadow: none;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            grid-template-columns: minmax(260px, 1fr) auto minmax(300px, 1fr);
        }

        header h1 {
            margin: 0;
            font-size: calc(1.28rem * var(--font-scale));
            letter-spacing: 0;
            color: var(--text-dark);
            font-weight: 950;
            line-height: 1.15;
        }

        header p {
            color: #516174;
            opacity: 1;
            font-size: calc(0.88rem * var(--font-scale));
            font-weight: 800;
            margin-top: 4px;
        }

        .header-brand-mark {
            width: 56px;
            height: 56px;
            box-sizing: border-box;
            border-radius: 14px;
            display: inline-grid;
            place-items: center;
            overflow: hidden;
            background: #fff;
            border: 2px solid rgba(37, 99, 235, 0.18);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
            flex: 0 0 auto;
            padding: 2px;
        }

        .header-brand-mark img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .header-logo {
            display: none;
        }

        .header-center-img {
            display: block;
            width: 72px;
            height: 72px;
            border-radius: 18px;
            object-fit: cover;
            background: #fff;
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.18);
            filter: none;
        }

        .landing-nav-links {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #2f405a;
            font-weight: 950;
            font-size: calc(0.97rem * var(--font-scale));
            white-space: nowrap;
        }

        .landing-nav-links a {
            color: inherit;
            text-decoration: none;
            min-height: 46px;
            padding: 0 16px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            background: rgba(234, 242, 255, 0.78);
            border: 1px solid rgba(37, 99, 235, 0.12);
            box-shadow: 0 8px 22px rgba(30, 64, 175, 0.08);
            transition: color 0.18s ease;
        }

        .landing-nav-links a:hover {
            color: #1d4ed8;
            background: #dbeafe;
        }

        .header-auth-btn,
        .header-util-btn,
        .header-badge-btn {
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.16);
            background: #eaf2ff;
            color: var(--primary-dark);
            box-shadow: none;
            letter-spacing: 0;
        }

        .header-auth-btn {
            width: auto;
            min-width: 90px;
            height: 46px;
            padding: 0 19px;
            font-weight: 900;
            font-size: calc(0.78rem * var(--font-scale));
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.1);
        }

        .header-size-btn {
            min-width: 102px;
            gap: 6px;
            background: #fff7ed;
            color: #9a3412;
            border-color: rgba(224, 123, 57, 0.32);
            box-shadow: 0 12px 26px rgba(224, 123, 57, 0.16);
        }

        .header-size-btn.active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, var(--secondary), #c2410c);
            box-shadow: 0 14px 30px rgba(224, 123, 57, 0.26);
        }

        .header-auth-btn.primary,
        .header-util-btn.active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
        }

        .header-auth-btn.primary:hover,
        .header-auth-btn:hover {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
        }

        .header-user-badge {
            color: var(--text-dark);
            background: rgba(255, 255, 255, 0.76);
            border: 1px solid var(--line);
            box-shadow: 0 14px 34px rgba(30, 64, 175, 0.08);
            gap: 10px;
            min-height: 46px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: calc(0.97rem * var(--font-scale));
            font-weight: 900;
            white-space: nowrap;
        }

        .header-user-badge #userGenderIcon {
            font-size: calc(1.25rem * var(--font-scale));
            line-height: 1;
        }

        .header-user-badge .difficulty-badge {
            min-height: 38px;
            padding: 0 14px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: calc(0.97rem * var(--font-scale));
            font-weight: 950;
        }

        .header-badge-btn,
        .header-badge-btn.home,
        .header-report-btn {
            min-height: 38px;
            padding: 0 16px;
            border-radius: 999px;
            color: var(--primary-dark);
            background: #eaf2ff;
            border-color: rgba(37, 99, 235, 0.18);
            box-shadow: 0 8px 22px rgba(30, 64, 175, 0.08);
            font-size: calc(0.97rem * var(--font-scale));
            font-weight: 950;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .header-badge-btn:hover,
        .header-badge-btn.home:hover,
        .header-report-btn:hover {
            background: #dbeafe;
        }

        .header-util-btn {
            width: 96px;
            height: 58px;
            color: var(--primary-dark);
            background: #eaf2ff;
            font-size: calc(0.86rem * var(--font-scale));
            font-weight: 950;
        }

        .welcome-screen.landing-page {
            display: block;
            width: 100%;
            height: auto;
            min-height: auto;
            margin: 0;
            background: transparent;
            border-radius: 0;
            overflow: visible;
        }

        .landing-page a {
            color: inherit;
            text-decoration: none;
        }

        .landing-hero {
            min-height: auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 42px;
            align-items: stretch;
            padding: clamp(34px, 6vh, 62px) 0 clamp(28px, 5vh, 52px);
            min-width: 0;
        }

        .landing-hero-copy {
            min-width: 0;
            width: 100%;
            max-width: 540px;
            min-height: 560px;
            justify-self: stretch;
            padding: 26px;
            border-radius: 28px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.88));
            border: 1px solid rgba(37, 99, 235, 0.14);
            box-shadow: 0 22px 48px rgba(30, 64, 175, 0.12);
            display: flex;
            flex-direction: column;
        }

        .landing-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, #dbeafe, #ccfbf1);
            color: #0f4f8f;
            border: 1px solid rgba(37, 99, 235, 0.16);
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.1);
            font-weight: 950;
            margin-bottom: 18px;
        }

        .landing-hero h2 {
            margin: 0;
            max-width: 680px;
            font-size: 3.35rem;
            line-height: 1.08;
            letter-spacing: 0;
            word-break: keep-all;
            overflow-wrap: normal;
        }

        .landing-hero h2 strong {
            display: block;
            color: var(--primary-dark);
        }

        .landing-hero-image-box {
            width: 100%;
            aspect-ratio: 838 / 486;
            border-radius: 24px;
            overflow: hidden;
            background: #fff;
            border: 4px solid rgba(255, 255, 255, 0.92);
            box-shadow: 0 22px 48px rgba(30, 64, 175, 0.18);
        }

        .landing-hero-image-box img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .landing-hero-desc {
            margin: 22px 0 0;
            max-width: 100%;
            color: #334155;
            font-size: 1.12rem;
            line-height: 1.68;
            font-weight: 800;
            word-break: normal;
            overflow-wrap: anywhere;
        }

        .landing-actions,
        .landing-trust-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 32px;
        }

        .landing-actions {
            max-width: 100%;
            margin-top: auto;
        }

        .landing-btn {
            border: 0;
            cursor: pointer;
            min-height: 52px;
            padding: 0 22px;
            border-radius: 999px;
            font-family: inherit;
            font-weight: 950;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1 1 210px;
            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .landing-btn:hover {
            transform: translateY(-2px);
        }

        .landing-btn-primary {
            color: #fff;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 16px 34px rgba(37, 99, 235, 0.32);
        }

        .landing-btn-soft {
            color: #1d4ed8;
            background: linear-gradient(135deg, #dbeafe, #eff6ff);
            border: 1px solid rgba(37, 99, 235, 0.18);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
        }

        .landing-btn-brain {
            color: #fff;
            background: linear-gradient(135deg, #16a34a, #0f766e);
            box-shadow: 0 16px 34px rgba(22, 163, 74, 0.3);
        }

        .landing-btn-white {
            color: #0f4f8f;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(37, 99, 235, 0.2);
            box-shadow: 0 14px 30px rgba(30, 64, 175, 0.14);
        }

        .landing-trust-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            max-width: 620px;
        }

        .landing-trust-item {
            padding: 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(37, 99, 235, 0.1);
            box-shadow: 0 14px 34px rgba(30, 64, 175, 0.08);
        }

        .landing-trust-item b {
            display: block;
            font-size: 1.35rem;
            color: var(--primary-dark);
        }

        .landing-trust-item span {
            display: block;
            margin-top: 5px;
            color: var(--text-light);
            font-weight: 700;
            line-height: 1.35;
        }

        .landing-hero-visual {
            position: relative;
            min-height: 560px;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
        }

        .landing-device-card {
            position: relative;
            width: 100%;
            max-width: 540px;
            min-height: 560px;
            padding: 22px;
            border-radius: 28px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.88));
            border: 1px solid rgba(255, 255, 255, 0.86);
            box-shadow: 0 24px 54px rgba(30, 64, 175, 0.16);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
        }

        .landing-device-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }

        .landing-status-pill {
            border-radius: 999px;
            background: #ecfdf5;
            color: #047857;
            padding: 9px 13px;
            font-weight: 900;
            white-space: nowrap;
        }

        .landing-brain-panel {
            border-radius: 22px;
            min-height: 250px;
            padding: 24px;
            background:
                linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(16, 185, 129, 0.86)),
                url('../assets/logo.png');
            background-size: cover;
            background-position: center;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .landing-brain-panel h3 {
            position: relative;
            margin: 0;
            color: #fff;
            font-size: 2rem;
            letter-spacing: 0;
            line-height: 1.2;
        }

        .landing-brain-panel p {
            position: relative;
            margin: 14px 0 0;
            font-size: 1.05rem;
            line-height: 1.65;
            opacity: 0.95;
            font-weight: 650;
        }

        .landing-mini-games {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 14px;
        }

        .landing-mini-game {
            min-height: 84px;
            padding: 16px;
            border-radius: 18px;
            background: #fff;
            border: 1px solid var(--line);
            color: var(--text-dark);
            box-shadow: 0 12px 28px rgba(30, 64, 175, 0.08);
            display: flex;
            align-items: center;
            gap: 12px;
            font: inherit;
            font-weight: 900;
            text-align: left;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .landing-mini-game:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(30, 64, 175, 0.13);
        }

        .landing-mini-game i {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: #f1f6ff;
            font-style: normal;
            font-size: 1.45rem;
            flex: 0 0 auto;
        }

        .landing-daily-reco {
            margin-top: 16px;
            padding: 22px 24px;
            border-radius: 22px;
            background: linear-gradient(135deg, #dbeafe, #eff6ff);
            border: 1px solid rgba(37, 99, 235, 0.26);
            box-shadow: 0 16px 34px rgba(37, 99, 235, 0.16);
        }

        .landing-daily-reco strong {
            display: block;
            color: #1d4ed8;
            font-size: 1.24rem;
            font-weight: 950;
        }

        .landing-daily-reco p {
            margin: 10px 0 0;
            color: #1e3a8a;
            font-size: 1.03rem;
            line-height: 1.55;
            font-weight: 850;
        }

        .landing-brain-reco {
            margin-top: 16px;
            padding: 26px;
            min-height: 150px;
            border-radius: 22px;
            background: linear-gradient(135deg, #dcfce7, #ccfbf1);
            border: 1px solid rgba(22, 163, 74, 0.3);
            box-shadow: 0 16px 34px rgba(22, 101, 52, 0.16);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1 1 auto;
        }

        .landing-brain-reco strong {
            display: block;
            color: #166534;
            font-size: 1.34rem;
            font-weight: 950;
        }

        .landing-brain-reco p {
            margin: 12px 0 0;
            color: #065f46;
            font-size: 1.05rem;
            line-height: 1.6;
            font-weight: 850;
        }

        .landing-section {
            padding: 64px 0 20px;
        }

        .landing-section-title {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 20px;
            margin-bottom: 22px;
        }

        .landing-section-title h2,
        .landing-cta h2 {
            margin: 0;
            font-size: 2.65rem;
            line-height: 1.16;
            letter-spacing: 0;
            color: #0f1f35;
        }

        .landing-section-title p,
        .landing-cta p {
            margin: 10px 0 0;
            color: #475569;
            font-size: 1.08rem;
            font-weight: 800;
            line-height: 1.6;
        }

        .landing-section-title .landing-session-note {
            color: #1d4ed8;
            font-weight: 850;
        }

        .landing-category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .landing-category-card {
            position: relative;
            padding: 24px;
            min-height: 260px;
            border-radius: 22px;
            background: linear-gradient(145deg, var(--tone, rgba(239, 246, 255, 0.9)), rgba(255, 255, 255, 0.96) 66%);
            border: 1px solid rgba(37, 99, 235, 0.16);
            box-shadow: 0 20px 46px rgba(30, 64, 175, 0.12);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }

        .landing-category-card:hover,
        .landing-category-card:focus-visible {
            transform: translateY(-7px);
            box-shadow: 0 28px 54px rgba(30, 64, 175, 0.14);
        }

        .landing-category-card:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.35);
            outline-offset: 3px;
        }

        .landing-category-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto auto;
            width: 100%;
            height: 10px;
            background: var(--tag-color, #1d4ed8);
        }

        .landing-category-icon {
            position: relative;
            width: 66px;
            height: 66px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            background: #fff;
            border: 2px solid rgba(37, 99, 235, 0.14);
            font-size: 2rem;
            box-shadow: 0 16px 30px rgba(30, 64, 175, 0.14);
        }

        .landing-category-card h3 {
            position: relative;
            margin: 22px 0 8px;
            font-size: 1.45rem;
            letter-spacing: 0;
            color: var(--tag-color, var(--text-dark));
            font-weight: 950;
        }

        .landing-category-card p {
            position: relative;
            margin: 0;
            color: #334155;
            font-size: 1.02rem;
            line-height: 1.65;
            font-weight: 800;
        }

        .landing-game-tags {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px;
        }

        .landing-game-tags span {
            padding: 8px 10px;
            border-radius: 999px;
            background: var(--tag-bg, #f3f7ff);
            color: var(--tag-color, #365173);
            font-size: 0.9rem;
            font-weight: 950;
            border: 1px solid rgba(37, 99, 235, 0.12);
        }

        .landing-process {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            align-items: stretch;
        }

        .landing-step-card {
            padding: 30px;
            border-radius: 22px;
            background:
                linear-gradient(135deg, rgba(15, 32, 63, 0.96), rgba(29, 78, 216, 0.9)),
                url('../assets/gsg.png');
            background-size: cover;
            background-position: center;
            color: #fff;
            box-shadow: 0 24px 54px rgba(15, 32, 63, 0.24);
            display: grid;
            gap: 18px;
        }

        .landing-step {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            align-items: start;
            padding: 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .landing-step-num {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: #fff;
            color: #1d4ed8;
            font-weight: 950;
        }

        .landing-step b {
            display: block;
            font-size: 1.15rem;
            margin-bottom: 5px;
            color: #fff;
        }

        .landing-step span {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
            font-weight: 800;
        }

        .landing-report-card {
            padding: 30px;
            border-radius: 22px;
            background: linear-gradient(145deg, #ffffff, #eff6ff);
            border: 1px solid rgba(37, 99, 235, 0.16);
            box-shadow: 0 20px 46px rgba(30, 64, 175, 0.12);
        }

        .landing-report-card h2 {
            margin: 0;
            font-size: 2rem;
            letter-spacing: 0;
            color: #102a5c;
        }

        .landing-report-card p {
            color: #334155;
            line-height: 1.7;
            font-weight: 800;
        }

        .landing-report-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 18px;
        }

        .landing-report-box {
            padding: 20px;
            border-radius: 18px;
            background: #fff;
            border: 1px solid rgba(37, 99, 235, 0.14);
            box-shadow: 0 12px 26px rgba(30, 64, 175, 0.08);
        }

        .landing-report-box b {
            display: block;
            font-size: 1.9rem;
            color: #1d4ed8;
        }

        .landing-report-box span {
            display: block;
            margin-top: 6px;
            color: #334155;
            font-weight: 900;
        }

        .landing-cta {
            margin-top: 64px;
            padding: 44px;
            border-radius: 28px;
            background:
                linear-gradient(135deg, rgba(29, 78, 216, 0.94), rgba(5, 150, 105, 0.9)),
                url('../assets/gsg.png');
            background-size: cover;
            background-position: center;
            color: #fff;
            box-shadow: 0 24px 54px rgba(15, 76, 129, 0.24);
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 22px;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .landing-cta h2 {
            color: #fff;
        }

        .landing-cta p {
            color: rgba(255, 255, 255, 0.94);
            text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
        }

        .landing-cta .landing-btn-white {
            color: #0f4f8f;
            border-color: rgba(255, 255, 255, 0.72);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
        }

        .landing-footer {
            width: min(1180px, 100%);
            margin: 28px auto 0;
            padding: 24px 0 4px;
            border-top: 1px solid rgba(111, 160, 186, 0.18);
            color: #64748b;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 800;
        }

        .app-footer {
            width: min(1180px, 100%);
            margin: 30px auto 0;
            padding: 24px 0 8px;
            border-top: 1px solid rgba(111, 160, 186, 0.18);
            color: #64748b;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 800;
        }

        .principle-footer {
            width: min(1180px, 100%);
            margin: 28px auto 0;
            padding: 24px 0 4px;
            border-top: 1px solid rgba(111, 160, 186, 0.18);
            color: #64748b;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 800;
        }

        .game-screen.active ~ .app-footer {
            display: none;
        }

        #welcomeScreen:not(.hidden) ~ .app-footer,
        #authScreen:not(.hidden) ~ .app-footer,
        #mainContent.hidden ~ .app-footer {
            display: none !important;
        }

        .landing-reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .landing-reveal.on {
            opacity: 1;
            transform: translateY(0);
        }

        .auth-screen {
            width: 100%;
            min-height: calc(100vh - 100px);
            padding: 52px 22px;
        }

        .welcome-card,
        .difficulty-modal-content,
        .badge-modal-content,
        .graph-container,
        .recommend-modal-content,
        .brain-modal-content,
        .game-screen {
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .welcome-card {
            border-radius: 24px;
            max-width: 520px;
        }

        .auth-back-btn,
        .auth-switch-hint span {
            color: var(--primary-dark);
        }

        .auth-tabs {
            border-color: var(--primary);
            border-radius: 14px;
        }

        .auth-tab {
            color: var(--primary-dark);
            font-weight: 900;
        }

        .auth-tab.active,
        .login-search-btn,
        .gender-btn.selected,
        .start-btn,
        .cat-btn.active,
        .graph-tab.active,
        .graph-tab:hover {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
        }

        .login-search-btn:hover {
            background: linear-gradient(135deg, var(--primary-dark), #172554);
        }

        .account-type-btn {
            color: var(--primary-dark);
            border-color: rgba(37, 99, 235, 0.14);
            box-shadow: 0 10px 26px rgba(30, 64, 175, 0.08);
        }

        .account-type-btn.active {
            border-color: rgba(16, 185, 129, 0.45);
            background: #ecfdf5;
            color: #047857;
        }

        .login-field-group input:focus,
        .form-group input:focus,
        .difficulty-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
        }

        .start-btn {
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
        }

        .start-btn:disabled {
            background: #b7c0cf;
            box-shadow: none;
        }

        .main-menu-wrapper.all-view {
            gap: 18px;
        }

        .category-nav,
        .menu-category,
        .today-stats {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--line);
            box-shadow: 0 18px 42px rgba(30, 64, 175, 0.08);
        }

        .cat-btn {
            border-color: var(--cat-color);
            color: var(--cat-color);
            font-weight: 900;
        }

        .recommend-btn {
            background: linear-gradient(135deg, #fef3c7 0%, var(--accent) 100%);
            color: #1f2937;
            box-shadow: 0 12px 26px rgba(245, 158, 11, 0.25);
        }

        .brain-btn {
            background: linear-gradient(135deg, #2563eb 0%, #10b981 100%);
            color: #fff;
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.25);
        }

        .menu-category::before {
            opacity: 0.05;
        }

        .menu-category-header {
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(37, 99, 235, 0.08);
            border-left-color: var(--cat-color);
        }

        .menu-card {
            border: 1px solid var(--line);
            box-shadow: 0 14px 34px rgba(30, 64, 175, 0.08);
        }

        .today-stats {
            text-align: left;
            padding: 24px;
        }

        .today-stats h3 {
            color: var(--primary-dark);
            font-weight: 900;
        }

        .stat-item,
        .summary-card,
        .score-item {
            background: #f6f9ff;
            border: 1px solid rgba(37, 99, 235, 0.08);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        }

        .btn-secondary {
            background: linear-gradient(135deg, var(--secondary), #059669);
        }

        .btn-back {
            background: #64748b;
        }

        .graph-header-heading,
        .training-report-title,
        .game-header h2,
        .difficulty-modal h3,
        .badge-modal-header h2 {
            color: var(--primary-dark);
        }

        .graph-report-strip,
        .chart-area {
            background: #f6f9ff;
            border-color: var(--line);
        }

        .graph-header-report-btn {
            background: linear-gradient(135deg, #fef3c7, var(--accent));
            color: #1f2937;
            box-shadow: 0 8px 22px rgba(245, 158, 11, 0.24);
        }

        .close-graph-btn {
            background: #64748b;
            border-radius: 999px;
        }

        .graph-tab {
            border-color: var(--primary);
            color: var(--primary-dark);
            border-radius: 999px;
        }

        @media (max-width: 1100px) {
            .landing-hero {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .landing-hero-visual {
                min-height: 500px;
            }

            .landing-hero-copy,
            .landing-device-card {
                min-height: auto;
                justify-self: center;
            }

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

            .landing-process {
                grid-template-columns: 1fr;
            }

            header {
                grid-template-columns: 1fr auto;
            }

            .landing-nav-links {
                display: none;
            }
        }

        @media (max-width: 720px) {
            body.app-page > .container {
                --app-page-x: 16px;
            }

            header {
                grid-template-columns: 1fr;
                justify-items: stretch;
                gap: 12px;
                text-align: left;
                padding-left: 16px;
                padding-right: 16px;
            }

            .header-left,
            .header-right {
                justify-self: stretch;
                width: 100%;
            }

            .header-right {
                display: flex;
                flex-wrap: wrap;
                justify-content: stretch;
                justify-self: center;
                gap: 8px;
                width: min(100%, 380px);
                max-width: min(380px, calc(100vw - 32px));
            }

            .header-auth-btn {
                flex: 1 1 92px;
                min-width: 0;
                padding: 0 10px;
                height: 43px;
                font-size: calc(0.7rem * var(--font-scale));
            }

            .header-size-btn {
                flex-basis: 100%;
            }

            .landing-hero {
                padding-top: 34px;
                width: 100%;
                max-width: 100%;
            }

            .landing-page,
            .landing-hero-copy,
            .landing-actions,
            .landing-section {
                width: min(100%, 340px);
                max-width: min(340px, calc(100vw - 32px));
                margin-left: auto;
                margin-right: auto;
            }

            .landing-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .landing-eyebrow {
                white-space: normal;
            }

            .landing-hero h2 {
                font-size: 2.15rem;
            }

            .landing-hero-desc {
                font-size: 1.08rem;
            }

            .landing-trust-row,
            .landing-category-grid,
            .landing-report-grid,
            .landing-mini-games {
                grid-template-columns: 1fr;
            }

            .landing-hero-visual {
                min-height: auto;
            }

            .landing-section-title {
                display: block;
            }

            .landing-section-title h2,
            .landing-cta h2 {
                font-size: 2rem;
            }

            .landing-cta {
                grid-template-columns: 1fr;
                padding: 30px;
            }

            .landing-btn {
                width: 100%;
                max-width: 100%;
                white-space: normal;
            }

            .auth-screen {
                padding: 32px 0;
            }
        }

        @media (max-width: 520px) {
            .container {
                padding-left: 16px;
                padding-right: 16px;
            }

            .landing-device-card,
            .landing-step-card,
            .landing-report-card {
                padding: 18px;
            }

            .landing-brain-panel h3 {
                font-size: 1.55rem;
            }
        }
        .leaderboard-modal {
            position: fixed;
            inset: 0;
            z-index: 1300;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(15, 23, 42, 0.55);
        }

        .leaderboard-modal.active {
            display: flex;
        }

        .leaderboard-panel {
            width: min(720px, calc(100vw - 32px));
            max-height: min(82vh, 760px);
            overflow: hidden;
            display: grid;
            grid-template-rows: auto auto auto minmax(0, 1fr);
            gap: 14px;
            padding: 22px;
            border-radius: 8px;
            border: 2px solid #c7d2fe;
            background: #ffffff;
            color: #14213d;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
        }

        .leaderboard-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .leaderboard-header h2 {
            margin: 0;
            color: #111827;
            font-size: calc(1.55rem * var(--font-scale));
            letter-spacing: 0;
        }

        .leaderboard-header p {
            margin: 6px 0 0;
            color: #526173;
            font-weight: 900;
        }

        .leaderboard-close {
            min-width: 84px;
            height: 44px;
            border: 2px solid #cbd5e1;
            border-radius: 8px;
            background: #ffffff;
            color: #334155;
            font-weight: 1000;
            cursor: pointer;
        }

        .leaderboard-tabs {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .leaderboard-tab {
            min-height: 46px;
            border: 2px solid #dbeafe;
            border-radius: 8px;
            background: #f8fbff;
            color: #1e3a5f;
            font-weight: 1000;
            cursor: pointer;
        }

        .leaderboard-tab.active {
            border-color: #2563eb;
            background: #2563eb;
            color: #ffffff;
        }

        .leaderboard-meta {
            color: #64748b;
            font-size: calc(0.95rem * var(--font-scale));
            font-weight: 800;
        }

        .leaderboard-list {
            overflow: auto;
            display: grid;
            gap: 10px;
            padding-right: 4px;
        }

        .leaderboard-row {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr) minmax(104px, auto);
            align-items: center;
            gap: 14px;
            min-height: 74px;
            padding: 12px 14px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: #ffffff;
        }

        .leaderboard-rank {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 8px;
            background: #eef6ff;
            color: #1d4ed8;
            font-weight: 1000;
            font-size: calc(1.05rem * var(--font-scale));
        }

        .leaderboard-main {
            min-width: 0;
            display: grid;
            gap: 4px;
        }

        .leaderboard-main strong {
            color: #111827;
            font-size: calc(1.05rem * var(--font-scale));
            overflow-wrap: anywhere;
        }

        .leaderboard-main span {
            color: #64748b;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .leaderboard-score {
            text-align: right;
            display: grid;
            gap: 4px;
        }

        .leaderboard-score strong {
            color: #047857;
            font-size: calc(1.25rem * var(--font-scale));
        }

        .leaderboard-score span {
            color: #64748b;
            font-weight: 800;
            white-space: nowrap;
        }

        .leaderboard-empty {
            min-height: 180px;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 24px;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            color: #526173;
            font-weight: 900;
            line-height: 1.6;
        }

        body.high-contrast .leaderboard-panel,
        body.high-contrast .leaderboard-row,
        body.high-contrast .leaderboard-close,
        body.high-contrast .leaderboard-tab {
            background: #111827;
            color: #ffffff;
            border-color: #facc15;
        }

        body.high-contrast .leaderboard-header h2,
        body.high-contrast .leaderboard-main strong {
            color: #ffffff;
        }

        body.high-contrast .leaderboard-tab.active,
        body.high-contrast .leaderboard-rank {
            background: #facc15;
            color: #111827;
            border-color: #facc15;
        }

        @media (max-width: 640px) {
            .leaderboard-modal {
                align-items: stretch;
                padding: 14px;
            }

            .leaderboard-panel {
                width: 100%;
                max-height: calc(100vh - 28px);
                padding: 16px;
            }

            .leaderboard-header {
                align-items: stretch;
                flex-direction: column;
            }

            .leaderboard-close {
                width: 100%;
            }

            .leaderboard-tabs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .leaderboard-row {
                grid-template-columns: 44px minmax(0, 1fr);
            }

            .leaderboard-score {
                grid-column: 2;
                text-align: left;
            }
        }

        .official-save-status {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 1200;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: min(520px, calc(100vw - 32px));
            padding: 14px 16px;
            border: 2px solid #b42318;
            border-radius: 8px;
            background: #fff;
            color: #7a271a;
            box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
            font-weight: 800;
        }

        .official-save-status.hidden {
            display: none;
        }

        .official-save-status button {
            min-height: 40px;
            flex: 0 0 auto;
        }