:root{--paper:#f2efe8;--surface:#faf8f4;--panel:#fff;--ink:#282722;--muted:#7c786f;--line:#ded8ce;--accent:#5e7e66;--accent-dark:#3e5e49;--warm:#c76d4e;--shadow:0 18px 50px rgba(50,43,34,.12)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink)}body,button,input,select{font-family:'DM Sans','Noto Sans KR',sans-serif}button,input,select{font:inherit;color:inherit}button{border:0;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(94,126,102,.25);outline-offset:2px}
#teacherGate{position:fixed;inset:0;z-index:2147482500;display:grid;place-items:center;padding:24px;background:var(--paper)}#teacherGate.off{display:none}.gate-card{width:min(440px,100%);padding:38px 34px;text-align:center;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}.gate-icon{width:68px;height:68px;margin:0 auto 18px;display:grid;place-items:center;border-radius:22px;background:#28342b;color:#fff;font-size:29px}.gate-card h1{margin:0 0 9px;font-size:23px}.gate-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.75}.gate-load{width:28px;height:28px;margin:24px auto 0;border:3px solid #e7e2da;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.gate-actions{display:none;justify-content:center;gap:8px;margin-top:20px}.gate-actions.show{display:flex}.gate-actions a{padding:11px 16px;border-radius:12px;text-decoration:none;font-size:13px;font-weight:700;background:#28342b;color:#fff}.gate-actions a.light{background:#f2efe8;color:#514d47}@keyframes spin{to{transform:rotate(360deg)}}
#app{height:100%;display:grid;grid-template-rows:68px minmax(0,1fr)}.topbar{display:flex;align-items:center;gap:13px;padding:0 20px;border-bottom:1px solid var(--line);background:rgba(250,248,244,.95);backdrop-filter:blur(18px);z-index:20}.back-btn{height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-decoration:none;font-size:11px;font-weight:750}.back-btn:hover{transform:translateX(-2px)}.back-arrow{font-size:18px}.brand{display:flex;align-items:center;gap:10px;min-width:245px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#28342b;color:#fff;font-size:20px}.brand-copy strong{display:block;font-size:14.5px}.brand-copy span{display:block;margin-top:1px;color:var(--muted);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.top-guide{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.top-guide i{width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-style:normal;font-size:9px;color:var(--accent)}.top-actions{margin-left:auto;display:flex;gap:7px}.top-btn{height:38px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:11px;font-weight:750}.top-btn:hover{border-color:#bbb3a7;transform:translateY(-1px)}.top-btn.primary{border-color:var(--accent);background:var(--accent);color:#fff}
.workspace{min-height:0;display:grid;grid-template-columns:286px minmax(380px,1fr) 300px}.panel{min-height:0;overflow:auto;background:var(--surface);scrollbar-width:thin}.panel.left{border-right:1px solid var(--line)}.panel.right{border-left:1px solid var(--line)}.section{padding:17px;border-bottom:1px solid var(--line)}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-head h2{margin:0;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}.section-head span{color:var(--muted);font-size:9.5px}
.category-tabs{display:flex;gap:5px;overflow:auto;padding-bottom:5px}.category-tab{flex:none;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:9.5px;font-weight:750}.category-tab.on{border-color:var(--accent);background:#edf4ef;color:var(--accent-dark)}.animal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.animal-card{min-width:0;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center;transition:.16s}.animal-card:hover{border-color:#b9b1a6;transform:translateY(-1px)}.animal-card.on{border-color:var(--accent);background:#eef5f0;box-shadow:inset 0 0 0 1px var(--accent)}.animal-card b{display:block;font-size:16px;line-height:1.1}.animal-card strong{display:block;overflow:hidden;margin-top:4px;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.animal-card small{display:block;margin-top:2px;color:var(--muted);font-size:7.5px}
.joint-state{padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fff}.joint-state strong{display:block;font-size:11px}.joint-state span{display:block;margin-top:3px;color:var(--muted);font-size:8.5px}.bone-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px;max-height:170px;overflow:auto}.bone-btn{min-width:0;padding:8px 7px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:left}.bone-btn strong{display:block;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.bone-btn small{display:block;margin-top:3px;color:#989187;font-size:7px;font-variant-numeric:tabular-nums}.bone-btn.on{border-color:var(--warm);background:#fff3ed;color:#9b492f}.axis-row{display:grid;grid-template-columns:18px 1fr 40px;align-items:center;gap:7px;margin-top:9px}.axis-row label{font-size:10px;font-weight:800}.axis-row input,.tone-row input,.timeline input{width:100%;accent-color:var(--accent)}.axis-row output,.tone-row output{color:var(--muted);text-align:right;font-size:9px;font-variant-numeric:tabular-nums}.nudge{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:9px}.nudge button{padding:6px 1px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:7.5px;font-weight:800}.hint{margin:10px 0 0;color:var(--muted);font-size:10px;line-height:1.55}.toggle-list{display:grid;gap:3px}.toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px 0;background:transparent;font-size:10.5px;font-weight:650}.switch{width:36px;height:21px;position:relative;border-radius:999px;background:#ccc6bc}.switch:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.18s}.switch.on{background:var(--accent)}.switch.on:after{transform:translateX(15px)}.swatches{display:flex;gap:7px}.swatch{width:29px;height:29px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--line)}.swatch.on{box-shadow:0 0 0 2px var(--ink);transform:scale(.9)}
.stage-shell{min-width:0;min-height:0;position:relative;display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 50% 42%,#fff 0,#ece9e2 75%);overflow:hidden}#frame{position:relative;display:grid;place-items:center;filter:drop-shadow(0 24px 36px rgba(45,39,31,.16))}#frame[data-ratio=portrait]{height:min(100%,820px);aspect-ratio:210/297}#frame[data-ratio=square]{width:min(100%,760px);aspect-ratio:1}#frame[data-ratio=wide]{width:min(100%,960px);aspect-ratio:16/9}.frame-mat{position:absolute;inset:0;padding:13px;border:1px solid #d6d0c6;border-radius:3px;background:#fff}.viewport{position:relative;width:100%;height:100%;overflow:hidden;background:#e9e4dc}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.model-loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:25px;background:rgba(237,233,226,.94);text-align:center}.model-loading[hidden]{display:none}.loading-card{display:grid;justify-items:center;gap:10px}.loading-spinner{width:34px;height:34px;border:3px solid #d6d0c6;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.loading-card strong{font-size:12px}.loading-card span{color:var(--muted);font-size:9.5px}.retry-btn{padding:8px 12px;border:1px solid var(--accent);border-radius:9px;background:#fff;color:var(--accent-dark);font-size:9px;font-weight:800}.retry-btn[hidden]{display:none}.frame-label{position:absolute;left:25px;bottom:17px;z-index:4;pointer-events:none;color:rgba(40,38,34,.52);font-size:7.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.stage-tools{position:absolute;left:50%;bottom:17px;z-index:8;display:flex;gap:4px;padding:5px;border:1px solid rgba(208,201,191,.9);border-radius:13px;background:rgba(255,255,255,.9);transform:translateX(-50%);backdrop-filter:blur(12px);box-shadow:0 10px 25px rgba(42,37,31,.1)}.view-btn{min-width:43px;padding:7px 8px;border-radius:8px;background:transparent;color:var(--muted);font-size:9.5px;font-weight:750}.view-btn:hover,.view-btn.on{background:#e9eee9;color:var(--ink)}.stage-note{position:absolute;top:13px;left:50%;z-index:7;padding:7px 11px;border-radius:999px;background:rgba(40,38,34,.78);color:#fff;font-size:9px;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.animation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.anim-btn{min-height:48px;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}.anim-btn strong{display:block;overflow:hidden;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.anim-btn small{display:block;margin-top:3px;color:var(--muted);font-size:7.5px}.anim-btn.on{border-color:var(--accent);background:#edf4ef}.timeline{margin-top:9px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}.timeline-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}.play-btn{width:30px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px}.timeline-label{min-width:0;overflow:hidden;font-size:9px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.timeline-time{margin-left:auto;color:var(--muted);font-size:8px;font-variant-numeric:tabular-nums}.empty{padding:16px 9px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center;font-size:9px;line-height:1.5}
.frame-options,.effect-grid{display:grid;gap:6px}.frame-options{grid-template-columns:repeat(3,1fr)}.effect-grid{grid-template-columns:repeat(2,1fr)}.option-btn{padding:9px 5px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:9px;font-weight:750}.option-btn.on{border-color:var(--accent);background:#edf4ef;color:var(--accent-dark)}.tone-panel{padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff}.tone-row{display:grid;grid-template-columns:43px 1fr 35px;align-items:center;gap:6px;margin-top:7px}.tone-row:first-child{margin-top:0}.tone-row label{font-size:8.5px;font-weight:700}.soft-btn{width:100%;margin-top:9px;padding:9px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:9px;font-weight:750}.source-card{padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:9px;line-height:1.5}.source-card strong{display:block;font-size:10px}.source-card span{display:block;margin:3px 0;color:var(--muted)}.source-card a{color:var(--accent-dark);font-weight:750}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.export-btn{padding:11px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:10px;font-weight:750}.export-btn.primary{grid-column:1/-1;border-color:var(--accent);background:var(--accent);color:#fff}.toast{position:fixed;left:50%;bottom:26px;z-index:2147481000;padding:10px 15px;border-radius:12px;background:#292824;color:#fff;font-size:11px;font-weight:650;opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){.workspace{grid-template-columns:250px minmax(340px,1fr) 270px}.top-guide{display:none}.animal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){html,body{overflow:auto}#app{height:auto;display:block}.topbar{position:sticky;top:0;min-height:62px;padding:9px 12px}.back-btn{width:38px;padding:0}.back-label,.brand-copy span,.top-btn .txt{display:none}.brand{min-width:0}.workspace{display:flex;flex-direction:column}.stage-shell{order:1;height:68vh;min-height:500px}.panel.left{order:2;border:0;border-top:1px solid var(--line)}.panel.right{order:3;border:0;border-top:1px solid var(--line)}.panel{overflow:visible}.animal-grid{grid-template-columns:repeat(4,1fr)}#frame[data-ratio]{max-width:100%;max-height:100%}}
@media(max-width:760px){.stage-note{width:max-content;max-width:calc(100% - 20px);white-space:normal;text-align:center;line-height:1.35}}
@media print{body>*{display:none!important}}