/* AuteurDuet — 화면. 틀·편집기는 Auteur Box(style.css)와 같고, 색만 다릅니다(시안 C, 2026-09-26):
   바와 바탕이 따뜻한 짙은 색, 강조색은 아이콘의 놋쇠색. 켜자마자 Auteur Box와 다른 방인 것을 알 수 있게. */
:root{
  --bg:#1f1d1a; --panel:#2b2721; --line:#453e33; --fg:#e8e8ea; --dim:#8e8e93;
  --accent:#C9B896; --on-accent:#1c1c1e; --hover:#36312a;
  --vvh:100%; --vvt:0px;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"KoPub Dotum",-apple-system,sans-serif;
  -webkit-text-size-adjust:100%; overflow:hidden;
}
button{font-family:inherit}

/* ---- 두 화면 ---- */
#home,#app{display:none}
body.home #home{display:block; height:100%; overflow:auto}
body.room #app{display:flex}

/* ---- 작품 목록 ---- */
#homeBox{max-width:560px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 20px 60px}
#homeBox h1{font-size:22px; font-weight:700; margin:0 0 6px; letter-spacing:.01em}
#homeNote{color:#ff9f0a; font-size:13px; min-height:1em; margin:0 0 14px; white-space:pre-line}
#homeBtns{display:flex; gap:8px; flex-wrap:wrap}
#homeBtns button,.workDel{
  background:none; border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:7px 14px; font-size:14px; cursor:pointer;
}
#homeBtns button:hover,.workDel:hover{background:var(--hover)}
#btnNew{background:var(--accent) !important; border-color:var(--accent) !important; color:var(--on-accent) !important}
.hint{color:var(--dim); font-size:12px; margin:10px 0 22px}
#works{border-top:1px solid var(--line)}
.work{display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line)}
.workOpen{flex:1; min-width:0; display:flex; align-items:baseline; gap:12px; background:none; border:0; color:var(--fg);
  text-align:left; padding:13px 4px; cursor:pointer; font-size:15px}
.workOpen:hover .workTitle{text-decoration:underline; text-underline-offset:3px}
.workTitle{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.workWhen{color:var(--dim); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums}
.workDel{font-size:12px; padding:4px 9px; color:var(--dim)}
.foot{color:var(--dim); font-size:11px; margin-top:40px; text-align:right}

/* ---- 작품 화면 (Auteur Box와 같은 틀) ---- */
#app{height:100%; flex-direction:column}
body.kb #app{position:fixed; top:var(--vvt); left:0; right:0; height:var(--vvh)}
#bar{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 10px;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top); height:calc(44px + env(safe-area-inset-top));
}
#bar button{
  background:none; border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:5px 11px; font-size:13px; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
#bar button:hover{background:var(--hover)}
#bar .caret{font-size:9px; opacity:.7}
.gap{flex:1}
#net{font-size:12px; white-space:nowrap}
#net.offline,#net.connecting{color:#ff9f0a}
#peers{display:inline-flex; gap:8px; align-items:center; min-width:0; overflow:hidden}
.peer{display:inline-flex; align-items:center; gap:5px; color:var(--dim); font-size:12px; white-space:nowrap}
.peer::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c); flex:none}
#bar .peer.me{border:0; padding:4px 2px; color:var(--fg); font-size:12px}

#pubWrap,#shareWrap{position:relative; display:inline-block}
#pubMenu,#shareBox{
  display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:5;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:5px; box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#pubMenu{min-width:190px}
#pubMenu.show,#shareBox.show{display:block}
#bar #pubMenu button{display:flex; width:100%; justify-content:space-between; gap:12px; border:0; border-radius:6px;
  padding:8px 10px; text-align:left; white-space:normal}
#bar #pubMenu button small{color:var(--dim); font-size:11px; font-weight:300}
#shareBox{width:min(360px, calc(100vw - 20px)); padding:12px}
#shareBox p{margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--dim)}
#shareBox .row{display:flex; gap:6px}
#shareLink{flex:1; min-width:0; background:#191713; border:1px solid var(--line); color:var(--fg); border-radius:7px;
  padding:6px 8px; font-size:12px; font-family:ui-monospace,Menlo,monospace}

#main{display:flex; flex:1 1 auto; min-height:0}
#editorPane{flex:1 1 50%; height:100%; overflow:hidden; border-right:1px solid var(--line)}
#previewPane{flex:1 1 50%; height:100%; position:relative; background:#141416; min-width:0}
#engineHost{position:absolute; inset:0}
#engineMsg{position:absolute; left:24px; right:24px; top:24px; color:var(--dim); font-size:13px; line-height:1.6}
#btnView{display:none}
@media screen and (max-width:900px){
  #bar #btnView{display:inline-block}
  #main:not(.previewOnly) #editorPane{flex:1 1 100%; border-right:0}
  /* 조판은 숨기지 않고 화면 밖에 둡니다 — 엔진이 자리를 잴 수 있게(display:none이면 잴 수 없음) */
  #main:not(.previewOnly) #previewPane{position:absolute; left:-20000px; top:0; width:900px; height:100%; visibility:hidden}
  #main.previewOnly #editorPane{display:none}
  #main.previewOnly #previewPane{flex:1 1 100%}
}
@media screen and (max-width:600px){
  #bar{gap:4px; padding-left:8px; padding-right:8px}
  #bar button{padding:5px 8px; font-size:12px}
  #stats{font-size:11px; padding:5px 3px}
  #peers .peer:not(.me){font-size:0; gap:0}
  #bar .caret{display:none}
  /* 좁은 화면에서는 메뉴를 화면 폭에 맞춰 띄웁니다(바 단추 자리에 매달면 오른쪽이 잘림) */
  #pubMenu,#shareBox{position:fixed; left:8px; right:8px; top:calc(44px + env(safe-area-inset-top) + 6px); width:auto; min-width:0}
}

/* ---- 편집기 (Auteur Box style.css의 '본문 편집기'와 같음) ---- */
#editor,#editor .cm-editor{height:100%}
#editor .cm-editor{background:transparent; color:var(--fg); outline:0 !important}
#editor .cm-scroller{
  overflow:auto; -webkit-overflow-scrolling:touch;
  font-family:"KoPub Dotum",-apple-system,sans-serif; font-size:15px; line-height:1.75;
}
#editor .cm-content{padding:18px 0 220px; caret-color:var(--fg); word-break:keep-all; overflow-wrap:break-word}
@media (pointer:coarse){ #editor .cm-scroller{font-size:16px} }
#editor .cm-line{padding:0 20px}
#editor .cm-cursor{border-left-color:var(--fg)}
#editor .cm-content{position:relative}
/* 안내글은 흐름에서 빼 둡니다. 줄 안에 두면 첫 줄 커서가 안내글 높이만큼 커집니다(시험판에서 났던 일). */
#editor .cm-placeholder{color:var(--dim); opacity:.45; white-space:pre-wrap; position:absolute; left:20px; top:18px; pointer-events:none}
#editor .cm-activeLine{background:transparent}
#editor ::selection{background:rgba(201,184,150,.32)}
#editor .fl-scene{font-weight:700; color:#ffd60a}
#editor .fl-character{font-weight:700; color:#64d2ff}
#editor .fl-paren{color:#d1d1d6}
#editor .fl-dialogue{color:#f2f2f7; font-family:"KoPub Batang","KoPub Dotum",serif}
#editor .fl-transition{color:#ff9f0a; font-weight:700}
#editor .fl-section{color:#bf5af2; font-weight:700}
#editor .fl-synopsis{color:#8e8e93}
#editor .fl-title{color:#8e8e93}
#editor .fl-pagebreak{color:#8e8e93}
#editor .fm-note{color:#30d158}
#editor .fm-bold{font-weight:700}
#editor .fm-ul{font-weight:700; text-decoration:underline; text-underline-offset:2px}

/* 상대 커서 — 글 위 층 */
.dl-remote{pointer-events:none}
.dl-rcaret{position:absolute; width:0; border-left:2px solid var(--rc)}
.dl-rname{position:absolute; left:-2px; top:-1.3em; font:11px/1.25 -apple-system,sans-serif; color:#1c1c1e; background:var(--rc);
  padding:0 4px; border-radius:3px 3px 3px 0; white-space:nowrap; opacity:.9}
.dl-rsel{position:absolute; background:var(--rc); opacity:.22}
.dl-c0{--rc:#64d2ff} .dl-c1{--rc:#ff9f0a} .dl-c2{--rc:#30d158} .dl-c3{--rc:#bf5af2}
.dl-c4{--rc:#ff6482} .dl-c5{--rc:#ffd60a} .dl-c6{--rc:#ac8e68} .dl-c7{--rc:#5e5ce6}

/* ---- 확인 창 ---- */
#ask{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:10; padding:20px}
#ask.show{display:flex}
#askBox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; width:min(360px,100%)}
#askMsg{margin:0; font-size:14px; line-height:1.6; white-space:pre-line}
#askInput{width:100%; margin-top:14px; background:#191713; border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:8px 10px; font-size:16px; font-family:inherit}
#askBtns{display:flex; gap:8px; margin-top:18px; justify-content:flex-end}
#askBtns button{background:none; border:1px solid var(--line); color:var(--fg); border-radius:7px; padding:7px 14px; font-size:13px; cursor:pointer}
#askBtns button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
#askBtns button[hidden]{display:none}

/* ---- 입력 진단 ---- */
#log{position:fixed; right:10px; bottom:10px; width:min(560px, calc(100vw - 20px)); height:45vh; z-index:20; display:none;
  background:#111; border:1px solid #444; border-radius:9px; padding:8px; font:11px/1.45 ui-monospace,Menlo,monospace; color:#ccc}
#log.show{display:flex; flex-direction:column}
#log .row{display:flex; gap:6px; margin-bottom:6px; align-items:center}
#log .row span{color:#888}
#log button{background:#222; color:#eee; border:1px solid #444; border-radius:6px; padding:4px 10px; font:inherit}
#logText{flex:1; margin:0; overflow:auto; white-space:pre-wrap; word-break:break-all; -webkit-user-select:text; user-select:text}

/* ---- Auteur Box에서 그대로 가져온 것: 통계·배율·창·도움말·탐색 (style.css v3.13) ---- */
#navWrap{position:relative}
#stats{font-size:12px; color:var(--dim); white-space:nowrap; cursor:pointer; padding:5px 6px; border-radius:7px}
#stats:hover{background:var(--hover)}
#stats b{color:var(--fg); font-weight:600}
/* 조판 배율 — 배율을 손댔을 때만 뜹니다. 맞춤이면 아무것도 띄우지 않습니다.
   숫자가 보인다는 것 자체가 '내가 배율을 건드렸다'는 표시입니다.
   단추 사이에 끼는 자리라 통계 글자를 흉내 내면 혼자 1px씩 어긋나 보입니다.
   그래서 #bar button 모양을 그대로 물려받고 글자색만 흐리게 둡니다. */
#zoomWrap{position:relative; display:none}
#zoomWrap.on{display:inline-block}
#bar #zoomBadge{color:var(--dim); padding:5px 9px; white-space:nowrap}
#zoomMenu{
  display:none; position:absolute; top:calc(100% + 6px); right:0;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:5px; z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.45);
  align-items:center; gap:4px; white-space:nowrap;
}
#zoomMenu.show{display:flex}
#bar #zoomMenu button{border:0; border-radius:6px; padding:8px 12px; font-size:15px; line-height:1}
#bar #zoomMenu #zoomFit{font-size:13px; color:var(--dim); padding:8px 10px}
#zoomNow{font-size:12px; color:var(--fg); min-width:74px; text-align:center}

#modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:center; justify-content:center; z-index:10; padding:20px;
}
#modal.show{display:flex}
#confirmModal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:10; padding:20px; }
#confirmModal.show{display:flex}
#confirmBox{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; width:min(320px,100%); }
#confirmBtns{ display:flex; gap:8px; margin-top:18px; justify-content:flex-end; }
#confirmBtns button{ background:none; border:1px solid var(--line); color:var(--fg); border-radius:7px; padding:7px 14px; font-size:13px; font-family:inherit; cursor:pointer; }
#confirmBtns button.primary{ background:var(--accent); border-color:var(--accent); color:#fff }
#helpModal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:10; padding:20px; }
#helpModal.show{display:flex}
#helpBox{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; width:min(360px,100%); }
#helpBox h3{margin:0 0 14px; font-size:15px; font-weight:600}
#modalBox{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px; width:min(420px,100%); max-height:90vh; overflow:auto;
}
#modalBox h3{margin:0 0 14px; font-size:15px; font-weight:600}
#modalBox label{display:block; font-size:12px; color:var(--dim); margin:12px 0 4px}
#modalBox input,#modalBox textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:7px;
  color:var(--fg); padding:8px 10px; font-size:14px; font-family:inherit; outline:0;
}
#modalBox textarea{resize:vertical; min-height:56px}
#modalBtns{display:flex; gap:8px; margin-top:18px; justify-content:flex-end}
#modalBtns button{
  background:none; border:1px solid var(--line); color:var(--fg);
  border-radius:7px; padding:7px 14px; font-size:13px; font-family:inherit; cursor:pointer;
}
#modalBtns button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}


#navMenu{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  width:min(360px, calc(100vw - 16px)); background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:8px; z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#navMenu.show{display:block}
.navRow{display:flex; gap:6px; margin-bottom:8px; align-items:center}
.navRow input{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:7px;
  color:var(--fg); padding:6px 10px; font-size:14px; font-family:inherit; outline:0;
  -webkit-appearance:none; appearance:none;
}
#bar .navRow button{padding:6px 12px; font-size:13px}
#navFindN{color:var(--dim); font-size:12px; white-space:nowrap; text-align:right}
/* 쪽·씬 칸은 나란히 반씩. 숫자 칸의 위아래 화살표는 쓸 일이 없어 없앱니다. */
#navJump input{flex:1 1 0; min-width:0}
#navJump input[type=number]::-webkit-outer-spin-button,
#navJump input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
#navJump input[type=number]{-moz-appearance:textfield}
/* 찾기 칸은 한 줄을 다 쓰고, 개수와 앞뒤 버튼은 칸 안쪽 오른쪽에 얹습니다. */
#navFindRow{position:relative}
#navFindRow input{padding-right:96px}
#navFindTools{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:2px;
}
#bar #navFindTools button{
  padding:0; width:26px; height:26px; line-height:1; font-size:17px;
  border-radius:6px; color:var(--dim);
}
#bar #navFindTools button:hover{color:var(--fg)}
/* 도움말 — 조작 도구가 아니므로 눈에 띄지 않게 둡니다 */
#btnHelp{border:0; color:var(--dim); font-size:12px; padding:5px 6px}
#btnHelp:hover{background:var(--hover); color:var(--fg)}
#btnHelp .narrow{display:none}
#navTabs{display:flex; gap:4px; margin-bottom:6px}
#bar #navTabs button{padding:4px 10px; font-size:12px}
#navList{max-height:min(55vh, 440px); overflow:auto}
/* 원고 전체의 쪽·씬·글자 수. 좁은 화면에서 상단 통계가 쪽수만 남아도 여기서 볼 수 있습니다. */
#navTotals{
  margin-top:6px; padding-top:7px; border-top:1px solid var(--line);
  color:var(--dim); font-size:11.5px; text-align:center; white-space:nowrap;
}
#bar #navList button{
  display:flex; width:100%; gap:10px; align-items:baseline; border:0; border-radius:6px;
  padding:7px 8px; text-align:left; font-size:13px; font-weight:300; white-space:normal;
}
#bar #navList button b{color:var(--dim); font-weight:300; min-width:2em; text-align:right; font-variant-numeric:tabular-nums}
#bar #navList button span{flex:1}
#bar #navList button.section span{font-weight:700}
#bar #navList button i{color:var(--dim); font-style:normal; font-size:11px; white-space:nowrap}
#navEmpty{color:var(--dim); font-size:12px; padding:6px 8px}

#helpContent{font-size:13px; line-height:1.8}
#helpContent .row{display:flex; justify-content:space-between; margin-bottom:8px}
#helpContent code{font-family:ui-monospace,Menlo,monospace; color:var(--dim)}
#helpVer{margin:14px 0 0; font-size:11px; color:var(--dim); text-align:right}
#helpBtns{margin-top:18px; text-align:right}
#helpBtns button{background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); border-radius:7px; padding:7px 14px; font-size:13px; cursor:pointer}
#editor .fm-find{background:rgba(255,214,10,.22); border-radius:2px}
#editor .fm-findcur{background:rgba(255,159,10,.55); border-radius:2px}
#editor.plain .cm-line{color:var(--fg) !important; font-weight:400 !important; font-family:inherit !important}
#editor.plain .cm-line span:not(.fm-find):not(.fm-findcur){color:inherit !important; font-weight:inherit !important; text-decoration:none !important}
@media screen and (max-width:900px){
  #btnHelp .wide{display:none}
  #btnHelp .narrow{display:inline}
  #btnHelp{font-size:13px; padding:5px 7px}
}
@media screen and (max-width:620px){ #stats .more{display:none} }
@media screen and (max-width:600px){
  #navMenu{position:fixed; left:8px; right:8px; top:calc(44px + env(safe-area-inset-top) + 6px); width:auto; max-height:calc(100vh - 120px); overflow:auto}
}

/* ---- 인쇄 — 조판만 종이에(Auteur Box의 인쇄 규칙은 엔진이 그림자 안과 문서 쪽에 가져옴) ---- */
@media print{
  #bar,#editorPane,#home,#ask,#modal,#helpModal,#log,#engineMsg{display:none !important}
  html,body{height:auto; overflow:visible}
  body.room #app,#app{display:block !important; height:auto !important; position:static !important}
  #main{display:block !important; height:auto !important}
  #previewPane,#main:not(.previewOnly) #previewPane{position:static !important; left:auto !important; width:auto !important;
    height:auto !important; visibility:visible !important; background:#fff !important; display:block !important}
  #engineHost{position:static !important}
  #engineHost > div{height:auto !important}
}