/* 쏙튜브 디자인 시스템 — 쏙클립 ds.css(2026-08-20 탈-AI 버전) 토큰을 그대로 상속한다.
   같은 집안 제품이라 색·간격·라운드·서체는 동일. 쏙튜브만의 차이는 "편집국 데스크" 문법이다:
   괘선 헤더(rule-sec) + 런다운 표(rundown) + 스토리보드 스트립(strip) + 타임라인(slot).
   새 색·새 여백을 즉석에서 만들지 말고 여기서 꺼내 쓴다. */
@font-face { font-family: "Paperlogy"; src: url("./fonts/Paperlogy-7Bold.woff2") format("woff2"); font-weight: 700; font-display: fallback; }
@font-face { font-family: "Paperlogy"; src: url("./fonts/Paperlogy-8ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: fallback; }
:root {
  --brand:#00A76F; --brand-2:#34D399; --cta:#008A5C; --brand-soft:#EDEAE0; --brand-line:#D8D8E0;
  --accent:#3D5AFE; --accent-soft:#E9EEFF;
  --ink:#111114; --ink-2:#555560; --ink-3:#97979F;
  --bg:#FAF8F4; --bg-soft:#F5F2EC; --bg-sunken:#F0EDE5; --line:#E9E9EE; --line-strong:#D8D8E0;
  --ok:#16A34A; --warn:#B45309; --warn-soft:#FEF3C7; --danger:#DC2626; --danger-soft:#FEE2E2;
  --r-card:16px; --r-ui:10px; --r-pill:999px;
  --shadow:0 1px 3px rgba(17,17,20,.05); --shadow-pop:0 12px 40px rgba(17,17,20,.14);
  --font-display:"Paperlogy","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:40px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.t-display{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.t-h1{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.t-h2{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.35}
.t-body{font-size:14px;font-weight:500;line-height:1.6;color:var(--ink-2)}
.t-label{font-size:13px;font-weight:700;color:var(--ink)}
.t-hint{font-size:12px;font-weight:500;color:var(--ink-3);line-height:1.5}
.t-num{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rule-sec{border-top:1.5px solid var(--ink);padding-top:10px}
.mk{background:linear-gradient(transparent 62%,var(--brand-soft) 62%)}
.tag-ink{background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;border-radius:3px;padding:3px 6px;line-height:1;display:inline-flex;font-variant-numeric:tabular-nums}
.tag-brand{background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;border-radius:3px;padding:3px 6px;line-height:1;display:inline-flex}
.tag-line{border:1px solid var(--line-strong);color:var(--ink-2);font-size:10.5px;font-weight:800;border-radius:3px;padding:3px 6px;line-height:1;display:inline-flex;background:#fff}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-ui);font-size:13.5px;font-weight:700;cursor:pointer;padding:13px 18px;border:1px solid transparent;font-family:inherit;line-height:1}
.btn-cta{background:var(--cta);color:#fff}.btn-brand{background:var(--brand);color:#fff}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line-strong)}.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-lg{padding:17px 26px;font-size:14.5px;border-radius:12px}.btn-sm{padding:8px 13px;font-size:12.5px}.btn-full{width:100%}
.btn .badge{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);font-size:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--s5)}
.card-flat{box-shadow:none;background:var(--bg-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;line-height:1}
.chip-brand{background:var(--brand-soft);color:var(--brand)}.chip-line{background:#fff;border:1px solid var(--line-strong);color:var(--ink-2)}
.chip-ok{background:#E8F6EC;color:var(--ok)}.chip-warn{background:var(--warn-soft);color:var(--warn)}.chip-danger{background:var(--danger-soft);color:var(--danger)}.chip-accent{background:var(--accent-soft);color:var(--accent)}
.sec-label{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);border:1px solid var(--line-strong);padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink-2);background:#fff;line-height:1}
select,input[type=text],input[type=url]{border:1px solid var(--line-strong);border-radius:var(--r-ui);padding:9px 11px;font-size:13.5px;font-family:inherit;color:var(--ink);background:#fff}
.switch{width:42px;height:24px;border-radius:var(--r-pill);background:var(--line-strong);position:relative;display:inline-block}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch.on{background:var(--brand)}.switch.on::after{transform:translateX(18px)}
.opt{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.opt:last-child{border-bottom:0}
.opt .k{font-size:13.5px;font-weight:600}.opt .k small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:2px}.opt .v{margin-left:auto;display:flex;align-items:center;gap:8px}
.summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg-sunken);border-radius:12px;padding:12px 14px}

/* ---------- 쏙튜브 전용 문법 ---------- */
/* 앱 셸: 왼쪽 얇은 레일(브랜드·내비), 오른쪽 데스크 */
.shell{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
.rail{border-right:1px solid var(--line);padding:20px 16px;background:var(--bg-soft)}
.rail .logo{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.rail .logo i{width:22px;height:22px;border-radius:6px;background:var(--brand);display:inline-block}
.rail nav{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.rail nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;line-height:1}
.rail nav a.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.rail nav a b{width:18px;height:18px;border-radius:5px;background:var(--line-strong);display:inline-block}
.rail nav a.on b{background:var(--brand)}
.desk{padding:28px 36px;max-width:1180px}
.desk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.desk-head .kicker{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.04em;margin-bottom:6px}

/* 런다운(편성표) — 방송국 큐시트 문법. 행 하나 = 편 하나 */
.rundown{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.rundown th{font-size:11px;font-weight:800;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:1.5px solid var(--ink);background:#fff;letter-spacing:.03em}
.rundown td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.rundown tr:last-child td{border-bottom:0}
.rundown .no{font-family:var(--font-display);font-weight:800;font-size:18px;width:48px;color:var(--ink-3)}
.rundown tr.on .no{color:var(--brand)}
.rundown .ttl{font-weight:800;font-size:14px}
.rundown .hook{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.rundown .tc{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12px;white-space:nowrap}
.rundown tr.off td{opacity:.45}

/* 스토리보드 스트립 — 컷 하나 = 썸네일 + 대사 + 상태점 */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.cut{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cut .shot{aspect-ratio:16/9;background:linear-gradient(160deg,#3b4a63,#1b2430);position:relative}
.cut .shot .n{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;font-weight:800;border-radius:4px;padding:3px 6px;line-height:1}
.cut .shot .sub{position:absolute;left:8px;right:8px;bottom:8px;font-size:9.5px;font-weight:800;color:#fff;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.8);line-height:1.3}
.cut .shot .sub b{color:#FFE45C}
.cut .line{padding:9px 10px;font-size:11.5px;line-height:1.45;color:var(--ink-2);height:56px;overflow:hidden}
.cut .foot{display:flex;align-items:center;gap:6px;padding:0 10px 9px}
.cut .foot .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.cut .foot .dot.warn{background:var(--warn)}.cut .foot .dot.wait{background:var(--line-strong)}
.cut .foot .dur{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cut .foot .re{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--accent);cursor:pointer}
.cut.sel{outline:2px solid var(--brand);outline-offset:1px}

/* 스타일 선택 타일 — 두 장 나란히 비교 */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff;cursor:pointer}
.tile.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.tile .prev{aspect-ratio:16/9;border-radius:8px;background:linear-gradient(160deg,#4a5568,#1a202c);position:relative;overflow:hidden}
.tile .prev .sub{position:absolute;left:8px;right:8px;bottom:8px;text-align:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.tile .prev .sub b{color:#FFE45C}
.tile .n{font-size:13.5px;font-weight:800;margin-top:10px;display:flex;align-items:center;gap:6px}
.tile .d{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}

/* 목소리 카드 — 파형 한 줄 + 재생 */
.voice{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.voice.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.voice .play{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
.voice .wave{flex:1;height:22px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 5px);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);opacity:.55}
.voice .nm{font-size:13px;font-weight:800;white-space:nowrap}.voice .nm small{display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:2px}

/* 타임라인 슬롯 — 렌더 큐·예약 발행 */
.slot{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:0}
.slot .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--ink-3)}
.slot .bar{height:6px;border-radius:3px;background:var(--bg-sunken);overflow:hidden;margin-top:6px}
.slot .bar i{display:block;height:100%;background:var(--brand)}
.slot .nm{font-size:13.5px;font-weight:700}
.slot .st{font-size:11.5px;color:var(--ink-2);margin-top:2px}

/* 설계 메모(카드 안 주석) */
.note{font-size:12px;color:var(--ink-3);line-height:1.55;max-width:720px;margin-top:18px}
.note b{color:var(--ink)}