@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap";:root{color:#eaf2fa;font-synthesis:none;--bg:#050a12;--panel:#0a121e;--panel-2:#0d1826;--line:#89a9c729;--line-strong:#89a9c74a;--muted:#8091a4;--text:#eaf2fa;--cyan:#43c7ff;--orange:#ff7254;--gold:#ffd36a;--green:#5be3aa;background:#050a12;font-family:Inter,Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 50% 0,#0d1d31 0,#050a12 45%);min-height:100vh}button,input,select{font:inherit}button,select{color:inherit}button{cursor:pointer}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:20;background:#050a12e0;grid-template-columns:330px 1fr auto;align-items:center;gap:24px;height:66px;padding:0 22px;display:grid;position:sticky;top:0}.brand{letter-spacing:-.03em;align-items:center;gap:10px;display:flex}.brand-mark{width:34px;height:34px;color:var(--cyan);background:#43c7ff14;border:1px solid #43c7ff6b;border-radius:8px;place-items:center;display:grid}.brand>span:nth-child(2){font-size:18px}.brand strong{font-weight:700}.brand b{color:var(--cyan);margin-left:4px}.brand em{letter-spacing:.16em;color:#64788d;border-left:1px solid var(--line-strong);padding-left:10px;font-size:9px;font-style:normal}.icon{width:18px;height:18px;display:block}.app-header nav{justify-content:center;gap:26px;display:flex}.app-header nav a{color:#91a2b5;font-size:12px;text-decoration:none;transition:color .2s}.app-header nav a:hover{color:#fff}.run-status{color:#a7b5c5;border:1px solid var(--line);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:11px;display:flex}.run-status i{background:var(--cyan);width:6px;height:6px;box-shadow:0 0 12px var(--cyan);border-radius:50%}.run-status.good i{background:var(--green);box-shadow:0 0 12px var(--green)}.run-status.danger i{background:var(--orange);box-shadow:0 0 12px var(--orange)}.workspace{flex:1;grid-template-columns:286px minmax(540px,1fr) 310px;min-height:calc(100vh - 96px);display:grid}.control-rail,.insight-rail{background:#080f19eb;min-height:0;padding:20px;overflow-y:auto}.control-rail{border-right:1px solid var(--line)}.insight-rail{border-left:1px solid var(--line)}.rail-heading,.insight-heading,.stage-toolbar,.panel-title{justify-content:space-between;align-items:center;display:flex}.rail-heading{margin-bottom:18px}.eyebrow,.panel-kicker{letter-spacing:.18em;color:#60748a;margin-bottom:5px;font-size:9px;font-weight:700;display:block}h1,h2{letter-spacing:-.035em;margin:0}h1{font-size:18px}h2{font-size:17px}.icon-button{border:1px solid var(--line);color:#8498ad;background:0 0;border-radius:7px;padding:8px}.icon-button:hover{color:#fff;border-color:var(--line-strong)}.select-control{gap:7px;margin-bottom:14px;display:grid}.select-control>span,.range-heading{color:#a8b6c5;font-size:11px}.select-control select{border:1px solid var(--line);background:#0d1826;border-radius:7px;outline:none;width:100%;padding:9px 10px;font-size:12px}.select-control select:focus{border-color:#43c7ff8c}.select-control small,.range-control small{color:#64778a;font-size:9px;line-height:1.5}.select-control.featured{background:linear-gradient(135deg,#43c7ff12,#0000);border:1px solid #43c7ff33;border-radius:9px;padding:12px}.tab-list{border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin:16px 0;display:grid}.tab-list button{color:#66798d;background:0 0;border:0;border-bottom:2px solid #0000;padding:9px 0;font-size:11px}.tab-list button.active{color:#eaf2fa;border-bottom-color:var(--cyan)}.control-stack{min-height:405px}.range-control{gap:7px;margin-bottom:17px;display:grid}.range-heading{justify-content:space-between;align-items:baseline;display:flex}.range-heading output{color:#ecf5ff;font-variant-numeric:tabular-nums;font-size:11px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;accent-color:var(--cyan);background:#243243;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cyan);border:2px solid #07101d;border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #43c7ff66}.switch-control{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.switch-control span{gap:3px;display:grid}.switch-control b{font-size:11px;font-weight:500}.switch-control small{color:var(--muted);font-size:9px}.switch-control input{-webkit-appearance:none;appearance:none;background:#1f2c3b;border-radius:999px;width:34px;height:18px;transition:all .2s;position:relative}.switch-control input:after{content:"";background:#728397;border-radius:50%;width:12px;height:12px;transition:all .2s;position:absolute;top:3px;left:3px}.switch-control input:checked{background:#43c7ff52}.switch-control input:checked:after{background:var(--cyan);left:19px}.rail-actions{grid-template-columns:1fr .8fr;gap:8px;margin-top:18px;display:grid}.rail-actions button,.toolbar-actions button{border:1px solid var(--line);color:#9eb0c2;background:#0d1826;border-radius:7px;justify-content:center;align-items:center;gap:6px;padding:9px;font-size:10px;display:flex}.rail-actions button:hover,.toolbar-actions button:hover{color:#fff;border-color:#43c7ff66}.simulation-stage{background-image:linear-gradient(#7c9dbe06 1px,#0000 1px),linear-gradient(90deg,#7c9dbe06 1px,#0000 1px);background-size:28px 28px;min-width:0;padding:18px 20px 14px;overflow:hidden}.stage-toolbar{height:46px;margin-bottom:10px}.toolbar-actions{gap:7px;display:flex}.toolbar-actions button{background:#08101bc2;padding:7px 10px}.toolbar-actions .icon{width:14px;height:14px}.viewport-shell{border:1px solid var(--line);background:#050b14;border-radius:10px;height:min(55vh,570px);min-height:390px;position:relative;overflow:hidden;box-shadow:0 22px 60px #0000004d}.viewport-shell:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 40%,#0000 35%,#0000003d 100%);position:absolute;top:0;bottom:0;left:0;right:0}.three-scene,.three-scene canvas{width:100%;height:100%;display:block}.view-badge{z-index:2;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#050a12b3;border-radius:5px;align-items:baseline;gap:8px;padding:7px 9px;display:flex;position:absolute;top:14px}.view-badge span{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:9px}.view-badge strong{font-variant-numeric:tabular-nums;font-size:11px}.top-left{left:14px}.top-right{right:14px}.view-legend{z-index:2;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#050a12b8;border-radius:999px;gap:15px;padding:7px 11px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.view-legend span{color:#91a4b7;white-space:nowrap;align-items:center;gap:5px;font-size:9px;display:flex}.view-legend i,.chart-legend i{border-radius:50%;width:6px;height:6px;display:inline-block}.compression,.stress-dot{background:var(--orange);box-shadow:0 0 8px var(--orange)}.tension{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.phonon{background:var(--gold);box-shadow:0 0 8px var(--gold)}.viewport-note{z-index:2;color:#536579;font-size:8px;position:absolute;bottom:14px;right:14px}.transport{grid-template-columns:36px 64px 1fr 70px 36px;align-items:center;gap:8px;padding:11px 0 8px;display:grid}.transport button{border:1px solid var(--line);color:#aebccd;background:#0b1624;border-radius:6px;place-items:center;height:34px;display:grid}.transport .play-button{background:var(--cyan);color:#04101b;border-color:var(--cyan)}.transport .step-button{letter-spacing:.08em;font-size:9px}.transport>span{text-align:center;color:#8093a7;font-variant-numeric:tabular-nums;font-size:10px}.timeline-warning{color:#d5a76b;margin:-3px 0 7px 108px;font-size:9px}.chart-shell{border:1px solid var(--line);background:#080f19c7;border-radius:8px;height:174px;padding:10px 12px 4px}.chart-title{color:#a9b8c6;justify-content:space-between;align-items:center;font-size:10px;display:flex}.chart-legend{color:#6e8194;align-items:center;gap:6px;font-size:8px;display:flex}.chart-legend .risk-dot{background:var(--gold);margin-left:7px}.chart-shell svg{width:100%;height:140px;overflow:visible}.grid-line{stroke:#86a4c21a;stroke-width:1px}.stress-line,.risk-line{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.7px}.stress-line{stroke:var(--orange);filter:drop-shadow(0 0 3px #ff725473)}.risk-line{stroke:var(--gold);stroke-dasharray:4 4}.axis-label{fill:#53667a;font-size:8px}.insight-heading{margin-bottom:15px}.metric-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.metric-card{border:1px solid var(--line);background:linear-gradient(145deg,#121f2fd1,#09111cd1);border-radius:8px;flex-direction:column;justify-content:space-between;min-height:108px;padding:12px;display:flex}.metric-card.primary{background:linear-gradient(145deg,#2177972e,#09111cdb);border-color:#43c7ff40}.metric-card.risk{border-color:#ff72546b}.metric-card>span{color:#778a9e;font-size:9px}.metric-card strong{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:20px}.metric-card strong small{color:#8da1b5;margin-left:3px;font-size:9px;font-weight:500}.metric-card em{color:#5f7387;font-size:8px;font-style:normal}.progress{background:#1d2a38;border-radius:4px;height:3px;overflow:hidden}.progress i{background:linear-gradient(90deg, #277da1, var(--cyan));height:100%;box-shadow:0 0 8px var(--cyan);display:block}.observable-panel,.equation-panel,.validation-panel,.material-card{border:1px solid var(--line);background:#0a131fb3;border-radius:8px;margin-top:11px;padding:13px}.panel-title{border-bottom:1px solid var(--line);margin-bottom:8px;padding-bottom:9px;font-size:10px}.panel-title em{color:#65798e;font-size:8px;font-style:normal}.observable-panel dl,.material-card dl{margin:0}.observable-panel dl div{justify-content:space-between;padding:5px 0;display:flex}.observable-panel dt,.observable-panel dd{font-size:9px}.observable-panel dt{color:#71859a}.observable-panel dd{color:#d7e4ef;font-variant-numeric:tabular-nums;margin:0}.equation-panel{background:linear-gradient(145deg,#43c7ff0e,#0a131fb8)}.equation{color:#d9eaf7;overflow-wrap:anywhere;font-family:Georgia,serif;font-size:12px;line-height:1.7}.equation.small{color:#96afc4;font-size:10px}.equation-panel p,.validation-panel p{color:#667b8e;margin:7px 0 0;font-size:8px;line-height:1.55}.validation-panel ul{color:#c3a075;margin:0;padding-left:14px}.validation-panel li{margin-bottom:4px;font-size:8px;line-height:1.55}.validation-panel .valid{color:var(--green)}.material-card>span{margin-bottom:8px;font-size:10px;display:block}.material-card dl{grid-template-columns:1fr 1fr;gap:7px;display:grid}.material-card dl div{background:#ffffff06;justify-content:space-between;padding:5px 7px;display:flex}.material-card dt,.material-card dd{font-size:8px}.material-card dt{color:#61758a}.material-card dd{color:#afc0cf;margin:0}footer{border-top:1px solid var(--line);color:#4e6073;background:#050a12;justify-content:space-between;align-items:center;min-height:30px;padding:0 22px;font-size:8px;display:flex}.toast{color:#dff5ff;z-index:50;background:#081420f0;border:1px solid #43c7ff57;border-radius:7px;padding:10px 15px;font-size:10px;animation:.22s ease-out toast-in;position:fixed;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0006}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@media (max-width:1180px){.workspace{grid-template-columns:260px minmax(520px,1fr)}.insight-rail{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;grid-template-columns:220px 1fr 1fr;gap:12px;display:grid}.insight-heading{align-self:start;display:block}.metric-grid{grid-column:2/-1}.observable-panel,.equation-panel,.validation-panel,.material-card{margin-top:0}}@media (max-width:820px){.app-header{grid-template-columns:1fr auto;padding:0 14px}.app-header nav,.brand em{display:none}.workspace{display:block}.control-rail{border-right:0;border-bottom:1px solid var(--line)}.control-stack{min-height:0}.simulation-stage{padding:14px}.viewport-shell{height:52vh;min-height:360px}.viewport-note{display:none}.insight-rail{display:block}.metric-grid{margin-bottom:10px}.observable-panel,.equation-panel,.validation-panel,.material-card{margin-top:10px}footer{gap:18px;padding:8px 14px}}
