:root{--bg:#0F1512;--panel:#161E1A;--panel2:#1C2621;--line:#2A3831;--fg:#E6EDE9;--muted:#8FA398;--acc:#3FB27F;--acc2:#12855A;--danger:#E05C5C}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13.5px/1.45 "Noto Sans","Noto Sans CJK KR","Malgun Gothic",system-ui,sans-serif}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--fg);border-radius:8px;padding:7px 12px}
button:hover{border-color:var(--acc)}
button.primary{background:var(--acc2);border-color:var(--acc2);color:#fff;font-weight:700}
button.danger{border-color:var(--danger);color:var(--danger)}
button.sm{padding:4px 8px;font-size:12px;border-radius:6px}
button:disabled{opacity:.45;cursor:default}
input,textarea,select{font:inherit;background:#0C1310;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:100%}
textarea{resize:vertical;min-height:54px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
/* login */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:50}
#login .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 36px;width:340px;text-align:center}
#login h1{font-size:18px;margin:0 0 4px}
#login p{color:var(--muted);margin:0 0 18px;font-size:12.5px}
#login input{font-size:26px;text-align:center;letter-spacing:12px;margin-bottom:12px}
#login .err{color:var(--danger);font-size:12px;min-height:16px;margin-top:6px}
/* app */
#app{display:grid;grid-template-rows:52px 1fr;height:100%}
header{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
header .brand{font-weight:800;color:var(--acc);margin-right:6px}
header .brand small{color:var(--muted);font-weight:400;margin-left:6px}
header .sp{flex:1}
header .status{color:var(--muted);font-size:12px;min-width:120px;text-align:right}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:6px 11px;background:transparent}
.seg button.on{background:var(--acc2);color:#fff}
main{display:grid;grid-template-columns:270px 1fr 400px;min-height:0}
aside,section#right{background:var(--panel);border-right:1px solid var(--line);overflow:auto;min-height:0}
section#right{border-right:0;border-left:1px solid var(--line)}
/* slide list */
#list{padding:8px}
#list .head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px;color:var(--muted);font-size:12px}
.sitem{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid transparent;border-radius:8px;cursor:pointer;user-select:none}
.sitem:hover{background:var(--panel2)}
.sitem.on{border-color:var(--acc);background:#15251D}
.sitem.off{opacity:.45}
.sitem .n{width:22px;color:var(--muted);font-size:11px;text-align:right}
.sitem .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .sec{font-size:10px;padding:1px 5px;border-radius:4px;background:#243129;color:var(--muted)}
.sitem input[type=checkbox]{width:auto;margin:0}
.sitem.drag{opacity:.35}
.sitem.over{border-top:2px solid var(--acc)}
/* center */
#center{display:flex;flex-direction:column;min-height:0;background:#0B100E}
#center .bar{display:flex;gap:8px;align-items:center;padding:8px 14px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
#stage{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;align-items:center;gap:22px}
.pv{transform-origin:top left;box-shadow:0 12px 40px rgba(0,0,0,.5);flex:none;background:#fff}
.pv-wrap{flex:none}
/* right */
#right .rp{padding:12px 14px}
#right h3{margin:8px 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.field{margin-bottom:10px}
.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.langrow{display:grid;grid-template-columns:1fr;gap:4px}
.langrow .lg{display:flex;gap:6px;align-items:flex-start}
.langrow .lg b{width:22px;font-size:10.5px;color:var(--acc);padding-top:8px}
.item{border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px;background:var(--panel2)}
.item .ih{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--muted);font-size:11.5px}
.item .ih .btns{display:flex;gap:4px}
.imgbox{border:1px dashed var(--line);border-radius:8px;padding:8px;margin-bottom:8px}
.imgbox img{max-width:100%;border-radius:6px;display:block;margin-bottom:6px;background:#000}
.imgbox .row{display:flex;gap:6px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow:auto;margin-top:6px}
.tiles img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;cursor:pointer;border:2px solid transparent;background:#000}
.tiles img:hover{border-color:var(--acc)}
.muted{color:var(--muted);font-size:12px}
.hint{font-size:11.5px;color:var(--muted);background:#121A16;border-left:3px solid var(--acc2);padding:6px 8px;border-radius:0 6px 6px 0;margin:6px 0 10px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:40}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;width:560px;max-width:92vw;max-height:86vh;overflow:auto}
.modal h2{margin:0 0 12px;font-size:16px}
.list{display:flex;flex-direction:column;gap:6px}
.list .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1C2621;border:1px solid var(--acc);color:var(--fg);padding:10px 16px;border-radius:8px;z-index:60;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.err{border-color:var(--danger)}

@media (max-width:900px){main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:auto} aside{max-height:30vh} section#right{max-height:45vh;border-left:0;border-top:1px solid var(--line)} header{flex-wrap:wrap;height:auto;padding:8px} #app{grid-template-rows:auto 1fr}}