@font-face{font-family:Pretendard;src:url(assets/PretendardVariable.woff2) format('woff2');font-weight:100 900;font-display:swap}*{box-sizing:border-box}html,body{width:100%;height:100%}body{margin:0;background:#eff1ed;color:#183e48;font-family:Pretendard,Arial,sans-serif;overflow:hidden;transition:background 1.2s,color 1.2s}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,#stage:focus-visible{outline:2px solid #009c9d;outline-offset:5px}button{border:0;background:none}a{color:inherit;text-decoration:none}#stage{position:fixed;inset:0;touch-action:none;outline-offset:-3px}#stage canvas{display:block;width:100%;height:100%}header{position:fixed;top:36px;left:44px;right:44px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:3}header>*{pointer-events:auto}.wordmark{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650;letter-spacing:3px;line-height:1.2}.brand-small{display:block;font-size:8px;letter-spacing:3px;margin-top:6px;font-weight:500}.edition{font-size:9px;letter-spacing:2px;font-weight:500;display:flex;align-items:center;gap:14px;color:#6b7a79}.dot{width:4px;height:4px;border-radius:50%;background:#259895}.text-button{font-size:12px;padding:12px 0}.text-button span{margin-left:12px}.intro{position:fixed;top:19%;left:5.2%;pointer-events:none;z-index:2}.eyebrow{font-size:9px;letter-spacing:2px;margin:0 0 24px;font-weight:500}.intro h1{font-size:clamp(42px,4.65vw,80px);line-height:1.17;letter-spacing:-4px;font-weight:450;margin:0 0 22px}.intro h1 em{font-style:normal;color:#168c8b}.intro>p:not(.eyebrow){font-size:13px;line-height:1.9;color:#697a7b;letter-spacing:-.2px;margin:0}.explore{margin-top:30px;padding:0 0 10px;border-bottom:1px solid #b5c4bf;font-size:12px;display:flex;gap:42px;pointer-events:auto}.explore span{font-size:20px;line-height:14px}.scene-marker{position:fixed;right:45px;top:20%;display:flex;align-items:center;gap:16px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#728787}.marker-line{height:50px;width:1px;background:#c9d2cc}.tools{position:fixed;right:30px;top:50%;transform:translateY(-35%);display:flex;flex-direction:column;gap:4px;z-index:4}.tools button{width:38px;height:38px;border:1px solid #cbd5cf;border-radius:50%;background:#eff1edbb;font-size:23px;display:grid;place-content:center;transition:.2s}.tools button:hover,.tools button[aria-pressed=true]{background:#194c54;color:white;border-color:#194c54}.separator{height:8px}.control-dock{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);width:640px;z-index:4}.timeline{display:flex;align-items:center;gap:20px;padding:0 26px 20px}.timeline label{font-size:11px;white-space:nowrap;letter-spacing:.5px}.timeline output{min-width:48px;text-align:right;font-size:18px;font-weight:400;font-variant-numeric:tabular-nums}.timeline output span{font-size:10px;margin-left:3px;color:#7f9696}input[type=range]{flex:1;min-width:0;appearance:none;height:2px;border-radius:2px;background:linear-gradient(90deg,#258d8d var(--progress,0%),#bacbc5 var(--progress,0%));cursor:pointer;padding:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:#23686a;width:10px;height:10px;border-radius:50%;border:2px solid #eff1ed;box-shadow:0 0 0 1px #23686a}input[type=range]::-moz-range-thumb{background:#23686a;width:8px;height:8px;border-radius:50%;border:2px solid #eff1ed}.dock-main{border:1px solid #ffffffcc;border-radius:52px;padding:7px;display:flex;gap:20px;justify-content:space-between;align-items:center;background:#ffffffb8;backdrop-filter:blur(18px);box-shadow:0 10px 45px #2444390b}nav{display:flex;gap:4px}.scene{padding:16px 19px;border-radius:40px;font-size:12px;white-space:nowrap;transition:background .4s}.scene span{font-size:9px;margin-right:7px;opacity:.5}.scene.active{background:#1c4b53;color:white}.demo{display:flex;gap:10px;align-items:center;font-size:12px;margin-right:12px;white-space:nowrap}.demo small{font-size:9px;color:#829292;margin-left:8px}.demo #play-icon{font-size:10px;color:#148e90}.demo.playing #play-icon{color:#bc7659}footer{position:fixed;bottom:24px;left:44px;right:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none;z-index:3;color:#778b88;font-size:9px}.foot-brand{letter-spacing:1px;font-size:8px}.foot-brand span{margin:0 10px}.interaction-hint b{font-weight:400;margin:0 7px;color:#aab9b3}.concept{font-size:9px}.loading{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);font-size:12px;display:flex;gap:14px;align-items:center;letter-spacing:1px;transition:opacity .6s;pointer-events:none}.loading span{width:20px;height:20px;border:1px solid #a5bfba;border-top-color:#1b6e71;border-radius:50%;animation:spin 1.2s linear infinite}.loading.ready{opacity:0}@keyframes spin{to{transform:rotate(360deg)}}#labels span{position:fixed;pointer-events:none;border-left:1px solid #6caaa1;padding:6px 10px;font-size:11px;color:#25686a;opacity:0;transition:opacity .5s;background:#eff1edbb;backdrop-filter:blur(8px)}#labels i{display:block;font-style:normal;font-size:7px;letter-spacing:2px;margin-top:5px;opacity:.6}dialog{max-width:520px;width:calc(100% - 40px);border:1px solid #e2e8e1;border-radius:4px;padding:48px;background:#f5f6f0;color:#244b51;box-shadow:0 30px 100px #081f3240}dialog::backdrop{background:#0c2d344d;backdrop-filter:blur(10px)}dialog h2{font-size:34px;line-height:1.3;font-weight:450;letter-spacing:-1.5px;margin:0 0 28px}dialog p{font-size:13px;line-height:1.85;color:#668080}dialog .eyebrow{font-size:9px}.close{position:absolute;top:16px;right:20px;font-size:28px}.note{border-top:1px solid #d3dfd8;padding-top:20px;font-size:11px}.credits{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;margin:24px 0}.byline{font-size:8px;letter-spacing:1px}.error{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);padding:30px;background:#f5f6f0;z-index:10;width:340px}.error[hidden]{display:none}.error h2{font-size:20px}.error p{font-size:13px;line-height:1.7}.error button{padding:12px;background:#194c54;color:white;margin-top:10px}body.night{background:#091b29;color:#d5e8e3}body.night .intro h1 em{color:#62c9bf}body.night .intro>p:not(.eyebrow),body.night .edition,body.night footer{color:#8aa8b1}body.night .tools button{background:#142f3bcc;border-color:#3e5961}body.night .dock-main{background:#14303de0;border-color:#34525d}body.night .scene.active{background:#b9ded4;color:#173841}body.night #labels span{background:#163a46bb;color:#a1dbd1}body.night .timeline output span{color:#8aa8b1}body.night .demo small{color:#91aab2}body.night .demo #play-icon{color:#79d4ca}body.night input[type=range]::-webkit-slider-thumb{border-color:#123746;background:#99ddd1;box-shadow:0 0 0 1px #99ddd1}
@media(min-width:1600px){.intro{top:21%}.control-dock{bottom:80px}}
@media(max-width:1000px){header{left:26px;right:26px;top:26px}.edition{display:none}.intro{left:30px;top:15%}.intro h1{font-size:48px;letter-spacing:-3px}.intro>p:not(.eyebrow){font-size:12px}.scene-marker{right:26px;top:17%}.tools{right:18px}.foot-brand{display:none}footer{left:25px;right:25px}.control-dock{width:600px}.intro .eyebrow{font-size:8px}}
@media(max-width:640px){header{top:22px;left:20px;right:20px}.wordmark{font-size:14px;gap:7px;letter-spacing:2px}.wordmark svg{width:28px}.brand-small{font-size:6px;letter-spacing:2.5px}.text-button{font-size:10px}.intro{left:24px;top:105px}.eyebrow{font-size:7px!important;letter-spacing:1.4px;margin-bottom:15px}.intro h1{font-size:37px;letter-spacing:-2px;line-height:1.18;margin-bottom:12px}.intro>p:not(.eyebrow){font-size:10px;line-height:1.8}.explore{margin-top:15px;font-size:10px;gap:28px;padding-bottom:6px}.scene-marker{display:none}.tools{right:14px;top:45%;gap:6px}.tools button{height:31px;width:31px;font-size:19px}.separator{height:2px}.control-dock{width:calc(100% - 32px);bottom:54px;max-width:420px}.timeline{padding:0 10px 17px;gap:13px}.timeline label{font-size:10px}.timeline output{font-size:16px}.dock-main{padding:5px;gap:3px;border-radius:26px;flex-wrap:wrap;justify-content:center}.scene{padding:13px 16px;font-size:11px}.scene span{font-size:8px;margin-right:5px}.dock-main nav{width:100%;justify-content:center}.demo{width:100%;justify-content:center;border-top:1px solid #c4d3cd66;padding:12px 0 8px;margin:0;font-size:11px}.demo small{margin-left:0}footer{bottom:19px;left:20px;right:20px;justify-content:center}.interaction-hint{display:none}.concept{font-size:8px}.loading{font-size:10px;width:max-content}#labels span{font-size:9px;padding:5px 7px}#labels i{font-size:6px}dialog{padding:35px 28px}dialog h2{font-size:28px}}
@media(max-height:650px) and (min-width:641px){.intro{top:20%}.intro h1{font-size:40px}.intro .eyebrow{margin-bottom:14px}.intro>p:not(.eyebrow){display:none}.explore{margin-top:18px}.control-dock{bottom:45px}.timeline{padding-bottom:12px}footer{bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

body.immersive header,body.immersive .intro,body.immersive .scene-marker,body.immersive .control-dock,body.immersive footer{opacity:0;pointer-events:none}body.immersive header *,body.immersive .intro *{pointer-events:none}
/* 가독성 조정 2026-10-22: 강의장 화면·휴대폰에서 7~12px 글씨가 읽기 어려워 글씨와 조작 박스를 함께 키움 */
.wordmark{font-size:20px}.brand-small{font-size:10px;margin-top:7px}.edition{font-size:11px}.text-button{font-size:15px}
.eyebrow{font-size:12px;margin-bottom:26px}
.intro>p:not(.eyebrow){font-size:16px;line-height:1.8}
.explore{font-size:15px;margin-top:32px;padding-bottom:12px}.explore span{font-size:22px;line-height:16px}
.scene-marker{font-size:11px}
.tools{gap:6px}.tools button{width:44px;height:44px;font-size:24px}
.control-dock{width:760px}
.timeline{padding:0 30px 22px;gap:22px}
.timeline label{font-size:14px}
.timeline output{font-size:22px;min-width:58px}.timeline output span{font-size:13px}
input[type=range]{height:3px}
input[type=range]::-webkit-slider-thumb{width:14px;height:14px}
input[type=range]::-moz-range-thumb{width:12px;height:12px}
.dock-main{padding:8px}
.scene{padding:18px 24px;font-size:16px}.scene span{font-size:12px;margin-right:8px}
.demo{font-size:16px;margin-right:16px;gap:12px}.demo small{font-size:12px}.demo #play-icon{font-size:13px}
footer{font-size:12px}.foot-brand{font-size:11px}.concept{font-size:12px}
.loading{font-size:14px}
#labels span{font-size:14px;padding:8px 12px}#labels i{font-size:10px;margin-top:6px}
dialog p{font-size:15px}dialog .eyebrow{font-size:12px}.note,.credits{font-size:13px}.byline{font-size:11px}
.scene-marker{top:13%}.tools{transform:translateY(-20%)}
@media(max-height:950px){#scene-caption,.marker-line{display:none}}
@media(max-width:1000px){.control-dock{width:min(700px,calc(100% - 48px))}.intro>p:not(.eyebrow){font-size:15px}.intro .eyebrow{font-size:11px}}
@media(max-width:640px){.brand-small{font-size:8px}.text-button{font-size:13px}.eyebrow{font-size:10px!important;margin-bottom:16px}.intro>p:not(.eyebrow){font-size:13px}.explore{font-size:13px;margin-top:16px}.tools{gap:6px}.tools button{width:38px;height:38px;font-size:20px}.control-dock{width:calc(100% - 28px);max-width:440px}.timeline{padding:0 10px 16px;gap:14px}.timeline label{font-size:12px}.timeline output{font-size:18px;min-width:46px}.timeline output span{font-size:11px}.dock-main{padding:6px}.scene{padding:14px 16px;font-size:14px}.scene span{font-size:11px;margin-right:6px}.demo{font-size:14px;padding:12px 0 9px}.demo small{font-size:11px}.concept{font-size:11px}.loading{font-size:12px}#labels span{font-size:12px;padding:6px 9px}#labels i{font-size:9px}dialog p{font-size:14px}}
@media(max-height:650px) and (min-width:641px){.control-dock{bottom:40px}.timeline{padding-bottom:10px}.scene{padding:14px 20px}}