/* ========== 공통 변수 / 앱 셸 / 좌측 컨트롤 패널 / 트랜스포트 ========== */
/* ---------- PICKCAST 툴 화면 색 — 블랙 · 화이트 · 옐로우 ----------
   브랜드 3색으로 간다. 파랑·보라 같은 색은 무채색으로 중화한다.
   ※ 빨강(오류)·초록(성공)은 **의미 색이라 남긴다** — 없애면 경고가 안 보인다.
   ※ 영상 무대(#frame)는 designs.css 에서 따로 못박아 두었다. 여기를 바꿔도 영상은 안 바뀐다. */
:root{
  --deep:#000000; --bg:#0A0A0A; --panel:#101010; --ui2:#151515;
  --card:#181818; --card2:#1F1F1F;
  --line:#2B2B2B; --line2:#3C3C3C;
  /* 보조 텍스트는 회색이 흐려 안 보인다는 지적이 많아 한 단계씩 밝게 잡는다 */
  --tx:#FFFFFF; --mut:#C6C6C6; --dim:#8F8F8F;
  --gold:#FFD400; --gold2:#FFE566;          /* 브랜드 옐로우 */
  --cyan:#D8D8D8; --vio:#B9B9B9;            /* 파랑·보라 → 무채색으로 중화 */
  --red:#FF5A5A; --grn:#4ADE9A;             /* 오류·성공 (의미 색, 유지) */
  --up:#F0464B; --dn:#3E7BE8;               /* 한국 증시 관습(상승 빨강·하락 파랑) */
  font-family:'Pretendard',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--deep);color:var(--tx);height:100vh;overflow:hidden}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3A3A3A;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:400px 1fr;height:100vh}

/* ---------- 좌측 패널 ---------- */
.panel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:18px 16px 60px}
/* 브랜드 로고 마크 — 헤더·콘솔에서 글자 앞에 붙는다 */
.blogo{width:18px;height:18px;vertical-align:-3px;margin-right:6px;flex:none}
.blogo.lg{width:26px;height:26px;vertical-align:-5px;margin-right:8px}
.panel h1{font-size:15px;font-weight:800;letter-spacing:-.3px;margin-bottom:2px;
  display:flex;align-items:center}
.panel h1 span{color:var(--gold)}
.ver{font-size:11px;color:var(--dim);margin-bottom:16px;line-height:1.6}
.sec{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--ui2);overflow:hidden}
.sec>summary{padding:11px 13px;font-size:12.5px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:7px;user-select:none}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::before{content:'▸';color:var(--gold);font-size:10px;transition:.15s}
.sec[open]>summary::before{transform:rotate(90deg)}
.sec>summary b{margin-left:auto;font-size:10px;font-weight:600;color:var(--dim)}
.body{padding:0 13px 14px}

label.f{display:block;margin-bottom:11px}
label.f>span{display:block;font-size:11.5px;font-weight:600;color:var(--tx);margin-bottom:4px}
label.f>em{display:block;font-size:10.5px;color:var(--dim);font-style:normal;line-height:1.5;margin-bottom:5px}
/* password·date 등도 같은 모양이 되도록 타입을 모두 포함한다
   (예전엔 text/number 만 잡아서 비밀번호칸이 브라우저 기본 모양으로 달라 보였다) */
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=datetime-local],input[type=search],input[type=tel],input[type=email],
select,textarea{
  width:100%;background:#0A111C;border:1px solid var(--line);border-radius:7px;
  color:var(--tx);padding:8px 9px;font-size:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical;line-height:1.55;font-size:11.5px}
textarea.code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px}
.row{display:flex;gap:8px}.row>*{flex:1}
.row .grow{flex:2}

.chk{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px;cursor:pointer;font-size:12px;line-height:1.35}
.chk input{width:14px;height:14px;accent-color:var(--gold);cursor:pointer;margin-top:2px;flex:none}
.chk em{display:block;font-size:10.5px;color:var(--dim);font-style:normal;margin-top:1px;line-height:1.5}
.chk code{color:var(--gold);font-family:ui-monospace,monospace;font-size:10px}

.rng{display:flex;align-items:center;gap:9px}
.rng input[type=range]{flex:1;accent-color:var(--gold)}
.rng b{font-size:11px;color:var(--gold);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

.btn{background:var(--card2);border:1px solid var(--line2);color:var(--tx);border-radius:7px;
  padding:8px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:.12s;width:100%}
.btn:hover{background:#242424;border-color:var(--gold)}
.btn.pri{background:var(--gold);color:#111;border-color:var(--gold);font-weight:800}
.btn.pri:hover{background:var(--gold2)}
.btn.sm{padding:6px 8px;font-size:11px}
.btn:disabled{opacity:.5;cursor:default}

.hint{font-size:10.5px;color:var(--dim);line-height:1.6;background:#0A111C;border:1px solid var(--line);
  border-radius:7px;padding:9px 10px;margin-bottom:10px}
.hint code{color:var(--gold);font-family:ui-monospace,monospace;font-size:10px}
.stat{font-size:11px;color:var(--mut);padding:7px 9px;background:#0A111C;border:1px solid var(--line);
  border-radius:7px;margin-bottom:9px;line-height:1.65}
.stat b{color:var(--gold);font-variant-numeric:tabular-nums}
.err{color:var(--red);font-size:11px;line-height:1.55;margin-top:6px}
.ok{color:var(--grn)}

.drop{border:1.5px dashed var(--line2);border-radius:9px;padding:16px 10px;text-align:center;
  font-size:11.5px;color:var(--mut);cursor:pointer;transition:.15s}
.drop.on{border-color:var(--gold);background:rgba(245,185,66,.07);color:var(--gold)}
.imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.imgs figure{width:calc(33.33% - 4px);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  position:relative;background:#0A111C}
.imgs img{width:100%;height:44px;object-fit:cover;display:block}
.imgs figcaption{font-size:9.5px;color:var(--gold);padding:2px 4px;text-align:center;font-family:ui-monospace,monospace}
.imgs button{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.7);border:0;color:#fff;
  width:15px;height:15px;border-radius:3px;font-size:10px;cursor:pointer;line-height:1}

/* ---------- 자막 줄 목록 (강조 큐 표시) ---------- */
.lines{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:#0A111C}
.ln{padding:7px 10px;font-size:11.5px;border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer;line-height:1.45}
.ln:last-child{border:0}
.ln:hover{background:rgba(245,185,66,.07)}
.ln.on{background:rgba(245,185,66,.14);box-shadow:inset 2px 0 0 var(--gold)}
.ln i{color:var(--dim);font-style:normal;margin-right:6px;font-variant-numeric:tabular-nums}
.ln u{color:var(--dim);text-decoration:none;font-size:10px;margin-left:5px}
.ln .sl{float:right;font-size:9.5px;color:var(--dim);font-family:ui-monospace,monospace}
.cues{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cues span{font-size:9.5px;padding:1px 6px;border-radius:4px;background:rgba(245,185,66,.15);
  color:var(--gold2);font-weight:600}
.cues span.g{background:rgba(61,220,151,.15);color:var(--grn)}
.cues span.r{background:rgba(255,77,77,.15);color:#FF8080}
.cues span.c{background:rgba(53,215,232,.14);color:var(--cyan)}
.cues span.v{background:rgba(183,140,247,.15);color:var(--vio)}

/* ---------- 우측 스테이지 ---------- */
.stagewrap{display:flex;flex-direction:column;background:var(--deep);overflow:hidden}
.stagebox{flex:1;display:flex;align-items:center;justify-content:center;padding:22px;min-height:0}
.stage{width:100%;max-width:1280px;aspect-ratio:16/9;position:relative;overflow:hidden;
  border-radius:12px;background:#000;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.stage:fullscreen{border-radius:0;max-width:none;width:100vw;height:100vh;aspect-ratio:auto}
.frame{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:0 0}

/* ---------- 트랜스포트 ---------- */
.transport{border-top:1px solid var(--line);background:var(--panel);padding:11px 18px 14px;flex:none}
.tbar{height:6px;background:#182338;border-radius:3px;overflow:hidden;cursor:pointer;margin-bottom:10px;position:relative}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0}
.tctrl{display:flex;align-items:center;gap:9px}
.tctrl button{background:var(--card2);border:1px solid var(--line2);color:var(--tx);border-radius:7px;
  padding:7px 15px;font-size:12.5px;font-weight:700;cursor:pointer}
.tctrl button:hover{border-color:var(--gold)}
.tctrl button.play{background:var(--gold);color:#0B1220;border-color:var(--gold);min-width:82px}
.tctrl .tm{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;margin-left:4px}
.tctrl .cur{margin-left:auto;font-size:11.5px;color:var(--dim);max-width:420px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
kbd{background:var(--card2);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;font-size:10px;color:var(--mut)}

/* ---------- PICKCAST 세션 · 내 채널 ---------- */
.mecard{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.merow{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:3px 0}
.merow span{color:var(--dim);width:62px;flex:none}
.merow b{color:var(--tx);font-weight:700}
.lockhint{margin-top:8px;color:var(--gold2)}
.locked{opacity:.45;cursor:not-allowed}

/* ---------- 렌더 모드: 무대만 전체화면으로 ---------- */
body.renderonly .panel,
body.renderonly .transport{display:none!important}
/* ⚠️ 렌더는 **컷마다 정지 화면 한 장**을 찍어 이어 붙인다. 그런데 화면을 옮긴 직후
   20ms 만에 찍기 때문에, 슬라이드 페이드(기본 450ms)가 진행 중인 상태가 그대로 박혔다
   — 앞 슬라이드 그림이 다음 장 글자를 덮은 장면이 영상에 남았다(실측).
   정지 화면에는 페이드가 의미도 없다. 렌더 중에는 전환·애니메이션을 통째로 끈다.
   (인라인 style 로 걸린 transition 을 이기려면 !important 가 필요하다) */
body.renderonly .slide,
body.renderonly .slide *,
body.renderonly #frame,
body.renderonly #frame *{transition:none!important;animation:none!important}
body.renderonly .app{display:block;height:100vh}
body.renderonly .stagewrap{height:100vh}
body.renderonly .stagebox{padding:0;height:100vh}
body.renderonly .stage{max-width:none;width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none}

/* ---------- 자동 렌더 패널 (9번) ---------- */
.muted{color:var(--dim)}
.rndbar{display:none;height:6px;border-radius:99px;background:var(--card2);
  border:1px solid var(--line);overflow:hidden;margin-top:8px}
.rndbar i{display:block;height:100%;width:2%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .4s ease}
.rndlist{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.rndrow{display:flex;align-items:center;gap:9px;font-size:12px;padding:4px 0;
  border-bottom:1px solid var(--line)}
.rndrow:last-child{border-bottom:0}
.rndrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.rndrow .st{flex:none;color:var(--mut)}
.rndrow .st.ok{color:var(--gold)}
.rndrow .st.no{color:var(--red)}
.rndrow a{flex:none;color:var(--gold2);text-decoration:none}
.rndrow a:hover{text-decoration:underline}

/* ---------- 썸네일 패널 (10번) ---------- */
.promptbox{margin-top:9px;background:var(--card2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:11.5px;line-height:1.65;color:var(--mut);white-space:pre-wrap;
  word-break:break-word;max-height:190px;overflow:auto;font-family:inherit}
.thshots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.thshots:empty{display:none}
.thshot{display:block;border:1px solid var(--line);border-radius:7px;overflow:hidden;line-height:0}
.thshot:hover{border-color:var(--gold)}
.thshot img{width:100%;height:auto;display:block}

/* ---------- 대본 자동 생성 박스 (1번) ---------- */
.genbox{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;margin-bottom:10px}
.genbox .hint{margin-bottom:8px}
.genbox .btn.pri{width:100%}

/* ---------- 업로드 세트 검수 (11번) ---------- */
.uplab{margin:12px 0 6px;font-size:12px;font-weight:800;color:var(--mut);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.uplab:first-child{margin-top:0}
.cnt{font-weight:700;font-size:11px;color:var(--dim);background:var(--card2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.cnt.over{color:var(--red);border-color:rgba(255,77,77,.45)}
.uprow{display:flex;align-items:flex-start;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.uprow .t{flex:1;font-size:12.5px;line-height:1.55;color:var(--tx);word-break:break-all}
.uprow .m{flex:none;display:flex;align-items:center;gap:6px}
.upbox{background:var(--card2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:11.5px;line-height:1.65;color:var(--mut);
  white-space:pre-wrap;word-break:break-word;max-height:200px;overflow:auto;
  font-family:inherit;margin:0}
.upthumb{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.upthumb div{display:flex;gap:10px;font-size:12px;padding:2px 0}
.upthumb span{color:var(--dim);width:38px;flex:none}
.upnews{background:var(--card2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:12px;line-height:1.6}
.upnews a{color:var(--gold2);text-decoration:none}

/* ---------- 밝은 테마 ----------
   색이 전부 변수로 잡혀 있어서 :root 값만 갈아끼우면 화면 전체가 바뀐다.
   (우측 슬라이드 무대는 8번 "배경 테마" 가 따로 관리한다 — 여기는 툴 화면만) */
:root.lite{
  --deep:#EFEFEF; --bg:#F7F7F7; --panel:#FFFFFF; --ui2:#FAFAFA;
  --card:#FFFFFF; --card2:#F1F1F1;
  --line:#E3E3E3; --line2:#CFCFCF;
  --tx:#111111; --mut:#3D3D3D; --dim:#6B6B6B;   /* 밝은 테마도 보조 텍스트를 진하게 */
  /* ⚠️ 흰 배경에 순수 노랑은 글자로 못 쓴다 — 글자·테두리용은 진한 앰버로 내린다.
     노랑 자체는 아래 .btn.pri 처럼 **배경으로 쓸 때만** 밝게 쓴다. */
  --gold:#8A6A00; --gold2:#6E5400; --cyan:#4A4A4A; --red:#C62828;
  --grn:#12805A; --vio:#5A5A5A;
}
/* 브랜드 노랑은 밝은 화면에서도 그대로 — 대신 글자를 검정으로 */
:root.lite .btn.pri{background:#FFD400;color:#111;border-color:#E8C200;font-weight:800}
:root.lite .btn.pri:hover{background:#FFE566}
:root.lite ::-webkit-scrollbar-thumb{background:#CFCFCF}
:root.lite .panel{box-shadow:1px 0 0 var(--line)}
:root.lite .btn{background:#FFF;border-color:var(--line2)}
:root.lite .btn.pri{background:var(--gold);color:#fff;border-color:var(--gold)}
:root.lite input,:root.lite select,:root.lite textarea{background:#FFF;color:var(--tx)}

/* 테마 버튼 — 패널 우상단 */
.themebtn{position:absolute;top:16px;right:16px;z-index:5;
  background:var(--card2);border:1px solid var(--line);color:var(--mut);
  border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer}
.themebtn:hover{border-color:var(--gold);color:var(--tx)}
.panel{position:relative}

/* 하드코딩된 어두운 배경(#0A111C 등)이 몇 군데 남아 있어 밝은 테마에서 그대로 검게 보였다.
   변수로 바꾸는 대신 밝은 테마에서만 덮어쓴다 — 다크 화면은 손대지 않는다. */
:root.lite .hint,
:root.lite .stat,
:root.lite .lines,
:root.lite input,
:root.lite select,
:root.lite textarea,
:root.lite .promptbox,
:root.lite .upbox,
:root.lite .upthumb,
:root.lite .upnews{background:#F7F9FC;border-color:var(--line)}
:root.lite .btn:hover{background:#EDF1F7}
:root.lite .tbar{background:#DCE3ED}
:root.lite .stagebox .stage{box-shadow:0 18px 60px rgba(20,32,54,.18)}
:root.lite .mecard{background:#F7F9FC}
:root.lite .rndbar,:root.lite .cnt{background:#EDF1F7}
:root.lite kbd{background:#EDF1F7;border-color:var(--line2);color:var(--mut)}

/* ---------- 종목 자동완성 드롭다운 ---------- */
.acbox{position:absolute;z-index:1000;display:none;background:var(--panel);border:1px solid var(--line2);
  border-radius:9px;box-shadow:0 14px 34px rgba(0,0,0,.45);max-height:300px;overflow:auto;font-size:13.5px}
:root.lite .acbox{box-shadow:0 14px 34px rgba(20,33,61,.16)}
.acitem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.acitem:last-child{border-bottom:0}
.acitem:hover,.acitem.on{background:var(--ui2)}
.acitem .acname{color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acitem .accode{color:var(--dim);font-size:11.5px;flex:none;font-variant-numeric:tabular-nums}

/* ---------- 작업 복원 배너 ---------- */
.draftbanner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:11px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:2000;font-size:13px;color:var(--tx);
  display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.draftbanner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
:root.lite .draftbanner{box-shadow:0 14px 40px rgba(20,33,61,.2)}

/* ---------- 스테이지 크기 토글 (작게 기본 · +로 크게) ---------- */
.stagebox{position:relative}
.stagewrap.compact .stage{max-width:640px}
.stagesize{position:absolute;top:14px;right:16px;z-index:6;background:rgba(11,18,32,.72);color:#fff;
  border:1px solid var(--line2);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;
  backdrop-filter:blur(4px)}
.stagesize:hover{background:rgba(11,18,32,.9)}
:root.lite .stagesize{background:rgba(255,255,255,.82);color:#16202F}
:root.lite .stagesize:hover{background:#fff}
body.renderonly .stagesize{display:none}

/* ---------- 이미지 크게 보기(라이트박스) ---------- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:3000;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.show{display:flex}
.lightbox .lbinner{max-width:min(92vw,1280px);display:flex;flex-direction:column;gap:12px}
.lightbox .lbinner img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .lbbar{display:flex;gap:10px;justify-content:center}
.thshot{cursor:zoom-in}

/* ---------- 매매수치 카드 ---------- */
.lvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lvcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center}
.lvcard .lvl{font-size:11px;color:var(--dim);font-weight:600;margin-bottom:3px}
.lvcard .lvv{font-size:14.5px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:var(--tx)}
.lvcard.ent{border-color:rgba(53,215,232,.5)} .lvcard.ent .lvv{color:var(--cyan)}
.lvcard.tgt{border-color:rgba(240,70,75,.5)} .lvcard.tgt .lvv{color:var(--red)}
.lvcard.stop{border-color:rgba(62,123,232,.5)} .lvcard.stop .lvv{color:var(--dn)}
.lvcard.avg{border-color:rgba(245,185,66,.5)} .lvcard.avg .lvv{color:var(--gold)}
.lvsub{margin-top:6px;font-size:11.5px;color:var(--mut);text-align:center;font-variant-numeric:tabular-nums}
.lvnote{margin-top:5px;font-size:10.5px;color:var(--dim);line-height:1.5}

/* ---------- 단계 위저드 ---------- */
.wznav{position:sticky;top:0;z-index:50;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:8px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
:root.lite .wznav{box-shadow:0 6px 18px rgba(20,33,61,.1)}
.wztabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:7px}
.wztab{flex:1 0 auto;white-space:nowrap;border:1px solid var(--line2);background:var(--card);color:var(--mut);border-radius:8px;padding:8px 8px;font-size:12px;font-weight:700;cursor:pointer}
.wztab.on{background:var(--gold);color:#0B1220;border-color:var(--gold)}
.wzctrl{display:flex;gap:6px;align-items:center}
.wz-hide{display:none!important}

/* ---------- 디자인 선택 카드(미리보기) ---------- */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-top:6px}
.dcard{border:2px solid var(--line);background:transparent;border-radius:10px;padding:4px;cursor:pointer;text-align:center}
.dcard.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,185,66,.18)}
.dprev{position:relative;border-radius:7px;padding:9px 8px 8px;min-height:60px;overflow:hidden;text-align:left}
.dprev .dbar{position:absolute;top:0;left:0;right:0;height:3px}
.dprev b{display:block;font-size:11px;font-weight:800;letter-spacing:-.3px;margin-top:2px}
.dprev em{display:block;font-size:8.5px;font-style:normal;margin-top:2px}
.dprev .dchip{display:inline-block;margin-top:5px;border:1px solid;border-radius:9px;padding:1px 6px;font-size:8.5px;font-weight:700}
.dname{display:block;font-size:10.5px;color:var(--mut);margin-top:4px;font-weight:600}
.dcard.on .dname{color:var(--gold)}

/* ---------- 미리보기 인라인 배치(위저드) ----------
   오른쪽 고정칸을 없애고, 슬라이드 섹션 아래에서 확인하는 흐름으로 바꾼다. */
body.inlinepreview .app{grid-template-columns:1fr}
body.inlinepreview .stagewrap{border:1px solid var(--line);border-radius:11px;margin:0 0 12px;overflow:visible}
body.inlinepreview .stagebox{padding:10px}
body.inlinepreview .stagewrap .stage{max-width:100%}
body.inlinepreview.nopreview .stagewrap{display:none}
body.inlinepreview .panel{max-width:760px;margin:0 auto;border-right:0}

/* ---------- 렌더 전 검토표 / 완료 화면 ---------- */
.chklist{border:1px solid var(--line);border-radius:9px;background:#0A111C;padding:9px 11px;margin-bottom:9px}
:root.lite .chklist{background:#F7F9FC}
.chkhead{font-size:12px;font-weight:800;color:var(--gold);margin-bottom:6px}
.chkrow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:11.5px}
.chko{flex:none;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.chko.y{background:rgba(61,220,151,.18);color:var(--grn)}
.chko.n{background:rgba(255,77,77,.18);color:var(--red)}
.chkk{flex:none;width:64px;color:var(--mut)}
.chkv{flex:1;color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chkwarn{margin-top:6px;font-size:11px;color:var(--red)}
.chkok{margin-top:6px;font-size:11px;color:var(--grn)}
.afthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.afthumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}

/* ---------- 데스크톱 와이드 레이아웃 ----------
   좁은 한 칸(모바일처럼)이 아니라 화면을 넓게 쓴다.
   1100px 이상에서 입력칸을 2열로 깔고, 패널 폭도 크게 잡는다. */
body.inlinepreview .panel{max-width:1240px;padding:18px 26px 60px}
@media (min-width:1100px){
  body.inlinepreview .sec>summary{font-size:14px;padding:13px 16px}
  body.inlinepreview .body{padding:0 16px 16px}
  /* 폼 2열 — 넓은 요소(자막·슬라이드·힌트·미리보기 등)는 한 줄 전체 */
  body.inlinepreview .sec .body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  body.inlinepreview .sec .body>.hint,
  body.inlinepreview .sec .body>textarea,
  body.inlinepreview .sec .body>.genbox,
  body.inlinepreview .sec .body>.lines,
  body.inlinepreview .sec .body>.imgs,
  body.inlinepreview .sec .body>.drop,
  body.inlinepreview .sec .body>.stat,
  body.inlinepreview .sec .body>.err,
  body.inlinepreview .sec .body>.row,
  body.inlinepreview .sec .body>#levelsBox,
  body.inlinepreview .sec .body>#hookRows,
  body.inlinepreview .sec .body>#thShots,
  body.inlinepreview .sec .body>#upBody,
  body.inlinepreview .sec .body>#worksList,
  body.inlinepreview .sec .body>#rndCheck,
  body.inlinepreview .sec .body>#rndAfter,
  body.inlinepreview .sec .body>#assetList,
  body.inlinepreview .sec .body>#pexBox,
  body.inlinepreview .sec .body>button,
  body.inlinepreview .sec .body>label.f:has(#designPick),
  body.inlinepreview .sec .body>label.f:has(#designPick2),
  body.inlinepreview .sec .body>label.f:has(textarea){grid-column:1/-1}
  /* 디자인 카드도 넓게 */
  body.inlinepreview .dgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  body.inlinepreview .dprev{min-height:78px}
  body.inlinepreview .dprev b{font-size:13px}
  /* 미리보기 무대 크게 */
  body.inlinepreview .stagewrap .stage{max-width:1100px}
  body.inlinepreview.nowide .stagewrap .stage{max-width:640px}
}

/* ---------- 플랫폼형 셸 (좌측 사이드바 + 상단 헤더) ---------- */
body.platform.inlinepreview .panel{max-width:none;margin:0;padding:0 26px 60px 250px}
.wzshell{position:fixed;left:0;top:0;bottom:0;width:222px;z-index:60;pointer-events:none}
.wzside{height:100%;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;pointer-events:auto}
.wzbrand{display:flex;align-items:center;gap:9px;padding:2px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.wzlogo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--gold),#F07C3C);color:#0B1220;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex:none}
.wzbrand b{display:block;font-size:13px;letter-spacing:-.2px}
.wzbrand em{display:block;font-style:normal;font-size:10px;color:var(--dim);margin-top:1px}
.wzmenu{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1}
.wzitem{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;border-radius:9px;
  padding:9px 10px;color:var(--mut);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.wzitem:hover{background:var(--ui2);color:var(--tx)}
.wzitem.on{background:rgba(245,185,66,.14);color:var(--gold)}
.wzico{font-size:14px;flex:none}
.wztxt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wznum{font-size:10px;color:var(--dim);flex:none}
.wzitem.on .wznum{color:var(--gold)}
.wzfoot{padding-top:10px;border-top:1px solid var(--line)}
/* 상단 헤더 */
body.platform .wznav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wzhead{flex:1;min-width:200px}
.wzhead b{font-size:16px;letter-spacing:-.3px}
.wzsub{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.wzchips{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.wzchip{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:rgba(53,215,232,.12);color:var(--cyan);border:1px solid rgba(53,215,232,.35)}
body.platform .wztabs{width:100%;order:3}
@media (max-width:900px){
  body.platform.inlinepreview .panel{padding-left:26px}
  .wzshell{position:static;width:auto}
  .wzside{flex-direction:row;align-items:center;height:auto;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .wzmenu{flex-direction:row}.wzbrand{border:0;margin:0;padding:0 10px 0 0}.wzfoot{border:0;padding:0 0 0 8px}
}

/* 사이드바 — 제작 모드 + 하위 단계 */
.wzgrp{font-size:9.5px;font-weight:800;color:var(--dim);letter-spacing:.6px;margin:10px 8px 4px}
.wzmode{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:1px solid transparent;
  border-radius:9px;padding:8px 10px;color:var(--mut);cursor:pointer;text-align:left}
.wzmode:hover{background:var(--ui2)}
.wzmode.on{background:rgba(53,215,232,.12);border-color:rgba(53,215,232,.4);color:var(--cyan)}
.wzmode .wztxt b{display:block;font-size:12.5px}
.wzmode .wztxt em{display:block;font-style:normal;font-size:9.5px;color:var(--dim);margin-top:1px}
.wzsteps{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 10px;padding-left:8px;border-left:1px solid var(--line)}
.wzsteps .wzitem{padding:6px 8px;font-size:11.5px}
.wzusage{font-size:10.5px;color:var(--mut);line-height:1.6;margin-bottom:7px;padding:7px 9px;
  background:var(--ui2);border:1px solid var(--line);border-radius:8px}
.wzusage b{color:var(--gold)}
.wzall{color:var(--cyan)}
a.wzitem{text-decoration:none}

/* 실적 패널 · 가이드 · 키움 하위메뉴 */
.upanel{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;max-width:520px;width:92vw;max-height:84vh;overflow:auto}
.upanel h3{font-size:16px;margin-bottom:14px}
.upanel h4{font-size:12px;color:var(--dim);margin:14px 0 6px}
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.ucard{background:var(--ui2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.ucard em{display:block;font-style:normal;font-size:10.5px;color:var(--dim)}
.ucard b{display:block;font-size:20px;color:var(--gold);margin-top:3px}
.ucard.adm b{color:var(--cyan)}
.udlist{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.udrow{display:flex;justify-content:space-between;padding:6px 11px;font-size:11.5px;border-bottom:1px solid var(--line)}
.udrow:last-child{border:0}
.udrow b{color:var(--gold)}
.gd{padding-left:18px;font-size:12px;line-height:1.9}
.gd li{margin-bottom:4px}
.wzsub2{display:flex;gap:4px;margin:4px 0 6px}
.wzsub2b{flex:1;background:transparent;border:1px solid var(--line);border-radius:7px;padding:5px;font-size:10.5px;color:var(--mut);cursor:pointer}
.wzsub2b.on{background:rgba(53,215,232,.14);border-color:rgba(53,215,232,.45);color:var(--cyan);font-weight:700}

/* ---------- 마감 다듬기(세련화) ---------- */
.wzico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(255,255,255,.05);font-size:11px;color:inherit;flex:none}
:root.lite .wzico{background:rgba(20,33,61,.06)}
.wzitem.on .wzico{background:rgba(245,185,66,.22)}
.wzmode.on .wzico{background:rgba(53,215,232,.22)}
.wzside{box-shadow:1px 0 0 rgba(0,0,0,.15)}
.wznav{background:linear-gradient(180deg,var(--panel),var(--ui2));border-radius:14px}
.wztab{transition:.15s;border-radius:9px}
.wztab:hover{border-color:var(--gold);color:var(--tx)}
.sec{transition:border-color .15s;box-shadow:0 1px 2px rgba(0,0,0,.14)}
:root.lite .sec{box-shadow:0 1px 3px rgba(20,33,61,.06)}
.sec:hover{border-color:var(--line2)}
.btn{transition:.14s}
.btn.pri{box-shadow:0 2px 10px rgba(245,185,66,.25)}
.upanel{box-shadow:0 24px 70px rgba(0,0,0,.5)}
.ucard{transition:.15s}.ucard:hover{border-color:var(--gold)}
.udrow.ulink,.udrow.ulink2{cursor:pointer}
.udrow.ulink:hover,.udrow.ulink2:hover{background:var(--ui2)}
.chklist{box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}

/* ══════════════════════════════════════════════════════════
   ▣ 브랜드 톤 — 블랙 · 화이트 · 옐로우 (사용자 지시)
   맨 아래에 두어 앞선 규칙을 덮는다.
   ⚠️ 여기가 화면 색의 **최종 결정자**다. 위쪽 :root 를 고쳐도 이 블록이 덮으므로
      색을 바꾸려면 반드시 여기를 고친다.
   ※ 영상 슬라이드는 designs.css 의 #frame 기준선이 따로 잡고 있어 여기 영향을 받지 않는다.
   ══════════════════════════════════════════════════════════ */
:root{
  --deep:#000000; --bg:#0A0A0A; --panel:#101010; --ui2:#151515;
  --card:#181818; --card2:#1F1F1F;
  --line:#2B2B2B; --line2:#3C3C3C;
  --tx:#FFFFFF; --mut:#C6C6C6; --dim:#8F8F8F;
  --gold:#FFD400; --gold2:#FFE566;      /* 포인트 = 브랜드 옐로우 */
  --cyan:#D8D8D8; --vio:#B9B9B9;        /* 파랑·보라는 무채색으로 중화 */
  --red:#FF5A5A; --grn:#4ADE9A;         /* 오류·성공은 의미 색이라 남긴다 */
}
:root.lite{
  --deep:#EFEFEF; --bg:#F7F7F7; --panel:#FFFFFF; --ui2:#FAFAFA;
  --card:#FFFFFF; --card2:#F1F1F1;
  --line:#E3E3E3; --line2:#CFCFCF;
  --tx:#111111; --mut:#3D3D3D; --dim:#6B6B6B;
  /* 흰 배경에 순수 노랑은 글자로 못 쓴다 — 글자·테두리용은 진한 앰버, 배경용은 아래에서 밝게 */
  --gold:#8A6A00; --gold2:#6E5400; --cyan:#4A4A4A; --vio:#5A5A5A;
  --red:#D32F2F; --grn:#12805A;
}
/* 노란 버튼 위 글씨는 **검정**이어야 읽힌다 */
.btn.pri{background:#FFD400;color:#111;border-color:#E8C200;box-shadow:0 2px 8px rgba(255,212,0,.25)}
.btn.pri:hover{background:#FFE566;border-color:#FFD400}
.wztab.on{background:#FFD400;color:#111;border-color:#FFD400}
.dcard.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,212,0,.18)}
.vsbadge{color:#fff}
/* 라운드·여백을 키워 부드럽게 */
.sec{border-radius:14px}
.sec>summary{padding:13px 15px}
.btn{border-radius:9px;font-weight:700}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=datetime-local],input[type=search],input[type=tel],input[type=email],
select,textarea{border-radius:9px;padding:10px 11px;font-size:12.5px;background:var(--ui2)}
:root.lite input,:root.lite select,:root.lite textarea{background:#fff;border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,212,0,.12)}
.hint{background:var(--ui2);border-radius:10px;color:var(--mut)}
:root.lite .hint{background:#F9FAFB}
.stat{background:var(--ui2);border-radius:10px}
:root.lite .stat{background:#F9FAFB}
.wznav{background:var(--panel);border-radius:16px}
.wzlogo{background:#000;border:1px solid rgba(255,212,0,.35);border-radius:10px;font-size:0;
  display:flex;align-items:center;justify-content:center}
.wzlogo img{width:21px;height:21px;display:block}
.wzitem.on{background:rgba(255,212,0,.12);color:var(--gold)}
.wzitem.on .wzico{background:rgba(255,212,0,.18)}
.wzmode.on{background:rgba(255,212,0,.10);border-color:rgba(255,212,0,.35);color:var(--gold)}
.wzmode.on .wzico{background:rgba(255,212,0,.18)}
.wzchip{background:rgba(255,212,0,.10);color:var(--gold);border-color:rgba(255,212,0,.25)}
.ucard b{color:var(--gold)}
.chkhead{color:var(--gold)}
.stat b,.rng b,.udrow b,.wzusage b{color:var(--gold)}
.lvcard.avg{border-color:rgba(255,212,0,.5)} .lvcard.avg .lvv{color:var(--gold)}
.tbar i{background:linear-gradient(90deg,#FFD400,#FFE566)}
.tctrl button.play{background:var(--gold);color:#111;border-color:var(--gold)}
.drop.on{border-color:var(--gold);background:rgba(255,212,0,.08);color:var(--gold)}
.chk input{accent-color:var(--gold)}
.rng input[type=range]{accent-color:var(--gold)}
.sec>summary::before{color:var(--gold)}
.panel h1 span{color:var(--gold)}

/* ══════════════════════════════════════════════════════════
   ▣ 플랫폼 셸 — 상단바 · 랜딩(로그인 게이트) · 3D 입체감
   ══════════════════════════════════════════════════════════ */
body{overflow:auto}
.apptop{position:fixed;top:0;left:0;right:0;height:60px;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(20,33,61,.06)}
:root:not(.lite) .apptop{background:rgba(18,22,29,.72);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.atbrand{display:flex;align-items:center;gap:10px}
/* 브랜드 마크 — 글자 'E' 대신 일식 로고(icons/logo.svg)를 넣는다 */
.atlogo{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:0;background:#000;border:1px solid rgba(255,212,0,.35);
  box-shadow:0 6px 14px rgba(255,212,0,.18)}
.atlogo img{width:24px;height:24px;display:block}
.atbrand b{display:block;font-size:14px;letter-spacing:-.3px}
.atbrand em{display:block;font-style:normal;font-size:10.5px;color:var(--dim)}
.atright{display:flex;align-items:center;gap:8px}
.atuser{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:30px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 2px 6px rgba(20,33,61,.06)}
.atav{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#FFD400,#E0B400);color:#111;font-weight:800;font-size:12px;
  box-shadow:0 3px 8px rgba(255,212,0,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.atinfo b{display:block;font-size:12px;line-height:1.2}
.atinfo em{display:block;font-style:normal;font-size:10px;color:var(--dim)}

/* 로그인 전에는 작업화면을 감춘다 */
body.guest .app,body.guest .wzshell,body.guest #wznav{display:none!important}
body.authed .landing{display:none}
body.authed .app{padding-top:60px}
body.authed .wzside{top:60px;height:calc(100% - 60px)}

/* 랜딩 */
.landing{position:fixed;inset:0;z-index:150;overflow:auto;display:flex;align-items:center;justify-content:center;padding:90px 24px 40px}
.ldbg{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(900px 520px at 14% -8%,rgba(255,212,0,.16),transparent 62%),
    radial-gradient(720px 440px at 88% 6%,rgba(255,212,0,.07),transparent 60%),
    var(--bg)}
.ldwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;max-width:1100px;width:100%;align-items:center}
.ldtag{display:inline-block;font-size:11.5px;font-weight:800;color:var(--gold);
  background:rgba(255,212,0,.10);border:1px solid rgba(255,212,0,.32);padding:6px 13px;border-radius:30px}
.ldhero h1{font-size:42px;font-weight:900;letter-spacing:-1.6px;line-height:1.22;margin:18px 0 12px}
.ldhero h1 b{background:linear-gradient(100deg,#FFD400,#FFE566 55%,#D9B300);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ldhero p{font-size:15px;color:var(--mut);line-height:1.7}
.ldfeat{display:grid;gap:10px;margin-top:26px}
.lf{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(20,33,61,.07),inset 0 1px 0 rgba(255,255,255,.55);transition:.2s}
:root:not(.lite) .lf{box-shadow:0 8px 20px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)}
.lf:hover{transform:translateY(-2px)}
.lf i{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-style:normal;color:#111;background:linear-gradient(145deg,#FFD400,#E8C200);
  box-shadow:0 5px 12px rgba(255,212,0,.28),inset 0 1px 0 rgba(255,255,255,.45);flex:none}
.lf b{font-size:13px;display:block}
.lf em{font-style:normal;font-size:11px;color:var(--dim);display:block;margin-top:1px}
.ldcard{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px 28px;
  box-shadow:0 30px 70px rgba(20,33,61,.16),0 2px 0 rgba(255,255,255,.6) inset}
:root:not(.lite) .ldcard{box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.ldcard h3{font-size:20px;margin-bottom:4px}
.ldsub{font-size:12px;color:var(--dim);margin-bottom:18px}
.ldcard .btn.pri{margin-top:6px;padding:12px;font-size:14px}
@media (max-width:900px){ .ldwrap{grid-template-columns:1fr;gap:28px} .ldhero h1{font-size:32px} }

/* ---- 3D 입체감 (전역) ---- */
.sec{box-shadow:0 6px 18px rgba(20,33,61,.07),inset 0 1px 0 rgba(255,255,255,.5)}
:root:not(.lite) .sec{box-shadow:0 6px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
.sec:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(20,33,61,.1)}
.btn{box-shadow:0 2px 5px rgba(20,33,61,.08),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:linear-gradient(145deg,#FFD400,#E0B400);
  box-shadow:0 6px 16px rgba(255,212,0,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.pri:hover{box-shadow:0 8px 22px rgba(255,212,0,.5)}
.kpi,.ucard,.lvcard,.dcard,.wznav,.upanel{box-shadow:0 8px 22px rgba(20,33,61,.09),inset 0 1px 0 rgba(255,255,255,.5)}
:root:not(.lite) .kpi,:root:not(.lite) .ucard,:root:not(.lite) .lvcard,
:root:not(.lite) .dcard,:root:not(.lite) .wznav{box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)}
.wzitem.on,.wzmode.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px rgba(255,212,0,.18)}
.wzlogo,.wzico{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.stagewrap{box-shadow:0 14px 40px rgba(20,33,61,.14)}
:root:not(.lite) .stagewrap{box-shadow:0 14px 40px rgba(0,0,0,.5)}

/* 우측 상단 프로필이 눌리지 않게 (flex 축소 방지) */
.atright{flex:none;white-space:nowrap}
.atright .btn{width:auto;flex:none;padding:7px 12px}
.atuser{flex:none}
.atinfo{display:flex;flex-direction:column;min-width:0}
.atinfo b,.atinfo em{white-space:nowrap}
.apptop .atbrand{flex:none}

/* ---------- 홈(대기) 화면 ---------- */
body.athome .sec,body.athome .stagewrap,body.athome #wznav{display:none!important}
.wzhome{display:none;max-width:960px;margin:0 auto;padding:12px 0 40px}
body.athome .wzhome{display:block}
.hhero{text-align:center;padding:26px 0 30px}
.htag{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:2px;color:var(--gold);
  background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.25);padding:5px 14px;border-radius:30px}
.hhero h2{font-size:32px;font-weight:900;letter-spacing:-1.2px;margin:16px 0 8px}
.hhero p{font-size:13.5px;color:var(--mut);line-height:1.7}
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.hcard{position:relative;text-align:left;padding:26px 24px 22px;border-radius:20px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 14px 34px rgba(20,33,61,.12),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s}
:root:not(.lite) .hcard{box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.hcard::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(420px 180px at 80% -10%,rgba(255,212,0,.14),transparent 60%);opacity:0;transition:.22s}
.hcard:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 26px 54px rgba(255,212,0,.18)}
.hcard:hover::after{opacity:1}
.hcard:active{transform:translateY(-2px) scale(1)}
.hicon{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#111;margin-bottom:16px;
  background:linear-gradient(145deg,#FFD400,#E0B400);
  box-shadow:0 12px 24px rgba(255,212,0,.32),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(0,0,0,.18)}
/* 키움차트형만 톤을 낮춘 노랑으로 구분(보라를 쓰면 브랜드 3색에서 벗어난다) */
.hicon.kiwoom{background:linear-gradient(145deg,#3A3A3A,#181818);color:#FFD400;
  border:1px solid rgba(255,212,0,.35);
  box-shadow:0 12px 24px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.08)}
.hcard b{display:block;font-size:17px;letter-spacing:-.4px}
.hcard em{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:4px}
.hgo{display:inline-block;margin-top:16px;font-size:12px;font-weight:800;color:var(--gold)}
.hstat{margin-top:20px;text-align:center;font-size:12px;color:var(--dim)}

/* 홈에서는 스튜디오 잔재(제목·단축키 안내·재생버튼)를 감춘다 */
body.athome .panel>h1,body.athome .panel>.ver,body.athome #btnFull,body.athome .themebtn{display:none}

/* 홈 위젯 */
.hwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.hw{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-align:left;
  box-shadow:0 8px 20px rgba(20,33,61,.08),inset 0 1px 0 rgba(255,255,255,.5)}
:root:not(.lite) .hw{box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.hw em{display:block;font-style:normal;font-size:11.5px;color:var(--dim)}
.hw b{display:block;font-size:26px;font-weight:900;color:var(--gold);margin-top:4px;letter-spacing:-1px}
.hw b i{font-style:normal;font-size:12px;font-weight:700;color:var(--mut);margin-left:3px}
.hw.adm b{color:var(--gold2)}
.hwbox{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:0 8px 20px rgba(20,33,61,.07),inset 0 1px 0 rgba(255,255,255,.5);text-align:left}
:root:not(.lite) .hwbox{box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.hwbox h5{font-size:12px;color:var(--dim);margin-bottom:8px;font-weight:700}
.hwrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.hwrow:last-child{border:0}
.hwrow span{color:var(--dim);font-size:11.5px}
.hwempty{font-size:12px;color:var(--dim);padding:6px 0}
.hwquick{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hwquick .btn{width:auto;padding:9px 16px}

/* 진행 중인 렌더 위젯 */
.hwlane{float:right;font-size:10px;color:var(--dim);font-weight:600}
.hwrnd{padding:9px 0;border-bottom:1px solid var(--line)}
.hwrnd:last-of-type{border:0}
.hwrtop{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:6px}
.hwst{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;background:var(--ui2);color:var(--dim)}
.hwst.go{background:rgba(255,212,0,.18);color:var(--gold)}
.hwbar{height:6px;border-radius:6px;background:var(--ui2);overflow:hidden}
.hwbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#FFD400,#FFE566);transition:width .4s}
.hwsub{font-size:10.5px;color:var(--dim);margin-top:4px}
.hwdone{margin-top:9px;font-size:11px;color:var(--dim)}
.hwdone a{color:var(--gold);font-weight:700}
.atprof{width:auto;padding:7px 10px;font-size:12px;border-radius:9px;max-width:180px}
.hpv{margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--ui2);border:1px dashed var(--line2)}
.hpv h5{font-size:11.5px;color:var(--gold);margin-bottom:8px;font-weight:800}
.hpv h5 span{color:var(--dim);font-weight:600}
.hpv p{font-size:12.5px;line-height:1.75;color:var(--tx);margin:5px 0}
.hpv p b{color:var(--gold)}
.hpvempty{color:var(--dim)!important;font-size:12px!important}
.hpvmsg{font-size:11px;color:var(--dim);align-self:center}
.hpvai{margin-top:10px;padding:13px 15px;border-radius:11px;background:var(--panel);border:1px solid var(--gold);
  box-shadow:0 4px 14px rgba(255,212,0,.18)}
.hpvai b{display:block;font-size:11px;color:var(--gold);margin-bottom:6px}
.hpvai p{font-size:13px;line-height:1.8;margin:3px 0;color:var(--tx)}

/* ══════════════════════════════════════════════════════════
   ▣ 다크 테마 가독성 보정
   button/a 는 부모 색을 안 물려받아 브라우저 기본 검정으로 떨어진다.
   밝은 테마에선 티가 안 나지만 다크에선 글씨가 안 보인다.
   ══════════════════════════════════════════════════════════ */
button{color:inherit}
.hcard,.hcard b{color:var(--tx)}
/* 후킹 교체 이력 — 전문가별로 담당자가 달라 누가 언제 바꿨는지 남긴다 */
.hkhist{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.hkhist b{display:block;margin-bottom:3px;color:var(--mut);font-size:11px}
.hkhist div{line-height:1.65}
/* 후킹 캡처 종류 선택 — 문자/소통방을 잘못 적으면 대본이 거짓말이 된다 */
.proofkind{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.proofkind>b{font-size:12px;color:var(--mut)}
.pkset{display:flex;gap:6px}
.proofkind .pk.on{background:var(--gold);color:#fff;border-color:var(--gold);
  box-shadow:0 2px 8px rgba(255,212,0,.25)}
.pkmsg{font-size:11px;color:var(--dim);flex:1 1 100%}
/* 렌더 워커는 미리보기 숨김(nopreview)·상단바 같은 툴 UI에 영향을 받으면 안 된다.
   ※ 이걸 안 걸어두면 무대가 0×0 이 되어 로그인/빈 화면이 촬영된다. */
body.renderonly.inlinepreview.nopreview .stagewrap{display:block!important}
body.renderonly .apptop,body.renderonly .wznav,body.renderonly .wzside,
body.renderonly .wzhome,body.renderonly .landing{display:none!important}
body.renderonly .app{padding:0!important;margin:0!important}
/* 무대를 화면에 정확히 맞춘다 — 42px 모자라 위아래가 잘리고 있었다(제목 잘림·하단 띠) */
body.renderonly .stagewrap,body.renderonly .stagebox{
  height:100vh!important;padding:0!important;margin:0!important;border:0!important}
body.renderonly .stagewrap>*:not(.stagebox){display:none!important}
body.renderonly .stagebox>*:not(.stage){display:none!important}
body.renderonly html,body.renderonly body{overflow:hidden!important}
/* 5단계 테마 선택 버튼 */
#themePick2 .tsel.on{background:var(--gold);color:#fff;border-color:var(--gold);
  box-shadow:0 2px 8px rgba(255,212,0,.25)}
/* 계정/채널 라벨 — 이름만 보이면 채널 전문가명으로 오해한다 */
.wzlb{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.3px;
  padding:1px 5px;border-radius:5px;background:rgba(255,212,0,.18);color:var(--gold);margin-right:3px}
/* 업로드 세트 — 전체 내려받기 줄 */
.uphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.uphead .muted{font-size:11.5px;color:var(--grn)}
/* 상단 "작업 완료" — 한 종목을 끝내고 새 작업으로 */
#atDone{background:var(--grn);border-color:var(--grn);color:#fff;font-weight:800;
  box-shadow:0 2px 8px rgba(2,182,123,.28)}
#atDone:hover{filter:brightness(1.06)}
/* 보관 영상 목록 머리말 */
.arcHead{font-size:11.5px;font-weight:800;color:var(--mut);padding:6px 0 4px;border-top:1px solid var(--line);margin-top:4px}

/* ---- 실시간 인기 종목 (창·기준 탭 + 칩) ---- */
.rtabs{display:flex;align-items:center;gap:4px;margin-bottom:5px;flex-wrap:wrap}
.rtabs .rtab{border:1px solid var(--line2);background:var(--card);color:var(--mut);
  border-radius:14px;padding:2px 9px;font-size:11px;cursor:pointer;line-height:1.7}
.rtabs .rtab:hover{color:var(--tx);border-color:var(--line)}
.rtabs .rtab.on{background:#FFD400;border-color:#FFD400;color:#111;font-weight:700}
.rtabs .rsep{width:1px;height:13px;background:var(--line2);margin:0 4px}
.rhint{font-size:11px;color:var(--dim)}
.rankchip{flex:none;white-space:nowrap;border:1px solid var(--line2);background:var(--card);
  border-radius:20px;padding:5px 11px;cursor:pointer;font-size:12px;color:inherit;
  display:inline-flex;align-items:center;gap:6px}
.rankchip:hover{border-color:#FFD400}
.rankchip .rno{font-size:10px;color:var(--dim);font-weight:700;min-width:11px}
.rankchip b{color:var(--tx)}
.rankchip .rpc,.rankchip .rvol{font-variant-numeric:tabular-nums}
.rankchip .rvol{font-size:11px;color:var(--dim)}

/* ---- 장 상태 표시등 (시점 드롭다운 옆) ---- */
.mktdot{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;
  font-size:11.5px;font-weight:700;padding:0 9px;height:34px;border-radius:9px;
  border:1px solid var(--line2);background:var(--card)}
.mktdot i{width:8px;height:8px;border-radius:50%;flex:none;animation:mktblink 1.35s ease-in-out infinite}
.mktdot em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--dim);margin-left:4px}
.mktdot.green{color:#0F9D58;border-color:rgba(15,157,88,.35)}
.mktdot.green i{background:#0F9D58;box-shadow:0 0 7px rgba(15,157,88,.75)}
.mktdot.amber{color:#B8860B;border-color:rgba(212,160,23,.4)}
.mktdot.amber i{background:#E8A317;box-shadow:0 0 7px rgba(232,163,23,.75)}
.mktdot.red{color:#D93025;border-color:rgba(217,48,37,.35)}
.mktdot.red i{background:#D93025;box-shadow:0 0 7px rgba(217,48,37,.7)}
@keyframes mktblink{0%,100%{opacity:1}50%{opacity:.22}}
@media (prefers-reduced-motion:reduce){.mktdot i{animation:none}}

.mktwarn{display:none;margin:-2px 0 7px;padding:7px 10px;border-radius:8px;font-size:11.5px;line-height:1.55;
  background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.38);color:var(--tx)}
.mktwarn b{color:#B8860B}
:root.lite .mktwarn b{color:#8A6100}

/* ---- 음성 자동 생성 안내 (버튼을 감췄을 때 그 자리) ---- */
.ttsauto{display:none;margin:2px 0 4px;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.6;
  background:rgba(255,212,0,.10);border:1px solid rgba(255,212,0,.30);color:var(--tx)}
.ttsauto b{color:#C9A200}

/* ---- 후킹: 유형·입력방식 토글 사이 구분선 ---- */
.hksep{width:1px;height:14px;background:var(--line2);margin:0 3px}

/* ---- 판매 등급으로 잠긴 항목 ---- */
.dcard.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.7)}
.dcard.locked:hover{transform:none;box-shadow:none}
select option:disabled{color:var(--dim)}

/* 코인 모드 — 24시간 장이라 장전/장중/장마감 표시등·경고가 의미 없다 */
.coinmode #mktDot,.coinmode #mktWarn{display:none!important}

/* ── 자동 제작 파이프라인 패널 ── */
#pipePanel{position:fixed;inset:0;background:rgba(5,8,14,.55);backdrop-filter:blur(3px);z-index:400;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
#pipePanel.show{display:flex}
.pipeInner{background:var(--panel);border:1px solid var(--line2);border-radius:14px;width:min(980px,96vw);
  padding:16px 18px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.pipeHead{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.ptab{background:none;border:1px solid var(--line);border-radius:8px;color:var(--mut);
  padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
.ptab.on{color:var(--tx);border-color:var(--gold);background:rgba(245,185,66,.08)}
.pipeForm .pfrow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.pipeForm label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim);min-width:90px}
.pipeForm label input,.pipeForm label select{height:34px}
.pipeForm .chk{flex-direction:row;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.pipeList{margin-top:12px;border-top:1px solid var(--line)}
.prow{display:flex;gap:8px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.prow b{font-size:13.5px}
.prow .psub{color:var(--dim);font-size:11.5px}
.prow .pst{margin-left:auto;font-size:12px;font-weight:700;color:var(--mut)}
.prow .pst.run{color:var(--gold)} .prow .pst.ok{color:#27B579} .prow .pst.bad{color:var(--red)}
.pchip{font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:1px 7px;color:var(--dim)}
.pchip.ok{color:#27B579;border-color:rgba(39,181,121,.45)}
.pchip.run{color:var(--gold);border-color:rgba(245,185,66,.5)}
.pchip.bad{color:var(--red);border-color:rgba(255,77,77,.5)}
.pchip.skip{opacity:.5}
.prow.pdone{cursor:pointer}
.pdetail{padding:10px 6px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.pdrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pcopy{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;overflow:hidden}
.pcopyhead{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;
  background:var(--ui2);font-size:12px;font-weight:700;color:var(--mut)}
.pcopy pre{margin:0;padding:9px 12px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;
  word-break:break-word;max-height:180px;overflow:auto;color:var(--tx);font-family:inherit}

/* ---- 만들기(1단계) 옆칸 배치 — 원터치가 스크롤 없이 바로 보이게 ---- */
#mkGrid{display:block}
body.wzmake #mkGrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:0 16px;align-items:start}
#mkGrid .mkcol{min-width:0}
@media (max-width:1100px){ body.wzmake #mkGrid{display:block} }

/* ---- 오른쪽 「화면 옵션」이 없는 유형은 왼쪽이 화면을 다 쓴다 ----
   정보형·기업분석형·웹툰형·레퍼런스형은 #secScreen 을 숨긴다(테마로 갈음). 그러면
   오른쪽 칸이 텅 빈 채로 화면의 40%를 차지해 왼쪽이 쓸데없이 좁았다(사용자 지시).
   그 네 유형에서는 한 칸으로 편다. */
body.wzmake.infomode #mkGrid,
body.wzmake.deepmode #mkGrid,
body.wzmake.toonmode #mkGrid,
body.wzmake.refmode #mkGrid{display:block}

/* ---- 유튜브 업로드 자동화는 당분간 화면에서 내린다(사용자 지시: "일단 전부 가려줘") ----
   ⚠️ DOM 에서 빼지 않는다 — 연동 상태·업로드 세트를 읽는 코드가 이 안을 본다.
   다시 열려면 이 두 줄만 지우면 된다.
   ※ 단계 제목 번호는 renumber() 가 **실제로 보이는 섹션만** 세므로 자동으로 맞춰진다. */
#ytSec{display:none}

/* ---- 「전체보기」는 마스터에게만 보인다 (사용자 지시: 거래처에겐 필요 없다) ----
   ⚠️ 아예 없애면 안 된다 — 이 버튼이 **유일한 통로**인 섹션이 8개 있다
      (음성과 싱크 · 슬라이드 편집 · 시세 데이터 · 자동 강조 규칙 · 차트 이미지 ·
       후킹 이미지 · 작업 저장 · 내 채널). 뭔가 어긋났을 때 손볼 자리가 통째로 사라진다.
   그래서 거래처 화면에서만 감추고 마스터(role=admin)에게는 남긴다.
   body.adminuser 는 session.js 가 붙인다. */
#wzAll{display:none}
body.adminuser #wzAll{display:inline-block}
/* 생성 버튼 묶음 — 제자리 고정(따라다니는 스크롤 고정은 사용자 지시로 뺐다) */
body.wzmake #genActions{margin-top:6px}

/* ---- 상단 위저드 헤더 컴팩트 — 본문이 더 보이게 (API 칩은 제거) ---- */
.wznav{padding:7px 12px 7px}
.wznav .wzhead{margin-bottom:4px}
.wznav #wzTitle{font-size:14.5px}
.wznav .wzsub{font-size:11px}
.wznav .wzchips{display:none}
.wznav .wztab{padding:5px 10px;font-size:12px}
.wznav .wzctrl .btn{padding:4px 10px;font-size:12px}

/* ---- 원터치 인라인 진행/결과 — 만들기 폼이 통째로 이 화면으로 바뀐다 ---- */
/* 2단계 맨 위의 채널명·진행자·전화번호 상자 — genbox 와 같은 생김새지만
   원터치 숨김 규칙(.genbox>*)에 안 걸리게 클래스를 달리 한다 */
.brandbox{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:10px}
.brandbox .hint{margin-bottom:8px}
/* ⚠️ 예전의 `body.oneshot .genbox>*{display:none}` 은 지웠다(실측 2026-08-26).
   한 페이지 시절엔 폼 자리에 진행 상자가 바로 보였지만, 4단계 개편 뒤로는
   진행 상자(#oneProg)가 **4단계(제작·업로드)** 에 그려진다 — 그래서 이 규칙은
   1단계 만들기 폼만 텅 비게 만들었다("자막대본 안 뜬다" 신고 두 번).
   지금은 폼을 숨기지 않고, 1단계 맨 위에 안내띠(#osNote)만 얹는다(pipeline.js). */
#osNote{display:none;background:var(--ui2);border:1px solid var(--line2);border-radius:9px;
  padding:9px 13px;margin:0 0 10px;font-size:13px;cursor:pointer}
#osNote b{color:var(--gold,#e7b73c)}
body.oneshot #osNote{display:block}
.osbox{border:1px solid var(--line2);border-radius:14px;padding:16px 16px 14px;background:var(--ui2)}
.osbox.ok{border-color:rgba(80,200,120,.45)}
.osbox.bad{border-color:rgba(230,80,80,.5)}
.oshead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.oshead b{font-size:16px}
.oshead span{font-size:12px;color:var(--mut);display:flex;gap:4px;align-items:center}
.oschips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}

/* ---- 레퍼런스형 모드 분리 ----
   레퍼런스 칸은 🎬 레퍼런스형에서만, 대본 스타일·티저는 레퍼런스형에서 숨김(가이드 미사용) */
#refWrap{display:none}
body.refmode #refWrap{display:block}
body.refmode #styleWrap, body.refmode #teaserWrap{display:none}
/* 정보형 — CTA·인사 선택 체크 + 대본 스타일(무게중심). 티저만 숨김.
   ⚠️ 스타일 칸을 숨기지 않는다(사용자 지시 2026-08-21) — 정보형·기업분석형·웹툰형도
   대본 스타일이 프롬프트에 실린다(본선 STY 블록·정보형 무게중심 블록). */
#infoOpts{display:none}
body.infomode #infoOpts{display:block}
body.infomode #teaserWrap{display:none}
/* 기업분석형 — 화면 구성은 정보형과 같다(테마·시점·CTA·인사 선택).
   다른 점은 분량뿐이다: 17블록 600초가 프로필에 박혀 있어 고를 게 없다. */
body.deepmode #infoOpts{display:block}
body.deepmode #teaserWrap{display:none}
body.deepmode #infoLenWrap{display:none}
/* 웹툰형 — 기업분석형과 같은 칸을 쓴다(테마·시점·CTA·인사). 분량은 15분 고정 */
body.toonmode #infoOpts{display:block}
body.toonmode #teaserWrap{display:none}
body.toonmode #infoLenWrap{display:none}
/* 캐릭터 등록 칸은 웹툰형에서만 */
#toonCharWrap{display:none}
body.toonmode #toonCharWrap{display:block}

/* ---- 맨 아래 대본 원문 칸은 **모든 유형에서** 화면에 두지 않는다(사용자 지시) ----
   대본은 제작을 돌리면 자동으로 채워지고 검수는 검수함에서 한다 —
   여기서 할 일이 없는데 22줄짜리 빈 칸이 늘 펼쳐져 있어 자리만 잡아먹었다.
   처음엔 기업분석형·웹툰형만 감췄다가 나머지도 같다고 하여 전체로 넓혔다.

   ⚠️ DOM 에서 빼면 안 된다 — app.js·gen.js·render.js·draft.js 가 #subText 의 **값**을 읽고
      제작·음성·렌더·작업저장이 전부 그 값으로 돈다. 지우면 렌더가 통째로 멈춘다.
      보이지만 않게 한다.
   ※ #lineList 도 같이 감춘다 — 자막 줄을 눌러 미리보기를 그 자리로 옮기던 기능이
     함께 사라진다. 되살리려면 아래에서 #lineList 만 빼면 된다.

   ⚠️ `.subhead{display:flex}` 가 이 파일 **아래쪽** 에 또 있다.
      순서가 늦은 쪽이 이기므로 `.subhead` 만 써서는 안 먹는다(실제로 안 먹었다).
      `.sec .subhead` 로 한 단계 좁혀 순서와 무관하게 이기게 한다. */
.sec .subhead, #subText, #lineList{display:none}

/* ---- 짧은 알림(토스트) — 버튼을 눌렀다는 걸 알려준다 ---- */
#vgToast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:900;
  background:#111;color:#fff;border:1px solid var(--gold);border-radius:12px;
  padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:-.2px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.22s}
#vgToast.show{opacity:1;transform:translate(-50%,0)}

/* ---- 모드별 화면 정리 (사용자 지시: 정보형·레퍼런스는 별개로 관리) ----
   ⚠️ "화면 옵션"(디자인 그리드·배경 테마)은 **PPT형·키움차트형에서 쓰는 것**이다.
      정보형은 테마 드롭다운이, 레퍼런스형은 분석한 레퍼런스가 디자인을 정하므로
      같은 칸이 또 뜨면 어느 쪽이 이기는지 알 수 없다 — 그 두 모드에서는 숨긴다. */
body.infomode #secScreen, body.refmode #secScreen, body.deepmode #secScreen, body.toonmode #secScreen{display:none!important}

/* 정보형도 시점을 고를 수 있다 — "시점 없음" 이 기본이고, 고르면 그 화법이 반영된다.
   칸을 감추지 않는다(사용자 지시: 시점에 맞게도, 시점 없이도 되게). */
body.infomode #genTiming,body.deepmode #genTiming,body.toonmode #genTiming{min-width:132px}

/* 문자 키워드는 CTA 를 켰을 때만 쓴다 — 꺼져 있으면 흐리게 잠근다 */
body.infomode #ctaWrap,body.infomode #ctaPlanWrap,
body.deepmode #ctaWrap,body.deepmode #ctaPlanWrap,
body.toonmode #ctaWrap,body.toonmode #ctaPlanWrap{opacity:.4;pointer-events:none}
body.infomode.ctaon #ctaWrap,body.infomode.ctaon #ctaPlanWrap,
body.deepmode.ctaon #ctaWrap,body.deepmode.ctaon #ctaPlanWrap,
body.toonmode.ctaon #ctaWrap,body.toonmode.ctaon #ctaPlanWrap{opacity:1;pointer-events:auto}
body.refmode #ctaWrap,body.refmode #ctaPlanWrap{opacity:.4;pointer-events:none}
body.refmode.ctaon #ctaWrap,body.refmode.ctaon #ctaPlanWrap{opacity:1;pointer-events:auto}

/* ---- 2단계 · 문자 안내(CTA) ----
   CTA 를 넣을지 **고를 수 있는 건 정보형·레퍼런스형뿐**이다(사용자 지시).
   PPT·키움·코인은 항상 들어가므로 체크 대신 안내 문구만 보여준다. */
#infoCtaWrap,#infoGreetWrap,#refCtaWrap{display:none}
body.infomode #infoCtaWrap,body.infomode #infoGreetWrap,
body.deepmode #infoCtaWrap,body.deepmode #infoGreetWrap,
body.toonmode #infoCtaWrap,body.toonmode #infoGreetWrap{display:flex}
/* 시작 고지 — 정보형에서만 고른다. 다른 유형은 화면 옵션의 고지 설정을 쓴다. */
#infoIntroWrap{display:none}
body.infomode #infoIntroWrap,body.deepmode #infoIntroWrap,body.toonmode #infoIntroWrap{display:flex}
body.refmode #refCtaWrap{display:flex}
/* 테스트 채널(이름·번호 숨김)은 **어느 유형에서든** 문자 안내를 고를 수 있어야 한다.
   기본은 꺼짐(서버가 그렇게 판정한다) — 필요한 회차만 여기서 켠다.
   ⚠️ 그래서 "항상 들어갑니다" 안내는 테스트 채널에서 감춘다(거짓말이 된다). */
body.testch #infoCtaWrap{display:flex}
#ctaAlways{display:none}
body:not(.infomode):not(.refmode):not(.deepmode):not(.toonmode):not(.testch) #ctaAlways{display:block}

/* ---- 원터치 버튼 상태 ----
   돌고 있는지 한눈에 보여야 또 누르지 않는다. */
.btn.working{background:var(--card2)!important;color:var(--mut)!important;
  border-color:var(--line)!important;cursor:not-allowed;font-weight:700}
.btn.working::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;
  border-radius:50%;background:var(--gold);vertical-align:middle;animation:onepulse 1.1s infinite}
@keyframes onepulse{0%,100%{opacity:.25}50%{opacity:1}}
.btn.done{background:var(--grn)!important;border-color:var(--grn)!important;color:#fff!important}

/* ---- 썸네일 디자인 보관함 ---- */
.thsnote{font-size:11px;line-height:1.6;margin-top:5px;color:var(--dim)}
.thsnote:empty{display:none}
.tsprev{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.tsprev img{width:150px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:7px}
.tsab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}
.tsab > div{min-width:0}
.tsab b{display:block;font-size:11.5px;font-weight:800;margin-bottom:4px;color:var(--gold)}
.tsab img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:8px}
@media (max-width:700px){ .tsab{grid-template-columns:1fr} }

/* ---- 2단계 · 후킹 요약판 ----
   평소엔 지금 대본에 박혀 있는 것만 보여준다. 교체할 때만 편집 화면을 펼친다. */
.hksum{border:1px solid var(--line);border-radius:10px;background:var(--card2);padding:10px 12px}
.hksumhead{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.hksumhead b{font-size:12.5px;font-weight:800;letter-spacing:-.2px;flex:1;min-width:0}
.hksumhead .btn{width:auto;flex:none;padding:4px 12px;font-size:11.5px}
.hkline{display:flex;gap:8px;font-size:12px;padding:4px 0;border-top:1px solid var(--line);line-height:1.5}
.hkline:first-child{border-top:0}
.hkline i{flex:none;font-style:normal;font-size:10.5px;font-weight:700;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;align-self:flex-start;margin-top:1px}
.hkline span{min-width:0;word-break:break-word}
.hkempty{font-size:11.5px;color:var(--dim);padding-top:3px}

/* ---- 2단계 · CTA — 고르는 칸을 맨 위에 나란히 ---- */
.ctatop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0 14px;margin:2px 0 4px}
@media (max-width:820px){ .ctatop{display:block} }
.ctatop .f{margin:0 0 8px}
.ctatop .f > span b{color:var(--dim);font-weight:600}

/* 접어두는 설명 — 매번 읽을 것이 아니라 처음 한 번, 헷갈릴 때만 본다 */
.note{border:1px solid var(--line);border-radius:9px;background:var(--card2);margin-top:4px}
.note > summary{cursor:pointer;padding:7px 11px;font-size:11.5px;font-weight:700;color:var(--dim);list-style:none}
.note > summary::-webkit-details-marker{display:none}
.note > summary::before{content:'\2753  '}
.note > summary:hover{color:var(--tx)}
.note > div{padding:0 11px 10px;font-size:11px;line-height:1.75;color:var(--dim)}
.note b{color:var(--mut)}

/* ---- 3단계 · 제작 요약 ---- */
.mksum{border:1px solid var(--line);border-radius:10px;background:var(--card2);padding:11px 13px;margin-bottom:10px}
.mksum:empty{display:none}
.mksum h5{margin:0 0 7px;font-size:11.5px;font-weight:800;color:var(--gold);letter-spacing:-.2px}
.mkrow{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:3px 0;border-top:1px solid var(--line)}
.mkrow:first-of-type{border-top:0}
.mkrow span{color:var(--dim);flex:none}
.mkrow b{text-align:right;word-break:break-all}
.mkmiss{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:11.5px;color:var(--red);line-height:1.6}

/* ---- 자막 대본 칸 ----
   생성된 대본을 훑어보는 칸이라 넉넉해야 한다(사용자 지시: "칸을 늘려서 보기 편하게").
   라벨 없이 큰 빈 칸만 있으면 무슨 칸인지 알 수 없어 머리글을 붙였다. */
.subhead{display:flex;align-items:baseline;gap:8px;margin:12px 0 5px;flex-wrap:wrap}
.subhead b{font-size:12.5px;font-weight:800;letter-spacing:-.2px}
.subhead span{font-size:10.5px;color:var(--dim)}
#subText{min-height:360px;line-height:1.7}

/* ---- 홈 카드 분류 머리글 ---- */
.hgrp{display:flex;align-items:baseline;gap:10px;margin:26px 2px 12px}
.hgrp:first-of-type{margin-top:8px}
.hgrp b{font-size:15px;font-weight:800;letter-spacing:-.3px}
.hgrp em{font-style:normal;font-size:12px;color:var(--dim)}
.hcards + .hgrp{margin-top:30px}

/* 사이드바 배지 — 작업 완료 건수 */
.wzbadge{margin-left:auto;font-size:10px;font-weight:800;background:var(--gold);color:#111;
  border-radius:20px;padding:1px 7px;display:none}
.wzbadge.on{display:inline-block}

/* ---- 셀프 채널 만들기 (배정 채널 없는 계정의 첫 화면) ---- */
#selfSetup{position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,14,.6);backdrop-filter:blur(4px)}
#selfSetup .ssInner{width:min(440px,92vw);background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
#selfSetup h3{margin:0 0 6px;font-size:18px}
#selfSetup p{margin:0 0 14px;font-size:12.5px;color:var(--mut);line-height:1.6}
#selfSetup p em{font-style:normal;color:var(--gold, #d7a94f)}
#selfSetup label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin:0 0 10px}
#selfSetup input,#selfSetup select{display:block;width:100%;margin-top:4px;padding:9px 11px;
  border:1px solid var(--line2);border-radius:9px;background:var(--ui2);color:var(--tx);font-size:13.5px}
#selfSetup .btn{width:100%;margin-top:4px}
#selfSetup .err{margin-top:8px}

/* 검수함 썸네일 — 완성된 그림을 나란히 보여 준다.
   ⚠️ 예전엔 링크 버튼 하나뿐이라 결과물을 눌러 봐야 알 수 있었다(사용자 지적). */
.pthumbs{margin:10px 0 4px}
.pthumbttl{font-size:11.5px;color:var(--dim);margin-bottom:5px}
.pthumbrow{display:flex;gap:8px;flex-wrap:wrap}
.pthumbrow a{display:block;line-height:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--card2);transition:border-color .12s}
.pthumbrow a:hover{border-color:var(--gold)}
.pthumbrow img{width:210px;height:118px;object-fit:cover;display:block}

/* 썸네일 디자인 미리보기 — 드롭다운 아래에 고른 디자인의 예시가 뜬다.
   ⚠️ 이름만 있으면 어떤 디자인인지 알 수가 없다(사용자 지적). */
.thsprev{margin:6px 0 2px;display:none}
.thsprev.on{display:block}
/* ⚠️ 시안이 방식별로 늘어난다(최대 6장) — flex:1 로 두면 한 장이 손톱만 해진다.
   가로로 넘치면 밀어서 본다. */
.thsprev .thsrow{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}
.thsprev .thsbox{flex:0 0 128px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card2)}
.thsprev .thsbox img{width:100%;height:72px;object-fit:cover;display:block}
.thsprev .thsbox b{display:block;font-size:10px;padding:3px 5px;color:var(--dim);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thsprev .thsnone{font-size:11.5px;color:var(--dim);padding:8px 10px;border:1px dashed var(--line);border-radius:8px}
/* 예시 보기 판 — 전체 디자인을 카드로 */
.thsgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.thsgal .g{border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card2);cursor:pointer;
  transition:border-color .12s}
.thsgal .g:hover{border-color:var(--gold)}
.thsgal .g.on{border-color:var(--gold)}
.thsgal .g img{width:100%;height:118px;object-fit:cover;display:block;background:var(--card)}
.thsgal .g .ph{height:118px;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--dim);text-align:center;padding:8px}
.thsgal .g .t{padding:6px 8px;font-size:12px;font-weight:700}
.thsgal .g .s{padding:0 8px 7px;font-size:11px;color:var(--dim);line-height:1.4}

/* ── 썸네일 색 고르기 ─────────────────────────────────────────
   디자인마다 바꿀 수 있는 칸이 달라서 개수가 유동이다 — 줄바꿈으로 흐르게 둔다. */
.thcolors{display:flex;flex-wrap:wrap;gap:8px}
.thcolor{display:flex;align-items:center;gap:6px;padding:4px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--card)}
.thcolor b{font-size:11.5px;font-weight:700;color:var(--tx)}
.thcolor input[type=color]{width:30px;height:26px;padding:0;border:none;background:none;cursor:pointer}
.thcolor .hex{font-size:10.5px;color:var(--mut);font-family:ui-monospace,monospace;min-width:56px}