/* ============================================================
   KWONMO — novel.css
   소설 작업실(목록·회차·집필) 전용. 수치·색은 val.css 토큰만 쓴다.
   집필 화면의 3단 골격·디바이더는 layout.css 의 split3 을 그대로 쓰고,
   여기서는 그 안쪽과 기기별 단 구성(파일 끝)만 그린다.
   ============================================================ */

/* ================= 공용 ================= */
/* display 를 선언한 요소에는 hidden 속성이 지고 만다(layout.css 의 .session-user 주석 참고).
   작업실은 시트·조건부 입력칸의 여닫이를 전부 hidden 으로 하므로 여기서 한 번에 되살린다. */
.nv-sheet[hidden], .nv-panel-head[hidden], .nv-field[hidden] { display: none; }
.nv-notice[hidden] { display: none; }

/* 지면에 안 오르는 이유처럼, 화면만 봐서는 알 수 없는 상태를 알려주는 줄 */
.nv-notice {
  display: flex; align-items: center; gap: var(--sp-md);
  margin-bottom: var(--sp-md); padding: var(--sp-sm) var(--sp-md);
  border-left: var(--stroke-3) solid var(--accent); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .82rem; color: var(--text-mid);
}
.nv-notice span { flex: 1; }

.nv-stage { max-width: var(--page-max); margin-inline: auto; padding: var(--sp-lg); }

.nv-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-md); margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm); border-bottom: var(--rule-w) solid var(--rule-ink);
}
.nv-bar-btns { display: flex; gap: var(--sp-sm); }
.nv-h1 { font-family: var(--ed-display); font-size: 1.6rem; color: var(--text); }
.nv-h2 { font-size: 1.1rem; margin-bottom: var(--sp-md); color: var(--text); }
.nv-sub, .nv-crumb { font-size: .82rem; color: var(--text-dim); }
.nv-crumb a { color: var(--text-dim); }
.nv-hint { font-size: .75rem; color: var(--text-dim); }
.nv-empty { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }
.nv-empty-sm { padding: var(--sp-md); font-size: .8rem; color: var(--text-dim); }
.nv-spacer { flex: 1; }

.nv-btn {
  padding: .4rem .85rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer;
}
.nv-btn:hover { border-color: var(--accent); color: var(--accent); }
.nv-btn-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.nv-btn-on:hover { color: var(--bg); opacity: .88; }
.nv-btn-danger { border-color: var(--danger); color: var(--danger); }
.nv-btn-sm { padding: .25rem .5rem; font-size: .78rem; }
.nv-icon-btn {
  padding: 0 .4rem; border: 0; background: none; color: var(--text-dim);
  font: inherit; cursor: pointer; line-height: 1;
}
.nv-icon-btn:hover { color: var(--accent); }

.nv-tag {
  display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: .72rem; white-space: nowrap;
}
.nv-tag-on { background: var(--accent); color: var(--bg); }
.nv-tag-done { color: var(--text); }

/* ================= 작품 목록 ================= */
.nv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-md); }
.nv-card {
  padding: var(--sp-md); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
}
.nv-card:hover { border-color: var(--accent); }
.nv-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm); }
.nv-card-head h2 { font-family: var(--ed-display); font-size: 1.15rem; }
.nv-card-tags { display: flex; gap: .3rem; margin: var(--sp-sm) 0; }
.nv-card-sum {
  font-size: .82rem; color: var(--text-mid); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nv-card-stat { display: flex; gap: var(--sp-md); margin-top: var(--sp-md); }
.nv-card-stat dt { font-size: .68rem; color: var(--text-dim); }
.nv-card-stat dd { font-size: .85rem; color: var(--text); }

/* ================= 회차 목록 ================= */
.nv-eps { display: flex; flex-direction: column; gap: .3rem; }
.nv-ep {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: .55rem var(--sp-sm); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
.nv-ep:hover { border-color: var(--accent); }
.nv-ep.is-drag { opacity: .4; }
.nv-ep-grip { color: var(--text-dim); cursor: grab; }
.nv-ep-no { min-width: 4.5rem; font-size: .8rem; color: var(--accent); }
.nv-ep-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-ep-chars { font-size: .75rem; color: var(--text-dim); }

/* ================= 시트(모달) ================= */
.nv-sheet {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--sp-md); background: rgba(0, 0, 0, .55);
}
.nv-sheet-box {
  width: min(46rem, 100%); max-height: 88dvh; overflow-y: auto;
  padding: var(--sp-lg); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md); background: var(--bg);
}
.nv-sheet-narrow { width: min(30rem, 100%); }
.nv-sheet-foot { display: flex; gap: var(--sp-sm); margin-top: var(--sp-lg); }

.nv-field { display: block; margin-bottom: var(--sp-md); }
.nv-field > span { display: block; margin-bottom: .25rem; font-size: .78rem; color: var(--text-dim); }
.nv-field > span em { font-style: normal; opacity: .75; }
.nv-field input, .nv-field select, .nv-field textarea {
  width: 100%; padding: .45rem .6rem; border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font: inherit; font-size: .88rem;
}
.nv-field textarea { resize: vertical; line-height: 1.6; }
.nv-row { display: flex; gap: var(--sp-md); }
.nv-row .nv-field { flex: 1; }
.nv-field-sm { flex: 0 0 9rem; }
.nv-check { display: flex; align-items: center; gap: .4rem; margin-bottom: var(--sp-sm); font-size: .82rem; }

/* ================= 집필 화면 ================= */
/* 첫 진입 기본 비율 1:2:1. 드래그로 바꾸면 그 값이 세션에 남아 여기보다 우선한다
   (layout.js 의 initSplit — 키는 data-key="novel-write"). */
.nv-write.split[data-panels="3"] { --panel-1: 25%; --panel-2: 50%; --panel-3: 25%; }
.nv-write .panel { padding: 0; display: flex; flex-direction: column; min-height: 0; }

.nv-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  padding: .5rem var(--sp-sm); border-bottom: var(--hairline) solid var(--line);
  background: var(--surface);
}
.nv-panel-title { font-size: .75rem; letter-spacing: .04em; color: var(--accent); }
.nv-panel-note { font-size: .7rem; color: var(--text-dim); }

.nv-mini-select, .nv-mini-input {
  padding: .2rem .35rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: .75rem;
}
.nv-mini-input { flex: 1; min-width: 0; }

/* ---- 좌: 버튼 콘솔 + 목차 + 메모 ---- */
.nv-left { overflow: hidden; }
.nv-console {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  padding: .5rem .2rem; border-bottom: var(--hairline) solid var(--line);
}
.nv-console a.nv-btn { text-decoration: none; }
.nv-toc { max-height: 22%; overflow-y: auto; padding: var(--sp-sm); }
.nv-toc li { margin-bottom: .2rem; }
.nv-toc button {
  width: 100%; padding: .2rem .3rem; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-mid); font: inherit; font-size: .8rem;
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-toc button:hover { background: var(--surface); color: var(--accent); }
/* 같은 목록에 구분 제목과 구분 메모가 섞이므로 어느 쪽인지 표시한다 */
.nv-toc button.nv-toc-memo { padding-left: .9rem; }
.nv-toc button.nv-toc-memo::before {
  content: "·"; position: absolute; margin-left: -.6rem; color: var(--accent);
}
.nv-toc li { position: relative; }

/* 카드가 앵커와 같은 높이에 절대배치된다(novel-write.js 의 layoutMemos).
   트랙이 따로 스크롤되면 높이가 어긋나므로 여기서는 잘라낸다 — 본문 스크롤이 위치를 옮긴다. */
.nv-memo-track { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.nv-orphans { max-height: 26%; overflow-y: auto; padding: var(--sp-sm); }

.nv-memo {
  position: absolute; left: var(--sp-sm); right: calc(var(--sp-sm) + .5rem);
  padding: .4rem .55rem; border-left: var(--stroke-3) solid var(--text-dim);
  border-radius: var(--radius-sm); background: var(--surface);
  font-size: .78rem; cursor: pointer;
}
.nv-memo:hover { background: var(--surface-2); }
.nv-memo.is-done { opacity: .55; }

/* 가이드선 — 카드에서 본문 쪽으로 뻗는다. 패널 경계를 넘지 않고 눈높이만 맞춘다 */
.nv-memo::after {
  content: ''; position: absolute; top: .9rem; right: -.5rem; width: .5rem;
  border-top: var(--hairline) dashed var(--text-dim);
}
.nv-memo-head { display: flex; gap: .3rem; margin-bottom: .2rem; }
.nv-memo-kind { font-size: .68rem; color: var(--accent); }
.nv-memo-done { font-size: .68rem; color: var(--text-dim); }
.nv-memo-body { line-height: 1.5; color: var(--text); }
.nv-memo-anchor {
  margin-top: .2rem; font-size: .7rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-memo-orphan { position: static; margin-bottom: .3rem; border-left-color: var(--danger); }
.nv-memo-orphan::after { display: none; }

.nv-memo-revise     { border-left-color: var(--cat-note); }
.nv-memo-link       { border-left-color: var(--cat-work); }
.nv-memo-fact       { border-left-color: var(--accent); }
.nv-memo-question   { border-left-color: var(--text-mid); }
.nv-memo-divider    { border-left-color: var(--rule-ink); }

/* 본문 안 하이라이트. Delta 에 저장되지 않고 화면에서만 입혀진다 */
.nv-mm-revise     { border-bottom: var(--stroke-2) solid var(--cat-note); }
.nv-mm-link       { border-bottom: var(--stroke-2) solid var(--cat-work); }
.nv-mm-fact       { border-bottom: var(--stroke-2) solid var(--accent); }
.nv-mm-question   { border-bottom: var(--stroke-2) dotted var(--text-mid); }
.nv-mm-divider    { border-bottom: var(--stroke-2) double var(--text-mid); }

/* ---- 중: 본문 ---- */
.nv-mid { background: var(--bg); }
.nv-write-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  padding: .4rem var(--sp-sm); border-bottom: var(--hairline) solid var(--line);
}
.nv-write-id { display: flex; align-items: center; gap: var(--sp-sm); min-width: 0; }
.nv-write-id .nv-mini-select { max-width: 18rem; }
.nv-write-state { display: flex; align-items: center; gap: var(--sp-sm); font-size: .72rem; }
.nv-chars { color: var(--text-dim); }
.nv-save { color: var(--text-dim); }
.nv-save-wait { color: var(--text-mid); }
.nv-save-ok { color: var(--cat-work); }
.nv-save-fail { color: var(--danger); }

.nv-toolbar.ql-toolbar.ql-snow {
  border: 0; border-bottom: var(--hairline) solid var(--line);
  padding: .25rem var(--sp-sm);
  display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
}
.nv-toolbar.ql-toolbar.ql-snow .ql-formats { margin: 0; display: flex; align-items: center; gap: .15rem; }
/* quill.snow.css 의 기본 색(#444, 강조 #06c)을 판 토큰으로 덮는다. 원본 규칙들이
   .ql-snow.ql-toolbar 를 달고 있어서, 같은 접두를 붙여야 판이 바뀔 때도 이긴다. */
.nv-toolbar.ql-snow.ql-toolbar .ql-stroke { stroke: var(--text-mid); }
.nv-toolbar.ql-snow.ql-toolbar .ql-fill { fill: var(--text-mid); }
.nv-toolbar.ql-snow.ql-toolbar .ql-picker { color: var(--text-mid); }
.nv-toolbar.ql-snow.ql-toolbar button:hover .ql-stroke,
.nv-toolbar.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--accent); }
.nv-toolbar.ql-snow.ql-toolbar button:hover .ql-fill,
.nv-toolbar.ql-snow.ql-toolbar button.ql-active .ql-fill,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--accent); }
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label:hover,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-item:hover,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--accent); }
/* 펼친 선택지 상자는 흰 바탕이 박혀 있어 야간판에서 떠 보인다 */
.nv-toolbar.ql-snow.ql-toolbar .ql-picker-options { background: var(--surface); }
.nv-toolbar.ql-snow.ql-toolbar .ql-picker.ql-expanded .ql-picker-label,
.nv-toolbar.ql-snow.ql-toolbar .ql-picker.ql-expanded .ql-picker-options { border-color: var(--line); }
/* quill.snow.css 의 `.ql-snow.ql-toolbar button { width: 28px }` 가 특정도(0,2,1)로
   앞서기 때문에, 글자 라벨을 쓰는 우리 버튼은 그보다 높은 특정도로 폭을 되찾아야 한다.
   안 그러면 "＋메모" 세 글자가 28px 안에서 세로로 쌓인다. */
.nv-toolbar.ql-toolbar .nv-toolbar-own button {
  width: auto; height: auto; white-space: nowrap;
  padding: .15rem .45rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: none; color: var(--text-mid); font: inherit; font-size: .75rem; cursor: pointer;
}
.nv-toolbar.ql-toolbar .nv-toolbar-own button:hover { border-color: var(--accent); color: var(--accent); }

.nv-editor.ql-container.ql-snow { border: 0; flex: 1; min-height: 0; overflow-y: auto; }
.nv-editor .ql-editor {
  margin-inline: auto; padding: var(--sp-xl) var(--sp-lg);
  font-family: var(--ed-body); font-size: 1rem; line-height: 1.95; color: var(--text);
}
.nv-editor .ql-editor h1 {
  margin: var(--sp-xl) 0 var(--sp-md);
  font-family: var(--ed-display); font-size: 1.35rem; color: var(--accent);
}
.nv-editor .ql-editor h2 {
  margin: var(--sp-xl) 0 var(--sp-md); padding-bottom: .3rem;
  border-bottom: var(--hairline) solid var(--line);
  font-family: var(--ed-display); font-size: 1.05rem; color: var(--accent);
}
.nv-editor .ql-editor blockquote {
  margin: var(--sp-md) 0; padding-left: var(--sp-md);
  border-left: var(--stroke-2) solid var(--line); color: var(--text-mid); font-size: .92rem;
}
.nv-editor .ql-editor p { margin: 0; }
.nv-editor .ql-editor a { color: var(--accent); }
/* 링크 입력 말풍선도 흰 바탕이 박혀 있다 */
.nv-editor.ql-snow .ql-tooltip {
  background: var(--surface); border-color: var(--line); color: var(--text-mid); box-shadow: none;
}
.nv-editor.ql-snow .ql-tooltip input[type=text] { background: var(--bg); border-color: var(--line); color: var(--text); }
.nv-editor.ql-snow .ql-tooltip a { color: var(--accent); }

/* ---- 우: 독립 항목 ---- */
.nv-right { overflow: hidden; }
.nv-tabs { display: flex; border-bottom: var(--hairline) solid var(--line); background: var(--surface); }
.nv-tab {
  flex: 1; padding: .45rem .3rem; border: 0; border-bottom: var(--stroke-2) solid transparent;
  background: none; color: var(--text-dim); font: inherit; font-size: .78rem; cursor: pointer;
}
.nv-tab.is-on { border-bottom-color: var(--accent); color: var(--accent); }

.nv-tabpane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.nv-tabpane.is-on { display: flex; }
.nv-pane-bar {
  display: flex; align-items: center; gap: .3rem;
  padding: var(--sp-sm); border-bottom: var(--hairline) solid var(--line);
}
.nv-settings, .nv-ai, .nv-search, .nv-revisions { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-sm); }

.nv-setting {
  margin-bottom: .4rem; padding: .5rem; border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font-size: .8rem; cursor: pointer;
}
.nv-setting:hover { border-color: var(--accent); }
.nv-setting-head { display: flex; align-items: center; gap: .35rem; }
.nv-setting-cnt { margin-left: auto; font-size: .68rem; color: var(--accent); }
.nv-setting-alias { margin-top: .2rem; font-size: .72rem; color: var(--text-dim); }
.nv-setting-speech {
  margin-top: .3rem; padding-left: .5rem; border-left: var(--stroke-2) solid var(--accent);
  font-size: .76rem; color: var(--text-mid); line-height: 1.6; white-space: pre-wrap;
}
.nv-setting-body {
  margin-top: .3rem; font-size: .76rem; color: var(--text-mid); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.nv-ai-row {
  margin-bottom: .4rem; padding: .5rem; border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font-size: .78rem; cursor: pointer;
}
.nv-ai-row:hover { border-color: var(--accent); }
.nv-ai-adopt { border-left: var(--stroke-3) solid var(--cat-work); }
.nv-ai-reject { opacity: .55; }
.nv-ai-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; }
.nv-ai-when { margin-left: auto; font-size: .68rem; color: var(--text-dim); }
.nv-ai-q { color: var(--text); line-height: 1.5; }
.nv-ai-a {
  margin-top: .25rem; color: var(--text-mid); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.nv-search-ep { margin-bottom: var(--sp-md); }
.nv-search-title { margin-bottom: .25rem; font-size: .75rem; color: var(--accent); }
.nv-search-hit {
  display: block; margin-bottom: .25rem; padding: .35rem .5rem;
  border-left: var(--stroke-2) solid var(--line); background: var(--surface);
  font-size: .76rem; line-height: 1.6; color: var(--text-mid);
}
.nv-search-hit:hover { border-left-color: var(--accent); color: var(--text); }

.nv-rev {
  margin-bottom: .4rem; padding: .5rem; border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font-size: .78rem;
}
.nv-rev-head { display: flex; align-items: center; gap: .35rem; }
.nv-rev-chars { margin-left: auto; font-size: .7rem; color: var(--text-dim); }
.nv-rev-btns { display: flex; gap: .3rem; margin-top: .35rem; }
.nv-rev-btns button {
  padding: .15rem .4rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: none; color: var(--text-mid); font: inherit; font-size: .7rem; cursor: pointer;
}
.nv-rev-btns button:hover { border-color: var(--accent); color: var(--accent); }
.nv-rev-diff { max-height: 20rem; overflow: auto; margin-top: .4rem; }
.nv-diff-stat { margin-bottom: .25rem; font-size: .7rem; color: var(--text-dim); }
.nv-diff {
  padding: .05rem .35rem; font-family: var(--ed-label); font-size: .72rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all;
}
.nv-diff-same { color: var(--text-dim); }
.nv-diff-add  { background: rgba(29, 158, 117, .16); color: var(--text); }
.nv-diff-del  { background: rgba(179, 38, 30, .16); color: var(--text-mid); text-decoration: line-through; }
.nv-diff-fold { color: var(--text-dim); font-style: italic; }

.nv-anchor-quote {
  margin-bottom: var(--sp-md); padding: .5rem .6rem; border-left: var(--stroke-2) solid var(--accent);
  background: var(--surface); font-size: .82rem; line-height: 1.7; color: var(--text-mid);
  max-height: 7rem; overflow-y: auto; white-space: pre-wrap;
}

/* ================= 집필 화면: 기기별 단 구성 =================
   데스크톱은 3단 그대로. 태블릿은 본문에 매인 좌측까지(목차·메모), 모바일은 본문 하나만.
   layout.css 의 split3 모바일 차단(안내 문구)은 공용 규칙이라 그대로 두고, 집필 화면만 풀어 준다.
   중앙 패널은 남는 폭을 전부 가진다 — 우측이 빠져도 --panel-N 합이 100% 가 아니라서
   기준 폭만 주면 오른쪽이 비고, 태블릿 디바이더를 끌면 좌측이 정확히 그만큼 늘고 중앙이 나머지를 채운다. */
@media (max-width: 80em) {
  .nv-write .nv-right,
  .nv-write .divider[data-index="1"] { display: none; }
  .nv-write .nv-mid { flex-grow: 1; }
}

@media (max-width: 48em) {
  /* layout.css 의 [data-layout="split3"] .split (0,2,0) 차단을 이겨야 한다 */
  [data-layout="split3"] .split.nv-write { display: flex; }
  .nv-write .nv-left,
  .nv-write .divider[data-index="0"] { display: none; }
}