:root{--bg-main: #fff8f4;--primary: #f6ad55;--primary-light: #fed7aa;--accent: #6366f1;--accent-light: #a5b4fc;--success: #10b981;--error: #ef4444;--text-main: #1e293b;--text-muted: #64748b;--bubble-bot: #ffffff;--bubble-user: #f6ad55}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:linear-gradient(180deg,#fff5f0,#ffeee4);color:var(--text-main);font-family:Pretendard,sans-serif}#app{max-width:420px;margin:0 auto;padding:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{display:flex;align-items:center;padding:1rem 1.2rem;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:100}.home-btn{text-decoration:none;font-size:1.5rem;margin-right:.8rem;display:inline-block;transition:transform .2s}.home-btn:hover{transform:scale(1.1)}.logo{font-weight:800;font-size:1.1rem;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}.logo span{color:#ff9e6d}.chat-badge{background:var(--accent);color:#fff;padding:3px 10px;border-radius:100px;font-size:.7rem;font-weight:700}main{flex:1;min-height:0;display:flex;flex-direction:column}#input-section{padding:1.2rem;flex:1;display:flex;align-items:center}.input-card{width:100%;background:#fff;border-radius:24px;padding:1.5rem;box-shadow:0 10px 30px #0000000f}.input-card textarea{width:100%;height:100px;border:2px solid var(--primary-light);border-radius:16px;padding:1rem;font-size:1rem;color:var(--text-main);resize:none;outline:none;font-family:inherit;line-height:1.6}.input-card textarea:focus{border-color:var(--primary)}.send-btn{display:block;width:100%;margin-top:.8rem;padding:.9rem;background:var(--primary);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}.send-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #f6ad5566}.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}#chat-area{flex:1;min-height:0;display:flex;flex-direction:column}.chat-messages{flex:1;min-height:0;padding:1rem 1.2rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:.6rem}.msg{max-width:85%;animation:msgIn .3s ease-out}@keyframes msgIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.msg.bot{align-self:flex-start}.msg.user{align-self:flex-end}.msg .bubble{padding:.8rem 1.1rem;border-radius:18px;font-size:.95rem;line-height:1.6;word-break:keep-all}.msg.bot .bubble{background:var(--bubble-bot);color:var(--text-main);border-bottom-left-radius:6px;box-shadow:0 2px 8px #0000000f}.msg.user .bubble{background:var(--bubble-user);color:#fff;border-bottom-right-radius:6px}.msg .sender{font-size:.75rem;color:var(--text-muted);margin-bottom:4px;font-weight:600}.msg.user .sender{text-align:right}.sentence-card{background:#fff;border:2px solid var(--primary-light);border-radius:20px;padding:1.2rem 1.4rem;margin:.4rem 0;font-size:1.1rem;font-weight:600;line-height:1.7;color:var(--text-main);text-align:center;box-shadow:0 4px 15px #0000000d;animation:msgIn .4s ease-out}.prediction-area{animation:msgIn .4s ease-out;margin:.4rem 0}.prediction-area .question{font-size:.95rem;font-weight:700;color:var(--text-main);margin-bottom:.8rem;line-height:1.5;padding:.8rem 1.1rem;background:#fff;border-radius:18px 18px 18px 6px;box-shadow:0 2px 8px #0000000f}.option-buttons{display:flex;flex-direction:column;gap:.5rem}.option-btn{padding:.8rem 1rem;background:#fff;border:2px solid var(--primary-light);border-radius:14px;font-size:.95rem;font-weight:600;color:var(--text-main);cursor:pointer;transition:all .2s;text-align:left;min-height:48px}.option-btn:hover{border-color:var(--primary);background:#fff9f5;transform:translate(4px)}.option-btn:active{transform:scale(.98)}.option-btn.correct{background:#ecfdf5;border-color:var(--success);color:var(--success)}.option-btn.wrong{background:#fef2f2;border-color:var(--error);color:var(--error);animation:shake .4s ease-in-out}.option-btn:disabled{cursor:default;opacity:.7}.block-assembly{animation:msgIn .4s ease-out;margin:.4rem 0}.assembly-instruction{font-size:.95rem;font-weight:700;padding:.8rem 1.1rem;background:#fff;border-radius:18px 18px 18px 6px;box-shadow:0 2px 8px #0000000f;margin-bottom:.8rem;line-height:1.5}.slot-area{background:#fff;border-radius:18px;padding:1rem;box-shadow:0 2px 8px #0000000f;margin-bottom:.8rem}.slot-group{margin-bottom:.8rem}.slot-group:last-child{margin-bottom:0}.slot-group-label{font-size:.75rem;color:var(--text-muted);font-weight:700;margin-bottom:.4rem}.slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.slot{height:44px;border:2px dashed var(--primary-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-muted);font-weight:600;transition:all .2s}.slot.filled{border-style:solid;border-color:var(--primary);background:#fff9f5;color:var(--text-main);font-weight:700;font-size:.85rem}.slot.highlight{border-color:var(--accent);background:#6366f10f;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #6366f133}50%{box-shadow:0 0 0 6px #6366f100}}.chunk-pool{display:flex;flex-wrap:wrap;gap:8px;margin-top:.6rem}.chunk-btn{padding:8px 14px;background:#fff;border:2px solid var(--primary-light);border-radius:12px;font-size:.9rem;font-weight:600;color:var(--text-main);cursor:pointer;transition:all .2s;min-height:40px}.chunk-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 10px #00000014}.chunk-btn:active{transform:scale(.95)}.chunk-btn.used-anim{background:#fff9f5;border-color:var(--primary);transform:scale(.95)}.chunk-btn.used{border-style:dashed;opacity:.6;cursor:pointer}.chunk-btn.wrong-role{border-color:var(--error);animation:shake .4s ease-in-out}.distill-area{animation:msgIn .4s ease-out;margin:.4rem 0}.distill-instruction{font-size:.95rem;font-weight:700;padding:.8rem 1.1rem;background:#fff;border-radius:18px 18px 18px 6px;box-shadow:0 2px 8px #0000000f;margin-bottom:.8rem;line-height:1.5}.distill-slots{display:flex;justify-content:center;gap:8px;margin-bottom:.8rem}.distill-slot{width:100px;height:44px;border:2px solid var(--primary-light);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;font-weight:800;font-size:.95rem;transition:all .3s;box-shadow:0 2px 6px #0000000a}.distill-slot.filled{border-color:var(--accent);background:#6366f10f;color:var(--accent)}.distill-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.distill-btn{padding:8px 16px;background:#fff;border:2px solid var(--accent-light);border-radius:12px;font-size:.9rem;font-weight:700;color:var(--accent);cursor:pointer;transition:all .2s;min-height:40px}.distill-btn:hover{background:#6366f10f;transform:translateY(-2px)}.distill-btn:active{transform:scale(.95)}.distill-btn.used{opacity:.3;cursor:default;transform:none}.distill-btn:disabled{opacity:.3;cursor:default;transform:none}.feedback-card{background:#fff;border-radius:20px;padding:1.4rem;margin:.4rem 0;box-shadow:0 4px 15px #0000000f;animation:msgIn .5s ease-out}.feedback-card .grade{text-align:center;font-size:1.5rem;font-weight:900;margin-bottom:1rem;padding:.6rem;border-radius:14px}.feedback-card .grade.good{background:#ecfdf5;color:var(--success)}.feedback-card .grade.ok{background:#eff6ff;color:#3b82f6}.feedback-card .grade.retry{background:#fef2f2;color:var(--error)}.feedback-card .rec-section{background:#f8fafc;border-radius:14px;padding:1rem;margin-top:.8rem}.feedback-card .rec-type{display:inline-block;background:var(--accent);color:#fff;padding:4px 12px;border-radius:100px;font-size:.8rem;font-weight:700;margin-bottom:.6rem}.feedback-card .rec-text{font-size:.9rem;line-height:1.7;color:var(--text-main);white-space:pre-line;margin-bottom:.8rem}.feedback-card .guide-box{background:#fff;border-left:4px solid var(--accent);padding:.8rem 1rem;border-radius:0 12px 12px 0;font-size:.9rem;line-height:1.5;color:var(--text-main)}.feedback-card .guide-label{color:var(--accent);font-weight:800;display:block;margin-bottom:4px;font-size:.85rem}.end-actions{display:flex;flex-direction:column;gap:.5rem;margin:.8rem 0 2rem;animation:msgIn .5s ease-out}.end-btn{padding:.9rem 1rem;background:#fff;border:2px solid var(--primary-light);border-radius:14px;font-size:.95rem;font-weight:700;color:var(--text-main);cursor:pointer;transition:all .2s;text-align:center}.end-btn:hover{border-color:var(--primary);background:#fff9f5;transform:translateY(-2px)}.typing-indicator{display:flex;gap:4px;padding:.8rem 1.1rem;align-self:flex-start}.typing-indicator .dot{width:8px;height:8px;background:#cbd5e1;border-radius:50%;animation:typingBounce 1.4s infinite}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.distill-btn.wrong-distill{border-color:var(--error);background:#fef2f2;animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.structure-box{margin-top:15px;display:flex;flex-direction:column;gap:12px}.structure-row{background:#f8fafc;padding:12px;border-radius:12px;border:1px solid #e2e8f0}.structure-label{font-size:.75rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:4px}.structure-text{font-size:.95rem;line-height:1.7;color:#475569;word-break:keep-all}.hl-block{display:inline;padding:2px 4px;border-radius:6px;font-weight:700}.hl-block.embedded{background:#ecfdf5;color:#065f46;border:1px solid #10b981}.hl-block.main{background:#fff7ed;color:#9a3412;border:1px solid #f97316}.tag-mini{font-size:.65rem;padding:1px 4px;border-radius:4px;color:#fff;font-weight:800}.tag-mini.green{background:#10b981}.tag-mini.orange{background:#f97316}@media(min-width:421px){body{background:#f1f5f9}#app{margin-top:1rem;margin-bottom:1rem;height:calc(100vh - 2rem);height:calc(100dvh - 2rem);border-radius:24px;box-shadow:0 20px 60px #0000001a;background:linear-gradient(180deg,#fff5f0,#ffeee4)}}