:root{--color-coral: #FF8B6A;--color-orange: #FFB347;--color-mint: #87CEAB;--color-sky: #7EB8DA;--color-lavender: #B8A9C9;--color-bg: #FFF8F0;--color-surface: #FFFFFF;--color-text: #3D3D3D;--color-text-light: #6B6B6B;--color-success: #6BCB77;--color-error: #FF6B6B;--color-border: #E8E0D8;--font-size-sm: 16px;--font-size-base: 20px;--font-size-lg: 24px;--font-size-xl: 30px;--font-size-2xl: 36px;--font-size-3xl: 48px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans KR,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100dvh;-webkit-font-smoothing:antialiased}img,svg{display:block;max-width:100%}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font:inherit;border:none;background:none;color:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none}#app{max-width:600px;margin:0 auto;padding:var(--spacing-md);min-height:100dvh;display:flex;flex-direction:column}.title-lg{font-size:var(--font-size-3xl);font-weight:800;line-height:1.2}.title-md{font-size:var(--font-size-2xl);font-weight:700;line-height:1.3}.title-sm{font-size:var(--font-size-xl);font-weight:700;line-height:1.3}.text-lg{font-size:var(--font-size-lg)}.text-base{font-size:var(--font-size-base)}.text-sm{font-size:var(--font-size-sm);color:var(--color-text-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);min-height:60px;padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);font-weight:600;border-radius:var(--radius-md);transition:transform var(--transition),box-shadow var(--transition),background-color var(--transition);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--color-coral);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:#ff7a55;box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.btn-secondary:hover{border-color:var(--color-coral);background-color:#fff0eb}.btn-mint{background-color:var(--color-mint);color:#fff;box-shadow:var(--shadow-sm)}.btn-sky{background-color:var(--color-sky);color:#fff;box-shadow:var(--shadow-sm)}.btn-orange{background-color:var(--color-orange);color:#fff;box-shadow:var(--shadow-sm)}.btn-block{display:flex;width:100%}.btn-sm{min-height:48px;padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}.card-interactive{cursor:pointer;-webkit-tap-highlight-color:transparent}.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-interactive:active{transform:scale(.98)}.header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg)}.header-back{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-sm);font-size:var(--font-size-lg);transition:background-color var(--transition);flex-shrink:0}.header-back:hover{background:#f0e8e0}.header-title{font-size:var(--font-size-xl);font-weight:700;flex:1}.header-no-back{justify-content:center}.header-centered .header-title{text-align:center;flex:0 1 auto}.header-compact{margin-bottom:var(--spacing-sm)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--spacing-lg);animation:fadeIn .2s ease}.modal{position:relative;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:420px;width:100%;max-height:min(92dvh,760px);overflow-y:auto;text-align:center;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}.modal-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:#f3ece4;color:#796b5e;font-size:18px;font-weight:700;line-height:1}.modal-close:hover{background:#eadfd3}.modal-icon{font-size:64px;margin-bottom:var(--spacing-md)}.modal-thumbnail{width:100%;max-width:320px;height:132px;object-fit:cover;border-radius:var(--radius-md);border:2px solid #EFE7DD;margin:8px auto var(--spacing-md)}.modal-title{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-sm)}.modal-message{font-size:var(--font-size-base);color:var(--color-text-light);margin-bottom:var(--spacing-lg);line-height:1.5;white-space:pre-line}.modal-actions{display:flex;flex-direction:column;gap:var(--spacing-sm)}.modal-actions .btn{min-height:54px;font-size:var(--font-size-base)}.toast-root{position:fixed;top:30%;left:50%;transform:translate(-50%);z-index:120;pointer-events:none}.app-toast{min-width:220px;max-width:min(92vw,520px);padding:10px 16px;border-radius:var(--radius-full);box-shadow:var(--shadow-md);font-size:var(--font-size-base);font-weight:700;text-align:center;opacity:0;transform:translateY(-10px);transition:opacity .18s ease,transform .18s ease;border:2px solid transparent;background:var(--color-surface)}.app-toast.show{opacity:1;transform:translateY(0)}.app-toast-success{color:#2d7a3a;border-color:#cfeed5;background:#e8f8ea}.app-toast-error{color:#c44d4d;border-color:#f7c5c5;background:#ffe8e8}.app-toast-info{color:#4d6bc4;border-color:#c9d8ff;background:#e8f0ff}.difficulty-selector{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.difficulty-btn{flex:1;min-height:48px;padding:var(--spacing-sm);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-md);background:var(--color-surface);border:2px solid var(--color-border);transition:all var(--transition)}.difficulty-btn.active{border-color:var(--color-coral);background:#fff0eb;color:var(--color-coral)}.feedback{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:600;text-align:center;animation:slideUp .3s ease}.feedback-success{background:#e8f8ea;color:#2d7a3a}.feedback-error{background:#ffe8e8;color:#c44d4d}.feedback-info{background:#e8f0ff;color:#4d6bc4}.score-display{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg);font-size:var(--font-size-lg);font-weight:600}.score-label{color:var(--color-text-light);font-weight:400}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.animate-pop{animation:pop .3s ease}.animate-shake{animation:shake .3s ease}.flex-center{display:flex;align-items:center;justify-content:center}.flex-col{display:flex;flex-direction:column}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.text-center{text-align:center}.w-full{width:100%}.flex-1{flex:1}@media(max-width:480px){:root{--font-size-base: 18px;--font-size-lg: 22px;--font-size-xl: 26px;--font-size-2xl: 32px;--font-size-3xl: 40px}#app{padding:var(--spacing-sm)}.modal{padding:var(--spacing-lg);max-height:min(94dvh,760px)}.modal-thumbnail{height:112px;margin-top:4px}.modal-title{font-size:var(--font-size-xl)}.modal-message{font-size:var(--font-size-sm);line-height:1.45}}.card-grid{display:grid;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.card-grid-easy{grid-template-columns:repeat(3,1fr)}.card-grid-normal,.card-grid-hard{grid-template-columns:repeat(4,1fr)}.game-card{aspect-ratio:1;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:40px;cursor:pointer;transition:transform .3s ease,background-color .3s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:3px solid var(--color-border);background:var(--color-surface)}.game-card-hidden{background:linear-gradient(135deg,var(--color-sky),var(--color-mint));border-color:transparent}.game-card-hidden:after{content:"?";font-size:32px;color:#fff;font-weight:700}.game-card-revealed{background:var(--color-surface);transform:scale(1.02)}.game-card-matched{background:#e8f8ea;border-color:var(--color-success);pointer-events:none}.game-card:active{transform:scale(.95)}.sequence-display{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap;padding:var(--spacing-xl) var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg)}.sequence-number{font-size:var(--font-size-2xl);font-weight:700;min-width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#f0f4ff;border-radius:var(--radius-md);color:var(--color-text)}.sequence-blank{background:#fff0eb;border:3px dashed var(--color-coral);color:var(--color-coral);min-width:70px}.sequence-arrow{font-size:var(--font-size-lg);color:var(--color-text-light)}.answer-options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.answer-btn{min-height:70px;font-size:var(--font-size-xl);font-weight:700;border-radius:var(--radius-md);background:var(--color-surface);border:3px solid var(--color-border);transition:all var(--transition)}@media(hover:hover)and (pointer:fine){.answer-btn:hover{border-color:var(--color-sky);background:#f0f8ff}}.answer-btn:active{transform:scale(.97)}.answer-btn.correct{border-color:var(--color-success);background:#e8f8ea;color:#2d7a3a}.answer-btn.wrong{border-color:var(--color-error);background:#ffe8e8;color:#c44d4d;animation:shake .3s ease}.color-grid{display:grid;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.color-grid-easy{grid-template-columns:repeat(3,1fr)}.color-grid-normal{grid-template-columns:repeat(4,1fr)}.color-grid-hard{grid-template-columns:repeat(5,1fr)}.color-cell{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition);-webkit-tap-highlight-color:transparent;border:3px solid transparent}.color-cell:hover{transform:scale(1.05)}.color-cell:active{transform:scale(.95)}.color-cell.found{border-color:var(--color-success);box-shadow:0 0 0 3px #6bcb774d}.color-cell.wrong-pick{animation:shake .3s ease}.math-problem{text-align:center;padding:var(--spacing-lg);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md)}.math-expression-inline{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap}.math-expression{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-text)}.math-equals{font-size:var(--font-size-2xl);color:var(--color-text-light)}.math-inline-input{min-width:92px;height:52px;padding:0 var(--spacing-sm);display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);font-weight:700;border:3px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);max-width:300px;margin:0 auto}.numpad-btn{height:58px;font-size:var(--font-size-lg);font-weight:700;border-radius:var(--radius-md);background:var(--color-surface);border:2px solid var(--color-border);transition:all var(--transition)}@media(hover:hover)and (pointer:fine){.numpad-btn:hover{background:#f0f4ff}}.numpad-btn:active{transform:scale(.95);background:#e0e8ff}.numpad-btn-submit{background:var(--color-coral);color:#fff;border-color:transparent}@media(hover:hover)and (pointer:fine){.numpad-btn-submit:hover{background:#ff7a55}}.numpad-btn-delete{background:#ffe8e8;color:var(--color-error);border-color:transparent}.word-chain-area{flex:1;display:flex;flex-direction:column}.word-history{flex:1;overflow-y:auto;padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md);min-height:200px;max-height:400px}.word-bubble{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm);animation:slideUp .3s ease}.word-bubble-computer{background:#f0f4ff;color:var(--color-text)}.word-bubble-user{background:var(--color-coral);color:#fff;margin-left:auto}.word-row{display:flex;margin-bottom:var(--spacing-xs)}.word-row-computer{justify-content:flex-start}.word-row-user{justify-content:flex-end}.word-input-area{display:flex;gap:var(--spacing-sm)}.word-input{flex:1;height:60px;padding:0 var(--spacing-lg);font-size:var(--font-size-lg);border:3px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color var(--transition)}.word-input:focus{outline:none;border-color:var(--color-coral)}.word-hint{font-size:var(--font-size-base);color:var(--color-text-light);text-align:center;padding:var(--spacing-sm)}.game-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.game-select-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);-webkit-tap-highlight-color:transparent;text-align:left}.game-select-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.game-select-card:active{transform:scale(.98)}.game-thumb{width:108px;height:72px;border-radius:var(--radius-md);overflow:hidden;border:2px solid #EFE7DD;background:#f7f2eb;flex-shrink:0}.game-thumb-image{width:100%;height:100%;object-fit:cover}.game-info{flex:1}.game-name{font-size:var(--font-size-lg);font-weight:700;margin-bottom:4px}.game-desc{font-size:var(--font-size-sm);color:var(--color-text-light)}.home-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--spacing-xl);padding:var(--spacing-2xl) 0}.home-logo{font-size:80px;line-height:1}.home-title{font-size:var(--font-size-3xl);font-weight:800;color:var(--color-coral)}.home-subtitle{font-size:var(--font-size-lg);color:var(--color-text-light);margin-top:var(--spacing-xs)}.home-stats{display:flex;gap:var(--spacing-xl);padding:var(--spacing-lg)}.stat-item{text-align:center}.stat-value{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-coral)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-light)}.game-container{flex:1;display:flex;flex-direction:column}.game-status{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md);font-size:var(--font-size-base);font-weight:600}.game-status-timer .timer-main{font-size:var(--font-size-xl);font-weight:800;color:var(--color-coral)}.game-content{flex:1}.game-feedback{margin-top:var(--spacing-md);min-height:60px}