/* 글꼴은 프로그램이 들고 다닌다. 컴퓨터마다 «맑은 고딕» 으로 달라 보이면
   파는 물건으로는 곤란하다. */
@font-face { font-family: Pretendard; font-weight: 400; font-display: swap;
  src: url('fonts/Pretendard-Regular.ttf') format('truetype'); }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap;
  src: url('fonts/Pretendard-SemiBold.ttf') format('truetype'); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap;
  src: url('fonts/Pretendard-Bold.ttf') format('truetype'); }

:root {
  --bg: #eceef3; --panel: #fff; --ink: #1c2033; --muted: #8b90a3;
  --dim: #8b90a3; --faint: #a9aebe;
  --line: #f0f1f5;          /* 안쪽을 가르는 옅은 줄 */
  --line2: #e6e8ef;         /* 테두리로 세우는 줄 */
  --accent: #4f56e8; --accent-ink: #fff; --chip: #eef0fe;
  --ok: #1f9d63; --ok-bg: #e7f7ef;
  --warn: #c68a1b; --warn-bg: #fdf2e0;
  --soft: #fafbfc;          /* 표 머리·요약 띠의 아주 옅은 바닥 */
  --track: #e9ebf2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  letter-spacing: -.2px; -webkit-font-smoothing: antialiased;
  font: 14.5px/1.6 Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }

/* 화면 전체를 종이 한 장처럼 띄운다. 가장자리가 닫혀 있으면 어디까지가
   프로그램인지가 눈에 잡혀서, 창을 키워도 글이 흩어지지 않는다. */
.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: 16.5px; 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: 13.5px; 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: 12px; color: var(--faint); margin: 18px 20px 0; }

.content { flex: 1; min-width: 0; padding: 26px 30px 44px; }
.view { display: none; } .view.active { display: block; }
header h2 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.7px; }
header p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; max-width: 760px; }
.todo { color: var(--muted); }

textarea, input[type=text] { width: 100%; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: 9px; 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: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; letter-spacing: -.2px; }
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { background: #c9ccdb; cursor: default; filter: none; }
.status { font-size: 12.5px; color: var(--muted); }
.status.ok { color: var(--ok); }

.card { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  padding: 16px 18px; margin: 14px 0; }
.card h3 { margin: 0 0 10px; font-size: 14.5px; letter-spacing: -.4px; }
.card h3 small { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 12px;
  letter-spacing: -.1px; }
.hidden { display: none; }
.badge { background: var(--chip); color: var(--accent); border-radius: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 600; letter-spacing: .3px; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; color: var(--faint); font-weight: 600; font-size: 10.5px;
  letter-spacing: .8px; background: var(--soft); white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 8px; }
td { border-bottom: 1px solid var(--line); padding: 11px 8px; vertical-align: top; }
tbody tr:hover { background: #fcfcfe; }
td:first-child { width: 36px; color: var(--muted); }
td.ko { width: 30%; }
td.en { color: #334155; font-family: ui-monospace, "Consolas", monospace; font-size: 12px; }

.keyrow { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  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: 14px; }
.keyrow .roles { color: var(--muted); font-size: 12px; }
.keyrow .set { color: var(--ok); font-size: 12px; font-weight: 600; }
.keyrow .unset { color: var(--muted); font-size: 12px; }
.keyrow .help { color: var(--muted); font-size: 12px; 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: 13px; }
.muted { color: var(--muted); font-size: 12px; }
button.ghost, a.ghost { background: var(--panel); border: 1px solid var(--line2);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  color: #4a5065; font-family: inherit; font-weight: 600; letter-spacing: -.2px; }
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: 11px 15px; background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; font-size: 12.5px; }
.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: 11px; }
td.mode { width: 116px; }
td.mode select { width: 100%; padding: 5px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; background: var(--panel); color: var(--ink); }
td.state { width: 66px; color: var(--muted); font-size: 12px; }

label.inline { font-size: 13px; 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: 13px; background: var(--panel); color: var(--ink); }

.genbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 14px; }
.bar { height: 6px; background: var(--track); border-radius: 4px; 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: 12px;
  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: 11px; 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: 14px; background: var(--panel); color: var(--ink); }
#voiceModel { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; 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: 12px;
  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: 13px; font-weight: 600; }
.snapfirst { font-size: 12px; 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: 13px; 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: 14px; }
#subPreset { flex: 1; min-width: 200px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; background: var(--panel); color: var(--ink); }

label.uplabel { display: block; margin-top: 5px; font-size: 11px; 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: 12px; 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: 11px; 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; }
.lb.hidden { display: none; }
.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 img.hidden, .lbfig video.hidden { display: none; }
.lbfig figcaption { margin-top: 14px; color: #e8eaed; }
.lbhead { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.lbhead span:first-child { font-weight: 700; color: #7aa7ff; flex: 0 0 auto; }
.lbprompt { margin-top: 8px; font-size: 12px; 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: 18px; }
.lbnav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }
.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: 11px; 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: 11px;
  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: 13px; }
#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.hidden { display: none; }
.playbar button { background: rgba(255,255,255,.12); color: #fff; border: 0;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 15px;
  line-height: 1; flex: 0 0 36px; padding: 0; }
.playbar button:hover { background: rgba(255,255,255,.24); }
.playbar .pbstop { background: transparent; font-size: 13px; margin-left: auto; }
.pbtext { flex: 1 1 auto; min-width: 0; padding: 0 4px; overflow: hidden; }
.pbno { font-size: 11px; color: #9aa0a6; white-space: nowrap; }
.pbline { font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

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

#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: 20px; font-weight: 700; color: var(--accent);
  text-align: center; }
.workmain { flex: 1; min-width: 0; }
.worktitle { font-size: 15px; font-weight: 600; }
.workmeta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.workact { flex: 0 0 auto; }
.workgone { color: #b45309; font-size: 12px; }

.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: 12px; 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: 14px; }
.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: 16px; }
.titlewhy { margin: 6px 0 4px; font-size: 13px; 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: 19px; line-height: 1.35; }
.savedline { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.savedline:last-child { border-bottom: 0; }
.savedline span:first-child { flex: 1; }
#titleOwn { font-family: inherit; font-size: 14px; }

/* ── 편 목록 · 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: 11px; }
.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: 13px; 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: 12px; 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: 13px; background: var(--panel); color: var(--ink); max-width: 14em; }
#newProjChannel { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; 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: 13px; background: var(--panel); color: var(--ink); }
.nowproj { display: inline-block; padding: 6px 12px; background: var(--chip);
  color: var(--accent); border-radius: 7px; font-size: 13px; 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: 11px; text-align: center; padding: 2px 0; }
.gno { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; 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: 12px; }
.sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sname { font-size: 13px; font-weight: 700; margin: 8px 10px 2px; }
.sdesc { font-size: 11.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: 13px; 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: 13px; 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: 11px; border: 0; }
.gko { padding: 6px 8px 8px; font-size: 11.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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; }
.chanhead .cnt { font-size: 12px; color: var(--dim); }
.chanhead .tool { margin-left: auto; font-size: 12.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: 13px; 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: 13px; }
#shBatchTable input, #shBatchTable textarea { width: 100%; font-family: inherit; font-size: 13px; }
#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: 13px; vertical-align: middle; }
#shLines input { width: 100%; font-family: inherit; font-size: 13px; }
#shLines button { margin-right: 4px; padding: 3px 8px; font-size: 12px; }
#shLines .mark { font-size: 11px; }

/* 재생바 볼륨. 귀에 맞추는 일이라 손이 자주 가니 늘 보이게 둔다. */
.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: 15px;
  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: 11.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: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.idea .ko { font-size: 15px; font-weight: 650; line-height: 1.35; }
.idea .why { font-size: 12.5px; color: var(--dim); line-height: 1.65; }
.idea .prompt { font-size: 11.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: 16px 0 6px; padding: 14px 20px 0; font-size: 10px; font-weight: 600;
  letter-spacing: .09em; color: var(--faint); text-transform: none;
  border-top: 1px solid var(--line); }
.navgroup:first-of-type { margin-top: 12px; }
.navgroup span { font-weight: 400; letter-spacing: 0; opacity: .7; margin-left: 6px; }

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

/* 밖의 도구로 나가는 줄. 앱 안에서 만드는 것과 섞이지 않게 위에 따로 둔다. */
.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: 12px; }
.btnlink { display: inline-block; text-decoration: none; }

/* 편 번호. 완성본 파일 이름 앞에 붙는 그 번호다. */
.projseq { display: inline-block; font-size: 11.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: 12.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--ink); }
.gapbadge { font-size: 11.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: 11.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: 12px; 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: 14.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: 11px; 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: 12.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: 12px; padding: 0 2px; }
.divstart { font-size: 12.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)); }
/* .fields 가 display:grid 라서 .hidden 의 display:none 을 눌러 버린다.
   계산 방식을 바꿔도 안 숨는 까닭이 이것이었다. */
.divform .fields.hidden { display: none; }
.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: 11.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: 12px; 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: 20px; line-height: 1.3; }
.divnums small { color: var(--muted); font-size: 11.5px; }
.divheads { margin: 8px 0 0 18px; color: var(--muted); font-size: 13px; 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: 11.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; }

/* 제목 후보는 열두 개가 넘게 나온다. 한 줄에 하나씩 쌓으면 화면을 끝없이
   내려야 하고, 오른쪽이 통째로 비어 허전하다. 두 칸으로 나눈다. */
#titleList { display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
#titleList .titlecard { margin: 0; }

/* 설명글 후보. 결이 다른 것 몇 벌을 나란히 놓고 고르게 한다. */
#descList { display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.desccard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.desccard .kind { font-size: 11.5px; font-weight: 700; color: var(--accent);
  margin-bottom: 4px; }
.desccard .why { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.desccard pre { white-space: pre-wrap; word-break: break-word; margin: 0 0 8px;
  font: inherit; font-size: 12.5px; line-height: 1.65; max-height: 260px;
  overflow: auto; background: var(--chip); border-radius: 8px; padding: 10px 12px; }

/* 목소리 견본. 스무 명을 나란히 놓고 눌러 들어봐야 고를 수 있다. */
.samplegrid { display: grid; gap: 8px; margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.samplecard { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.samplecard b { font-size: 13px; }
.samplecard audio { width: 100%; height: 32px; margin-top: 6px; }
.samplecard .err { font-size: 12px; color: #d9534f; }

/* 설정 갈래 나누기. 카드 일곱 개가 한 줄로 쌓여 있으면 뭘 어디서 고치는지 못 찾는다. */
.settabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.settab { background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 14px; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.settab:hover { color: var(--ink); background: var(--chip); }
.settab.on { background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600; }
.setpane > .card:first-child { margin-top: 0; }

/* 견본 카드 — 어느 집 성우인지 딱지로 보인다 */
.samplehead { display: flex; align-items: center; gap: 6px;
  justify-content: space-between; }
.house { font-size: 11px; padding: 1px 7px; border-radius: 999px;
  white-space: nowrap; font-weight: 600; letter-spacing: -.2px; }
.house.gemini { background: #e8f0fe; color: #1a56c4; }
.house.elevenlabs { background: #f1e9fb; color: #6b3fa0; }

/* 갈래 고르는 줄 — 성우 칸 맨 위 */
.houserow { align-items: center; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.houserow b { font-size: 13px; }

/* 대본 제작 — 값 넣는 칸을 격자로 편다 */
#makeView .fields { display: grid; gap: 12px 14px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
#makeView .fields label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; font-weight: 600; }
#makeView .fields label small { font-weight: 400; color: var(--dim); }
#makeView .fields input, #makeView .fields select { width: 100%; }
#makeView textarea { width: 100%; font-size: 13px; line-height: 1.6; }
#makeView #pmOut { font-family: Consolas, 'D2Coding', monospace; font-size: 12px; }
.spacer { flex: 1; }
button.primary.tiny { padding: 4px 11px; font-size: 11.5px; margin-top: 5px; }

.status.warn { color: #b45309; }

/* 후보 고르기 — 장면 하나가 한 줄, 후보 셋이 나란히 */
.pmshot { padding: 13px 0; border-bottom: 1px solid var(--line); }
.pmshot:last-child { border-bottom: 0; }
.pmshot .say { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pmshot .say i { font-style: normal; color: var(--faint); font-weight: 600;
  font-size: 11px; margin-right: 7px; }
.pmopts { display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pmopt { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px;
  cursor: pointer; background: var(--panel); }
.pmopt:hover { border-color: #c5c9e8; }
.pmopt.on { border-color: var(--accent); background: var(--chip); }
.pmopt .k { font-size: 10px; font-weight: 600; letter-spacing: .5px;
  color: var(--faint); margin-bottom: 5px; }
.pmopt.on .k { color: var(--accent); }
.pmopt .en { font-size: 11.5px; line-height: 1.55; color: #4a5065;
  font-family: ui-monospace, Consolas, monospace; }
.pmopt .mo { font-size: 11px; color: var(--faint); margin-top: 6px; }

/* 자막 견본 — 이름만 봐서는 어떤 자막인지 모른다. 실제 그림 위에 얹어 본다 */
.subgal { display: grid; gap: 10px; margin: 4px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.subtile { border: 2px solid var(--line2); border-radius: 11px; overflow: hidden;
  cursor: pointer; background: var(--panel); }
.subtile:hover { border-color: #c5c9e8; }

/* 고른 것은 한눈에 티가 나야 한다. 테두리만 바꾸면 열세 장 가운데서 안 보인다.
   테두리 · 둘레 · 이름칸 · 딱지 넷을 한꺼번에 바꾼다. */
.subtile.on { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--chip), 0 8px 22px rgba(79, 86, 232, .22); }
.subtile.on .subshot::after { content: '✓ 고른 것';
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 3.5px 9px; border-radius: 6px; letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.subtile.on .subshot::before { content: ''; position: absolute; inset: 0; z-index: 1;
  border: 2px solid var(--accent); }
.subshot { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(150deg, #2a3142, #4a5568 55%, #8d97ab); }
.subshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subline { position: absolute; left: 6%; right: 6%; text-align: center;
  line-height: 1.25; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.subline span { display: inline-block; }
.subname { font-size: 11.5px; padding: 8px 10px; color: #4a5065;
  border-top: 1px solid var(--line); line-height: 1.35; }
.subtile.on .subname { color: var(--accent); font-weight: 600;
  background: var(--chip); border-top-color: var(--accent); }

/* 도는 일 알림 띠 — 어느 화면에 있든 아래에 붙어 있다 */
.busybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line2);
  box-shadow: 0 -8px 28px rgba(20, 25, 60, .10);
  backdrop-filter: blur(6px); padding: 9px 22px; }
.busyrows { display: flex; flex-direction: column; gap: 7px;
  max-width: 1720px; margin: 0 auto; }
.busyrow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.busyrow .nm { font-weight: 600; white-space: nowrap; }
.busyrow .st { color: var(--muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busyrow .track { width: 190px; height: 6px; border-radius: 4px;
  background: var(--track); overflow: hidden; flex: none; }
.busyrow .fill { height: 100%; background: var(--accent); border-radius: 4px;
  transition: width .4s; }
.busyrow .n { font-variant-numeric: tabular-nums; color: #5b6078;
  font-weight: 600; white-space: nowrap; }
.busyrow .clock { font-variant-numeric: tabular-nums; color: var(--faint);
  white-space: nowrap; }
.busyrow .quiet { color: var(--warn); font-weight: 600; }
.busyrow .go { flex: none; }

/* 도는 중이라는 표 — 숨쉬듯 깜박인다. 멈춰 있으면 눈에 띈다 */
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  flex: none; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); } }

/* 띠가 가리지 않게 바닥을 띄운다 */
body.busy .content { padding-bottom: 120px; }

/* 왼쪽 메뉴에도 같은 표를 찍는다 — 어느 칸이 일하는지 */
.nav .work { position: absolute; right: 14px; top: 50%; margin-top: -4px; }

/* 매그네픽에서 돌아오는 길 — 주소를 붙이면 그 장면에 꽂힌다 */
.vpback { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.vpback input { flex: 1; min-width: 0; font-size: 11.5px; padding: 6px 9px; }
.vpcard.done { border-color: var(--ok); background: var(--ok-bg); }
.vpbulk { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--soft); }
.vpbulk textarea { margin-top: 8px; font-size: 11.5px; }
.workact a.ghost { display: inline-block; text-decoration: none; margin-top: 5px; }

/* 대표 종목 고르기 — 티커를 외우고 있을 까닭이 없다 */
.etfpick { border: 1px solid var(--line2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px; background: var(--soft); }
.etfrows { display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.etfrow { display: flex; align-items: baseline; gap: 7px; padding: 6px 9px;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--panel);
  cursor: pointer; font-size: 11.5px; }
.etfrow:hover { border-color: var(--accent); background: var(--chip); }
.etfrow.on { border-color: var(--accent); background: var(--chip); }
.etfrow b { font-size: 12.5px; letter-spacing: -.2px; }
.etfrow .y { margin-left: auto; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.etfrow .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.etfrow.cover .y { color: #c68a1b; }

/* 복수배당 — 종목 한 줄이 한 칸 */
.mixlegs { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mixleg { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--line2); border-radius: 11px; background: var(--panel); }
.mixleg.on { border-color: var(--accent); background: var(--chip); }
.mixleg .tk { width: 7.5em; font-weight: 600; }
.mixleg .w { width: 5em; }
.mixleg select { min-width: 9em; }
.mixleg .rate { width: 6.5em; }
.mixleg .lab { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mixleg .x { margin-left: auto; color: var(--faint); cursor: pointer;
  font-size: 15px; padding: 0 4px; }
.mixleg .x:hover { color: #d9534f; }

/* 남은 날 띠 — 한 달 안쪽일 때만 뜬다. 늘 띄우면 곧 안 보인다 */

/* 구독 남은 날. 늘 보이는 자리에 둔다 — 설정 안쪽에만 있으면 아무도 안 보고,
   안 켜지는 날 처음 알게 된다. 한 달 안쪽이면 색이 바뀌고, 그때는 위쪽 띠도
   같이 뜬다. 평소에는 조용한 회색으로 그냥 거기 있기만 한다. */
.licchip { margin: 16px 20px 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; }

.licbar { position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  padding: 9px 22px; text-align: center; font-size: 12.5px; font-weight: 600;
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid #f0dcb0; }
.licbar.bad { background: #fdecec; color: #c0392b; border-bottom-color: #f3c9c4; }
body.licwarn .app { margin-top: 52px; }

/* 내려받기 단추 — 자막 박힌 쪽이 먼저 눈에 들어와야 한다 */
.outlink { display: inline-flex; flex-direction: column; gap: 2px;
  margin: 6px 8px 0 0; padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--line2); background: var(--panel);
  color: #4a5065; text-decoration: none; font-size: 12.5px; }
.outlink:hover { border-color: var(--accent); color: var(--accent); }
.outlink.main { background: var(--accent); border-color: var(--accent); color: #fff; }
.outlink.main:hover { filter: brightness(1.08); color: #fff; }
.outlink b { font-weight: 600; }
.outlink span { font-size: 10.5px; opacity: .75; }

/* 배당 썸네일 — 줄 하나가 한 칸 */
.dthrows { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.dthrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); }
.dthrow input[type=text] { flex: 1; min-width: 0; }
.dthrow select { min-width: 7em; }
.dthrow input[type=number] { width: 5em; }
.dthrow .x { color: var(--faint); cursor: pointer; font-size: 15px; padding: 0 4px; }
.dthrow .x:hover { color: #d9534f; }
.dthout { margin-top: 12px; }
.dthout img { width: 100%; max-width: 640px; border-radius: 10px;
  border: 1px solid var(--line2); display: block; }
.dthout a { display: inline-block; margin-top: 8px; }

/* 여러 벌 뽑기 */
.picks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pick { font-size: 11.5px; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line2); background: var(--panel); color: #6a7086;
  cursor: pointer; user-select: none; }
.pick.on { background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 600; }
.dthgrid { display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dthcard { border: 1px solid var(--line2); border-radius: 11px; overflow: hidden;
  background: var(--panel); }
.dthcard img { width: 100%; display: block; }
.dthcard .foot { display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--line); font-size: 11.5px; }
.dthcard .foot b { font-weight: 600; }
.dthcard .foot a { margin-left: auto; text-decoration: none; color: var(--accent);
  font-weight: 600; }

/* 지금 주가가 어디쯤인가 */
.pricebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--panel);
  font-size: 12px; color: #6a7086; }
.pricebar.up { border-color: rgba(46,164,110,.45); }
.pricebar b { color: var(--text); font-weight: 600; }
.pricebar .sep { flex-basis: 100%; height: 0; }
.pricebar .tag { padding: 2px 8px; border-radius: 20px; font-size: 11px;
  background: var(--line); color: #6a7086; }
.pricebar .tag.on { background: rgba(46,164,110,.14); color: #2ea46e;
  font-weight: 600; }
.small { font-size: 11.5px; }

/* 사이드바 맨 아래 한 줄. `margin-top: auto` 로 바닥에 붙는다. */
.sidebar .note {
  margin-top: auto; padding: 14px 20px 6px;
  font-size: 11.5px; color: #8b91a3; line-height: 1.65;
}
.sidebar .note #verTag { opacity: .75; }

/* 새 판 띠 */
.licchip.upd { margin-top: 8px; }
.licchip.upd.ok { border-color: rgba(46,164,110,.45); }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; font-size: inherit;
  text-decoration: underline; font-family: inherit;
}

/* 지은 대본 */
.scriptcard { margin-top: 14px; }
.scriptbox {
  max-height: 460px; overflow-y: auto; padding: 4px 2px;
  border-top: 1px solid var(--line); margin-top: 10px;
}
.scriptbox p { margin: 0; }
/* 낭독 줄. 실제로 읽을 것이라 읽기 좋은 크기로 둔다. */
.sc-ko {
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  padding: 7px 4px 7px 12px; border-left: 2px solid var(--line2);
}
/* 곁들이 줄. 있는 건 보이되 눈길을 뺏지 않게. */
.sc-side {
  font-size: 11.5px; line-height: 1.6; color: #9aa0b0;
  padding: 2px 4px 2px 12px;
}
.sc-side span {
  display: inline-block; min-width: 38px; margin-right: 6px;
  font-size: 10px; font-weight: 600; color: #b3b8c6;
}
.sc-info span { color: var(--accent); }
.scriptbox.koonly .sc-side { display: none; }
.scriptbox.koonly .sc-ko { border-left-color: transparent; padding-left: 4px; }
button.small { font-size: 11.5px; padding: 5px 11px; }

/* 대본 보관함의 채널 칸 */
.draftchan {
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--line2); background: var(--panel); color: #6a7086;
  max-width: 160px;
}

/* 아래 띠 — 몇 단계 중 어디인가 */
.busyrow .phase {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(99,102,241,.14); color: var(--accent);
}

/* 이미지 화면 — 지금 걸린 공통 화풍 */
.stylebar {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 9px 13px;
  border: 1px solid var(--line2); border-radius: 11px; background: var(--panel);
  font-size: 12.5px; color: #6a7086;
}
.stylebar img {
  width: 56px; height: 32px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line);
}
.stylebar b { color: var(--text); font-weight: 600; }
.stylebar .desc { color: #8b91a3; font-size: 11.5px; }
.stylebar .go { margin-left: auto; }

/* 「신규 생성하기」 — 돈이 나가는 스위치라 작게 두면 안 된다.
   옆의 회색 단추들 사이에 파묻히면 켠 줄도 끈 줄도 모르고 누른다. */
#gridForceWrap {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--line2); background: var(--panel);
}
#gridForceWrap input { width: 15px; height: 15px; }
#gridForceWrap:has(input:checked) {
  border-color: var(--accent); color: var(--accent);
  background: rgba(99,102,241,.08);
}

/* 쓰는 법 — 접어 두고, 궁금할 때만 편다. 늘 펼쳐 두면 매번 지나쳐야 한다. */
.howto {
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--line2); border-radius: 11px; background: var(--panel);
}
.howto summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #6a7086;
  list-style: none; user-select: none;
}
.howto summary::before { content: "❔ "; }
.howto summary::-webkit-details-marker { display: none; }
.howto[open] summary { margin-bottom: 8px; color: var(--text); }
.howto ul { margin: 0; padding-left: 18px; }
.howto li {
  font-size: 12.5px; line-height: 1.75; color: #6a7086; margin: 5px 0;
}
.howto li b { color: var(--text); font-weight: 600; }
.howto .mono {
  font-family: Consolas, monospace; font-size: 11.5px;
  background: var(--line); padding: 1px 5px; border-radius: 4px;
}

/* 국내 ETF 는 이름이 길다. 티커 자리에 이름이 들어가니 크기를 낮춘다. */
.etfrow b.krname {
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  white-space: normal; word-break: keep-all;
}

/* ── 유튜브 조사 ──────────────────────────────────────────────
   이 화면의 색은 `--ink`·`--muted` 를 쓴다. 처음에 `--text` 라고 썼는데
   이 판에는 없는 이름이라, 제목이 «파란 밑줄 링크» 로 되돌아갔다. */

.ytgrid { display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.ytcard { display: flex; gap: 12px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--panel);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.ytcard:hover { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(28, 32, 51, .08); }
.ytcard * { text-decoration: none; }

/* 배수를 그림 위에 얹는다. 줄글에 섞여 있으면 이 화면에서 제일 중요한
   숫자가 «조회 3만 · 채널 · 구독 412» 사이에 묻힌다. */
.ytcard .th { position: relative; flex: 0 0 auto; }
.ytcard img { display: block; width: 136px; height: 77px; object-fit: cover;
  border-radius: 8px; background: #e9ecf2; }
.ytcard .x { position: absolute; left: 5px; bottom: 5px;
  padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: -.2px; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ytcard .x.flat { background: rgba(28, 32, 51, .72); }

.ytcard .bd { min-width: 0; display: flex; flex-direction: column; }
.ytcard .t { font-size: 13px; font-weight: 600; color: var(--ink);
  line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.ytcard:hover .t { color: var(--accent); }
.ytcard .m { font-size: 11.5px; color: var(--muted); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytcard .m b { font-weight: 600; color: #6a7086; }

/* 채널 요약 */
.ytsum { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.ytsum span { font-size: 12px; color: var(--muted); }
.ytsum b { display: block; font-size: 18px; color: var(--ink); font-weight: 700;
  line-height: 1.5; }

/* ── 캔 검색어 · 갈래 ─────────────────────────────────────────
   둘 다 «눌러서 고르는 말» 이라 생김새를 같게 둔다. */
.ytchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#ytWords { max-height: 240px; overflow-y: auto; padding: 2px; }
.ytchip { font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--panel);
  color: var(--ink); cursor: pointer; line-height: 1.5;
  transition: border-color .12s, background .12s, color .12s; }
.ytchip:hover { border-color: var(--accent); color: var(--accent); }
.ytchip.on { background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600; }

.ytline { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; }
.ytline .lab { flex: 0 0 44px; font-size: 12px; color: var(--muted);
  padding-top: 6px; text-align: right; }
.ytline .ytchips { margin-top: 0; }

/* 단추가 «▶캐 / 기» 로 쪼개져 보였다 */
#tubeView .row button { white-space: nowrap; flex: 0 0 auto; }
#tubeView .row button small { font-size: 11px; opacity: .7; margin-left: 4px; }

/* 진행 글. 줄바꿈을 살린다 — 안 살리면 한 줄로 이어 붙어 읽을 수 없다. */
#ytLog { white-space: pre-wrap; line-height: 1.7; }

/* ── 최근 이슈 ───────────────────────────────────────────── */
.isscard { padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--panel); }
.isscard.thin { border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 9px 2px; margin: 0; }
.isshead { display: flex; align-items: flex-start; gap: 10px; }
/* 몇 군데가 썼나 — 뉴스에는 조회수가 없어서 이것이 그 자리를 대신한다 */
.issn { flex: 0 0 auto; min-width: 42px; text-align: center; padding: 3px 8px;
  border-radius: 7px; font-size: 12px; font-weight: 700;
  background: var(--chip); color: var(--accent); }
.isscard.thin .issn { background: none; color: var(--muted); font-weight: 600; }
.isst { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.isscard.thin .isst { font-size: 12.5px; font-weight: 500; }
.issm { font-size: 11.5px; color: var(--muted); margin: 6px 0 0 52px; }
.isscard.thin .issm { display: none; }
.issact { margin: 8px 0 0 52px; display: flex; gap: 6px; }
.isscard.thin .issact { display: none; }
.issarts { margin: 6px 0 0 52px; }
.issarts summary { font-size: 11.5px; color: var(--muted); cursor: pointer; }
.isscard.thin .issarts { display: none; }
.issart { display: block; font-size: 12px; color: #5a6076; padding: 4px 0;
  text-decoration: none; line-height: 1.5; }
.issart:hover { color: var(--accent); }

#issueView .row button { white-space: nowrap; flex: 0 0 auto; }

/* ── 대본 제작 ───────────────────────────────────────────── */
.wrtitles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wrchunk { display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.wrchunk .issn { min-width: 76px; font-size: 11px; }
.wrchunk .issm { margin: 4px 0 0 0; white-space: normal; }
#wrText { font-size: 13.5px; line-height: 1.85; }
#writeView .row button { white-space: nowrap; flex: 0 0 auto; }

/* 이슈를 두 칸으로. 한 줄에 하나씩 세우면 스무 덩어리가 화면 넉 장이 된다 —
   고르려면 죽 훑어야 하는데 그러자면 한눈에 여러 개가 보여야 한다.
   좁은 화면에서는 저절로 한 칸이 된다. */
#issOut { display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
#issOut .isscard { margin-bottom: 0; }
/* 한 군데만 쓴 기사 묶음은 접힌 목록이라 칸을 다 차지한다 */
#issOut > details { grid-column: 1 / -1; }

/* 대본 짓는 진행 글도 줄바꿈을 살린다. 안 살리면 «1/2 꼭지 1/2 … 1,261자
   2/2 …» 처럼 한 줄로 뭉쳐서 어디까지 왔는지가 안 읽힌다. */
#wrLog { white-space: pre-wrap; line-height: 1.7; }

/* 후보 셋 보기 */
.vareg { display: grid; gap: 10px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vareg > div { padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: 10px; background: var(--panel); }
.vareg b { font-size: 12.5px; color: var(--ink); }
.vareg span { display: block; font-size: 11.5px; color: var(--muted);
  margin: 5px 0 7px; line-height: 1.6; }


/* 후보 셋 보기 — 영어 프롬프트를 글로 보여주다 **그림으로** 바꿨다.
   셋의 차이는 말로 설명하는 것보다 나란히 놓고 보는 쪽이 한눈에 들어온다. */
.vareg figure { margin: 0; }
.vareg img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; display: block; background: #e9ecf2; }
.vareg figcaption { font-size: 11.5px; color: var(--muted);
  line-height: 1.6; margin-top: 7px; }
.vareg figcaption b { color: var(--ink); }
.vareg figcaption b:first-child { display: block; font-size: 12.5px;
  margin-bottom: 3px; }

/* 주제 쓰는 법 — 칸 바로 밑에 접어 둔다 */
details.tiny { margin-top: 6px; }
details.tiny > summary { font-size: 11.5px; color: var(--accent);
  cursor: pointer; }
details.tiny p { font-size: 11.5px; color: var(--muted); line-height: 1.7;
  margin: 8px 0 0; }
.topictb { width: 100%; border-collapse: collapse; margin-top: 8px; }
.topictb th, .topictb td { text-align: left; vertical-align: top;
  padding: 7px 9px; font-size: 11.5px; line-height: 1.6;
  border-top: 1px solid var(--line); font-weight: 400; }
.topictb th { color: var(--ink); font-weight: 600; width: 38%;
  word-break: keep-all; }
.topictb td { color: var(--muted); }

.exline { border-left: 2px solid var(--line2); padding-left: 10px; }


/* ── 사용방법 ────────────────────────────────────────────────
   쇼츠와 같은 모양으로. 롱폼엔 `.tabrow` 와 표 규칙이 없어서
   **이 화면 안에서만** 돌게 가둬 둔다 — 다른 화면 표까지 바뀌면
   어디가 왜 바뀌었는지 찾기 어렵다. */
#helpView .tabrow { display: flex; gap: 6px; margin: 10px 0 14px; flex-wrap: wrap; }
#helpView .tabrow button {
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #e3e3e6); background: var(--panel, #fff);
  font-size: 14px;
}
#helpView .tabrow button.on {
  background: var(--accent, #2f6bff); color: #fff; border-color: transparent;
}
#helpView h4 { margin: 22px 0 8px; font-size: 15.5px; }
#helpView h4:first-child { margin-top: 4px; }
#helpView table.mini { width: 100%; border-collapse: collapse; margin: 10px 0 4px; }
#helpView table.mini th, #helpView table.mini td {
  padding: 9px 10px; border-bottom: 1px solid var(--line, #e9e9ec);
  text-align: left; vertical-align: top; font-size: 13.5px; line-height: 1.65;
}
#helpView table.mini th { background: var(--soft, #f7f8fa); font-weight: 700; }
/* 첫 칸이 좁아 「일레븐랩 / 스」 처럼 쪼개졌다. 이름은 한 줄로 둔다. */
#helpView table.mini tr > *:first-child { width: 17%; min-width: 132px; }
#helpView table.mini tr > *:nth-child(3) { width: 12%; min-width: 92px; }
#helpView table.mini tr > *:last-child { width: 20%; min-width: 130px; }
#helpView table.mini small { display: block; color: var(--dim, #6b7280); font-size: 12.5px; }
#helpView ol.hint, #helpView ul.hint { padding-left: 20px; }
#helpView ol.hint li, #helpView ul.hint li { margin-bottom: 6px; }

/* 조사 화면 안에서 바로 보기 */
.ytbox { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 10px; overflow: hidden; }
.ytbox iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; }
/* 목차 — 누르면 그 대목부터 다시 튼다 */
.ytchap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ytchap button { font-size: 11.5px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line2); background: var(--panel); color: var(--ink);
  cursor: pointer; }
.ytchap button:hover { border-color: var(--accent); color: var(--accent); }
.ytchap button i { font-style: normal; color: var(--muted); margin-right: 5px; }
.ytchap button:hover i { color: var(--accent); }
.ytdesc { white-space: pre-wrap; font-size: 11.5px; line-height: 1.75;
  color: #5a6076; margin: 8px 0 0; max-height: 260px; overflow-y: auto;
  font-family: inherit; }
.ytcard { cursor: pointer; }

/* 빠뜨린 것을 알리는 띠. 눈에 띄어야 하지만 무섭지는 않게. */
.warnbar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-color: #f0c98a;
  background: linear-gradient(0deg, rgba(240,180,80,.07), rgba(240,180,80,.07)); }
.warnbar b { color: #9a6a12; font-size: 13.5px; }
.warnbar p { margin: 5px 0 0; max-width: 60ch; }

/* 쓸 성우를 정하는 줄. 견본 판에 묻히지 않게 테를 두른다. */
.pickrow { border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; background: var(--chip); margin-top: 10px; }
.pickrow > b { flex: 0 0 auto; color: var(--accent); }

/* 접어 두는 칸. 여는 삼각형이 제목과 한 줄에 서게 한다. */
.foldcard > summary { cursor: pointer; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; list-style: revert; }
.foldcard > summary b { font-size: 14px; color: var(--ink); }
.foldcard > summary > .muted { margin-left: auto; }
.foldcard[open] > summary { margin-bottom: 10px; }