:root {
  /* 회색을 진하게 했다. #6b7280·#8a8a92 는 작은 글씨에서 명도차가
     3.5:1 쯤이라 안 읽힌다. 아래 값은 5:1 을 넘는다. */
  /* 색은 어나더롱폼과 같은 것을 쓴다 (2026-09-25). 두 프로그램을 나란히
     쓰는 사람에게 결이 다르면 다른 회사 물건처럼 보인다. */
  --bg: #eceef3; --panel: #fff; --ink: #1c2033; --muted: #55606e;
  --dim: #5d6673; --soft: #fafbfc;
  --line: #e6e8ef;          /* 테두리로 세우는 줄 */
  --line2: #e6e8ef;         /* 롱폼과 이름을 맞춰 둔다 */
  --faint: #8b90a3;         /* 곁글 — 본문에는 안 쓴다 */
  --accent: #4f56e8; --accent-ink: #fff; --chip: #eef0fe;
  --ok: #0f7b3f; --ok-bg: #e7f7ef;
  --warn: #c68a1b; --warn-bg: #fdf2e0;
  --track: #e9ebf2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  letter-spacing: -.2px;
  /* Pretendard 파일을 fonts/ 에 넣으면 자막과 같은 글꼴이 된다.
     없으면 윈도우 기본 한글 글꼴로 떨어진다. */
  font: 17px/1.65 "Pretendard", "Pretendard Variable", -apple-system,
        "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
  -webkit-font-smoothing: antialiased; }
/* 화면 전체를 종이 한 장처럼 띄운다(롱폼과 같다). 가장자리가 닫혀 있으면
   어디까지가 프로그램인지 눈에 잡혀서, 창을 키워도 글이 흩어지지 않는다. */
.app { display: flex; min-height: calc(100vh - 36px); margin: 18px auto;
  max-width: 1720px; background: var(--panel); border-radius: 18px;
  box-shadow: 0 14px 50px rgba(20, 25, 60, .09); }

.sidebar { width: 234px; flex: 0 0 234px; background: var(--panel);
  border-right: 1px solid var(--line); padding: 22px 0 20px;
  align-self: flex-start; position: sticky; top: 18px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  /* .app 에 overflow 를 걸면 sticky 가 죽는다. 모서리는 여기서 직접 깎는다. */
  border-radius: 18px 0 0 18px; }
.sidebar h1 { font-size: 17px; margin: 0 0 18px; padding: 0 20px;
  letter-spacing: -.5px; }
.nav { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 20px; border-radius: 0; font-size: 15px; font-family: inherit;
  color: #4a5065; cursor: pointer; position: relative; letter-spacing: -.2px; }
.nav:hover { background: #fafbfd; color: var(--ink); }
.nav.active { background: var(--chip); color: var(--accent); font-weight: 600; }
/* 고른 칸 왼쪽에 서는 막대. 색만으로 가리면 어느 칸인지 한눈에 안 들어온다. */
.nav.active::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.hint { font-size: 14.5px; color: var(--muted); margin: 18px 6px 0; }
/* 사이드바는 좌우 여백을 칸마다 주므로(.nav padding), 그 안의 글도 맞춘다 */
.sidebar .hint, .sidebar .side-label { padding: 0 20px; margin-left: 0; margin-right: 0; }
.sidebar hr { margin: 14px 20px; }

.content { flex: 1; padding: 28px 36px; max-width: 1680px; }
.view { display: none; } .view.active { display: block; }
header h2 { margin: 0 0 4px; font-size: 24px; }
header p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.todo { color: var(--muted); }

textarea, input[type=text] { width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 8px; font: 13px/1.6 ui-monospace, "Consolas", monospace;
  background: var(--panel); color: var(--ink); resize: vertical; }
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
button.primary { background: var(--accent); color: var(--accent-ink); border: 0;
  padding: 10px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
button.primary:hover { filter: brightness(1.08); }
.status { font-size: 14px; color: var(--muted); }
.status.ok { color: var(--ok); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin: 16px 0; }
.card h3 { margin: 0 0 10px; font-size: 16px; }
.card h3 small { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 13px; }
/* 도구 클래스다. 두 겹짜리 규칙(.genbar.sticky, .row.tight …)이 이기면
   감췄다고 한 칸이 그대로 떠 있다 — 여기서는 !important 가 맞는 자리다. */
.hidden { display: none !important; }
.badge { background: var(--chip); color: var(--accent); border-radius: 20px;
  padding: 2px 10px; font-size: 13px; font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--line); padding: 8px 6px; }
td { border-bottom: 1px solid var(--line); padding: 9px 6px; vertical-align: top; }
td:first-child { width: 36px; color: var(--muted); }
td.ko { width: 30%; }
td.en { color: #334155; font-family: ui-monospace, "Consolas", monospace; font-size: 13px; }

.keyrow { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 10px; }
.keyrow .top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.keyrow .label { font-weight: 600; font-size: 15px; }
.keyrow .roles { color: var(--muted); font-size: 13px; }
.keyrow .set { color: var(--ok); font-size: 13px; font-weight: 600; }
.keyrow .unset { color: var(--muted); font-size: 13px; }
.keyrow .help { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* 목록 머리줄 */
.boardhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bulk { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.muted { color: var(--muted); font-size: 14.5px; }
button.ghost, a.ghost { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--ink); }
button.ghost:hover, a.ghost:hover { background: var(--chip); border-color: var(--accent); color: var(--accent); }
.summary { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 14px;
  padding: 10px 14px; background: var(--bg); border-radius: 8px; font-size: 14px; }
.summary b { color: var(--accent); }
.summary .warn { color: #b45309; }
td.thumb { width: 92px; }
td.thumb .slot { width: 84px; height: 48px; border: 1px dashed var(--line); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
td.mode { width: 116px; }
td.mode select { width: 100%; padding: 5px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: var(--panel); color: var(--ink); }
td.state { width: 66px; color: var(--muted); font-size: 13px; }

label.inline { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
label.inline select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--panel); color: var(--ink); }

.genbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg); border-radius: 8px; margin-bottom: 14px; }
.bar { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.log { margin-top: 10px; max-height: 190px; overflow-y: auto; font-size: 13px;
  font-family: ui-monospace, "Consolas", monospace; color: var(--muted); }
.log div { padding: 2px 0; border-bottom: 1px solid var(--line); }
td.thumb img { width: 84px; height: 48px; object-fit: cover; border-radius: 5px; display: block; }

button.ghost.tiny { padding: 3px 8px; font-size: 12px; margin-top: 5px; }
td.state { width: 78px; }

select.grow { flex: 1; min-width: 220px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 15px; background: var(--panel); color: var(--ink); }
#voiceModel { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: var(--panel); color: var(--ink); }
audio { width: 100%; margin: 10px 0; }
#lineTable td.line { width: 52%; }
#lineTable td.dur { width: 64px; color: var(--muted); }
#lineTable audio { width: 190px; height: 32px; margin: 0; }

input.sayfix { width: 100%; margin-top: 6px; padding: 5px 8px; font-size: 13px;
  border: 1px dashed var(--line); border-radius: 5px; background: var(--bg);
  color: var(--ink); font-family: inherit; }
input.sayfix:focus { border-style: solid; }
input.sayfix.saved { border-color: var(--ok); background: #f0fdf4; }

.snaprow { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.snaprow:last-child { border-bottom: 0; }
.snapinfo { min-width: 0; }
.snaphead { font-size: 14px; font-weight: 600; }
.snapfirst { font-size: 13px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.snaprow button { margin-left: 6px; }

.boardslot table { width: 100%; }
a.outlink { display: inline-block; margin: 6px 10px 0 0; padding: 7px 14px;
  background: var(--chip); color: var(--accent); border-radius: 7px;
  font-size: 14px; font-weight: 600; text-decoration: none; }
a.outlink:hover { background: var(--accent); color: #fff; }
#subPreview { width: 100%; max-width: 640px; margin-top: 12px; border-radius: 8px; }
#buildTitle { flex: 0 0 200px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 15px; }
#subPreset { flex: 1; min-width: 200px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; background: var(--panel); color: var(--ink); }

label.uplabel { display: block; margin-top: 5px; font-size: 12px; color: var(--accent);
  cursor: pointer; text-align: center; border: 1px dashed var(--line); border-radius: 5px;
  padding: 3px 0; }
label.uplabel:hover { background: var(--chip); border-color: var(--accent); }
td.thumb { width: 100px; }

.lineedit { margin-top: 7px; }
textarea.sayfix { width: 100%; font-size: 13px; padding: 6px 8px; resize: vertical;
  border: 1px dashed var(--line); border-radius: 5px; background: var(--bg);
  font-family: inherit; }
textarea.sayfix:focus { border-style: solid; }
.editbar { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.editbar input[type=range] { width: 110px; }
.editbar .muted { font-size: 12px; min-width: 62px; }

/* 이미지 크게 보기 */
.lb { position: fixed; inset: 0; z-index: 900; background: rgba(12, 14, 18, .93);
  display: flex; align-items: center; justify-content: center; padding: 28px; }
.lbfig { margin: 0; max-width: 1200px; width: 100%; }
.lbfig img, .lbfig video { width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: 8px; background: #000; display: block; }
.lbfig figcaption { margin-top: 14px; color: #e8eaed; }
.lbhead { display: flex; align-items: baseline; gap: 12px; font-size: 16px; }
.lbhead span:first-child { font-weight: 700; color: #7aa7ff; flex: 0 0 auto; }
.lbprompt { margin-top: 8px; font-size: 13px; line-height: 1.7; color: #9aa0a6;
  font-family: ui-monospace, "Consolas", monospace; max-height: 96px; overflow-y: auto; }
.lbclose, .lbnav { position: absolute; background: rgba(255,255,255,.1); color: #fff;
  border: 0; cursor: pointer; border-radius: 50%; line-height: 1; }
.lbclose { top: 20px; right: 24px; width: 40px; height: 40px; font-size: 19.5px; }
.lbnav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34.5px; }
.lbprev { left: 20px; } .lbnext { right: 20px; }
.lbclose:hover, .lbnav:hover { background: rgba(255,255,255,.22); }
td.thumb img { cursor: zoom-in; }

td.mode { width: 132px; }
.vidtag { margin-top: 4px; font-size: 12px; color: var(--ok); text-align: center; }

audio.tryout { width: 100%; max-width: 340px; height: 34px; margin-top: 7px; }

select.fitsel { width: 100%; margin-top: 4px; padding: 3px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); }

#lineTable td.line > div:first-child.changed { background: #f0fdf4; border-radius: 4px; }

#seqAudio { width: 100%; }
#nowPlaying { margin-top: 8px; font-size: 14px; }
#lineTable tr.playing { background: #eef5ff; }
#lineTable tr.playing td { border-bottom-color: var(--accent); }

/* 이어 듣기 조작줄 — 문장 길이에 따라 폭이 흔들리면 버튼 위치가 움직여 누르기 어렵다.
   그래서 폭과 높이를 고정하고, 글자만 안에서 줄인다. */
.playbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px;
  z-index: 800; display: flex; align-items: center; gap: 10px;
  background: #1c1f23; color: #fff; padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  width: min(720px, 94vw); height: 62px; box-sizing: border-box; }
.playbar button { background: rgba(255,255,255,.12); color: #fff; border: 0;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 16px;
  line-height: 1; flex: 0 0 36px; padding: 0; }
.playbar button:hover { background: rgba(255,255,255,.24); }
.playbar .pbstop { background: transparent; font-size: 14px; margin-left: auto; }
.pbtext { flex: 1 1 auto; min-width: 0; padding: 0 4px; overflow: hidden; }
.pbno { font-size: 12px; color: #9aa0a6; white-space: nowrap; }
.pbline { font-size: 14px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

#voiceNotice { margin: 8px 0 2px; font-size: 13px; }
.warnline { color: #b45309; font-weight: 600; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px; padding: 8px 10px; font-size: 13px; }

#fillCount { font-weight: 400; opacity: .85; margin-left: 2px; }
button.primary:disabled { background: var(--line); color: var(--muted); cursor: default; }

#stability { width: 140px; }
#stabilityTxt { min-width: 34px; display: inline-block; }

/* 만든 영상 목록 */
.workrow { display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.workrow:last-child { border-bottom: 0; }
.workno { flex: 0 0 46px; font-size: 21.5px; font-weight: 700; color: var(--accent);
  text-align: center; }
.workmain { flex: 1; min-width: 0; }
.worktitle { font-size: 16px; font-weight: 600; }
.workmeta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.workact { flex: 0 0 auto; }
.workgone { color: #b45309; font-size: 13px; }

.rulerow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.rulerow:last-child { border-bottom: 0; }
.ruletext { font-size: 14px; font-family: inherit; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#ruleList { max-height: 300px; overflow-y: auto; margin-top: 8px; }

/* ── 제목 추천 ───────────────────────────────────────────── */
.factline { display: flex; gap: 12px; padding: 5px 0; font-size: 15px; }
.factline b { flex: 0 0 110px; color: var(--accent); font-weight: 600; }
.titlecard { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  margin-bottom: 10px; background: var(--bg); }
.titlehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titlehead b { font-size: 17.5px; }
.titlewhy { margin: 6px 0 4px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.titlecard .row { margin: 6px 0 0; }
.thumbchip { display: inline-block; white-space: pre-line; text-align: center;
  border-radius: 8px; padding: 14px 22px; margin: 0 10px 10px 0;
  background: #111; color: #fff; font-weight: 800; font-size: 20.5px; line-height: 1.35; }
.savedline { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; }
.savedline:last-child { border-bottom: 0; }
.savedline span:first-child { flex: 1; }
#titleOwn { font-family: inherit; font-size: 15px; }

/* ── 편 목록 · AI 영상 프롬프트 · 의심 문장 ────────────────── */
.projcard { display: flex; align-items: center; gap: 16px; }
.projcard.projopen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.projcover { flex: 0 0 132px; height: 74px; border-radius: 7px; overflow: hidden;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; }
.projcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projmain { flex: 1; min-width: 0; }
input.projtitle { border: 1px solid transparent; background: transparent; padding: 4px 6px;
  font: 600 16px/1.4 inherit; color: var(--ink); border-radius: 6px; }
input.projtitle:hover { border-color: var(--line); }
input.projtitle:focus { border-color: var(--accent); background: var(--panel); }

.vpcard { display: flex; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.vpcard img { flex: 0 0 116px; height: 66px; object-fit: cover; border-radius: 6px; display: block; }
.vpmain { flex: 1; min-width: 0; }
.vphead { font-size: 14px; margin-bottom: 4px; }
.vpprompt { font: 12px/1.6 ui-monospace, "Consolas", monospace; color: #334155; }
.vpneg { margin-top: 14px; padding: 10px 12px; background: var(--bg); border-radius: 8px;
  font-size: 13px; color: var(--muted); }
.vpneg span { font-family: ui-monospace, "Consolas", monospace; }

.checkrow { display: flex; align-items: center; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line); }
.checkrow:last-child { border-bottom: 0; }
.checkhot .workno { color: #b45309; font-weight: 700; }
#lineTable tr.hit { background: #fff7ed; }

/* ── 채널 ─────────────────────────────────────────────────── */
.chcard { border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px 4px;
  margin-bottom: 10px; background: var(--bg); }
.chcard .row { margin: 6px 0; flex-wrap: wrap; gap: 10px; }
.chcard input[type=text] { padding: 6px 9px; font: 13px/1.5 inherit; width: 9em; }
.chcard select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--panel); color: var(--ink); max-width: 14em; }
#newProjChannel { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 15px; background: var(--panel); color: var(--ink); }
.projchan { margin: 4px 0 2px; gap: 8px; }
.projchan select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--panel); color: var(--ink); }
.nowproj { display: inline-block; padding: 6px 12px; background: var(--chip);
  color: var(--accent); border-radius: 7px; font-size: 14px; font-weight: 600; margin: 0 0 14px; }

/* ── 이미지 격자 · 로고 ───────────────────────────────────── */
.grid { --cell: 170px; display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); }
.gcell { position: relative; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--bg); }
.gcell img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gcell:hover { border-color: var(--line); }
.gcell.picked { border-color: #dc2626; }
.gcell.picked::after { content: "다시 뽑기"; position: absolute; inset: auto 0 0 0;
  background: #dc2626; color: #fff; font-size: 12px; text-align: center; padding: 2px 0; }
.gno { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 12px; padding: 1px 6px; border-radius: 4px; cursor: zoom-in; }
.logoprev { margin: 8px 0; display: flex; align-items: center; gap: 12px; }
.logoprev img { max-height: 64px; max-width: 220px; background: #333; border-radius: 6px; padding: 6px; }

/* ── 화풍 고르기 ──────────────────────────────────────────── */
.stylegrid { display: grid; gap: 10px; margin: 12px 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.scard { position: relative; border: 2px solid var(--line); border-radius: 9px;
  overflow: hidden; cursor: pointer; background: var(--panel); padding-bottom: 8px; }
.scard:hover { border-color: var(--muted); }
.scard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sthumb { aspect-ratio: 16/9; background: var(--bg); display: flex;
  align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sname { font-size: 14px; font-weight: 700; margin: 8px 10px 2px; }
.sdesc { font-size: 12.5px; color: var(--muted); margin: 0 10px 6px; line-height: 1.5; }
.smk { margin: 0 10px; }
.chbrand { border-top: 1px dashed var(--line); padding-top: 8px; }
.brandslot { display: inline-flex; align-items: center; gap: 6px; }
.chlogo { height: 34px; max-width: 120px; object-fit: contain; background: #333;
  border-radius: 5px; padding: 3px 6px; }

/* ── 용량 정리 ────────────────────────────────────────────── */
.cleanrow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.cleanrow:last-child { border-bottom: 0; }
.cleanrow input { margin-top: 4px; }
.cleanrow.care b { color: #b45309; }
.badge.care { background: #fff7ed; color: #b45309; }

/* ── 숫자 새기기 ──────────────────────────────────────────── */
.numrow { display: flex; align-items: flex-start; gap: 12px; padding: 9px 2px;
  border-bottom: 1px solid var(--line); }
.numrow:last-child { border-bottom: 0; }
.numrow.on .workno { color: var(--ok); font-weight: 700; }
.numrow .row { margin: 5px 0 0; gap: 8px; }
input.numinput { width: 17em; padding: 5px 9px; font: 13px/1.5 inherit; }
.numprev { width: 100%; max-width: 760px; border-radius: 8px; margin: 10px 0; display: block; }
textarea.enedit { width: 100%; font: 11.5px/1.55 ui-monospace, "Consolas", monospace;
  padding: 6px 8px; border: 1px dashed var(--line); background: var(--bg);
  border-radius: 6px; resize: vertical; }
textarea.enedit:focus { border-style: solid; background: var(--panel); }
textarea.enedit.saved { border-color: var(--ok); }

/* ── 인포그래픽 ───────────────────────────────────────────── */
.islide .row { margin: 8px 0; }
.islide .ikind { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--panel); color: var(--ink); }
.islide .iscene { width: 5.5em; padding: 6px 9px; }
.islide .ititle { font: 600 15px/1.5 inherit; margin-bottom: 8px; }
.islide .ilines { font: 13px/1.7 ui-monospace, "Consolas", monospace; }
.islide .inote { font-size: 14px; font-family: inherit; }
.iprev { width: 100%; max-width: 820px; border-radius: 8px; margin-top: 10px; display: block; }

.autoinfo { display: flex; align-items: center; gap: 12px; padding: 8px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.autoinfo:last-child { border-bottom: 0; }
.autoinfo .workmain { flex: 1; min-width: 0; }
.autoinfo .workmeta { margin-top: 2px; }
.gcell.isinfo { border-color: #d95926; }
.gcell.isinfo .gno { background: rgba(217,89,38,.9); }
.gcell .slot { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 12px; border: 0; }
.gko { padding: 6px 8px 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gcell.picked .gko { color: #b91c1c; }
.gcell.picked::after { position: static; display: block; }
.headleft { display: flex; align-items: center; gap: 14px; min-width: 0; }
.headleft h3 { margin: 0; }
button.bigbtn { background: var(--panel); border: 2px solid var(--accent); color: var(--accent);
  border-radius: 8px; padding: 9px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  white-space: nowrap; }
button.bigbtn:hover { background: var(--accent); color: #fff; }
.gzoom { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 15px; line-height: 1; cursor: zoom-in; opacity: 0; transition: opacity .12s; }
.gcell:hover .gzoom { opacity: 1; }
.gzoom:hover { background: var(--accent); }
button.skipbtn.on { border-color: #b45309; color: #b45309; background: #fff7ed; font-weight: 700; }
#lineTable tr.skipped, .boardslot tr.skipped { background: #fffaf3; }
.boardslot tr.skipped td.ko { color: #b45309; }

/* 조절 칸이 줄바꿈될 때 글자가 한 자씩 쪼개지지 않게 */
label.inline { white-space: nowrap; flex: 0 0 auto; }
.bulk { flex-wrap: wrap; row-gap: 8px; column-gap: 10px; }
.bulk button, .bulk select { white-space: nowrap; flex: 0 0 auto; }
.boardhead { row-gap: 10px; }
.gedit { right: 34px; cursor: pointer; }
#slideEdit .iprev { max-width: 620px; }
#sTitle { font-family: inherit; font-size: 15px; margin-bottom: 8px; }

/* ── 쇼츠 탭 ─────────────────────────────────────────────── */
/* 미리보기는 '자막이 지워졌나'만 보면 되므로 작게. 세로 영상이라
   높이를 안 묶으면 카드가 화면 밖으로 흘러나간다. */
#shShots { align-items: flex-start; gap: 14px; }
#shShots figure { margin: 0; }
#shShots img {
  max-height: 260px; max-width: 100%;
  border-radius: 8px; border: 1px solid var(--line, #ddd); display: block;
}
#shShots figcaption { margin-bottom: 4px; }
#shScript { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.7; }
#shResult { width: 100%; max-width: 340px; border-radius: 10px; }
#shLog { max-height: 220px; overflow-y: auto; }

/* 홈: 채널별로 편을 갈라 본다. 배당처럼 따로 키울 채널은 색이 달라야 한다. */
.chantabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.chantabs button { background: var(--card); color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px; font-size: 14px; cursor: pointer; font-family: inherit; }
.chantabs button:hover { color: var(--ink); }
.chantabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600; }
.chanhead { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.chanhead:first-child { margin-top: 4px; }
.chanhead .bar { width: 4px; height: 17px; border-radius: 2px; background: var(--accent); }
.chanhead h4 { margin: 0; font-size: 15px; }
.chanhead .cnt { font-size: 13px; color: var(--dim); }
.chanhead .tool { margin-left: auto; font-size: 13.5px; color: var(--accent);
  text-decoration: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; }
.chanhead .tool:hover { border-color: var(--accent); }
.projcard.ch-money { border-left: 3px solid #E8A33D; }
.chanhead.ch-money .bar { background: #E8A33D; }
.chanhead.ch-money .tool { color: #E8A33D; }

.chantabs a.chanhead { margin: 0; }
.chantabs .tool { border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-size: 14px; color: #E8A33D; }
.chantabs .tool:hover { border-color: #E8A33D; }

#shBatchTable table { width: 100%; border-collapse: collapse; }
#shBatchTable th, #shBatchTable td { padding: 6px; vertical-align: top;
  border-bottom: 1px solid var(--line, #e5e5e5); font-size: 14px; }
#shBatchTable input, #shBatchTable textarea { width: 100%; font-family: inherit; font-size: 14px; }
#shBatchTable textarea { line-height: 1.6; }
#shBatchLog { max-height: 200px; overflow-y: auto; }

#shLines table { width: 100%; border-collapse: collapse; }
#shLines th, #shLines td { padding: 5px 6px; border-bottom: 1px solid var(--line, #e5e5e5);
  font-size: 14px; vertical-align: middle; }
#shLines input { width: 100%; font-family: inherit; font-size: 14px; }
#shLines button { margin-right: 4px; padding: 3px 8px; font-size: 13px; }
#shLines .mark { font-size: 12px; }

/* 재생바 볼륨. 귀에 맞추는 일이라 손이 자주 가니 늘 보이게 둔다. */
.pbvol { display: flex; align-items: center; gap: 8px; margin-left: 14px;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.pbvol button { background: none; border: 0; color: inherit; font-size: 16px;
  cursor: pointer; padding: 2px 4px; line-height: 1; }
.pbvol input[type=range] { width: 92px; accent-color: #fff; height: 18px; cursor: pointer; }
.pbvol #pbVolNum { font-size: 12.5px; opacity: .65; min-width: 24px; text-align: right;
  font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .pbvol input[type=range] { width: 60px; }
  .pbvol #pbVolNum { display: none; } }

/* 썸네일 추천. 셋을 나란히 놓고 눈으로 고르게 한다. */
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.idea { border: 1px solid var(--line); border-radius: 10px; padding: 14px 15px;
  background: var(--card); display: flex; flex-direction: column; gap: 9px; }
.idea .kind { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.idea .ko { font-size: 16px; font-weight: 650; line-height: 1.35; }
.idea .why { font-size: 13.5px; color: var(--dim); line-height: 1.65; }
.idea .prompt { font-size: 12.5px; color: var(--dim); line-height: 1.6; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; max-height: 88px;
  overflow: auto; font-family: ui-monospace, Consolas, monospace; }
.idea .acts { display: flex; gap: 7px; margin-top: auto; }
.idea .acts button { flex: 1; }

/* 메뉴를 갈래로 묶는다. 롱폼은 위에서 아래로 따라가는 순서이고,
   쇼츠는 그 순서와 상관없이 따로 도는 작업이라 섞이면 헷갈린다. */
.navgroup { margin: 18px 0 6px; padding: 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; color: var(--dim); text-transform: none;
  border-top: 1px solid var(--line); padding-top: 14px; }
.navgroup:first-of-type { margin-top: 14px; }
.navgroup span { font-weight: 400; letter-spacing: 0; opacity: .7; margin-left: 6px; }

/* 제목 카드의 전략 딱지 (검색 적중형 · 호기심 후킹형 · 권위 스토리형) */
.titlecard .kind { font-size: 12.5px; font-weight: 700; color: var(--accent);
  letter-spacing: .02em; margin-bottom: 6px; }
.titlecard button.tiny { padding: 5px 11px; font-size: 13px; }

/* 밖의 도구로 나가는 줄. 앱 안에서 만드는 것과 섞이지 않게 위에 따로 둔다. */
.outbar { align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; }
.outbar .muted { font-size: 14px; }
.btnlink { display: inline-block; text-decoration: none; }

/* 편 번호. 완성본 파일 이름 앞에 붙는 그 번호다. */
.projseq { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--dim);
  letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-bottom: 3px; }

.projseq { font-weight: 600; }

/* 업로드 날짜와 간격. 간격이 벌어지면 눈에 띄어야 한다. */
.update { padding: 5px 8px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--ink); }
.gapbadge { font-size: 12.5px; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; }
.gapbadge.slow { color: #b4541f; border-color: #e0b090; background: #fff6ee; }

/* 채널마다 매주 올리는 요일과 남은 날. 머리줄 오른쪽에 붙는다. */
.cadence { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; }
.daychip { width: 26px; height: 26px; padding: 0; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 50%; background: var(--card);
  color: var(--dim); cursor: pointer; line-height: 1; }
.daychip:hover { color: var(--ink); }
.daychip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.cadence { gap: 4px; }
.dday { font-size: 13px; font-weight: 700; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.dday.now { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 판을 만들 수 없는 장면은 흐리게. 고를 수 없다는 게 보여야 한다. */
.autoinfo.dim { opacity: .55; }

/* 대본 보관함. 편 카드보다 가볍게 보여야 «아직 시작 안 한 것» 임이 드러난다. */
/* 세 칸으로 나눈다. 이름과 꼬리표 · 첫 줄 · 단추.
   한 줄로만 놓으면 가운데가 통째로 비고 단추가 저 멀리 혼자 떠 있다. */
.draftcard { display: grid; gap: 18px; align-items: center; padding: 13px 16px;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 1.25fr) auto;
  border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 8px; }
.draftcard:hover { border-color: var(--accent); border-style: solid; }
.draftcard.used { opacity: .55; }
.draftmain { min-width: 0; }
.drafttitle { display: block; font-size: 15.5px; line-height: 1.35;
  margin-bottom: 7px; word-break: keep-all; }
.draftchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.draftchips span { font-size: 12px; color: var(--muted); background: var(--chip);
  border-radius: 999px; padding: 2.5px 9px; white-space: nowrap; }
.draftchips .when { background: none; padding: 2.5px 2px; opacity: .75; }
.draftchips .done { background: var(--accent); color: #fff; }
/* 가운데 칸. 빈 자리를 대본 첫 줄로 채우면 무슨 대본인지 바로 읽힌다. */
.draftpeek { min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.65;
  color: var(--muted); border-left: 2px solid var(--line); padding-left: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.draftact { display: flex; gap: 6px; align-items: center; }
.draftact button { margin-top: 0; }
@media (max-width: 900px) {
  .draftcard { grid-template-columns: 1fr; gap: 10px; }
  .draftpeek { border-left: 0; padding-left: 0; }
}
#draftForm textarea { width: 100%; margin: 8px 0; }

/* ── 배당 편 짓기 ─────────────────────────────────────────── */
/* 칸마다 이름을 위에 얹는다. 이름을 옆에 붙이면 줄마다 길이가 달라져
   칸이 안 맞고, 좁아지면 아무 데서나 줄이 꺾인다. */
.divform { margin-top: 2px; }
/* 배당은 다른 편과 만드는 길이 아예 다르다. 자리부터 갈라 둔다. */
.startrow { align-items: center; }
/* 단추 글자가 좁다고 세 줄로 꺾이면 줄이 통째로 흐트러진다. */
.startrow button, .startrow .orbar { white-space: nowrap; flex: 0 0 auto; }
.startrow #newProjChannel { flex: 0 1 auto; min-width: 0; }
.startrow .orbar { color: var(--muted); font-size: 13px; padding: 0 2px; }
.divstart { font-size: 13.5px; }
.divcard { border-color: var(--accent); }
.divform > .muted { margin: 0 0 14px; line-height: 1.7; max-width: 62em; }
/* 칸을 1fr 로 늘리면 넓은 화면에서 숫자 한 칸이 300px 가 된다. 위를 막아
   왼쪽부터 채우게 한다. 칸 크기가 내용에 맞아야 눈이 안 헤맨다. */
.divform .fields { display: grid; gap: 12px 14px; margin-bottom: 12px;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(150px, 230px)); }
.divform .fields.howmuch { grid-template-columns: repeat(auto-fit, minmax(135px, 175px)); }
.divform .f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.divform .f > span:first-child { font-size: 12.5px; color: var(--muted);
  letter-spacing: .02em; }
.divform .f input[type="text"], .divform .f select { width: 100%; }
.divform .unit { display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); white-space: nowrap; }
.divform .unit input[type="number"] { flex: 1 1 auto; min-width: 54px; }
.divform .unit.chkin { gap: 7px; height: 100%; }
.divform .unit.chkin input { flex: 0 0 auto; }

.divacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 4px; }
.divacts .spacer { flex: 1 1 auto; }

.divout { margin-top: 16px; }
.divout .ok { margin: 0 0 12px; }
.divnums { display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.divnums span { background: var(--chip); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; }
.divnums b { display: block; font-size: 21.5px; line-height: 1.3; }
.divnums small { color: var(--muted); font-size: 12.5px; }
.divheads { margin: 8px 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.divgrid { display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.divgrid figure { margin: 0; }
.divgrid img { width: 100%; border-radius: 8px; border: 1px solid var(--line);
  display: block; }
.divgrid figcaption { font-size: 12.5px; color: var(--muted); margin-top: 5px;
  line-height: 1.45; }

/* 링크를 버튼 줄에 섞어 놓을 때. 밑줄이 있으면 혼자 튄다. */
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* 이 조건이 깔고 있는 연 수익률. 높을수록 눈에 걸리게 한다. */
#divTR { font-weight: 600; }
#divTR.ok { color: var(--muted); }
#divTR.mid { color: var(--accent); }
#divTR.warn { color: #d9534f; }

/* ══════════════════════════════════════════════════════════
   쇼츠스튜디오 — 제작 화면
   앞선 화면은 카드 일곱 개가 세로로 끝없이 늘어져서, 뭘 먼저 해야 하는지
   안 보이고 결과를 보려면 한참 스크롤해야 했다. 그래서 두 가지를 바꿨다.
     1) 왼쪽은 하는 일, 오른쪽은 결과 — 스크롤 없이 같이 본다.
     2) 매번 건드리는 것(소재·대본·성우)만 펼치고 나머지는 접는다.
   ══════════════════════════════════════════════════════════ */

main { padding: 0; }
#shortsView { padding: 0; }

.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
  padding: 18px 20px 0;
}
.work .col { min-width: 0; }
.work .side { position: sticky; top: 18px; }

@media (max-width: 1180px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work .side { position: static; }
}

/* ── 단계 카드 ─────────────────────────────────────────── */
.step {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e3e3e6);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.stephead {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.stephead h3 { margin: 0; font-size: 16px; }
.stephead small { color: var(--dim, #5d6673); font-weight: 400; font-size: 13px; }
.stephead .acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* 번호를 동그라미로. 순서가 있다는 걸 글자보다 빨리 알린다. */
.num {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent, #2f6bff); color: #fff;
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}

/* ── 접는 묶음 ─────────────────────────────────────────── */
details.more {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e3e3e6);
  border-radius: 12px;
  margin-bottom: 10px;
}
details.more > summary {
  cursor: pointer; padding: 11px 16px;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: "▸"; color: var(--dim, #5d6673); font-size: 12px;
}
details.more[open] > summary::before { content: "▾"; }
details.more > summary small { color: var(--dim, #5d6673); font-weight: 400; font-size: 13px; }
details.more > *:not(summary) { padding: 0 16px; }
details.more > *:not(summary):last-child { padding-bottom: 14px; }

/* ── 줄 배치 ───────────────────────────────────────────── */
.row.tight { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row.tight .grow { flex: 1 1 180px; min-width: 0; }
.hint { color: var(--dim, #5d6673); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }

#shClip { width: 100%; }
#shScript, #shPageText { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.75; }
#shFacts { max-height: 180px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; }
#shShots img { max-height: 200px; }

button.sm { padding: 4px 10px; font-size: 13px; }
button.big { padding: 11px 22px; font-size: 16px; font-weight: 700; }

/* ── 아래 고정 실행 막대 ───────────────────────────────── */
.genbar.sticky {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0 16px;
  background: linear-gradient(to top,
    var(--bg, #f4f5f7) 60%, transparent);
}

/* ── 결과 칸 ───────────────────────────────────────────── */
.side #shResult { width: 100%; border-radius: 10px; display: block; background: #000; }
.side .card { margin-bottom: 12px; }
.card.placeholder {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--line, #d8d8dc);
  background: transparent;
}
.card.placeholder p { margin: 4px 0; font-size: 14px; }

#shLines table { width: 100%; border-collapse: collapse; }
#shLines td { padding: 5px 4px; border-bottom: 1px solid var(--line, #eee); font-size: 13px; }
#shLines input { width: 100%; font-family: inherit; font-size: 13px; }
#shLines button { margin-right: 3px; padding: 2px 6px; font-size: 12px; }

.sidebar .note {
  margin-top: auto; padding: 12px 6px 4px;
  font-size: 12px; color: var(--dim, #5d6673); line-height: 1.6;
}

/* ── 인기영상 ──────────────────────────────────────────── */
.tabrow { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.tabrow button {
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #e3e3e6); background: var(--panel, #fff);
  font-size: 14px;
}
.tabrow button.on { background: var(--accent, #2f6bff); color: #fff; border-color: transparent; }
.tabrow.sub button { padding: 6px 14px; font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; }
.tcard {
  border: 1px solid var(--line, #e3e3e6); border-radius: 10px;
  overflow: hidden; background: var(--panel, #fff);
}
.tcard .thumb {
  aspect-ratio: 9 / 16; background: repeating-linear-gradient(
    45deg, #eceef1, #eceef1 10px, #e4e7ea 10px, #e4e7ea 20px);
  display: grid; place-items: center; color: var(--dim, #5d6673); font-size: 13px;
}
.tcard .meta { padding: 8px 10px; font-size: 14px; }
.tcard .meta b { display: block; font-weight: 600; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .meta span { color: var(--dim, #5d6673); font-size: 13px; }

/* 인기영상 화면은 제작 화면과 달리 통짜라 여백을 여기서 준다 */
#trendView { padding: 20px 24px 40px; }
#trendView header h2 small {
  font-weight: 400; font-size: 14px; margin-left: 10px;
  color: var(--dim, #5d6673);
}
#trendView header p { color: var(--dim, #5d6673); font-size: 14px; margin: 4px 0 0; }

/* 메뉴는 왼쪽에 붙어 있고 내용은 그 옆에 — 좁아도 위아래로 쌓지 않는다 */
.app { display: flex; align-items: stretch; min-height: 100vh; }
.app > main { flex: 1; min-width: 0; }
.sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; }
@media (max-width: 900px) {
  .sidebar { width: 168px; flex-basis: 168px; padding: 16px 10px; }
}

/* ══ 내려받기 · 분석 ═══════════════════════════════════════ */
#dlView, #anView { padding: 20px 24px 40px; }
.grow { flex: 1; min-width: 0; }
.loglines {
  font: 12px/1.7 ui-monospace, "Consolas", monospace;
  color: var(--muted); max-height: 160px; overflow: auto; margin-top: 10px;
}

.filelist { display: flex; flex-direction: column; gap: 1px; }
.frow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px; font-size: 14px;
}
.frow:nth-child(odd) { background: var(--bg); }
.frow b { font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.frow span { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ── 분석 결과 ─────────────────────────────────────────── */
.anhead { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; }
.anthumb { width: 132px; border-radius: 8px; display: block; }
.anmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anmeta b { font-size: 16px; line-height: 1.45; }
.anmeta span { color: var(--muted); font-size: 13px; }

.annums { display: flex; gap: 22px; padding-right: 6px; }
.annums div { text-align: right; }
.annums small { display: block; color: var(--muted); font-size: 12px; }
.annums b { font-size: 18.5px; font-variant-numeric: tabular-nums; }
.annums b.hot { color: #d92d20; }

.anprod { font-size: 16px; font-weight: 600; margin: 2px 0 10px; }
.anlist { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.75; }
.anlist li { margin-bottom: 2px; }
.anflow { font-size: 14.5px; line-height: 1.95; color: var(--ink); margin: 0; }
.anhook { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.anhook b { color: var(--ink); margin-right: 6px; }

.chip {
  display: inline-block; padding: 4px 10px; margin: 0 5px 5px 0;
  border-radius: 6px; background: var(--chip); color: var(--accent);
  font-size: 13.5px; font-weight: 500;
}
.chip.zh { background: #fff4e5; color: #b54708; }
.qrow { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.qlab { flex: 0 0 34px; color: var(--muted); font-size: 13px; padding-top: 5px; }

.srcrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.src { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  background: var(--bg); border-radius: 7px; padding: 5px 10px; }
.src b { font-weight: 500; }
.src a { color: var(--accent); text-decoration: none; }
.src a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .anhead { grid-template-columns: 96px minmax(0, 1fr); }
  .anthumb { width: 96px; }
  .annums { grid-column: 1 / -1; justify-content: flex-start; gap: 26px;
    padding-top: 4px; border-top: 1px solid var(--line); }
  .annums div { text-align: left; }
}

/* ── 그림으로 고르기 (템플릿 · 자막 위치 · 자막 모양 · 화풍) ── */
/* 타일 안은 CSS 모형이 아니라 **서버가 실제로 구운 그림**이다.
   모형은 색만 맞고 글자 굵기·띠 높이가 실물과 달라서, 골라 만들어
   보고서야 알았다. */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px;
  min-width: 0; max-width: 100%; }
.pick {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 9px; padding: 5px 5px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px;
}
.pick:hover { border-color: #c3c9d2; }
.pick.on {
  border-color: transparent; background: var(--chip);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(37, 99, 235, .26);
  transform: translateY(-2px);
}
.pick small { font-size: 11.5px; color: var(--muted); line-height: 1.25;
  text-align: center; height: 30px;
  /* 한국어는 어절로 접어야 한다. 안 그러면 '레터박스 블 랙' 이 된다. */
  word-break: keep-all; overflow-wrap: break-word; }
.pick.on small { color: var(--accent); font-weight: 700; }

.tile {
  position: relative; display: block; width: 66px; height: 117px;
  border-radius: 5px; overflow: hidden; background: #15171a;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .82; transition: opacity .12s; }
.pick:hover .tile img, .pick.on .tile img { opacity: 1; }

/* 순위 배지·자리는 화면 한구석에 작게 얹히는 것이라, 66px 타일 안에서는
   숫자가 손톱만 해져 열 가지가 다 같아 보인다. 이 타일만 키운다. */
.picks.badge .pick { width: 108px; }
.picks.badge .tile { width: 96px; height: 171px; }
.picks.badge .pick small { font-size: 12.5px; }

/* 화풍 견본은 16:9 로 뽑혀 있다. 세로로 자르면 뭘 그렸는지 안 보인다. */
.picks.wide .pick { width: 116px; }
.picks.wide .tile { width: 104px; height: 59px; }

/* ── 자막 없애기 ───────────────────────────────────────── */
#wipeView { padding: 20px 24px 40px; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
.ba figure { margin: 0; }
.ba img { width: 100%; border-radius: 8px; display: block; background: var(--bg); }
.ba figcaption { font-size: 13px; color: var(--muted); margin-top: 5px; text-align: center; }
#wpVideo { width: 100%; max-width: 380px; border-radius: 10px; display: block; }
#wpDown { text-decoration: none; }

/* ── 홈 ────────────────────────────────────────────────── */
#homeView { padding: 20px 24px 40px; }
#homeView header h2 small { font-weight: 400; font-size: 14px; margin-left: 10px; }
#homeView header h2 small.ok { color: var(--ok); }
#homeView header h2 small.muted { color: var(--muted); }

.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px; margin-bottom: 18px; }
.job {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--ink);
}
.job:hover { border-color: #c3c9d2; }
.job .dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd0d8; }
.job .jb { display: flex; flex-direction: column; min-width: 0; }
.job .jb b { font-size: 14.5px; font-weight: 600; }
.job .jb small { color: var(--muted); font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.job .jw { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.job.run { border-color: var(--accent); }
.job.run .dot { background: var(--accent); animation: pulse 1.1s infinite; }
.job.run .jw { color: var(--accent); font-weight: 600; }
.job.ok .dot { background: var(--ok); }
.job.bad { border-color: #f0c2bd; }
.job.bad .dot { background: #d92d20; }
.job.bad .jw { color: #d92d20; }
@keyframes pulse { 50% { opacity: .35; } }

.frow a { color: var(--accent); text-decoration: none; margin-left: 6px; }
.frow a:hover { text-decoration: underline; }

/* ── 쇼츠 종류 하위 메뉴 ───────────────────────────────── */
/* 종류는 더 늘어난다. 세로로 길어지는 건 괜찮지만 제작 화면을
   잡아먹으면 안 되므로 메뉴 쪽에 둔다. */
.subnav { display: flex; flex-direction: column; margin: 2px 0 4px 10px;
  padding-left: 9px; border-left: 1px solid var(--line); }
.subnav button {
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 6px 9px; border-radius: 6px; font-size: 13.5px;
  color: var(--muted); font-family: inherit;
}
.subnav button:hover { background: var(--bg); color: var(--ink); }
.subnav button.on { color: var(--accent); font-weight: 600; background: var(--chip); }

/* 제작 화면 맨 위, 지금 무슨 종류인지 한 줄 */
.kindnow { padding: 16px 20px 0; }
.kindnow b { font-size: 17.5px; }
.kindnow small { color: var(--muted); font-size: 13.5px; margin-left: 9px; }

/* ── 나눈 토막 목록 ────────────────────────────────────── */
.parts { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.prow {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px;
  font-size: 14px; cursor: pointer;
}
.prow:nth-child(odd) { background: var(--bg); }
.prow b { font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.prow span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.prow a { color: var(--accent); text-decoration: none; font-size: 12.5px; }

/* 성우 잔량 — 글자 수로 과금되니 만들기 전에 보여야 한다 */
.stephead small.ok { color: var(--ok); }
.stephead small.warn { color: #b54708; }
.stephead small.bad { color: #d92d20; }

/* ── 소재 썸네일 격자 ──────────────────────────────────── */
/* 이름만 보고 고르는 게 어려워서 그림으로 고른다. 칸은 작게 — 9:16 을
   그대로 두면 한 칸이 260px 이 되어 화면 절반을 소재가 잡아먹는다.
   알아볼 정도만 있으면 되므로 3:4 로 낮추고 폭을 못박는다. */
.clipgrid {
  display: grid; grid-template-columns: repeat(auto-fill, 88px);
  gap: 7px; margin: 6px 0 10px;
}
.clip {
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  border-radius: 7px; padding: 4px 4px 3px; text-align: left;
  display: flex; flex-direction: column; gap: 3px; font: inherit;
  color: var(--ink); min-width: 0;
}
.clip:hover { border-color: #c3c9d2; }
.clip small {
  font-size: 11px; line-height: 1.25; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 고른 칸은 세게 표시한다. 88px 칸에서 테두리 1px 차이는 안 보인다 —
   테두리 대신 고리(box-shadow)를 두르고 바탕을 물들이고 살짝 띄운다.
   테두리 굵기를 바꾸면 칸이 밀리므로 고리를 쓴다. */
.clip.on {
  border-color: transparent;
  background: var(--chip);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(37, 99, 235, .28);
  transform: translateY(-2px);
}
.clip.on small { color: var(--accent); font-weight: 700; }

/* 안 고른 것은 한 꺺 죽여 둔다. 고른 것이 도드라지는 건 상대적인 일이다. */
.clip .cthumb img { opacity: .72; filter: saturate(.85); transition: opacity .12s; }
.clip:hover .cthumb img,
.clip.on .cthumb img { opacity: 1; filter: none; }
.clip.on .cthumb { box-shadow: inset 0 0 0 2px var(--accent); }

.cthumb {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 5px; overflow: hidden; background: #15171a;
}
.cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnum {
  position: absolute; top: 3px; left: 3px; min-width: 19px; height: 19px;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 800; display: grid; place-items: center;
  padding: 0 4px; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
}
.csec {
  position: absolute; bottom: 2px; right: 3px; font-size: 10px;
  color: #fff; background: rgba(0, 0, 0, .62); border-radius: 3px;
  padding: 0 3px; font-style: normal;
}
.clipmore { grid-column: 1 / -1; font-size: 13px; color: var(--muted);
  padding: 2px 2px; }

/* 카드에서 이름 고치기 */
.clip .cname {
  width: 100%; font: 10px/1.25 inherit; padding: 1px 3px;
  border: 1px solid var(--accent); border-radius: 4px;
  background: var(--panel); color: var(--ink);
}
.clip small { cursor: text; }

/* 단계 안에서 한 번 더 접는 칸 — 자주 안 만지는 것들 */
.more.inner { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.more.inner > summary { font-size: 13.5px; color: var(--muted); font-weight: 400; }

/* 그림 고르기 줄은 한 줄을 다 쓰고 넘치면 접어 내린다.
   글자를 키우자 타일이 화면 밖으로 밀려서 붙였다. */
/* 타일을 품은 라벨. `label.inline { flex: 0 0 auto }` 가 한 수 위라 여기서
   `.haspicks` 로만 적으면 안 먹는다 — 여섯 개까지는 그래도 줄에 들어가서
   안 먹는 줄 몰랐고, 순위 배지 열 개에서 화면 밖으로 밀려 나왔다.
   같은 무게로 적고, 타일 줄은 제 줄을 통째로 쓰게 한다. */
label.inline.haspicks {
  flex: 1 1 100%; min-width: 0; align-items: flex-start;
  flex-wrap: wrap; white-space: normal;
}
label.inline.haspicks > .picks { flex: 1 1 100%; }
.picks { min-width: 0; max-width: 100%; }

/* 연관 찾기 · 인기영상 카드 */
#relView { padding: 20px 24px 40px; }
#relView header h2 small { font-weight: 400; font-size: 14px; margin-left: 10px;
  color: var(--muted); }
a.tcard { text-decoration: none; color: inherit; display: block; }
a.tcard:hover { border-color: var(--accent); }
.tcard .thumb { background-size: cover; background-position: center; }
.tcard .meta span { display: block; }

/* ── 큰 미리보기 판 ────────────────────────────────────── */
/* 78px 타일로는 자막 위치 네 단계가 구분되지 않는다. 고른 조합을
   크게 한 장 옆에 둔다. */
.lookwrap { display: block; }
.lookcols { min-width: 0; }
@media (max-width: 1100px) {
  .lookwrap { grid-template-columns: minmax(0, 1fr); }
}

/* ── 인트로·아웃트로 설명 ──────────────────────────────── */
.bewrap { margin-bottom: 12px; }
.betime { display: flex; gap: 3px; margin-bottom: 10px; }
.bebar {
  font-size: 11.5px; padding: 6px 8px; border-radius: 6px; color: #fff;
  white-space: nowrap; text-align: center;
}
.bebar.intro { background: #7c3aed; flex: 0 0 auto; }
.bebar.main { background: var(--accent); flex: 1 1 auto; }
.bebar.outro { background: #0f7b3f; flex: 0 0 auto; }
.bebar.off { background: var(--line); color: var(--muted); }

.becards { display: flex; gap: 10px; }
.becards figure { margin: 0; width: 108px; }
.becards img { width: 100%; border-radius: 8px; display: block;
  background: #15171a; aspect-ratio: 9 / 16; object-fit: cover; }
.becards figcaption { font-size: 11.5px; color: var(--muted);
  text-align: center; margin-top: 4px; }

/* ── 완성본 ────────────────────────────────────────────── */
#doneView { padding: 20px 24px 40px; }
#doneView header h2 small { font-weight: 400; font-size: 14px;
  margin-left: 10px; color: var(--muted); }
.donegrid { display: grid; grid-template-columns: repeat(auto-fill, 150px);
  gap: 12px; margin-top: 12px; }
.done { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.done small { font-size: 13px; line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.done .dmeta { font-size: 12.5px; color: var(--muted); }
.done.on small { color: var(--accent); font-weight: 700; }

.dthumb { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 8px; overflow: hidden; background: #15171a; cursor: pointer; }
.dthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dthumb:hover img { opacity: .88; }
.done.on .dthumb { box-shadow: 0 0 0 3px var(--accent); }
.dpick {
  position: absolute; top: 4px; left: 4px; width: 20px; height: 20px;
  border-radius: 5px; background: rgba(0, 0, 0, .5); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.done.on .dpick { background: var(--accent); }
#doneVideo { width: 100%; max-width: 360px; border-radius: 10px; display: block; }
#doneDown { text-decoration: none; }

/* 받아둔 소재 줄의 내려받기 */
.frow span { display: flex; align-items: center; gap: 10px; }
.frow a { color: var(--accent); text-decoration: none; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.frow a:hover { border-color: var(--accent); background: var(--chip); }

/* 인기영상 분야를 갈래로 묶는다 */
.tabline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.tabline .glab { flex: 0 0 52px; font-size: 12px; color: var(--muted);
  padding-top: 8px; }
.tabrow.tight { margin: 0; flex: 1 1 auto; min-width: 0; }

/* 채널 분석 */
#tubeView { padding: 20px 24px 40px; }
#tubeView header h2 small { font-weight: 400; font-size: 14px;
  margin-left: 10px; color: var(--muted); }
#tubeView .stephead small { margin-left: auto; }
.done .cnum { min-width: 30px; font-size: 11.5px; }

/* ── 담기 단추와 바구니 띠 ────────────────────────────────── */
/* 썸네일 위에 얹는다. 카드 자체는 눌러서 유튜브로 가는 길이라
   그 길을 막지 않으려고 작게, 구석에 둔다. */
.tadd {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; line-height: 1;
  background: rgba(20, 20, 24, .62); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  cursor: pointer; user-select: none;
}
.tadd:hover { background: var(--accent, #2f6bff); }
.tadd.on {
  background: var(--accent, #2f6bff); border-color: transparent;
  box-shadow: 0 0 0 2px #fff;
}
.tcard .thumb { position: relative; }

.cartbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e3e3e6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  max-width: min(760px, calc(100vw - 40px));
}
/* display 를 줬으니 [hidden] 을 여기서 다시 세워야 한다 — 저자 규칙이
   UA 의 [hidden]{display:none} 을 이겨서 빈 띠가 그대로 남았다. */
.cartbar[hidden] { display: none; }
.cartbar b { font-size: 15px; white-space: nowrap; }
.cartbar .hint {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}

/* 못 고르는 단추는 못 고르게 보여야 한다 — 눌러 보고 알게 하면 안 된다 */
.tabrow button:disabled {
  opacity: .45; cursor: not-allowed;
  background: var(--panel, #fff); color: var(--dim, #5d6673);
}
.tabrow button:disabled:hover { border-color: var(--line, #e3e3e6); }

/* ── 완성본: 영상 왼쪽, 올릴 문구 오른쪽 ──────────────────── */
/* 세로 영상이라 오른쪽이 늘 비어 있었다. 그 자리에 올릴 문구를 둔다. */
/* 창 너비로 가르지 않는다 — 사이드바·여백을 뺀 남는 폭이 문제인데
   그건 창 너비로 알 수 없다. 자리가 부족하면 스스로 접히게 둔다. */
.playrow { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.playrow video { width: 340px; flex: 0 0 auto; border-radius: 10px; }
.capside { flex: 1 1 320px; min-width: 300px; }
.capside h4 { margin: 0; font-size: 15px; }

.capcard {
  border: 1px solid var(--line, #e3e3e6); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--panel, #fff);
}
.capcard .caphead {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.capcard .caphead b { font-size: 13px; }
.capcard .caphead .chip {
  font-size: 11.5px; padding: 1px 7px; border-radius: 10px;
  background: var(--soft, #f2f4f7); color: var(--dim, #5d6673);
}
.capcard .caphead .acts {
  margin-left: auto; display: flex; gap: 6px; flex-shrink: 0;
}
.capcard .caphead .acts button { white-space: nowrap; }
.capcard .capline { font-size: 14px; font-weight: 600; line-height: 1.45; }
.capcard .capdesc {
  font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  margin: 6px 0 0; color: var(--ink, #23232a);
}
.capcard .captags { font-size: 12.5px; color: var(--accent, #2f6bff); margin-top: 6px; }
.capcard button { font-size: 12px; padding: 3px 9px; }

@media (max-width: 760px) {
  .playrow video { width: 100%; max-width: 340px; }
}

/* ── '더' 칸을 덩어리로 ───────────────────────────────────── */
/* 서로 상관없는 네 가지가 한 덩어리에 있어서 무엇을 만지는지 몰랐다. */
.gsec {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px 14px; margin: 12px 0 0; background: var(--bg);
}
.gsec > h5 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700;
}
.gsec > h5 small {
  display: block; font-weight: 400; font-size: 13.5px;
  color: var(--muted); margin-top: 3px; line-height: 1.5;
}

/* 칸 이름을 placeholder 에만 두면 한 글자 적는 순간 사라진다.
   나중에 보면 `333333` 만 남고 그게 뭐였는지 알 수 없다. */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.grow { flex: 1; }
.field > input, .field > select { width: 100%; }
label.field {
  font-size: 13.5px; color: var(--muted); font-weight: 600;
}

/* ── 나올 화면 (오른쪽 기둥) ──────────────────────────────── */
/* 세로 9:16 을 기둥 폭에 맞춘다. 360px 기둥에서 여백을 빼면 320px 쯤이라
   한 화면에 들어오고, 붙여 두면 단계를 훑는 동안 계속 보인다. */
.prevcard { padding: 14px 16px 16px; }
.prevcard .stephead { margin-bottom: 10px; }
.prevcard .stephead h3 { margin: 0; font-size: 16px; }
.prevcard img {
  width: 100%; max-width: 320px; margin: 0 auto; display: block;
  border-radius: 10px; background: var(--soft, #f2f4f7);
  aspect-ratio: 9 / 16; object-fit: cover;
}
.prevcard .hint { margin-top: 9px; line-height: 1.5; }

@media (max-width: 1180px) {
  /* 한 줄로 접히면 기둥이 화면 폭만큼 넓어진다 — 그대로 두면 미리보기가
     터무니없이 커진다. */
  .prevcard img { max-width: 240px; }
}

/* ── 제목 띠 (템플릿 바로 아래) ───────────────────────────── */
/* 템플릿 타일과 한 덩어리로 읽히게 살짝 들여 놓고 왼쪽에 줄을 세운다. */
.bandrow {
  margin: 4px 0 10px 4px; padding: 10px 0 2px 14px;
  border-left: 3px solid var(--chip);
}
.bandrow > .hint:first-child { margin: 0 0 8px; }

/* ── 채널관리 ─────────────────────────────────────────────── */
.chanwrap {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px;
  gap: 18px; align-items: start; padding: 18px 20px 0;
}
.chanlist { min-width: 0; }
.chanrow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 9px; cursor: pointer; text-align: left;
  font-size: 15.5px; font-family: inherit; color: var(--ink);
}
.chanrow:hover { border-color: var(--accent); }
.chanrow.on { border-color: var(--accent); background: var(--chip); }
.chanrow .nm { font-weight: 700; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.chanrow .kd { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }

/* 자리 아홉 칸. 3×3 으로 두면 어디를 고르는지 한눈에 보인다 —
   목록에서 "왼쪽 위"를 읽고 머릿속에 그리게 하면 안 된다. */
.spots { display: grid; grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px); gap: 5px; }
.spots button {
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  cursor: pointer; padding: 0; font-size: 0;
}
.spots button::after {
  content: ""; display: block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--line); margin: auto;
}
.spots button:hover { border-color: var(--accent); }
.spots button.on { border-color: var(--accent); background: var(--chip); }
.spots button.on::after { background: var(--accent); }

@media (max-width: 1280px) {
  .chanwrap { grid-template-columns: minmax(0, 1fr); }
  .chanwrap .side { position: static; }
}

/* ── 입력칸 치수 ──────────────────────────────────────────── */
/* 글자를 17px 로 키우면서 칸은 그대로 뒀더니 글자가 꽉 끼었다. */
.field > input, .field > select {
  padding: 10px 12px; font-size: 15.5px; border-radius: 8px;
}

/* 채널은 0번 단계의 가장 큰 선택이다. 눌러야 할 자리로 보여야 한다. */
#shChannel {
  padding: 14px 16px; font-size: 18px; font-weight: 600;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); min-height: 52px;
}
#shChannel:hover { border-color: var(--accent); }
#stepChan .field { gap: 6px; }
#stepChan .field.grow { max-width: 420px; }
#stepChan > .row { align-items: flex-end; }

/* 완성본 번호. 한 번 붙으면 안 바뀌는 값이라 눈에 잘 띄어야 한다 —
   단톡방에서 "12번" 이라고 부를 수 있으려면 그림에서 바로 읽혀야 한다. */
.dno {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
  color: #fff; background: rgba(15, 23, 42, .78);
  padding: 3px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* 들어보기 소리막대. 줄 안에 들어가야 해서 높이를 눌러 둔다. */
#gemAudio { height: 34px; max-width: 260px; }

/* 아직 다듬는 중인 종류에 다는 표. 이름 옆에 작게 붙어야지, 이름만큼
   커지면 그게 이름인 줄 안다. */
.beta {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: #fde68a; color: #92400e; vertical-align: 1px;
}

/* 모아 둔 글 캡처. 순서가 곧 읽는 순서라 번호를 얹는다. */
.shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.shots:empty { margin: 0; }
.shot { position: relative; width: 86px; height: 116px; border-radius: 7px;
  overflow: hidden; background: #15171a; border: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot b { position: absolute; left: 4px; top: 4px; min-width: 17px;
  padding: 0 4px; border-radius: 5px; background: var(--accent); color: #fff;
  font-size: 11.5px; line-height: 17px; text-align: center; }
.shot i { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; font-style: normal;
  cursor: pointer; }
.shot i:hover { background: #dc2626; }

/* 지금 쓰는 작업 폴더. 읽기만 하는 칸이지만 길어서 한 줄을 다 쓴다. */
.pathrow { display: flex; gap: 8px; margin: 6px 0 4px; }
.pathrow input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--ink); font-family: ui-monospace, "Consolas", monospace; }

/* 이 대본이 어느 영상 것인지. 어긋나면 빨갛게 — 만들고 나서 알면 늦다. */
.forchip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 6px; padding: 6px 10px; border-radius: 7px;
  background: var(--bg); font-size: 13px; color: var(--muted); }
.forchip img { width: 28px; height: 40px; object-fit: cover;
  border-radius: 4px; display: block; }
.forchip b { font-weight: 600; color: var(--ink); }
.forchip.off { background: #fef2f2; }
.forchip.off b { color: #b91c1c; }

/* 대기열. 담은 차례가 곧 만드는 차례라 번호를 앞에 둔다.
   (.qrow 는 이미 딴 데서 쓰고 있어 .qline 으로 둔다) */
.queue { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.qline { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-size: 13.5px; }
.qline .qno { flex: 0 0 22px; height: 22px; border-radius: 6px; font-size: 12px;
  line-height: 22px; text-align: center; background: var(--chip);
  color: var(--accent); font-weight: 700; }
.qline img, .qline .qnopic { width: 30px; height: 42px; border-radius: 5px;
  object-fit: cover; display: block; background: #15171a; }
.qline .qname { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qline .qkind, .qline .qstate { color: var(--muted); font-size: 12.5px; }
.qline.run { border-color: var(--accent); background: var(--chip); }
.qline.run .qstate { color: var(--accent); font-weight: 700; }
.qline.done .qstate { color: var(--ok); font-weight: 700; }
.qline.fail { border-color: #fca5a5; background: #fef2f2; }
.qline.fail .qstate { color: #b91c1c; }

/* 대기열 줄을 펼쳐 대본을 고치는 칸. 줄 바로 아래에 붙는다. */
.qedit { margin: -2px 0 6px 32px; }
.qedit textarea { width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--panel);
  color: var(--ink); font-size: 14px; line-height: 1.5; resize: vertical; }
/* 그 줄의 제목 두 칸. 대본 위에 나란히 둔다 — 담은 뒤에 제목을 고칠 데가
   없어서 여기로 들여왔다(2026-09-26). */
.qedit .qtitle { display: flex; gap: 6px; margin: 0 0 6px; }
.qedit .qtitle input { flex: 1 1 0; min-width: 0; box-sizing: border-box;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 14px; }

/* 서브의 서브. 위 탭(쇼츠 완성본·자막 없앤 영상)보다 한 단계 아래로
   보여야 해서 작고 옅게, 왼쪽을 살짝 들여 둔다. */
.tabrow.sub2 { margin: 2px 0 10px; padding-left: 14px; gap: 5px; }
.tabrow.sub2 button {
  padding: 4px 11px; font-size: 12.5px; border-radius: 999px;
  color: var(--muted); background: var(--bg);
}
.tabrow.sub2 button:hover { border-color: #c3c9d2; color: var(--ink); }
.tabrow.sub2 button.on {
  background: var(--chip); color: var(--accent);
  border-color: var(--accent); font-weight: 700;
}
.tabrow.sub2:empty { display: none; }

/* 멈추기. 누르면 하던 일이 버려지는 단추라 눈에 띄어야 한다 —
   그렇다고 primary 처럼 크게 두면 자꾸 누른다. */
button.ghost.danger { color: #b91c1c; border-color: #fca5a5; }
button.ghost.danger:hover { background: #fef2f2; border-color: #dc2626;
  color: #991b1b; }

/* 남은 날 띠. 만료가 가까울 때만 뜬다 — 늘 뜨면 곧 안 보인다. */

/* 구독 남은 날. 늘 보이는 자리에 둔다 — 설정 안쪽에만 있으면 아무도 안 보고,
   안 켜지는 날 처음 알게 된다. 한 달 안쪽이면 색이 바뀌고, 그때는 위쪽 띠도
   같이 뜬다. 평소에는 조용한 회색으로 그냥 거기 있기만 한다. */
.licchip { margin: 16px 6px 0; padding: 8px 11px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.5; }
.licchip b { display: block; font-size: 13.5px; color: var(--ink); }
.licchip.warn { background: #fff7ed; border-color: #fcd9a8; color: #9a5b06; }
.licchip.warn b { color: #9a5b06; }
.licchip.bad { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.licchip.bad b { color: #991b1b; }

/* 새 판 띠. 남은 날 칩 바로 아래에 붙는다. */
.licchip.upd { margin-top: 8px; }
.licchip.upd.ok { border-color: #bde3c8; background: #e8f6ec; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: var(--accent, #2f6fed); text-decoration: underline; cursor: pointer;
}

.licbar { margin: 0 0 12px; padding: 9px 14px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  font-size: 13px; }
.licbar.bad { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.hint.warn { color: #92400e; }