:root{--bg-main: #fdfdfb;--primary: #3b82f6;--primary-light: #bfdbfe;--accent: #6366f1;--accent-light: #a5b4fc;--success: #10b981;--error: #ef4444;--text-main: #1e293b;--text-muted: #64748b;--bubble-bot: #ffffff;--bubble-user: #3b82f6}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:linear-gradient(180deg,#f0f8ff,#e6f3ff);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,.05);position:sticky;top:0;z-index:100}.home-btn{text-decoration:none;font-size:1.5rem;margin-right:.8rem;transition:transform .2s}.logo{font-weight:800;font-size:1.1rem;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}.logo span{color:var(--primary)}.chat-badge{background:var(--primary);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:2rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column;align-items:center}.quest-intro{text-align:center;margin-bottom:1.2rem;width:100%}.quest-icon{font-size:2.2rem;display:block;margin-bottom:6px}.quest-title{font-size:1.15rem;font-weight:900;color:var(--text-main);letter-spacing:-.5px;margin-bottom:4px}.quest-desc{font-size:.82rem;color:var(--text-muted);font-weight:500;line-height:1.5}.input-card{width:100%;background:#fff;border-radius:24px;padding:1.5rem;border:2px solid #f1f5f9}.input-card textarea{width:100%;min-height:120px;max-height:260px;height:auto;field-sizing:content;border:2px solid var(--primary-light);border-radius:16px;padding:.8rem 1rem 1.2rem;font-size:1rem;color:var(--text-main);resize:none;outline:none;line-height:1.7;overflow-y:auto;font-family:inherit}.input-card textarea::-webkit-scrollbar{width:6px}.input-card textarea::-webkit-scrollbar-track{background:transparent;margin:12px 0}.input-card textarea::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}.input-card textarea::-webkit-scrollbar-thumb:hover{background:#2563eb}.send-btn{display:block;width:100%;margin-top:1rem;padding:1rem;background:var(--primary);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #3b82f633}#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;display:flex;flex-direction:column;gap:1.2rem}.msg{max-width:90%;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:4px;box-shadow:0 2px 8px #0000000d}.msg.user .bubble{background:var(--bubble-user);color:#fff;border-bottom-right-radius:4px}.msg .sender{font-size:.75rem;color:var(--text-muted);margin-bottom:4px;font-weight:600}.viz-card-bubble{background:#fff;padding:16px 12px;border-radius:24px 24px 24px 4px;box-shadow:0 10px 30px #0000000d;width:100%;max-width:380px;border:1px solid #f1f5f9;margin:8px 0}.map-header{padding:8px 12px;background:#fdf6e3;border-bottom:1px solid #f0e6c8;margin:-16px -12px 12px}.map-label{font-size:11px;font-weight:700;color:#c9a227;text-align:center}.sentence-canvas{display:flex;flex-direction:column;width:100%;position:relative;padding-right:10px}.stair-row{display:flex;align-items:stretch;min-height:42px;opacity:0;transform:translate(-10px);transition:all .45s cubic-bezier(.16,1,.3,1)}.stair-row.revealed{opacity:1;transform:translate(0)}.rail{width:6px;flex-shrink:0;border-radius:3px;transition:background .3s}.rail.depth-0{background:#f5a623;margin-left:8px}.rail.depth-1{background:#10b981;margin-left:28px}.rail.depth-2{background:#3b82f6;margin-left:48px}.stair-content{flex:1;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px}.type-label{font-size:10px;font-weight:800;color:#94a3b8;letter-spacing:.3px;text-transform:uppercase}.type-label.main-lbl{color:#f5a623}.type-label.embed-lbl{color:#10b981}.clause-text{font-size:14px;font-weight:600;line-height:1.5;color:var(--text-main);word-break:keep-all}.clause-text.final{font-size:15px;font-weight:800;color:var(--text-main)}.stair-corner{display:flex;align-items:stretch;height:20px;opacity:0;transition:opacity .3s}.stair-corner.revealed{opacity:1}.corner-in{margin-left:8px;position:relative;width:100%}.corner-in:before{content:"";position:absolute;top:0;left:0;width:6px;height:50%;background:#f5a623;border-radius:3px 3px 0 0}.corner-in:after{content:"";position:absolute;top:50%;left:0;width:26px;height:2px;background:linear-gradient(to right,#f5a623,#10b981)}.corner-out{margin-left:28px;position:relative;width:100%}.corner-out:before{content:"";position:absolute;top:0;left:0;width:6px;height:50%;background:#10b981;border-radius:0 0 3px 3px}.corner-out:after{content:"";position:absolute;top:50%;left:0;width:2px;height:50%;background:transparent;border-left:2px dashed #cbd5e1;margin-left:-12px}.logic-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:800;color:#fff;margin-top:2px;width:fit-content}.logic-tag.cond{background:#10b981}.logic-tag.purp{background:#3b82f6}.legend{display:flex;gap:12px;padding:12px 4px 4px;border-top:1px solid #f1f5f9;margin-top:8px}.legend-item{display:flex;align-items:center;gap:4px;font-size:9px;color:#94a3b8;font-weight:700}.legend-bar{width:4px;height:12px;border-radius:2px}.legend-bar.orange{background:#f5a623}.legend-bar.green{background:#10b981}.hl-topic,.hl-subject{color:#059669;font-weight:800;background:#ecfdf5;padding:0 3px;border-radius:3px}.hl-condition{color:#d97706;font-weight:800;background:#fffbeb;padding:0 3px;border-radius:3px}.quiz-bubble-area{width:100%;display:flex;flex-direction:column;gap:12px}.quiz-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.quiz-option{padding:10px 14px;background:#fff;border:2px solid var(--primary-light);border-radius:12px;cursor:pointer;font-weight:600;font-size:.85rem;transition:all .2s;line-height:1.4}.quiz-option.correct{background:var(--primary);color:#fff;border-color:var(--primary)}.quiz-option.wrong{border-color:var(--error);animation:shake .4s}.summary-card-bubble{background:#fff;padding:0;border-radius:24px 24px 24px 4px;box-shadow:0 10px 30px #0000000d;width:100%;max-width:340px;border:1px solid #f1f5f9;margin:8px 0;overflow:hidden}.summary-header{background:#fff9f0;padding:12px 16px;border-bottom:1.5px dashed #fed7aa;text-align:center}.summary-title{font-size:11px;font-weight:800;color:#f5a623;letter-spacing:.5px;margin-bottom:4px}.summary-main-action{font-size:16px;font-weight:800;color:var(--text-main)}.summary-body{padding:16px;display:flex;flex-direction:column;gap:12px}.summary-row{display:flex;flex-direction:column;gap:4px}.summary-row .label{font-size:10px;font-weight:800;color:#94a3b8;display:flex;align-items:center;gap:4px}.summary-row .label:before{content:"";width:4px;height:10px;border-radius:2px}.summary-row.cond .label:before{background:#10b981}.summary-row.content .label:before{background:#3b82f6}.summary-row .text{font-size:14px;font-weight:600;color:var(--text-main);padding-left:8px;line-height:1.5;word-break:keep-all}.typing-indicator{display:flex;gap:4px;padding:.8rem;align-self:flex-start}.typing-indicator .dot{width:8px;height:8px;background:#cbd5e1;border-radius:50%;animation:typingBounce 1.4s infinite}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.end-actions{display:flex;flex-direction:column;gap:8px;margin-top:1rem;width:100%}.end-btn{padding:12px;background:#fff;border:2px solid var(--primary-light);border-radius:14px;font-weight:700;cursor:pointer;text-align:center}@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,#f0f8ff,#e6f3ff)}}@media(min-width:768px){#app{max-width:100%}.viz-card-bubble{max-width:440px}.summary-card-bubble{max-width:380px}.quiz-options{gap:10px}.end-actions{flex-direction:row}.end-btn{flex:1}}@media(min-width:1024px){#app{max-width:100%;border-radius:0;margin:0;height:100vh;height:100dvh}main{flex-direction:row}.msg{max-width:70%}.chat-messages{padding:1.5rem 2.5rem 2rem}}