*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #64748b;--secondary-hover: #475569;--bg-color: #f8fafc;--card-bg: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-light: #ffffff;--border-color: #e2e8f0;--success-color: #10b981;--success-bg: #ecfdf5;--warning-color: #f59e0b;--warning-bg: #fffbeb;--error-color: #ef4444;--error-bg: #fef2f2;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-primary);font-weight:700}p{margin:0}button{font-family:inherit;border:none;cursor:pointer;transition:all .2s ease}input,textarea{font-family:inherit;color:var(--text-primary);-webkit-user-select:text;user-select:text}a{color:var(--primary-color);text-decoration:none}.home{padding:40px 20px;max-width:600px;margin:0 auto}.home-header{text-align:center;margin-bottom:48px}.home-header h1{font-size:2rem;margin-bottom:12px;color:var(--primary-color)}.home-header p{color:var(--text-secondary);font-size:1.1rem}.mode-cards{display:flex;flex-direction:column;gap:20px}.mode-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:32px;text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background-color:var(--accent-color);opacity:0;transition:opacity .2s ease}.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}.mode-card:hover:before{opacity:1}.mode-card:active{transform:translateY(-2px)}.mode-subtitle{font-size:.8rem;color:var(--accent-color);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;display:block;margin-bottom:8px}.mode-title{font-size:1.5rem;color:var(--text-primary);margin-bottom:8px}.mode-description{color:var(--text-secondary);font-size:1rem;line-height:1.5}.create{padding:20px;max-width:600px;margin:0 auto}.create-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.create-header h1{font-size:1.5rem;color:var(--text-primary);margin:0}.back-btn{background:none;border:none;color:var(--text-secondary);font-size:1rem;cursor:pointer;padding:8px 12px;border-radius:var(--radius-sm)}.back-btn:hover{background-color:#f1f5f9;color:var(--text-primary)}.pattern-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:40px 24px;color:var(--text-primary);text-align:center;margin-bottom:32px;box-shadow:var(--shadow-sm)}.pattern-number{font-size:.9rem;color:var(--primary-color);font-weight:600;display:block;margin-bottom:16px;letter-spacing:1px}.pattern-text{font-size:1.8rem;margin:0 0 12px;font-weight:800;color:var(--text-primary)}.pattern-korean{font-size:1.1rem;color:var(--text-secondary);margin:0;font-weight:500}.input-section{margin-bottom:24px}.input-section label{display:block;color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:8px}.input-wrapper{position:relative}.input-section textarea{width:100%;border:2px solid var(--border-color);border-radius:var(--radius-md);padding:20px 60px 20px 20px;font-size:1.1rem;resize:none;background-color:var(--card-bg);transition:border-color .2s;box-shadow:var(--shadow-sm)}.input-section textarea:focus{outline:none;border-color:var(--primary-color)}.feedback-btn{width:100%;background-color:var(--primary-color);border-radius:var(--radius-md);padding:16px;color:#fff;font-size:1rem;font-weight:600;margin-bottom:16px;box-shadow:var(--shadow-md);transition:background-color .2s}.feedback-btn:hover:not(:disabled){background-color:var(--primary-hover)}.feedback-btn:disabled{background-color:#cbd5e1;cursor:not-allowed;box-shadow:none}.feedback-box{background-color:var(--card-bg);border-radius:var(--radius-md);padding:20px;margin-bottom:24px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.feedback-box.success{background-color:var(--success-bg);border-color:var(--success-color)}.feedback-box.warning{background-color:var(--warning-bg);border-color:var(--warning-color)}.feedback-box.error{background-color:var(--error-bg);border-color:var(--error-color)}.feedback-status{display:flex;gap:12px;margin-bottom:12px}.feedback-status span{font-size:.9rem;font-weight:700}.feedback-status .correct{color:var(--success-color)}.feedback-status .incorrect{color:var(--error-color)}.corrected{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color)}.corrected-label{font-size:.85rem;color:var(--text-secondary);font-weight:600;display:block;margin-bottom:4px}.corrected p{color:var(--success-color);font-size:1.1rem;font-weight:600}.corrected-korean{color:var(--text-secondary);font-size:.95rem;font-weight:500;margin-top:4px}.translation{margin-top:12px;padding:12px;background-color:#f8fafc;border-radius:var(--radius-sm)}.translation-label{font-size:.85rem;color:var(--text-secondary);font-weight:600;display:block;margin-bottom:4px}.translation p{color:var(--text-primary);font-size:1rem}.hint-btn{width:100%;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px;color:var(--text-secondary);font-size:.95rem;margin-bottom:16px}.hint-btn:hover{border-color:var(--secondary-color);color:var(--text-primary)}.hint-box{background-color:var(--warning-bg);border:1px solid #fcd34d;border-radius:var(--radius-md);padding:20px;margin-bottom:24px}.hint-label{font-size:.8rem;color:#b45309;font-weight:700;display:block;margin-bottom:8px}.hint-box p{color:#451a03;font-size:1.1rem}.hint-english{font-weight:600}.hint-korean{color:#78350f;font-size:.95rem;margin-top:4px}.next-btn{width:100%;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;color:var(--text-primary);font-size:1rem;font-weight:600;transition:all .2s}.next-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background-color:#f8fafc}.progress-info{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-top:24px}.memorize{padding:20px;max-width:600px;margin:0 auto}.memorize-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.memorize-header h1{font-size:1.5rem;color:var(--text-primary);margin:0}.mode-toggle{display:flex;gap:8px;margin-bottom:24px;background-color:#f1f5f9;padding:4px;border-radius:var(--radius-md)}.mode-toggle button{flex:1;padding:8px;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:500}.mode-toggle button.active{background-color:var(--card-bg);color:var(--primary-color);box-shadow:var(--shadow-sm);font-weight:600}.flashcard-container{margin-bottom:32px;cursor:pointer}.flashcard{position:relative;width:100%;height:320px}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.flashcard-front{z-index:2;opacity:1;visibility:visible;background-color:var(--card-bg)}.flashcard-back{z-index:1;opacity:0;visibility:hidden;background-color:#eff6ff;border-color:#dbeafe}.flashcard.flipped .flashcard-front{opacity:0;visibility:hidden;z-index:1}.flashcard.flipped .flashcard-back{opacity:1;visibility:visible;z-index:2}.card-number{position:absolute;top:24px;left:24px;font-size:.9rem;color:var(--primary-color);font-weight:600;letter-spacing:1px}.card-content{font-size:1.6rem;text-align:center;margin:0;line-height:1.5;font-weight:700;color:var(--text-primary)}.card-content.korean{font-size:1.5rem;color:var(--text-primary)}.card-content.english{font-size:1.8rem;color:var(--text-primary)}.card-content.example{font-size:1.4rem;color:var(--text-secondary);font-weight:500;margin-top:16px}.card-korean{font-size:1.1rem;color:var(--text-secondary);margin-top:16px;font-weight:500}.flip-hint{position:absolute;bottom:24px;font-size:.9rem;color:var(--text-secondary);opacity:.7}.nav-buttons{display:flex;gap:16px}.nav-btn{flex:1;padding:16px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg);color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.nav-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background-color:#f8fafc;transform:translateY(-2px)}.test{padding:20px;max-width:600px;margin:0 auto}.test-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.test-header h1{font-size:1.5rem;color:var(--text-primary);margin:0}.question-select{text-align:center;padding:40px 0}.question-select h2{color:var(--text-primary);font-size:1.5rem;margin-bottom:32px}.count-buttons{display:flex;flex-direction:column;gap:16px}.count-buttons button{padding:20px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg);font-size:1.1rem;color:var(--text-primary);font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.count-buttons button:hover{border-color:var(--primary-color);color:var(--primary-color);background-color:#f8fafc;transform:translateY(-2px)}.progress-bar{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background-color:var(--primary-color);transition:width .3s ease}.progress-text{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:32px}.question-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:40px 24px;text-align:center;margin-bottom:32px;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.question-number{font-size:.9rem;color:var(--primary-color);font-weight:600;margin-bottom:16px;display:block;letter-spacing:1px}.question-korean{font-size:1.6rem;color:var(--text-primary);margin:0 0 12px;line-height:1.4;font-weight:700}.question-hint{font-size:1rem;color:var(--text-secondary);margin:0}.answer-section{display:flex;flex-direction:column;gap:16px}.answer-section input{width:100%;padding:20px;border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:1.1rem;box-sizing:border-box;background-color:var(--card-bg);color:var(--text-primary);transition:border-color .2s;box-shadow:var(--shadow-sm)}.answer-section input:focus{outline:none;border-color:var(--primary-color)}.mic-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background-color:#f1f5f9;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.mic-btn:hover{background-color:#e2e8f0;color:var(--primary-color)}.mic-btn.listening{background-color:var(--error-bg);color:var(--error-color)}.listening-indicator{color:var(--error-color);font-size:.9rem;margin-top:8px;text-align:center;font-weight:500}.submit-btn{padding:18px;background-color:var(--primary-color);border:none;border-radius:var(--radius-md);color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;box-shadow:var(--shadow-sm)}.submit-btn:disabled{background-color:#cbd5e1;cursor:not-allowed;transform:none}.submit-btn:not(:disabled):hover{background-color:var(--primary-hover);transform:translateY(-2px)}.result-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;margin-bottom:32px;box-shadow:var(--shadow-md)}.result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:16px;color:var(--primary-color)}.score-number{font-size:4.5rem;font-weight:800;line-height:1}.score-total{font-size:1.5rem;color:var(--text-secondary)}.result-percentage{font-size:1.2rem;color:var(--text-secondary);margin:0 0 24px;font-weight:500}.result-message{font-size:1.2rem;margin:0;color:var(--text-primary);font-weight:600}.result-buttons{display:flex;flex-direction:column;gap:16px}.review-btn{padding:18px;background-color:var(--card-bg);border:1px solid var(--error-color);border-radius:var(--radius-md);color:var(--error-color);font-size:1.1rem;font-weight:600;transition:all .2s}.review-btn:hover{background-color:var(--error-bg)}.retry-btn{padding:18px;background-color:var(--primary-color);border-radius:var(--radius-md);color:#fff;font-size:1.1rem;font-weight:600;box-shadow:var(--shadow-sm);transition:all .2s}.retry-btn:hover{background-color:var(--primary-hover);transform:translateY(-2px)}.home-btn{padding:18px;background-color:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:1.1rem;font-weight:600;transition:all .2s}.home-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background-color:#f8fafc}.review-list{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.review-item{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm)}.review-question{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.review-number{font-size:.85rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:1px}.review-korean{font-size:1.2rem;color:var(--text-primary);margin:8px 0 0;font-weight:600}.review-answers{display:flex;flex-direction:column;gap:12px;font-size:1rem}.review-answers .label{color:var(--text-secondary);display:inline-block;width:60px;font-size:.9rem}.review-answers .wrong{color:var(--error-color);font-weight:500}.review-answers .correct{color:var(--success-color);font-weight:600}.review-answers .example{color:var(--text-secondary);font-style:italic;margin-top:4px}.ai-explanation{background-color:#eff6ff;padding:20px;border-radius:var(--radius-md);border-left:4px solid var(--primary-color);margin-top:16px}.ai-explanation .label{color:var(--primary-color);font-weight:700;font-size:.9rem;margin-bottom:8px;display:block}.ai-explanation p{color:var(--text-primary);font-size:1rem;line-height:1.6}.grading-screen{text-align:center;padding:80px 20px}.grading-icon{font-size:4rem;margin-bottom:32px;color:var(--primary-color)}.grading-screen h2{color:var(--text-primary);font-size:1.5rem;margin-bottom:40px}.grading-progress-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:16px;max-width:300px;margin-left:auto;margin-right:auto}.grading-progress-fill{height:100%;background-color:var(--primary-color);transition:width .3s ease}.grading-text{color:var(--primary-color);font-weight:600;font-size:1rem}.ai-badge{display:inline-block;background-color:#eff6ff;color:var(--primary-color);padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:600;letter-spacing:.5px;margin-bottom:20px;border:1px solid rgba(59,130,246,.2)}.app{min-height:100vh}