/* 기본 내장 글꼴: 나눔바른고딕 (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: 14px; 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: 12px; }
.sep { width: 1px; height: 18px; background: #d2d2d7; margin: 0 4px; }

#app { display: grid; grid-template-columns: 220px 280px 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: 15px; }
.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: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item .s { font-size: 12px; 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: 3px 8px; font-size: 12px; }
.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; }
.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: 12px; 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: 1; 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: 1; 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.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; }