/* ============== FONTS ============== */
        /* Preload critical fonts with higher priority */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        /* ============== VARIABLES ============== */
        :root {
            /* Color scheme */
            --primary: #4CAF50;
            --primary-hover: #3E8E41;
            --background: #f8fbf8;
            --card-bg: #ffffff;
            --text: #212121;
            /* Using a slightly softer black for better readability */
            --success: #2E7D32;
            --error: #e53e3e;

            /* UI elements */
            /* Modern Shadow System - Less is More */
            --shadow-color: 0, 0, 0;
            --primary-shadow-color: 76, 175, 80;

            /* Three elevation levels with subtle differences */
            --shadow-sm: 0 0.125rem 0.25rem rgba(var(--shadow-color), 0.04);
            --shadow-md: 0 0.25rem 0.375rem rgba(var(--shadow-color), 0.06);
            --shadow-lg: 0 0.375rem 0.75rem rgba(var(--shadow-color), 0.07);

            /* Primary color shadows for interactive elements */
            --shadow-primary-sm: 0 0.125rem 0.25rem rgba(var(--primary-shadow-color), 0.1);
            --shadow-primary-md: 0 0.25rem 0.5rem rgba(var(--primary-shadow-color), 0.12);

            /* Keep for backward compatibility */
            --shadow: var(--shadow-md);
            --border-radius: 0.5rem;

            /* Typography */
            --font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;
            --base-font-size: 100%;
            /* 16px by default in most browsers */
            --body-line-height: 1.5;

            --gold: #FFD700;

        }

        /* ============== RESET ============== */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* ============== BASE STYLES ============== */
        html {
            font-size: var(--base-font-size);
            height: 100%;
        }

        body {
            font-family: var(--font-family);
            font-weight: var(--font-weight-bold);
            line-height: var(--body-line-height);
            font-size: 1rem;
            text-align: center;
            background-color: var(--background);
            color: var(--text);
            display: flex;
            flex-direction: column;
            position: relative;
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            max-width: 100%;
            margin: 0 auto;
        }



        .subtitle:last-of-type {
            margin-bottom: 1rem;
        }

        .progress {
            font-size: clamp(0.85rem, 2vw, 1rem);
            font-weight: 500;
            color: var(--text);
            margin-top: clamp(0.5rem, 1vw, 1rem);
            /* space above */
            margin-bottom: clamp(0.5rem, 1vw, 1rem);
            /* space below */
        }

        /* ============== TEXT STYLING ============== */
        .korean-text {
            font-family: var(--font-family);
            color: #888;
        }

        .current-number {
            font-family: var(--font-family);
            color: var(--primary);
            font-weight: var(--font-weight-bold);
        }

        .korean-word {
            font: var(--font-weight-bold) 3rem/1 var(--font-family);

        }

        .english-word {
            font: var(--font-weight-bold) 3rem/1 var(--font-family);
        }

        .korean-sentence {
            font: var(--font-weight-bold) 1.6rem/1 var(--font-family);
        }

        .english-sentence {
            font: var(--font-weight-bold) 2rem/1 var(--font-family);
        }

        /* Word controls typography */
        .english-word-subtitle,
        .english-word-controls-top,
        .english-word-controls-bottom,
        .english-word-difficulty-white,
        .english-word-difficulty-black {
            font: var(--font-weight-bold) clamp(1rem, 2.5vw, 1.25rem)/1 'Noto Sans Kr', sans-serif;
            display: inline;
        }

        .english-word-subtitle,
        .english-word-difficulty-black {
            color: var(--text);
        }

        .english-word-controls-bottom,
        .english-word-difficulty-white {
            color: white;
        }

        /* ============== LAYOUT CONTAINERS ============== */
        .content-area {
            padding: 3% clamp(0.75rem, 4%, 2.5rem);
            flex: 1;
            display: flex;
            flex-direction: column;
            max-width: 100%;
        }

        .controls-container {
            width: 95%;
            margin: 0 auto;
            padding: 0.3125rem 0;
            margin-top: calc(0.375rem + 0.5rem + 0.03125rem);
            margin-bottom: clamp(0.0625rem, 0vw, 0.125rem);
        }




        /* ============== FLASHCARD ============== */
        .flashcard {
            display: grid;
            width: 90%;
            height: 90%;
            position: relative;
            margin: 0 auto;
            padding: 0.3125rem 0;
            margin-top: calc(0.375rem + 0.5rem + 0.03125rem);
            margin-bottom: clamp(0.0625rem, 0vw, 0.125rem);
            cursor: pointer;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }

        .flashcard-front,
        .flashcard-back,
        .flashcard-sentence {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            backface-visibility: hidden;
            transition: opacity 0.3s;
            opacity: 0;
        }

        .flashcard-front {
            transform: rotateY(0deg);
        }

        .flashcard-back {
            transform: rotateY(180deg);
        }

        .flashcard-sentence {
            transform: rotateY(0deg);
            flex-direction: column;
        }

        .card-state-0 .flashcard-front,
        .card-state-1 .flashcard-back,
        .card-state-2 .flashcard-sentence {
            opacity: 1;
            z-index: 3;
        }

        .card-transition-overlay {
            position: absolute;
            inset: 0;
            background-color: var(--card-bg);
            opacity: 0;
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.3s;
            border-radius: var(--border-radius);
        }

        .card-transition-active .card-transition-overlay {
            opacity: 1;
            transition: opacity 0.3s ease-in;
        }

        /* ============== ANIMATIONS ============== */
        .flip-to-back {
            animation: flipToBack 0.3s forwards;
        }

        .flip-to-front {
            animation: flipToFront 0.3s forwards;
        }

        @keyframes flipToBack {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(180deg);
            }
        }

        @keyframes flipToFront {
            from {
                transform: rotateY(180deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        /* ============== CONTROLS ============== */
        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.2rem;
            margin: 0.2rem auto;
            width: 100%;
        }

        .control-btn {
            min-height: 4rem;
            padding: 0.75rem 0.5rem;
            border-radius: 0.875rem;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.25s ease;
            border: none;
            width: 100%;
            box-shadow: var(--shadow-sm);
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            color: var(--text);
        }

        .flip-btn,
        .audio-btn {
            background-color: white;
            border: 0.0625em solid rgba(76, 175, 80, 0.3);
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        .flip-btn:hover,
        .audio-btn:hover {
            background-color: rgba(76, 175, 80, 0.05);
            box-shadow: var(--shadow-md);
            transform: translateY(-0.0625rem);
        }

        .flip-btn:active,
        .audio-btn:active {
            transform: scale(0.98) translateY(0.0625rem);
            background-color: white;
            box-shadow: var(--shadow-sm);
        }

        .flip-btn:focus,
        .audio-btn:focus {
            background-color: white;
            outline: none;
        }

        .prev-btn,
        .next-btn {
            background-color: var(--primary);
            color: white;
            border: 0.0625em solid rgba(76, 175, 80, 0.3);
            outline: none;
            -webkit-tap-highlight-color: transparent;
            box-shadow: var(--shadow-primary-sm);
        }

        .prev-btn:hover,
        .next-btn:hover {
            background-color: var(--primary-hover);
            box-shadow: var(--shadow-primary-md);
            transform: translateY(-0.0625rem);
        }

        .prev-btn:active,
        .next-btn:active {
            transform: scale(0.98) translateY(0.0625rem);
            background-color: var(--primary);
            box-shadow: var(--shadow-primary-sm);
        }

        .prev-btn:focus,
        .next-btn:focus {
            background-color: var(--primary);
            outline: none;
        }

        .control-btn br {
            display: block;
            margin: 0.1rem 0;
            content: "";
        }

        .audio-btn-active {
            opacity: 0.7;
            transform: scale(0.95);
        }

        /* Additional CSS for difficulty selection modal */
        .difficulty-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .difficulty-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .difficulty-modal-content {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: clamp(1.25rem, 5vw, 1.875rem);
            box-shadow: var(--shadow-md);
            width: min(18.75rem, 90%);
            max-width: 90%;
            text-align: center;
            transform: translateY(1.25rem);
            transition: transform 0.3s ease;
        }

        .difficulty-modal-overlay.active .difficulty-modal-content {
            transform: translateY(0);
        }

        .difficulty-modal-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text);
            font-weight: var(--font-weight-bold);
        }

        .difficulty-btn-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .difficulty-btn {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            color: var(--text);
            width: 90%;
        }

        .difficulty-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .difficulty-btn.easy-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: var(--shadow-primary-sm);
            opacity: 95%;

        }

        .difficulty-btn.easy-btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-primary-md);
        }

        .difficulty-btn.hard-btn {
            background-color: white;
            color: var(--text);
            border: 0.0625rem solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .difficulty-btn.hard-btn:hover {
            background-color: rgba(76, 175, 80, 0.05);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-md);
        }




        .difficulty-kr {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 400;
            font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            cursor: pointer;
            transition: all 0.2s ease;
        }



        .difficulty-eng {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
        }

        /* OPTIMIZED: 1280px and up - Large Desktop Screens */
        @media (min-width: 80rem) {

            /* Constrain the main container for better desktop experience */
            .question-card,
            .options-container,
            .controls-container,
            .score-display {
                max-width: 50%;
                /* Prevent content from becoming too wide */
            }

            .flashcard {
                max-width: 45%;
                /* Prevent content from becoming too wide */
            }

            /* More reasonable font sizes for desktop */
            .option-btn {
                font: 600 1.375rem/1.2 'Inter', sans-serif !important;
                padding: 1.25rem 1.5rem;
                /* Slightly larger padding for better click targets */
                min-height: 4rem;
                /* Ensure good button height */
            }

            .korean-word {
                font: 600 3rem/1.2 'Noto Sans KR', sans-serif;
                /* Reduced from 4rem */
            }

            .korean-btn {
                font: 600 3rem/1.2 'Noto Sans KR', sans-serif;
                /* Reduced from 4rem */
            }

            /* Improve question label sizing */
            .question-label {
                font: 600 1.5rem/1.2 'Inter', sans-serif;
                margin-bottom: 1rem;
            }

            /* Better control button sizing */
            .control-btn {
                font: 600 1.25rem/1.4 var(--font-family);
                min-height: 4.5rem;
                padding: 1rem 1rem;
            }

            /* Optimize grid layouts for desktop */
            .options-container {
                gap: 0.5rem;
                /* Slightly larger gaps for desktop */
                padding: 1rem 0;
            }

            .controls {
                gap: 0.5rem;
                margin: 0.5rem auto;
            }

            /* Better spacing for desktop */
            .question-card {
                padding: 1rem 0;
                margin-top: 1rem;
            }
        }



        /* ============== MEDIA QUERIES ============== */
        /* Large screens (desktops) - 1024px and up */
        @media (max-width: 64rem) {

            .controls {
                grid-template-columns: 1fr;

            }


            .korean-word {
                font: var(--font-weight-bold) 3.5rem/1 var(--font-family);
            }

            .english-word {
                font: var(--font-weight-bold) 3.5rem/1 var(--font-family);
            }

            .korean-sentence {
                font: var(--font-weight-bold) 2.3rem/1 var(--font-family);
            }

            .english-sentence {
                font: var(--font-weight-bold) 2.7rem/1 var(--font-family);
            }



            /* Constrain the main container for better desktop experience */
            .question-card,
            .options-container,
            .controls-container,
            .score-display {
                max-width: 95%;
                /* Prevent content from becoming too wide */
            }

            .flashcard {
                max-width: 90%;
                /* Prevent content from becoming too wide */
            }


        }



        /* Medium screens (tablets) - 768px and down */
        @media (max-width: 48rem) {

            .controls {
                grid-template-columns: 1fr 1fr;

            }

            .korean-word {
                font: var(--font-weight-bold) 3rem/1 var(--font-family);
            }

            .english-word {
                font: var(--font-weight-bold) 3rem/1 var(--font-family);
            }

            .korean-sentence {
                font: var(--font-weight-bold) 1.8rem/1 var(--font-family);
            }

            .english-sentence {
                font: var(--font-weight-bold) 2.2rem/1 var(--font-family);
            }
        }




        /* Small screens (large phones) - 480px and down */
        @media (max-width: 30rem) {


            .controls {
                grid-template-columns: 1fr 1fr;

            }

            .korean-word {
                font: var(--font-weight-bold) 2.5rem/1 var(--font-family);
            }

            .english-word {
                font: var(--font-weight-bold) 2.5rem/1 var(--font-family);
            }

            .korean-sentence {
                font: var(--font-weight-bold) 1.3rem/1 var(--font-family);
            }

            .english-sentence {
                font: var(--font-weight-bold) 1.7rem/1 var(--font-family);
            }
        }

        /* Extra small screens (small phones) - 389px and down */
        @media (max-width: 24.3125rem) {


            .controls {
                grid-template-columns: 1fr 1fr;

            }

            .korean-word {
                font: var(--font-weight-bold) 2rem/1 var(--font-family);
            }

            .english-word {
                font: var(--font-weight-bold) 2rem/1 var(--font-family);
            }

            .korean-sentence {
                font: var(--font-weight-bold) 0.8rem/1 var(--font-family);
            }

            .english-sentence {
                font: var(--font-weight-bold) 1.2rem/1 var(--font-family);
            }


        }

















        /* ============== FONTS ============== */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        /* ============== VARIABLES ============== */
        :root {
            /* Color scheme */
            --primary: #4CAF50;
            --primary-hover: #3E8E41;
            --background: #f8fbf8;
            --card-bg: #ffffff;
            --text: #212121;
            --success: #2E7D32;
            --error: #e53e3e;

            /* Shadow System */
            --shadow-color: 0, 0, 0;
            --primary-shadow-color: 76, 175, 80;
            --shadow-sm: 0 0.125rem 0.25rem rgba(var(--shadow-color), 0.04);
            --shadow-md: 0 0.25rem 0.375rem rgba(var(--shadow-color), 0.06);
            --shadow-lg: 0 0.375rem 0.75rem rgba(var(--shadow-color), 0.07);
            --shadow-primary-sm: 0 0.125rem 0.25rem rgba(var(--primary-shadow-color), 0.1);
            --shadow-primary-md: 0 0.25rem 0.5rem rgba(var(--primary-shadow-color), 0.12);
            --shadow: var(--shadow-md);
            --border-radius: 0.5rem;

            /* Typography */
            --font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;
            --base-font-size: 100%;
            --body-line-height: 1.5;
        }

        /* ====== NAVIGATION ====== */
        /* ====== NAVIGATION ====== */
        .nav-area {
            width: 100%;
            /* Consistent padding across all pages */
            padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: clamp(0.5rem, 1.5vw, 1rem);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 0.0625rem solid rgba(0, 0, 0, .05);
            background-color: var(--primary);
            font-family: var(--font-family);
            box-shadow: var(--shadow-md);
            /* Fixed height for consistency */
            min-height: 70px;
            max-height: 70px;
            box-sizing: border-box;
        }

        .nav-btn {
            background: transparent;
            border: none;
            color: white;
            cursor: pointer;
            /* MATCHED to nav-title: 18px (mobile) to 24px (desktop) */
            font-size: clamp(1.125rem, 1rem + 0.3906vw, 1.5rem);
            font-weight: var(--font-weight-bold);
            /* Reduced padding to maintain consistent nav height */
            padding: clamp(0.25rem, 1vw, 0.5rem);
            border-radius: 0.375rem;
            transition: background-color 0.3s ease;
            white-space: nowrap;
        }

        .nav-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .nav-title {
            text-align: left;
            color: white;
            margin: 0;
            /* Fluid: 18px (mobile) to 24px (desktop) */
            font-size: clamp(1.125rem, 1rem + 0.3906vw, 1.5rem);
            font-weight: var(--font-weight-bold);
            line-height: 1.2;
        }

        .nav-arrow {
            font-weight: 700;
            display: inline-block;
            /* Slight vertical adjustment for better alignment */
            transform: translateY(-0.05em);
        }

        /* Align first child to left, last child to right */
        .nav-area>*:first-child {
            justify-self: start;
        }

        .nav-area>*:last-child {
            justify-self: end;
        }

        /* ====== RESPONSIVE NAVIGATION ====== */
        /* Desktop (1024px+) */
        @media (min-width: 64rem) {
            .nav-area {
                padding: 0.675rem 1.175rem;
                min-height: 70px;
                max-height: 70px;
            }

            .nav-btn {
                font-size: clamp(1.15rem, 2.5vw, 1.35rem);
                padding: 0.5rem;
            }

            .nav-title {
                font-size: clamp(1.15rem, 2.5vw, 1.35rem);
            }
        }

        /* Tablet (768px - 1024px) */
        @media (max-width: 64rem) {
            .nav-area {
                padding: 0.65rem 1.15rem;
                min-height: 68px;
                max-height: 68px;
            }

            .nav-btn {
                font-size: clamp(1.15rem, 2.5vw, 1.35rem);
                padding: 0.5rem;
            }

            .nav-title {
                font-size: clamp(1.15rem, 2.5vw, 1.35rem);
            }
        }

        /* Mobile (480px - 768px) */
        @media (max-width: 48rem) {
            .nav-area {
                padding: 0.6rem 1.1rem;
                min-height: 65px;
                max-height: 65px;
            }

            .nav-btn {
                font-size: clamp(1.12rem, 2.5vw, 1.32rem);
                padding: 0.5rem;
            }

            .nav-title {
                font-size: clamp(1.12rem, 2.5vw, 1.32rem);
            }
        }

        /* Small Mobile (389px - 480px) */
        @media (max-width: 30rem) {
            .nav-area {
                padding: 0.5rem 1rem;
                min-height: 60px;
                max-height: 60px;
            }

            .nav-btn {
                font-size: clamp(1rem, 2.5vw, 1.2rem);
                padding: 0.4rem;
            }

            .nav-title {
                font-size: clamp(1rem, 2.5vw, 1.2rem);
            }
        }

        /* Extra Small (< 389px) */
        @media (max-width: 24.3125rem) {
            .nav-area {
                min-height: 55px;
                max-height: 55px;
            }

            .nav-btn {
                font-size: clamp(0.95rem, 2.5vw, 1.1rem);
                padding: 0.35rem;
            }

            .nav-title {
                font-size: clamp(0.95rem, 2.5vw, 1.1rem);
            }
        }






        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        /* ====== VARIABLES ====== */
        :root {
            /* Color scheme */
            --primary: #4CAF50;
            --primary-hover: #3E8E41;
            --background: #f8fbf8;
            --card-bg: #ffffff;
            --text: #212121;
            --text-secondary: #888;

            /* Shadow System */
            --shadow-color: 0, 0, 0;
            --primary-shadow-color: 76, 175, 80;
            --shadow-sm: 0 0.125rem 0.25rem rgba(var(--shadow-color), 0.04);
            --shadow-md: 0 0.25rem 0.375rem rgba(var(--shadow-color), 0.06);
            --shadow-lg: 0 0.375rem 0.75rem rgba(var(--shadow-color), 0.07);
            --shadow-primary-sm: 0 0.125rem 0.25rem rgba(var(--primary-shadow-color), 0.1);
            --shadow-primary-md: 0 0.25rem 0.5rem rgba(var(--primary-shadow-color), 0.12);
            --shadow: var(--shadow-md);
            /* Backward compatibility */
            --border-radius: 0.5rem;

            /* Typography */
            --font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;
            --base-font-size: 100%;
            /* 16px by default in most browsers */
            --body-line-height: 1.5;
        }

        /* ====== BASE STYLES ====== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            font-size: var(--base-font-size);
            height: 100%;
        }

        body {
            font-family: var(--font-family);
            font-weight: var(--font-weight-bold);
            line-height: var(--body-line-height);
            font-size: 1rem;
            text-align: center;
            background-color: var(--background);
            color: var(--text);
            display: flex;
            flex-direction: column;
            position: relative;
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            max-width: 100%;
            margin: 0 auto;
        }




        /* ====== HEADER ====== */
        .header {
            display: grid;
            padding: 0.3125rem 0;
            margin-top: 25px;
            margin-bottom: 2.5px;
            font: var(--font-weight-bold) 1rem/1;
            color: var(--primary);
            -webkit-background-clip: text;
            background-clip: text;
        }



        .subtitle {



            margin: 0 auto 0.2rem;
            max-width: 90%;
            font: var(--font-weight-normal) 0.9rem/1.5 var(--font-family);
            color: var(--text-secondary);
            margin-bottom: 5px;

        }


        /* ====== MEDIA QUERIES ====== */
        /* 1280px and up */
        @media (min-width: 80rem) {



            .header {
                font-size: 1.375rem;
            }

            .subtitle {
                font-size: 1.275rem;
            }


        }

        /* 1024px to 1280px */
        @media (min-width: 64rem) and (max-width: 80rem) {



            .header {
                font-size: 1.375rem;
            }

            .subtitle {
                font-size: 1.275rem;
            }


        }

        /* 1024px */
        @media (max-width: 64rem) {



            .header {
                font-size: 1.35rem;
            }

            .subtitle {
                font-size: 1.25rem;
            }


        }

        /* 768px */
        @media (max-width: 48rem) {
            .header {
                font-size: 1.25rem;
            }

            .subtitle {
                font-size: 1.15rem;


            }
        }

        /* 480px */
        @media (max-width: 30rem) {
            .header {
                font-size: 1.1rem;
            }

            .subtitle {
                font-size: 1rem;
            }
        }



        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        /* ====== VARIABLES ====== */
        :root {
            /* Color scheme */
            --primary: #4CAF50;
            --primary-hover: #3E8E41;
            --background: #f8fbf8;
            --card-bg: #ffffff;
            --text: #212121;
            --text-secondary: #888;

            /* Shadow System */
            --shadow-color: 0, 0, 0;
            --primary-shadow-color: 76, 175, 80;
            --shadow-sm: 0 0.125rem 0.25rem rgba(var(--shadow-color), 0.04);
            --shadow-md: 0 0.25rem 0.375rem rgba(var(--shadow-color), 0.06);
            --shadow-lg: 0 0.375rem 0.75rem rgba(var(--shadow-color), 0.07);
            --shadow-primary-sm: 0 0.125rem 0.25rem rgba(var(--primary-shadow-color), 0.1);
            --shadow-primary-md: 0 0.25rem 0.5rem rgba(var(--primary-shadow-color), 0.12);
            --shadow: var(--shadow-md);
            /* Backward compatibility */
            --border-radius: 0.5rem;

            /* Typography */
            --font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;
            --base-font-size: 100%;
            /* 16px by default in most browsers */
            --body-line-height: 1.5;
        }

        /* ====== BASE STYLES ====== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            font-size: var(--base-font-size);
            height: 100%;
        }

        body {
            font-family: var(--font-family);
            font-weight: var(--font-weight-bold);
            line-height: var(--body-line-height);
            font-size: 1rem;
            text-align: center;
            background-color: var(--background);
            color: var(--text);
            display: flex;
            flex-direction: column;
            position: relative;
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            max-width: 100%;
            margin: 0 auto;
        }








        .subtitle-eng {
            color: var(--text);
            margin: 0 auto 0.2rem;
            max-width: 90%;
            font-size: 0.9rem;
        }

        .subtitle:last-of-type {
            margin-bottom: 1rem;
        }

        /* ====== CONTENT ====== */
        .content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .category-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            max-width: 75rem;
            margin: 0 auto;
            position: relative;
            padding: 5rem 1.25rem;
            gap: 2.25rem;
        }

        .category-card {
            width: 16.875rem;
            padding: 1.375rem;
            cursor: pointer;
            background-color: var(--card-bg);
            color: var(--text);
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            aspect-ratio: 3/2.5;
            position: relative;
            overflow: hidden;
            margin: -0.75rem;
            z-index: 1;
        }

        .category-card:hover {
            transform: translateY(-0.3125rem) scale(1.02);
            box-shadow: var(--shadow-lg);
            z-index: 10;
        }

        .category-card:active {
            transform: translateY(-0.3125rem) scale(1.02);
        }

        .icon {
            font-size: 2.2rem;
            margin-bottom: 0.625rem;
        }

        .card-title {
            color: var(--text-secondary);
            font-size: 1.2rem;
            margin-bottom: 0.25rem;
        }

        .card-description {
            font-size: 1rem;
            font-weight: var(--font-weight-bold);
            margin-bottom: 0.3125rem;
        }

        .card-examples {
            font-size: 0.95rem;
            color: var(--text-secondary);
            margin-top: 0.3125rem;
            font-style: italic;
        }

        /* ====== CARD OPTIONS ====== */
        .card-options {
            opacity: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.98));
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem;
            transition: opacity 0.3s ease;
            border-top: 0.0625rem solid rgba(0, 0, 0, 0.05);
        }

        .category-card:hover .card-options {
            opacity: 1;
        }

        .option-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: var(--font-weight-bold);
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            -webkit-tap-highlight-color: transparent;
            border: 0.0625rem solid rgba(76, 175, 80, 0.3);

        }

        .flashcards-btn {
            background-color: var(--primary);
            color: white;
            box-shadow: var(--shadow-primary-sm);
        }

        .flashcards-btn:hover {
            background-color: var(--primary-hover);
            box-shadow: var(--shadow-primary-md);
        }

        .test-btn {
            background-color: white;
            color: var(--primary);
            border: 0.0625rem solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .test-btn:hover {
            background-color: rgba(99, 102, 241, 0.05);
            box-shadow: var(--shadow-md);
        }

        /* ====== FOOTER ====== */
        .footer {
            margin-top: calc(0.375rem + 0.5rem + 0.03125rem);
            padding: 1.25rem 0 0.625rem;
            color: var(--text-secondary);
            width: 100%;
            clear: both;
        }

        .footer-text-kr {
            margin: 0 auto 0.2rem;
            max-width: 90%;
            font: var(--font-weight-normal) 0.9rem/1.5 var(--font-family);
            color: var(--text-secondary);
        }

        .footer-text-eng {
            color: var(--text);
            margin: 0 auto 0.2rem;
            max-width: 90%;
            font-size: 0.9rem;
        }

        /* ====== MENU MODAL ====== */
        .menu-modal-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.2);
            display: grid;
            place-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
        }

        .menu-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .menu-modal-content {
            background-color: var(--background);
            border-radius: var(--border-radius);
            padding: clamp(1.25rem, 5vw, 1.875rem);
            box-shadow: var(--shadow-md);
            width: 95%;
            text-align: center;
            transform: translateY(1.25rem);
            transition: transform 0.3s ease;
        }

        .menu-modal-overlay.active .menu-modal-content {
            transform: translateY(0);
        }

        .menu-modal-title {
            margin: 0 0 1.563rem 0;
            font: var(--font-weight-bold) clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            color: var(--text);
        }

        .menu-btn-container {
            display: grid;
            margin: 0 auto;
        }

        .menu-btn {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            color: var(--text);
        }

        .menu1-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: var(--shadow-primary-sm);
            opacity: 95%;
        }

        .menu1-btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-primary-md);
        }

        .menu1-btn:active {
            transform: translateY(0.0625rem);
            box-shadow: var(--shadow-primary-sm);
        }

        .menu2-btn {
            background-color: white;
            color: var(--text);
            border: 0.0625rem solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .menu2-btn:hover {
            background-color: rgba(76, 175, 80, 0.05);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-md);
        }

        .menu2-btn:active {
            transform: translateY(0.0625rem);
            box-shadow: var(--shadow-sm);
        }

        .korean-menu-text {
            font-weight: 400;
            font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
        }


        .difficulty-kr {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 400;
            font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            cursor: pointer;
            transition: all 0.2s ease;
        }



        .difficulty-eng {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
        }










        /* Additional CSS for difficulty selection modal */
        .difficulty-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .difficulty-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .difficulty-modal-content {
            background-color: var(--background);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            width: 80%;
            max-width: 400px;
            box-shadow: var(--shadow-lg);
            text-align: center;
            animation: modal-pop 0.3s ease forwards;
            font-family: var(--font-family);
        }

        .difficulty-modal-overlay.active .difficulty-modal-content {
            transform: translateY(0);
        }

        .difficulty-modal-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text);
            font-weight: var(--font-weight-bold);
        }

        .difficulty-btn-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .difficulty-btn {
            padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.875rem, 2.5vw, 1.125rem);
            border-radius: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font: 600 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-family);
            color: var(--text);
            width: 90%;

        }

        .difficulty-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .difficulty-btn.easy-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: var(--shadow-primary-sm);
            opacity: 95%;

        }

        .difficulty-btn.easy-btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-primary-md);
        }

        .difficulty-btn.hard-btn {
            background-color: white;
            color: var(--text);
            border: 0.0625rem solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .difficulty-btn.hard-btn:hover {
            background-color: rgba(76, 175, 80, 0.05);
            transform: translateY(-0.0625rem);
            box-shadow: var(--shadow-md);
        }



        @keyframes modal-pop {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }



        /* ====== MEDIA QUERIES ====== */
        /* 1280px and up */
        @media (min-width: 80rem) {

            .menu-modal-content {
                min-width: 53.5%;
            }

            .header {
                font-size: 1.375rem;
            }

            .subtitle,
            .subtitle-eng {
                font-size: 1.275rem;
            }

            .option-btn {
                font-size: 1.075rem;
            }

            .card-title {
                font-size: 1.25rem;
            }

            .card-description {
                font-size: 1.075rem;
            }

            .card-examples {
                font-size: 0.975rem;
            }

            .category-grid {
                padding: 2.7rem 0.75rem;
                gap: 1.65rem;
            }

            .category-card {
                width: 15.25rem;
                margin: -0.225rem;
                padding: 1.225rem;
            }

            .icon {
                font-size: 2.2rem;
            }

            .footer-text-kr,
            .footer-text-eng {
                font-size: clamp(1.025rem, 1.5vw, 1.125rem);
            }

            .menu-modal-content {
                width: 60%;
            }


            html {
                font-size: 87.5%;
                /* 14px instead of 16px */
            }
        }

        /* 1024px to 1280px */
        @media (min-width: 64rem) and (max-width: 80rem) {

            .menu-modal-content {
                min-width: 53.5%;
            }

            .header {
                font-size: 1.375rem;
            }

            .subtitle,
            .subtitle-eng {
                font-size: 1.275rem;
            }

            .option-btn {
                font-size: 1.075rem;
            }

            .card-title {
                font-size: 1.25rem;
            }

            .card-description {
                font-size: 1.075rem;
            }

            .card-examples {
                font-size: 0.975rem;
            }

            .category-grid {
                padding: 2.7rem 0.75rem;
                gap: 1.65rem;
            }

            .category-card {
                width: 15.25rem;
                margin: -0.225rem;
                padding: 1.225rem;
            }

            .icon {
                font-size: 2.2rem;
            }

            .footer-text-kr,
            .footer-text-eng {
                font-size: clamp(1.025rem, 1.5vw, 1.125rem);
            }

            .menu-modal-content {
                width: 65%;
            }
        }

        /* 1024px */
        @media (max-width: 64rem) {

            .menu-modal-content {
                min-width: 52%;
            }

            .header {
                font-size: 1.35rem;
            }

            .subtitle,
            .subtitle-eng {
                font-size: 1.25rem;
            }

            .option-btn {
                font-size: 1.05rem;
            }

            .card-title {
                font-size: 1.25rem;
            }

            .card-description {
                font-size: 1.05rem;
            }

            .card-examples {
                font-size: 0.95rem;
            }

            .category-grid {
                padding: 2.6rem 0.7rem;
                gap: 1.6rem;
            }

            .category-card {
                width: 15rem;
                margin: -0.25rem;
                padding: 1.2rem;
            }

            .icon {
                font-size: 2.2rem;
            }

            .footer-text-kr,
            .footer-text-eng {
                font-size: clamp(1rem, 1.5vw, 1.1rem);
            }

            .menu-modal-content {
                width: 70%;
            }
        }

        /* 768px */

        /* 480px */

        /* 389px */
        @media (max-width: 24.3125rem) {

            .option-btn {
                font-size: 0.5rem;
            }

            .card-title {
                font-size: 1rem;
            }

            .card-description {
                font-size: 0.8rem;
            }

            .card-examples {
                font-size: 0.80rem;
            }

            .category-grid {
                padding: 1rem 0.25rem;
                gap: 1.1rem;
            }

            .category-card {
                width: 10rem;
                margin: -0.25rem;
                padding: 0.75rem;
            }

            .icon {
                font-size: 1.4rem;
            }

            .footer-text-kr,
            .footer-text-eng {
                font-size: clamp(0.9rem, 1.5vw, 1rem);
            }

            .menu-modal-content {
                width: 85%;
            }


        }