/* ========== 공통 변수 / 앱 셸 / 좌측 컨트롤 패널 / 트랜스포트 ========== */
/* ---------- 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}
/* 웹툰형 — 정보형과 같은 칸을 쓴다(테마·시점·CTA·인사). 분량은 아래 lenpick 로 함께 제어. */
body.toonmode #infoOpts{display:block}
body.toonmode #teaserWrap{display:none}
/* 영상 길이 칸(#infoLenWrap) — #infoOpts 밖으로 옮겨 body.lenpick(PPT·웹툰·키움·정보형)에서만 보인다(2026-08-31). */
body:not(.lenpick) #infoLenWrap{display:none}
/* 예시 박스(화법·스타일 등 — 삼성전자 기준 예시문, 2026-08-31) */
.exbox{margin-top:6px;padding:8px 11px;background:var(--card2);border-left:3px solid var(--grn,#16a34a);border-radius:6px;font-size:13px;line-height:1.55;white-space:pre-line;color:var(--text)}
.exbox b{color:var(--grn,#16a34a)}
/* 테마 미리보기 카드(삼성전자 예시, 각 테마 색·폰트) */
.themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-top:8px}
.themecard{border:2px solid transparent;border-radius:11px;padding:9px;cursor:pointer;text-align:left;overflow:hidden;transition:transform .1s}
.themecard:hover{transform:translateY(-2px)}
.themecard.on{border-color:var(--grn,#16a34a);box-shadow:0 0 0 2px var(--grn,#16a34a)}
.themecard .tc-body{display:block;border-radius:8px;padding:13px 12px;margin-bottom:6px}
.themecard .tc-body b{display:block;font-size:17px;font-weight:900;line-height:1.15}
.themecard .tc-body i{font-style:normal;font-size:12px;opacity:.82}
.themecard .tc-name{display:block;font-size:11.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 테마/형식 실제 슬라이드 미리보기 iframe */
.tpwrap{position:relative;width:100%;max-width:540px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}
.tpwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 화면 형식 카드(실사/PPT/웹툰) */
/* 코인 형식은 시장이 곧 코인이라 국내/나스닥 토글을 숨긴다 */
body.coinmode #genMarket{display:none}
/* 제작 단계 — 원터치를 네비 오른쪽으로 올렸을 때(스크롤 없이 바로 누르게) */
.wzctrl .btn.wzone{width:auto;flex:none;font-weight:800;padding:7px 14px;white-space:nowrap;
  background:var(--grn,#16a34a);color:#fff;border-color:var(--grn,#16a34a);box-shadow:0 2px 10px rgba(22,163,74,.35)}
.wzctrl .btn.wzone:hover{filter:brightness(1.08)}
/* 검토창 맨 위 — 무엇을·어떤 유형으로 만드는지 */
.mktop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 9px;padding:9px 11px;
  border-radius:9px;background:var(--card,#f6f6f8);border:1px solid var(--line,#e5e5e5)}
.mktop b{font-size:16px;font-weight:900;margin-right:2px}
.mktop span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--card2,#fff);border:1px solid var(--line,#e0e0e0);color:var(--dim,#666)}
/* 5단계 완성 — 영상·썸네일·업로드세트 */
.donehead{display:flex;gap:9px;align-items:baseline;margin-bottom:9px}
.donehead b{font-size:17px;font-weight:900}
.donehead span{font-size:11.5px;color:var(--dim,#888)}
.donevid{width:100%;max-height:420px;border-radius:11px;background:#000;display:block;margin-bottom:10px}
/* 미국 종목 커스텀 자동완성 드롭다운(한글·영문·티커) */
.usac{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--card2,#fff);border:1px solid var(--line,#e0e0e0);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:300px;overflow:auto;margin-top:3px}
.usac-i{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line,#eee)}
.usac-i:last-child{border-bottom:0}
.usac-i:hover,.usac-i.on{background:var(--grn,#16a34a);color:#fff}
.usac-i b{font-size:13.5px;font-weight:800}
.usac-i span{font-size:11px;color:var(--dim,#888)}
.usac-i:hover span{color:rgba(255,255,255,.85)}
.fmtgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-top:8px}
.fmtcard{border:2px solid var(--line,#e0e0e0);border-radius:12px;padding:0 0 10px;overflow:hidden;cursor:pointer;text-align:center;background:var(--card2);color:var(--text);transition:border-color .12s,box-shadow .12s}
.fmtcard:hover{border-color:var(--grn,#16a34a)}
.fmtcard.on{border-color:var(--grn,#16a34a);box-shadow:0 0 0 2px var(--grn,#16a34a)}
.fmtcard .fmtthumb{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--card);border-bottom:1px solid var(--line,#e0e0e0);position:relative}
/* 견본 여러 장을 **겹쳐 두고** 하나만 보인다 — 넘길 때 자리가 안 흔들린다.
   ⚠️ display:none 으로 감추면 부드럽게 안 넘어간다(투명도로 겹쳐야 한다). */
.fmtcard .fmtthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .45s ease}
.fmtcard .fmtthumb img.on{opacity:1}
.fmtcard .fmtthumb img:only-of-type{opacity:1}
/* 영상식 — 삼성전자 회차가 실제로 만든 클립(css/fmt-clip.mp4). 고르거나 마우스를 올리면 돈다.
   ⚠️ 예전엔 실사 그림에 CSS 켄번즈를 걸어 «흉내» 만 냈다(배지도 「모의 미리보기」였다). */
.fmtcard .fmtthumb .fmtvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:0;transition:opacity .25s}
.fmtcard.on .fmtthumb .fmtvid,.fmtcard:hover .fmtthumb .fmtvid{opacity:1}
.fmtcard.on .fmtthumb .fmtplay,.fmtcard:hover .fmtthumb .fmtplay{opacity:0}
/* 크게 보기 단추 — 카드가 작아 「완전 납작 vs 반입체」가 구분이 안 될 때 쓴다 */
.fmtcard .fmtthumb .fmtzoom{position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:6px;
  background:rgba(20,20,20,.72);color:#fff;font-size:12px;line-height:22px;text-align:center;
  opacity:0;transition:opacity .15s;z-index:3}
.fmtcard:hover .fmtthumb .fmtzoom{opacity:1}
.fmtcard .fmtthumb .fmtzoom:hover{background:#000}

/* ---- 크게 보기 덮개 ---- */
.fmtbig{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.72);display:flex;
  align-items:center;justify-content:center;padding:24px}
.fmtbigin{background:var(--card2,#fff);color:var(--text,#111);border-radius:14px;overflow:auto;
  max-width:min(1180px,94vw);max-height:92vh;padding:16px 18px 18px}
.fmtbight{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.fmtbight b{font-size:18px}
.fmtbight span{color:var(--dim,#888);font-size:12.5px;flex:1}
.fmtbigx{border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;padding:2px 6px}
.fmtbiggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.fmtbiggrid img,.fmtbiggrid video{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:9px}
.fmtbigf{color:var(--dim,#888);font-size:12px;margin-top:10px}
@keyframes fmtken{from{transform:scale(1) translate(0,0)}to{transform:scale(1.18) translate(-4%,-3%)}}
.fmtcard .fmtthumb .fmtplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.65);pointer-events:none}
.fmtcard .fmtthumb .fmtbadge{position:absolute;top:6px;right:6px;background:rgba(20,20,20,.82);color:#fff;font-size:9px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:20px;pointer-events:none}
.fmtcard .fmtico{display:block;font-size:34px;line-height:1;margin:16px 0 6px}
.fmtcard b{display:block;font-size:14px;margin-top:8px}
.fmtcard em{display:block;font-size:11px;color:var(--dim);line-height:1.4;margin:3px 9px 0}
/* 화면 형식(실사/PPT/웹툰)은 **정보형에서만** 고른다.
   기업분석형은 실사 고정, 웹툰형은 형식이 곧 웹툰이라 고를 게 없다. */
#imgStyleWrap{display:none}
body.infomode #imgStyleWrap{display:block}
/* 캐릭터 등록 칸 — 웹툰형이거나, 정보형에서 화면 형식을 '웹툰'으로 고른 경우.
   ⚠️ body.imgtoon 은 화면 형식 선택에 따라 JS(src/js/gen.js)가 붙였다 뗀다. */
#toonCharWrap{display:none}
body.toonmode #toonCharWrap{display:block}
body.infomode.imgtoon #toonCharWrap{display:block}
/* ⚠️ **형식이 웹툰형이면 정보성에서도 캐릭터를 골라야 한다.**
   예전엔 body.imgtoon(=화면형식이 웹툰) 에만 걸려 있었는데, 그 클래스는 JS 가 붙였다 뗀다.
   콘텐츠를 「정보성」으로 바꾸는 순간 imgStyle 은 toon 으로 바뀌지만 클래스를 다시 칠하는
   시점이 어긋나서 **캐릭터 칸이 통째로 사라졌다**(실측 2026-09-02 — 사장님 지적 "웹툰형인데
   캐릭터 고르는 건 왜 없어?"). 형식(fmttoon)은 위저드가 붙이므로 타이밍을 안 탄다. */
body.fmttoon #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}
/* PPT 스타일(A/B × CTA) 4지선다 — PPT형에서만 보인다 */
#pptStyleWrap{display:none}
body.pptmode #pptStyleWrap{display:flex}
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}

/* ---- 프로필 선택 화면(크롬 프로필 고르듯) — src/js/profilepick.js ---- */
.ppwrap{position:fixed;inset:0;z-index:9000;background:rgba(12,14,20,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.ppinner{background:var(--card2,#fff);color:var(--text,#111);border-radius:16px;padding:26px 26px 20px;
  width:min(920px,100%);max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.pphead b{display:block;font-size:21px;font-weight:900;margin-bottom:5px}
.pphead em{display:block;font-size:12.5px;color:var(--dim,#777);font-style:normal;line-height:1.6;margin-bottom:18px}
.ppgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.ppcard{position:relative;border:2px solid var(--line,#e3e3e3);border-radius:14px;background:var(--card,#fafafa);
  transition:border-color .12s,transform .12s}
.ppcard:hover{border-color:var(--grn,#16a34a);transform:translateY(-2px)}
.ppcard.on{border-color:var(--grn,#16a34a);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.ppgo{display:block;width:100%;background:none;border:0;cursor:pointer;padding:18px 12px 15px;text-align:center;color:inherit}
.ppav{display:flex;width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:var(--grn,#16a34a);
  color:#fff;font-size:24px;font-weight:900;align-items:center;justify-content:center}
.ppcard b{display:block;font-size:15px;font-weight:800}
.ppcard em{display:block;font-size:12px;color:var(--dim,#888);font-style:normal;margin-top:2px}
.ppcard i{display:block;font-size:11px;color:var(--dim,#aaa);font-style:normal;margin-top:3px}
.ppedit{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line,#ddd);background:var(--card2,#fff);color:var(--dim,#777);font-size:12px}
.ppedit:hover{border-color:var(--grn,#16a34a);color:var(--grn,#16a34a)}
.ppnew{cursor:pointer;border-style:dashed;padding:18px 12px 15px;text-align:center}
.ppnew .ppav{background:var(--dim,#999)}
.ppfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.pperr{color:var(--red,#e11d2f);font-size:12.5px;margin-top:8px;min-height:16px}
.ppform .ppf{display:block;margin:0 0 12px}
.ppform .ppf span{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.ppform .ppf input,.ppform .ppf select{width:100%;padding:9px 11px;border:1px solid var(--line,#ddd);
  border-radius:9px;background:var(--card,#fff);color:var(--text,#111);font-size:14px}

/* ==========================================================
   허브(무엇을 할까요) — 홈을 두 층으로 나눈 첫 화면. 2026-09-02
   플랫폼답게: 은은한 그라데이션 · 유리질감 테두리 · 부드러운 부양 효과.
   ========================================================== */
.hwho{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 10px 8px 8px;
  border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.hwav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;color:#0b0b0b;background:linear-gradient(135deg,#ffd400,#ffa63d)}
.hwtx{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.hwtx b{font-size:13px;font-weight:800}
.hwtx em{font-size:11px;color:var(--dim);font-style:normal}
.hwsw{margin-left:6px;border:1px solid var(--line2);background:var(--card2);color:var(--mut);
  border-radius:999px;padding:5px 11px;font-size:11.5px;cursor:pointer;transition:.15s}
.hwsw:hover{color:var(--tx);border-color:var(--grn);box-shadow:0 0 0 3px rgba(74,222,154,.12)}

.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:6px}
.hubcard{position:relative;overflow:hidden;text-align:left;cursor:pointer;padding:24px 22px 20px;border-radius:20px;
  color:var(--tx);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 46%,rgba(0,0,0,.12));
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
:root:not(.lite) .hubcard{box-shadow:0 12px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)}
.hubcard::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.75),transparent);opacity:0;transition:opacity .2s}
.hubcard:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 22px 46px rgba(0,0,0,.5)}
.hubcard:hover::before{opacity:1}
.hubcard.hot{border-color:rgba(255,212,0,.35);
  background:linear-gradient(160deg,rgba(255,212,0,.10),rgba(255,255,255,.02) 52%,rgba(0,0,0,.14))}
.hubcard.hot:hover{box-shadow:0 24px 50px rgba(255,212,0,.16)}
.hubico{display:flex;width:50px;height:50px;border-radius:15px;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:14px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.hubcard.hot .hubico{background:linear-gradient(135deg,rgba(255,212,0,.22),rgba(255,166,61,.10));border-color:rgba(255,212,0,.3)}
.hubcard b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.3px}
.hubcard em{display:block;font-size:12px;color:var(--dim);font-style:normal;line-height:1.6;margin-top:4px}
.hubcard .hgo{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--mut)}
.hubcard:hover .hgo{color:var(--tx)}
.hback{margin:0 0 16px;border:1px solid var(--line2);background:var(--card2);color:var(--mut);
  border-radius:999px;padding:7px 14px;font-size:12px;cursor:pointer;transition:.15s}
.hback:hover{color:var(--tx);border-color:var(--grn)}

/* ---- 허브 카드 — 라이트 테마 전용 마감(기본값은 다크 기준이라 밝은 화면에선 밋밋했다) ---- */
:root.lite .hubcard{
  background:linear-gradient(165deg,#ffffff 0%,#fbfaf6 55%,#f6f3ea 100%);
  border-color:#E7E3D8;
  box-shadow:0 10px 26px rgba(90,80,40,.10),0 1px 0 #fff inset}
:root.lite .hubcard:hover{border-color:#D9CFA8;box-shadow:0 20px 42px rgba(90,80,40,.18)}
:root.lite .hubcard.hot{
  background:linear-gradient(165deg,#FFFDF2 0%,#FFF7DA 60%,#FFF0C2 100%);
  border-color:#F0DC96}
:root.lite .hubcard.hot:hover{box-shadow:0 22px 46px rgba(214,170,20,.24)}
:root.lite .hubico{background:#fff;border-color:#EBE6D8;box-shadow:0 3px 10px rgba(90,80,40,.10)}
:root.lite .hubcard.hot .hubico{background:linear-gradient(135deg,#FFE58A,#FFD24D);border-color:#F0CE6A;
  box-shadow:0 6px 16px rgba(230,180,20,.30)}
:root.lite .hubcard em{color:#8B8477}
:root.lite .hubcard .hgo{color:#9A9180}
:root.lite .hubcard:hover .hgo{color:#3B3730}
:root.lite .hwho{background:#fff;border-color:#E7E3D8;box-shadow:0 6px 18px rgba(90,80,40,.10)}
:root.lite .hwsw{background:#fff;border-color:#E0DBCC;color:#6B6558}
:root.lite .hwsw:hover{border-color:#D6B93C;color:#3B3730;box-shadow:0 0 0 3px rgba(255,212,0,.18)}
:root.lite .hback{background:#fff;border-color:#E0DBCC;color:#6B6558}
:root.lite .hback:hover{border-color:#D6B93C;color:#3B3730}
/* 카드 네 장이 한 줄에 오도록 — 한 장만 아래로 떨어지면 허전해 보인다 */
@media (min-width:1180px){ .hubgrid{grid-template-columns:repeat(4,1fr)} }
/* 아이콘마다 다른 색조 — 무엇을 하는 화면인지 색으로도 구분된다 */
.hubcard[data-hub="thumb"] .hubico{background:linear-gradient(135deg,rgba(120,180,255,.20),rgba(120,180,255,.06))}
.hubcard[data-hub="char"] .hubico{background:linear-gradient(135deg,rgba(190,140,255,.20),rgba(190,140,255,.06))}
.hubcard[data-hub="works"] .hubico{background:linear-gradient(135deg,rgba(90,220,160,.20),rgba(90,220,160,.06))}
:root.lite .hubcard[data-hub="thumb"] .hubico{background:linear-gradient(135deg,#E8F1FF,#F7FAFF);border-color:#D6E4F7}
:root.lite .hubcard[data-hub="char"] .hubico{background:linear-gradient(135deg,#F3EAFF,#FBF7FF);border-color:#E4D7F5}
:root.lite .hubcard[data-hub="works"] .hubico{background:linear-gradient(135deg,#E6F9F0,#F6FDFA);border-color:#CDEBDD}

/* ==========================================================
   2026 리디자인 — 사이드바 여닫이 · 배경 그래픽 · 유리질감 · 입체 아이콘
   사용자 지시 2026-09-02: "흰 배경 말고 3D 그래픽·효과, 애플의 혁신 + 대기업 전문성"
   ⚠️ 효과는 **본문 읽기를 방해하지 않는 선**까지만 — 배경은 뒤에 깔고(z-index:-1),
      글자 대비는 그대로 둔다. 렌더 화면(renderonly)에는 어떤 장식도 넣지 않는다(영상에 찍힌다).
   ========================================================== */

/* ---- 좌상단 햄버거 ---- */
.atmenu{position:relative;width:38px;height:38px;margin-right:2px;border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line);background:var(--card2);transition:.18s}
.atmenu i{display:block;width:16px;height:2px;border-radius:2px;background:var(--mut);transition:.22s cubic-bezier(.2,.7,.3,1)}
.atmenu:hover{border-color:var(--gold,#FFD400);box-shadow:0 0 0 3px rgba(255,212,0,.14)}
.atmenu:hover i{background:var(--tx)}
.atmenu.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.atmenu.on i:nth-child(2){opacity:0;transform:scaleX(.3)}
.atmenu.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- 사이드바: 기본 접힘 → 열면 미끄러져 나온다 ---- */
body.authed .wzshell{transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .2s;transform:translateX(-100%);opacity:0}
body.authed.sideopen .wzshell{transform:none;opacity:1}
body.authed .wzside{box-shadow:18px 0 46px rgba(0,0,0,.28)}
/* 접혀 있으면 본문이 왼쪽 여백을 안 쓴다 — 화면이 넓어진다 */
body.platform .panel{transition:padding-left .26s cubic-bezier(.2,.7,.3,1)}
body.platform:not(.sideopen).inlinepreview .panel{padding-left:26px}
/* 열려 있을 때 본문을 살짝 어둡게 덮어 초점을 사이드바로 */
body.authed.sideopen::after{content:'';position:fixed;inset:60px 0 0 222px;z-index:55;
  background:rgba(0,0,0,.28);backdrop-filter:blur(1.5px);pointer-events:none}
@media (max-width:900px){ body.authed.sideopen::after{left:0} }

/* ---- 배경 그래픽 — 은은한 오로라 블롭 + 미세 노이즈(흰 배경 그대로 두지 않는다) ---- */
body.authed::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 12% 4%,rgba(255,212,0,.16),transparent 62%),
    radial-gradient(46% 38% at 92% 10%,rgba(90,150,255,.14),transparent 64%),
    radial-gradient(60% 46% at 78% 96%,rgba(180,120,255,.12),transparent 66%),
    radial-gradient(50% 40% at 4% 88%,rgba(80,220,170,.10),transparent 62%);
  filter:saturate(1.05)}
:root.lite body.authed::before{background:
    radial-gradient(58% 42% at 12% 4%,rgba(255,205,60,.20),transparent 62%),
    radial-gradient(46% 38% at 92% 10%,rgba(120,170,255,.16),transparent 64%),
    radial-gradient(60% 46% at 78% 96%,rgba(190,140,255,.13),transparent 66%),
    radial-gradient(50% 40% at 4% 88%,rgba(90,225,180,.12),transparent 62%)}
/* 아주 옅은 격자 — 종이 대신 «판»처럼 보이게 한다 */
body.authed::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(128,128,128,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,128,128,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%)}
/* 사이드바가 열리면 위 ::after 가 덮개로 쓰이므로 격자는 잠시 감춘다 */
body.authed.sideopen::after{background-image:none;opacity:1}

/* ---- 유리질감 상단바 ---- */
.apptop{backdrop-filter:saturate(1.4) blur(14px)}
:root.lite .apptop{background:rgba(255,255,255,.72);box-shadow:0 6px 24px rgba(90,80,40,.10)}

/* ---- 입체 아이콘(허브) — 안쪽 하이라이트 + 바깥 그림자로 «떠 있는 물체»처럼 ---- */
.hubico{position:relative;overflow:hidden}
.hubico::after{content:'';position:absolute;left:-30%;top:-60%;width:160%;height:110%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:rotate(-12deg);pointer-events:none;opacity:.55}
:root.lite .hubico{box-shadow:0 8px 18px rgba(90,80,40,.14),inset 0 1px 0 #fff,inset 0 -6px 12px rgba(0,0,0,.04)}
:root:not(.lite) .hubico{box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.hubcard{will-change:transform}
.hubcard:active{transform:translateY(-2px) scale(.995)}
/* 카드에 커서를 올리면 유리에 빛이 스치는 느낌 */
.hubcard::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 62%);
  transition:opacity .25s}
.hubcard:hover::after{opacity:1}

/* ---- 히어로 문구를 조금 더 «플랫폼»답게 ---- */
.hhero h2{background:linear-gradient(180deg,var(--tx),color-mix(in srgb,var(--tx) 62%,transparent));
  -webkit-background-clip:text;background-clip:text}
.htag{backdrop-filter:blur(6px)}

/* ---- 배경 강화 — 흰 종이가 아니라 «깊이 있는 판»으로 (2026-09-02 2차) ---- */
:root.lite body.authed{background:linear-gradient(180deg,#FBFAF7 0%,#F4F6FA 42%,#EFF1F6 100%)}
:root:not(.lite) body.authed{background:linear-gradient(180deg,#0B0D11 0%,#0A0A0C 50%,#08090C 100%)}
/* 오로라를 좀 더 또렷하게 + 아주 느리게 숨쉬듯 움직인다(20초, 거슬리지 않는 폭) */
body.authed::before{animation:auroraDrift 26s ease-in-out infinite alternate}
@keyframes auroraDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-1.2%,0) scale(1.045)}
}
:root.lite body.authed::before{background:
    radial-gradient(56% 40% at 10% 2%,rgba(255,196,40,.30),transparent 60%),
    radial-gradient(48% 36% at 94% 8%,rgba(96,150,255,.26),transparent 62%),
    radial-gradient(58% 44% at 80% 98%,rgba(178,120,255,.20),transparent 64%),
    radial-gradient(52% 40% at 2% 92%,rgba(64,214,168,.18),transparent 60%)}
:root:not(.lite) body.authed::before{background:
    radial-gradient(56% 40% at 10% 2%,rgba(255,196,40,.22),transparent 60%),
    radial-gradient(48% 36% at 94% 8%,rgba(96,150,255,.20),transparent 62%),
    radial-gradient(58% 44% at 80% 98%,rgba(178,120,255,.18),transparent 64%),
    radial-gradient(52% 40% at 2% 92%,rgba(64,214,168,.14),transparent 60%)}

/* ---- 히어로 뒤 3D 오브 — 유리구슬처럼 떠 있는 물체 ---- */
.hhero{position:relative}
.hhero::before{content:'';position:absolute;left:50%;top:-42px;width:300px;height:300px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;filter:blur(2px);
  background:
    radial-gradient(38% 34% at 34% 28%,rgba(255,255,255,.92),transparent 60%),
    radial-gradient(70% 70% at 62% 68%,rgba(255,186,40,.55),rgba(255,140,60,.18) 58%,transparent 72%),
    radial-gradient(60% 60% at 30% 74%,rgba(120,170,255,.40),transparent 66%);
  box-shadow:0 40px 90px rgba(255,180,40,.22),inset 0 -18px 40px rgba(0,0,0,.10);
  opacity:.55;animation:orbFloat 12s ease-in-out infinite alternate}
@keyframes orbFloat{ from{transform:translateX(-50%) translateY(0) scale(1)}
  to{transform:translateX(-50%) translateY(14px) scale(1.04)} }
:root:not(.lite) .hhero::before{opacity:.42}

/* ---- 카드 깊이 2겹 그림자 — 가까운 것 + 먼 것(애플식 부양감) ---- */
:root.lite .hubcard{box-shadow:0 2px 4px rgba(60,50,20,.05),0 12px 28px rgba(60,50,20,.09),inset 0 1px 0 #fff}
:root.lite .hubcard:hover{box-shadow:0 4px 8px rgba(60,50,20,.07),0 26px 52px rgba(60,50,20,.16),inset 0 1px 0 #fff}
:root:not(.lite) .hubcard{box-shadow:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
/* 통계·목록 상자도 같은 언어로 — 흰 판이 둥둥 뜨지 않게 유리질감을 준다 */
:root.lite .hw,:root.lite .hstat>div{backdrop-filter:blur(8px)}
.hw,.hwlist,.hstat .hwrap{border-radius:16px}

/* ⚠️ 배경 그래픽이 안 보이던 원인 — `body{background:var(--deep)}` 가 불투명이라
   z-index 가 뒤인 의사요소(오로라·격자)를 통째로 가렸다(실측 2026-09-02).
   그래서 **바탕은 html 에 깔고 body 는 투명**으로 둔다. 그러면 body::before/::after 가 그 위에 보인다. */
:root.lite{background:linear-gradient(180deg,#FBFAF7 0%,#F3F5FA 44%,#EDEFF5 100%)}
:root:not(.lite){background:linear-gradient(180deg,#0B0D11 0%,#0A0A0C 52%,#08090C 100%)}
body.authed{background:transparent}
/* 로그인 화면(랜딩)도 같은 바탕을 쓰되 장식은 넣지 않는다 */
body.guest{background:transparent}

/* ⚠️ 위에서 `:root.lite body.authed{background:linear-gradient(...)}` 로 바탕을 body 에 깔았던 게
   남아 있어(구체성 0,2,1) 뒤에 쓴 `body.authed{background:transparent}` 를 이겼다.
   그래서 오로라(::before, z-index:-2)가 계속 가려졌다 — 같은 구체성으로 못박아 끝낸다. */
:root.lite body.authed,:root:not(.lite) body.authed,
:root.lite body.guest,:root:not(.lite) body.guest{background:transparent}

/* ⚠️ 진짜 범인 — 본문 컨테이너 `.panel` 이 흰색 불투명이라 배경 그래픽을 통째로 덮고 있었다
   (실측 2026-09-02: aside.panel bg=rgb(255,255,255)). 플랫폼 화면에서는 투명하게 둔다.
   ⚠️ 사이드바(.wzside)는 그대로 불투명이어야 한다 — 글자가 배경 그림과 겹치면 못 읽는다. */
body.platform .panel{background:transparent;border-right:0}
:root.lite body.platform .panel{box-shadow:none}
/* 단계 화면의 섹션 상자는 유리질감으로 — 배경 위에 떠 보이게 */
body.platform .sec{backdrop-filter:blur(10px) saturate(1.15)}
:root.lite body.platform .sec{background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.07);
  box-shadow:0 2px 4px rgba(60,50,20,.04),0 10px 26px rgba(60,50,20,.07)}
:root:not(.lite) body.platform .sec{background:rgba(24,24,24,.72);
  box-shadow:0 2px 6px rgba(0,0,0,.32),0 14px 34px rgba(0,0,0,.38)}
/* 위저드 상단 네비도 같은 언어로 */
body.platform .wznav{background:transparent}

/* ==========================================================
   2026 리디자인 3차 — 딤 제거 · 3D 틸트 · 사이드바/실적 마감
   ========================================================== */

/* ---- ① 사이드바를 열어도 본문을 어둡게 하지 않는다(사용자 지적 2026-09-02) ----
   대신 본문을 오른쪽으로 살짝 밀어 «서랍이 열린» 느낌만 준다. */
body.authed.sideopen::after{inset:0;z-index:-1;background:none;backdrop-filter:none;opacity:.5;
  background-image:linear-gradient(rgba(128,128,128,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,128,128,.06) 1px,transparent 1px);
  background-size:44px 44px}
@media (min-width:1100px){
  body.platform.sideopen .panel{padding-left:250px}
  body.platform.sideopen .wznav{padding-left:228px}
}

/* ---- ② 3D 틸트 — motion3d.js 가 --rx/--ry/--mx/--my 를 넣어 준다 ---- */
.hubgrid,.hcards,.ppgrid{perspective:1100px}
.hubcard,.hcard,.ppcard{transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .24s,border-color .18s}
.hubcard.tilt,.hcard.tilt,.ppcard.tilt{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.018);
  transition:transform .08s linear,box-shadow .24s}
/* 아이콘·제목을 카드보다 앞으로 띄운다 — 진짜 층이 생긴다 */
.hubcard .hubico,.hcard .hicon{transform:translateZ(26px);transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.hubcard.tilt .hubico,.hcard.tilt .hicon{transform:translateZ(46px) scale(1.06)}
.hubcard b,.hubcard em,.hcard b,.hcard em{transform:translateZ(14px)}
.ppcard .ppav{transform:translateZ(22px);transition:transform .25s}
.ppcard.tilt .ppav{transform:translateZ(40px) scale(1.05)}
/* 커서를 따라 움직이는 빛 반사 */
.hubcard::after,.hcard::after{background:radial-gradient(38% 46% at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.30),transparent 62%)}
:root.lite .hubcard::after,:root.lite .hcard::after{background:radial-gradient(38% 46% at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.85),transparent 60%)}
.hubcard.tilt,.hcard.tilt{box-shadow:0 8px 16px rgba(60,50,20,.10),0 34px 64px rgba(60,50,20,.20)}
:root:not(.lite) .hubcard.tilt,:root:not(.lite) .hcard.tilt{box-shadow:0 10px 20px rgba(0,0,0,.45),0 36px 70px rgba(0,0,0,.55)}

/* ---- ③ 사이드바 — 촌스러운 목록을 «앱 내비게이션»으로 ---- */
:root.lite .wzside{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.3);
  border-right:1px solid rgba(0,0,0,.06)}
:root:not(.lite) .wzside{background:rgba(16,16,18,.86);backdrop-filter:blur(18px) saturate(1.3)}
.wzside{padding:14px 10px 20px}
.wzbrand{padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.wzgrp{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin:14px 10px 6px;opacity:.8}
.wzitem,.wzmode{position:relative;border-radius:12px;padding:9px 11px;margin:1px 0;
  transition:background .16s,color .16s,transform .16s}
.wzitem:hover,.wzmode:hover{transform:translateX(2px)}
:root.lite .wzitem:hover,:root.lite .wzmode:hover{background:rgba(0,0,0,.045)}
:root:not(.lite) .wzitem:hover,:root:not(.lite) .wzmode:hover{background:rgba(255,255,255,.06)}
/* 선택된 항목 — 왼쪽에 브랜드 색 막대 */
.wzitem.on,.wzmode.on{background:linear-gradient(90deg,rgba(255,212,0,.16),rgba(255,212,0,.04))}
.wzitem.on::before,.wzmode.on::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:3px;background:linear-gradient(180deg,#FFD400,#FF9F2E)}
.wzico{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;
  border-radius:8px;font-size:13px;flex:none}
:root.lite .wzico{background:rgba(0,0,0,.04)}
:root:not(.lite) .wzico{background:rgba(255,255,255,.06)}
.wzitem.on .wzico,.wzmode.on .wzico{background:linear-gradient(135deg,#FFE07A,#FFC63D);color:#1a1a1a}
.wzsteps{border-left:1px solid var(--line);margin-left:16px;padding-left:10px}
.wznum{margin-left:auto;font-size:10px;color:var(--dim);opacity:.7}

/* ---- ④ 아래 실적 상자 — 카드와 같은 언어로 ---- */
.wzside .wzusage,.wzside .usage,.wzside>div:last-child{border-radius:14px}
:root.lite .wzside .wzusage{background:linear-gradient(160deg,#FFFDF4,#FFF6DF);border:1px solid #F0E4B8;
  box-shadow:0 6px 18px rgba(120,100,30,.10)}
:root:not(.lite) .wzside .wzusage{background:linear-gradient(160deg,rgba(255,212,0,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,212,0,.22)}
/* 홈 하단 통계 — 흰 박스 4개가 밋밋하던 것을 살린다 */
.hw{position:relative;overflow:hidden}
.hw::before{content:'';position:absolute;right:-18px;top:-18px;width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.20),transparent 70%);pointer-events:none}
:root.lite .hw{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 4px rgba(60,50,20,.04),0 10px 24px rgba(60,50,20,.07)}
:root:not(.lite) .hw{background:rgba(24,24,26,.7);backdrop-filter:blur(10px);border:1px solid var(--line)}
.hw b{font-variant-numeric:tabular-nums}

/* ⚠️ 사이드바 하단 실적 상자(.wzfoot)가 목록 마지막 항목(검수함)을 덮고 있었다(실측 2026-09-02).
   메뉴에 **스스로 스크롤**을 주고 실적은 바닥에 고정 — 목록이 길어져도 서로 안 겹친다. */
.wzside{overflow:hidden}
.wzmenu{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.wzmenu::-webkit-scrollbar{width:6px}
.wzmenu::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:6px}
.wzfoot{flex:none;margin-top:10px;padding:10px 11px;border-radius:14px;font-size:11px;line-height:1.6}
:root.lite .wzfoot{background:linear-gradient(160deg,#FFFDF4,#FFF6DF);border:1px solid #F0E4B8;
  box-shadow:0 6px 18px rgba(120,100,30,.10)}
:root:not(.lite) .wzfoot{background:linear-gradient(160deg,rgba(255,212,0,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,212,0,.22)}

/* ==========================================================
   전역 진행 게이지바 — 어디서든 보이는 «지금 만들고 있는 것» (src/js/progressbar.js)
   ========================================================== */
.gpbar{position:fixed;left:0;right:0;top:60px;z-index:190;display:flex;flex-direction:column;gap:1px;
  padding:6px 14px;backdrop-filter:blur(16px) saturate(1.3)}
:root.lite .gpbar{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 20px rgba(60,50,20,.08)}
:root:not(.lite) .gpbar{background:rgba(16,16,18,.86);border-bottom:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.35)}
body.hasprog .app,body.hasprog .panel,body.hasprog .wzhome{padding-top:6px}
body.hasprog .wzside{top:100px;height:calc(100% - 100px)}
.gpitem{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px;cursor:pointer;
  transition:background .15s}
:root.lite .gpitem:hover{background:rgba(0,0,0,.04)}
:root:not(.lite) .gpitem:hover{background:rgba(255,255,255,.06)}
.gpname{font-size:12px;font-weight:800;min-width:104px;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gptrack{position:relative;flex:1;height:7px;border-radius:99px;overflow:hidden;
  background:rgba(128,128,128,.18)}
.gptrack i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFD400,#FF9F2E);
  box-shadow:0 0 12px rgba(255,180,40,.55);transition:width .5s cubic-bezier(.2,.7,.3,1);position:relative}
/* 진행 중임을 알리는 흐르는 빛 */
.gptrack i::after{content:'';position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:gpFlow 1.6s linear infinite}
@keyframes gpFlow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.gpitem.wait .gptrack i{background:linear-gradient(90deg,#9aa0a6,#c8ccd0);box-shadow:none}
.gpitem.wait .gptrack i::after{animation:none}
.gppct{font-size:12px;font-weight:900;min-width:52px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--gold,#8A6A00)}
.gpitem.wait .gppct{color:var(--dim)}
.gpstep{font-size:11px;color:var(--dim);min-width:112px}
.gptime{font-size:11px;color:var(--dim);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.gpx{width:22px;height:22px;border-radius:7px;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:11px;line-height:1;flex:none}
.gpx:hover{border-color:var(--red);color:var(--red)}

/* ⚠️ 홈(허브)에서는 「작업 완료」 버튼을 감춘다 — 작업 화면이 아닌데 떠 있을 이유가 없다
   (사용자 지적 2026-09-02). 단계 화면으로 들어가면 다시 보인다. */
body.athome #atDone{display:none}

/* ==========================================================
   배경 모션 그래픽 (src/js/bgfx.js) — 애플식 흐르는 메시 그라데이션
   ⚠️ 예전의 body::before 오로라는 «정지 배경» 이라 벽지처럼 보였다. 이 레이어가 대신한다.
   ========================================================== */
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 55%,rgba(0,0,0,.35) 100%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 55%,rgba(0,0,0,.35) 100%)}
.bgblob{position:absolute;border-radius:50%;display:block;will-change:transform;
  filter:blur(74px) saturate(1.25);opacity:.62;transform:translate3d(0,0,0)}
#bgfx.still .bgblob{animation:none!important}
/* 덩어리마다 다른 경로 — 같은 길로 돌면 «회전하는 벽지» 가 된다 */
.b1{background:radial-gradient(circle at 34% 32%,#FFC542,#FF8A3D 46%,rgba(255,138,61,0) 72%);animation:drift1 linear infinite alternate}
.b2{background:radial-gradient(circle at 38% 30%,#7AA8FF,#5C6BFF 48%,rgba(92,107,255,0) 74%);animation:drift2 linear infinite alternate}
.b3{background:radial-gradient(circle at 36% 34%,#C77DFF,#8B5CF6 48%,rgba(139,92,246,0) 74%);animation:drift3 linear infinite alternate}
.b4{background:radial-gradient(circle at 34% 30%,#4FE0C0,#22C79B 48%,rgba(34,199,155,0) 74%);animation:drift4 linear infinite alternate}
.b5{background:radial-gradient(circle at 36% 32%,#FF8FB1,#FF5C8A 46%,rgba(255,92,138,0) 72%);animation:drift5 linear infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,9vh,0) scale(1.22)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16vw,12vh,0) scale(.9)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-12vw,-14vh,0) scale(1.25)}}
@keyframes drift4{from{transform:translate3d(0,0,0) scale(1.15)}to{transform:translate3d(18vw,-10vh,0) scale(.92)}}
@keyframes drift5{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-10vw,16vh,0) scale(1.3)}}
/* 필름 그레인 — 그라데이션의 «띠(밴딩)» 를 지우고 질감을 준다 */
.bggrain{position:absolute;inset:-50%;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
:root:not(.lite) .bgblob{opacity:.42;filter:blur(84px) saturate(1.35)}
:root:not(.lite) .bggrain{opacity:.07}
/* 바탕색도 화이트에서 벗어난다 — 빛이 도는 «판» 위에 올려둔 느낌 */
:root.lite{background:linear-gradient(180deg,#FCFBFA 0%,#F2F4FA 46%,#EAEDF6 100%)}
:root:not(.lite){background:linear-gradient(180deg,#0A0B10 0%,#08090E 52%,#06070B 100%)}
/* 정지 오로라는 이제 필요 없다 — 흐르는 레이어가 대신한다(격자만 남긴다) */
body.authed::before{display:none}

/* ---- 배경 세기 조정 — 콘텐츠가 먼저 읽혀야 한다(애플식: 배경은 은은, 카드는 또렷) ----
   ⚠️ 1차 적용에서 블롭이 너무 진해 카드 글씨가 배경색에 묻혔다(실측 2026-09-02). */
.bgblob{opacity:.42;filter:blur(96px) saturate(1.18)}
:root:not(.lite) .bgblob{opacity:.34;filter:blur(104px) saturate(1.3)}
/* 콘텐츠가 놓이는 가운데를 살짝 씻어 준다 — 글씨 대비를 지키는 «베일» */
#bgfx::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 62% at 50% 42%,rgba(255,255,255,.62),rgba(255,255,255,.16) 62%,transparent 82%)}
:root:not(.lite) #bgfx::after{background:radial-gradient(78% 62% at 50% 42%,rgba(8,9,14,.62),rgba(8,9,14,.22) 62%,transparent 82%)}
/* 카드·상자는 더 또렷하게 — 배경이 비쳐 글씨를 흐리지 않게 */
:root.lite .hubcard{background:linear-gradient(165deg,rgba(255,255,255,.96) 0%,rgba(252,251,247,.93) 55%,rgba(248,246,239,.92) 100%)}
:root.lite .hubcard.hot{background:linear-gradient(165deg,rgba(255,253,246,.97) 0%,rgba(255,247,222,.94) 60%,rgba(255,241,200,.93) 100%)}
:root.lite .hw{background:rgba(255,255,255,.9)}
:root.lite body.platform .sec{background:rgba(255,255,255,.92)}
:root:not(.lite) .hubcard{background:linear-gradient(160deg,rgba(28,28,32,.86),rgba(20,20,24,.82) 52%,rgba(14,14,18,.86))}
:root:not(.lite) .hw{background:rgba(24,24,28,.84)}
:root:not(.lite) body.platform .sec{background:rgba(22,22,26,.86)}

/* ==========================================================
   만들기 도구(썸네일·캐릭터) — **덮는 창**으로 띄운다. 2026-09-02
   영상 작업 화면은 뒤에 그대로 살아 있어서, 닫으면 하던 일이 이어진다(동시 작업).
   ========================================================== */
body.toolchar #toonCharWrap{display:block}          /* 도구로 열었을 때는 유형과 무관하게 보인다 */
#toolStage{position:fixed;inset:60px 0 0 0;z-index:180;overflow-y:auto;padding:18px 22px 60px;
  backdrop-filter:blur(20px) saturate(1.25)}
body.hasprog #toolStage{top:100px}
:root.lite #toolStage{background:rgba(248,249,252,.92)}
:root:not(.lite) #toolStage{background:rgba(10,11,15,.93)}
#toolStage .tshead{position:sticky;top:-18px;z-index:2;display:flex;align-items:center;gap:12px;
  margin:-18px -22px 16px;padding:14px 22px;
  border-bottom:1px solid var(--line)}
:root.lite #toolStage .tshead{background:rgba(255,255,255,.86);backdrop-filter:blur(14px)}
:root:not(.lite) #toolStage .tshead{background:rgba(16,16,20,.86);backdrop-filter:blur(14px)}
#toolStage .tsbody{max-width:1180px;margin:0 auto}
/* 도구 창 안에서는 섹션이 «작업판» 처럼 보이게 */
#toolStage .sec{border-radius:18px}
#toolStage .sec>summary{font-size:14px;padding:14px 16px}

/* 생성 결과 밑의 «이 그림을 만든 문장» — 접었다 펼친다(사용자 지시 2026-09-02) */
.genprompt{margin-top:6px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.genprompt>summary{cursor:pointer;font-size:10.5px;color:var(--dim);padding:5px 8px;list-style:none}
.genprompt>summary::-webkit-details-marker{display:none}
.genprompt>summary::before{content:'▸ ';color:var(--gold)}
.genprompt[open]>summary::before{content:'▾ '}
.genprompt pre{margin:0;padding:8px;font-size:10.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  max-height:150px;overflow:auto;background:var(--card)}

/* ⚠️ 도구 창 머리줄이 깨졌다 — .btn 의 기본 width:100% 때문에 「돌아가기」가 줄 전체를 먹고
   제목이 오른쪽 끝에서 접혔다(실측 2026-09-02). 머리줄 안에서는 버튼을 내용 폭으로 둔다. */
#toolStage .tshead .btn{width:auto;flex:none;padding:7px 14px}
#toolStage .tstitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:17px;font-weight:900;letter-spacing:-.3px}
/* 도구 창 안의 입력·목록도 카드 언어로 */
#toolStage .row{gap:8px}
#toolStage img[data-i]{transition:transform .18s,border-color .18s}
#toolStage img[data-i]:hover{transform:translateY(-3px) scale(1.02);border-color:var(--gold)!important}

/* 목록의 «무엇을 만드는지» 배지 — 제작현황·예약·검수함 공통(2026-09-02) */
.pkind{flex:none;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,rgba(255,212,0,.20),rgba(255,166,61,.10));
  border:1px solid rgba(255,212,0,.32);color:var(--gold,#8A6A00)}
:root:not(.lite) .pkind{color:#FFD873}

/* ---------- 예약 확인표(검수표) — 걸린 내용을 한 장으로 보여주고 시작 전 수정 ---------- */
.pfsheet{position:fixed;inset:0;z-index:2600;background:rgba(8,10,16,.55);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.pfsinner{width:min(760px,100%);background:var(--card,#fff);border:1px solid rgba(120,130,160,.22);
  border-radius:20px;box-shadow:0 30px 90px rgba(10,14,30,.35);padding:20px;max-height:88vh;overflow:auto}
.pfstop{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pfstop b{font-size:17px;white-space:nowrap}
.pfstop .pfshint{flex:1;min-width:0;font-size:12px;color:var(--muted,#7a8296);
  background:none;border:0;padding:0}
/* ⚠️ 이 화면의 .btn 은 기본이 가로 꽉 참이다 — 그대로 두면 「닫기」가 한 줄을 다 먹고
   「수정 저장」·「예약 취소」가 세로로 쌓인다(실측 스크린샷). 여기서는 내용만큼만 쓴다. */
.pfsheet .btn{width:auto;flex:0 0 auto;padding:8px 16px}
.pfs{border:1px solid rgba(120,130,160,.2);border-radius:14px;padding:14px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(120,140,255,.06),transparent)}
.pfshead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pfshead b{font-size:15px}
.pfsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.pfsgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#7a8296)}
.pfsgrid label select{padding:7px 9px;border-radius:9px;border:1px solid rgba(120,130,160,.28);
  background:var(--card,#fff);color:inherit;font-size:13px}
.pfsgrid label i{font-style:normal;font-size:13px;color:var(--ink,#1a1f2e);padding:6px 0}
.pfsfoot{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pfsmsg{font-size:12px;color:var(--muted,#7a8296)}
.pfshold{font-size:12px;color:var(--muted,#7a8296)}
.pfshold.on{color:#b45309;font-weight:700}

/* ---- 스크롤이 상단 바를 비켜 가게 ----
   상단에 고정 바가 둘이다: #appTop(60px) 위에 .wznav(약 99px)가 붙어 앉는다.
   scrollIntoView 는 기본적으로 이 둘을 모르기 때문에 «단계를 눌러 이동하면 그 칸의
   제목·설명이 바 밑에 깔려» 안 보였다(실측 2026-09-02: 「그림 모델」·「영상 길이」 라벨이
   가려짐). scroll-padding/scroll-margin 은 scrollIntoView 가 지켜 준다.
   ⚠️ .wznav 자신은 appTop 만 비키면 된다 — 여기에 170을 주면 내비가 화면 한참 아래로 내려간다. */
html{scroll-padding-top:70px}
.sec,.f,.wzstep,#toonCharWrap,#imgStyleWrap,#imgModelWrap,#videoModelWrap,#infoLenWrap,
#motionWrap,#genFontWrap,#mkGrid,.stagewrap{scroll-margin-top:170px}

/* ---- 목소리 미리듣기 ▶ (마이페이지·채널 설정) ---- */
.vpbtn{flex:0 0 auto;margin-left:6px;width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(120,130,160,.3);background:var(--card,#fff);color:inherit;
  font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s}
.vpbtn:hover:not(:disabled){border-color:var(--gold,#c9962e)}
.vpbtn.on{background:var(--gold,#c9962e);color:#0b1220;border-color:var(--gold,#c9962e)}
.vpbtn:disabled{opacity:.35;cursor:default}
/* 드롭다운 + ▶ 를 감싸는 칸 — JS(voicepreview.js)가 만들어 넣는다.
   ⚠️ :has() 로 바깥 라벨을 flex 로 바꾸려 했더니 두 화면의 규칙이 달라 한쪽만 먹었다
      (#selfSetup label{display:block} 이 ID 특이성으로 이김). 감싸는 칸이 확실하다.
   ⚠️ select 에 width:100% 가 걸려 있어 flex:1 만으로는 한 줄을 다 먹는다 — width 를 되돌린다. */
.vprow{display:flex;align-items:center;gap:0;width:100%}
.vprow > select{flex:1 1 0;width:auto;min-width:0}

/* 디자인 스킨 카드에 실제 예시 화면을 깐다 — 색 견본 글자는 그 위에 얹는다 */
.dprev{position:relative;overflow:hidden}
.dprev .dshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.dprev .dbar,.dprev b,.dprev em,.dprev .dchip{position:relative;z-index:1}
/* 예시 그림이 있으면 견본 글자(종목명·89,400)는 아예 안 그린다 — 그림을 가려서 뭘 보여주는지
   알 수 없게 된다(실측 2026-09-03 스크린샷). 파생 스킨만 강조색 띠로 구분한다. */
.dprev .dtint{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:1}
.dprev:has(.dshot){min-height:74px}