/* 스토리보드 제작기 v0.4 — 스크립트 | AI 제안 | 페이지(보드) 세 칸
   담다 토큰(tokens.css) + 담다 데스크탑 체험판의 표면(레일 · 머리줄 · 매끈한 카드 · 유리 팝오버)을 따른다 */
@font-face { font-family:'Pretendard'; src:url(/static/fonts/Pretendard.woff2) format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  --side:#F8FAFF; --hover:#EEF2FC; --sel:#E3EAFD;
  --acc:#2E2A8B; --acc-h:#3B39A9; --acc-ink:#3B39A9; --acc-soft:#EAF0FE; --on-acc:#FFFFFF;
  --rail:linear-gradient(180deg,#2A2782 0%,#2E2A8B 55%,#221F6A 100%);
  --rail-ink:rgba(255,255,255,.72); --rail-hi:rgba(255,255,255,.14);
  --grad-card:linear-gradient(180deg,#FFFFFF 0%,#F8FAFF 100%);
  --grad-main:linear-gradient(180deg,#FFFFFF 0%,#FBFCFF 55%,#F6F8FE 100%);
  --grad-side:linear-gradient(180deg,#FAFBFF 0%,#F3F6FD 100%);
  --grad-pop:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(245,248,255,.95) 100%);
  --grad-head:linear-gradient(180deg,#FCFDFF 0%,#F4F7FE 100%);
  --grad-sel:linear-gradient(90deg,#E6EDFE 0%,#EEF2FE 100%);
  --grad-pri:linear-gradient(180deg,#3E3AA8 0%,#2E2A8B 100%);
  --grad-pri-h:linear-gradient(180deg,#4845B8 0%,#35319A 100%);
  --pop-line:rgba(46,42,139,.10);
  --sh-pop:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -18px rgba(35,40,110,.32),0 3px 10px -4px rgba(35,40,110,.12);
  --sh-dlg:inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -30px rgba(24,28,86,.45),0 8px 24px -12px rgba(24,28,86,.18);
  --sh-4:0 28px 64px -26px rgba(24,28,86,.52);
  --scrim:rgba(20,18,56,.30);
  --red:#D93A2B;
  --rail-w:72px; --top-h:52px;
}
[hidden] { display:none !important; }   /* display 를 지정한 요소도 hidden 이면 반드시 숨김 (투명 막이 클릭을 가로채는 사고 방지) */
html, body { overflow:hidden; }
body { font-size:13.5px; letter-spacing:-.005em; word-break:keep-all; }
b, strong, h1, h2, h3, h4, h5 { font-weight:600; }
* { scrollbar-width:thin; scrollbar-color:var(--line-s) transparent; }
::selection { background:var(--b200); }
:focus-visible { outline:2px solid var(--b500); outline-offset:2px; }
.grow { flex:1; }
.spacer { flex:1; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.row.end { justify-content:flex-end; }
.row.between { justify-content:space-between; }
.help { font-size:11.5px; color:var(--muted); line-height:1.5; }
svg.i { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
svg.i.s { width:14px; height:14px; }
.kbd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; padding:0 5px; border-radius:5px; border:1px solid var(--line-s); color:var(--muted); background:var(--card); white-space:nowrap; }

/* 단추 (담다 데스크탑 체험판) */
.btn { height:34px; padding:0 14px; border-radius:9px; font-size:12.5px; font-weight:500; background:var(--grad-card); color:var(--ink2); border:1px solid var(--line-s);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; box-shadow:none; transition:background .15s,border-color .15s,color .15s; text-decoration:none; }
.btn:hover:not(:disabled) { border-color:var(--b400); color:var(--acc-ink); background:var(--grad-card); }
.btn.primary, .btn.pri { background:var(--grad-pri); color:#fff; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -4px rgba(46,42,139,.45); }
.btn.primary:hover:not(:disabled), .btn.pri:hover:not(:disabled), .btn.primary:focus-visible { background:var(--grad-pri-h); color:#fff; border-color:transparent; }
.btn.ghost { border-color:transparent; background:transparent; }
.btn.ghost:hover:not(:disabled) { background:var(--hover); border-color:transparent; }
.btn.danger { color:var(--stop); }
.btn.danger:hover:not(:disabled) { background:var(--stop-s); border-color:var(--stop); color:var(--stop); }
.btn.sm { height:28px; padding:0 10px; font-size:12px; border-radius:7px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.inp, .ta, .sel { border:1px solid var(--line-s); border-radius:9px; background:var(--card); }
.inp:focus, .ta:focus, .sel:focus { border-color:var(--b500); box-shadow:var(--ring); }
.badge { font-weight:600; border-radius:99px; }
.seg { display:inline-flex; padding:3px; border-radius:10px; background:var(--hover); gap:2px; }
.seg button { border:0; background:transparent; height:28px; padding:0 10px; border-radius:8px; font-size:12px; font-weight:500; color:var(--ink2); white-space:nowrap; }
.seg button.on { background:var(--grad-card); color:var(--acc-ink); box-shadow:0 1px 2px rgba(28,32,84,.08),0 0 0 1px var(--pop-line); }

/* ───────── 틀: 레일 | (머리줄 + 본문) */
.app { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); height:100vh; }
.rail { background:var(--rail); display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0 22px; z-index:20; }
.ws { width:40px; height:40px; border-radius:12px; background:#fff; color:#2E2A8B; font-weight:700; font-size:14px; display:grid; place-items:center; margin-bottom:10px;
  letter-spacing:-.04em; box-shadow:0 0 0 2px rgba(255,255,255,.25); border:0; }
.rb { width:62px; padding:6px 0 5px; border-radius:12px; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--rail-ink); font-size:11px; font-weight:500; position:relative; }
.rb .ib { width:36px; height:32px; border-radius:10px; display:grid; place-items:center; transition:background .15s; }
.rb svg.i { width:20px; height:20px; }
.rb:hover { color:#fff; } .rb:hover .ib { background:var(--rail-hi); }
.rb.on { color:#fff; } .rb.on .ib { background:rgba(255,255,255,.22); } .rb.on svg.i { stroke-width:2.2; }
.rb:disabled { opacity:.35; cursor:default; } .rb:disabled .ib { background:none; }
.rb .cnt { position:absolute; top:1px; right:8px; min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:600; line-height:17px; box-shadow:0 0 0 2px #2A2782; }
.rail .sp { flex:1; }
.mainwrap { display:grid; grid-template-rows:var(--top-h) minmax(0,1fr); min-width:0; min-height:0; background:var(--grad-main); }
.m-hd { display:flex; align-items:center; gap:10px; padding:0 14px 0 18px; border-bottom:1px solid var(--line); background:var(--grad-head); z-index:10; min-width:0; }
.titlebtn { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 8px; margin-left:-8px; border-radius:8px; border:0; background:none; color:var(--ink); }
.titlebtn:hover { background:var(--hover); }
.titlebtn .t { font-size:15.5px; font-weight:600; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.titlebtn .caret { color:var(--muted); flex:none; }
.m-hd .sub { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.saved { font-size:11.5px; color:var(--muted); white-space:nowrap; cursor:pointer; }
.saved.bad { color:var(--stop); font-weight:600; }
.jobtray { display:flex; gap:6px; align-items:center; min-width:0; }
.jobchip { display:flex; align-items:center; gap:7px; height:28px; background:var(--acc-soft); border:1px solid var(--b200); color:var(--acc-ink); border-radius:14px; padding:0 8px 0 10px; font-size:12px; font-weight:500; white-space:nowrap; }
.jobchip .jb { width:54px; height:5px; border-radius:9px; background:var(--b200); overflow:hidden; }
.jobchip .jb i { display:block; height:100%; background:var(--acc); transition:width .3s; }
.jobchip button { background:none; border:0; color:var(--acc-ink); opacity:.7; padding:0; display:grid; place-items:center; }
.spin { display:inline-block; width:11px; height:11px; border-radius:50%; border:2px solid var(--b200); border-top-color:var(--acc); animation:spin .8s linear infinite; flex:none; }
.btn.pri .spin, .btn.primary .spin { border-color:rgba(255,255,255,.35); border-top-color:#fff; }
.spin.dark { border-color:var(--b200); border-top-color:var(--b600); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ───────── 세 칸 */
/* 플레이어(왼쪽) 칸을 더 넓게 — 대표 2026-09-18 */
/* 0.11.5 — 왼쪽 스크립트 · 오른쪽 플레이어 · 아래 클립 칸은 가로 전체 */
.editor { --wL:40%; display:grid; grid-template-columns:var(--wL) 6px minmax(0,1fr); grid-template-rows:minmax(0,1fr) var(--cpH,320px); min-height:0; }
.editor > .clippane { grid-column:1 / -1; grid-row:2; }
.editor.fold-colAi { grid-template-rows:minmax(0,1fr) 42px; }
.editor.fold-colScript { grid-template-columns:0 0 minmax(0,1fr); }
.editor.fold-colScript #colScript, .editor.fold-colScript .gutter { visibility:hidden; border:0; }
.editor.bare { grid-template-columns:minmax(560px,58%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.editor.bare #colScript { display:none; }  /* 처음 세팅 — 빈 스크립트 칸 대신 새 스토리보드 칸을 왼쪽에, 오른쪽은 비움(대표 2026-09-22) */
.editor.bare .clippane { display:none; }
.editor.bare .col-board, .editor.bare .gutter { display:none; }
.editor.bare .setuppane { grid-column:1; grid-row:1; border-right:1px solid var(--line); background:var(--card); }
.col { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--grad-side); border-right:1px solid var(--line); position:relative; overflow:hidden; }
.col-board { background:var(--bg); border-right:0; }
.col-ai { background:var(--card); }
.colhead { display:flex; align-items:center; gap:8px; height:44px; padding:0 10px 0 16px; border-bottom:1px solid var(--line-hi); flex:none; }
.colhead b { font-size:14.5px; font-weight:600; letter-spacing:-.03em; }
.colbody { flex:1; overflow:auto; min-height:0; }
.ibtn { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; border:0; background:none; color:var(--ink2); flex:none; }
.ibtn:hover:not(:disabled) { background:var(--hover); color:var(--ink); }
.ibtn:disabled { opacity:.3; }
.setuppane { grid-column:3; overflow:auto; padding:10px 24px 40px; }

/* ───────── 스크립트 칸 */
.sc-sec { display:flex; align-items:center; gap:8px; padding:8px 10px; margin:14px 10px 2px; border-radius:10px; background:var(--grad-card); border:1px solid var(--line); box-shadow:var(--sh1); cursor:pointer; }
.sc-sec:first-child { margin-top:8px; }
.sc-sec .no { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--grad-brand); color:#fff; font-weight:600; font-size:11.5px; flex:none; }
.sc-sec input { flex:1; min-width:0; border:0; background:transparent; font-weight:600; font-size:13.5px; color:var(--ink); outline:none; padding:1px 0; border-bottom:1px dashed transparent; }
.sc-sec input:focus { border-bottom-color:var(--b400); }
.sc-sec.on { box-shadow:var(--ring); border-color:var(--b400); }
.sc-sub { display:flex; align-items:center; gap:6px; margin:12px 14px 2px 22px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.sc-sub::after { content:""; flex:1; height:1px; background:var(--line); }
.sc-clip { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px; padding:7px 10px 8px 6px; margin:1px 8px; border-radius:9px; border:1px solid transparent; cursor:pointer; }
.sc-clip:hover { background:var(--hover); }
.sc-clip.on { background:var(--grad-sel); }
.sc-clip.on::before { content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--b600); }
.sc-clip.playing .sc-no b { background:var(--stop); color:#fff; }
.sc-no { display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:3px; }
.sc-no b { display:grid; place-items:center; min-width:24px; height:20px; padding:0 4px; border-radius:6px; background:var(--card); border:1px solid var(--line); color:var(--ink2); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.sc-clip.on .sc-no b { background:var(--acc); border-color:var(--acc); color:#fff; }
.sc-no span { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
/* 내레이션 — 글자는 뒤쪽 층(.nhl)이 그리고, 입력칸은 투명(커서·선택만) → #표시를 색으로 */
.nwrap { position:relative; margin:0 -4px; border-radius:6px; }
.nwrap:focus-within { background:var(--card); box-shadow:inset 0 0 0 1px var(--b300); }
.narr, .nhl { font-family:var(--font); font-size:13px; line-height:1.65; letter-spacing:-.005em; padding:2px 4px; white-space:pre-wrap; overflow-wrap:break-word; word-break:keep-all; }
.nhl { position:absolute; inset:0; color:var(--ink); pointer-events:none; overflow:hidden; }
.narr { position:relative; width:100%; border:0; background:transparent; resize:none; margin:0; border-radius:6px; color:transparent; caret-color:var(--ink);
  outline:none; overflow:hidden; min-height:24px; display:block; }
.narr::placeholder { color:var(--muted); }
.narr::selection { background:rgba(95,118,222,.28); color:transparent; }
/* #표시 손잡이 — 뒤쪽 층이 그린 표시 위에 겹쳐 놓는다(끌어서 자리 옮기기) */
.nmk { position:absolute; inset:0; pointer-events:none; z-index:2; }   /* 글칸 위에 — 안 그러면 손잡이를 잡을 수 없다(기준 v0.11.0 결함) */
.nmk .mk { position:absolute; pointer-events:auto; cursor:grab; border-radius:4px; }
.nmk .mk:hover { box-shadow:0 0 0 2px #E07A1F; }
.nmk .mk.grab { cursor:grabbing; background:#FDE3E0; box-shadow:0 0 0 2px #D1281D; z-index:3; }
.nmk.on { pointer-events:auto; }
.nmk-bar { position:absolute; width:2px; background:#D1281D; border-radius:1px; animation:mkbar .7s ease-in-out infinite; }
@keyframes mkbar { 50% { opacity:.35; } }
mark.cue { background:#FDE3E0; color:#D1281D; border-radius:4px; box-shadow:0 0 0 1px #F6B8B1; font-weight:inherit; }
mark.cue.bad { background:var(--line-hi); color:var(--muted); box-shadow:0 0 0 1px var(--line-s); text-decoration:line-through; }
.chip .cn { font-size:11px; font-weight:700; color:#D1281D; padding:0 4px; border-radius:6px; border:1px dashed #F0A59D; }
.chip .cn.on { background:#FDE3E0; border:1px solid #F6B8B1; }
.chip .cn.part { border-style:solid; }
.chip.cuebtn { padding:0 9px; color:var(--acc-ink); border-color:var(--b200); background:var(--acc-soft); }
.chip.cuebtn b { color:#D1281D; margin-right:1px; }
.chip.cuebtn.warn { color:#B4381F; background:#FDECE8; border-color:#F6C1B6; }
.cuelist { display:grid; gap:2px; min-width:300px; max-width:420px; }
.cueitem { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none; border-radius:9px; padding:6px 8px; }
.cueitem.act, .cueitem:hover { background:var(--acc-soft); }
.cueitem .cn { font-size:12px; font-weight:700; color:#D1281D; padding:0 5px; border-radius:6px; border:1px dashed #F0A59D; flex:none; }
.cueitem .cn.on { background:#FDE3E0; border-style:solid; }
.cueitem .ct { font-size:11.5px; font-weight:600; color:var(--ink2); flex:none; }
.cueitem .cx { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.cueitem em { font-style:normal; font-size:10.5px; color:var(--muted); flex:none; }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; height:24px; padding:0 9px 0 3px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:11.5px; font-weight:500; color:var(--ink2); }
.chip .sw { width:30px; height:17px; border-radius:9px; overflow:hidden; flex:none; }
.chip .sw .pv { border-radius:0; }
.chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.chip em { font-style:normal; font-weight:500; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.chip:hover { border-color:var(--b300); color:var(--acc-ink); }
.chip.cam { padding:0 9px 0 3px; }
.chip.shapes { color:var(--muted); border-style:dashed; padding:0 9px; }
.ckey { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; color:#fff; font-size:10.5px; font-weight:700; flex:none; }
.sc-end { padding:10px 12px 30px; }
.addline { display:inline-flex; align-items:center; gap:4px; border:1px dashed var(--line-s); background:none; color:var(--muted); border-radius:6px; padding:3px 9px; font-size:11.5px; font-weight:700; }
.addline:hover { border-color:var(--b400); color:var(--b700); background:var(--b50); }
.sc-empty { padding:18px 14px; color:var(--muted); font-size:12.5px; line-height:1.6; }

/* ───────── AI 제안 칸 */
.ai-in, #aiCur { display:grid; gap:14px; align-content:start; grid-template-columns:minmax(0,1fr); min-width:0; }
.ai-in { padding:12px 14px 30px; }
.ai-sec, .sug { min-width:0; }
.vbox { border-radius:12px; box-shadow:var(--sh2); overflow:hidden; background:#15142B; position:relative; }
.vbox video { display:block; width:100%; aspect-ratio:16/9; background:#0B0B18; }
.vbox .novid { aspect-ratio:16/9; display:grid; place-items:center; color:#9FA3C8; font-size:12px; text-align:center; padding:10px; }
.abox { border-radius:12px; padding:12px 14px; background:linear-gradient(135deg,#2A2782 0%,#171533 100%); color:#fff; box-shadow:var(--sh2); }
.abox .aname { display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:0; }
.abox .aname b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.abox .aname span { opacity:.7; font-variant-numeric:tabular-nums; }
.novid.s { aspect-ratio:auto; padding:8px 0 0; }
.mbar { position:relative; height:16px; margin-top:8px; border-radius:6px; background:var(--line-hi); cursor:pointer; overflow:hidden; }
.mbar i { position:absolute; top:3px; bottom:3px; border-radius:3px; opacity:.55; box-shadow:inset -1px 0 0 rgba(255,255,255,.8); }
.mbar i:hover { opacity:.85; }
.mbar i.on { opacity:1; top:1px; bottom:1px; box-shadow:0 0 0 1.5px var(--ink); }
.mbar .mph { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--red); pointer-events:none; }
.aicon { display:grid; place-items:center; width:150px; aspect-ratio:16/9; border-radius:8px; background:linear-gradient(135deg,#2A2782 0%,#171533 100%); color:#fff; flex:none; }
.aicon svg.i { width:34px; height:34px; }
.pcard .cov svg.i { vertical-align:-4px; }
.cutgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.cutgrid .ta { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; min-height:120px; }
.cutside { display:grid; gap:8px; align-content:start; justify-items:start; }
.camlegend { display:grid; gap:4px; }
.camlegend span { display:flex; align-items:center; gap:6px; font-size:12px; }
.camlegend b { font-weight:600; } .camlegend em { font-style:normal; color:var(--muted); font-size:11px; }
.imglinks { display:flex; gap:4px; flex-wrap:nowrap; overflow:hidden; max-width:260px; }
.imglinks a { display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 8px; border-radius:12px; background:var(--acc-soft); color:var(--acc-ink); font-size:11.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.imglinks a:hover { background:var(--b200); }
.vctl { display:flex; align-items:center; gap:2px; margin-top:8px; min-width:0; }
.vctl .btn { padding:0 8px; }
.tbtn { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; border:0; background:none; color:var(--ink2); }
.tbtn:hover:not(:disabled) { background:var(--hover); color:var(--ink); }
.tbtn:disabled { opacity:.35; }
.tbtn.play { background:var(--grad-pri); color:#fff; border-radius:50%; box-shadow:0 4px 10px -4px rgba(46,42,139,.45); }
.tbtn.play:hover:not(:disabled) { background:var(--grad-pri-h); color:#fff; }
.tcode { font-variant-numeric:tabular-nums; font-weight:700; font-size:11.5px; color:var(--ink); margin-left:4px; white-space:nowrap; }
.tcode span { color:var(--muted); font-weight:500; }
.ai-sec h4 { display:flex; align-items:center; gap:6px; margin:2px 0 8px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.ai-sec h4 .grow { flex:1; }
.why { display:flex; gap:8px; font-size:12.5px; line-height:1.6; background:linear-gradient(135deg,var(--b50) 0%,var(--card) 100%); border:1px solid var(--b100); color:var(--ink2); border-radius:12px; padding:10px 12px; }
.why svg { color:var(--b600); margin-top:2px; }

/* ───────── 보드 칸 */
.board { flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }
.bd-tools { display:flex; align-items:center; gap:6px; margin:10px 12px 0; padding:4px 6px; background:var(--grad-pop); border:1px solid var(--pop-line); border-radius:14px; box-shadow:var(--sh-pop); flex:none; flex-wrap:wrap; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.bd-grp { display:flex; align-items:center; gap:1px; padding-right:6px; border-right:1px solid var(--line-hi); }
.bd-grp:last-child { border-right:0; padding-right:0; }
.bd-t { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:46px; padding:4px 5px 3px; border:0; border-radius:10px; background:none; color:var(--ink2); font-size:10.5px; font-weight:500; white-space:nowrap; transition:background .12s,color .12s; }
.bd-t svg.i { width:19px; height:19px; }
.bd-t:hover { background:var(--hover); color:var(--ink); }
.bd-t.on { background:var(--acc-soft); color:var(--acc-ink); }
.bd-t.on svg.i { stroke-width:2.1; }
.bd-t.accent { color:#fff; background:var(--grad-pri); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -4px rgba(46,42,139,.45); padding:4px 10px 3px; }
.bd-t.accent:hover { background:var(--grad-pri-h); color:#fff; }
.bd-cam { display:flex; align-items:center; gap:8px; padding:3px 8px 3px 3px; border:1px solid var(--line); border-radius:10px; background:var(--grad-card); text-align:left; max-width:260px; }
.bd-cam img { width:52px; aspect-ratio:16/9; object-fit:cover; border-radius:5px; flex:none; }
.bd-cam span { min-width:0; display:grid; }
.bd-cam b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-cam em { font-style:normal; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-cam:hover { border-color:var(--b400); }
.bd-i { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:none; color:var(--ink2); flex:none; }
.bd-i:hover:not(:disabled) { background:var(--hover); color:var(--ink); }
.bd-i.on { background:var(--acc-soft); color:var(--acc-ink); }
.bd-i:disabled { opacity:.3; }
.bd-i.del:hover { background:var(--stop-s); color:var(--stop); }
/* 글·도형 도구 막대 — 고른 것 옆에 떴다가 놓으면 사라진다(대표 2026-09-18) */
.bd-props { display:flex; align-items:center; gap:4px; min-height:42px; margin:6px 12px 0; padding:4px 8px; border-radius:12px; background:var(--grad-pop); border:1px solid var(--pop-line); box-shadow:var(--sh-pop); flex:none; flex-wrap:wrap; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.bd-props[hidden] { display:none; }
.bd-t.more { font-weight:600; }
.bd-t.more.on { background:var(--acc-soft); color:var(--acc-ink); }
.bd-hint { font-size:12px; color:var(--muted); }
.bd-sep { width:1px; height:22px; background:var(--line); margin:0 4px; }
.bd-b { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--grad-card); font-size:12px; font-weight:500; color:var(--ink2); white-space:nowrap; }
.bd-b:hover:not(:disabled) { border-color:var(--b300); color:var(--b700); }
.bd-b.on { background:var(--acc-soft); border-color:var(--b300); color:var(--acc-ink); }
.bd-b:disabled { opacity:.4; }
.bd-b input[type=color] { width:22px; height:18px; padding:0; border:0; background:none; }
.bd-sw { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px 0 5px; border:1px solid var(--line); border-radius:8px; background:var(--grad-card); font-size:11.5px; font-weight:500; color:var(--ink2); }
.bd-sw i { width:18px; height:18px; border-radius:4px; border:1px solid rgba(0,0,0,.18); }
.bd-sw i.none { background:linear-gradient(135deg,#fff 45%,#E02B2B 45%,#E02B2B 55%,#fff 55%); }
.bd-sw:hover { border-color:var(--b300); }
.bd-num { display:inline-flex; align-items:center; gap:2px; height:30px; padding:0 7px 0 2px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:11px; color:var(--muted); }
.bd-num input { width:48px; border:0; outline:none; padding:0 2px 0 4px; font-variant-numeric:tabular-nums; font-size:12.5px; background:transparent; }
.bd-sel2 { height:30px; border:1px solid var(--line); border-radius:8px; background:var(--card); padding:0 6px; font-size:12px; }
.bd-typebtn { display:flex; align-items:center; gap:8px; height:36px; padding:2px 10px 2px 3px; border:1px solid var(--b300); border-radius:10px; background:linear-gradient(135deg,var(--b50) 0%,var(--card) 100%); text-align:left; max-width:260px; box-shadow:var(--sh1); }
.bd-typebtn .pv { width:56px; flex:none; border-radius:5px; }
.bd-typebtn span { display:grid; min-width:0; }
.bd-typebtn b { font-size:12.5px; color:var(--acc-ink); }
.bd-typebtn em { font-style:normal; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-typebtn:hover { border-color:var(--b500); box-shadow:var(--ring); }
@media (max-width:1700px) { .bd-pos { display:none; } }
.bd-pos { margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bd-wrap { flex:1; min-height:0; display:grid; place-items:center; padding:12px; overflow:hidden; }
.bd-stagebox { position:relative; }
.bd-stage { position:relative; width:100%; outline:none; border-radius:4px; box-shadow:var(--sh-4), 0 0 0 1px rgba(20,18,56,.08); overflow:visible; touch-action:none; user-select:none; }
.bd-stage.tool-select { cursor:default; }
.bd-stage:not(.tool-select) { cursor:crosshair; }
.bd-stage:not(.tool-select) .bd-obj { pointer-events:none; }
.bd-obj { position:absolute; cursor:move; }
.bd-obj:hover { outline:1px dashed rgba(71,87,203,.9); outline-offset:1px; }
.bd-obj.sub .pv-box, .bd-obj.sub .pv-no { position:absolute; }
.bd-obj.sub.fixed:hover { outline-style:dotted; }
.bd-sel { position:absolute; outline:1.5px solid #4757CB; pointer-events:none; z-index:5; }
.bd-sel.is-sub { outline-color:#E07A1F; }
.bd-h { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; background:#fff; border:1.5px solid #4757CB; border-radius:2px; pointer-events:auto; z-index:6; }
.bd-sel.is-sub .bd-h { border-color:#E07A1F; }
.bd-h.nw { left:0; top:0; cursor:nwse-resize; } .bd-h.n { left:50%; top:0; cursor:ns-resize; } .bd-h.ne { left:100%; top:0; cursor:nesw-resize; }
.bd-h.e { left:100%; top:50%; cursor:ew-resize; } .bd-h.se { left:100%; top:100%; cursor:nwse-resize; } .bd-h.s { left:50%; top:100%; cursor:ns-resize; }
.bd-h.sw { left:0; top:100%; cursor:nesw-resize; } .bd-h.w { left:0; top:50%; cursor:ew-resize; }
.bd-h.pt { border-radius:50%; width:12px; height:12px; margin:-6px 0 0 -6px; cursor:crosshair; }
.bd-tag { position:absolute; left:-1.5px; bottom:100%; margin-bottom:3px; pointer-events:auto; border:0; border-radius:5px 5px 5px 0; background:#E07A1F; color:#fff; font-size:11px; font-weight:800; padding:2px 7px; white-space:nowrap; cursor:pointer; }
.bd-tag:hover { background:#C4620F; }
/* 박스 그 자리에 겹쳐 고친다 — 글자 크기·정렬·색은 박스 것을 따라간다 */
.bd-edit { position:absolute; z-index:10; padding:0; border:0; outline:2px dashed #4757CB; outline-offset:2px; border-radius:4px; background:rgba(255,255,255,.14); color:var(--ink); font-family:var(--font); resize:none; overflow:hidden; caret-color:#4757CB; }
.bd-pop { position:absolute; z-index:30; background:var(--grad-pop); border:1px solid var(--pop-line); border-radius:14px; box-shadow:var(--sh-pop); padding:10px; -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); animation:popin .16s cubic-bezier(.2,.8,.3,1); }
@keyframes popin { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.bd-pal { display:grid; grid-template-columns:repeat(6,24px); gap:5px; }
.bd-pal button { width:24px; height:24px; border-radius:5px; border:1px solid rgba(0,0,0,.18); padding:0; }
.bd-pal button:hover { transform:scale(1.12); }
.bd-palrow { display:flex; gap:6px; margin-top:8px; }
.bd-cams { display:grid; grid-template-columns:repeat(3,150px); gap:6px; }
.bd-cams button { display:grid; gap:2px; text-align:left; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--grad-card); }
.bd-cams button.on { border-color:var(--b600); box-shadow:var(--ring); }
.bd-cams button:hover { border-color:var(--b400); }
.bd-cams img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:5px; }
.bd-cams b { font-size:11.5px; } .bd-cams em { font-style:normal; font-size:10.5px; color:var(--muted); }
.pageinfo { flex:none; display:flex; align-items:center; gap:8px; padding:6px 12px 8px; border-top:1px solid var(--line-hi); background:var(--grad-head); font-size:12px; }
.pageinfo .inp { padding:4px 8px; font-size:12px; }
.pageinfo .tin { width:76px; text-align:center; font-variant-numeric:tabular-nums; }
.pageinfo b { white-space:nowrap; }

/* 자막 유형 창 */
.tygrp { margin:16px 2px 8px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.tygrp:first-child { margin-top:0; }
.tycards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.tyc { text-align:left; border:1px solid var(--line); background:var(--grad-card); border-radius:14px; padding:7px; display:grid; gap:4px; box-shadow:var(--sh1); transition:.15s; }
.tyc:hover { border-color:var(--b400); box-shadow:var(--sh2); }
.tyc.on { border-color:var(--b500); box-shadow:var(--ring); }
.tyc .pv { border-radius:7px; }
.tyc b { font-size:13px; padding:0 3px; } .tyc span { font-size:11.5px; color:var(--muted); padding:0 2px; line-height:1.4; }
.tyhead { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:var(--ink2); }

/* 시작(구성 전) 패널 */
.setup { max-width:860px; margin:12px auto 0; display:grid; gap:12px; }
.setup-hero h2 { margin:8px 0 4px; font-size:19px; font-weight:600; letter-spacing:-.03em; }
.setup-hero p { margin:0; color:var(--ink2); }
.scard { background:var(--grad-card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:grid; gap:10px; box-shadow:var(--sh1); }
.scard h4 { margin:0; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.scard h4 .no { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--grad-brand); color:#fff; font-size:11px; font-weight:600; }
.scard h4 .muted { font-weight:500; font-size:12px; }
.drop { border:1.5px dashed var(--line-s); border-radius:12px; text-align:center; color:var(--ink2); background:var(--card2); cursor:pointer; transition:.12s; padding:18px; }
.drop:hover, .drop.over { border-color:var(--b400); background:var(--b50); }
.drop b { color:var(--b700); }
.vinfo { display:flex; gap:12px; align-items:center; }
.vinfo img { width:150px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; background:#111; flex:none; }
.modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mode { text-align:left; border:1px solid var(--line); background:var(--grad-card); border-radius:12px; padding:10px 12px; }
.mode b { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.mode span { display:block; font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:3px; }
.mode .flow { display:flex; gap:4px; margin-top:6px; }
.mode .flow i { font-style:normal; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:99px; background:var(--line-hi); color:var(--ink2); }
.mode.on { border-color:var(--b400); background:linear-gradient(135deg,var(--b50) 0%,var(--card) 100%); box-shadow:var(--ring); }
.mode.on .flow i { background:#fff; color:var(--b700); }
.ta.doc { min-height:150px; font-size:13px; line-height:1.65; }
.opts { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12px; }
.opts label { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.inp.num { width:70px; padding:4px 6px; }
.go { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.bigbtn { font-size:14px; padding:10px 24px; border-radius:10px; }
.note { font-size:12px; border-radius:8px; padding:7px 10px; background:var(--b50); color:var(--b800); }
.note.warn { background:var(--warn-s); color:var(--warn); }
.note.ok { background:var(--ok-s); color:var(--ok); }
.progress { height:6px; border-radius:9px; background:var(--line-hi); overflow:hidden; margin-top:8px; }
.progress i { display:block; height:100%; background:var(--grad-brand); width:0; transition:width .2s; }

/* ───────── 처음 화면 */
.home { overflow:auto; padding:40px 32px; }
.home-in { max-width:1080px; margin:0 auto; display:grid; gap:18px; }
.home h1 { margin:0; font-size:22px; font-weight:600; letter-spacing:-.03em; }
.home .lead { color:var(--ink2); margin:4px 0 0; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.pcard { text-align:left; border:1px solid var(--line); background:var(--grad-card); border-radius:16px; overflow:hidden; padding:0; box-shadow:var(--sh1); transition:.15s; }
.pcard:hover { border-color:var(--b300); box-shadow:var(--sh2); transform:translateY(-1px); }
.pcard .cov { aspect-ratio:16/9; background:#1B1A33 center/cover; display:grid; place-items:center; color:#8E91B8; font-size:12px; }
.pcard .pi { padding:10px 12px 12px; }
.pcard .pi b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard .pi span { font-size:12px; color:var(--muted); }
.home-head { display:flex; align-items:flex-start; gap:18px; }
.home-head > div { flex:1; min-width:0; }
.home-head .btn { flex:none; margin-top:2px; }

/* ───────── 팝오버 · 서랍 */
.pop { position:fixed; z-index:40; background:var(--grad-pop); border:1px solid var(--pop-line); border-radius:14px; box-shadow:var(--sh-pop); padding:8px; max-height:72vh; overflow:auto; -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); animation:popin .16s cubic-bezier(.2,.8,.3,1); }
.pop h5 { margin:4px 8px 6px; font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.plist { display:grid; gap:2px; min-width:300px; }
.plist .pdiv { height:1px; background:var(--line); margin:5px 8px; }
a.pitem, a.pitem:visited { color:inherit; text-decoration:none; }
.pitem { display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:none; border-radius:9px; padding:6px 8px; transition:background .12s; }
.pitem:hover { background:var(--acc-soft); }
.pitem.on { background:var(--grad-sel); }
.pitem img, .pitem .ph { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:5px; background:#1B1A33; flex:none; }
.pitem b { display:block; font-size:13px; font-weight:600; }
.pitem span { font-size:11px; color:var(--muted); }
.pop .hr { margin:8px 0; }
.newrow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.picker { width:min(760px,92vw); }
.picker .ptop { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.picker .ptop .inp { max-width:220px; }
.picker .pg { margin:10px 4px 6px; font-size:11.5px; font-weight:800; color:var(--muted); }
.picker .pgrid2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; }
.pk { text-align:left; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:5px; display:grid; gap:3px; }
.pk:hover { border-color:var(--b400); box-shadow:var(--sh2); }
.pk.on { border-color:var(--b600); box-shadow:var(--ring); }
.pk .pv { border-radius:6px; }
.pk b { font-size:12.5px; padding:0 2px; } .pk span { font-size:11px; color:var(--muted); padding:0 2px; line-height:1.35; }
.drawer { position:fixed; right:0; top:var(--top-h); bottom:0; width:min(760px,96vw); z-index:30; background:var(--grad-card); border-left:1px solid var(--line); box-shadow:var(--sh-4); display:grid; grid-template-rows:auto minmax(0,1fr); animation:slidein .2s cubic-bezier(.2,.8,.3,1); }
@keyframes slidein { from { transform:translateX(24px); opacity:.5; } }
.drawer-head { display:flex; justify-content:space-between; align-items:center; height:48px; padding:0 12px 0 20px; border-bottom:1px solid var(--pop-line); background:var(--grad-head); }
.drawer-head h3 { margin:0; font-size:15.5px; letter-spacing:-.02em; }
.drawer-body { overflow:auto; padding:14px 16px 24px; display:grid; grid-auto-rows:max-content; gap:12px; align-content:start; }   /* max-content — 안 그러면 긴 차시 목록이 잘리고 스크롤도 안 됨(2026-09-20 대표 지적) */
.sitem { display:grid; grid-template-columns:22px minmax(0,1fr) 22px; gap:6px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line-hi); }
.sitem .no { font-weight:800; color:var(--b600); padding-top:5px; }
.sitem .f { display:grid; gap:4px; }
.sitem .x { border:0; background:none; color:var(--muted); padding-top:5px; }

/* ───────── 미리보기 (PPT 와 같은 규칙) */
.pv { position:relative; aspect-ratio:22.4/12.7; background:#6F737A center/cover no-repeat; border-radius:6px; overflow:hidden; container-type:inline-size;
      font-family:'SB 어그로','Pretendard',var(--font); }
.bd-stage.pv { overflow:visible; border-radius:4px; }
.pv-box { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; line-height:1.18;
          overflow:hidden; padding:0 .8cqw; white-space:pre-line; word-break:keep-all; }
.pv-box.l { justify-content:flex-start; text-align:left; }
.pv-box.r { justify-content:flex-end; text-align:right; }
.pv-box.pv-ghost { border:max(1px,.25cqw) dashed rgba(255,255,255,.95); background:rgba(20,18,56,.28); color:#fff; font-size:2.6cqw; font-weight:700; }
.pv-box.pv-bad { background:rgba(224,43,43,.8); color:#fff; font-size:3cqw; }
.pv-no { position:absolute; color:#FF3B3B; font-weight:900; font-size:2.6cqw; text-shadow:0 0 .4cqw rgba(0,0,0,.6); white-space:nowrap; }
.pv-cam { position:absolute; right:1cqw; bottom:1cqw; background:rgba(20,18,56,.75); color:#fff; font-weight:900; font-size:2.8cqw; padding:0 1.2cqw; border-radius:1cqw; }
.pv.mini .pv-no, .pv.mini .pv-cam { display:none; }
.pv-obj { position:absolute; }
.pv-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.pv-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.pv-shape { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 .8cqw; line-height:1.2;
            white-space:pre-line; word-break:keep-all; overflow:hidden; box-sizing:border-box; }
.pv-shape.l { justify-content:flex-start; text-align:left; }
.pv-shape.r { justify-content:flex-end; text-align:right; }

/* ───────── 모달 · 기타 */
.modal { border:1px solid var(--pop-line); border-radius:22px; padding:0; width:min(720px,94vw); background:var(--grad-card); box-shadow:var(--sh-dlg); color:var(--ink); }
.modal[open] { animation:rise .2s cubic-bezier(.2,.8,.3,1); }
@keyframes rise { from { transform:translateY(12px) scale(.985); opacity:.6; } }
.modal::backdrop { background:var(--scrim); -webkit-backdrop-filter:blur(6px) saturate(1.2); backdrop-filter:blur(6px) saturate(1.2); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px 14px 26px; border-bottom:1px solid var(--pop-line); background:var(--grad-head); }
.modal-head h3 { margin:0; font-size:16.5px; letter-spacing:-.02em; }
.modal-body { padding:18px 26px 22px; max-height:74vh; overflow:auto; }
.modal.wide { width:min(1280px,96vw); }
#confirmDlg { width:min(420px,92vw); }
.ktable { width:100%; border-collapse:collapse; font-size:12.5px; }
.ktable td { padding:7px 6px; border-bottom:1px solid var(--line-hi); vertical-align:middle; }
.h4 { margin:0 0 6px; }
.lightbox { position:fixed; inset:0; background:rgba(10,10,30,.82); display:grid; place-items:center; z-index:50; cursor:zoom-out; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:8px; }
.lb-inner { width:min(1100px,92vw); }
.lb-inner img { width:100%; border-radius:8px; }
.lb-slide .pv { border-radius:10px; }
.toast { position:fixed; left:50%; top:9px; transform:translateX(-50%); background:linear-gradient(135deg,rgba(42,39,130,.96) 0%,rgba(23,21,51,.96) 100%); color:#fff; padding:10px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px -16px rgba(24,28,86,.55); z-index:60; font-weight:500; font-size:13px; max-width:80vw; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.toast { pointer-events:none; }
.toast.bad { background:var(--stop); }
.verbadge { position:fixed; left:0; bottom:4px; width:var(--rail-w); text-align:center; font-size:10px; line-height:1.3; color:rgba(255,255,255,.55); z-index:25; font-variant-numeric:tabular-nums; cursor:default; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh1); padding:14px 16px; min-width:0; }
.danger-solid { background:var(--stop); color:#fff; border-color:var(--stop); }
.danger-solid:hover:not(:disabled) { filter:brightness(1.08); color:#fff !important; background:var(--stop) !important; }
/* 토큰의 .btn:hover 배경이 기본 단추를 흰 바탕+흰 글씨로 덮는 것을 막는다 (2026-09-17 실측) */
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { background:var(--grad-brand); border-color:transparent; color:#fff; }
.opts { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12px; }
.opts label { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.inp.num { width:70px; padding:4px 6px; }
.infogrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.infogrid .sel { height:36px; }
.infogrid label { display:grid; gap:3px; font-size:11.5px; font-weight:700; color:var(--ink2); }

/* ───────── 디자인 관리 (design.js) */
.design-body { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:70vh; max-height:84vh; }
.dz-side { border-right:1px solid var(--line); padding:12px; display:grid; gap:6px; align-content:start; overflow:auto; }
.dz-set { display:flex; gap:8px; align-items:center; text-align:left; border:1px solid transparent; background:none; border-radius:var(--r-sm); padding:5px; font-weight:700; }
.dz-set img { width:54px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; }
.dz-set.on { background:var(--b100); border-color:var(--b200); }
.dz-main { padding:12px 16px; overflow:auto; display:grid; gap:10px; align-content:start; }
.dz-name { font-weight:800; font-size:15px; max-width:360px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs button { border:0; background:none; padding:8px 12px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; }
.tabs button.on { color:var(--b700); border-bottom-color:var(--b600); }
.camgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.camcard { border:1px solid var(--line); border-radius:var(--r-md); padding:8px; display:grid; gap:6px; background:#fff; }
.camcard.add { place-items:center; min-height:180px; border-style:dashed; color:var(--b600); font-weight:800; cursor:pointer; }
.camimg { position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--line-hi); display:grid; place-items:center; cursor:pointer; color:var(--muted); }
.camimg img { width:100%; height:100%; object-fit:cover; }
.zonetag { position:absolute; left:6px; bottom:6px; background:rgba(20,18,56,.78); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.camcard .ck { width:56px; font-weight:900; text-align:center; }
.tygrid { display:grid; grid-template-columns:240px minmax(0,1fr); gap:14px; align-items:start; }
.tylist { display:grid; gap:3px; max-height:66vh; overflow:auto; padding-right:4px; }
.tyg { font-size:11px; font-weight:800; color:var(--muted); margin-top:6px; }
.tyitem { display:flex; gap:8px; align-items:center; text-align:left; border:1px solid transparent; background:none; border-radius:var(--r-sm); padding:3px; }
.tyitem img, .tyitem .noimg { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; flex:none; }
.tyitem .noimg { display:grid; place-items:center; background:var(--line-hi); color:var(--muted); font-size:9.5px; }
.tyitem span { display:grid; } .tyitem em { font-style:normal; font-size:10.5px; color:var(--muted); }
.tyitem.on { background:var(--b100); border-color:var(--b200); }
.tyedit { display:grid; gap:12px; min-width:0; }
.ty-top { display:grid; grid-template-columns:280px minmax(0,1fr); gap:12px; }
.ty-sample { aspect-ratio:16/9; border:1.5px dashed var(--line-s); border-radius:var(--r-sm); overflow:hidden; display:grid; place-items:center; text-align:center; cursor:pointer; color:var(--muted); font-size:12px; }
.ty-sample img { width:100%; height:100%; object-fit:cover; }
.ty-fields { display:grid; gap:6px; font-size:12px; }
.ty-fields label { display:grid; gap:2px; font-weight:700; color:var(--ink2); }
.ty-fields .row label { display:inline-flex; align-items:center; gap:4px; }
.ty-fields .row > label:not(.small) { display:grid; flex:1; }
.ty-fields .ta { min-height:44px; }
.ty-style { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; align-items:end; background:var(--card2); border:1px solid var(--line-hi); border-radius:var(--r-sm); padding:8px 10px; }
.ty-style label { display:grid; gap:2px; font-weight:700; color:var(--ink2); }
.colf { display:flex; gap:4px; align-items:center; }
.colf input[type=color] { width:30px; height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; }
.inp.hex { width:78px; padding:4px 6px; font-family:ui-monospace,monospace; }
.prevgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin-top:6px; }
.prevcard { display:grid; gap:4px; }
.matrix { overflow:auto; }
.mx-row { display:grid; grid-template-columns:150px repeat(5,minmax(150px,1fr)); gap:6px; margin-bottom:6px; align-items:center; }
.mx-head span { font-size:12px; }
.mx-type { display:grid; font-size:12px; } .mx-type em { font-style:normal; color:var(--muted); font-size:11px; }
.mx-cell { padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:none; }
.mx-cell:hover { border-color:var(--b400); }
.hr { height:1px; background:var(--line); margin:12px 0; border:0; }

/* ───────── 메뉴 창 (레일 ‘메뉴’ · Ctrl+K) */
.menu { position:fixed; z-index:45; left:calc(var(--rail-w) + 10px); top:10px; width:min(720px, calc(100vw - var(--rail-w) - 24px)); max-height:calc(100vh - 20px);
  display:flex; flex-direction:column; background:var(--grad-pop); border:1px solid var(--pop-line); border-radius:18px; box-shadow:var(--sh-dlg);
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); overflow:hidden; animation:menuin .18s cubic-bezier(.2,.8,.3,1); transform-origin:0 0; }
@keyframes menuin { from { opacity:0; transform:translateX(-6px) scale(.985); } }
.mn-search { display:flex; align-items:center; gap:10px; padding:0 16px; height:54px; border-bottom:1px solid var(--line); background:var(--grad-head); }
.mn-search svg.i { width:18px; height:18px; color:var(--muted); flex:none; }
.mn-search input { flex:1; border:0; background:none; outline:none; font:inherit; font-size:14.5px; color:var(--ink); min-width:0; }
.mn-search input::placeholder { color:var(--muted); }
.menu kbd, .keylist kbd { font:inherit; font-size:11px; font-weight:500; color:var(--ink2); background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; white-space:nowrap; }
.mn-body { display:grid; grid-template-columns:minmax(0,1fr) 240px; min-height:0; flex:1; }
.mn-main { padding:6px 8px 10px; overflow:auto; }
.mn-sec { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.04em; padding:12px 10px 4px; }
.mn-sec:first-child { padding-top:6px; }
.menu .pi { width:100%; display:flex; align-items:center; gap:12px; padding:7px 10px; border:0; background:none; border-radius:10px; text-align:left; color:var(--ink); transition:background .12s,color .12s; }
.menu .pi .ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none; color:var(--ink2); background:rgba(255,255,255,.7); box-shadow:0 0 0 1px var(--line) inset; transition:inherit; }
.menu .pi .ic svg.i { width:17px; height:17px; }
.menu .pi .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.menu .pi .tx b { font-size:13px; font-weight:600; }
.menu .pi .tx span { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu .pi .k { margin-left:auto; font-size:11px; color:var(--muted); background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:6px; padding:1px 6px; white-space:nowrap; }
.menu .pi.act { background:var(--acc-soft); color:var(--acc-ink); }
.menu .pi.act .ic { color:var(--acc-ink); background:#fff; box-shadow:0 0 0 1px var(--pop-line) inset; }
.menu .pi.cur .tx b::after { content:"열림"; margin-left:6px; font-size:10px; font-weight:600; color:var(--acc-ink); background:var(--acc-soft); border-radius:5px; padding:1px 5px; vertical-align:1px; }
.menu .pi.pri .ic { background:var(--grad-pri); color:#fff; box-shadow:none; }
.menu .pi:disabled { opacity:.42; cursor:default; }
.mn-chk { width:32px; height:18px; border-radius:10px; background:#D5D8E6; position:relative; flex:none; transition:background .15s; }
.mn-chk::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
.mn-chk.on { background:var(--acc); } .mn-chk.on::after { left:16px; }
.mn-chk svg { display:none; }
.mn-side { border-left:1px solid var(--line); padding:12px 10px; overflow:auto; background:rgba(246,247,252,.6); }
.mn-side h5 { margin:0 6px 8px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.mn-rec { width:100%; display:flex; gap:10px; align-items:center; padding:6px; border:0; background:none; border-radius:10px; text-align:left; transition:background .12s; }
.mn-rec:hover { background:var(--acc-soft); }
.mn-rec.on { background:var(--grad-sel); }
.mn-rec img, .mn-rec .ph { width:56px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#1B1A33; flex:none; display:grid; place-items:center; color:#9C9BC4; }
.mn-rec .ph svg.i { width:16px; height:16px; }
.mn-rec .tx { min-width:0; display:flex; flex-direction:column; }
.mn-rec b { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-rec .tx span { font-size:11px; color:var(--muted); }
.mn-foot { display:flex; align-items:center; gap:10px; padding:8px 16px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); background:rgba(255,255,255,.5); }
.keylist > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.keylist .kbd { color:var(--muted); white-space:nowrap; }
.menu-scrim { position:fixed; inset:0 0 0 var(--rail-w); z-index:44; background:rgba(20,22,60,.12); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); animation:fadein .15s; }
@keyframes fadein { from { opacity:0; } }
.mn-side { display:flex; flex-direction:column; }
.mn-cur { margin-top:auto; padding:12px; border-radius:12px; background:var(--grad-card); box-shadow:0 0 0 1px var(--line) inset; }
.mn-cur h5 { margin:0 0 6px; }
.mn-cur b { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.mn-cur > div { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; padding:3px 0; color:var(--muted); }
.mn-cur > div span:last-child { color:var(--ink2); font-weight:500; }

/* ───────── 플레이어 · 타임라인 (v0.6 — 영상 검수 방식) */
.bd-media { position:absolute; inset:0; border-radius:4px; overflow:hidden; background:#0B0B18; }
.bd-media:empty { display:none; }
.bd-media video { width:100%; height:100%; object-fit:cover; display:block; }
.bd-media .novid { height:100%; display:grid; place-items:center; color:#9FA3C8; font-size:12px; }
.bd-stage.on-video { background-color:transparent !important; }
.bd-obj.sub.pend { opacity:.34; }
.bd-obj.sub.pend:hover { opacity:.75; }
.pv-box.pv-pend { opacity:.38; outline:1.5px dashed rgba(255,255,255,.9); outline-offset:1px; }
.bd-obj.sub.pend .pv-box.pv-pend { opacity:1; }
.pv-no.pv-pend { opacity:.6; }
.bd-stage.live .bd-obj.sub { animation:cuein .22s cubic-bezier(.2,.8,.3,1); }
@keyframes cuein { from { opacity:0; transform:translateY(4px); } }
.bd-stage.live .pv-no { display:none; }

.tl { flex:none; border-top:1px solid var(--line); background:var(--grad-head); padding:6px 12px 8px; display:grid; gap:6px; }
.tl:empty { display:none; }
.tl-bar { display:flex; align-items:center; gap:4px; min-width:0; }
.tl-bar .tcode { margin:0 8px 0 6px; }
.tl-media { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); padding:0 8px; }
.inp.sm.tl-rate { height:28px; width:66px; padding:0 6px; font-size:12px; }
.tl-live { height:28px; padding:0 11px 0 26px; border-radius:14px; border:1px solid var(--line); background:var(--card) no-repeat 9px 50%/10px 10px; font-size:12px; font-weight:500; color:var(--muted); position:relative; }
.tl-live::before { content:""; position:absolute; left:10px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#C3C6D6; }
.tl-live.on { color:var(--acc-ink); border-color:var(--b300); background-color:var(--acc-soft); }
.tl-live.on::before { background:var(--red); box-shadow:0 0 0 3px rgba(217,58,43,.18); }
.tl-acts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tl-lbl { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em; margin-right:2px; }
.tl-sep { width:1px; height:20px; background:var(--line); margin:0 2px; }
.tl-cams { display:inline-flex; gap:4px; }
.act { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 5px 0 10px; border-radius:9px; border:1px solid var(--line); background:var(--grad-card); color:var(--ink); font-size:12.5px; font-weight:500; box-shadow:0 1px 1px rgba(28,32,84,.04); transition:border-color .12s, background .12s, transform .08s; }
.act > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.act:hover:not(:disabled) { border-color:var(--b400); color:var(--acc-ink); }
.act:active:not(:disabled) { transform:translateY(1px); }
.act:disabled { opacity:.4; }
.act kbd, .chip kbd, .tl kbd { font:inherit; font-size:10.5px; font-weight:600; min-width:20px; text-align:center; color:var(--ink2); background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 5px; line-height:15px; }
.act.pri { background:var(--grad-pri); border-color:transparent; color:#fff; }
.act.pri:hover:not(:disabled) { background:var(--grad-pri-h); color:#fff; }
.act.pri kbd { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff; }
.act.cam { padding-left:7px; gap:5px; }
.act.cam i { width:10px; height:10px; border-radius:3px; }
.act.cam > span { font-weight:600; }
.act.cam.on { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); box-shadow:0 0 0 1px var(--acc) inset; }
.act.hit { animation:keyhit .35s ease-out; }
@keyframes keyhit { 0% { box-shadow:0 0 0 0 rgba(71,87,203,.55); } 100% { box-shadow:0 0 0 8px rgba(71,87,203,0); } }
.tl .mbar { margin-top:0; height:12px; }

.tz { position:relative; height:74px; border-radius:10px; background:var(--card); box-shadow:0 0 0 1px var(--line) inset; cursor:pointer; overflow:hidden; user-select:none; touch-action:none; }
.tz-ruler { position:absolute; left:0; right:0; top:0; height:16px; border-bottom:1px solid var(--line-hi); }
.tz-tick { position:absolute; top:0; bottom:-58px; width:1px; background:rgba(28,32,84,.06); }
.tz-tick em { position:absolute; left:3px; top:1px; font-style:normal; font-size:9.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tz-lane { position:absolute; left:0; right:0; top:20px; height:26px; }
.tz-blk { position:absolute; top:0; bottom:0; border-radius:6px; background:#EEF0F7; box-shadow:0 0 0 1px var(--line) inset; overflow:hidden; display:flex; align-items:center; gap:5px; padding:0 8px 0 10px; font-size:11px; color:var(--muted); white-space:nowrap; }
.tz-blk i { position:absolute; left:0; top:0; bottom:0; width:4px; }
.tz-blk b { font-weight:600; color:var(--ink2); }
.tz-blk.on { background:var(--acc-soft); box-shadow:0 0 0 1.5px var(--acc) inset; color:var(--acc-ink); }
.tz-blk.on b { color:var(--acc-ink); }
.tz-sent { position:absolute; bottom:2px; width:1px; height:8px; background:rgba(46,42,139,.35); pointer-events:none; }
.tz-edge { position:absolute; top:-2px; bottom:-2px; width:10px; margin-left:-5px; cursor:ew-resize; z-index:3; }
.tz-edge::after { content:""; position:absolute; left:4px; top:0; bottom:0; width:2px; border-radius:1px; background:var(--ink2); opacity:.35; }
.tz-edge:hover::after, .tz-edge.drag::after { opacity:1; background:var(--acc); box-shadow:0 0 0 2px rgba(71,87,203,.2); }
.tz-pins { position:absolute; left:0; right:0; top:50px; height:20px; }
.tz-pin { position:absolute; top:0; transform:translateX(-50%); z-index:2; cursor:grab; }
.tz-pin b { display:block; font-size:10.5px; font-weight:700; color:#fff; background:#E07A1F; border-radius:10px; padding:1px 6px; line-height:15px; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.tz-pin::before { content:""; position:absolute; left:50%; bottom:100%; width:1.5px; height:30px; margin-left:-.75px; background:#E07A1F; opacity:.55; }
.tz-pin.miss b { background:#fff; color:#E07A1F; box-shadow:0 0 0 1.5px #E07A1F inset; }
.tz-pin.far { cursor:default; pointer-events:none; opacity:.35; }
.tz-pin.drag { cursor:grabbing; z-index:4; }
.tz-pin.drag b { background:var(--acc); }
.tz-ph { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--red); pointer-events:none; z-index:5; }
.tz-ph::before { content:""; position:absolute; top:0; left:-4px; border:5px solid transparent; border-top-color:var(--red); }
.tz-hover { position:absolute; top:1px; transform:translateX(-50%); font-size:10px; font-weight:600; color:#fff; background:var(--ink); border-radius:4px; padding:0 4px; pointer-events:none; z-index:6; font-variant-numeric:tabular-nums; }
mark.cue.shown { background:#FDE7D4; color:#B45309; box-shadow:none; }
mark.cue.next { box-shadow:0 0 0 2px #E07A1F; animation:nextcue 1.2s ease-in-out infinite; }
@keyframes nextcue { 50% { box-shadow:0 0 0 2px rgba(224,122,31,.25); } }
.chip kbd { margin-left:4px; font-size:9.5px; padding:0 4px; }
.sc-cam { display:grid; place-items:center; width:18px; height:16px; margin-top:3px; border-radius:5px; font-style:normal; font-size:10px; font-weight:700; color:#fff; }
.chips:empty { display:none; }
.chip.warn { background:var(--stop-s); color:var(--stop); border-color:#F2C4BD; font-weight:500; }
.sc-keys { font-size:11px; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.sc-keys kbd { font:inherit; font-size:10px; font-weight:600; color:var(--ink2); background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 4px; margin-left:4px; }
.tl-k { margin:0 4px 0 2px; }


/* ───────── v0.6 Vrew 배치 — 왼쪽 플레이어·페이지 + 클립 패널 | 오른쪽 스크립트 카드 */
.col-board { border-right:0; }
.gutter { cursor:col-resize; background:var(--line-hi); position:relative; z-index:3; }
.gutter::after { content:""; position:absolute; left:2px; top:50%; width:2px; height:36px; margin-top:-18px; border-radius:2px; background:var(--line-s); }
.gutter:hover, .gutter.drag { background:var(--acc-soft); }
.gutter:hover::after, .gutter.drag::after { background:var(--acc); }
.clippane { position:relative; display:flex; flex-direction:column; border-top:1px solid var(--line); background:var(--card); min-height:0; }

.editor.fold-colAi .cp-body { display:none; }
.editor.fold-colAi #cpFold svg { transform:rotate(180deg); }
.cp-head { display:flex; align-items:center; gap:10px; height:42px; padding:0 8px 0 16px; border-bottom:1px solid var(--line-hi); flex:none; background:var(--grad-head); }
.cp-head > b { font-size:14px; font-weight:600; }
.cp-tabs button { height:26px; }
.cp-body { flex:1; min-height:0; overflow:auto; }
.cp-tab { height:100%; }
/* 제안 칸은 아래 남은 자리를 다 쓰고(가로 스크롤 없이 줄바꿈) 그 안에서만 스크롤한다
   (대표 2026-09-20: "이 구간을 아랫쪽 전체를 채우게 길게 만들어서 좀 더 많은 구성 제안을 보게") */
.cp-grip { position:absolute; left:0; right:0; top:-4px; height:8px; cursor:row-resize; z-index:4; }
.cp-grip:hover { background:linear-gradient(transparent 3px, var(--acc) 3px, var(--acc) 5px, transparent 5px); }
.editor.fold-colAi .cp-grip { display:none; }

.col-script { background:var(--grad-main); border-right:0; }
.col-script .colbody { padding:4px 14px 70px 10px; }
.sc-clip { grid-template-columns:34px minmax(0,1fr); gap:10px; padding:12px 12px 12px 8px; margin:8px 0; border-radius:14px; border:1px solid var(--line); background:var(--card); box-shadow:0 1px 2px rgba(28,32,84,.04); cursor:default; }
.sc-clip:hover { background:var(--card); border-color:var(--b300); }
.sc-clip.on { background:var(--card); border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), 0 6px 18px -10px rgba(46,42,139,.35); }
.sc-clip.on::before { display:none; }
.sc-clip.editing { border-color:var(--b500); }
.sc-no { padding-top:5px; gap:6px; }
.cd-main { min-width:0; display:grid; gap:8px; align-content:start; }
.cd-words { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.w { display:inline-flex; align-items:center; height:30px; padding:0 9px; border-radius:7px; border:1px solid var(--line); background:#fff; font-size:13.5px; color:var(--ink); cursor:pointer; user-select:none; transition:background .1s, border-color .1s; }
.w:hover { border-color:var(--b400); background:var(--acc-soft); }
.w.pick { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }
.w.now { background:#2F9ACB; border-color:#2F9ACB; color:#fff; }
.w.empty { color:var(--muted); border-style:dashed; }
.w-cue { display:inline-flex; align-items:center; height:22px; padding:0 6px; margin-right:-2px; border-radius:6px; background:#FDE3E0; color:#D1281D; font-size:11.5px; font-weight:700; box-shadow:0 0 0 1px #F6B8B1 inset; cursor:pointer; }
.w-cue.bad { background:var(--line-hi); color:var(--muted); text-decoration:line-through; box-shadow:none; }
.w-cue.shown { background:#FDE7D4; color:#B45309; box-shadow:0 0 0 1px #F5C69A inset; }
.w-cue.next { box-shadow:0 0 0 2px #E07A1F; animation:nextcue 1.2s ease-in-out infinite; }
.cd-pen { width:30px; height:30px; border-radius:7px; border:0; background:none; color:var(--muted); display:grid; place-items:center; }
.cd-pen:hover { background:var(--hover); color:var(--acc-ink); }
.cd-edhint { font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.cd-edhint kbd, .wpop kbd { font:inherit; font-size:10px; font-weight:600; color:var(--ink2); background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 4px; }
.sc-clip.editing .nwrap { background:#fff; box-shadow:inset 0 0 0 1px var(--b300); padding:4px 2px; margin:0; }
.sc-clip.editing .narr, .sc-clip.editing .nhl { font-size:14px; line-height:1.75; }
.cd-subs { display:grid; gap:4px; padding-top:8px; border-top:1px solid var(--line-hi); }
.cd-sub { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:8px; align-items:center; padding:3px 4px 3px 2px; border-radius:9px; }
.cd-sub:hover { background:var(--side); }
.cd-sub .cn { font-size:11px; font-weight:700; color:#D1281D; padding:1px 5px; border-radius:6px; border:1px dashed #F0A59D; min-width:30px; text-align:center; }
.cd-sub .cn.on { background:#FDE3E0; border:1px solid #F6B8B1; }
.cd-sub .cn.part { border-style:solid; }
.cd-sub .cn.none { color:var(--muted); border-color:var(--line); }
.cd-type { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 9px 0 3px; border-radius:8px; border:1px solid var(--line); background:var(--grad-card); font-size:12px; font-weight:600; color:var(--ink2); white-space:nowrap; }
.cd-type .sw { width:38px; height:22px; border-radius:5px; overflow:hidden; }
.cd-type .sw .pv { border-radius:0; }
.cd-type:hover { border-color:var(--b400); color:var(--acc-ink); }
.cd-stext { width:100%; min-width:0; border:1px solid transparent; background:transparent; border-radius:7px; padding:4px 8px; font:inherit; font-size:13px; color:#1F6FA8; resize:none; line-height:1.5; outline:none; }
.cd-stext:hover { background:#fff; border-color:var(--line); }
.cd-stext:focus { background:#fff; border-color:var(--b400); box-shadow:var(--ring); color:var(--ink); }
.cd-del { width:26px; height:26px; opacity:0; }
.cd-sub:hover .cd-del { opacity:1; }
.cd-subbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cd-add { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px 0 6px; border-radius:8px; border:1px dashed var(--line-s); background:none; font-size:12px; color:var(--muted); }
.cd-add:hover { border-color:var(--acc); color:var(--acc-ink); background:var(--acc-soft); }
/* 시각만 한 줄로 — 완성 모습 그림은 뺐다(한눈에·편집창에서 본다) */
.cd-at { justify-self:start; height:24px; padding:0 9px; border-radius:8px; border:1px solid var(--line); background:var(--card); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cd-at b { color:var(--ink2); font-weight:600; }
.cd-at:hover { border-color:var(--acc); color:var(--acc-ink); }
/* 아래는 자막 영역 — 카드 폭을 다 쓴다 */
.cd-low { display:grid; gap:6px; }
.sc-clip.playing { border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.follow { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 18px; border-radius:19px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:500; color:var(--ink); box-shadow:0 10px 26px -12px rgba(24,28,86,.45); z-index:5; }
.follow:hover { color:var(--acc-ink); border-color:var(--b400); }
.wpopbox { padding:6px; }
.wpop { display:grid; gap:1px; min-width:250px; max-width:340px; }
.wpop h5 { margin:8px 8px 3px; }
.wpop .pi { display:flex; align-items:center; gap:9px; width:100%; padding:6px 8px; border:0; background:none; border-radius:8px; text-align:left; font-size:12.5px; color:var(--ink); }
.wpop .pi:hover:not(:disabled) { background:var(--acc-soft); color:var(--acc-ink); }
.wpop .pi:disabled { opacity:.4; }
.wpop .pi > span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wpop .pi em { font-style:normal; color:var(--muted); }
.wpop .pi small { font-size:10.5px; color:var(--muted); }
.wpop .cn { font-size:11px; font-weight:700; color:#D1281D; padding:0 5px; border-radius:6px; border:1px dashed #F0A59D; }
.wpop .cn.on { background:#FDE3E0; border-style:solid; }
/* 끌어 고른 대목 — 안내 줄 자리에 뜨는 AI 단추 */
.spanbar { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.spanbar > b { font-size:11.5px; font-weight:600; color:var(--acc-ink); background:var(--acc-soft); border-radius:10px; padding:2px 9px; }
.spanbar .muted { font-size:11px; }
.spanpop { padding:8px; }
.spanpop h5 { margin:2px 4px 8px; }
.spanpick { display:grid; gap:6px; min-width:520px; max-width:640px; }
.spanopt { display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-align:left; position:relative; }
.spanopt:hover { border-color:var(--acc); background:var(--acc-soft); z-index:2; }
/* 미리보기는 글자가 읽히는 크기로(대표 2026-09-20: "니 눈엔 이게 보이겠냐"). 마우스를 올리면 더 크게 띄운다 */
.spanopt .sw { width:220px; flex:none; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px var(--line); transition:transform .12s ease; transform-origin:left center; }
.spanopt:hover .sw { transform:scale(2.4); box-shadow:0 12px 32px -8px rgba(28,32,84,.45), 0 0 0 1px var(--acc); position:relative; z-index:3; }
.spanopt .sw .pv { border-radius:0; }
.spanopt .tx { flex:1; min-width:0; font-size:12px; color:var(--ink2); line-height:1.6; }
.spanopt .tx b { display:block; font-size:12.5px; color:var(--ink); margin-bottom:2px; }
.spanopt .tx em { font-style:normal; font-size:10.5px; color:var(--muted); }
.spanopt .src { font-size:10.5px; color:var(--muted); flex:none; }
.spanopt .src.ai { color:var(--acc-ink); font-weight:600; }
/* 커서 자리에 뜨는 자막 유형 고르기 — 왼쪽으로 붙는다 */
.typopbox { padding:8px; }
.typopbox h5 { margin:2px 4px 8px; }
.typopbox h5 .cn { color:#D1281D; background:#FDE3E0; border-radius:6px; padding:0 6px; }
.typop { display:grid; gap:2px; max-height:52vh; overflow:auto; width:250px; }
.typop .tg { font-size:10.5px; font-weight:600; color:var(--muted); margin:6px 4px 2px; }
.typop .tr { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tyq { display:grid; gap:3px; padding:5px; border:1px solid var(--line); border-radius:9px; background:var(--card); text-align:center; }
.tyq:hover { border-color:var(--acc); background:var(--acc-soft); }
.tyq .sw { border-radius:5px; overflow:hidden; box-shadow:0 0 0 1px var(--line); }
.tyq .sw .pv { border-radius:0; }
.tyq b { font-size:11.5px; font-weight:600; color:var(--ink2); }
.typopbox .help { margin:8px 4px 2px; font-size:11px; }
/* 플레이어 아래 줄 — 이동·재생·정지·구간반복·배속, 그리고 확대·축소만 */
.tbtn.wide { width:auto; padding:0 10px; gap:5px; font-size:12px; font-weight:500; }
.tbtn.sm { width:auto; height:26px; min-width:26px; padding:0 8px; font-size:11.5px; }
.tbtn.on { background:var(--acc-soft); color:var(--acc-ink); border-color:var(--b400); }
.tz-zoom { display:inline-flex; align-items:center; gap:2px; padding-left:8px; border-left:1px solid var(--line-hi); }
/* 설정 키 표 — 글 / 소리 / 이미지 생성 / 자료 찾기 로 묶어 보여 준다 */
.ktable tr.kgrp td { padding:12px 0 2px; font-size:11px; font-weight:700; color:var(--muted); border:0; }
/* ── 차시 관리 ─────────────────────────────────────────────── */
.uadd { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; background:var(--side); border:1px solid var(--line); }
.uadd > b { font-size:13px; }
.uadd .inp { flex:1; min-width:150px; }
.uadd .inp.num { flex:none; width:64px; }
/* 이 값은 과정에서 물려받은 것 — 여기서 고치지 않는다 */
.fromcourse { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:11px; background:var(--b50); border:1px solid var(--b300); font-size:12.5px; color:var(--ink2); margin-bottom:10px; }
.fromcourse b { color:var(--ink); }
.linkish { border:0; background:none; padding:0; color:var(--acc-ink); font:inherit; text-decoration:underline; }
.infogrid label.wide { grid-column:1 / -1; }
.ucourse { margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.uhead { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--side); border-bottom:1px solid var(--line); }
.uhead > b { font-size:13.5px; }
.ufold { width:24px; height:24px; border:0; background:none; border-radius:7px; color:var(--muted); padding:0; display:grid; place-items:center; }
.ufold:hover { background:var(--line-hi); color:var(--ink2); }
/* 과정 설정 — 여기 한 곳에만 적는다(차시가 물려받는다) */
.cset { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:12px; background:var(--b50); border-bottom:1px solid var(--line); }
.cset label { display:grid; gap:4px; font-size:11.5px; font-weight:600; color:var(--ink2); }
.cset label.wide, .cset .wide { grid-column:1 / -1; }
.cset .row { display:flex; align-items:center; gap:8px; }
.utable { width:100%; border-collapse:collapse; }
.utable td { padding:7px 12px; border-bottom:1px solid var(--line-hi); vertical-align:top; }
.utable tr.on { background:var(--grad-sel); }
.utable .uno { width:56px; font-size:12px; font-weight:600; color:var(--ink2); white-space:nowrap; padding-top:12px; }
/* 차시 정보를 목록에서 바로 적는 칸들 */
.utable .umain { display:grid; gap:6px; }
.uline { display:flex; align-items:center; gap:6px; }
.uline .uname { flex:1; min-width:0; font-weight:600; }
.ufields { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ufields label { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--ink2); white-space:nowrap; }
.ufields label.grow { flex:1; min-width:180px; }
.ufields label.grow .inp { flex:1; min-width:0; font-weight:400; }
.ufields .inp.num { width:58px; text-align:right; }
.ufields label span { font-weight:400; color:var(--muted); }
.udrop { flex:1; min-width:220px; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:9px; border:1px dashed var(--line-s); background:var(--card); font-size:12px; color:var(--ink2); text-align:left; }
.udrop:hover, .udrop.over { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); }
.udrop.has { border-style:solid; color:var(--ink); }
.utable tr.over td { background:var(--acc-soft); }
.utable .uwhen { width:110px; text-align:right; font-variant-numeric:tabular-nums; }
.ulink { border:0; background:none; padding:0; text-align:left; color:var(--ink); font:inherit; }
.ulink:hover b { color:var(--acc-ink); text-decoration:underline; }
/* 진행 단계 — 색으로 구분(대표 2026-09-18) */
.ustage { height:24px; padding:0 10px; border-radius:12px; border:1px solid transparent; font-size:11.5px; font-weight:600; white-space:nowrap; }
.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:0; }
.ustage.s0, .sdot.s0 { background:#EEF0F6; color:#6B7090; border-color:#DDE0EC; }
.ustage.s1, .sdot.s1 { background:#E6EDFF; color:#2E46B8; border-color:#C7D4FB; }
.ustage.s2, .sdot.s2 { background:#FFF1D9; color:#9A6212; border-color:#F5D9A5; }
.ustage.s3, .sdot.s3 { background:#E2F4E6; color:#2A7D3C; border-color:#BEE4C7; }
.ustage.s4, .sdot.s4 { background:#2A7D3C; color:#fff; border-color:#2A7D3C; }
.sdot.s0 { background:#B9BDD0; } .sdot.s1 { background:#4757CB; } .sdot.s2 { background:#E0A02B; }
.sdot.s3 { background:#48A660; } .sdot.s4 { background:#2A7D3C; }
/* ── 아래 칸: 박스 셋 + 칩 + AI 제안 ───────────────────────── */
.achip { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 4px 0 6px; border-radius:13px; border:1px solid var(--line); background:var(--card); font-size:11.5px; color:var(--ink2); }
.achip i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--line-hi); font-style:normal; font-size:9.5px; font-weight:700; color:var(--ink2); }
.achip.k-top { border-color:#C7D4FB; background:#EEF2FF; }
.achip.k-visual { border-color:#BEE4C7; background:#EDF8EF; }
.achip.k-right { border-color:#F5D9A5; background:#FFF8EC; }
.achip .x { width:18px; height:18px; border:0; background:none; border-radius:50%; color:var(--muted); padding:0; }
.achip .x:hover { background:var(--stop-s); color:var(--stop); }
.sc-sec { margin:16px 0 4px; }
/* 대주제 띠 접기/펴기 (대표 2026-09-18: "꺽쇠를 통해 접혔다 폈다") */
.secfold { width:24px; height:24px; border:0; background:none; border-radius:7px; color:var(--muted); padding:0; display:grid; place-items:center; }
.secfold:hover { background:var(--line-hi); color:var(--ink2); }
.sc-sec.fold .secfold svg { transform:rotate(-90deg); }
.sc-sec.fold { opacity:.85; }
.sc-sub { margin:14px 6px 2px 12px; }
.sc-end { padding:10px 0; }

/* ───────── v0.6 레일 새 기능: 검토 · 이미지 · 찾기 · 한눈에 · 핵심 정리 카드 */
.hd-setup { margin-left:4px; }
.hd-setup.on { border-color:var(--acc); color:var(--acc-ink); background:var(--acc-soft); }
.toast.act { pointer-events:auto; display:flex; align-items:center; gap:12px; }
.tundo { border:0; border-radius:14px; padding:3px 12px; background:rgba(255,255,255,.18); color:#fff; font-weight:600; font-size:12px; }
.tundo:hover { background:rgba(255,255,255,.3); }
.sc-summary { display:block; margin:6px 0 30px; padding:12px 14px; border-radius:14px; border:1px dashed var(--b300); background:linear-gradient(135deg,var(--b50) 0%,var(--card) 100%); cursor:pointer; }
.sc-summary:hover { border-color:var(--acc); }
.ss-head { display:flex; align-items:center; gap:8px; }
.ss-head b { font-size:13.5px; font-weight:600; }
.sc-summary ol { margin:8px 0 0; padding-left:20px; font-size:12.5px; color:var(--ink2); line-height:1.6; }
.sc-clip.flash { animation:cardflash 1.2s ease-out; }
@keyframes cardflash { 0%,40% { box-shadow:0 0 0 3px #F5A623; } }
.w.hit { background:#FFF3B0; border-color:#F2C94C; }
.rv-sum { font-size:14px; margin:2px 0 10px; }
.rv-sum b { font-size:18px; font-weight:600; color:var(--stop); }
.rv-sum b.ok { color:var(--ok, #2F7D32); font-size:15px; }
.fchips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.fchip { height:26px; padding:0 10px; border-radius:13px; border:1px solid var(--line); background:var(--card); font-size:12px; font-weight:500; color:var(--ink2); }
.fchip.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.fchip.bad:not(.on) { color:var(--stop); }
.fchip.warn:not(.on) { color:#B45309; }
.rv-list, .fd-list { display:grid; gap:4px; }
.rv-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line); border-left:3px solid #C3C6D6; }
.rv-row.bad { border-left-color:var(--stop); }
.rv-row.warn { border-left-color:#E07A1F; }
.rv-row > div { flex:1; min-width:0; display:grid; gap:1px; }
.rv-row b { font-size:12px; font-weight:600; }
.rv-row span { font-size:12px; color:var(--ink2); }
.rv-no { flex:none; min-width:34px; height:22px; display:grid; place-items:center; border-radius:6px; background:var(--side); border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--ink2); }
.imtable { width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px; }
.imtable th { text-align:left; font-weight:600; font-size:11.5px; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); }
.imtable td { padding:7px 8px; border-bottom:1px solid var(--line-hi); vertical-align:top; }
.imtable a { display:inline-flex; align-items:center; gap:4px; color:#1D6FB8; font-weight:600; text-decoration:none; }
.imtable a:hover { text-decoration:underline; }
.imtable tr.dup td { background:#FFF7E6; }
.imtable em { font-style:normal; font-size:10.5px; color:#B45309; background:#FDECC8; border-radius:4px; padding:0 4px; }
.imdesc { color:var(--muted); max-width:220px; }
.linkish { border:0; background:none; padding:0; color:var(--acc-ink); font-weight:600; }
.fd-form { display:grid; gap:8px; margin-bottom:8px; }
.fd-row { display:flex; align-items:center; gap:8px; }
.fd-row .inp { flex:1; }
.fd-hit { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:9px; cursor:pointer; }
.fd-hit:hover { background:var(--hover); }
.fd-where { flex:none; font-size:11px; color:var(--muted); min-width:52px; }
.fd-ctx { flex:1; min-width:0; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-ctx mark { background:#FFE58F; border-radius:3px; padding:0 1px; }
.overview { overflow:auto; background:var(--grad-main); }
.ov-bar { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 24px; background:var(--grad-head); border-bottom:1px solid var(--line); }
.ov-bar > b { font-size:15px; font-weight:600; }
.ov-body { padding:8px 24px 60px; }
.ov-sec { display:flex; align-items:center; gap:8px; margin:22px 0 10px; }
.ov-sec .no { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--grad-brand); color:#fff; font-weight:600; font-size:11.5px; }
.ov-sec b { font-size:14px; font-weight:600; }
.ov-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(var(--ovw,240px),1fr)); }
.ov-s .ov-grid { --ovw:170px; } .ov-l .ov-grid { --ovw:340px; }
.ov-card { display:grid; gap:6px; padding:8px; border-radius:12px; border:1px solid var(--line); background:var(--card); text-align:left; box-shadow:var(--sh1); }
.ov-card:hover { border-color:var(--b400); box-shadow:var(--sh2); }
.ov-card.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.ov-card .pv { border-radius:6px; }
.ov-meta { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.ov-meta > b { min-width:22px; height:20px; display:grid; place-items:center; border-radius:6px; background:var(--side); border:1px solid var(--line); color:var(--ink2); font-size:11px; }
.ov-meta .sc-cam { margin:0; }
.ov-warn { margin-left:auto; font-style:normal; min-width:18px; height:18px; border-radius:9px; background:var(--stop); color:#fff; font-size:10.5px; font-weight:600; display:grid; place-items:center; }
.ov-card p { margin:0; font-size:12px; color:var(--ink2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cd-stext.over { box-shadow:inset 0 0 0 1px #E8B4AC; background:#FFF8F6; }
.tyc .tyrule { display:inline-block; margin-top:2px; font-size:10.5px; color:var(--acc-ink); background:var(--acc-soft); border-radius:5px; padding:0 5px; }
.novid.nomedia { display:grid; gap:6px; place-items:center; padding:20px; text-align:center; color:#B9BCE0; }
.novid.nomedia b { color:#fff; font-size:13.5px; font-weight:600; }
.novid.nomedia span { font-size:11.5px; max-width:380px; line-height:1.55; }
.novid.nomedia svg.i { width:28px; height:28px; opacity:.7; }
.badge.est { border:0; background:#FDECC8; color:#9A6B12; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px; }
.badge.est:hover { background:#F7DFA8; }

/* 임시 음성 — 원고만 있을 때 가편 자리를 대신하는 소리 */
.vbox { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); display: grid; gap: 8px; }
.vbox .row { align-items: center; gap: 8px; }
.vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vrow > * { flex: 0 0 auto; }
.vrow .sel { width: auto; min-width: 128px; }
.vrow label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vrow .inp.num { width: 60px; }
.vbox em.free, .vbox em.cost { font-style: normal; font-size: 11px; margin-left: 5px; padding: 1px 6px; border-radius: 999px; }
.vbox em.free { background: #e7f6ec; color: #1a7f3c; }
.vbox em.cost { background: #fff3d6; color: #8a5a00; }

/* 문장 줄 — 장 안을 문장 단위로. 줄마다 시각 + 낱말 칩 */
.cd-lines { position: relative; display: grid; gap: 2px; padding-right: 26px; }
.ln { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: start;
  border-radius: 8px; padding: 2px 4px; }
.ln:hover { background: var(--b50); }
.ln.on { background: var(--b50); box-shadow: inset 0 0 0 1px var(--b400); }
.ln-t { border: 0; background: none; cursor: pointer; text-align: right; padding: 3px 0 0;
  font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; line-height: 1.35; }
.ln-t i { display: block; font-style: normal; font-size: 10px; color: var(--ink3, #9aa0ab); }
.ln-t:hover { color: var(--b700); }
.ln-w { display: flex; flex-wrap: wrap; gap: 2px 3px; min-width: 0; }
.ln-in { width: 100%; border: 1px solid var(--b400); border-radius: 6px; padding: 4px 6px;
  font: inherit; line-height: 1.5; resize: none; overflow: hidden; background: #fff; }
.ln-hint { grid-column: 1 / -1; font-size: 11px; color: var(--ink3, #9aa0ab); padding: 3px 0 0 70px; }
.ln-hint kbd { font-size: 10px; }

/* 자막(SRT) 만들기 */
.srt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }
.srt-grid label { display: grid; gap: 3px; font-size: 12px; color: var(--ink2); }
.srt-rows { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.srt-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid var(--line-s); font-size: 13px; }
.srt-row:last-child { border-bottom: 0; }
.srt-row time { font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.srt-row b { font-weight: 500; white-space: pre-wrap; }
.srt-row.over { background: var(--warn-s); }
.ta.doc.over { border-color: var(--b400); background: var(--b50); }

/* 담다 스토리보드 플랫폼 — 로그인 문 · 계정 · 자료함 */
.gate { min-height: 100vh; display: grid; place-items: center; background: var(--grad-main, var(--card2)); }
.gatebox { width: 340px; display: grid; gap: 10px; padding: 26px; border-radius: 16px;
  background: #fff; box-shadow: 0 10px 40px rgba(20,24,40,.12); }
.gate-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 6px; }
.gatebox label { display: grid; gap: 4px; font-size: 12px; color: var(--ink2); }
.mechip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--b50); color: var(--b800); font-size: 12px; font-weight: 600; }
.mechip i { font-style: normal; font-weight: 500; opacity: .7; font-size: 11px; }
.mechip button { border: 0; background: none; cursor: pointer; color: inherit; opacity: .55; padding: 2px; }
.mechip button:hover { opacity: 1; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.pchip.on { border-color: var(--b400); background: var(--b50); }
.pchip i { font-style: normal; opacity: .6; font-size: 11px; }
.h5 { font-size: 13px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.h5 .muted { font-weight: 500; font-size: 11.5px; }
.inp.mono { font-family: ui-monospace, monospace; font-size: 11.5px; }

/* 시각 자료 추가 — 사이트에서 찾은 사진 격자 (0.11.4) */
.valinks { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }


/* ───────── 0.11.5 하단 클립 칸 — 가로 전체 · 작은 카드 · 눌러서 크게
   (대표 2026-09-21: "하단 바를 다 쓰게", "AI 구성안은 더 작아도 됨 클릭하면 팝업 형태로 커지면서") */
.clippane .cp-body { display:flex; flex-direction:column; overflow:hidden; }
.cp-top { display:flex; align-items:center; gap:10px; padding:8px 14px 6px; flex:none; flex-wrap:wrap; }
.cp-acts { display:grid; grid-template-columns:repeat(3, 116px); gap:6px; flex:none; }   /* 셋은 늘 같은 크기(대표 2026-09-18) */
.cpbox { height:30px; padding:0 6px; text-align:center; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--line); border-radius:9px; background:var(--card); font-size:12px; font-weight:600; color:var(--ink2); white-space:nowrap; }
.cpbox:hover:not(:disabled) { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); }
.cpbox:disabled { opacity:.45; }
.clippane .pageinfo { border:0; background:none; padding:0; display:flex; align-items:center; gap:8px; flex:2 1 420px; min-width:0; }
.mfield { position:relative; display:flex; flex:1 1 180px; min-width:0; }
.mfield .inp { width:100%; padding-right:26px; }
.mx { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0; background:none; border-radius:50%; color:var(--muted); padding:0; display:grid; place-items:center; }
.mx:hover { background:var(--stop-s); color:var(--stop); }
.clippane .cp-body #aiPane { flex:1 1 auto; min-height:0; overflow:auto; }
.clippane #aiPane .ai-in { padding:4px 14px 12px; }

/* 자료함 — 갈래 없이 올린 목록만 (0.11.5) */
.boxdrop { display:flex; align-items:center; justify-content:center; gap:8px; height:78px; border:1.5px dashed var(--line-s); border-radius:12px; color:var(--ink2); font-size:13px; cursor:pointer; background:var(--side); }
.boxdrop:hover, .boxdrop.over { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); }
.boxdrop.off { cursor:default; border-style:solid; color:var(--muted); }
.boxlist { width:100%; border-collapse:collapse; margin-top:10px; }
.boxlist td { padding:7px 8px; border-bottom:1px solid var(--line-hi); font-size:13px; vertical-align:middle; }

/* 과정에서 쓸 자막 유형 고르기 (0.11.5) */
.tychips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:4px; }
.tychip { height:24px; padding:0 9px; border:1px solid var(--line); border-radius:99px; background:var(--card); font-size:11.5px; color:var(--ink2); }
.tychip:hover { border-color:var(--acc); }
.tychip.on { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); font-weight:600; }


/* ───────── 0.11.6 하단 — 팝업 없이 카드에서 바로 보고 바로 적용
   (대표 2026-09-21: "박스가 커서 팝업은 필요 없겠다 · 클릭전에 내용을 잘 볼 수 있게",
    "AI 에게 다른 시안 요청은 왼쪽으로 옮기고 세로박스형으로") */
.cp-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 14px 6px; flex:none; }
.cp-chips:empty { display:none; }
.clippane #aiCur { display:flex !important; gap:12px; align-items:stretch; flex-wrap:wrap; }
.clippane #aiCur > .hintcard { flex:1 1 100%; margin-bottom:0; }
.clippane #aiCur > .sugs { flex:1 1 0; }
.aiask { flex:0 0 132px; display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.askbtn { flex:1; min-height:120px; display:grid; gap:4px; place-content:center; justify-items:center; text-align:center;
  border:1px solid var(--b300); border-radius:12px; background:var(--grad-card); color:var(--acc-ink); padding:10px 8px; }
.askbtn:hover:not(:disabled) { border-color:var(--acc); background:var(--acc-soft); box-shadow:var(--sh2); }
.askbtn:disabled { opacity:.5; }
.askbtn b { font-size:13px; font-weight:700; line-height:1.35; }
.askbtn span { font-size:10.5px; color:var(--muted); }
.askbtn .i { width:22px; height:22px; }
.sugs { flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; align-content:start; }
.sug { display:grid; gap:5px; padding:7px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-align:left; cursor:pointer; align-content:start; }
.sug:hover { border-color:var(--acc); box-shadow:var(--sh2); }
.sug.cur { border-color:var(--acc); background:var(--b50); }
.sug .pv-wrap { display:block; border-radius:8px; overflow:hidden; }
.sug .lab { display:flex; align-items:center; gap:5px; min-width:0; }
.sug .lab b { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug .src { font-size:10px; font-style:normal; font-weight:500; padding:0 6px; border-radius:99px; background:var(--hover); color:var(--muted); }
.sug .src.ai { background:var(--acc-soft); color:var(--acc-ink); }
.sug .plus { margin-left:auto; font-style:normal; font-size:10.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:1px 7px; }
.sug .plus:hover { border-color:var(--acc); color:var(--acc-ink); background:var(--acc-soft); }
.sug .lines { display:grid; gap:2px; font-size:11.5px; color:var(--ink2); line-height:1.45; }
.sug .lines em { font-style:normal; font-weight:600; color:var(--acc-ink); margin-right:4px; }
.sug .lines span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


/* ───────── 시각 자료 찾기 — 썸네일이 칸을 넘치지 않게(그림을 절대 배치로 고정)
   + 마우스를 올리면 큰 미리보기가 뜬다 (대표 2026-09-21: "마우스 올리면 조금 더 커지면서") */
.vabox { display:grid; gap:8px; width:min(680px,94vw); }
/* 떠 있는 큰 미리보기 — 창 밖으로 잘리지 않게 body 에 붙인다 */
.imgzoom { position:fixed; z-index:60; width:380px; max-width:92vw; border-radius:14px; overflow:hidden;
  border:1px solid var(--pop-line); background:var(--card); box-shadow:var(--sh-pop); pointer-events:none; }
.imgzoom img { display:block; width:100%; max-height:300px; object-fit:contain; background:#111; }
.imgzoom b { display:block; font-size:11.5px; font-weight:600; padding:6px 10px 2px; }
.imgzoom span { display:block; font-size:10.5px; color:var(--muted); padding:0 10px 8px; }

/* 여러 클립 고르기 → Enter 로 합치기 (0.11.8) */
.sc-clip.pick { border-color:var(--acc); background:var(--b50); box-shadow:0 0 0 1px var(--acc) inset; }
.pickbar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:55; display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:14px; border:1px solid var(--pop-line); background:var(--grad-pop); box-shadow:var(--sh-pop); }
.pickbar b { font-size:12.5px; }
.pickbar kbd { font:inherit; font-size:10px; font-weight:600; background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:5px; padding:0 4px; margin-left:4px; }

/* 차시 수 · 영상 수 + / − (0.11.9) — 대표 2026-09-21 */
.stepper { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:99px; padding:1px; background:var(--card); margin:0 6px; }
.stepper .ibtn { width:24px; height:24px; border-radius:50%; font-size:15px; font-weight:600; line-height:1; color:var(--ink2); }
.stepper .ibtn:hover:not(:disabled) { background:var(--acc-soft); color:var(--acc-ink); }
.stepper .ibtn:disabled { opacity:.35; }
.stepper b { font-size:12px; font-weight:600; min-width:44px; text-align:center; }
.stepper.sm b { min-width:40px; font-size:11.5px; }
.utable tr.ugrp td { padding-top:8px; border-bottom:0; }
.utable tr.upart td { background:var(--side); }
.utable tr.upart.on td { background:var(--b50); }
.ptag { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--acc-soft); color:var(--acc-ink); font-size:10.5px; font-weight:700; margin-right:4px; }
.pname { width:130px; }
/* 머리줄 — 같은 차시의 영상 사이 오가기 */
.partsw { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:9px; background:var(--card); margin-left:4px; }
.partsw button { height:24px; padding:0 10px; border:0; border-radius:7px; background:none; font-size:12px; color:var(--ink2); }
.partsw button.on { background:var(--acc); color:#fff; font-weight:600; }
.partsw button:hover:not(.on) { background:var(--acc-soft); color:var(--acc-ink); }
/* 자료함 아래 특이사항 */
.notebox { margin-top:16px; display:grid; gap:6px; }
.notebox h4 { margin:0; font-size:13px; }
.notebox .ta { width:100%; resize:vertical; min-height:110px; }
/* 차시 목록 한 줄로 촘촘하게 (0.11.9) */
.utable td { vertical-align:middle; padding:5px 10px; }
.utable .umain { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; }
.utable .umain .uname { flex:1 1 260px; min-width:0; font-weight:600; }
.utable .umain .muted { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.utable .umain .stepper { flex:none; margin:0; }
.utable .uno { width:56px; white-space:nowrap; font-weight:600; }
.utable .uwhen { white-space:nowrap; }
.utable tr.upart .umain { padding-left:18px; }

/* 주차 줄 (0.11.9) */
.utable tr.uweek td { background:var(--b50); border-top:1px solid var(--line); padding:6px 10px; }
.utable tr.uweek b { font-size:12.5px; color:var(--acc-ink); margin-right:6px; }
.utable tr.uweek + tr td { border-top:0; }

/* 시각 자료 — 사이트마다 한 줄(가로로 넘겨 보기). 칸 크기를 **고정**해 어느 브라우저에서도 겹치지 않는다
   (0.11.10 · 대표 2026-09-21: 줄별로 사이트, 썸네일이 겹쳐 보이던 것) */
.vagrid { display:grid; gap:8px; max-height:420px; overflow:auto; padding:2px; }
.vagrid:empty { display:none; }
.varow { display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; align-items:center; }
.vasite { display:grid; gap:1px; }
.vasite b { font-size:12px; font-weight:700; color:var(--ink); }
.vasite span { font-size:10.5px; color:var(--muted); }
.vastrip { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; min-width:0; }
.vaimg { position:relative; flex:0 0 150px; width:150px; height:112px; display:block; padding:0; border:2px solid var(--line);
  border-radius:10px; overflow:hidden; background:var(--line-hi); cursor:zoom-in; }
.vaimg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vaimg span { position:absolute; left:0; right:0; bottom:0; z-index:2; font-size:10px; padding:2px 6px;
  background:rgba(0,0,0,.58); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.vaimg:hover { border-color:var(--acc); }
.vaimg.on { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft); }
.vaimg.busy { opacity:.55; }
.varow.link .vastrip { overflow:visible; }
.valink { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px dashed var(--line-s); border-radius:10px;
  font-size:12px; color:var(--acc-ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.valink:hover { border-color:var(--acc); background:var(--acc-soft); }
.valink em { font-style:normal; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.vabox { width:min(760px,94vw); }

/* 사이트에서 고른 사진 끌어다 놓기 (0.11.15) */
.vadrop{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 14px;border:1.5px dashed var(--line-s);border-radius:12px;background:var(--card);transition:.15s}
.vadrop.over{border-color:var(--acc);background:var(--acc-soft)}
.vadrop.busy{opacity:.6;pointer-events:none}
.vadrop.got{border-style:solid}
.vadrop-msg{font-size:13px;color:var(--ink2);line-height:1.5}
.vadrop-msg b{color:var(--ink)}
.vadrop-msg span{display:block;font-size:12px;opacity:.8}
.vadrop-prev{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.vadrop-prev img{width:120px;height:80px;object-fit:cover;border-radius:8px;display:block}
.vadrop-prev span{font-size:11px;color:var(--ink2)}

/* ── 협업 포털 문 (0.11.16) — 재무관리 로그인 두 칸 배치를 담다 토큰으로 */
.portal{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.portal-story{background:var(--b900);background-image:linear-gradient(160deg,var(--b800) 0%,var(--b900) 55%,var(--b950) 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px 64px;overflow:hidden}
.portal-brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:24px;font-weight:700;text-decoration:none}
.portal-brand span{background:#fff;color:var(--b700);border-radius:12px;width:42px;height:42px;text-align:center;font-size:28px;line-height:40px}
.portal .eyebrow{font-size:12px;letter-spacing:2px;color:var(--b300);margin:0;font-weight:600}
.portal-card .eyebrow{color:var(--b500)}
.portal-story h1{font-size:clamp(34px,4.2vw,58px);line-height:1.25;letter-spacing:-2px;margin:22px 0}
.portal-desc{color:var(--b200);font-size:16px;line-height:1.9;margin:0}
.portal-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.portal-steps li{display:flex;align-items:center;gap:10px;color:var(--b100);font-size:14px}
.portal-steps b{width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:12px}
.portal-lines{height:120px;display:flex;align-items:flex-end;gap:16px;margin-top:40px;opacity:.6}
.portal-lines span{width:26px;background:var(--b500);border-radius:5px 5px 0 0;height:32%}
.portal-lines span:nth-child(2){height:49%}.portal-lines span:nth-child(3){height:41%}.portal-lines span:nth-child(4){height:65%}
.portal-lines span:nth-child(5){height:79%}.portal-lines span:nth-child(6){height:100%;background:var(--b300)}
.portal-story>small{color:var(--b300);font-size:13px}
.portal-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:64px 38px 96px}
.portal-card{width:100%;max-width:370px}
.portal-lock{background:var(--b100);width:56px;height:56px;border-radius:17px;display:grid;place-items:center;color:var(--b600);margin-bottom:28px}
.portal-lock .i{width:24px;height:24px}
.portal-card h2{font-size:29px;letter-spacing:-1px;line-height:1.3;margin:8px 0 0}
.portal-copy{color:var(--muted);font-size:15px;line-height:1.85;margin:14px 0 0}
.portal-form{display:grid;gap:12px;margin-top:22px}
.portal-form label{display:grid;gap:6px;font-size:13px;color:var(--ink2)}
.portal-form .inp{height:42px;font-size:15px;padding:0 12px}
.portal-button{margin-top:10px;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--b600);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.portal-button:hover{background:var(--b700)}
.portal-security{display:flex;gap:10px;color:var(--muted);padding:22px 0;margin-top:22px;border-top:1px solid var(--line)}
.portal-security .i{flex-shrink:0;margin-top:3px}
.portal-security p{font-size:12.5px;line-height:1.8;margin:0}
.portal-bottom{position:absolute;bottom:26px;font-size:11px;letter-spacing:.5px;color:var(--muted)}
@media(max-width:760px){.portal{grid-template-columns:1fr}.portal-story{padding:24px 28px;min-height:200px}.portal-story h1{font-size:30px;margin:12px 0}
 .portal-story h1 br{display:none}.portal-desc,.portal-lines,.portal-steps,.portal-story>small{display:none}.portal-panel{padding:34px 24px 80px}.portal-lock{display:none}.portal-card h2{font-size:25px}}

/* ── 홈 = 프로젝트 목록 (0.11.16) */
.titlebtn.flat { cursor:default; }
.titlebtn.flat .caret { display:none; }
.phome .phead, .acc .phead { display:flex; align-items:flex-end; gap:12px; }
.acc h2 { margin:0; font-size:22px; letter-spacing:-.5px; } .acc .phead p { margin:4px 0 0; }
.phome h2 { margin:0; font-size:22px; letter-spacing:-.5px; }
.phome .phead p { margin:4px 0 0; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.pcard { display:grid; gap:9px; text-align:left; padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card); box-shadow:var(--sh1); cursor:pointer; font-family:inherit; color:inherit; }
.pcard:hover { border-color:var(--b300); box-shadow:var(--sh2); }
.pc-top { display:flex; align-items:center; gap:8px; }
.pc-top b { font-size:15.5px; }
.due { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--warn); background:var(--warn-s); border-radius:10px; padding:2px 8px; white-space:nowrap; }
.pc-nums { display:flex; gap:14px; font-size:12px; color:var(--muted); }
.pc-nums b { font-size:17px; color:var(--ink); margin-right:3px; }
.pc-bar { display:flex; height:6px; border-radius:4px; overflow:hidden; background:#EEF0F6; gap:1px; }
.pc-bar i.s0 { background:#DDE0EC; } .pc-bar i.s1 { background:#8FA6F2; } .pc-bar i.s2 { background:#F0C46E; } .pc-bar i.s3 { background:#86C997; } .pc-bar i.s4 { background:#2A7D3C; }
.pnew { border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:16px; box-shadow:var(--sh1); }
.pn { display:grid; grid-template-columns:minmax(320px,1fr) 1.25fr; gap:18px; }
.pn-form { display:grid; gap:10px; align-content:start; }
.pn-form label { display:grid; gap:4px; font-size:12px; color:var(--ink2); }
.pn-lab { font-size:12px; color:var(--ink2); margin-top:4px; }
.pn-presets { display:flex; flex-wrap:wrap; gap:6px; }
.preset { height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--line-s); background:var(--card); font:inherit; font-size:12.5px; color:var(--ink2); cursor:pointer; }
.preset.on { background:var(--b600); border-color:var(--b600); color:#fff; }
.preset.add { border-style:dashed; color:var(--b600); display:inline-flex; align-items:center; gap:4px; }
.preset.add.editing { border-style:solid; padding:0 4px 0 4px; }
.preset.add.editing .inp { height:26px; width:150px; }
.pn-prev { border:1px solid var(--line-hi); border-radius:var(--r-sm); background:var(--card2); padding:12px; display:grid; gap:10px; align-content:start; min-height:220px; }
.pv-head { display:flex; align-items:center; gap:8px; }
.pv-slides { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pv-slides figure { margin:0; display:grid; gap:4px; }
.pv-slides figcaption { font-size:11px; color:var(--muted); text-align:center; }
.pv-row { display:flex; gap:8px; font-size:12px; align-items:baseline; }
.pv-k { flex:none; width:64px; color:var(--muted); }
.pv-row em { font-style:normal; display:inline-block; margin:0 4px 4px 0; padding:1px 8px; border-radius:9px; background:var(--b50); border:1px solid var(--line-hi); color:var(--ink2); }
/* 과정 화면 머리 · 과업 안내 */
.cbar { display:flex; align-items:center; gap:8px; }
.notice { border:1px solid var(--b200); background:var(--b50); border-radius:var(--r-md); padding:12px 14px; display:grid; gap:6px; }
.notice.empty { border-style:dashed; background:transparent; display:flex; align-items:center; gap:6px; }
.nt-head { display:flex; align-items:center; gap:10px; }
.nt-head .due { margin-left:0; }
.nt-body { font-size:13px; line-height:1.7; color:var(--ink2); }
.gchip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; background:#EEF0F6; color:#6B7090; white-space:nowrap; }
.gchip.on { background:var(--ok-s); color:var(--ok); }
.units-page.ro .stepper button, .units-page.ro [data-cset], .units-page.ro .uname, .units-page.ro .pname, .units-page.ro .uslides input { pointer-events:none; }
.units-page.ro .stepper button, .units-page.ro [data-cset] { display:none; }
.units-page.ro .uname, .units-page.ro .pname { border-color:transparent; background:transparent; }
/* 과업 공유 창 */
.modal.share .modal-body { padding:0; }
.sh { display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(320px,1fr); grid-template-rows:auto auto; gap:14px; padding:16px; }
.sh-units { grid-row:span 2; display:grid; grid-template-rows:auto 1fr; min-height:0; }
.sh-h { display:flex; align-items:center; gap:8px; margin:2px 0 8px; font-size:13px; }
.sh-list { border:1px solid var(--line); border-radius:var(--r-sm); max-height:56vh; overflow:auto; background:var(--card); }
.sh-wk { position:sticky; top:0; background:var(--card2); font-size:11.5px; font-weight:700; color:var(--muted); padding:5px 10px; border-bottom:1px solid var(--line-hi); }
.sh-u { display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--line-hi); font-size:12.5px; cursor:pointer; }
.sh-u.on { background:var(--b50); }
.sh-u .nm i { font-style:normal; margin-left:4px; }
.sh-u .who em { font-style:normal; font-size:11px; padding:1px 6px; border-radius:8px; background:var(--b100); color:var(--b700); margin-left:3px; }
.sh-side { display:grid; gap:12px; align-content:start; }
.sh-card { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); padding:12px; display:grid; gap:8px; }
.sh-card label { font-size:12px; color:var(--ink2); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.sh-perm { display:grid !important; grid-template-columns:18px auto; column-gap:6px; align-items:center; padding:7px 9px; border:1px solid var(--line-hi); border-radius:9px; }
.sh-perm span { grid-column:2; font-size:11.5px; color:var(--muted); }
.sh-inv { display:flex; gap:10px; flex-wrap:wrap; }
.sh-inv .inp.num { width:64px; }
.sh-status { grid-column:1 / -1; }
.sh-tbl { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:12px; }
.sh-tbl td { padding:7px 8px; border-bottom:1px solid var(--line-hi); }
.sh-tbl td.end { text-align:right; white-space:nowrap; }
.sh-log { max-height:180px; overflow:auto; font-size:12px; display:grid; gap:4px; }
/* 도식화 · 이미지 추천 */
.hintcard { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; margin-bottom:8px; border:1px solid var(--b200); background:var(--b50); font-size:12.5px; }
.hintcard.img { border-color:#F5D9A5; background:#FFF8EA; }
.hintcard .hk { font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.hintcard .ht { flex:1; color:var(--ink2); }
.chip.hint { font-size:11px; }
.chip.hint.dia { background:var(--b100); color:var(--b700); border-color:var(--b200); }
.chip.hint.img { background:#FFF1D9; color:#9A6212; border-color:#F5D9A5; }
#askReview.on { background:var(--warn-s); color:var(--warn); border-color:#F5D9A5; }
@media (max-width:900px){ .pn, .sh { grid-template-columns:1fr; } .sh-units { grid-row:auto; } }

.cd-edhint:empty { display:none; }
.linkbtn { border:0; background:none; padding:0; color:var(--b600); font:inherit; text-decoration:underline; cursor:pointer; }
.sh-perm.off { opacity:.55; }

/* ── 계정 한 페이지 (0.11.17) — 협업 포털 전체 계정 표 차용 */
.acc-bar { display:flex; align-items:center; gap:10px; }
.acc-q { display:flex; align-items:center; gap:6px; border:1px solid var(--line-s); border-radius:9px; background:var(--card); padding:0 8px; }
.acc-q .inp { border:0; height:32px; width:220px; padding:0; background:transparent; }
.acc-tbl { border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--sh1); overflow:hidden; }
.acc-h, .acc-r { display:grid; grid-template-columns:minmax(180px,1.1fr) 100px minmax(220px,2fr) 140px 150px 170px; gap:12px; align-items:center; padding:10px 16px; }
.acc-h { background:var(--card2); border-bottom:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--muted); }
.acc-r { border-bottom:1px solid var(--line-hi); font-size:13px; }
.acc-r:last-child { border-bottom:0; }
.acc-r:hover { background:var(--b50); }
.acc-r.off { opacity:.55; }
.acc-r .nm { display:flex; align-items:center; gap:10px; min-width:0; }
.acc-r .nm > span { display:grid; min-width:0; }
.acc-r .nm em { font-style:normal; font-size:11.5px; color:var(--muted); }
.av { width:30px; height:30px; border-radius:50%; background:var(--b100); color:var(--b700); display:grid; place-items:center; font-style:normal; font-weight:700; font-size:13px; flex:none; }
.av.out { background:#FFF1D9; color:#9A6212; }
.rtag { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:10px; background:var(--b100); color:var(--b700); white-space:nowrap; }
.rtag.adm { background:var(--b700); color:#fff; }
.rtag.out { background:#FFF1D9; color:#9A6212; }
.acc-r .work { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.acc-r .work .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.st { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; background:#EEF0F6; color:#6B7090; margin-right:4px; white-space:nowrap; }
.st.on { background:var(--ok-s); color:var(--ok); }
.st.warn { background:var(--warn-s); color:var(--warn); }
.acc-r .end, .acc-ir .end { text-align:right; white-space:nowrap; }
.acc-inv { border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:12px 16px; }
.acc-ir { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 170px; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line-hi); font-size:13px; }
.acc-form { display:grid; gap:10px; width:340px; }
.acc-form label { display:grid; gap:4px; font-size:12px; color:var(--ink2); }
.acc-form label.chk { display:flex; align-items:center; gap:6px; }
.acc-form .row label { flex:1; }
@media (max-width:900px){ .acc-h { display:none; } .acc-r { grid-template-columns:1fr auto; } .acc-r > span:nth-child(n+3):not(.end) { grid-column:1/-1; } }
.acc-bar .sel { width:auto; }
.phome .phead .btn, .acc .phead .btn { flex:none; }

/* ── 외주 접근 권한 (0.11.18) */
.modal.access { width:min(880px,96vw); }
.ax-login { border:1px solid var(--b200); background:var(--b50); border-radius:var(--r-md); padding:12px 14px; display:grid; gap:8px; margin-bottom:14px; }
.ax-login pre { margin:0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:13px; line-height:1.7; white-space:pre-wrap; user-select:all; }
/* 계정 창 — 협업 포털 [새 계정]·[계정 수정] 과 같은 모양 (대표 2026-09-23) */
.modal.user { width:min(820px,94vw); }
.uf { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.uf label { display:grid; gap:6px; font-size:12.5px; color:var(--ink2); }
.ubox { border:1px solid var(--line); background:var(--card2); border-radius:var(--r-md); padding:12px 14px; margin-top:14px; }
.ub-h { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.urow { display:flex; align-items:center; gap:10px; margin-top:12px; }
.urow > span { display:grid; gap:2px; font-size:13px; }
.urow em { font-style:normal; }
.urow2 { display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap; margin-bottom:10px; }
.urow2 .sw + span { margin-right:10px; }
.ugs { display:grid; gap:10px; max-height:40vh; overflow-y:auto; }
.ug { border:1px solid var(--line); background:var(--card); border-radius:var(--r-md); padding:10px 12px; }
.ug-h { display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:8px; }
.ug-b { display:flex; flex-wrap:wrap; gap:8px 18px; }
.uu { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink2); cursor:pointer; }
.uu.on { color:var(--ink); }
.uf-foot { margin-top:16px; align-items:center; }
.utable .uend { white-space:nowrap; display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.utable .uend .ibtn { opacity:.5; transition:opacity .12s, color .12s; color:var(--muted); }
.utable tr:hover .uend .ibtn, .utable .uend .ibtn:focus-visible { opacity:1; }
.utable .uend .ibtn:hover { color:var(--danger, #C2413B); }
.sw { position:relative; width:36px; height:20px; border-radius:10px; border:0; background:#D5DAE8; cursor:pointer; padding:0; flex:none; transition:background .15s; }
.sw i { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
.sw.all { background:var(--b600); } .sw.all i { left:18px; }
.sw.some { background:var(--b300); } .sw.some i { left:10px; }
.sw:disabled { opacity:.4; cursor:default; }
.acc-form .row .inp.grow { flex:1; }