:root{--topbar-h: 60px;--panel-bg: #ffffff;--panel-border: #e2e6ea;--text: #24303a;--muted: #6b7683;--green: #2ecc40;--blue: #2f6fdb;--red: #e03a3a;--accent: #2f8f5b;--font-base: 15px}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;color:var(--text);background:#f2f5f7;font-size:var(--font-base)}#app.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{height:var(--topbar-h);background:linear-gradient(90deg,#3a7d44,#2f8f5b);color:#fff;flex-shrink:0}.topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.app-title{font-size:1.3rem;margin:0;font-weight:700}.topbar-controls{display:flex;align-items:center;gap:10px}.grade-select{display:flex;align-items:center;gap:6px;font-size:.9rem}.grade-select select{padding:5px 8px;border-radius:6px;border:none;font-size:.9rem}.main-layout{flex:1;display:flex;min-height:0}.left-column{flex:1 1 68%;display:flex;flex-direction:column;min-width:0}.viewport{flex:1 1 auto;position:relative;min-height:0;background:#87ceeb}.viewport canvas{display:block;width:100%!important;height:100%!important}.chart-panel{flex:0 0 200px;background:var(--panel-bg);border-top:1px solid var(--panel-border);padding:8px 12px;display:flex;flex-direction:column}.chart-header{display:flex;align-items:center;gap:12px}.chart-canvas-wrap{flex:1;position:relative;min-height:0}.params-panel{flex:0 0 300px;background:var(--panel-bg);border-left:1px solid var(--panel-border);padding:14px 16px;overflow-y:auto}.ai-panel{flex:0 0 210px;background:var(--panel-bg);border-top:1px solid var(--panel-border);padding:10px 16px;display:flex;flex-direction:column;gap:8px}.panel-title{font-size:1rem;margin:0 0 8px;font-weight:700}.btn{padding:7px 12px;border:1px solid var(--panel-border);border-radius:8px;background:#f7f9fa;color:var(--text);cursor:pointer;font-size:.9rem;font-weight:600;transition:filter .15s,transform .05s}.btn:hover{filter:brightness(.96)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:#fff;border-color:transparent}.preset-buttons{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.btn-preset{text-align:left}.slider-group{margin-bottom:16px}.slider-group-title{font-size:.85rem;color:var(--muted);margin:0 0 8px;text-transform:none;font-weight:700;border-bottom:1px dashed var(--panel-border);padding-bottom:4px}.slider-row{margin-bottom:12px}.slider-label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:4px}.slider-value{color:var(--accent);font-weight:700}.slider-row input[type=range]{width:100%;accent-color:var(--accent)}.extinction-labels{display:flex;gap:6px;flex-wrap:wrap}.extinction-badge{background:#fff0f0;color:var(--red);border:1px solid #ffd1d1;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:700}.key-section{display:flex;flex-direction:column;gap:4px}.key-section.has-key{opacity:.85}.key-label{font-size:.85rem;font-weight:600}.key-input-row{display:flex;gap:6px}.key-input,.chat-input{flex:1;padding:7px 10px;border:1px solid var(--panel-border);border-radius:8px;font-size:.9rem}.key-note{font-size:.72rem;color:var(--muted);margin:2px 0 0}.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0;min-height:0}.bubble{max-width:80%;padding:7px 11px;border-radius:12px;font-size:.88rem;line-height:1.4;white-space:pre-wrap;word-break:break-word}.bubble-user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:3px}.bubble-ai{align-self:flex-start;background:#eef3f0;color:var(--text);border-bottom-left-radius:3px}.bubble-ai-auto{align-self:flex-start;background:#fff7e0;color:#6a5300;border:1px solid #f2e2a8}.chat-form{display:flex;gap:6px}body[data-grade=초등]{--font-base: 17px}body[data-grade=초등] .app-title{font-size:1.5rem}body[data-grade=초등] .btn{padding:10px 16px;font-size:1rem}body[data-grade=초등] .bubble{font-size:1rem}body[data-grade=초등] .panel-title{font-size:1.15rem}@media (max-width: 900px){.main-layout{flex-direction:column}.params-panel{flex:0 0 auto;border-left:none;border-top:1px solid var(--panel-border)}}