/* ==========================================================================
   나무위키 문서 메이커 — 에디터 UI
   선 위주 구성 + One UI 계열의 넉넉한 여백 · 둥근 모서리 · 또렷한 위계
   (문서 자체의 스타일은 renderer.js 가 인라인으로 출력한다)
   ========================================================================== */
:root{
  --bg:#f0f2f5;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --line:#e4e7ea;
  --line-2:#d3d8dd;
  --fg:#17191c;
  --sub:#6a7178;
  --sub-2:#8b9299;
  --accent:#1a5fb4;
  --accent-soft:#eaf1fb;
  --danger:#c92a2a;
  --danger-soft:#fdeeee;
  --r-lg:10px;
  --r-md:7px;
  --r-sm:5px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"D2Coding",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);font-size:14px;color:var(--fg);background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;-webkit-text-size-adjust:100%;
  letter-spacing:-.01em;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:7px;cursor:pointer;
  white-space:nowrap;line-height:1;font-weight:600;transition:background .13s,border-color .13s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{background:#eceff2}
.btn.primary{background:var(--fg);border-color:var(--fg);color:#fff}
.btn.primary:hover{background:#000}
.btn.ghost{border-color:transparent;background:transparent;font-weight:500}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}

/* ---------- 상단 바 ---------- */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;height:58px;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;letter-spacing:-.03em}
.brand .logo{
  width:26px;height:26px;border-radius:6px;background:var(--fg);flex:0 0 auto;position:relative;
}
.brand .logo::before,.brand .logo::after{
  content:'';position:absolute;left:6px;height:2px;background:#fff;border-radius:2px;
}
.brand .logo::before{top:9px;width:14px}
.brand .logo::after{top:15px;width:9px}
.docname{
  height:34px;width:200px;padding:0 13px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);
}
.docname:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp{flex:1}

/* ---------- 서식 도구모음 ---------- */
.formatbar{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:9px 14px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.formatbar .grp{
  display:flex;align-items:center;gap:2px;padding:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:7px;
}
.tb{
  height:30px;min-width:30px;padding:0 11px;border:0;background:transparent;border-radius:7px;
  cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;color:#3a4046;white-space:nowrap;transition:background .12s;
}
.tb:hover{background:#e6eaee}
.tb:active{background:#dbe1e7}
.tb.b{font-weight:800}
.tb.i{font-style:italic}
.tb.u{text-decoration:underline}
.tb.s{text-decoration:line-through}
.tb.danger{color:var(--danger)}
.tb.danger:hover{background:var(--danger-soft)}
.tb.color{position:relative;padding:0 8px;overflow:hidden}
.tb.color .swatch{width:17px;height:17px;border-radius:3px;border:1px solid rgba(0,0,0,.18);display:block}
.tb.color .swatch.bg{border-radius:3px}
.tb.color input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.tb.sel{padding:0 6px;background:transparent;border:0;cursor:pointer;font-weight:600}

.tablebar{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 16px;
  background:var(--accent-soft);border-bottom:1px solid var(--line);
}
.tablebar[hidden]{display:none}
.tablebar .lbl{font-size:12px;font-weight:800;color:var(--accent);margin-right:4px}
.tablebar .tb{background:var(--surface);border:1px solid var(--line-2);height:28px}
.tablebar .tb:hover{background:#fff;border-color:var(--accent)}

/* ---------- 본체 ---------- */
main{flex:1 1 auto;display:grid;grid-template-columns:308px 1fr;gap:12px;padding:12px;min-height:0}

/* ---------- 사이드바 ---------- */
.side{
  display:flex;flex-direction:column;min-height:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.side-tabs{flex:0 0 auto;display:flex;padding:8px;gap:4px;border-bottom:1px solid var(--line)}
.side-tabs button{
  flex:1;height:32px;border:0;background:transparent;border-radius:7px;cursor:pointer;
  font-weight:700;color:var(--sub);transition:background .12s,color .12s;
}
.side-tabs button:hover{background:var(--surface-2)}
.side-tabs button[aria-pressed=true]{background:var(--fg);color:#fff}
.side-body{flex:1 1 auto;overflow:auto;padding:4px 0 24px}

.pane-sec{padding:16px 16px 4px;border-bottom:1px solid var(--line)}
.pane-sec:last-child{border-bottom:0}
.pane-h{
  display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:13px;font-weight:800;letter-spacing:-.02em;
}
.pane-h .muted{font-weight:500}
.pane-h .mini{margin-left:auto}
.mini{
  height:26px;padding:0 10px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:7px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;
}
.mini:hover{background:var(--surface-2)}
.muted{color:var(--sub)}
.small{font-size:11.5px;line-height:1.6}
p.muted{margin:8px 0 12px}

.field{margin:0 0 11px}
.field label{display:block;margin:0 0 5px;font-size:12px;font-weight:700;color:#454b51}
.field input[type=text],.field input[type=number],.field input[type=url],.field select,.field textarea,
.side-body input[type=text],.side-body textarea,.side-body select{
  width:100%;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);
}
.field textarea,.side-body textarea{height:auto;padding:8px 11px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus,
.side-body input:focus,.side-body textarea:focus,.side-body select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.field small{display:block;margin-top:5px;font-size:11.5px;color:var(--sub);line-height:1.55}
.field input[type=range],.side-body input[type=range]{width:100%;accent-color:var(--accent);height:26px;padding:0;border:0;background:transparent}
.chk{display:flex;align-items:center;gap:7px;margin:0 0 11px;font-size:12.5px;cursor:pointer}
.chk input{width:auto;height:auto;accent-color:var(--accent)}

/* 다이얼로그 안의 작은 서식 입력 칸 */
.richwrap{border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.richwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.richbar{display:flex;flex-wrap:wrap;gap:2px;padding:5px 6px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rb{height:26px;min-width:26px;padding:0 8px;border:0;background:transparent;border-radius:5px;cursor:pointer;
    font:inherit;font-size:12.5px;font-weight:600;color:#3a4046;line-height:1;
    display:inline-flex;align-items:center;justify-content:center}
.rb:hover{background:#e6eaee}
.rb.b{font-weight:800}
.rb.i{font-style:italic}
.rb.u{text-decoration:underline}
.rb.s{text-decoration:line-through}
.rb.color{position:relative;overflow:hidden;padding:0 7px}
.rb.color .sw{width:15px;height:15px;border-radius:3px;border:1px solid rgba(0,0,0,.18);display:block}
.rb.color input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;border:0;cursor:pointer}
.richfield{min-height:82px;max-height:230px;overflow:auto;padding:10px 12px;outline:0;
    font-size:13.5px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
.richfield a{color:var(--accent)}
.richfield [data-nw=spoiler]{background:#15171a;color:#15171a;border-radius:2px;padding:0 .2em}
.richfield:empty::before{content:attr(data-ph);color:var(--sub-2)}

.colorfield{display:flex;gap:7px;align-items:center}
.colorfield input[type=color]{
  width:38px;height:34px;flex:0 0 auto;padding:2px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;
}
.colorfield input[type=text]{flex:1 1 auto;min-width:0}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sw{width:26px;height:26px;border-radius:5px;border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0}
.sw:hover{transform:scale(1.08)}
.colorrow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:8px}
.colorrow span{display:flex;flex-direction:column;gap:3px}
.colorrow small{font-size:11px;color:var(--sub)}
.colorrow input[type=color]{width:36px;height:28px;padding:2px;border:1px solid var(--line-2);border-radius:5px;background:#fff;cursor:pointer}

/* 챕터 트리 */
.tree{list-style:none;margin:0;padding:0}
.tree.sub{margin-left:13px;padding-left:11px;border-left:1px solid var(--line)}
.tree .node{display:flex;align-items:center;gap:2px;padding:1px 0}
.tree .nm{
  flex:1;min-width:0;text-align:left;height:30px;padding:0 9px;border:0;background:transparent;
  border-radius:var(--r-sm);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
}
.tree .nm:hover{background:var(--accent-soft);color:var(--accent)}
.tree .nm i{color:var(--sub-2);font-style:normal}
.tree .ops{display:flex;gap:1px;opacity:0;transition:opacity .12s}
.tree .node:hover .ops,.tree .node:focus-within .ops{opacity:1}
.tree .ops button{
  width:23px;height:23px;border:0;background:transparent;border-radius:4px;cursor:pointer;
  font-size:12px;color:var(--sub);line-height:1;padding:0;
}
.tree .ops button:hover{background:var(--surface-2);color:var(--fg)}
.tree .ops button.danger:hover{background:var(--danger-soft);color:var(--danger)}

/* 묶음 / 행 목록 */
.grp{border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin:0 0 10px;background:var(--surface-2)}
.grp-h{display:flex;align-items:center;gap:5px;margin-bottom:8px}
.grp-h select{flex:1;min-width:0;height:30px}
.grp-h .ico{display:inline-flex;align-items:center;color:var(--sub);width:18px;height:18px}
.grp-h .ico svg{width:18px;height:18px}
.grp-h button{width:24px;height:24px;border:0;background:transparent;border-radius:4px;cursor:pointer;color:var(--sub);padding:0}
.grp-h button:hover{background:#e6eaee;color:var(--fg)}
.grp-h button.danger:hover{background:var(--danger-soft);color:var(--danger)}
.grp input[type=text],.grp textarea{background:var(--surface);margin-bottom:7px}
.grp .chk{margin:2px 0 8px}
.grp-f{display:flex;gap:6px;flex-wrap:wrap}
.rows{list-style:none;margin:0 0 8px;padding:0}
.rows li{display:flex;align-items:center;gap:3px;padding:3px 0;border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows .rl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.rows .rl i{color:var(--sub-2);font-style:normal}
.rows button{width:23px;height:23px;border:0;background:transparent;border-radius:4px;cursor:pointer;color:var(--sub);padding:0;font-size:12px}
.rows button:hover{background:#e6eaee;color:var(--fg)}
.rows button.danger:hover{background:var(--danger-soft);color:var(--danger)}
.addrow{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.addrow.wrap{flex-wrap:wrap}
.addrow input{flex:1;min-width:0}

/* ---------- 문서 영역 ---------- */
.docpane{
  display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.docpane-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--sub);
}
.docpane-head b{color:var(--fg);font-size:13px}
.docpane-head .stat{white-space:nowrap}
.docpane-head .stat b{font-weight:700}
.docpane-head select{height:28px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);padding:0 10px;cursor:pointer}
.doc-scroll{flex:1 1 auto;overflow:auto;background:var(--bg);padding:26px 20px 120px}
.doc-frame{
  margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 40px 46px;max-width:1000px;transition:max-width .16s;
}
.doc-frame.w-tablet{max-width:720px}
.doc-frame.w-mobile{max-width:400px;padding:22px 18px 30px}
.doc-frame.w-full{max-width:none}

/* 편집 중임을 알리는 최소한의 표시 (내보내기에는 없음) */
#nw-doc [contenteditable=true]:hover{background:rgba(26,95,180,.045);border-radius:3px}
#nw-doc [contenteditable=true]:focus{background:rgba(26,95,180,.06);border-radius:3px;outline:none}
#nw-doc .nw-body{padding:2px 4px;margin-left:-4px}
#nw-doc [data-nw=fn]{cursor:pointer}
#nw-doc .nw-fnwrap .nw-fnpop{user-select:none}
.doc-scroll{scrollbar-gutter:stable}
#nw-doc .nw-edit-fold{
  height:23px;padding:0 10px;border:1px solid var(--line-2);background:#fff;border-radius:7px;
  font-size:11px;font-weight:700;color:var(--sub);cursor:pointer;letter-spacing:0;
}
#nw-doc .nw-edit-fold:hover{border-color:var(--accent);color:var(--accent)}
#nw-doc summary{position:relative}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;background:rgba(16,20,24,.44);display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
.modal.on{display:flex}
#modal-form.on{z-index:60}
.modal-box{
  background:var(--surface);border-radius:var(--r-lg);width:min(880px,100%);max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden;
}
.modal-box.narrow{width:min(480px,100%)}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px 14px}
.modal-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.03em}
.modal-body{padding:4px 22px 18px;overflow:auto}
.modal-foot{display:flex;gap:8px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2)}
.opt-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:14px;font-size:13px}
.opt-row label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.opt-row input{accent-color:var(--accent)}
#outcode{
  width:100%;height:min(44vh,340px);border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px;
  font-family:var(--mono);font-size:12px;line-height:1.6;resize:vertical;background:var(--surface-2);
  white-space:pre;overflow:auto;
}
.hint{margin:11px 0 0;font-size:12.5px;color:var(--sub);line-height:1.7}
.hint code{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:.08em .35em}

.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doclist li{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:1px solid var(--line)}
.doclist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;cursor:pointer}
.doclist .nm:hover{color:var(--accent);text-decoration:underline}
.doclist .meta{font-size:11.5px;color:var(--sub);white-space:nowrap}
.doclist .tag{font-size:11px;border:1px solid var(--line-2);border-radius:7px;padding:2px 9px;color:var(--sub)}
.doclist .empty{justify-content:center;color:var(--sub);padding:34px 0}

.help h3{margin:20px 0 8px;font-size:14px;font-weight:800;letter-spacing:-.02em}
.help h3:first-child{margin-top:4px}
.help ul{margin:0;padding-left:19px;font-size:13px;line-height:1.85;color:#3d4349}
.help code{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:.08em .35em;font-size:12px}

#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);
  background:var(--fg);color:#fff;padding:11px 20px;border-radius:7px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:80;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  body{overflow:auto;height:auto}
  main{grid-template-columns:1fr;padding:10px}
  .side{max-height:420px}
  .doc-scroll{padding:14px 8px 60px}
  .doc-frame{padding:24px 18px 30px}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 12px}
  .docname{flex:1 1 140px;width:auto}
}