@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
/* =====================================================================
   🎬 더빙N스피킹 (dns/dns.css)
   ===================================================================== */
.dns, .dns-dlg-wrap, .dns-toasts {
	--ink: #f4f4ff; --sub: #b4b4d8; --mute: #74749a; --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .18);
	--card: #1c1c38; --soft: #16162d; --soft2: #24244a; --track: #2a2a4d; --pinkbg: rgba(255, 95, 162, .13);
	--acc: #ff5fa2; --acc2: #ffd43b; --cyan: #3dd6ff; --violet: #8b5cf6; --lime: #a3e635;
	--ok: #34d399; --warn: #ffd43b; --dan: #ff5252; --rec: #ff3b6b;
	--stage: #05050d; --r: 16px;
	--fun: "Jua", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
	color: var(--ink); box-sizing: border-box;
}
.dns *, .dns-dlg-wrap *, .dns-toasts * { box-sizing:border-box; }
.dns-hidden { display:none !important; }
.dns-sheet img { max-width:240px; border-radius:8px; }

/* ---------- 버튼 · 입력 ---------- */
.dns-btn {
	display:inline-flex; align-items:center; justify-content:center; gap:4px; height:36px; padding:0 14px; border-radius:10px;
	border:1px solid var(--line); background:var(--card); color:var(--ink); font:700 14px/1 inherit; font-family:inherit; cursor:pointer; white-space:nowrap;
	transition:background .15s, border-color .15s, transform .05s;
}
.dns-btn:hover { border-color:var(--line2); background:var(--soft); }
.dns-btn:active { transform:scale(.97); }
.dns-btn:disabled { opacity:.45; cursor:default; transform:none; }
.dns-btn.sm { height:30px; padding:0 10px; font-size:13px; border-radius:8px; }
.dns-btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.dns-btn.primary:hover { background:#db2777; }
.dns-btn.danger { background:var(--dan); border-color:var(--dan); color:#fff; }
.dns-btn.ghost { background:transparent; border-color:transparent; }
.dns-btn.ghost:hover { background:rgba(148, 163, 184, .15); }
.dns-btn.on { background:var(--pinkbg); border-color:var(--acc); color:#ff8cc0; }
.dns-in { height:34px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:14px inherit; font-family:inherit; min-width:0; }
.dns-in:focus { outline:2px solid rgba(236, 72, 153, .35); border-color:var(--acc); }
textarea.dns-in { height:auto; padding:8px 10px; width:100%; resize:vertical; line-height:1.5; }
.dns-in.time { width:84px; text-align:center; font-variant-numeric:tabular-nums; }
.dns-in.bad { border-color:var(--dan); background:rgba(255,82,82,.14); }
.dns-seg { display:inline-flex; padding:2px; gap:2px; border:1px solid var(--line); border-radius:9px; background:var(--soft); }
.dns-seg button { border:0; background:transparent; height:26px; padding:0 8px; border-radius:7px; font:700 12px inherit; font-family:inherit; color:var(--sub); cursor:pointer; }
.dns-seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0, 0, 0, .12); }
.dns-chk { display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.45; cursor:pointer; }
.dns-chk input { margin-top:2px; accent-color:var(--acc); }
.dns-empty { display:flex; align-items:center; justify-content:center; text-align:center; height:100%; min-height:120px; padding:20px; color:var(--mute); font-size:15px; line-height:1.6; }
.dns-empty.sm { min-height:0; font-size:14px; padding:18px 12px; }
.dns-tip { padding:10px 12px; border-radius:10px; background:var(--pinkbg); color:#ffc2dc; font-size:13.5px; line-height:1.55; }
.dns-warn { color:#ffd97a; }
.dns-pre { margin:0; max-height:50vh; overflow:auto; padding:12px; border-radius:10px; background:#0f172a; color:#e2e8f0; font:12.5px/1.6 Consolas, "D2Coding", monospace; white-space:pre-wrap; word-break:break-all; }
.dns-pre.sm { max-height:200px; font-size:11px; }

/* ---------- 알림 ---------- */
.dns-toasts { position:fixed; z-index:100000; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(560px, calc(100% - 24px)); }
.dns-toast { pointer-events:auto; padding:11px 16px; border-radius:12px; background:#111827; color:#f9fafb; font-size:14px; line-height:1.5; box-shadow:0 10px 30px rgba(0, 0, 0, .25); animation:dnsIn .25s ease; max-width:100%; }
.dns-toast.warn { background:#7c2d12; }
.dns-toast.out { opacity:0; transform:translateY(6px); transition:.35s; }
.dns-toast b { color:#fde68a; }
@keyframes dnsIn { from { opacity:0; transform:translateY(8px); } }

/* ---------- 대화상자 ---------- */
.dns-dlg-wrap { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15, 23, 42, .55); backdrop-filter:blur(2px); }
.dns-dlg { width:min(420px, 100%); max-height:calc(100vh - 32px); overflow:auto; padding:22px 22px 18px; border-radius:18px; background:var(--card); box-shadow:0 30px 80px rgba(0, 0, 0, .3); animation:dnsIn .2s ease; }
.dns-dlg.wide { width:min(640px, 100%); }
.dns-dlg-icon { font-size:34px; line-height:1; margin-bottom:8px; }
.dns-dlg-title { font-size:19px; font-weight:800; margin-bottom:8px; }
.dns-dlg-text { font-size:14.5px; line-height:1.65; color:var(--sub); margin-bottom:12px; }
.dns-dlg-text code { background:var(--soft); padding:1px 6px; border-radius:5px; }
.dns-dlg-body { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.dns-dlg-body .dns-in { width:100%; }
.dns-dlg-btns { display:flex; gap:8px; justify-content:flex-end; }
.dns-help { margin:0; padding-left:20px; line-height:1.9; }
.dns-choice { display:flex; gap:8px; flex-wrap:wrap; }
.dns-choice label { flex:1; min-width:160px; display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-weight:700; font-size:14px; }
.dns-choice input { accent-color:var(--acc); }
.dns-guest { display:flex; gap:8px; }

/* =====================================================================
   🎞 글쓰기: 대본 만들기
   ===================================================================== */
.dns-ed { margin:14px 0; padding:16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, var(--card), #fdf8fb); }
.dns-ed-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:12px; }
.dns-ed-head b { font-size:18px; }
.dns-ed-head span { color:var(--sub); font-size:13.5px; flex:1; }
.dns-ed-url { display:flex; gap:8px; margin-bottom:12px; }
.dns-ed-url .dns-in { flex:1; height:40px; font-size:15px; }
.dns-ed-url .dns-btn { height:40px; }
.dns-ed-main { display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:14px; }
.dns-ed-video { position:relative; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:var(--stage); }
.dns-ed-yt, .dns-ed-yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.dns-ed-bar, .dns-ed-range { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:13.5px; }
.dns-clock { font:800 18px/1 Consolas, monospace; min-width:96px; color:var(--acc); }
.dns-ed-range span { font-weight:700; }
.dns-ed-range small { color:var(--sub); }
.dns-ed-tap { display:flex; gap:10px; align-items:stretch; margin-top:12px; flex-wrap:wrap; }
.dns-tapbtn {
	flex:1 1 260px; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; min-height:72px; padding:10px;
	border:2px dashed var(--acc); border-radius:14px; background:var(--card); color:#ff8cc0; cursor:pointer; user-select:none; touch-action:none; font-family:inherit;
}
.dns-tapbtn b { font-size:17px; }
.dns-tapbtn small { color:var(--sub); }
.dns-tapbtn.down { background:var(--rec); border-style:solid; border-color:var(--rec); color:#fff; }
.dns-tapbtn.down small { color:#ffe4e6; }
.dns-ed-cur { display:flex; flex-direction:column; gap:6px; justify-content:center; font-size:13px; color:var(--sub); }
.dns-ed-cur small { color:#ffd97a; max-width:220px; }
.dns-ed-side { display:flex; flex-direction:column; gap:10px; }
.dns-ed-box { padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.dns-ed-box .dns-in { width:100%; }
.dns-ed-box.tools { display:flex; flex-direction:column; gap:6px; }
.dns-ed-boxh { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:14px; margin-bottom:8px; }
.dns-roles { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.dns-roles li { display:flex; align-items:center; gap:4px; padding:3px 4px; border-radius:8px; }
.dns-roles li.on { background:var(--pinkbg); outline:1px solid rgba(255,95,162,.4); }
.dns-roles .dot { width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; flex:0 0 auto; }
.dns-roles .nm { flex:1; text-align:left; border:0; background:none; font:700 14px inherit; font-family:inherit; cursor:pointer; color:var(--ink); padding:4px; }
.dns-roles .nm small { color:var(--mute); font-weight:400; }
.dns-roles kbd { font:11px Consolas, monospace; padding:1px 5px; border-radius:4px; background:var(--soft); border:1px solid var(--line); color:var(--sub); }
.dns-roles .x { border:0; background:none; color:var(--mute); cursor:pointer; padding:4px; }
.dns-ed-cues { margin-top:14px; }
.dns-ed-cuesh { display:flex; gap:10px; align-items:baseline; margin-bottom:8px; flex-wrap:wrap; }
.dns-ed-cuesh em { font-style:normal; color:var(--acc); }
.dns-ed-cuesh small { color:var(--mute); }
.dns-cue-list { display:flex; flex-direction:column; gap:6px; max-height:460px; overflow:auto; margin-bottom:8px; padding-right:2px; }
.dns-cue { display:flex; gap:5px; align-items:center; padding:6px 8px; border:1px solid var(--line); border-left:5px solid var(--rc); border-radius:10px; background:var(--card); }
.dns-cue.sel { box-shadow:0 0 0 2px rgba(236, 72, 153, .35); }
.dns-cue.pending { background:rgba(255,212,59,.10); border-style:dashed; border-left-style:solid; }
.dns-cue.flash { animation:dnsFlash 1s ease; }
@keyframes dnsFlash { from { background:rgba(255,95,162,.22); } }
.dns-cue .no { width:22px; text-align:right; color:var(--mute); font-size:12px; flex:0 0 auto; }
.dns-cue i { color:var(--mute); font-style:normal; }
.dns-cue .role { width:110px; flex:0 0 auto; }
.dns-cue .text { flex:2 1 160px; }
.dns-cue .tr { flex:1 1 110px; }
.dns-memo-label { margin:18px 0 6px; font-weight:800; }
.dns-memo-label small { font-weight:400; color:var(--sub); margin-left:6px; }

/* =====================================================================
   🎬 스튜디오 (읽기)
   ===================================================================== */
.dns-studio { position:relative; margin:6px 0 22px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:0 8px 30px rgba(15, 23, 42, .06); overflow:hidden; }
.dns-top { display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, var(--card), var(--pinkbg)); flex-wrap:wrap; }
.dns-brand { display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.dns-brand b { font-size:17px; letter-spacing:-.2px; }
.dns-brand small { color:var(--sub); font-size:12.5px; }
.dns-modes { display:inline-flex; padding:3px; gap:3px; background:var(--soft2); border-radius:12px; }
.dns-modes button { border:0; background:transparent; height:36px; padding:0 14px; border-radius:9px; font:800 14px inherit; font-family:inherit; color:var(--sub); cursor:pointer; white-space:nowrap; }
.dns-modes button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0, 0, 0, .12); }
.dns-modes button[data-mode="dub"].on { color:var(--rec); }
.dns-modes em { font-style:normal; display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--acc2); color:#fff; font-size:11px; line-height:18px; }
.dns-modes em:empty { display:none; }
.dns-body { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(300px, 1fr); }
.dns-studio.narrow .dns-body { grid-template-columns:1fr; }
.dns-col { padding:12px; min-width:0; }
.dns-side { display:flex; flex-direction:column; gap:10px; padding:12px; border-left:1px solid var(--line); background:var(--soft); min-width:0; max-height:720px; }
.dns-studio.narrow .dns-side { border-left:0; border-top:1px solid var(--line); max-height:none; }

/* 무대 */
.dns-stage { position:relative; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:var(--stage); }
.dns-yt, .dns-yt iframe, .dns-yt > div { position:absolute; inset:0; width:100%; height:100%; border:0; }
.dns-yt .dns-empty { color:#cbd5e1; }
.dns-shield { position:absolute; inset:0; cursor:pointer; }
.dns-bigplay { position:absolute; left:50%; top:46%; transform:translate(-50%, -50%); width:76px; height:76px; border-radius:50%; background:rgba(236, 72, 153, .92); color:#fff; font-size:30px; display:flex; align-items:center; justify-content:center; padding-left:6px; cursor:pointer; box-shadow:0 10px 30px rgba(0, 0, 0, .4); transition:opacity .2s, transform .2s; }
.dns-studio.playing .dns-bigplay, .dns-studio.recording .dns-bigplay { opacity:0; pointer-events:none; transform:translate(-50%, -50%) scale(.8); }
.dns-sub { position:absolute; left:50%; bottom:5%; transform:translateX(-50%); width:max-content; max-width:92%; display:none; flex-direction:column; align-items:center; gap:4px; pointer-events:none; text-align:center; }
.dns-sub.show { display:flex; }
.dns-sub .who { padding:2px 10px; border-radius:999px; color:#fff; font:800 12.5px/1.6 inherit; font-family:inherit; text-shadow:0 1px 2px rgba(0, 0, 0, .3); }
.dns-sub .say {
	--p:0%;
	padding:6px 14px; border-radius:10px; background:rgba(0, 0, 0, .66); font-size:clamp(16px, 2.6vw, 26px); font-weight:800; line-height:1.35;
	color:transparent; -webkit-background-clip:text; background-clip:text;
	background-image:linear-gradient(90deg, #fde047 var(--p), var(--card) var(--p));
	-webkit-text-stroke:0; filter:drop-shadow(0 2px 2px rgba(0, 0, 0, .9));
}
.dns-sub .say.mine { background-image:linear-gradient(90deg, #f9a8d4 var(--p), var(--card) var(--p)); }
.dns-sub .prs { color:#a7f3d0; font-size:clamp(13px, 1.9vw, 19px); font-weight:700; text-shadow:0 1px 3px #000, 0 0 2px #000; transition:opacity .3s; }
.dns-studio.recording .dns-sub .prs { opacity:.28; }
.dns-line .txt .pr { display:block; font-size:12.5px; font-weight:700; color:#6ee7b7; margin-top:1px; }
.dns-studio.recording .dns-line .txt .pr { opacity:.35; }
.dns-btn[data-a="togglePr"].on { background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.5); color:#6ee7b7; }
.dns-sub .trs { color:#e2e8f0; font-size:clamp(12px, 1.6vw, 16px); text-shadow:0 1px 3px #000, 0 0 2px #000; }
.dns-count { position:absolute; right:4%; top:6%; width:74px; height:74px; border-radius:50%; display:none; align-items:center; justify-content:center; background:rgba(225, 29, 72, .9); color:#fff; font:900 38px/1 inherit; font-family:inherit; pointer-events:none; box-shadow:0 0 0 6px rgba(225, 29, 72, .3); }
.dns-count.show { display:flex; animation:dnsPulse 1s ease infinite; }
.dns-count.go { background:#16a34a; box-shadow:0 0 0 6px rgba(22, 163, 74, .3); font-size:34px; }
@keyframes dnsPulse { 50% { transform:scale(1.08); } }
.dns-recbadge { position:absolute; left:12px; top:12px; display:none; padding:5px 12px; border-radius:999px; background:var(--rec); color:#fff; font:800 13px/1.4 inherit; font-family:inherit; pointer-events:none; }
.dns-studio.recording .dns-recbadge { display:block; animation:dnsBlink 1s steps(2) infinite; }
.dns-studio.recording .dns-stage { box-shadow:inset 0 0 0 4px var(--rec); }
@keyframes dnsBlink { 50% { opacity:.6; } }
.dns-pips { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; align-items:flex-end; pointer-events:none; }
.dns-pip { position:relative; width:22%; min-width:120px; max-width:220px; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden; background:#000; border:2px solid rgba(255, 255, 255, .85); box-shadow:0 8px 20px rgba(0, 0, 0, .5); }
.dns-pips.many .dns-pip { min-width:100px; }
.dns-pip video { width:100%; height:100%; object-fit:cover; }
.dns-pip b { position:absolute; left:6px; bottom:5px; padding:1px 7px; border-radius:6px; background:rgba(0, 0, 0, .6); color:#fff; font-size:11px; }
.dns-studio[data-mode="dub"] .dns-pips { right:auto; left:10px; bottom:auto; top:46px; }
.dns-busy { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(11, 11, 22, .55); z-index:5; }
.dns-busy.show { display:flex; }
.dns-busy > div { width:min(420px, 86%); padding:16px 18px; border-radius:14px; background:rgba(17, 24, 39, .92); color:#fff; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.dns-busy b { font-size:15px; }
.dns-busy i { display:block; width:100%; height:8px; border-radius:4px; background:#374151; overflow:hidden; }
.dns-busy s { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--acc), var(--acc2)); transition:width .2s; }

/* 재생 막대 */
.dns-transport { display:flex; gap:6px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.dns-time { font:700 14px/1 inherit; font-family:inherit; color:var(--sub); font-variant-numeric:tabular-nums; margin-left:4px; }
.dns-time b { color:var(--ink); }
.dns-grow { flex:1; }
.dns-meter { width:90px; height:8px; border-radius:4px; background:var(--track); overflow:hidden; }
.dns-meter i { display:block; height:100%; width:0; background:linear-gradient(90deg, #34d399 70%, #fbbf24 88%, #ef4444); transition:width .05s; }
.dns-meter.hot { outline:2px solid var(--dan); }
.dns-btn[data-a="toggleTr"].on { background:rgba(129,140,248,.16); border-color:rgba(129,140,248,.5); color:#a5b4fc; }

/* 타임라인 */
.dns-tl { position:relative; margin-top:10px; padding:4px 0; border-radius:10px; background:var(--soft2); cursor:pointer; user-select:none; touch-action:none; }
.dns-tl-lanes { display:flex; flex-direction:column; gap:2px; }
.dns-tl .lane { position:relative; height:16px; margin:0 8px; }
.dns-tl .lane .ln { position:absolute; left:0; top:0; font-size:10px; font-weight:800; line-height:16px; opacity:.55; pointer-events:none; z-index:1; text-shadow:0 0 3px #fff; }
.dns-tl .lane .blk { position:absolute; top:3px; height:10px; border-radius:4px; opacity:.35; }
.dns-tl .lane.mine .blk { opacity:.85; }
.dns-tl .lane .blk.done { box-shadow:inset 0 0 0 2px rgba(255, 255, 255, .9); }
.dns-tl .lane .blk.sel { outline:2px solid var(--ink); }
.dns-tl-head { position:absolute; top:0; bottom:0; width:2px; margin-left:7px; background:var(--rec); pointer-events:none; }
.dns-tl-head::before { content:''; position:absolute; top:-3px; left:-4px; border:5px solid transparent; border-top-color:var(--rec); }

/* 오른쪽 패널 */
.dns-panel:empty, .dns-tracks:empty, .dns-foot:empty { display:none; }
.dns-panel { display:flex; flex-direction:column; gap:8px; }
.dns-roles-pick { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.dns-roles-pick > span { font-weight:800; font-size:13px; color:var(--sub); margin-right:2px; }
.dns-roles-pick button { border:2px solid var(--rc); background:var(--card); color:var(--ink); height:32px; padding:0 12px; border-radius:999px; font:800 13.5px inherit; font-family:inherit; cursor:pointer; }
.dns-roles-pick button small { color:var(--mute); font-weight:600; }
.dns-roles-pick button.on { background:var(--rc); color:#fff; }
.dns-roles-pick button.on small { color:rgba(255, 255, 255, .85); }
.dns-lines { flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; min-height:120px; }
.dns-studio.narrow .dns-lines { max-height:420px; }
.dns-studio[data-mode="theater"] .dns-lines { display:none; }
.dns-line { padding:8px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--rc); cursor:pointer; transition:box-shadow .15s, opacity .15s; }
.dns-studio[data-mode="dub"] .dns-line:not(.mine) { opacity:.55; }
.dns-line.sel { box-shadow:0 0 0 2px rgba(236, 72, 153, .45); }
.dns-line.now { background:rgba(255,212,59,.10); }
.dns-line.loop { background:rgba(61,214,255,.10); }
.dns-line.rec { box-shadow:0 0 0 3px var(--rec); }
.dns-line .hd { display:flex; gap:6px; align-items:center; margin-bottom:3px; }
.dns-line .t { border:0; background:var(--soft); border-radius:6px; padding:1px 6px; font:700 12px Consolas, monospace; color:var(--sub); cursor:pointer; }
.dns-line .role { font-size:12.5px; font-weight:800; color:var(--rc); filter:brightness(.8); }
.dns-line .loopbtn { margin-left:auto; height:24px; padding:0 6px; }
.dns-line.loop .loopbtn { background:rgba(61,214,255,.2); }
.dns-line .txt { font-size:15.5px; font-weight:700; line-height:1.45; }
.dns-line .txt .tr { display:block; font-size:12.5px; font-weight:400; color:var(--sub); margin-top:1px; }
.dns-line .marks { margin-top:4px; font-size:12.5px; line-height:1.6; }
.dns-line .marks span { padding:0 2px; border-radius:3px; }
.dns-line .marks .ok { color:#6ee7b7; background:rgba(52,211,153,.14); }
.dns-line .marks .miss { color:#ff9b9b; background:rgba(255,82,82,.14); text-decoration:underline wavy rgba(185, 28, 28, .4); }
.dns-line .ctl { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.dns-rec { width:34px; height:34px; border-radius:50%; border:0; background:var(--rec); color:#fff; font-size:16px; cursor:pointer; box-shadow:0 2px 6px rgba(225, 29, 72, .4); flex:0 0 auto; }
.dns-rec:hover { transform:scale(1.06); }
.dns-line.rec .dns-rec { border-radius:8px; animation:dnsBlink 1s steps(2) infinite; }
.dns-line .takes { display:inline-flex; gap:2px; }
.dns-line .tk { width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--card); font:700 12px inherit; font-family:inherit; cursor:pointer; color:var(--sub); }
.dns-line .tk.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dns-line .wave { width:100%; height:22px; margin-top:2px; border-radius:4px; background:var(--soft); }
.bdg { display:inline-block; padding:2px 7px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; }
.bdg.ok { background:rgba(52,211,153,.18); color:#6ee7b7; }
.bdg.meh { background:rgba(255,212,59,.18); color:#ffd97a; }
.bdg.bad { background:rgba(255,82,82,.18); color:#ff9b9b; }
.bdg.star { background:rgba(167,139,250,.2); color:#c4b5fd; }
.dns-foot { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.dns-foot-btns { display:flex; gap:6px; flex-wrap:wrap; }
.dns-foot-btns .dns-btn { flex:1 1 auto; }
.dns-prog { font-size:13px; color:var(--sub); }
.dns-prog i { display:block; height:6px; margin-top:5px; border-radius:3px; background:var(--track); overflow:hidden; }
.dns-prog s { display:block; height:100%; background:linear-gradient(90deg, var(--acc), var(--acc2)); }

/* 극장 */
.dns-tracks { display:flex; flex-direction:column; gap:10px; overflow:auto; }
.dns-cast { display:flex; flex-direction:column; gap:6px; }
.dns-castrow { display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--rc); }
.dns-castrow .rn { width:96px; flex:0 0 auto; font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dns-castrow select { flex:1; width:100%; min-width:0; height:34px; border:1px solid var(--line); border-radius:8px; font:14px inherit; font-family:inherit; padding:0 6px; background:var(--card); }
.dns-vids { display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:14px; }
.dns-vids small { color:var(--mute); }
.dns-cbtn { margin:6px 0 2px; }

/* 장치 서랍 */
.dns-drawer { position:absolute; z-index:20; top:0; right:0; bottom:0; width:min(380px, 100%); background:var(--card); border-left:1px solid var(--line); box-shadow:-20px 0 40px rgba(15, 23, 42, .12); transform:translateX(105%); transition:transform .25s ease; overflow:auto; }
.dns-drawer.show { transform:none; }
.dns-drawer-in { display:flex; flex-direction:column; gap:14px; padding:16px; }
.dns-drawer .dh { display:flex; justify-content:space-between; align-items:center; font-size:16px; }
.dns-drawer label:not(.dns-chk) { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; }
.dns-drawer label b { color:var(--acc); }
.dns-drawer input[type=range] { accent-color:var(--acc); }
.dns-drawer details summary { cursor:pointer; font-size:13px; color:var(--sub); }
.dns-phone { display:flex; flex-direction:column; gap:4px; }
.dns-phone .st { font-size:12.5px; color:#ffd97a; }
.dns-phone .st.connected { color:var(--ok); }

/* 📱 QR (phone.js) */
.dns .st-qr { position:fixed; z-index:99990; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5, 5, 14, .72); backdrop-filter:blur(3px); }
.dns .st-qr.show { display:flex; }
.dns .st-qr-box { position:relative; width:min(680px, 94%); padding:22px 26px 18px; border-radius:18px; background:#12122a; border:1px solid var(--acc); box-shadow:0 24px 60px rgba(0, 0, 0, .6); color:#f1f5f9; }
.dns .st-qr-box h3 { margin:0 0 14px; font-size:20px; color:#fff; }
.dns .st-qr-x { position:absolute; right:12px; top:10px; border:0; background:none; color:#94a3b8; font-size:16px; cursor:pointer; }
.dns .st-qr-body { display:flex; gap:22px; align-items:center; }
.dns .st-qr-img { flex:0 0 auto; padding:8px; background:var(--card); border-radius:12px; line-height:0; }
.dns .st-qr-img canvas { width:220px; height:220px; image-rendering:pixelated; }
.dns .st-qr-box ol { margin:0; padding-left:20px; font-size:15px; line-height:2; color:#cbd5e1; }
.dns .st-qr-box ol b { color:#fff; }
.dns .st-qr-code { margin-top:14px; font-size:14px; color:#94a3b8; }
.dns .st-qr-code b { margin-left:6px; font:800 26px/1 Consolas, monospace; letter-spacing:4px; color:var(--acc); }
.dns .st-qr-state { margin-top:8px; min-height:22px; font-size:15px; font-weight:700; color:#fbbf24; }
.dns .st-qr-state.connected { color:#34d399; font-size:18px; }
.dns .st-qr-state.error { color:#f87171; }
.dns .st-qr-url { margin-top:6px; font:11px Consolas, monospace; color:#64748b; word-break:break-all; }

/* 목록 썸네일 */
.board_list .dns-thumb { display:inline-block; vertical-align:middle; margin-right:8px; line-height:0; }
.board_list .dns-thumb img { width:96px; height:54px; object-fit:cover; border-radius:8px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
	.dns-ed { padding:12px; }
	.dns-ed-main { grid-template-columns:1fr; }
	.dns-cue { flex-wrap:wrap; }
	.dns-cue .text { flex-basis:100%; order:9; }
	.dns-cue .tr { flex-basis:100%; order:10; }
	.dns-top { padding:10px; }
	.dns-modes { width:100%; }
	.dns-modes button { flex:1; padding:0 6px; font-size:13px; }
	.dns-col, .dns-side { padding:10px; }
	.dns-stage { border-radius:10px; }
	.dns-count { width:54px; height:54px; font-size:28px; }
	.dns-pip { min-width:90px; }
	.dns .st-qr-body { flex-direction:column; }
	.dns-meter { width:60px; }
}

/* ✨ AI 대본 다듬기 */
.dns-btn.ai { background:linear-gradient(90deg, var(--pinkbg), rgba(129,140,248,.16)); border-color:rgba(255,95,162,.5); color:#ff8cc0; }
.dns-ed.ai-busy .dns-btn.ai { opacity:.6; pointer-events:none; }
.dns-ai { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.dns-ai-src small { color:var(--sub); font-weight:400; margin-left:6px; }
.dns-ai-src textarea { margin-top:6px; font-family:Consolas, monospace; font-size:12.5px; }
.dns-ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dns-ai-grid .col { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.dns-ai-grid .col > b { font-size:13px; color:var(--sub); }
.dns-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.dns-row select { flex:1; min-width:140px; }
.dns-in.sm { width:70px; }
.dns-ai-note { margin:0; padding:10px 12px; border-radius:10px; background:rgba(255,212,59,.10); color:#ffd97a; font-size:13px; line-height:1.55; }
.dns-ai-prev { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:10px; }
.dns-ai-line { font-size:14px; line-height:1.45; }
.dns-ai-line i { font-style:normal; font:12px Consolas, monospace; color:var(--mute); }
.dns-ai-line small { display:block; color:var(--sub); margin-left:44px; }
.dns-ai-line small.pr { color:#6ee7b7; font-weight:700; }
.dns-ai-prev .more { color:var(--mute); font-size:12.5px; }
.dns-ai-expr { padding:10px 12px; border-radius:10px; background:rgba(167,139,250,.14); font-size:14px; }
.dns-ai-expr ul { margin:6px 0; padding-left:18px; line-height:1.7; }
.dns-cue .pr { flex:1 1 110px; }
@media (max-width: 720px) { .dns-ai-grid { grid-template-columns:1fr; } .dns-cue .pr { flex-basis:100%; order:11; } }

/* 🎵 ME 트랙 (숨긴 두 번째 유튜브) */
.dns-me { position:absolute; left:0; top:0; width:200px; height:113px; opacity:0; pointer-events:none; z-index:-1; overflow:hidden; }
.dns-me iframe { width:200px; height:113px; border:0; }
.dns-stage { isolation:isolate; }
.dns-seg.snd button { font-size:12.5px; }
.dns-seg.snd button[data-snd="me"].on { background:rgba(255,212,59,.18); color:#ffd97a; }
.dns-seg.snd.muted-rec { opacity:.45; }
.dns-ed-me { display:flex; gap:8px; margin:-4px 0 12px; align-items:center; }
.dns-ed-me .dns-in { flex:1; }
.dns-ed-me small { color:var(--sub); white-space:nowrap; }
.dns-ed-video .dns-me { z-index:-1; }

/* 🎬 대사 상자 (Solid Box) — 영상 위에서도 또렷하게 */
.dns-sub { bottom:3%; }
.dns-sub .box { display:flex; flex-direction:column; align-items:center; gap:2px; max-width:100%; padding:7px 16px 9px; border-radius:12px; background:rgba(12, 12, 24, .86); border-top:3px solid var(--rc, #94a3b8); box-shadow:0 6px 20px rgba(0, 0, 0, .45); }
.dns-sub .who { background:var(--rc, #94a3b8); }
.dns-sub .say { padding:0; border-radius:0; filter:none; font-size:clamp(16px, 2.4vw, 25px); }
.dns-sub .prs, .dns-sub .trs { text-shadow:none; }
.dns-sub .trs { color:#cbd5e1; }
/* 글쓰기: 영상 위 대사 상자 → 눌러서 바로 고치기 */
.dns-ed-video { position:relative; }
.dns-ed-sub { position:absolute; left:50%; bottom:13%; transform:translateX(-50%); max-width:92%; z-index:4; display:none; }
.dns-ed-sub.show { display:block; }
.dns-ed-sub .box { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 16px 9px; border-radius:12px; background:rgba(12, 12, 24, .86); border-top:3px solid var(--rc, #94a3b8); box-shadow:0 6px 20px rgba(0, 0, 0, .45); text-align:center; transition:box-shadow .15s; }
.dns-ed-sub .box:hover { box-shadow:0 0 0 2px #f472b6, 0 6px 20px rgba(0, 0, 0, .45); }
.dns-ed-sub .who { padding:1px 9px; border-radius:999px; background:var(--rc, #94a3b8); color:#fff; font-size:12px; font-weight:800; }
.dns-ed-sub .say { color:#fff; font-size:clamp(15px, 2.2vw, 22px); font-weight:800; line-height:1.35; }
.dns-ed-sub .say.empty { color:#64748b; font-weight:600; }
.dns-ed-sub .prs { color:#a7f3d0; font-size:clamp(12px, 1.6vw, 16px); font-weight:700; }
.dns-ed-sub .trs { color:#cbd5e1; font-size:clamp(12px, 1.5vw, 15px); }
.dns-ed-sub .hint { color:#f9a8d4; font-size:11px; opacity:.8; }
.dns-ed-pop { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); width:min(560px, 96%); z-index:6; padding:12px; border-radius:14px; background:rgba(255, 255, 255, .98); box-shadow:0 16px 40px rgba(0, 0, 0, .45); display:flex; flex-direction:column; gap:7px; }
.dns-ed-pop .row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dns-ed-pop .row > b { width:40px; font-size:12.5px; color:var(--sub); flex:0 0 auto; }
.dns-ed-pop .dns-in { flex:1; min-width:0; }
.dns-ed-pop .dns-in.say { font-size:16px; font-weight:700; height:38px; }
.dns-ed-pop .dns-in.time { flex:0 0 84px; }
.dns-ed-pop .btns { display:flex; gap:6px; justify-content:flex-end; }
.dns-ed-pop small { color:var(--mute); font-size:11.5px; margin-right:auto; align-self:center; }
.dns-ed-cuesh .dns-btn { margin-left:auto; }
/* 📋 붙여넣기: 파일 끌어다 놓기 */
.dns-drop { position:relative; }
.dns-drop.over textarea { outline:3px dashed var(--acc); background:var(--pinkbg); }
.dns-drop .dropmsg { position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:#ff8cc0; pointer-events:none; }
.dns-drop.over .dropmsg { display:flex; }
.dns-pastebar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--sub); }
.dns-modes2 { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--soft); font-size:14px; }
.dns-modes2 label { display:flex; gap:8px; align-items:flex-start; cursor:pointer; }
.dns-modes2 small { color:var(--sub); }
.dns-ed.dragover { outline:3px dashed var(--acc); outline-offset:4px; }

/* =====================================================================
   🌈 MZ 초딩 다크 테마 (배경 #111122 에 어울리게)
   ===================================================================== */
.board {
	--bd-acc: #ff5fa2; --bd-acc-2: #3dd6ff; --bd-rec: #ff3b6b;
	--bd-grad: linear-gradient(90deg, #ff5fa2 0%, #ffb04d 55%, #ffd43b 100%);
}
.dns-btn { border-radius: 12px; font-weight: 800; }
.dns-btn:hover { border-color: var(--line2); background: var(--soft2); }
.dns-btn.primary { background: linear-gradient(135deg, #ff5fa2, #ff7a59); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(255, 95, 162, .35); }
.dns-btn.primary:hover { background: linear-gradient(135deg, #ff74b1, #ff8f70); }
.dns-btn.on { background: rgba(255, 95, 162, .18); border-color: var(--acc); color: #ffc2dc; }
.dns-btn.ghost { color: var(--sub); }
.dns-in { background: var(--soft); color: var(--ink); border-color: var(--line2); color-scheme: dark; }
.dns-in::placeholder { color: var(--mute); }
.dns-in:focus { outline: 2px solid rgba(255, 95, 162, .45); border-color: var(--acc); }
.dns-seg { background: var(--soft); border-color: var(--line2); }
.dns-seg button { color: var(--sub); }
.dns-seg button.on { background: var(--soft2); color: #fff; box-shadow: 0 0 0 1px var(--line2); }
.dns-tip { background: linear-gradient(135deg, rgba(255, 95, 162, .14), rgba(139, 92, 246, .12)); color: #ffd9ea; border: 1px solid rgba(255, 95, 162, .22); }
.dns-tip b { color: #fff; }
.dns-pre { background: #0b0b18; border: 1px solid var(--line); }
.dns-dlg { background: #1a1a33; color: var(--ink); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); border-radius: 22px; }
.dns-dlg-title { font-family: var(--fun); font-weight: 400; font-size: 21px; }
.dns-dlg-text { color: var(--sub); }
.dns-dlg-text b { color: var(--ink); }
.dns-dlg-text code { background: var(--soft2); color: #ffd97a; }
.dns-dlg-wrap { background: rgba(5, 5, 14, .7); }
.dns-toast { background: #26264a; border: 1px solid var(--line2); }
.dns-warn { color: #ffd97a; }

/* ---------- 🎬 스튜디오 ---------- */
.dns-studio { background: #15152b; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 95, 162, .06) inset; color: var(--ink); }
.dns-top { background: linear-gradient(90deg, rgba(255, 95, 162, .14), rgba(139, 92, 246, .10) 45%, rgba(61, 214, 255, .08)); border-bottom-color: var(--line); }
.dns-brand b { font-family: var(--fun); font-weight: 400; font-size: 20px; letter-spacing: 0; background: linear-gradient(90deg, #fff, #ffd9ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dns-brand small { color: var(--sub); }
.dns-brand .doc { display: block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fun); font-size: 15px; color: #ffe8a3; }
.dns-modes { background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 16px; }
.dns-modes button { font-family: var(--fun); font-weight: 400; font-size: 16px; height: 40px; color: var(--sub); border-radius: 12px; }
.dns-modes button.on { background: linear-gradient(135deg, #2c2c58, #3a2a5c); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .35); }
.dns-modes button[data-mode="practice"].on { box-shadow: 0 0 0 2px var(--cyan); }
.dns-modes button[data-mode="dub"].on { color: #fff; box-shadow: 0 0 0 2px var(--acc); }
.dns-modes button[data-mode="theater"].on { box-shadow: 0 0 0 2px var(--acc2); }
.dns-side { background: rgba(0, 0, 0, .18); border-left-color: var(--line); }
.dns-studio.narrow .dns-side { border-top-color: var(--line); }
.dns-stage { border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.dns-bigplay { background: linear-gradient(135deg, #ff5fa2, #ff7a59); box-shadow: 0 0 0 8px rgba(255, 95, 162, .25), 0 10px 30px rgba(0, 0, 0, .5); }
.dns-time { color: var(--sub); } .dns-time b { color: #fff; font-family: var(--fun); font-weight: 400; font-size: 17px; }
.dns-meter { background: var(--track); }
.dns-tl { background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.dns-tl .lane .ln { text-shadow: 0 0 4px #000; opacity: .8; }
.dns-tl .lane .blk.done { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95); }
.dns-tl .lane .blk.sel { outline-color: #fff; }
.dns-line { background: var(--card); border-color: var(--line); }
.dns-line:hover { background: #222244; }
.dns-line.sel { box-shadow: 0 0 0 2px rgba(255, 95, 162, .7); }
.dns-line.now { background: rgba(255, 212, 59, .10); }
.dns-line .role { filter: brightness(1.25); }
.dns-line .t { background: var(--soft2); color: var(--sub); }
.dns-line .txt { font-size: 16px; }
.dns-line .tk { background: var(--soft); border-color: var(--line2); color: var(--sub); }
.dns-line .tk.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.dns-line .wave { background: var(--soft); }
.dns-rec { background: radial-gradient(circle at 35% 35%, #ff7a9a, #ff2d5f); box-shadow: 0 0 0 3px rgba(255, 59, 107, .25), 0 4px 10px rgba(255, 45, 95, .45); }
.dns-roles-pick button { background: transparent; color: var(--ink); }
.dns-roles-pick button.on { color: #111122; }
.dns-roles-pick button.on small { color: rgba(17, 17, 34, .7); }
.dns-prog i { background: var(--track); }
.dns-castrow, .dns-vids { background: var(--card); border-color: var(--line); }
.dns-castrow select { background: var(--soft); color: var(--ink); border-color: var(--line2); color-scheme: dark; }
.dns-drawer { background: #18182f; border-left-color: var(--line2); box-shadow: -20px 0 40px rgba(0, 0, 0, .5); }
.dns-sub .box { background: rgba(10, 10, 22, .9); }
.dns-cbtn { background: rgba(255, 95, 162, .14); border-color: rgba(255, 95, 162, .4); color: #ffc2dc; }

/* ---------- 🎞 글쓰기 ---------- */
.dns-ed { background: linear-gradient(180deg, #17172e, #141428); border-color: var(--line2); border-radius: 22px; color: var(--ink); }
.dns-ed-head b { font-family: var(--fun); font-weight: 400; font-size: 21px; }
.dns-ed-head span { color: var(--sub); }
.dns-ed-box { background: var(--card); border-color: var(--line); }
.dns-cue { background: var(--card); border-color: var(--line); }
.dns-cue.pending { background: rgba(255, 212, 59, .08); }
.dns-tapbtn { background: rgba(255, 95, 162, .08); color: #ffc2dc; border-color: var(--acc); }
.dns-tapbtn b { font-family: var(--fun); font-weight: 400; font-size: 19px; }
.dns-tapbtn small { color: var(--sub); }
.dns-roles li.on { background: rgba(255, 95, 162, .14); outline-color: rgba(255, 95, 162, .4); }
.dns-roles .nm { color: var(--ink); }
.dns-roles kbd { background: var(--soft2); border-color: var(--line2); color: var(--sub); }
.dns-memo-label { color: var(--ink, #f4f4ff); }
.dns-ed-pop { background: #1d1d3a; border: 1px solid var(--line2); }
.dns-ai-grid .col, .dns-modes2 { background: var(--soft); border-color: var(--line); }
.dns-ai-note { background: rgba(255, 212, 59, .12); color: #ffe7a3; }
.dns-ai-expr { background: rgba(139, 92, 246, .14); }
.dns-ai-prev { border-color: var(--line); }

/* =====================================================================
   🖼 갤러리(카드) 목록
   ===================================================================== */
.board .list_toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.board .list_toolbar .btnArea { order: 2; }
.board .list_toolbar .board_search { order: 1; }
.board .list_toolbar .btn-write { background: linear-gradient(135deg, #ff5fa2, #ff7a59) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(255, 95, 162, .35); }
.dns-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 4px 0 8px; font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.dns-gal-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; border: 2px dashed rgba(255, 255, 255, .12); border-radius: 22px; color: #b4b4d8; font-family: "Jua", sans-serif; font-size: 22px; line-height: 1.6; }
.dns-gal-empty small { font-family: "Pretendard", sans-serif; font-size: 14px; color: #74749a; }
.dns-card { position: relative; border-radius: 22px; overflow: hidden; background: #1c1c38; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .18s, box-shadow .18s; aspect-ratio: 16 / 11; }
.dns-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 95, 162, .55); }
.dns-card.notice { box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 212, 59, .55); }
.dns-card.current { box-shadow: 0 0 0 3px #3dd6ff, 0 10px 28px rgba(0, 0, 0, .4); }
.dns-card-link { position: absolute; inset: 0; display: block; color: #fff !important; text-decoration: none !important; }
.dns-card-thumb { position: absolute; inset: 0; background: linear-gradient(135deg, #2b2b5a, #3b2350 60%, #1f3a52) center / cover no-repeat; transition: transform .35s; }
.dns-card:hover .dns-card-thumb { transform: scale(1.06); }
.dns-card-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 34, 0) 30%, rgba(17, 17, 34, .78) 62%, rgba(17, 17, 34, .97)); pointer-events: none; }
.dns-card-play { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.85); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 4px; background: rgba(255, 95, 162, .92); font-size: 20px; color: #fff; opacity: 0; transition: .2s; box-shadow: 0 0 0 6px rgba(255, 95, 162, .25); }
.dns-card:hover .dns-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dns-card-badges { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; }
.dns-card-badges .b { padding: 3px 9px; border-radius: 999px; font: 800 11.5px/1.4 "Pretendard", sans-serif; background: rgba(17, 17, 34, .75); backdrop-filter: blur(4px); }
.dns-card-badges .pin { background: #ffd43b; color: #111122; }
.dns-card-badges .new { background: #ff5fa2; color: #fff; }
.dns-card-badges .me { background: rgba(61, 214, 255, .2); color: #a5f0ff; border: 1px solid rgba(61, 214, 255, .45); }
.dns-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.dns-card-title { margin: 0; font-family: "Jua", "Pretendard", sans-serif; font-weight: 400; font-size: 19px; line-height: 1.3; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dns-card-sum { margin: 0; font-size: 13px; line-height: 1.45; color: #d6d6ef; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dns-card-roles { margin: 0; font-size: 12.5px; color: #ffd97a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; font-size: 12px; color: #a6a6c4; }
.dns-card-meta .who { color: #e9e9ff; font-weight: 700; }
.dns-card-meta .dub { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(255, 95, 162, .22); color: #ffc2dc; font-weight: 800; }
.dns-card-check { position: absolute; right: 12px; top: 12px; z-index: 3; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(17, 17, 34, .7); }
.dns-card-check input { width: 16px; height: 16px; accent-color: #ff5fa2; margin: 0; }
@media (max-width: 640px) { .dns-gal { grid-template-columns: 1fr 1fr; gap: 10px; } .dns-card { aspect-ratio: 3 / 4; border-radius: 16px; } .dns-card-title { font-size: 15px; } .dns-card-sum { display: none; } }
@media (max-width: 380px) { .dns-gal { grid-template-columns: 1fr; } .dns-card { aspect-ratio: 16 / 11; } }

/* =====================================================================
   🖥 스크롤 없는 스튜디오 (넓은 화면): 화면 높이에 꼭 맞추기
   ===================================================================== */
.dns-studio.fit { display: flex; flex-direction: column; }
.dns-studio.fit .dns-body { flex: 1 1 auto; min-height: 0; }
.dns-studio.fit .dns-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dns-studio.fit .dns-stage { flex: 0 0 auto; margin: 0 auto; max-width: 100%; }
.dns-studio.fit .dns-side { max-height: none; min-height: 0; overflow: hidden; }
.dns-studio.fit .dns-lines { min-height: 0; }
/* 읽기 화면 머리글은 작게 */
.board_read .read_header h1 { font-size: 20px; }

/* 🟪 정사각 카드: 가운데 = 썸네일 통째로, 위 띠 = 제목, 아래 띠 = 요약·배역·정보 (v1.5.2) */
.dns-card { aspect-ratio: 1 / 1; background: #1c1c38; }
.dns-card-link::after { display: none; }
.dns-card-blur { position: absolute; inset: -20px; background: var(--th, linear-gradient(135deg, #2b2b5a, #3b2350 60%, #1f3a52)) center / cover no-repeat; filter: blur(18px) brightness(.42) saturate(1.3); transform: scale(1.1); }
.dns-card-thumb { inset: auto; left: 0; right: 0; top: 50%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); background: var(--th, linear-gradient(135deg, #2b2b5a, #3b2350 60%, #1f3a52)) center / cover no-repeat; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35); }
.dns-card:hover .dns-card-thumb { transform: translateY(-50%) scale(1.04); }
.dns-card-play { top: 50%; }
.dns-card-badges { left: 10px; top: calc(21.875% + 8px); }
.dns-card-body { top: 0; bottom: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0; pointer-events: none; }
.dns-card-title { height: 21.875%; display: flex; align-items: center; padding: 6px 14px; margin: 0; font-size: clamp(14px, 1.25vw, 17px); }
.dns-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: max(6px, calc(10.9% - 1.3em)); }
.dns-card-foot { height: 21.875%; padding: 6px 14px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.dns-card-sum { -webkit-line-clamp: 1; font-size: 12.5px; }
.dns-card-roles, .dns-card-meta { font-size: 11.5px; }
.dns-card-meta { margin-top: 0; }
.dns-card-check { top: 10px; }
@media (max-width: 640px) { .dns-card { aspect-ratio: 1 / 1; } .dns-card-sum, .dns-card-roles { display: none; } .dns-card-title { font-size: 14px; } }
@media (max-width: 380px) { .dns-card { aspect-ratio: 1 / 1; } }
.dns-card-title { padding-right: 46px; }
.dns-card-check { opacity: .75; }
.dns-card:hover .dns-card-check { opacity: 1; }
.dns-card:hover .dns-card-thumb { transform: translateY(-50%); filter: brightness(1.08) saturate(1.1); }
.dns-card-thumb { transition: filter .25s; }

/* 📄 읽기 화면 아래: 한 줄로 작게 (SNS · 추천 없음) */
.board_read .read_body { padding-top: 6px; padding-bottom: 4px; min-height: 0; }
.board_read .read_footer.dns-rfoot { margin: 0; padding: 8px 0 10px; border: 0; }
.dns-rfoot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dns-rfoot-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #a6a6c4; min-width: 0; }
.dns-rfoot-left .tags a { margin-right: 6px; color: #ffd97a; }
.dns-rfoot-left .fileList { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.dns-rfoot-left .fileList .files { position: absolute; z-index: 5; left: 0; top: 100%; min-width: 260px; display: none; padding: 8px 10px; border-radius: 12px; background: #1c1c38; border: 1px solid rgba(255, 255, 255, .12); }
.dns-rfoot-left .dns-more { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); color: #a6a6c4; text-decoration: none; font-size: 16px; }
.dns-rfoot .btnArea { margin: 0 !important; padding: 0 !important; border: 0 !important; display: flex; gap: 8px; }
.board_read .read_header { padding-bottom: 8px; margin-bottom: 8px; }