:root{--bg:#f6f7f9;--panel:#fff;--ink:#1f2430;--sub:#667085;--line:#e3e6ec;--pri:#2f5fd0;--pri-ink:#fff;--soft:#eaf0fd;--warn:#c0392b;--hl:#fff6c8;--paper:#fff;
--h0:#ebedf0;--h1:#c6e48b;--h2:#7bc96f;--h3:#239a3b;--h4:#196127}
@media(prefers-color-scheme:dark){:root{--bg:#14161a;--panel:#1c1f26;--ink:#e6e8ee;--sub:#9aa3b2;--line:#2c3140;--pri:#6b94f0;--pri-ink:#0d1220;--soft:#222c45;--warn:#ef7b6e;--hl:#4a4320;--paper:#20242d;
--h0:#242833;--h1:#33502f;--h2:#3f7d3d;--h3:#4fa84b;--h4:#6fd068}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 'Pretendard','Malgun Gothic',system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{background:var(--btn,var(--panel));border:1px solid var(--btn-line,var(--line));color:var(--btn-ink,inherit);border-radius:8px;padding:5px 11px;cursor:pointer}
button:hover{background:var(--btn-hover,var(--soft))}
button.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
button.ic{padding:4px 8px;border-radius:6px}
button.on{background:var(--btn-on,var(--soft));border-color:var(--pri);color:var(--btn-on-ink,inherit);font-weight:600}
button.danger{color:var(--warn)}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:-1px}
a{color:var(--pri)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.sub{color:var(--sub);font-size:12px}
.pill{display:inline-block;padding:1px 9px;border:1px solid var(--line);border-radius:99px;font-size:12px;background:var(--panel)}

/* 모달·토스트 */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:14px;padding:18px 20px;min-width:300px;max-width:min(980px,96vw);max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.modal h3{margin:0 0 10px}
.mbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.form{display:grid;grid-template-columns:90px 1fr;gap:8px 10px;align-items:center}
.form textarea{min-height:60px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:8px 16px;border-radius:99px;opacity:0;pointer-events:none;transition:.2s;z-index:60}
#toast.on{opacity:1;transform:translateX(-50%)}

/* 통계 히트맵 */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);gap:3px;overflow-x:auto;padding-bottom:4px}
.heat i{width:11px;height:11px;border-radius:2px;background:var(--h0)}
.heat i[data-l="1"]{background:var(--h1)}.heat i[data-l="2"]{background:var(--h2)}.heat i[data-l="3"]{background:var(--h3)}.heat i[data-l="4"]{background:var(--h4)}

/* 편집기 */
.ed{display:grid;grid-template-columns:260px 1fr;height:100vh}
.ed.pan{grid-template-columns:260px 1fr 340px}
.tree{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tree .head{padding:10px;border-bottom:1px solid var(--line);background:var(--soft)}
.tree .head b{display:block;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .tools{padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tree .tools{flex-wrap:wrap}.tree button{white-space:nowrap}.tree .foot{font-size:12px;gap:4px}
.tree .list{flex:1;overflow:auto;padding:6px 0}
.node{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.node:hover{background:var(--soft)}
.node.sel{background:var(--soft);font-weight:600}
.node.dropin{outline:2px dashed var(--pri)}
.node .tt{overflow:hidden;text-overflow:ellipsis}
.tree .foot{border-top:1px solid var(--line);padding:8px 10px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar .ttl{font-weight:600;margin-right:auto}
.mode button{border-radius:0}.mode button:first-child{border-radius:8px 0 0 8px}.mode button:last-child{border-radius:0 8px 8px 0}
.stage{flex:1;overflow:auto;padding:18px 12px 60px}
.statusbar{display:flex;gap:14px;padding:4px 12px;border-top:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--sub)}
.paper{background:var(--paper);max-width:var(--w,760px);margin:0 auto;padding:36px 44px;border:1px solid var(--line);border-radius:6px;min-height:70vh;font-size:var(--fs,16px);line-height:var(--lh,1.9)}
.novel-ta{width:100%;border:0;resize:none;background:transparent;font:inherit;line-height:inherit;min-height:60vh;padding:0}
.novel-ta:focus{outline:0}
.novel-pv p{margin:0 0 .8em;text-indent:1em}
.novel-pv mark{background:none;border-bottom:2px solid var(--pri)}
.panel{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ptabs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px 8px 0}
.ptabs+.ptabs{padding-bottom:8px;border-bottom:1px solid var(--line)}
.pgrp{width:30px;font-size:11.5px;color:var(--sub)}
.dd{position:relative;display:inline-block}
.menu{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:40;min-width:190px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(2,12,16,.22)}
.menu.open{display:block}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.menu .mi{display:flex;justify-content:space-between;gap:16px;width:100%;padding:8px 10px;background:none;border:0;border-radius:6px;text-align:left;white-space:nowrap}
.menu .mi:hover{background:var(--soft)}
.mi i{font-style:normal;color:var(--sub);font-size:12px}
.prod-app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.steps{display:flex;gap:6px;padding:8px 16px 0;background:var(--panel)}
.step{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:7px 12px;border-radius:10px;text-align:left}
.step b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg);font-size:12px}
.step small{overflow:hidden;color:var(--sub);font-size:11.5px;font-weight:400;white-space:nowrap;text-overflow:ellipsis}
.step.on{background:var(--btn-on,var(--soft));border-color:var(--pri);font-weight:600}
.step.on b{background:var(--pri);color:var(--pri-ink)}
.subtabs.prod-tabs{margin:0;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.pbody{flex:1;overflow:auto;padding:12px}
.pbody h4{margin:14px 0 6px;font-size:13px}.pbody h4:first-child{margin-top:0}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:3px 4px;text-align:left;vertical-align:middle}
.tbl th{font-size:12px;color:var(--sub);font-weight:600;position:sticky;top:0;background:var(--panel);z-index:1}
.tbl input,.tbl select,.tbl textarea{width:100%;border-color:transparent;background:transparent;padding:3px 4px}
.tbl input:hover,.tbl select:hover,.tbl textarea:hover{border-color:var(--line)}
.tbl textarea{resize:vertical;min-height:28px;height:28px}
.bars{display:flex;align-items:flex-end;gap:4px;height:80px}
.bars div{flex:1;background:var(--pri);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars div span{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)}

/* 시나리오 블록 */
.blk{display:grid;grid-template-columns:28px minmax(0,1fr) 46px;gap:4px;margin:2px 0;align-items:start}
.dir-btn{font-size:11px;padding:2px 4px;margin-top:3px;opacity:0;color:var(--sub)}
.blk:hover .dir-btn,.blk.selected .dir-btn,.dir-btn:focus-visible,.dir-btn.has{opacity:1}.dir-btn.has{color:var(--pri);border-color:var(--pri)}
.dir-box{grid-column:2;display:grid;gap:2px;margin:0 0 8px;padding:6px 8px;background:var(--soft);border-left:3px solid var(--pri);border-radius:4px;font-size:.9em}
.dir-box label{display:grid;grid-template-columns:104px minmax(0,1fr);gap:6px;align-items:start}.dir-box span{color:var(--sub);font-size:12px;padding-top:4px}
.dir-sc{cursor:default;min-height:0;margin-bottom:10px}.dir-sc textarea{width:100%;min-width:120px;resize:vertical;height:auto !important;white-space:pre-wrap;line-height:1.5}.dir-what{min-width:180px;max-width:280px}
.blk.dialogue .paren{display:block;width:100%;font-weight:400;text-align:left;font-style:italic;color:var(--sub);padding:0 6px}
.blk.dialogue:not(:hover):not(:focus-within) .paren:placeholder-shown{display:none}
.blk .g{color:var(--pri);font-size:11px;padding-top:6px;text-align:right;cursor:pointer;user-select:none}
.blk textarea,.blk input,.blk select{border-color:transparent;background:transparent}
.blk textarea{width:100%;resize:none;overflow:hidden;line-height:1.7;padding:2px 6px;display:block}
.blk:hover textarea,.blk:hover input,.blk:hover select{border-color:var(--line)}
.blk.scene .f{display:flex;gap:6px;margin-top:14px}
.blk.scene input{flex:1;font-weight:700;color:var(--pri)}
.blk.scene .no{font-weight:700;color:var(--pri);padding-top:5px;white-space:nowrap}
.blk.dialogue .f{display:grid;grid-template-columns:110px 1fr;gap:6px}
.blk.dialogue input{font-weight:700;text-align:right}
.blk.transition textarea{text-align:right;font-family:'Courier New',monospace}
.blk.selected{background:var(--soft);border-radius:6px}
.hint{font-size:12px;color:var(--sub);margin:0 auto 10px;max-width:var(--w,760px)}

/* 연출부 */
.prod{padding:12px 16px 60px;overflow:auto;height:100%}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.gridwrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel);max-height:62vh;resize:vertical;min-height:120px}
.gridwrap[style*="height"]{max-height:none}
.col-rs{position:absolute;top:0;right:0;bottom:0;width:10px;cursor:col-resize;touch-action:none;z-index:1}
.col-rs::after{content:"";position:absolute;top:20%;bottom:20%;left:8px;width:1px;background:var(--line)}
.col-rs:hover::after,.col-rs:focus-visible::after{width:3px;left:6px;background:var(--pri)}
.two{display:grid;grid-template-columns:200px 1fr;gap:14px}
.daylist button{display:block;width:100%;text-align:left;margin-bottom:4px}

/* 인쇄 */
#printRoot{display:none}
@media print{
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block;color:#000;background:#fff;font-family:'Malgun Gothic',serif}
  .pr-scene{font-weight:700;margin:14pt 0 4pt}
  .pr-dlg{margin:4pt 0 4pt 20%;width:60%}.pr-dlg b{display:block}
  .pr-tr{text-align:right;margin:4pt 0}
  .pr-paren{display:block;margin-left:10%}.pr-dir{margin:2pt 0 6pt 8%;padding:2pt 6pt;border-left:2pt solid #999;font-size:.85em;color:#444}
  .pr-p{margin:0 0 6pt;white-space:pre-wrap}
  .pr-tbl{width:100%;border-collapse:collapse;margin-bottom:12pt}.pr-tbl td,.pr-tbl th{border:1px solid #444;padding:3pt 5pt;font-size:10pt}
}
@media(max-width:900px){
  .ed,.ed.pan{grid-template-columns:1fr}
  .tree,.panel{display:none}
  .ed.showTree .tree{display:flex;position:fixed;inset:0 25% 0 0;z-index:20}
  .ed.pan .panel{display:flex;position:fixed;inset:0 0 0 12%;z-index:20}
  .paper{padding:22px 16px}
  .two{grid-template-columns:1fr}
}

/* ── 2차 추가: 테마 · 글꼴 변수 · 소설 구분 표기 · 표지 · 휴대폰 ── */
/* 크림: 종이(Flexoki·세피아 계열 #fcf8ec)에 먹갈색 잉크, 포인트는 녹색 계열(버튼은 명도 3단계) */
:root[data-theme="cream"]{--btn:#efe6cf;--btn-hover:#e5d9b9;--btn-line:#d2c5a2;--btn-ink:#4a3d27;--btn-on:#dccb9f;--btn-on-ink:#2b261c;
--bg:#ece4cf;--panel:#f6f0df;--paper:#fcf8ec;--ink:#2b261c;--sub:#6a604b;--line:#ddd3b8;--soft:#ebe3ca;--pri:#7a5232;--pri-ink:#fbf6e8;--warn:#a63d2f;--hl:#f1e2a0;
--h0:#e6dec6;--h1:#e2cfa0;--h2:#cfa972;--h3:#a97a4a;--h4:#7a5232}
:root[data-theme="gray"]{--bg:#dcdee2;--panel:#eceef1;--paper:#e6e8ec;--ink:#1f232b;--sub:#5d6470;--line:#c9ccd3;--soft:#d6d9df;--pri:#3d4f7a;--pri-ink:#fff}
:root[data-theme="navy"]{--bg:#0d1829;--panel:#13233a;--paper:#182b48;--ink:#e6edf7;--sub:#9fb3cf;--line:#2b4268;--soft:#203757;--pri:#7fb0ff;--pri-ink:#0b1626;--hl:#3a3f20}
:root[data-theme="green"]{--bg:#0d211a;--panel:#12291f;--paper:#163527;--ink:#e3f2ea;--sub:#9cc7b5;--line:#285a45;--soft:#1d4535;--pri:#6fd4a4;--pri-ink:#06150f}
.paper{font-family:var(--f-body,inherit);font-weight:var(--fw,400);text-align:var(--ta,left)}
.novel-ta{text-align:var(--ta,left);font-weight:inherit}
.novel-pv p{margin:0 0 var(--ps,.8em)}
.nv-break{text-align:center;color:var(--sub);margin:1.3em 0;letter-spacing:.35em}
.nv-h1{text-align:center;font-size:1.35em;margin:1.5em 0 .8em}
.nv-h2{font-size:1.12em;margin:1.3em 0 .5em;color:var(--pri)}
.blk.scene input{font-family:var(--f-scene,inherit)}
.blk.action textarea,.blk.transition textarea{font-family:var(--f-action,inherit)}
.blk.dialogue input{font-family:var(--f-char,inherit)}
.blk.dialogue textarea{font-family:var(--f-dlg,inherit)}
.pill.on{background:var(--soft);border-color:var(--pri)}
@media print{
  .pr-cover{page-break-after:always;text-align:center}.pr-cover img{max-width:100%;max-height:92vh}
  .pr-break{text-align:center;margin:10pt 0}.pr-h1{text-align:center}
  .pr-p{font-family:var(--f-body,inherit);margin:0 0 var(--ps,.8em);line-height:var(--lh,1.8);font-size:var(--fs,12pt)}
  .pr-scene{font-family:var(--f-scene,inherit)}.pr-dlg b{font-family:var(--f-char,inherit)}.pr-dlg{font-family:var(--f-dlg,inherit)}
}
.drag-ghost{position:fixed;z-index:9999;pointer-events:none;padding:3px 9px;border-radius:12px;background:var(--pri);color:var(--pri-ink);font-size:13px;box-shadow:0 2px 8px #0004}
.drop-on{outline:2px dashed var(--pri);outline-offset:-2px;background:var(--soft)}
.grip{display:inline-block;cursor:grab;user-select:none;-webkit-user-select:none;padding:0 6px;color:var(--sub)}   /* inline이면 touch-action이 먹지 않는다 */
.ed{height:100vh;height:100dvh}
.form.wide{grid-template-columns:90px minmax(0,1fr) 90px minmax(0,1fr)}
@media(hover:none){button,select,input{min-height:34px}}
@media(max-width:640px){
  .topbar{gap:5px;padding:6px 8px}.topbar button{padding:4px 8px;font-size:13px}
  .stage{padding:8px 4px 60px}.paper{padding:16px 12px;border-radius:0;border-left:0;border-right:0}
  .blk{grid-template-columns:24px minmax(0,1fr) 40px}.dir-box label{grid-template-columns:1fr}.blk.dialogue .f{grid-template-columns:76px 1fr}
  .form{grid-template-columns:70px 1fr}.form.wide{grid-template-columns:90px minmax(0,1fr)!important}
  .modal{min-width:0;padding:14px}
  .prod{padding:8px 8px 60px}
  .ed.showTree .tree{inset:0 18% 0 0}.ed.pan .panel{inset:0 0 0 6%}
  .heat{grid-template-rows:repeat(7,9px)}.heat i{width:9px;height:9px}
}

.panel-x{margin-left:auto}
@media(min-width:901px){.panel-x{display:none}}

.blk.scene input{min-width:0}.blk.scene .f{flex-wrap:wrap}.blk.scene select{min-width:0}.blk textarea,.blk input{max-width:100%}.paper{overflow-x:hidden}

/* ── 3차: 조용한 UI · 종이 느낌 ── */
::selection{background:color-mix(in srgb,var(--pri) 24%,transparent)}
textarea,input{caret-color:var(--pri)}
.card{border-radius:10px;box-shadow:0 1px 0 rgba(2,12,16,.04)}
.topbar{padding:6px 12px;gap:4px}
button.pri:hover{filter:brightness(1.12)}
button.danger{color:var(--warn)}
.paper{border-color:var(--line);border-radius:3px;box-shadow:0 1px 0 rgba(2,12,16,.04),0 10px 34px rgba(2,12,16,.07)}
.nv-h1{font-weight:600;letter-spacing:.04em}
.nv-h1::after{content:"";display:block;width:28px;height:1px;background:var(--line);margin:.7em auto 0}
.nv-break{opacity:.8}
.node.sel{box-shadow:inset 2px 0 0 var(--pri)}
.statusbar{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* 집중 모드 */
.focus-exit{display:none}
.ed.focus{grid-template-columns:1fr!important}
.ed.focus .tree,.ed.focus .panel,.ed.focus .topbar,.ed.focus .statusbar{display:none!important}
.ed.focus .focus-exit{display:block;position:fixed;top:10px;right:14px;z-index:5;opacity:.35;border-color:transparent;background:transparent;font-size:12px}
.ed.focus .focus-exit:hover{opacity:1;background:var(--soft)}
.ed.focus .stage{padding-top:8vh;padding-bottom:60vh}

/* 표시어 밑줄 · 활성 줄 강조 (js/marks.js) */
.ow{position:relative;flex:1;min-width:0}
.ow-bd{position:absolute;inset:0;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;overflow:hidden;box-sizing:border-box}
.ow-bd>span{transition:opacity .15s}.ow-bd .dim{opacity:.3}
.ow-ta{position:relative;background:transparent!important;-webkit-text-fill-color:transparent;width:100%;box-sizing:border-box}
.ow-ta::placeholder{-webkit-text-fill-color:var(--sub)}
.ow-ta::selection{background:rgba(110,140,220,.35)}
.mk-u{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-skip-ink:none}
.mark-bar{max-width:var(--w,760px);margin:0 auto 8px;gap:6px;align-items:center}
.mark-bar .mk{border-bottom:3px solid transparent}

/* 코르크보드 목차 (js/board.js) */
.cork{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:6px 2px}
.card{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-height:130px;display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:0 2px 0 rgba(2,12,16,.06);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(2,12,16,.12)}
.card .ct{font-weight:600;line-height:1.35}.card .cn{display:inline-block;min-width:20px;margin-right:6px;color:var(--sub);font-weight:400}
.card .cx{flex:1;font-size:12.5px;line-height:1.55;color:var(--sub);overflow:hidden}
.card .cf{display:flex;justify-content:space-between;gap:6px;font-size:11.5px}
.card .cg{display:inline-block;padding:2px 8px 2px 0;color:var(--sub);cursor:grab;touch-action:none}
.card.drop-on{outline:2px dashed var(--pri);outline-offset:2px}
@media(max-width:640px){.cork{grid-template-columns:repeat(2,1fr);gap:8px}.card{min-height:110px;padding:8px 10px}.statusbar{flex-wrap:wrap;gap:0 10px}#st2{order:9;width:100%}}
.card.tail{min-height:60px;align-items:center;justify-content:center;background:transparent;border-style:dashed;color:var(--sub);cursor:default;box-shadow:none}

/* ── 연출부: 필터·씬 상세·콘티·탑뷰 ── */
.filterbar{margin:6px 0}.filterbar select{max-width:100%;min-width:0}
.shot-sum{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:40%}
.td-act,.td-first{white-space:nowrap}
.tbl .td-first{position:sticky;left:0;z-index:2;background:var(--panel)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:25;box-sizing:border-box;width:min(400px,92vw);padding:14px;overflow:auto;background:var(--panel);border-left:1px solid var(--line);box-shadow:-10px 0 28px rgba(2,12,16,.18)}
.dl{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.vis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.pane{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.pane h4{margin:0 0 8px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.shot{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.shot.on{grid-column:1/-1;border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.shot.bad{border-color:var(--warn)}
.shot .art svg,.shot>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.shot.on{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:start}
.shot-ed select,.shot-ed input{flex:1 1 90px;min-width:0}
.shot.on .shot-ed{grid-column:2;grid-row:1 / span 2;padding:8px}
.flag{position:absolute;top:6px;left:6px;padding:1px 8px;border-radius:99px;background:var(--warn);color:#fff;font-size:11px}
.shot .m{display:flex;align-items:center;gap:6px;padding:6px 8px}
.shot p{margin:0 8px 8px}
.shot-ed{display:grid;gap:6px;padding:0 8px 8px;cursor:default}
.shot-ed textarea{box-sizing:border-box;width:100%}
.topsvg{display:block;width:100%;aspect-ratio:4/3;margin:8px 0;border-radius:6px;touch-action:none;user-select:none;-webkit-user-select:none}
.stage-plan .topsvg{max-width:720px}
.ax-msg{font-size:13px;color:var(--sub)}
.ax-msg.bad{color:var(--warn);font-weight:600}
.things{margin:8px 0}
.chip-x{padding:0 3px;background:none;border:0}
.viewsw{display:none}
@media(hover:none){.prod-app button,.prod-app select,.prod-app input,.menu .mi,.topbar button{min-height:44px}.chip-x{min-width:30px}}
.topbar{padding-top:max(6px,env(safe-area-inset-top))}
@media(max-width:640px){
  .topbar{position:relative}
  .dd{position:static}
  .menu{left:8px;right:8px}
  input,select,textarea{font-size:16px}
}
@media(max-width:600px){
  .steps{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .step{justify-content:center;padding:6px}.step small{display:none}
  .subtabs.prod-tabs{padding:6px 8px;overflow-x:auto;flex-wrap:nowrap}
  .subtabs.prod-tabs button{flex:none}
  .prod{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .gridwrap{max-height:none;height:auto!important;resize:none;min-height:0}
  .col-rs{display:none}
  .grid-cards,.grid-cards tbody{display:block}
  .grid-cards thead{display:none}
  .grid-cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;padding:10px 8px;border-bottom:2px solid var(--line)}
  .grid-cards td{padding:0;border:0}
  .grid-cards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--sub)}
  .grid-cards td input,.grid-cards td select,.grid-cards td textarea{box-sizing:border-box;min-width:0!important;border-color:var(--line)}
  .grid-cards .td-act,.grid-cards .td-first{grid-column:1/-1;display:flex;justify-content:flex-end;gap:6px}
  .tbl .td-first{position:static}
  .drawer{top:auto;left:0;width:auto;max-height:75dvh;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-left:0;border-radius:14px 14px 0 0}
  .vis{grid-template-columns:minmax(0,1fr)}
  .viewsw{display:flex;margin:8px 0}.viewsw button{flex:1}
  .shot-view.show-shots .c-top,.shot-view.show-top .c-shots{display:none}
  .shot-sum{display:none}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot.on{display:block}
  .shot.on .shot-ed{padding:0 8px 8px}
}
@media print{html,body{background:#fff!important}}

/* ── 4차: 마감(impeccable polish). 정체성은 그대로, 상태·접근성·브라우저 기본 표면을 팔레트에 맞춘다 ── */
:root{accent-color:var(--pri)}
:root[data-theme="navy"],:root[data-theme="green"]{color-scheme:dark;--warn:#ff9d8f}
:root[data-theme="gray"]{--sub:#565d69}
@media(prefers-color-scheme:dark){:root:not([data-theme="cream"]):not([data-theme="gray"]){color-scheme:dark}}
button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.modal:focus{outline:0}
.node:focus-visible{outline-offset:-2px}
.ico{flex:none;width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dd>button .ico{width:.9em;height:.9em;vertical-align:-.08em;opacity:.7}
.node .ico{color:var(--sub)}.node.sel .ico{color:var(--pri)}
.grip .ico,.cg .ico{stroke-width:2.8}
#toast{width:max-content;max-width:min(560px,calc(100vw - 32px));border-radius:12px;background:var(--ink);color:var(--paper);text-align:center;box-shadow:0 8px 24px rgba(2,12,16,.24)}
.ow-ta::selection{background:color-mix(in srgb,var(--pri) 24%,transparent)}
.node.sel{background:var(--btn-on,var(--soft));box-shadow:none}
.card.folder{border:1px solid var(--pri);background:var(--bg)}
.tree .tools{flex-wrap:nowrap;gap:3px}.tree .tools button{flex:none;padding:4px 5px;font-size:13px}
.pbody>button+button{margin-left:6px}
.blk.scene .g{padding-top:20px}
.statusbar,.tbl,.card .cf,.bk-d{font-variant-numeric:tabular-nums}
.modal{max-height:88dvh}
.ed.focus .focus-exit:focus-visible{opacity:1}
@media(hover:none){
  .ed.focus .focus-exit{opacity:.85;background:var(--btn,var(--panel));border-color:var(--btn-line,var(--line))}
  .w:hover .bk,.card:hover{transform:none}
  .topbar button.ic{min-width:44px}
  .card .cg,.grip{padding:10px 12px;margin:-8px 0 -8px -10px}
}
@media(max-width:640px){.hint:not(.row):not(.mode){display:none}}
@media(max-width:600px){#toast{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ── 5차: 여름 낮(2026-11-10). 코발트 하늘과 흰 구름, 맑은 종이 ── */
@font-face{font-family:'Gowun Batang';src:url(../fonts/GowunBatang-subset.woff2) format('woff2');font-display:swap}   /* KS X 1001 한글만 포함, 그 밖의 글자는 --disp 다음 글꼴로 */
:root{--disp:'Gowun Batang','Noto Serif KR','Batang','AppleMyungjo',serif;--sign:var(--warn)}
:root[data-theme="summer"]{color-scheme:light;--bg:#eaf1f6;--panel:#f6f9fb;--paper:#fff;--ink:#14304a;--sub:#4a6379;--line:#d5e1ea;--soft:#deeaf3;--pri:#14528f;--pri-ink:#fff;--warn:#b3341f;--hl:#fff0a6;--sign:#bf3d26;
--btn:#fff;--btn-hover:#deeaf3;--btn-line:#b7cbdb;--btn-ink:#14304a;--btn-on:#14528f;--btn-on-ink:#fff;--h0:#deeaf3;--h1:#b9d6ec;--h2:#7fb0d8;--h3:#3f7fb8;--h4:#14528f}
body{font-size:15px}
.lib,.prod-app,.modal,.panel,.stage,.statusbar{word-break:keep-all;overflow-wrap:break-word}
textarea,input,.ow-bd{word-break:normal}
::selection{background:color-mix(in srgb,var(--pri) 28%,transparent)}
button{border-radius:4px;padding:6px 14px;transition:background .16s,color .16s,border-color .16s}
button:disabled{opacity:.5;cursor:default}
button.ic{padding:5px 10px;border-radius:4px}
button.on{border-color:transparent}
input,select,textarea{border-radius:4px}
.pill{border-radius:3px}
.mode{display:inline-flex}.mode button:first-child{border-radius:4px 0 0 4px}.mode button:last-child{border-radius:0 4px 4px 0;margin-left:-1px}
.mode.hint{display:flex}
.ov{background:rgba(20,48,74,.45)}
.modal{border-radius:8px;border:1px solid var(--line);box-shadow:0 18px 48px rgba(20,48,74,.28)}
.modal h3{font:400 24px/1.25 var(--disp)}
.menu{border-radius:6px;box-shadow:0 10px 28px rgba(20,48,74,.22)}
.menu .mi{border-radius:4px}

/* 서재: 왼쪽 목록 + 오른쪽 세로 포스터 */
.lib:not(.home){max-width:420px;margin:12dvh auto 0;padding:0 16px}
.lib h2{margin:0 0 10px;font:400 30px/1.2 var(--disp)}
.lib.home{display:grid;grid-template-columns:minmax(0,1fr) calc(100dvh * .64);min-height:100dvh;background:var(--panel)}
.poster{grid-column:2;grid-row:1;position:sticky;top:0;align-self:start;height:100dvh;overflow:hidden;color:#fff;background:#14528f}
.poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.poster h1{position:absolute;top:5dvh;right:5%;margin:0;writing-mode:vertical-rl;font:400 4.4dvh/1.1 var(--disp);letter-spacing:.14em}
.poster p{position:absolute;top:5.6dvh;right:calc(5% + 6.4dvh);margin:0;writing-mode:vertical-rl;font:400 15px/1.2 var(--disp);letter-spacing:.2em}
.shelf{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:26px;min-width:0;min-height:100dvh;padding:24px clamp(16px,5vw,72px) 28px}
.hero-bar{display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.hero-bar button{border-color:transparent;background:none;color:var(--sub)}
.hero-bar button:hover{background:var(--soft);color:var(--ink)}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.shelf-t{margin:0!important;font:400 clamp(30px,2.6vw,36px)/1.2 var(--disp)!important}
.shelf-head button.pri{padding:11px 20px}
.lib-tabs{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.lib-tabs button{padding:0 0 9px;border:0;border-radius:0;background:none;color:var(--sub)}
.lib-tabs button:hover{background:none;color:var(--pri)}
.lib-tabs button.on{background:none;color:var(--ink);font-weight:400;box-shadow:inset 0 -2px var(--pri)}
.lib-tabs select{margin:-4px 0 5px auto;border-color:transparent;background:transparent;color:var(--sub)}
.works{margin-top:-26px}
.works>p.sub{margin:0;padding:22px 0;font:400 20px/1.4 var(--disp)}
.w{border-bottom:1px solid var(--line);cursor:pointer}
.w:focus-visible{outline-offset:-2px}
.bk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 20px;padding:18px 0}
.bk .t{overflow:hidden;font:400 23px/1.35 var(--disp);text-overflow:ellipsis;white-space:nowrap;transition:color .16s}
.w:hover .t{color:var(--pri)}
.bk-d{align-self:center;color:var(--sub);font-size:13px;font-variant-numeric:tabular-nums}
.bk-m{grid-column:1/-1;color:var(--sub);font-size:13.5px}
.more{display:none;flex-direction:column;gap:10px;padding:0 0 18px;cursor:default}
.w.open .more{display:flex}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;margin:auto 0 0;padding:0;list-style:none;color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.months li{display:flex;flex-direction:column;gap:4px}
.months i{display:block;background:var(--line)}
.months .wrote i{background:var(--h2)}
.months .now{color:var(--sign);font-weight:700}.months .now i{background:var(--sign)}
.shelf-note{margin:-8px 0 0}
@media(max-width:820px),(max-aspect-ratio:5/4){
  .lib.home{display:block}
  .poster{position:relative;height:60dvh}
  .poster img{object-position:50% 20%}
  .poster h1{top:max(24px,calc(env(safe-area-inset-top) + 12px));font-size:30px}
  .poster p{top:max(28px,calc(env(safe-area-inset-top) + 16px));right:calc(5% + 46px);font-size:14px}
  .shelf{min-height:0}
  .months{margin-top:8px}
}
@media(max-width:600px){
  .poster{height:auto;aspect-ratio:.64}
  .poster img{object-position:50% 100%}
  .poster h1{font-size:28px}
  .poster p{right:calc(5% + 42px);font-size:13px}
  .months{gap:3px}.months li{font-size:10.5px}
  .bk .t{font-size:21px}
}

/* 편집기·연출부 공통 */
:root[data-theme="summer"] .topbar{background:var(--pri);color:#fff;border-bottom:0}
:root[data-theme="summer"] .topbar>button,:root[data-theme="summer"] .topbar .mode button,:root[data-theme="summer"] .topbar .dd>button{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
:root[data-theme="summer"] .topbar>button:hover,:root[data-theme="summer"] .topbar .mode button:hover,:root[data-theme="summer"] .topbar .dd>button:hover{background:rgba(255,255,255,.18)}
:root[data-theme="summer"] .topbar button.on,:root[data-theme="summer"] .topbar button.on:hover{background:#fff;border-color:#fff;color:var(--pri)}
:root[data-theme="summer"] .topbar button:focus-visible{outline-color:#fff}
.topbar{position:relative;z-index:5;min-height:56px;padding:8px 14px;gap:6px}
.topbar .ttl{flex:1 1 160px;min-width:0;margin-right:auto;font:400 clamp(20px,1.9vw,26px)/1.2 var(--disp);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.menu .mi{color:var(--ink)}
.tree .head{min-height:56px;padding:14px 14px 8px;background:transparent;border-bottom:0}
.tree .head b{margin-bottom:8px;font:400 22px/1.2 var(--disp)}
.tree .tools{border-bottom:1px solid var(--line)}
.node{margin:1px 6px;padding:6px 10px;border-radius:4px}
.node.sel{background:var(--soft);color:var(--pri);font-weight:600;box-shadow:none}
.node .ico,.node.sel .ico{color:inherit}
.stage{background:var(--bg)}
.paper{border:0}
#st4{color:var(--pri);font-weight:600}
.ptabs button{padding:4px 10px;font-size:13px}
.pbody h4{font:400 19px/1.25 var(--disp)}
.blk.scene .no{font:400 1.25em/1 var(--disp);padding-top:6px}
.nv-h1{font-family:var(--disp);font-weight:400;font-size:1.7em;letter-spacing:0}
.nv-h1::after{background:var(--pri)}
.card{background:var(--paper);border-radius:4px;box-shadow:none}
.card:hover{box-shadow:0 8px 18px rgba(20,48,74,.14)}
.card .ct{font:400 19px/1.3 var(--disp)}
.pane,.gridwrap{border-radius:6px}
.prod .card{margin-bottom:14px;cursor:default}
.prod .card:hover{transform:none;box-shadow:none}
.info-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.info-two .card{margin:0}
.empty{margin:0 0 10px;font:400 21px/1.35 var(--disp)}
@media(max-width:900px){.info-two{grid-template-columns:minmax(0,1fr)}}
.step{border-radius:4px}
.steps,.subtabs.prod-tabs,.prod-app>.topbar{flex:none}
.prod-app .prod{flex:1;min-height:0;height:auto}
.prod-app{background:var(--bg)}
@media(min-width:601px){.steps{padding:10px 16px 0;background:transparent}.step{padding:9px 16px}}
.step>span{font:400 19px/1.15 var(--disp)}
.step b{background:var(--soft)}
.step.on{color:var(--btn-on-ink);border-color:transparent}
.step.on small{color:inherit;opacity:.85}
:root[data-theme="summer"] .step.on b{background:#fff;color:var(--pri)}
.subtabs.prod-tabs{background:transparent;border-bottom:0}
.drawer{border-left:0;box-shadow:-12px 0 32px rgba(20,48,74,.22)}
@media(max-width:640px){
  .topbar{flex-wrap:nowrap;padding:max(6px,env(safe-area-inset-top)) 8px 6px}
  .main .topbar:has(.mode){flex-wrap:wrap;gap:4px}
  .main .topbar:has(.mode) button{padding:4px 6px}
  .main .topbar:has(.mode) .dd>button .ico{display:none}
  .main .topbar:has(.mode) .ttl{order:-1;flex-basis:100%}
  .topbar .ttl{font-size:20px;flex-basis:60px}
  .step>span{font-size:17px}
  .mark-bar,.mode.hint{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
  .mark-bar>.sub{display:none}
  .mark-bar button,.mode.hint button{flex:none}
}

/* 봄 숲 테마: 숲 사이 빈터(전체 화면 그림) 가운데에 목록, 초원에는 달마다 들꽃. 그림은 img/spring-*.jpg·flower-*.png·buds.png */
:root[data-theme="spring"]{color-scheme:light;--bg:#edf2ed;--panel:#eef2df;--paper:#fff;--ink:#0f3f2c;--sub:#3a5f4c;--line:#cbdcc9;--soft:#dde8c2;--pri:#17694a;--pri-ink:#fff;--warn:#a3341f;--hl:#f3e6a6;--sign:#8f1d4c;
--btn:#fff;--btn-hover:#e2e9ce;--btn-line:#bcd0b6;--btn-ink:#0f3f2c;--btn-on:#17694a;--btn-on-ink:#fff;--h0:#e2ecd0;--h1:#c7dda5;--h2:#9cc47a;--h3:#5a9a5e;--h4:#17694a}
:root[data-theme="spring"] .topbar{background:#e4f0ee;border-bottom-color:var(--line)}
:root[data-theme="spring"] .tree{background:var(--panel)}
.lib.home.spring{position:relative;display:block;min-height:max(720px,100dvh);padding:16px 16px 206px;background:#cde8f1 url(../img/spring-wide.jpg) center bottom/cover no-repeat;isolation:isolate}
.spring-hd,.spring .shelf{width:min(600px,calc(100% - 8px));margin:0 auto}
.spring-hd{padding-top:26px;text-align:center}
.spring-hd h1{margin:0;font:400 clamp(44px,7vh,64px)/1.1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.spring-hd p{margin:10px 0 0;color:var(--sub);letter-spacing:.06em}
/* 목록은 종이 판 위에: 수채화가 살짝 비치되 글자는 그림과 섞이지 않게. backdrop-filter는 쓰지 않는다(안의 들꽃 .grove의 기준 상자가 판으로 바뀜) */
.spring .shelf{min-height:0;margin-top:22px;padding:18px clamp(16px,3vw,26px) 14px;gap:12px;background:#fbfaf0eb;border:1px solid #17694a24;border-radius:18px;box-shadow:0 18px 40px -18px #0f3f2c59,0 2px 6px #0f3f2c14}
/* 메뉴 줄: 흐름 안의 알약 막대. 접혀도 아래 제목을 밀어낼 뿐 겹치지 않는다 */
.spring .hero-bar{position:relative;z-index:1;justify-content:center;gap:2px;width:fit-content;max-width:calc(100% - 24px);margin:0 auto;padding:4px;background:#fbfaf0d1;border:1px solid #17694a29;border-radius:999px;box-shadow:0 6px 18px -8px #0f3f2c4d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.spring .hero-bar button{padding:7px 14px;border-radius:999px;font-weight:500}
.spring .hero-bar button{color:var(--ink)}
.spring .hero-bar button:hover{background:var(--soft)}
.spring .hero-bar button:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.spring .shelf-t{display:none}
.spring .shelf-head{justify-content:flex-end}
.spring .lib-tabs{flex-wrap:wrap;row-gap:8px;border-bottom-color:#426e6259}
.spring .lib-tabs button{color:var(--sub)}
.spring .works{margin-top:-10px}
.spring .bk{padding:12px 0;border-bottom:1px solid #426e6247}
.spring .bk-d,.spring .bk-m{color:var(--sub)}
.spring .shelf-note{margin:0;color:var(--sub);font-size:12.5px}
.spring .net-bar{background:#fff9;border-color:#17694a24}
.grove{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 32px));isolation:isolate}
.grove::before{content:"";position:absolute;z-index:-1;left:-12px;right:-12px;bottom:-18px;height:68px;background:linear-gradient(transparent,#eff2cde6 55%);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.meadow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;margin:0;padding:0;list-style:none;text-align:center}
.meadow li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.meadow .fl{display:flex;align-items:flex-end;justify-content:center;width:100%;height:148px}
.meadow img{display:block;max-width:100%;height:calc(48px + var(--h) * 1.1px);object-fit:contain;object-position:50% 100%}
.bud{display:block;width:26px;height:52px;background:url(../img/buds.png) no-repeat;background-size:400% 200%;background-position:var(--x) var(--y)}
.meadow span:not(.bud){padding:4px 0 1px;color:var(--ink);font-size:12px;line-height:22px;font-variant-numeric:tabular-nums}
.meadow .now span:not(.bud){color:var(--sign);font-weight:700;text-decoration:underline 2px;text-underline-offset:5px}
@media(max-width:820px){
  .lib.home.spring{padding:0;background:var(--panel)}
  .spring-hd{width:auto;height:125vw;min-height:420px;max-height:650px;padding:64px 20px 0;background:linear-gradient(transparent 85%,var(--panel)),url(../img/spring-tall.jpg) center bottom/cover no-repeat}
  .spring-hd h1{font-size:clamp(36px,11vw,56px);white-space:nowrap}
  .spring-hd h1,.spring-hd p{text-shadow:0 1px 14px #fbfaf0,0 0 4px #fbfaf0b3}   /* 폰은 제목 뒤가 나뭇잎이라 글자 둘레만 밝힌다 */
  .spring .shelf{width:auto;padding:0 22px 24px}
  .spring .hero-bar{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100% - 20px)}
  .spring .hero-bar button{padding:7px 10px;font-size:14px}
  .spring-hd{padding-top:118px}   /* 메뉴 줄이 두 줄로 접혀도 제목과 겹치지 않게 */
  .spring .shelf{margin:0 12px;padding:16px 16px 12px;border-radius:16px}
  .spring .lib-tabs{gap:14px}
  .grove{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:8px -22px 0;padding:36px 12px 20px;background:linear-gradient(var(--panel),#f3f6e7a6 25%,#f3f6e738 60%,#edf1c4d9),url(../img/spring-wide.jpg) center 85%/cover}
  .grove::before{display:none}
  .meadow .fl{height:64px}
  .bud{width:18px;height:36px}
  .meadow img{height:calc(28px + var(--h) * .35px)}
  .meadow span:not(.bud){font-size:11px;white-space:nowrap}
}
/* 튜토리얼(EPI-261110b): 강조 테두리는 클릭을 막지 않고, 말풍선만 누를 수 있다 */
.tour-ring{position:fixed;z-index:9000;pointer-events:none;border:3px solid var(--pri);border-radius:8px;box-shadow:0 0 0 9999px rgba(8,20,24,.28);transition:all .15s}
.tour-tip{position:fixed;z-index:9001;width:min(360px,calc(100vw - 16px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:12px 14px}
.tour-tip.free{left:50% !important;top:auto !important;bottom:16px;transform:translateX(-50%)}
.tour-tip p{margin:6px 0 10px;line-height:1.6}.tour-tip .row{gap:6px}.tour-hd{display:flex;justify-content:space-between;gap:8px}
.tour-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 6px;text-align:left}
@media(max-width:640px){.tour-tip,.tour-tip.free{left:8px !important;right:8px;top:auto !important;bottom:8px;width:auto;transform:none}.tour-tip.top{top:8px !important;bottom:auto}}

/* 온라인판(EPI-261110c): 계정 줄, 로그인 화면, 읽기 전용 표시 */
.net-bar{gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.net-bar a.btn{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:8px;color:inherit;text-decoration:none;background:var(--panel)}
.lib.auth{max-width:380px;margin:12vh auto 0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.lib.auth h1{font-family:"Gowun Batang",serif;margin:0 0 4px}.lib.auth h2{font-size:17px;margin:0 0 12px}
.ro-banner{margin:0 auto 10px;max-width:820px;padding:8px 12px;border-radius:8px;background:#fff4d6;color:#5b4300;border:1px solid #ecd28a;font-size:14px}
.prod-app.ro svg{pointer-events:none}
.fb.done{opacity:.6}
.adm{max-width:1200px;margin:0 auto;padding:16px}.adm-top{align-items:center;gap:10px;margin-bottom:10px}.adm-top h1{font-family:"Gowun Batang",serif;font-size:22px;margin:0}
.adm .card{padding:12px;margin:0 0 12px}.adm-tabs{margin:0 0 12px}.adm .perms{gap:10px;flex-wrap:wrap}.adm tr.off{opacity:.5}.adm td.pw{font-family:ui-monospace,monospace;font-size:16px;letter-spacing:1px}
.adm a.btn{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:8px;color:inherit;text-decoration:none}
@media print{.adm>*:not(.adm-made),.adm-made .row{display:none!important}.adm-made{border:0}}
#app:has(>.lib.auth){min-height:100dvh;padding:1px 16px;box-sizing:border-box;background:#cde8f1 url(../img/spring-wide.jpg) center bottom/cover no-repeat}
.lib.auth{background:#fbfaf0eb;box-shadow:0 18px 40px -18px #0f3f2c59}