:root{--bg:#111215;--panel:#1d1e22;--raised:#26272d;--line:#36383f;--muted:#a7a9b4;--accent:#aaa5ff;--accent2:#7b73e5;color:#ebeaf0;background:var(--bg);font-family:Inter,'Segoe UI','Noto Sans KR',ui-sans-serif,system-ui,sans-serif}
#app,.overlay,.panel,button,.media-item,.clip,.track-labels,.timeline-area{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text}
.topbar{height:54px;background:#1d1e22;border-bottom:1px solid #41424a;padding-inline:18px;gap:11px;box-shadow:0 1px #0005}.brand{font-size:18px;letter-spacing:-.035em}.brand-icon{background:linear-gradient(145deg,#b7b0ff,#8c83f3);color:#1b1834;border-radius:7px;box-shadow:0 1px 7px #8f89f344}.brand:hover{color:#cfcbff}#projectName{font-size:13px;border-radius:5px;color:#e3e1eb}.saved{color:#aaaab1}.topbar .primary{background:#a7a1f8;color:#171522;font-size:13px;box-shadow:inset 0 1px #e9e6ff88}.topbar .subtle{padding:7px 12px}
.workspace{grid-template-columns:66px minmax(228px,295px) minmax(340px,1fr) minmax(252px,300px)}.panel{background:#202126}.rail{background:#1c1d21;border-color:#393a42;padding:12px 5px;gap:6px}.rail button{border-radius:6px;min-height:60px;font-size:12px;color:#b0b2bd;transition:background .15s,color .15s}.rail button span{font-weight:600;font-size:21px}.rail button.active{background:#353147;color:#d0c9ff;box-shadow:inset 2px 0 #aaa5ff}.rail button:hover{background:#313139}.assets,.inspector{border-color:#3a3b43;padding:18px 16px}.panel-heading{min-height:26px;border-bottom:1px solid #353640;padding-bottom:12px;margin-bottom:15px}.panel-heading h2{font-size:13px;font-weight:700;letter-spacing:.015em}.eyebrow{border:1px solid #454650;border-radius:4px;padding:3px 6px;font-size:11px;color:#bbbcc5}.panel-hint{color:#abaeb8;font-size:12px;line-height:1.6}.small-primary{background:#39354e;border:1px solid #716b9c;color:#d2ceff;font-size:12px;border-radius:5px;padding:6px 9px}.small-primary:hover{background:#51486e}.media-list{gap:6px;margin-top:16px}.media-item{grid-template-columns:51px minmax(0,1fr) auto auto;min-height:61px;border:1px solid #3d3e47;border-radius:6px;background:#292a31;padding:5px 7px;gap:8px}.media-item:hover{background:#30313a;border-color:#8680ad}.media-thumb{width:51px;height:46px;background:#3b3c47;border-radius:3px;color:#d0caff}.media-name{font-size:12px;font-weight:600}.media-meta{font-size:11px;color:#aaaab4}.media-add,.media-proxy{width:25px;height:25px;border-radius:4px;display:grid;place-items:center;font-size:17px;background:#393741;color:#d6d3f6}.media-proxy{font-size:11px;font-weight:800;background:#32394a;color:#aebde7}.media-proxy.ready{color:#b3dfd2;background:#28483f}.media-add:hover,.media-proxy:hover{background:#55516b}
.viewer{background:#17181b}.viewer-header{border-bottom:1px solid #303139;background:#202126;color:#c2c1cb;font-size:12px;font-weight:600;letter-spacing:.015em;padding:10px 15px}.viewer-header span+span{font-weight:400;color:#999aa5}.canvas-stage{background:#141519;padding:22px 28px}.canvas-stage canvas{border:1px solid #32333a;box-shadow:0 13px 40px #050506c7}.transport{height:53px;background:#202126;border-top:1px solid #35363d}.transport .icon-btn{font-size:19px;color:#c7c8d0}.transport .icon-btn:hover{color:white}.play{width:35px;height:35px;background:#aaa5ff;color:#1b1a29;font-size:15px}.timecode{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.025em}.inspector{padding-inline:17px}.inspector-body{gap:11px}.inspector h3{font-size:12px;color:#beb9ec;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin:16px 0 4px;border-bottom:1px solid #353640;padding-bottom:8px}.field{font-size:12px;color:#c6c7cf;gap:6px}.field input,.field select,.keyframe-controls input{background:#292a31;border-color:#484951;border-radius:5px;color:#f1f0f6;padding:7px 8px;min-height:32px}.field input:focus,.field select:focus,.keyframe-controls input:focus{border-color:#aaa5ff}.keyframe-field{display:grid;gap:6px;color:#c8c7cf;font-size:12px}.keyframe-controls{display:grid;grid-template-columns:minmax(0,1fr) 33px;gap:6px}.keyframe-controls input{width:100%}.keyframe-diamond{border:1px solid #494b55;border-radius:5px;background:#2a2b32;color:#777a85;font-size:15px}.keyframe-diamond:hover,.keyframe-diamond.active{color:#c0b9ff;background:#39344f;border-color:#817bb0}.inspector-actions button{background:#303137;border-color:#4a4b55}
.timeline-area{height:clamp(255px,34dvh,380px);background:#1c1d22;border-color:#484952}.timeline-toolbar{background:#24252a;height:43px;border-color:#414249}.timeline-toolbar strong{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#ececf2}.timeline-toolbar button{font-size:12px;color:#cbd0d8;border-radius:5px}.timeline-toolbar button:hover{background:#3b3d47;color:#fff}.timeline-toolbar #zoomRange{accent-color:#a9a5ff}.track-labels{background:#25262c;border-color:#43444c}.ruler-label{background:#282930;color:#c6c6ce;font-size:11px;letter-spacing:.05em}.track-label{color:#c3c5ce;font-weight:600;border-color:#3f4048}.ruler{background:#292a30;border-color:#45464d}.tick{color:#b9bbc6;border-color:#62636e}.track{border-color:#3b3c45;background-color:#23242a;background-image:linear-gradient(90deg,#31323a 1px,transparent 1px)}.track:nth-of-type(odd){background-color:#26272e}.clip{height:42px;top:7px;border-radius:4px;box-shadow:inset 0 1px #ffffff20,0 2px 7px #0004;outline:1px solid #ffffff2b;font-weight:600}.clip.video{background:linear-gradient(#575d89,#454a70)}.clip.image{background:linear-gradient(#5e7384,#485b6b)}.clip.text{background:linear-gradient(#775a85,#634872)}.clip.audio{background:linear-gradient(#3e766f,#2e615a)}.clip.selected{outline:2px solid #c6bdff;box-shadow:0 0 0 3px #a79cfe22}.trim-handle{background:#ffffff24}.playhead{background:#e9d7a6;width:2px}.playhead:before{background:#e9d7a6}.timeline-footer{background:#222329;color:#a8abb5;border-color:#3c3d46}
.home-card,.dialog{background:#222329;border:1px solid #56565d;border-radius:12px;box-shadow:0 32px 100px #050505ca}.home-card h1{font-size:27px}.home-card p{color:#bfc0ca}.project-card{background:#2d2e35;border-color:#484950;border-radius:6px}.project-card:hover{background:#393942}.primary{background:#aaa5ff;color:#1c1a29;border-radius:6px}.primary:hover{background:#c4bfff}.subtle{background:#303137;border-color:#4c4d56;border-radius:6px}.overlay{background:#09090bdc}.dialog{gap:14px}.export-progress .progress-bg{background:#44444d}.export-progress #progressBar{background:#aaa5ff}
@media(max-width:1130px){.workspace{grid-template-columns:62px minmax(200px,252px) minmax(260px,1fr)}.inspector{position:absolute;z-index:9;right:0;top:54px;bottom:clamp(255px,34dvh,380px);width:280px;box-shadow:-6px 0 22px #0006}.inspector:not(.open){display:none}}
@media(max-width:700px){.topbar{height:51px;padding:0 9px}.workspace{display:flex}.rail{padding:4px}.assets{height:150px;padding:10px 13px}.inspector{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:min(60dvh,470px);border-radius:14px 14px 0 0}.timeline-area{height:220px}.timeline-toolbar{height:43px}.media-list{display:flex}.media-item{min-width:165px}.canvas-stage{padding:6px 11px}.viewer-header{padding:6px 12px}.transport{height:43px}.brand{font-size:16px}}