/* 기본 내장 글꼴: 나눔바른고딕 (NAVER, SIL OFL 1.1 — vendor/nanum/OFL.txt) */
@font-face { font-family: "나눔바른고딕"; src: url("vendor/nanum/NanumBarunGothic.woff") format("woff"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "나눔바른고딕"; src: url("vendor/nanum/NanumBarunGothicBold.woff") format("woff"); font-weight: 600 900; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "나눔바른고딕", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; font-size: 15px; color: #1d1d1f; background: #f5f5f7; overflow: hidden; }
button { font: inherit; cursor: pointer; border: 1px solid #d2d2d7; background: #fff; border-radius: 6px; padding: 4px 10px; color: inherit; }
button:hover { background: #f0f0f2; }
button.active { background: #ffd60a; border-color: #e6bf00; }
input, select { font: inherit; }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.hint { color: #86868b; font-size: 13px; }
.sep { width: 1px; height: 18px; background: #d2d2d7; margin: 0 4px; }

#app { display: grid; grid-template-columns: 220px 280px 1fr; grid-template-rows: 38px 1fr; height: 100vh; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid #d2d2d7; }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px; font-weight: 700; font-size: 16px; }
.pane-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-head button { border: none; background: none; font-size: 18px; color: #e6a800; padding: 0 6px; }

/* 폴더 */
#folders { background: #ececee; }
#folder-tree { flex: 1; overflow-y: auto; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 14px; }
.folder-row { display: flex; align-items: center; gap: 4px; padding: 6px 10px; margin: 1px 6px; border-radius: 6px; cursor: pointer; user-select: none; }
.folder-row:hover { background: #dcdce0; }
.folder-row.sel { background: #ffd60a; }
.folder-row.drop { outline: 2px dashed #e6a800; }
.folder-row .tw { width: 14px; font-size: 10px; color: #86868b; text-align: center; }
.folder-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-row .ct { color: #86868b; font-size: 12px; }
.folder-row input { width: 100%; }

/* 웹툰 미리보기 카드 (폴더 영역 아래) */
.wt-card, .wt-card.active { position: relative; margin: 10px; height: 130px; padding: 0; border: none; border-radius: 14px; overflow: hidden; color: #fff; text-align: left; background: linear-gradient(135deg, #7c5cff, #5a3fe0); flex-shrink: 0; }
.wt-card:hover { background: linear-gradient(135deg, #8a6cff, #6a4ff0); }
.wt-card.active { outline: 3px solid #ffd60a; outline-offset: -3px; }
.wt-card-bg { position: absolute; inset: 0; background-size: cover; background-position: top center; opacity: .35; }
.wt-card-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; padding: 14px; }
.wt-card-icon { font-size: 28px; }
.wt-card b { font-size: 16px; }
.wt-card small { font-size: 12px; opacity: .9; }

/* 글목록 */
#notes { background: #fafafa; }
#search { margin: 0 10px 8px; padding: 6px 10px; border: 1px solid #d2d2d7; border-radius: 8px; background: #fff; }
#note-list { list-style: none; margin: 0; padding: 0 6px; overflow-y: auto; flex: 1; }
.note-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid #ececee; }
.note-item:hover { background: #f0f0f2; }
.note-item.sel { background: #ffd60a; }
.note-item .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item .s { font-size: 13px; color: #6e6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.note-item .s b { font-weight: 400; color: #1d1d1f; margin-right: 6px; }

/* 에디터 */
#editor { background: #fff; border-right: none; }
#editor-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.empty { margin: auto; color: #86868b; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ececee; }
.tabs, .tools { display: flex; gap: 6px; align-items: center; }
.tools { margin-left: auto; }
#save-state { color: #86868b; font-size: 12px; white-space: nowrap; }
#save-state.unsaved { color: #d97706; }
#opacity { width: 80px; vertical-align: middle; }
.tab-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.text-tools, .board-tools, .wt-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #ececee; }
.text-tools button, .board-tools button, .wt-tools button { padding: 4px 9px; font-size: 13px; }
.wt-tools label { font-size: 12px; display: flex; gap: 4px; align-items: center; }
.wt-tools input[type=number] { width: 60px; }
#char-count { color: #86868b; font-size: 12px; }

/* 펜 도구 모음 */
.ink-tools { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ink-tools .swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d2d2d7; }
.ink-tools .swatch.active { box-shadow: 0 0 0 2px #1d1d1f; }
.ink-tools input[type=color] { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
.ink-tools select { font-size: 12px; }
.edit-btn.active { background: #e53935; border-color: #c62828; color: #fff; }

/* 시나리오 종이: 글자(textarea) 위에 필기(svg) */
#paper { flex: 1; position: relative; min-height: 0; display: flex; }
#body { flex: 1; overflow: auto; outline: none; padding: 24px 40px 50vh; font-size: 12pt; line-height: 1.8; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; cursor: text; }
#body:empty::before { content: attr(data-placeholder); color: #aeaeb2; pointer-events: none; }
#body div, #body p { margin: 0; }
/* 첫 줄(제목)은 굵게 + 아래 회색 점선으로 본문과 구분 */
#body > :first-child { font-weight: 700; font-size: 1.2em; padding-bottom: .35em; margin-bottom: .7em; border-bottom: 1px dashed #b8b8be; }
#body.blank::before { content: attr(data-placeholder); position: absolute; top: 24px; left: 40px; color: #aeaeb2; pointer-events: none; }
/* 배경 밝기 (하양 → 짙은 회색) */
#paper { background: var(--paper, #ffffff); }
#paper.dark #body { color: #f2f2f4; }
#paper.dark #body > :first-child { border-bottom-color: #8e8e93; }
#paper-tone { width: 70px; vertical-align: middle; }
/* 칸 크기 조절 손잡이 */
.pane { position: relative; }
.resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 20; }
.resizer:hover, .resizer.active { background: rgba(124, 92, 255, .35); }
.note-item.drop-before { box-shadow: 0 -3px 0 #7c5cff; }
.note-item.drop-after { box-shadow: 0 3px 0 #7c5cff; }
.folder-row.drop-before { box-shadow: 0 -3px 0 #7c5cff; }
.folder-row.drop-after { box-shadow: 0 3px 0 #7c5cff; }
.resizer.left { left: -3px; right: auto; }
.wt-list-wrap { position: relative; }
/* 인물 이름 칸 (대사) */
#char-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #ececee; background: #faf9ff; }
.char-slot { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.char-slot small { color: #86868b; font-size: 10px; min-width: 62px; }
.char-slot input { width: 66px; padding: 2px 5px; border: 1px solid #d2d2d7; border-radius: 5px; font-size: 12px; }
.char-slot button { padding: 1px 6px; font-size: 11px; }
/* 스티커: 크기 조절, 끌 때 따라다니는 카드, 오른쪽 타임라인 */
.sticker-main { flex: 1; display: flex; min-height: 0; }
#sticker-wrap { min-width: 0; }
#sticker-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 18px; }
.sticker { position: relative; width: 190px; height: 190px; aspect-ratio: auto; flex: none; border: 1px solid rgba(0, 0, 0, .06); }
.sticker.flash { box-shadow: 0 0 0 3px #7c5cff; }
.sticker-add-tile { width: 190px; height: 190px; aspect-ratio: auto; flex: none; }
.sticker.placeholder, .tl-item.placeholder { opacity: .3; outline: 2px dashed #8a7f66; box-shadow: none; }
.st-ghost { position: fixed; z-index: 100; pointer-events: none; box-shadow: 0 18px 38px rgba(0, 0, 0, .28); opacity: .96; }
.st-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .25) 50%); border-radius: 0 0 4px 0; }
#sticker-tl { position: relative; width: 300px; flex: none; border-left: 1px solid #ddd6c6; background: #f7f4ee; display: flex; flex-direction: column; min-height: 0; }
.tl-head { padding: 8px 12px; font-weight: 700; font-size: 13px; border-bottom: 1px solid #e6e0d2; }
#tl-list { flex: 1; overflow-y: auto; padding: 12px 0 40px; background: linear-gradient(#b9ae96, #b9ae96) center top / 2px 100% no-repeat local; }
.tl-empty { margin: 30px 16px; padding: 8px; background: #f7f4ee; color: #9a917d; font-size: 12px; text-align: center; }
.tl-item { position: relative; width: calc(50% - 22px); margin: 8px 0 8px 8px; padding: 7px 9px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-size: 12px; cursor: grab; user-select: none; }
.tl-item.r { margin-left: calc(50% + 14px); }
.tl-item::after { content: ''; position: absolute; top: 11px; border: 7px solid transparent; }
.tl-item.l::after { left: 100%; border-left: 8px solid #b9ae96; border-right: 0; }
.tl-item.r::after { right: 100%; border-right: 8px solid #b9ae96; border-left: 0; }
.tl-item::before { content: ''; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #7c5cff; border: 2px solid #f7f4ee; }
.tl-item.l::before { left: calc(100% + 8px); }
.tl-item.r::before { right: calc(100% + 8px); }
.tl-num { font-weight: 800; color: #7c5cff; margin-right: 5px; }
.tl-title { font-weight: 700; overflow-wrap: anywhere; word-break: break-all; }
.tl-item > div:first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.tl-body { color: #555; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 메인 회차 스티커(작품 전체) / 스티커 메모(이 글) */
.st-section { padding: 14px 20px 8px; }
.st-section + .st-section { border-top: 1px dashed #d8cfbd; }
.st-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.st-sec-head button { margin-left: auto; padding: 3px 8px; font-size: 12px; }
.st-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; min-height: 60px; }
#sticker-grid { padding: 0; }
.sticker.ep { border: 2px solid #7c5cff; border-radius: 12px; padding: 0 12px 12px; box-shadow: 0 4px 12px rgba(76, 49, 209, .18); }
.sticker.ep .st-head { height: auto; margin: 0 -12px 6px; padding: 5px 10px; background: linear-gradient(135deg, #7c5cff, #5a3fe0); color: #fff; border-radius: 9px 9px 0 0; }
.sticker.ep .st-head button, .sticker.ep .st-head .st-grip { color: rgba(255, 255, 255, .85); }
.sticker.ep .st-num { font-size: 13px; }
.sticker.ep .st-title { font-size: 17px; }
.sticker.memo { border-radius: 2px; }
.sticker.memo .st-body { font-size: 14px; padding-top: 2px; }
.sticker-add-tile.ep { border-color: #b9a9ff; color: #7c5cff; border-radius: 12px; }
.st-big.ep { border: 3px solid #7c5cff; }
/* 시나리오 이미지 */
#body img { max-width: 100%; height: auto; vertical-align: top; cursor: pointer; border-radius: 2px; } /* 옆 글은 이미지 위쪽에 맞춤 */
#body img.sel { outline: 2px solid #7c5cff; outline-offset: 1px; }
/* 웹툰 내보내기 창 */
#wt-export-dlg { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
.exp-box { width: min(520px, calc(100% - 32px)); background: #fff; border-radius: 12px; padding: 18px 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.exp-box h3 { margin: 0 0 12px; font-size: 16px; }
.exp-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 13px; flex-wrap: wrap; }
.exp-row > span:first-child { width: 48px; color: #6e6e73; }
.exp-row input[type=range] { width: 200px; }
#exp-info { white-space: pre-line; font-size: 12px; color: #3a3a3c; background: #f5f5f7; border-radius: 8px; padding: 8px 10px; min-height: 34px; }
.exp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* 그리기 도구 (보드 / 웹툰 수정) */
.dw-ui { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.dw-ui button { pointer-events: auto; border: none; background: none; width: 34px; height: 34px; padding: 0; border-radius: 8px; color: #3a3a3c; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.dw-ui button:hover { background: #f0f0f4; }
.dw-ui button.active { background: #7c5cff; color: #fff; }
.dw-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dw-toolbar, .dw-actions, .dw-style { pointer-events: auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05); padding: 4px; display: flex; gap: 2px; }
.dw-actions button { width: 30px; height: 28px; font-size: 13px; }
.dw-toolbar [data-tool="text"].sticky::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f2a900; margin: 20px 0 0 20px; }
.dw-style { position: absolute; top: 12px; right: 12px; flex-direction: column; gap: 6px; padding: 8px; width: 170px; }
.dw-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.dw-colors button span { width: 16px; height: 16px; border-radius: 50%; }
.dw-colors button.active { background: #ece8ff; }
.dw-colors button.active span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c5cff; }
.dw-opacity { pointer-events: auto; width: 100%; accent-color: #7c5cff; }
.dw-row { display: flex; justify-content: space-between; }
.dw-row button { flex: 1; font-size: 12px; font-weight: 700; }
.dw-text { position: absolute; white-space: pre; line-height: 1.3; font-weight: 600; user-select: none; }
.dw-note { position: absolute; padding: .6em .7em; line-height: 1.4; font-weight: 600; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); display: flex; align-items: center; justify-content: center; user-select: none; }
.dw-edit { position: absolute; z-index: 5; min-width: 6em; border: 1px dashed #7c5cff; background: rgba(255, 255, 255, .92); outline: none; resize: none; font-weight: 600; line-height: 1.3; padding: 0 2px; font-family: inherit; pointer-events: auto; user-select: text; }
.dw-edit.note { padding: .6em .7em; line-height: 1.4; text-align: center; border: 2px solid #7c5cff; }
.dw-selbox { fill: none; stroke: #7c5cff; pointer-events: none; }
.dw-handle { fill: #fff; stroke-dasharray: none; }
#img-handle { position: absolute; width: 14px; height: 14px; background: #7c5cff; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; z-index: 5; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
#paper.pen #body { touch-action: none; cursor: crosshair; }

/* 서식 도구 */
.fmt-btn { min-width: 28px; display: inline-flex; align-items: center; justify-content: center; }
.fmt-btn svg { width: 14px; height: 14px; }
#font-size { font-size: 13px; padding: 1px 2px; }
#board-zoom { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.55); color: #ddd; font-size: 12px; pointer-events: none; }
#body-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 레퍼런스 보드 */
#board { flex: 1; position: relative; overflow: hidden; background-color: #d6d6da; cursor: default; touch-action: none; } /* 타블렛 펜 획이 화면 끌기로 바뀌어 끊기지 않게 */
#board[data-tool="pen"] { cursor: crosshair; }
#board[data-tool="hand"] { cursor: grab; }
#board[data-tool="note"] { cursor: copy; }
.tab-view[data-view="board"] { position: relative; }
.tab-view[data-view="board"] .dw-style { top: 56px; }
/* 웹툰: 오른쪽 스크롤 막대(한 번에 끝까지), 그리기 층, 떠 있는 도구 위치 */
.wt-stage { position: relative; }
.wt-scrub { position: absolute; right: 10px; top: 16px; bottom: 16px; width: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 11; }
.wt-scrub button { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 11px; }
.wt-track { flex: 1; width: 8px; border-radius: 4px; background: #d1d1d6; position: relative; cursor: pointer; }
.wt-thumb { position: absolute; left: -4px; width: 16px; min-height: 24px; border-radius: 8px; background: #7c5cff; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.wt-draw-html { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
/* 웹툰: 스타일 판은 컷 목록 바로 옆 빈 곳에 (오른쪽 여백 글씨를 가리지 않게) */
.wt-stage .dw-style { right: auto; left: calc(var(--wt-list, 240px) + 12px); }
.wt-stage.style-open .wt-phone-wrap { padding-left: 200px; }
/* 보드 그림 층: 보드 크기 그대로, 확대는 그룹에 걸음 (굵은 선도 매끈하게) */
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
/* 화면 색(하양 → 옅은 회색): 주요 바탕을 회색 쪽으로 섞음 */
:root { --tone: 0%; }
#folders { background: color-mix(in srgb, #ececee, #9a9aa2 var(--tone)); }
#notes, .wt-list-wrap { background: color-mix(in srgb, #fafafa, #9a9aa2 var(--tone)); }
#editor, #paper, #webtoon-view { background: color-mix(in srgb, #ffffff, #9a9aa2 var(--tone)); }
#sticker-wrap { background: color-mix(in srgb, #efeae0, #9a9aa2 var(--tone)); }
.wt-stage { background: color-mix(in srgb, #e8e8ed, #9a9aa2 var(--tone)); }
#sticker-view { background: color-mix(in srgb, #ffffff, #9a9aa2 var(--tone)); }
/* 스티커 회차 (폴더마다): 글목록 검색창 아래 고정 항목 + 오른쪽 칸 */
.ep-entry { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(135deg, #f1edff, #e6defe); color: #4b31d1; font-weight: 700; cursor: pointer; border: 1px solid #d9cffd; user-select: none; }
.ep-entry:hover { filter: brightness(.98); }
.ep-entry.sel { background: linear-gradient(135deg, #7c5cff, #5a3fe0); color: #fff; border-color: transparent; }
.ep-entry small { margin-left: auto; font-weight: 400; opacity: .85; }
.ep-entry.disabled { opacity: .5; cursor: default; }
#sticker-view { grid-column: 3; grid-row: 2; border-right: none; position: relative; }
.st-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #ececee; }
.st-top h3 { margin: 0; font-size: 15px; }
.st-top .hint { flex: 1; }
.st-top button { padding: 4px 10px; font-size: 12px; }
#ep-grid, #tl-list { position: relative; }
#ep-grid { padding: 18px 20px; }
.st-slot { flex: none; border: 2px dashed #7c5cff; border-radius: 12px; background: rgba(124, 92, 255, .08); }
.tl-slot { height: 40px; margin: 8px 0 8px 8px; width: calc(50% - 22px) !important; border: 2px dashed #7c5cff; border-radius: 6px; background: rgba(124, 92, 255, .08); }
.tl-slot.r { margin-left: calc(50% + 14px); }
/* 글꼴 고르기: 글꼴마다 모양 미리보기 (한글처럼) */
.font-picker { position: relative; display: inline-flex; gap: 2px; }
.font-picker .fp-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 150px; max-width: 200px; justify-content: space-between; }
.fp-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-folder { color: #e6a800; }
.fp-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 120; width: 340px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06); display: flex; flex-direction: column; }
.fp-list { max-height: 380px; overflow-y: auto; padding: 4px; }
.fp-sec { padding: 8px 10px 4px; font-size: 11px; color: #86868b; font-weight: 700; }
.fp-empty { padding: 4px 10px 8px; font-size: 12px; color: #aeaeb2; }
.fp-item { display: flex; align-items: baseline; gap: 10px; width: 100%; border: none; background: none; padding: 6px 10px; border-radius: 6px; text-align: left; }
.fp-item:hover { background: #f0edff; }
.fp-item.active { background: #ece7ff; }
.fp-name { width: 120px; flex: none; font-size: 12px; color: #3a3a3c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sample { flex: 1; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-foot { display: flex; gap: 6px; padding: 6px; border-top: 1px solid #ececee; }
.fp-foot button { font-size: 12px; padding: 4px 8px; }
/* 그리기 도구 (새 디자인): 왼쪽 세로 도구 막대 + 옮길 수 있는 스타일 판 */
.dw-dock { pointer-events: auto; position: absolute; left: 10px; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #26222f; border-radius: 14px; box-shadow: 0 6px 20px rgba(20, 12, 40, .35); }
.dw-dock button { width: 36px; height: 34px; color: #cfcbe0; border-radius: 10px; font-size: 15px; }
.dw-dock button:hover { background: #3a3448; color: #fff; }
.dw-dock button.active { background: #7c5cff; color: #fff; }
.dw-sep { height: 1px; margin: 4px 6px; background: #4a4458; }
.dw-shapes { pointer-events: auto; position: absolute; left: 62px; top: 160px; display: flex; gap: 2px; padding: 5px; background: #26222f; border-radius: 12px; box-shadow: 0 6px 20px rgba(20, 12, 40, .35); }
.dw-shapes button { color: #cfcbe0; width: 34px; height: 32px; }
.dw-shapes button:hover { background: #3a3448; color: #fff; }
.dw-panel { pointer-events: auto; position: absolute; right: 14px; top: 12px; width: 190px; min-width: 170px; max-width: 420px; background: #fbfaff; border-radius: 14px; box-shadow: 0 8px 26px rgba(20, 12, 40, .22), 0 0 0 1px rgba(124, 92, 255, .18); resize: both; overflow: hidden; display: flex; flex-direction: column; }
.dw-panel.folded { resize: none; height: auto !important; }
.dw-panel-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; font-size: 12px; font-weight: 700; color: #5a3fe0; background: #efeaff; cursor: move; user-select: none; }
.dw-panel-head button { width: 24px; height: 22px; font-size: 11px; color: #5a3fe0; }
.dw-panel-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: auto; flex: 1; }
.dw-panel .dw-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; }
.dw-panel .dw-colors button { width: 100%; height: 26px; border-radius: 7px; }
.dw-panel .dw-colors button span { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.dw-panel .dw-colors button.active { background: #e4dcff; }
.dw-panel .dw-colors button.active span { box-shadow: 0 0 0 2px #fbfaff, 0 0 0 4px #7c5cff; }
.dw-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6e6e73; }
.dw-lbl input, .dw-lbl select { flex: 1; min-width: 0; }
.dw-panel .dw-row { display: flex; gap: 4px; }
.dw-panel .dw-row button { flex: 1; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e5e0f5; color: #3a3a3c; }
.dw-panel .dw-row button.active { background: #7c5cff; color: #fff; box-shadow: none; }
.dw-row .dot { display: inline-block; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
/* 보드: 도구 막대/판은 보드 도구줄 아래부터, 웹툰: 컷 목록 오른쪽 */
.tab-view[data-view="board"] .dw-dock, .tab-view[data-view="board"] .dw-panel { top: 56px; }
.tab-view[data-view="board"] .dw-shapes { top: 204px; }
.wt-stage .dw-dock { left: calc(var(--wt-list, 240px) + 10px); }
.wt-stage .dw-shapes { left: calc(var(--wt-list, 240px) + 62px); }
.wt-stage .dw-panel { right: 48px; }
.wt-stage.style-open .wt-phone-wrap { padding-left: 70px; }
/* 맞춤법: 틀린 곳만 빨간 물결 밑줄 + 검사 창 */
::highlight(spell-err) { text-decoration: underline wavy #e03131; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.spell-card { margin: 10px 10px 0; padding: 10px 14px; border: none; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); text-align: left; font-weight: 700; color: #3a3a3c; display: flex; align-items: center; gap: 8px; }
.spell-card i { color: #e03131; font-size: 16px; }
.spell-card small { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #e03131; color: #fff; font-size: 11px; text-align: center; }
.spell-card small:empty { display: none; }
#spell-panel { position: fixed; right: 18px; top: 60px; z-index: 150; width: 330px; max-height: 70vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06); }
.sp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; border-bottom: 1px solid #ececee; }
.sp-head i { color: #e03131; }
.sp-head button { font-size: 12px; padding: 3px 8px; }
.sp-list { overflow-y: auto; padding: 6px; }
.sp-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.sp-item:hover { background: #fff5f5; }
.sp-item s { color: #e03131; }
.sp-item b { color: #2f9e44; }
.sp-item small { color: #86868b; margin-left: 4px; }
.sp-item button { grid-row: 1 / 3; grid-column: 2; font-size: 12px; padding: 3px 10px; }
.sp-why { font-size: 12px; color: #6e6e73; }
.sp-empty { padding: 20px; text-align: center; color: #2f9e44; }
.sp-foot { padding: 8px 12px; font-size: 11px; color: #aeaeb2; border-top: 1px solid #ececee; }
#wt-phone.edit[data-tool="select"] #wt-scroll { cursor: default; }
#wt-custom-w { width: 64px; }
/* 탭별 내보내기 (JPG · PDF · 메모장) */
.exp-open { margin-left: 6px; }
.exp-menu { position: fixed; z-index: 200; display: flex; flex-direction: column; min-width: 150px; padding: 4px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); }
.exp-menu button { border: none; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.exp-menu button:hover { background: #f0edff; }
.exp-menu i { width: 18px; color: #7c5cff; }
.exp-sec { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; color: #86868b; }
.exp-sec + button { margin-top: 1px; }
#exp-content button:disabled { opacity: .45; cursor: default; }
.exp-stage { position: fixed; left: -20000px; top: 0; }
.exp-paper { position: relative; background: #fff; color: #1d1d1f; padding: 24px 40px 40px; font-size: 12pt; line-height: 1.8; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; font-family: "나눔바른고딕", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }
.exp-paper div, .exp-paper p { margin: 0; }
.exp-paper, .exp-stickers { display: flow-root; } /* 맨 끝의 떠 있는 이미지도 종이 안에 (잘리지 않게) */
.exp-paper > :first-child { font-weight: 700; font-size: 1.2em; padding-bottom: .35em; margin-bottom: .7em; border-bottom: 1px dashed #b8b8be; }
.exp-paper img { max-width: 100%; height: auto; }
.exp-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.exp-stickers { width: 900px; padding: 24px; background: #fff; color: #1d1d1f; font-family: "나눔바른고딕", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }
.exp-stickers h2 { font-size: 16px; margin: 8px 0 12px; }
.exp-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.exp-card { width: 200px; min-height: 160px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.exp-card.ep { border: 2px solid #7c5cff; border-radius: 10px; }
.exp-card .exp-num { font-size: 12px; font-weight: 800; color: #7c5cff; margin-bottom: 4px; }
.exp-card b { display: block; font-size: 15px; margin-bottom: 6px; }
.exp-card p { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
#board[data-tool="text"] { cursor: text; }
#board[data-tool="eraser"] { cursor: cell; }
.board-items, .board-texts { position: absolute; left: 0; top: 0; }
.board-ink { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.board-text { position: absolute; white-space: pre; line-height: 1.3; font-weight: 600; user-select: none; cursor: move; }
#board[data-tool="pen"] .board-text { pointer-events: none; }
#board[data-tool="text"] .board-text { cursor: text; outline: 1px dashed rgba(0,0,0,.25); }
.board-text-input { position: absolute; min-width: 8em; border: 1px dashed currentColor; background: rgba(255,255,255,.92); outline: none; resize: both; font-weight: 600; line-height: 1.3; padding: 0 2px; font-family: inherit; }

/* 빈 폴더 안내 */
#editor-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#editor-empty p { margin: 0; }

/* 스티커 메모 */
.sticker-view { position: relative; }
.sticker-tools { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #ececee; }
.sticker-tools button { padding: 3px 8px; font-size: 12px; }
#sticker-wrap { flex: 1; min-height: 0; overflow: auto; background: #efeae0; }
#sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; padding: 20px; }
.sticker { aspect-ratio: 1; display: flex; flex-direction: column; min-width: 0; padding: 6px 12px 12px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: grab; user-select: none; }
.sticker.dragging { opacity: .45; outline: 2px dashed #8a7f66; cursor: grabbing; }
.st-head { display: flex; align-items: center; gap: 4px; height: 22px; font-size: 12px; color: rgba(0,0,0,.45); }
.st-head .st-num { font-weight: 700; }
.st-head .st-grip { letter-spacing: -2px; }
.st-head button { border: none; background: none; padding: 0 3px; font-size: 13px; color: rgba(0,0,0,.45); }
.st-head button:hover { color: #000; background: none; }
.st-title { border: none; border-bottom: 1px solid rgba(0,0,0,.12); background: transparent; font: inherit; font-weight: 800; font-size: 16px; outline: none; padding: 4px 0; min-width: 0; }
.st-body { flex: 1; border: none; background: transparent; resize: none; outline: none; font: inherit; font-size: 13px; line-height: 1.6; padding: 6px 0 0; min-height: 0; }
.sticker-add-tile { aspect-ratio: 1; border: 2px dashed #c9c2b2; border-radius: 4px; background: transparent; color: #9a917d; font-size: 15px; }
.sticker-add-tile:hover { background: rgba(255,255,255,.4); }
#sticker-modal { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 24px; }
.st-big { width: min(720px, 100%); aspect-ratio: 1; max-height: 100%; display: flex; flex-direction: column; padding: 14px 24px 24px; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.st-big-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(0,0,0,.55); }
.st-big-head button#st-big-close { font-size: 12px; background: rgba(255,255,255,.6); }
#st-big-title { border: none; border-bottom: 1px solid rgba(0,0,0,.15); background: transparent; font: inherit; font-weight: 800; font-size: 24px; outline: none; padding: 10px 0 8px; }
#st-big-body { flex: 1; border: none; background: transparent; resize: none; outline: none; font: inherit; font-size: 16px; line-height: 1.8; padding-top: 10px; }
#board.panning { cursor: grabbing; }
#board.dragover { outline: 3px dashed #ffd60a; outline-offset: -3px; }
#board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ref { position: absolute; user-select: none; }
.ref img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ref.flip img { transform: scaleX(-1); }
.ref.sel { outline: 2px solid #ffd60a; }
.ref .hdl { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #ffd60a; border-radius: 3px; cursor: nwse-resize; display: none; }
.ref.sel .hdl { display: block; }
.board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #777; pointer-events: none; font-size: 15px; }

/* 웹툰 미리보기 */
#webtoon-view { grid-column: 2 / 4; grid-row: 2; background: #fff; border-right: none; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.wt-stage { flex: 1; display: flex; min-height: 0; background: #e8e8ed; }
.wt-list-wrap { width: 240px; border-right: 1px solid #d2d2d7; background: #fafafa; display: flex; flex-direction: column; flex-shrink: 0; }
.wt-list-head { padding: 8px 10px; font-size: 12px; color: #6e6e73; line-height: 1.6; }
#wt-list { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; flex: 1; }
#wt-list li { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 6px; background: #fff; margin-bottom: 4px; border: 1px solid #ececee; cursor: grab; font-size: 12px; }
#wt-list li.drag-over { border-color: #e6a800; box-shadow: 0 -3px 0 #e6a800; }
#wt-list li img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; pointer-events: none; -webkit-user-drag: none; }
#wt-list li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wt-list li .sz { font-size: 11px; color: #86868b; }
#wt-list li .sz.warn { color: #d97706; }
#wt-list li button { padding: 0 6px; border: none; background: none; color: #c00; }
.wt-phone-wrap { flex: 1; display: flex; justify-content: center; align-items: stretch; padding: 16px; min-width: 0; overflow: auto; }
#wt-phone { height: 100%; border: 10px solid #1d1d1f; border-radius: 28px; background: #fff; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
#wt-phone.orig, #wt-phone.edit { border: none; border-radius: 0; }
#wt-phone.hinge-left { border-radius: 0 28px 28px 0; } /* iPhone Duo 접었을 때: 왼쪽(경첩) 직각, 오른쪽 둥글게 */
#wt-phone.dragover { outline: 3px dashed #ffd60a; }
#wt-scroll { height: 100%; overflow: auto; cursor: grab; user-select: none; }
#wt-scroll.grabbing { cursor: grabbing; }
#wt-phone:not(.orig):not(.edit) #wt-scroll { scrollbar-width: none; }
#wt-phone:not(.orig):not(.edit) #wt-scroll::-webkit-scrollbar { display: none; }
.wt-sheet { position: relative; overflow: hidden; }
.wt-strip img { display: block; pointer-events: none; -webkit-user-drag: none; }
.wt-strip .wt-empty { padding: 40px 20px; text-align: center; color: #86868b; line-height: 1.7; }
.wt-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wt-texts { position: absolute; inset: 0; pointer-events: none; }
.wt-note { position: absolute; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.3; font-weight: 600; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }

/* 수정 모드: 원고 둘레 여백 + 펜 */
#wt-phone.edit .wt-sheet { background: #f4f4f6; background-image: linear-gradient(#e3e3e8 1px, transparent 1px); background-size: 100% 24px; }
#wt-phone.edit #wt-scroll { cursor: crosshair; touch-action: none; }
#wt-phone.edit[data-tool="text"] #wt-scroll { cursor: text; }
#wt-phone.edit[data-tool="eraser"] #wt-scroll { cursor: cell; }
#wt-phone.edit[data-tool="hand"] #wt-scroll { cursor: grab; touch-action: auto; }
#wt-phone.edit .wt-strip { box-shadow: 0 0 0 1px #c7c7cc; }
#wt-phone.edit[data-tool="text"] .wt-note, #wt-phone.edit[data-tool="eraser"] .wt-note { pointer-events: auto; outline: 1px dashed rgba(0,0,0,.2); }
/* 수정 표시 보기: 수정 모드가 아니어도 여백과 표시를 보여줌 */
#wt-phone.marked { border: none; border-radius: 0; }
#wt-phone.marked .wt-sheet { background: #fafafa; }
#wt-phone.marked .wt-strip { box-shadow: 0 0 0 1px #c7c7cc; }
#wt-show-marks-wrap input { margin: 0; }
/* ---------- 도형 판: 도형 단추 옆에 작게 (4칸씩) ---------- */
.dw-ui .dw-shapes { display: grid; grid-template-columns: repeat(4, 32px); gap: 2px; padding: 5px; bottom: auto; right: auto; }
.dw-ui .dw-shapes button { width: 32px; height: 30px; }
.dw-ui .dw-shapes button.active { background: #7c5cff; color: #fff; }
.dw-ui svg { display: block; }
/* 글자 입력칸: 쓴 만큼만 넓어짐 */
.dw-edit { field-sizing: content; min-width: 1.5ch; }
.dw-edit:not(.note) { white-space: pre; overflow: hidden; } /* 줄바꿈은 Enter 로만: 가장 긴 줄 폭만큼 */
.dw-edit.note { field-sizing: fixed; }

/* ---------- 시나리오 글자 색 ---------- */
.fg-wrap { position: relative; display: inline-flex; }
#fg-color { flex-direction: column; gap: 1px; padding: 2px 7px 3px; line-height: 1.1; border-radius: 6px 0 0 6px; }
#fg-bar { display: block; width: 16px; height: 3px; border-radius: 2px; background: #e03131; }
.fg-more { border-radius: 0 6px 6px 0 !important; margin-left: -1px; min-width: 20px !important; padding: 3px 4px !important; }
.fg-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 120; width: 206px; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06); display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fg-pop .sw { width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .12); }
.fg-pop .sw:hover { transform: scale(1.08); }
.fg-pop .fg-auto { grid-column: 1 / -1; font-size: 12px; padding: 4px 8px; text-align: left; }
.fg-pop label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6e6e73; }
.fg-pop input[type=color] { width: 36px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; }

/* ---------- 맨 왼쪽: 점선 아래 '작품 자료수집' ---------- */
.tree-sep { height: 0; border-top: 1px dashed #b0b0b8; margin: 10px 14px 6px; }
.folder-row.research .fi { color: #0c8599; }

/* ---------- 스티커 회차: 색 고르기 판, 타임라인 간격 손잡이 ---------- */
.st-pop { position: absolute; top: 30px; right: 6px; z-index: 5; display: flex; gap: 5px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.st-pop .swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.st-pop .swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c5cff; }
.tl-gap { position: absolute; top: 100%; margin-top: 1px; width: calc(200% + 48px); min-height: 8px; cursor: row-resize; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 10px; z-index: 1; }
.tl-item.l .tl-gap { left: -9px; }
.tl-item.r .tl-gap { left: calc(-100% - 39px); }
.tl-gap::before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dashed transparent; }
.tl-gap:hover, .tl-gap.active { color: #7c5cff; }
.tl-gap:hover::before, .tl-gap.active::before { border-top-color: #b8a9ff; }
.tl-gap i { position: relative; padding: 1px 5px; border-radius: 6px; background: #f7f4ee; }
.st-ghost .tl-gap { display: none; }

/* ---------- 맞춤법: 띄어쓰기는 파란 물결 + 검사 창(원문 / 교정 결과 비교) ---------- */
::highlight(space-err) { text-decoration: underline wavy #1c7ed6; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
#spell-dlg { position: fixed; inset: 0; z-index: 160; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sd-box { width: min(1120px, 100%); height: min(740px, 100%); background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.sd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 700; font-size: 15px; border-bottom: 1px solid #ececee; }
.sd-head > i { color: #e03131; }
.sd-head .hint { font-weight: 400; }
.sd-head button { border: none; background: none; font-size: 16px; }
.sd-cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.sd-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #ececee; }
.sd-col:last-child { border-right: none; background: #fbfbfd; }
.sd-col-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid #f0f0f2; min-height: 40px; }
.sd-col-head button { font-size: 12px; padding: 3px 8px; }
.sd-col-head small { color: #86868b; }
#sd-src, #sd-src-view, #sd-out { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 14px 18px; font-size: 15px; line-height: 2; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
#sd-src { border: none; outline: none; resize: none; font: inherit; font-size: 15px; line-height: 2; background: transparent; }
#sd-src-view { cursor: text; }
.sd-bad { padding: 0 1px; border-radius: 3px; border-bottom: 2px solid; }
.sd-bad.spell { color: #e03131; border-color: #e03131; background: #fff0f0; }
.sd-bad.space { color: #1c7ed6; border-color: #1c7ed6; background: #eef6ff; }
.sd-fix { cursor: pointer; font-weight: 700; padding: 0 1px; border-radius: 3px; border-bottom: 2px solid; }
.sd-fix.spell { color: #2f9e44; background: #ebfbee; border-color: #2f9e44; }
.sd-fix.space { color: #1c7ed6; background: #e7f5ff; border-color: #1c7ed6; }
.sd-fix.off { color: #6e6e73; background: #f1f3f5; border-color: #adb5bd; border-bottom-style: dashed; font-weight: 400; }
#spell-dlg .hot { outline: 2px solid #7c5cff; outline-offset: 1px; }
.sd-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6e6e73; margin-left: 6px; }
.sd-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.lg.spell { background: #e03131; }
.lg.space { background: #1c7ed6; }
.sd-empty { color: #aeaeb2; }
.sd-ok { color: #2f9e44; font-weight: 700; margin-bottom: 8px; }
.sd-plain { color: #3a3a3c; }
.sd-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #ececee; }
.sd-foot button { padding: 6px 14px; }

/* ---------- 시나리오 이미지: 도구 막대, 끌어서 옮기기, 자르기 ---------- */
#body img { -webkit-user-drag: none; }
#body img.sel { cursor: grab; }
#body img.moving { opacity: .3; }
#img-bar { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px; background: #26222f; border-radius: 10px; box-shadow: 0 6px 18px rgba(20, 12, 40, .3); }
#img-bar button { border: none; background: none; color: #cfcbe0; width: 30px; height: 28px; padding: 0; border-radius: 7px; font-size: 13px; }
#img-bar button:hover { background: #3a3448; color: #fff; }
#img-bar button.active { background: #7c5cff; color: #fff; }
#img-bar .sep { background: #4a4458; height: 16px; }
#img-drop { position: absolute; z-index: 6; height: 4px; border-radius: 2px; background: #7c5cff; pointer-events: none; }
#img-drop::after { content: ''; position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 4px; background: #7c5cff; border: 2px solid #fff; box-sizing: border-box; }
#img-drop[data-align="left"]::after { left: 0; }
#img-drop[data-align="center"]::after { left: calc(50% - 8px); }
#img-drop[data-align="right"]::after { right: 0; }
.img-ghost { position: fixed; left: 0; top: 0; z-index: 300; width: 110px; max-height: 110px; object-fit: contain; opacity: .85; pointer-events: none; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
#img-crop { position: absolute; z-index: 7; }
.cr-dim { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cr-hole { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); }
.cr-frame { position: absolute; outline: 2px solid #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .6); cursor: move; }
.cr-h { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #7c5cff; border-radius: 3px; }
.cr-h.n { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.cr-h.s { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.cr-h.e { right: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.cr-h.w { left: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.cr-h.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cr-h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.cr-h.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cr-h.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cr-bar { position: absolute; top: calc(100% + 8px); left: 0; display: flex; gap: 6px; white-space: nowrap; }
.cr-bar button { font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* ---------- 맨 왼쪽: 끌 수 있는 점선 + 작품 자료수집 칸 ---------- */
#folder-tree { min-height: 60px; }
#research-split { flex: none; position: relative; height: 14px; margin: 2px 8px; cursor: row-resize; }
#research-split::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; border-top: 1px dashed #a8a8b0; }
#research-split::after { content: ''; position: absolute; left: calc(50% - 12px); top: 4px; width: 24px; height: 5px; border-radius: 3px; background: #c7c7cc; }
#research-split:hover::before, #research-split.active::before { border-top: 2px dashed #7c5cff; top: 5px; }
#research-split:hover::after, #research-split.active::after { background: #7c5cff; }
#research-tree { flex: none; overflow-y: auto; min-height: 40px; }
.rf-add { border: none; background: none; color: #0c8599; padding: 0 4px; font-size: 13px; }
.rf-add:hover { background: none; color: #075f6b; }

/* 스티커 회차 타임라인: 회차 사이 간격 손잡이를 늘 보이게 (끌어서 벌리기) */
.tl-gap { top: calc(100% - 3px); min-height: 14px; color: rgba(124, 92, 255, .45); }
.tl-gap::before { border-top-color: rgba(124, 92, 255, .22); }
.tl-gap i { font-size: 11px; }

/* ---------- 회차 타임라인: 상자를 끌어서 자유롭게 옮기기 + 작은 메모 ---------- */
.tl-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-head button { padding: 2px 7px; font-size: 11px; font-weight: 400; }
.tl-hint { flex-basis: 100%; font-weight: 400; font-size: 11px; }
.tl-canvas { position: relative; background: linear-gradient(#b9ae96, #b9ae96) center top / 2px 100% no-repeat local; }
#tl-list.tl-canvas { padding: 0; }
.tl-canvas .tl-item { position: absolute; margin: 0; }
.tl-canvas .tl-item.l { left: 8px; }
.tl-canvas .tl-item.r { left: calc(50% + 14px); margin-left: 0; }
.tl-canvas .tl-item.dragging { z-index: 6; cursor: grabbing; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); transform: scale(1.02); }
.tl-space { pointer-events: none; }
.tl-note { position: absolute; z-index: 3; transform: translateX(-50%); max-width: 46%; min-height: 18px; padding: 1px 8px; font-size: 11px; line-height: 1.5; color: #5a4e36; background: rgba(255, 255, 255, .9); border: 1px dashed #c9bda3; border-radius: 9px; cursor: grab; user-select: none; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.tl-note:hover { border-color: #7c5cff; }
.tl-note.editing { cursor: text; user-select: text; min-width: 60px; border: 1.5px solid #7c5cff; background: #fff; }
.tl-note:empty::before { content: '메모'; color: #b8ae96; }
/* 스티커 회차 내보내기: 카드 칸 + 타임라인 나란히 */
.exp-st-row { display: flex; gap: 24px; align-items: flex-start; }
.exp-st-row .exp-grid { width: 900px; flex: none; }
.exp-tl-wrap h3 { margin: 0 0 8px; font-size: 14px; }
.exp-tl { overflow: visible; background-color: #f7f4ee; border-radius: 8px; }

/* 시나리오 이미지: 글 옆에 두기 (이미지 옆으로 글이 위에서부터 채워짐) */
#body img[style*="float: left"], .exp-paper img[style*="float: left"] { margin: 4px 16px 8px 0; }
#body img[style*="float: right"], .exp-paper img[style*="float: right"] { margin: 4px 0 8px 16px; }
#img-bar svg { display: block; }

/* 작품 자료수집: 폴더 추가 단추를 글자로 */
.rf-add { margin-left: 4px; padding: 1px 7px !important; border: 1px solid #9fd3da !important; border-radius: 10px; background: #fff !important; font-size: 11px; white-space: nowrap; }

/* 웹툰 수정: 확대/축소 배율 (오른쪽 아래). 확대해서 넓어져도 왼쪽까지 스크롤되게 */
.wt-zoom { position: absolute; right: 48px; bottom: 14px; z-index: 13; display: flex; align-items: center; gap: 2px; padding: 4px; background: #26222f; border-radius: 10px; box-shadow: 0 6px 18px rgba(20, 12, 40, .3); }
.wt-zoom button { border: none; background: none; color: #cfcbe0; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: 12px; }
.wt-zoom button:hover { background: #3a3448; color: #fff; }
.wt-zoom-v { min-width: 44px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; }
.wt-zoom-hint { padding: 0 8px 0 6px; color: #b9b3cc; font-size: 11px; white-space: nowrap; border-right: 1px solid #4a4458; margin-right: 2px; }
.wt-zoom-hint b { color: #fff; font-weight: 700; }
.wt-zoom .wt-zoom-fit { padding: 0 8px; color: #fff; background: #7c5cff; }
.wt-zoom .wt-zoom-fit:hover { background: #8d70ff; }
.wt-zoom .wt-zoom-fit:disabled { background: none; color: #6e6880; cursor: default; }
.wt-phone-wrap { justify-content: safe center; }

/* ---------- 시나리오 글상자: 떠 있는 글 덩어리 (이미지 위에도) ---------- */
#scn-boxes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.scn-boxes-inner { position: absolute; left: 0; top: 0; }
.scn-box { position: absolute; pointer-events: auto; min-width: 80px; border-radius: 8px; font-size: 12pt; line-height: 1.6; color: #1d1d1f; }
.scn-box.memo { background: #fff6b8; border: 1px solid #efdf86; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.scn-box.clear { background: transparent; border: 1px dashed transparent; }
.scn-box.clear:hover, .scn-box.clear:focus-within { border-color: #7c5cff; background: rgba(255, 255, 255, .25); }
.scn-box.clear .sb-text { font-weight: 700; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.sb-bar { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 7px 7px 0 0; background: #7c5cff; color: #fff; font-size: 11px; cursor: move; opacity: 0; pointer-events: none; transition: opacity .12s; }
.scn-box:hover .sb-bar, .scn-box:focus-within .sb-bar, .scn-box.dragging .sb-bar { opacity: 1; pointer-events: auto; }
.sb-bar button { border: none; background: none; padding: 0 3px; font-size: 11px; color: #fff; }
.sb-bar button:hover { background: rgba(255, 255, 255, .2); }
.sb-text { padding: 4px 10px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; cursor: text; }
.sb-text:empty::before { content: '글을 쓰세요'; color: #9a9aa2; font-weight: 400; text-shadow: none; }
.sb-resize { position: absolute; right: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.scn-box.dragging { opacity: .9; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.scn-box.exp .sb-text:empty::before { content: ''; }

/* 웹툰 내보내기: 저장 위치 / 파일 이름 */
.exp-row > span:first-child { width: 58px; flex: none; }
.exp-dir { flex: 1; display: flex; gap: 6px; min-width: 0; }
.exp-dir-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: #f5f5f7; border: 1px solid #e0e0e5; text-align: left; font-size: 12px; }
.exp-dir-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.exp-dir-path i { color: #e6a800; }
#exp-name { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid #d2d2d7; border-radius: 6px; }
#exp-names { flex-basis: 100%; margin-left: 68px; }

.wt-text-input { position: absolute; min-width: 140px; border: 1px dashed currentColor; background: rgba(255,255,255,.92); outline: none; resize: both; font-weight: 600; line-height: 1.3; padding: 0 2px; font-family: inherit; pointer-events: auto; user-select: text; }

/* ---------- 맨 왼쪽 폴더 줄: 이름을 왼쪽에 붙여서 칸을 좁혀도 덜 잘리게 ---------- */
.folder-row { gap: 4px; padding: 6px 6px 6px 4px; margin: 1px 4px; }
.folder-row .tw { width: 12px; flex: none; }
.folder-row .tw:empty { width: 0; margin-right: -4px; }
.folder-row .fi { flex: none; width: 16px; text-align: center; }
.folder-row .ct { flex: none; }
.folder-row .rf-add { flex: none; margin-left: 2px; }
.tree ul { padding-left: 22px; }
.pane-head { padding-left: 10px; }

/* ---------- 스티커 회차: 30화마다 회색 실선 + 다음 부 ---------- */
.ep-part { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; margin: 2px 0; color: #8e8e93; font-size: 12px; }
.ep-part::after { content: ''; flex: 1; border-top: 2px solid #aeaeb4; }
.ep-part b { order: -1; flex: none; }
.ep-part::before { content: ''; flex: none; width: 0; }
.tl-part { position: absolute; left: 6px; right: 6px; height: 0; border-top: 2px solid #aeaeb4; z-index: 2; pointer-events: none; }
.tl-part b { position: absolute; left: 0; top: 3px; padding: 0 6px; font-size: 11px; color: #8e8e93; background: #f7f4ee; border-radius: 6px; }
.exp-part { margin: 0; }

/* ---------- 시나리오 넣기 단추: 인물 · 씬~컷설명 묶음 · 단축키 지정 ---------- */
.ins-bar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.text-tools .ins-person { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #4b31d1; background: #f4f1ff; border-color: #cfc4ff; }
.text-tools .ins-person:hover { background: #ebe5ff; }
.text-tools .ins-person.active { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.ins-group { display: inline-flex; align-items: center; gap: 1px; padding: 2px; background: #f1f1f5; border: 1px solid #e2e2e8; border-radius: 9px; }
.text-tools .ins-group button { border: none; background: none; border-radius: 6px; padding: 3px 8px; }
.text-tools .ins-group button:hover { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.text-tools .ins-group .ins-add { color: #7c5cff; padding: 3px 7px; }
.text-tools .ins-keys { display: inline-flex; align-items: center; gap: 5px; color: #3a3a3c; }
.text-tools .ins-keys.active { background: #26222f; border-color: #26222f; color: #fff; }
.slot-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #ececee; background: #faf9ff; }
#key-bar { background: #f7f7f9; }
.char-slot { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.char-slot .kb-play { padding: 1px 6px; font-size: 11px; }
.char-slot small { min-width: 0; color: #86868b; font-size: 11px; padding: 0 2px; }
.kb-box { min-width: 44px; padding: 1px 6px; font-size: 10px; line-height: 16px; color: #aeaeb2; background: #fff; border: 1px dashed #c7c7cc; border-radius: 5px; white-space: nowrap; }
.kb-box:hover { border-color: #7c5cff; color: #7c5cff; background: #fff; }
.kb-box.set { color: #4b31d1; font-weight: 700; border-style: solid; border-color: #cfc4ff; background: #f4f1ff; }
.kb-box.capturing, .kb-box.capturing:hover { color: #fff; background: #7c5cff; border: 1px solid #7c5cff; }
.kb-slot { padding: 3px 4px 3px 6px; background: #fff; border: 1px solid #e5e5ea; border-radius: 8px; }
.char-slot input.kb-label { width: 64px; font-weight: 700; }
.char-slot input.kb-text { width: 118px; }
.kb-del { border: none; background: none; padding: 1px 4px; font-size: 11px; color: #b0b0b6; }
.kb-del:hover { color: #e03131; background: none; }
.kb-more { padding: 3px 8px; font-size: 12px; }

/* ---------- 창 나누기: 좌우 또는 위아래 두 칸 (칸마다 따로 스크롤) + 가운데 막대. 새 칸은 따로 쓰는 새 시나리오 ---------- */
#paper-split { flex: 1; display: flex; min-height: 0; min-width: 0; }
#paper { min-width: 0; min-height: 0; }
#paper2 { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
#body2 { flex: 1; min-height: 0; overflow: auto; outline: none; padding: 24px 32px 50vh; font-size: 12pt; line-height: 1.8; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; cursor: text; }
#body2.blank::before { content: attr(data-placeholder); position: absolute; top: 58px; left: 32px; color: #aeaeb2; pointer-events: none; }
.split-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #e6e1fa; background: #f7f5ff; font-size: 12px; }
.split-head button { padding: 2px 8px; font-size: 12px; }
#split-load { color: #4b31d1; font-weight: 700; background: #fff; border-color: #cfc4ff; }
#split-load:hover { background: #ebe5ff; }
#split-name { font-weight: 700; color: #3a3a3c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#split-close { border: none; background: none; color: #6e6e73; font-size: 15px; padding: 2px 6px; }
#split-close:hover { color: #e03131; background: #fdecec; }
.split-menu { position: absolute; left: 8px; top: 32px; z-index: 40; width: 320px; max-height: min(70%, 520px); overflow-y: auto; padding: 4px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06); }
.split-menu .sm-item { display: flex; align-items: center; gap: 7px; width: 100%; border: none; background: none; text-align: left; padding: 5px 10px; border-radius: 6px; font-size: 13px; color: #1d1d1f; }
.split-menu button.sm-item:hover { background: #f0edff; }
.split-menu .sm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-menu .sm-new i { color: #7c5cff; }
.split-menu .sm-head { margin-top: 2px; font-size: 11px; font-weight: 700; color: #86868b; border-top: 1px solid #ececee; border-radius: 0; padding-top: 8px; }
.split-menu .sm-folder { font-weight: 700; color: #3a3a3c; }
.split-menu .sm-folder i { color: #e6a800; width: 16px; text-align: center; }
.split-menu .sm-note i { color: #7c5cff; width: 16px; text-align: center; }
.split-menu .sm-note.cur { background: #fff6d6; }
.split-menu .sm-empty { color: #aeaeb2; font-size: 12px; padding-top: 2px; padding-bottom: 4px; }
/* 위아래로 나누기 */
#paper-split.tb { flex-direction: column; }
#paper-split.tb #split-bar { width: auto; height: 8px; cursor: row-resize; border-left: none; border-right: none; border-top: 1px solid #dcdce2; border-bottom: 1px solid #dcdce2; }
#paper-split.tb #split-bar::after { left: calc(50% - 18px); top: 2px; width: 36px; height: 2px; }
/* 저장할까요? 창 */
#ask-dlg { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ask-box { width: min(420px, 100%); background: #fff; border-radius: 12px; padding: 18px 20px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.ask-box p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ask-actions button { padding: 6px 14px; }
.ask-actions .primary { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.ask-actions .primary:hover { background: #6a4ff0; }
#body2 div, #body2 p { margin: 0; }
#body2 > :first-child { font-weight: 700; font-size: 1.2em; padding-bottom: .35em; margin-bottom: .7em; border-bottom: 1px dashed #b8b8be; }
#body2 img { max-width: 100%; height: auto; vertical-align: top; border-radius: 2px; -webkit-user-drag: none; }
#body2 img[style*="float: left"] { margin: 4px 16px 8px 0; }
#body2 img[style*="float: right"] { margin: 4px 0 8px 16px; }
#split-bar { flex: none; width: 8px; position: relative; cursor: col-resize; background: #ececf0; border-left: 1px solid #dcdce2; border-right: 1px solid #dcdce2; }
#split-bar::after { content: ''; position: absolute; left: 2px; top: calc(50% - 18px); width: 2px; height: 36px; border-radius: 1px; background: #b8b8c0; }
#split-bar:hover, #split-bar.active { background: #e4ddff; }
#split-bar:hover::after, #split-bar.active::after { background: #7c5cff; }
#paper2 { background: color-mix(in srgb, #ffffff, #9a9aa2 var(--tone)); }
#split-toggle.active { background: #7c5cff; border-color: #7c5cff; color: #fff; }

/* 내보내기 메뉴: 한글 문서 안내 (회색 작은 글씨) */
.exp-note { padding: 0 10px 6px 38px; font-size: 11px; color: #9a9aa0; }

/* ---------- 그리기 도구 (새 디자인): 밝은 세로 막대 + 선 아이콘, 노란 선택 표시, 이름표 줄이 있는 '꾸미기' 판 ---------- */
.dw-dock { background: #fff; border: 1px solid #e3e1ea; border-radius: 16px; padding: 6px 5px; gap: 3px; box-shadow: 0 6px 22px rgba(30, 20, 60, .14); }
.dw-dock button { position: relative; width: 38px; height: 36px; color: #4a4658; border-radius: 11px; }
.dw-dock button:hover { background: #f2f0f8; color: #1d1d1f; }
.dw-dock button.active { background: #fff3c4; color: #1d1d1f; box-shadow: inset 0 0 0 1.5px #f2b600; }
.dw-dock button.active::before { content: ''; position: absolute; left: -5px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #f2b600; }
.dw-dock [data-act="panel"].active { background: #f2f0f8; box-shadow: none; }
.dw-dock [data-act="panel"].active::before { display: none; }
.dw-sep { height: 0; margin: 3px 8px; background: none; border-top: 1px dotted #c9c5d4; }
.dw-swatch { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c9c5d4; }
.dw-ui .dw-shapes { background: #fff; border: 1px solid #e3e1ea; box-shadow: 0 6px 22px rgba(30, 20, 60, .14); }
.dw-ui .dw-shapes button { color: #4a4658; }
.dw-ui .dw-shapes button:hover { background: #f2f0f8; color: #1d1d1f; }
.dw-ui .dw-shapes button.active { background: #fff3c4; color: #1d1d1f; box-shadow: inset 0 0 0 1.5px #f2b600; }
.dw-panel { width: 240px; min-width: 214px; background: #fff; border: 1px solid #e3e1ea; border-radius: 14px; box-shadow: 0 10px 30px rgba(30, 20, 60, .16); }
.dw-panel-head { background: #fff; color: #1d1d1f; border-bottom: 1px solid #efedf4; padding: 7px 8px 7px 14px; }
.dw-panel-head b { font-size: 12px; letter-spacing: .02em; }
.dw-panel-head button { color: #6e6a7c; width: 24px; height: 22px; }
.dw-panel-body { gap: 9px; padding: 10px 12px 12px; }
.dw-pv { height: 46px; flex: none; border-radius: 10px; border: 1px solid #efedf4; background: repeating-conic-gradient(#f4f3f7 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.dw-pv svg { display: block; width: 100%; height: 100%; }
.dw-field { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 6px; font-size: 11px; color: #6e6a7c; }
.dw-field > span { font-weight: 700; }
.dw-field em { font-style: normal; font-size: 11px; color: #3a3a3c; min-width: 36px; text-align: right; }
.dw-field .dw-colors, .dw-field .dw-row, .dw-field select { grid-column: 2 / 4; min-width: 0; }
.dw-field input[type=range] { width: 100%; min-width: 0; accent-color: #f2b600; pointer-events: auto; }
.dw-field select { font-size: 12px; pointer-events: auto; }
.dw-panel .dw-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.dw-panel .dw-colors button { width: 20px; height: 20px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.dw-panel .dw-colors button:hover { transform: scale(1.12); }
.dw-panel .dw-colors button.active { background: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px #fff, 0 0 0 3.5px #1d1d1f; }
.dw-custom { position: relative; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; pointer-events: auto; background: conic-gradient(#e03131, #fab005, #2f9e44, #0c8599, #1c7ed6, #7048e8, #d6336c, #e03131); }
.dw-custom::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c, transparent); box-shadow: 0 0 0 1.5px #fff; }
.dw-custom:not(.active)::after { box-shadow: none; }
.dw-custom.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1d1d1f; }
.dw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dw-panel .dw-row { display: flex; gap: 0; padding: 2px; background: #f2f0f8; border-radius: 8px; }
.dw-panel .dw-row button { flex: 1; width: auto; height: 24px; border-radius: 6px; background: none; box-shadow: none; font-size: 11px; font-weight: 700; color: #4a4658; }
.dw-panel .dw-row button:hover { background: rgba(255, 255, 255, .6); }
.dw-panel .dw-row button.active { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* ---------- 씬~컷설명 단추 묶음: 위에 작은 설명, 한 줄에 7개씩 두 줄까지(최대 14개), 오른쪽에 더하기 ---------- */
.ins-group { align-items: center; gap: 4px; padding: 2px 4px 3px 6px; }
.ins-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ins-cap { font-size: 10px; line-height: 1.2; color: #9a9aa2; padding-left: 2px; white-space: nowrap; }
.ins-grid { display: grid; grid-template-columns: repeat(5, auto); gap: 2px 1px; justify-items: stretch; }
.text-tools .ins-grid button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-tools .ins-group .ins-add:disabled { color: #c7c7cc; cursor: default; box-shadow: none; background: none; }
.ins-grid .ins-edit { font-size: 12px; padding: 2px 6px; border: 1.5px solid #7c5cff; border-radius: 6px; outline: none; background: #fff; }
/* 인물 이름 칸 · 단축키 지정 칸: 설명은 맨 위 한 줄, 그 아래에 칸들 */
.slot-bar { flex-direction: column; align-items: stretch; gap: 4px; }
.slot-head { flex: none; text-align: left; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.slot-add { white-space: nowrap; }
/* 맨 왼쪽 위: 폴더 정렬 고르기 */
#folder-sort { flex: none; margin-left: auto; margin-right: 2px; font-size: 11px; font-weight: 400; padding: 1px 2px; border: 1px solid #d2d2d7; border-radius: 6px; background: #fff; color: #3a3a3c; max-width: 86px; }
#folders .pane-head { gap: 4px; }
#folders .pane-head #doc-name { flex: 1; min-width: 0; }

/* ---------- 맨 위 줄 (창 제목 자리): 앱·작품 이름 · 파일 · 탭 · 투명도·화면 색·휴지통 · exe 창 단추 자리 ---------- */
#topbar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; background: #fff; border-bottom: 1px solid #d2d2d7; -webkit-app-region: drag; user-select: none; min-width: 0; overflow: hidden; }
#topbar button, #topbar input, #topbar select, #topbar label { -webkit-app-region: no-drag; }
#topbar .tb-name { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #3a3a3c; white-space: nowrap; min-width: 0; overflow: hidden; }
#topbar .tb-name b { font-size: 14px; }
#topbar .tb-name #doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
#topbar .tb-icon { width: 20px; height: 20px; }
#topbar .tabs button { padding: 3px 10px; font-size: 13px; }
#topbar .tools { margin-left: 0; font-size: 15px; }
#topbar #tb-file { padding: 3px 9px; font-size: 12px; }
#topbar #opacity, #topbar #zoom { width: 64px; vertical-align: middle; }
#topbar #zoom-v { width: 46px; font-size: 12px; color: #3a3a3c; text-align: right; padding: 1px 3px; border: 1px solid #d2d2d7; border-radius: 5px; background: #fff; }
#topbar label { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #6e6e73; }
#topbar #btn-delete-note { padding: 3px 9px; }
#tb-win-space { flex: none; width: 0; }
body.exe:not(.mac) #tb-win-space { width: 138px; } /* 윈도우: 숨기기 · 최대 · 닫기 단추 자리 */
body.exe.mac #topbar { padding-left: 84px; } /* 맥: 왼쪽 신호등 자리 */
/* 도구 줄 두 줄: 줄이 넘어가지 않게 (좁으면 옆으로 밀려 스크롤) · 내보내기는 오른쪽 끝(휴지통 아래) */
.text-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 5px 12px; }
.text-tools::-webkit-scrollbar { display: none; }
.text-tools > * { flex: none; }
.text-tools .exp-open { margin-left: auto; font-size: 13px; padding: 5px 12px; font-weight: 700; color: #4b31d1; background: #f4f1ff; border-color: #cfc4ff; }
.text-tools .exp-open:hover { background: #ebe5ff; }
.ins-row { padding-top: 4px; }
.ins-bar { flex-wrap: nowrap; }
.tab-view[data-view="text"] { position: relative; }
#char-count { position: absolute; right: 16px; bottom: 6px; z-index: 4; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: #86868b; font-size: 11px; pointer-events: none; }
/* 하위 폴더: 조금 더 오른쪽, 옅은 회색 */
.tree ul .folder-row .fi, .tree ul .folder-row .nm { color: #8a8a90; }
.folder-row .dt { flex: none; font-size: 9px; color: #b0b0b6; margin-left: 2px; white-space: nowrap; letter-spacing: -.02em; }
.folder-row .dt:empty { display: none; }
/* 씬 단추 묶음 오른쪽: ↺(작게) 위, + 아래. 연속 번호 표시 */
.ins-side { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.text-tools .ins-group .ins-reset { padding: 0 5px; font-size: 9px; color: #9a9aa2; line-height: 14px; }
.text-tools .ins-group .ins-reset:hover { color: #4b31d1; }
.text-tools .ins-grid button.seq { box-shadow: inset 0 0 0 1.5px #6e6a7c; background: #e9e8ef; font-weight: 700; }
.text-tools .ins-grid button.pick { outline: 1.5px dashed #7c5cff; outline-offset: -1px; }
.ins-cap.pick { color: #4b31d1; font-weight: 700; }
.text-tools .ins-seq { display: inline-flex; align-items: center; gap: 5px; }
.text-tools .ins-seq.active { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.text-tools .ins-seq.pick { background: #ffd60a; border-color: #e6bf00; }
.kb-seq { min-width: 34px; padding: 1px 6px; font-size: 10px; line-height: 16px; color: #aeaeb2; background: #fff; border: 1px dashed #c7c7cc; border-radius: 5px; }
.kb-seq.set { color: #fff; background: #6e6a7c; border: 1px solid #6e6a7c; font-weight: 700; }
.kb-seq:disabled { opacity: .4; cursor: default; }
.slot-head { display: flex; align-items: center; gap: 8px; }
.slot-head-key { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
/* 스티커 회차 카드: 만든 날짜·시간 */
.sticker.ep .st-date { font-size: 10px; opacity: .8; margin-left: 4px; white-space: nowrap; }
.st-top .hint { flex: 1; }

/* 탭(시나리오 · 레퍼런스 보드)은 글 칸 맨 위, 서식 줄 바로 위 */
.tabs-row { display: flex; align-items: center; padding: 5px 12px 0; }
.tabs-row .tabs button { padding: 4px 11px; font-size: 13px; }
/* 첫 도구 줄은 창이 좁으면 아래로 줄바꿈 (아이콘·글씨는 그대로), 둘째 줄(인물·씬·단축키·연속숫자)은 줄바꿈 없음 */
#text-tools { flex-wrap: wrap; overflow: visible; }
#ins-row { flex-wrap: nowrap; }
.text-tools .ins-group.person { background: #f3f0ff; border-color: #ddd6fb; }
.text-tools .ins-group.person .ins-grid button.empty { color: #b0aac4; font-weight: 400; }
.text-tools .ins-person { color: #4b31d1; background: #fff; border-color: #cfc4ff; font-weight: 700; }
.text-tools .ins-person:hover { background: #f4f1ff; }
.text-tools .ins-person.active { background: #e4dcff; border-color: #b9a9ff; color: #3a2ab0; }
/* 회차 타임라인 부 구분선: 끌어서 위아래로 */
.tl-part { height: 10px; margin-top: -4px; border-top: none; pointer-events: auto; cursor: row-resize; }
.tl-part::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid #aeaeb4; }
.tl-part:hover::before, .tl-part.dragging::before { border-top-color: #7c5cff; }
.tl-part b { top: 8px; }
.tl-part:hover b, .tl-part.dragging b { color: #4b31d1; }
/* 나눈 칸: 시나리오 / 레퍼런스 보드 탭, 보드 보기 */
.split-tabs button { padding: 2px 8px; font-size: 11px; }
.split-board { flex: 1; min-height: 0; position: relative; overflow: hidden; background-color: #d6d6da; cursor: grab; touch-action: none; }
.split-board.panning { cursor: grabbing; }
.split-board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.split-board .board-zoom { position: absolute; left: 10px; bottom: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #ddd; font-size: 12px; pointer-events: none; }

/* ---------- 인물 상자 · 씬 상자: 칸(글씨 · ▶ · 단축키 · ×) 5개씩, 같은 모양에 색만 다르게 ---------- */
.ins-bar { align-items: flex-end; gap: 8px; }
.ins-group { align-items: flex-end; padding: 3px 4px 4px 6px; border-radius: 10px; }
.ins-group.person { background: #ece6ff; border-color: #c9bbff; }
.ins-group.scene { background: #fff1cf; border-color: #f0d38a; }
.ins-group .ins-cap { color: #6e6a7c; }
.ins-group .ins-grid { grid-template-columns: repeat(3, 148px); gap: 3px 3px; max-height: 55px; overflow-y: auto; scrollbar-width: thin; }
.ins-cell { width: 148px; min-width: 0; }
.ins-cell .cell-txt { flex: 1; min-width: 0; max-width: none; }
.ins-group .ins-wrap { min-height: 55px; justify-content: flex-end; }
.ins-cell { display: inline-flex; align-items: center; gap: 0; padding: 1px 1px 1px 3px; border-radius: 7px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.ins-group.scene .ins-cell { border-color: rgba(120, 90, 0, .15); }
.ins-cell .cell-txt { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #1d1d1f; padding: 2px 4px; border-radius: 5px; cursor: pointer; user-select: none; }
.ins-cell .cell-txt:hover { background: #f0f0f4; }
.ins-cell.empty .cell-txt { color: #b0aac4; font-weight: 400; }
.ins-cell.seq .cell-txt { background: #4a4658; color: #fff; }
.ins-cell.seq .cell-txt:hover { background: #5c5870; }
.text-tools .ins-cell .kb-play { border: none; background: none; color: #7c5cff; padding: 0 3px; font-size: 10px; }
.text-tools .ins-cell .kb-play:hover { background: #f0edff; }
.text-tools .ins-cell .kb-box { min-width: 0; padding: 1px 3px; font-size: 10px; line-height: 15px; border: 1px dashed #d2d2d7; color: #b0b0b6; }
.text-tools .ins-cell .kb-box.set { border-style: solid; color: #4b31d1; }
.text-tools .ins-cell .kb-del { padding: 0 2px; font-size: 10px; color: #c4c4c9; border: none; background: none; }
.text-tools .ins-cell .kb-del:hover { color: #e03131; }
.text-tools .ins-group .ins-side { align-self: center; }
.text-tools .ins-group .ins-reset { padding: 0 5px; font-size: 10px; color: #8e8a9c; line-height: 16px; }
.ins-seqwrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; align-self: flex-end; }
.ins-seqwrap .ins-cap { font-size: 10px; color: #6e6a7c; }
.ins-grid .ins-edit { font-size: 12px; font-weight: 600; padding: 2px 5px; }

.ins-cap.blank { min-height: 12px; }

/* ---------- 상자 두 줄 배치: 인물 상자, 그 아래 씬 상자 + 연속숫자. 칸 = 글씨(네 글자 폭) · 단축키 · × ---------- */
#ins-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
.ins-line { display: inline-flex; align-items: flex-end; gap: 8px; }
.ins-group .ins-grid { grid-template-columns: repeat(3, 132px); max-height: 60px; }
.ins-cell { width: 132px; padding: 1px 2px 1px 4px; gap: 2px; }
.ins-cell .cell-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 400; padding: 2px 3px; }
.ins-cell.seq .cell-txt { background: #dfdfe6; color: #1d1d1f; }
.ins-cell.seq .cell-txt:hover { background: #d3d3dc; }
.text-tools .ins-cell .kb-box { flex: none; min-width: 34px; padding: 1px 4px; font-size: 10px; line-height: 15px; color: #8e8e93; text-align: center; }
.text-tools .ins-cell .kb-box.set { color: #4b31d1; font-weight: 600; }
.text-tools .ins-cell .kb-del { flex: none; }
.ins-group .ins-wrap { min-height: 60px; }
.ins-group .ins-cap { font-size: 11px; }
.ins-seqwrap .ins-cap { font-size: 11px; }
/* 오른쪽 아래 상태줄: 고친 날짜·시간 + 글자 수 */
#status-corner { position: absolute; right: 16px; bottom: 6px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; pointer-events: none; }
#status-corner #char-count { position: static; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: #86868b; font-size: 12px; }
/* 검색 결과: 어느 폴더에 있는지 */
.note-item.hit .where { color: #4b31d1; font-weight: 600; }
.note-item.hit .where i { color: #e6a800; }
.note-empty { padding: 14px 12px; color: #aeaeb2; font-size: 13px; list-style: none; }

/* ---------- 맞춤법 검사: 밑줄 · 오른쪽 판 · 작은 창 ---------- */
::highlight(spell-sug) { text-decoration: underline dashed #9a9aa2; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
#spell-btn.active { background: #ffd60a; border-color: #e6bf00; }
#spell-panel { position: fixed; right: 18px; top: 60px; z-index: 150; width: 390px; max-height: 76vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06); }
#spell-panel .sp-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-weight: 700; font-size: 14px; border-bottom: 1px solid #ececee; }
#spell-panel .sp-head > i { color: #e03131; }
#spell-panel .sp-head button { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
#spell-panel .sp-legend { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 11px; color: #6e6e73; border-bottom: 1px solid #f0f0f2; }
#spell-panel .sp-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
#spell-panel .sp-legend .lg:first-child { margin-left: 0; }
.lg.sug { background: #9a9aa2; }
#spell-panel .sp-list { overflow-y: auto; padding: 6px; flex: 1; }
#spell-panel .sp-item { display: block; padding: 8px 10px; border-radius: 8px; }
#spell-panel .sp-item:hover { background: #f7f7f9; }
#spell-panel .sp-item.spell:hover { background: #fff5f5; }
#spell-panel .sp-item.space:hover { background: #eef6ff; }
.sp-line { cursor: pointer; font-size: 14px; }
.sp-line s { color: #e03131; }
.sp-item.space .sp-line s { color: #1c7ed6; }
.sp-item.suggest .sp-line s { color: #6e6e73; }
.sp-line b { color: #2f9e44; }
.sp-line i { color: #aeaeb2; font-size: 11px; margin: 0 2px; }
.sp-line small { color: #aeaeb2; font-size: 11px; margin-left: 6px; }
.sp-why { font-size: 12px; color: #6e6e73; margin-top: 2px; }
.sp-acts { display: flex; gap: 4px; margin-top: 6px; }
.sp-acts button { font-size: 12px; padding: 2px 8px; }
.sp-acts [data-a="fix"] { color: #fff; background: #2f9e44; border-color: #2f9e44; }
.sp-acts [data-a="fix"]:hover { background: #2b8a3e; }
.sp-empty { padding: 22px 12px; text-align: center; color: #6e6e73; font-size: 13px; line-height: 1.6; }
.sp-empty.ok { color: #2f9e44; }
.sp-empty.err { color: #e03131; }
#spell-panel .sp-foot { padding: 8px 12px; font-size: 11px; color: #aeaeb2; border-top: 1px solid #ececee; line-height: 1.5; }
#spell-panel .sp-foot a { color: #7c5cff; }
#spell-pop { position: fixed; z-index: 160; min-width: 200px; max-width: 320px; padding: 8px 10px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06); font-size: 13px; }
#spell-pop .pp-line s { color: #e03131; }
#spell-pop.space .pp-line s { color: #1c7ed6; }
#spell-pop.suggest .pp-line s { color: #6e6e73; }
#spell-pop .pp-line b { color: #2f9e44; }
#spell-pop .pp-why { font-size: 12px; color: #6e6e73; margin-top: 3px; }
#spell-pop .pp-acts { display: flex; gap: 4px; margin-top: 6px; }
#spell-pop .pp-acts button { font-size: 12px; padding: 2px 8px; }
#spell-pop .pp-acts [data-a="fix"] { color: #fff; background: #2f9e44; border-color: #2f9e44; }

/* 웹툰 미리보기 카드: 아이콘 + 이름 한 줄, 설명은 작은 글씨 한 줄 */
.wt-card, .wt-card.active { height: auto; margin: 8px 10px 10px; }
.wt-card-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 7px; padding: 10px 12px; }
.wt-card-icon { font-size: 18px; line-height: 1; }
.wt-card b { font-size: 15px; }
.wt-card small { flex-basis: 100%; font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 맨 위 줄 정가운데 시계 */
#topbar { position: relative; }
#tb-clock { flex: none; margin-left: 6px; font-size: 13px; color: #3a3a3c; letter-spacing: .02em; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
#topbar .zoom-btn { width: 22px; height: 22px; padding: 0; border-radius: 6px; font-size: 10px; color: #3a3a3c; display: inline-flex; align-items: center; justify-content: center; }
#topbar #zoom { width: 70px; margin: 0 2px; }

/* ---------- 확대 두 가지: 전체(파랑) · 시나리오(보라). 맨 위 줄과 웹툰 카드는 확대해도 그대로 ---------- */
#topbar .zoom-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 8px; border-radius: 9px; font-size: 12px; }
#topbar .zoom-group b { font-size: 11px; margin-right: 3px; }
#topbar .zoom-group.all { background: #e8f1ff; color: #1c5fb8; }
#topbar .zoom-group.all .zoom-range { accent-color: #1c7ed6; }
#topbar .zoom-group.paper { background: #efeaff; color: #4b31d1; }
#topbar .zoom-group.paper .zoom-range { accent-color: #7c5cff; }
#topbar .zoom-range { width: 64px; margin: 0 2px; }
#topbar .zoom-num { width: 44px; font-size: 12px; color: #3a3a3c; text-align: right; padding: 1px 3px; border: 1px solid #d2d2d7; border-radius: 5px; background: #fff; margin-left: 3px; }
#topbar .zoom-btn { width: 20px; height: 20px; padding: 0; border-radius: 6px; font-size: 10px; color: #3a3a3c; display: inline-flex; align-items: center; justify-content: center; }
:root { --pz: 1; }
#body, #body-ink, #scn-boxes, #body2 { zoom: var(--pz); }
#paper { overflow: hidden; }
/* 폴더 아이콘 색, 폴더·글 지우기 단추 */
.folder-row .fi { color: #e6a800; }
.folder-row .fa-inbox { color: #7c5cff; }
.folder-row.research .fi { color: #0c8599; }
.folder-row .fdel, .note-item .ndel { flex: none; border: none; background: none; padding: 0 4px; font-size: 13px; color: #e03131; }
.folder-row .fdel:hover, .note-item .ndel:hover { color: #e03131; background: none; }
.note-item { position: relative; }
.note-item .ndel { position: absolute; right: 8px; top: 9px; }
.note-item .t { padding-right: 20px; }
/* 글목록: 전체 레퍼런스 보드 항목 + 실선 */
.ep-entry.fb { background: linear-gradient(135deg, #e6f6ee, #d3efdf); color: #1f7a45; border-color: #bfe5cf; }
.ep-entry.fb.sel { background: linear-gradient(135deg, #2f9e44, #237a35); color: #fff; border-color: transparent; }
.entry-sep { margin: 2px 10px 8px; border-top: 2px solid #d2d2d7; }
/* 인물·씬 상자: 한 줄에 4개, 줄 수는 아래 손잡이로 */
:root { --ins-rows: 2; }
#ins-bar { flex-direction: row; align-items: flex-start; gap: 8px; }
.ins-group .ins-grid { grid-template-columns: repeat(2, 150px); max-height: calc(var(--ins-rows) * 27px + 2px); }
.ins-cell { width: 150px; }
.ins-group.scene .ins-grid { grid-template-columns: repeat(2, 236px); }
.ins-group.scene .ins-cell { width: 236px; }
.ins-cell.empty .cell-txt:empty::before { content: '···'; color: #c4c4c9; }
.ins-group .ins-wrap { min-height: auto; }
#ins-resize { flex: none; position: relative; height: 12px; margin: 0 12px 2px; cursor: row-resize; display: flex; align-items: center; }
#ins-resize .grip { position: absolute; left: calc(50% - 18px); top: 4px; width: 36px; height: 4px; border-radius: 2px; background: #d2d2d7; }
#ins-resize:hover .grip, #ins-resize.active .grip { background: #7c5cff; }
#ins-extra { display: none; }
#ins-extra .ins-seqwrap { align-self: center; }
#ins-extra .ins-seq { padding: 2px 8px; font-size: 12px; }
#ins-extra .ins-cap { font-size: 10px; color: #6e6a7c; }
/* 알림 (자동 저장) */
#toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 400; padding: 8px 16px; border-radius: 10px; background: rgba(29, 29, 31, .88); color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none; }
/* 예/아니오 창 */
.ask-actions .danger { background: #e03131; border-color: #e03131; color: #fff; }

/* 맞춤법 카드 (웹툰 미리보기 위) */
.spell-card { margin: 8px 10px 0; padding: 8px 12px; border: 1px solid #f5c2c7; border-radius: 12px; background: #fff5f5; color: #c92a2a; font-weight: 700; font-size: 14px; text-align: left; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.spell-card:hover { background: #ffe3e3; }
.spell-card.active { background: #e03131; border-color: #e03131; color: #fff; }
/* 연속숫자: 씬 상자 오른쪽 */
.ins-group.scene + .ins-seqwrap { margin-left: 2px; }
/* 글목록 항목 색: 설정·시놉(주황) · 등장인물(분홍) */
.ep-entry.syn { background: linear-gradient(135deg, #fff1dc, #ffe2b8); color: #b3540b; border-color: #f7cf9a; }
.ep-entry.syn.sel { background: linear-gradient(135deg, #f08c00, #d9480f); color: #fff; border-color: transparent; }
.ep-entry.cast { background: linear-gradient(135deg, #ffe3ec, #ffcfe0); color: #b8285b; border-color: #f6b6cb; }
.ep-entry.cast.sel { background: linear-gradient(135deg, #e64980, #c2255c); color: #fff; border-color: transparent; }
/* 설정 및 시놉 */
#synop-view, #cast-view { grid-column: 3; grid-row: 2; border-right: none; position: relative; }
#synop-wrap { flex: 1; overflow: auto; background: #fbf7f0; padding: 30px 20px 60px; }
#synop-ed { max-width: 760px; margin: 0 auto; min-height: 60%; padding: 34px 40px; background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); outline: none; text-align: center; font-size: 16px; font-weight: 600; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; color: #2b2b2e; }
/* 등장인물 */
#cast-wrap { flex: 1; overflow: auto; background: #fdf3f6; padding: 20px; }
#cast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.cast-card { position: relative; display: flex; gap: 14px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); border: 1px solid #f3d5df; }
.cast-photo { position: relative; flex: none; width: 190px; height: 190px; border-radius: 10px; background: #f1f1f4; border: 2px dashed #d8c4cc; overflow: hidden; cursor: pointer; user-select: none; touch-action: none; }
.cast-photo.has { border-style: solid; border-color: #eab9c8; cursor: grab; }
.cast-photo img { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.cast-photo .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #b8a3ac; font-size: 12px; text-align: center; padding: 10px; }
.cast-photo .ph i { font-size: 26px; }
.cast-photo .cp-del { position: absolute; right: 4px; top: 4px; border: none; background: rgba(0, 0, 0, .45); color: #fff; border-radius: 6px; font-size: 11px; padding: 1px 6px; }
.cast-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cast-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 6px; font-size: 13px; }
.cast-row label { color: #b8285b; font-weight: 700; font-size: 12px; }
.cast-row input { min-width: 0; padding: 4px 8px; border: 1px solid #e5e5ea; border-radius: 6px; font: inherit; font-size: 13px; }
.cast-row.two { grid-template-columns: 58px 1fr 58px 1fr; }
.cast-free { margin-top: 4px; min-height: 64px; padding: 6px 8px; border: 1px solid #e5e5ea; border-radius: 6px; font: inherit; font-size: 13px; line-height: 1.6; resize: vertical; }
.cast-del { position: absolute; right: 8px; top: 8px; border: none; background: none; color: #e03131; font-size: 13px; padding: 2px 6px; }
.cast-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: #b8a3ac; }
.ins-cell .cell-txt { max-width: none; }

/* ---------- 콘티북 ---------- */
.conti-card { margin: 8px 10px 0; padding: 8px 12px; border: 1px solid #b3e0d8; border-radius: 12px; background: #e6f7f3; color: #0b7a63; font-weight: 700; font-size: 14px; text-align: left; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.conti-card:hover { background: #d3f0e9; }
.conti-card.active { background: #0c8599; border-color: #0c8599; color: #fff; }
#conti-view { grid-column: 3; grid-row: 2; border-right: none; position: relative; }
#conti-tools .seg button.active { background: #ffd60a; border-color: #e6bf00; }
#conti-tools label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
#conti-tools input[type=number] { width: 56px; }
#conti-wrap { flex: 1; overflow: auto; background: #e9e9ee; padding: 18px 20px 60px; }
#conti-strip { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; margin: 0 auto; }
.ct-cut { background: #fff; border-radius: 12px; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); padding: 10px 12px 12px; }
.ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.ct-head b { font-size: 14px; color: #0c8599; }
.ct-head button { padding: 2px 7px; font-size: 11px; }
.ct-head .ct-del { color: #e03131; }
.ct-body { display: flex; gap: 12px; align-items: stretch; }
.ct-canvas { flex: none; width: 720px; aspect-ratio: 16 / 9; border: 1px solid #c7c7cc; border-radius: 6px; background: #fff; touch-action: none; cursor: crosshair; }
#conti-strip[data-tool="select"] .ct-canvas { cursor: default; }
#conti-strip[data-tool="eraser"] .ct-canvas { cursor: cell; }
.ct-text { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid #d2d2d7; border-radius: 6px; font: inherit; font-size: 14px; line-height: 1.7; resize: none; }
@media (max-width: 1500px) { .ct-canvas { width: 600px; } }

/* ---------- 설정 및 시놉: 상자 모양 ---------- */
#synop-form { max-width: 820px; margin: 0 auto; padding: 26px 34px 40px; background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); display: flex; flex-direction: column; gap: 14px; }
.sy-title { font: inherit; font-size: 26px; font-weight: 700; padding: 12px 14px; border: 2px solid #f0c987; border-radius: 12px; background: #fffaf2; outline: none; }
.sy-title:focus { border-color: #f08c00; }
.sy-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border: 1px solid #f0d9b5; border-radius: 12px; background: #fffdf8; position: relative; }
.sy-box label, .sy-box .sy-label-in { font-size: 13px; font-weight: 700; color: #b3540b; }
.sy-box .sy-label-in { border: none; border-bottom: 1px dashed #e8c38f; background: transparent; outline: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 700; color: #b3540b; }
.sy-box textarea { font: inherit; font-size: 16px; font-weight: 600; line-height: 1.7; border: none; background: transparent; outline: none; resize: none; overflow: hidden; min-height: 34px; padding: 2px 0; }
.sy-box.syn textarea { min-height: 260px; resize: vertical; overflow: auto; font-weight: 500; line-height: 1.9; }
.sy-x { position: absolute; right: 8px; top: 8px; border: none; background: none; color: #e03131; font-size: 12px; padding: 2px 6px; }
.sy-add { align-self: center; font-size: 13px; padding: 4px 12px; color: #b3540b; border-color: #f0c987; background: #fff; }
.sy-line { width: 100%; border: none; border-top: 2px solid #e6d3b3; margin: 6px 0; }
#syn-align button.active { background: #ffd60a; border-color: #e6bf00; }
/* ---------- 등장인물: 카드 다시 ---------- */
.cast-addwrap { display: flex; justify-content: center; margin: 4px 0 18px; }
#cast-add { font-size: 16px; font-weight: 700; padding: 10px 26px; border-radius: 12px; color: #fff; background: #e64980; border-color: #e64980; box-shadow: 0 4px 12px rgba(230, 73, 128, .3); }
#cast-add:hover { background: #d6336c; }
.cast-card { display: flex; flex-direction: column; padding: 14px 14px 6px; }
.cast-body { display: flex; gap: 14px; flex: 1; }
.cast-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border: none; background: #fff0f4; color: #e03131; border-radius: 8px; font-size: 13px; padding: 0; }
.cast-x:hover { background: #ffd8e2; }
.cast-fields { padding-right: 26px; }
.cast-row.extra { grid-template-columns: 76px 1fr 22px; }
.cast-row .cast-exlabel { font-weight: 700; color: #b8285b; font-size: 12px; }
.cast-exdel { border: none; background: none; color: #c4c4c9; padding: 0; font-size: 11px; }
.cast-exdel:hover { color: #e03131; }
.cast-exadd { align-self: flex-start; font-size: 12px; padding: 2px 8px; color: #b8285b; border-color: #f6b6cb; background: #fff; }
.cast-free { flex: 1; min-height: 150px; }
.cast-resize { height: 10px; margin: 4px -6px 0; cursor: row-resize; border-radius: 5px; position: relative; }
.cast-resize::after { content: ''; position: absolute; left: calc(50% - 18px); top: 3px; width: 36px; height: 4px; border-radius: 2px; background: #e8cdd6; }
.cast-resize:hover::after { background: #e64980; }
/* 휴대폰 기종 고르기: 목록 글씨 작게 */
#wt-device.compact { font-size: 12px; max-width: 220px; }
/* 연속숫자 설명 두 줄 */
.ins-seqwrap .ins-cap { white-space: pre-line; line-height: 1.3; }
.note-item .nt-edit { width: 100%; font: inherit; font-size: 14px; padding: 2px 6px; border: 1.5px solid #7c5cff; border-radius: 6px; outline: none; }
.cast-photo { width: 160px; height: 160px; }
.cast-row.three { grid-template-columns: 30px 1fr 22px 1fr 44px 1fr; }
.cast-row.three label { font-size: 11px; }
.cast-row input { padding: 4px 6px; }
.cast-row.extra { grid-template-columns: 70px 1fr 20px; }
.ins-seqwrap .ins-cap { max-width: 170px; font-size: 10px; }

/* 콘티북: 대사 칸 + 이름 단추, 클립 단추 */
.ct-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.ct-names { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-names button { font-size: 12px; padding: 2px 8px; color: #4b31d1; border-color: #cfc4ff; background: #f4f1ff; }
.ct-names button:hover { background: #ebe5ff; }
.ct-text { flex: 1; }
.ct-canvas { cursor: default; }
#conti-tools .ct-clip { color: #fff; background: #0c8599; border-color: #0c8599; font-weight: 700; }
#conti-tools .ct-clip:hover { background: #0b7285; }
/* 맞춤법 판: 왼쪽 아래 카드 위에서 시작, 머리 부분을 끌어 옮김 */
#spell-panel { right: auto; top: auto; left: 12px; bottom: 170px; max-height: 60vh; }
#spell-panel .sp-head { cursor: move; user-select: none; }

/* 콘티북: 도구 줄 크게, 인물 줄, 내보내기 창 */
#conti-tools { padding: 8px 14px; }
#conti-tools b#conti-title { font-size: 16px; }
#conti-tools label { font-size: 14px; }
#conti-tools select { font-size: 14px; padding: 4px 6px; max-width: 220px; }
#conti-tools input[type=number] { width: 70px; font-size: 15px; padding: 4px 6px; }
#conti-tools button { font-size: 14px; padding: 6px 12px; }
#conti-tools .ct-clip { font-size: 15px; padding: 7px 16px; }
.ct-names-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 14px 8px; border-bottom: 1px solid #ececee; background: #faf9ff; }
.ct-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 4px; background: #fff; border: 1px solid #ddd6fb; border-radius: 8px; }
.ct-chip .ct-name { border: none; background: none; font-size: 14px; padding: 2px 6px; color: #1d1d1f; }
.ct-chip .ct-name:hover { background: #f0edff; }
.ct-chip .ct-name.empty { color: #b0aac4; }
.ct-chip .kb-box { min-width: 0; padding: 1px 5px; font-size: 10px; line-height: 15px; color: #8e8e93; border: 1px dashed #d2d2d7; }
.ct-chip .kb-box.set { color: #4b31d1; font-weight: 600; border-style: solid; }
.ct-chip .ct-x { border: none; background: none; color: #c4c4c9; padding: 0 4px; font-size: 11px; }
.ct-chip .ct-x:hover { color: #e03131; }
.ct-name-edit { font: inherit; font-size: 14px; width: 90px; padding: 2px 6px; border: 1.5px solid #7c5cff; border-radius: 6px; outline: none; }
.ct-addname { font-size: 13px; padding: 3px 10px; color: #4b31d1; border-color: #cfc4ff; background: #fff; }
.ct-head .ct-copy { color: #0b7a63; border-color: #b3e0d8; background: #e6f7f3; }
.ct-dlg { width: min(560px, 100%); }
.ct-sec { margin: 10px 0; padding: 10px 12px; border: 1px solid #e5e5ea; border-radius: 10px; }
.ct-chk { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ct-sub { margin: 8px 0 0 22px; }
.ct-sub > span:first-child { width: 48px; }

/* 콘티북 v3: 왼쪽 시나리오 읽기 칸 + 오른쪽 컷 가로 줄 (대사는 컷 아래) */
#conti-body { flex: 1; display: flex; min-height: 0; }
#conti-left { position: relative; flex: none; display: flex; flex-direction: column; border-right: 1px solid #e0e0e5; background: #fff; min-width: 0; }
.ct-left-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #ececee; font-size: 12px; }
.ct-left-head button { font-size: 13px; padding: 5px 10px; }
#conti-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#conti-src-menu { position: absolute; left: 10px; top: 42px; z-index: 5; max-height: 60vh; overflow: auto; }
#conti-src { flex: 1; border: none; outline: none; resize: none; padding: 14px 16px; font: inherit; font-size: 15px; line-height: 1.8; color: #1d1d1f; background: #fff; }
#conti-left .resizer { right: -3px; }
#conti-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#conti-shapes { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid #ececee; background: #fff; font-size: 13px; flex-wrap: nowrap; overflow-x: auto; }
#conti-shapes .sep { width: 1px; height: 22px; background: #e0e0e5; margin: 0 4px; }
#conti-shapes label { display: inline-flex; align-items: center; gap: 4px; }
#conti-shapes input[type=number] { width: 58px; font-size: 14px; padding: 3px 4px; }
#conti-shapes button { font-size: 13px; padding: 4px 9px; }
#conti-shape-btns { display: inline-flex; gap: 4px; }
#conti-shape-btns button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 8px 2px; font-size: 11px; line-height: 1.1; color: #48484a; }
#conti-shape-btns button canvas { width: 36px; height: 24px; }
#conti-shape-btns button.active { background: #f0edff; border-color: #7c5cff; color: #4b31d1; }
#conti-shape-btns button.pen.active { background: #fff4d6; border-color: #e6a800; color: #8a6400; }
#conti-wrap { padding: 16px 18px 40px; }
#conti-strip { flex-direction: row; align-items: flex-start; gap: 16px; max-width: none; margin: 0; --ct-w: 480px; }
.ct-cut { flex: none; width: var(--ct-w); }
.ct-body { flex-direction: column; gap: 8px; }
.ct-canvas { width: 100%; cursor: default; }
#conti-strip[data-tool="pen"] .ct-canvas { cursor: crosshair; }
.ct-side { width: 100%; }
.ct-text { min-height: 150px; height: 150px; resize: vertical; }
.ct-head { flex-wrap: wrap; }
.ct-head .ct-copy { font-size: 12px; padding: 3px 9px; font-weight: 700; }
.ct-dlg .exp-row label { display: inline-flex; align-items: center; gap: 4px; }
#conti-shapes > *, #conti-shapes button, #conti-shapes label { white-space: nowrap; flex: none; }
#conti-shapes .spacer { flex: 1; }

/* 상자 위 빈 설명 줄 없앰 · 새 폴더 단추 빨간 십자 · 시놉 흰 상자 */
.ins-cap.blank, .ins-cap:empty { display: none; }
.ins-group .ins-wrap { justify-content: flex-start; }
#btn-new-folder { color: #e03131; font-size: 16px; font-weight: 700; }
#btn-new-folder:hover { color: #c92a2a; }
.sy-box textarea { background: #fff; border: 1px solid #ead9bd; border-radius: 8px; padding: 6px 10px; }
.sy-box textarea:focus { border-color: #f08c00; }
/* 콘티북 v4: 왼쪽 글 편집 칸 + 오른쪽 모양·인물·글자 줄, 큰 컷 하나 + 스토리에디터식 대사 줄 목록 */
#conti-src { padding: 14px 16px; }
#conti-save { font-size: 13px; padding: 5px 12px; background: #7c5cff; border-color: #7c5cff; color: #fff; }
#conti-save.dirty { background: #e03131; border-color: #e03131; }
#conti-shapes { padding: 6px 14px 4px; border-bottom: none; }
#conti-right .ct-names-bar { padding: 4px 14px 6px; border-bottom: none; background: #fff; }
#conti-ctrl { display: flex; align-items: center; gap: 10px; padding: 4px 14px 8px; border-bottom: 1px solid #ececee; background: #fff; font-size: 13px; white-space: nowrap; }
#conti-ctrl label { display: inline-flex; align-items: center; gap: 4px; }
#conti-ctrl input[type=number] { width: 58px; font-size: 14px; padding: 3px 4px; }
#conti-ctrl button { font-size: 14px; padding: 3px 9px; }
#conti-ctrl .sep { width: 1px; height: 22px; background: #e0e0e5; }
#conti-ctrl input[type=range] { width: 160px; }
#conti-stage { --ct-w: 720px; width: var(--ct-w); max-width: 100%; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
#conti-stage .ct-head { margin-bottom: 0; }
#conti-stage .ct-canvas { width: 100%; aspect-ratio: 16 / 9; border: 1px solid #c7c7cc; border-radius: 6px; touch-action: none; }
#conti-stage[data-tool="pen"] .ct-canvas { cursor: crosshair; }
#conti-lines { display: flex; flex-direction: column; gap: 3px; }
.ct-line { display: flex; align-items: flex-start; gap: 6px; }
.ct-line .ct-num { flex: none; width: 30px; padding-top: 7px; text-align: right; font-size: 12px; color: #9a9aa2; font-variant-numeric: tabular-nums; }
.ct-line textarea { flex: 1; min-height: 32px; height: 32px; padding: 6px 10px; border: 1px solid #e0e0e5; border-radius: 6px; font: inherit; font-size: 14px; line-height: 1.4; resize: none; overflow: hidden; background: #fff; }
.ct-line textarea:focus { border-color: #7c5cff; outline: none; }
.ct-line.sel textarea { border-color: #7c5cff; background: #faf9ff; }
.ct-line .ct-line-copy { flex: none; margin-top: 3px; padding: 3px 7px; font-size: 11px; color: #0b7a63; border-color: #b3e0d8; background: #e6f7f3; }
.ct-line.ct-blank .ct-line-copy { visibility: hidden; }
#conti-more { align-self: center; font-size: 15px; padding: 8px 22px; margin-top: 6px; color: #0c8599; border-color: #9cd3dc; background: #e8f6f8; }
.ct-left-head { flex-wrap: nowrap; }
.ct-left-head button { white-space: nowrap; flex: none; }
.ct-left-head #conti-src-name { flex: 1; min-width: 0; }
.ct-left-head .hint { flex: none; white-space: nowrap; font-size: 11px; }
.ct-left-head .spacer { display: none; }

/* 설정 및 시놉 · 등장인물: 시나리오 같은 글꼴·크기·굵게 */
.fm-tools { display: inline-flex; align-items: center; gap: 4px; }
.fm-tools select { font-size: 13px; padding: 3px 4px; }
.fm-tools select[id$="-font"] { max-width: 180px; }
.fm-tools .fmt-btn { padding: 3px 9px; font-size: 13px; }
.fm-tools .fmt-btn.active { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.st-top .sep { width: 1px; height: 20px; background: #e0e0e5; flex: none; }
#synop-form .sy-title, #synop-form textarea, #synop-form input { font-family: var(--sy-font, inherit); }
#synop-form .sy-box textarea { font-size: var(--sy-size, 16px); font-weight: var(--sy-weight, 600); }
#synop-form .sy-title { font-size: calc(var(--sy-size, 16px) * 1.6); }
#cast-grid input, #cast-grid textarea { font-family: var(--cs-font, inherit); font-size: var(--cs-size, 13px); font-weight: var(--cs-weight, 400); }
/* 콘티북 v5: 대사 줄(왼쪽, 세로로 스크롤) + 말풍선 칸(오른쪽, 고정) */
#conti-right { min-height: 0; }
#conti-work { flex: 1; display: flex; min-height: 0; }
#conti-linecol { position: relative; flex: none; display: flex; flex-direction: column; min-height: 0; background: #f6f6f8; border-right: 1px solid #e0e0e5; min-width: 0; }
#conti-linescroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 10px 8px 30px 6px; }
#conti-linecol .resizer { right: -3px; }
#conti-lines { display: flex; flex-direction: column; gap: 4px; }
.ct-line { display: flex; align-items: flex-start; gap: 4px; }
.ct-line .ct-num { flex: none; width: 24px; padding-top: 7px; text-align: right; font-size: 12px; color: #9a9aa2; }
.ct-line textarea { flex: 1; min-width: 0; }
.ct-line .ct-line-del { flex: none; margin-top: 4px; border: none; background: none; color: #e03131; font-size: 13px; padding: 3px 5px; opacity: .55; }
.ct-line .ct-line-del:hover { opacity: 1; background: #fff0f0; border-radius: 6px; }
.ct-line.ct-blank .ct-line-del { visibility: hidden; }
#conti-more { align-self: stretch; margin: 8px 0 0 28px; font-size: 15px; padding: 9px 12px; color: #0c8599; border-color: #9cd3dc; background: #e8f6f8; font-weight: 700; }
#conti-area { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 14px 14px; background: #e9e9ee; }
#conti-area .ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#conti-area .ct-head .ct-copy { font-size: 14px; padding: 6px 14px; }
#conti-area .ct-head .ct-del { font-size: 13px; padding: 5px 10px; color: #e03131; border-color: #f3c0c0; background: #fff; }
#conti-canvas-box { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
#conti-canvas-box .ct-canvas { aspect-ratio: auto; background: #fff; border: 1px solid #c7c7cc; border-radius: 6px; touch-action: none; }
#conti-area[data-tool="pen"] .ct-canvas { cursor: crosshair; }
/* 콘티북 왼쪽 머리: 좁아도 겹치지 않게, 안내는 아래 줄로 */
.ct-left-head { flex-wrap: wrap; overflow: hidden; row-gap: 4px; }
.ct-left-head .hint { flex-basis: 100%; white-space: normal; }

/* 설정 및 시놉 · 등장인물: 서식 칸 (고른 글자에만 글꼴·크기·굵게) */
.rt { outline: none; word-break: break-word; }
.rt:empty::before { content: attr(data-ph); color: #b4b4bc; pointer-events: none; }
.sy-box .rt.sy-val, .sy-box .rt.sy-syn { background: #fff; border: 1px solid #ead9bd; border-radius: 8px; padding: 6px 10px; font-size: 16px; font-weight: 600; line-height: 1.7; min-height: 34px; }
.sy-box .rt.sy-syn { min-height: 260px; font-weight: 500; line-height: 1.9; }
.sy-box .rt:focus { border-color: #f08c00; }
.rt.sy-title { min-height: 1.3em; white-space: nowrap; overflow: hidden; }
.cast-row .rt.cast-in { min-width: 0; padding: 4px 8px; border: 1px solid #e5e5ea; border-radius: 6px; font-size: 13px; line-height: 1.5; min-height: 1.5em; background: #fff; white-space: nowrap; overflow: hidden; }
.cast-row .rt.cast-in:focus { border-color: #eab9c8; }
.rt.cast-free { background: #fff; overflow: auto; }
.rt.cast-free:focus { border-color: #eab9c8; }
/* 식자 내보내기: 머리 줄 (오토액션 단축키 · 크게 클립으로 바로 내보내기 · 그 아래 전체 삭제) */
#conti-area .ct-head { align-items: flex-start; }
.ct-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: help; }
.ct-auto .kb-box { font-size: 12px; padding: 3px 10px; border: 1px dashed #c7c7cc; background: #fff; color: #8e8e93; cursor: pointer; }
.ct-auto .kb-box.set { border-style: solid; border-color: #0c8599; color: #0c8599; font-weight: 700; }
.ct-head-btns { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ct-head-btns .ct-big { font-size: 17px; font-weight: 700; padding: 11px 22px; color: #fff; background: #0c8599; border-color: #0c8599; border-radius: 10px; }
.ct-head-btns .ct-big:hover { background: #0b7285; }
#conti-area .ct-head-btns .ct-del { align-self: flex-end; }
/* 설정 및 시놉 칸 기본 글자는 보통 굵기 (시나리오처럼, 굵게는 고른 글자에만) */
.sy-box .rt.sy-val, .sy-box .rt.sy-syn { font-weight: 400; }

/* 설정 및 시놉 · 등장인물: 시나리오 글 도구줄을 옮겨 와 씀 (정렬까지만, 이미지부터는 숨김) */
#text-tools.form-mode { background: #fff; border-bottom: 1px solid #ececee; }
#text-tools.form-mode button[data-fmt="justifyRight"] ~ * { display: none !important; }
/* 칸 안내 글씨는 칸을 누르면 사라짐 (한글 조합이 흔들리지 않게) */
.rt:empty:focus::before { content: none; }

/* 식자 클립연동: 시나리오 글 도구줄을 위에 (크기는 아래 '글자' 칸으로), 말풍선 칸은 세로로 길게 스크롤 */
#text-tools.conti-mode #font-size { display: none; }
#conti-canvas-box { overflow-y: auto; overflow-x: hidden; }
#conti-canvas-box .ct-canvas { flex: none; }
.ct-guide { margin: 0 0 12px 18px; padding: 0; font-size: 13px; line-height: 1.7; }
.ct-guide li { margin-bottom: 4px; }