/* ==========================================================
   영상 상단 헤더(배너) — 사장님 2026-09-27 «상단 헤더 선택적으로 켜고 끄고 · 시점 · 템플릿 여러 개 · 번호+이 영상 CTA 로 문자 유도 ·
   기본은 각 생성기 디자인에 맞게». 판정·문구는 src/js/hdrplan.js, 켜고 끄기는 app.js VG_APPLY_HEADER · hdrApplySlide.

   · 헤더가 켜진 장은 장 무대(#deck)만 줄인다 — 기준점은 자막 띠 윗선(640, 616). 자막·고지는 그대로.
     줄이는 배율 --hk 와 높이 --hh 는 hdrplan.js 의 K·H 와 같아야 한다(_titlecheck 대조).
   · 움직임 금지(animation·transition·will-change) — 렌더는 장면을 멈춰서 찍는다(renderonly 가 애니메이션을 다 끈다).
   · 글자 요소는 color·font-family 를 **직접** 선언한다 — 상속에 기대면 #frame[data-rt] 색·사용자 글꼴·밝게 테마 먹색이 새어 든다.
   · 클래스 이름은 .vhdr / .vh-* 만 — .kicker·.tip·.stitle 등은 색 테마(rtCss)가 !important 로 덮는다.
   · 토큰(--vh-*)은 범위 클래스 .vhs 에 둔다 — #frame 과 화면 카드 견본(.hdrmini) 이 같은 표를 쓴다.
     «디자인 맞춤»(auto)은 스킨(data-dsn)·밝기(.light) 짝으로, 색 테마 회차는 app.js 가 인라인 --vh-* 로 덮는다.
   ========================================================== */
#frame{--hh:88px;--hk:.857143}
/* 장 무대 기본 틀 — 헤더와 무관하게 필요하다: transform 이 걸리면 #deck 이 .slide{inset:0} 의 기준 상자가 된다(원래 높이 0 → 모든 장이 납작해진다) */
#deck{position:absolute;left:0;top:0;width:1280px;height:720px;overflow:hidden}
#frame.hdr-on{background:var(--vh-rail,#0A121E)}
#frame.hdr-on #deck{transform-origin:640px 616px;transform:scale(var(--hk))}
/* 좌우 여백 없애기(사장님 2026-09-27) — 장 배경은 #hdrBg 가 화면 전체에 깔고(app.js hdrBgFrom), 줄어드는 #deck 의 장은 배경을 비운다.
   ⚠️ 특이성: 색 테마(rtCss)가 #frame[data-rt] .slide{background:… !important} 로 칠한다 — 이 규칙(아이디 둘)이 이겨야 한다 */
.vhbg{position:absolute;left:0;top:0;width:1280px;height:720px;z-index:0;visibility:hidden;overflow:hidden;pointer-events:none}
#frame.hdr-on .vhbg{visibility:visible}
#frame.hdr-on #deck .slide.vh-clear{background:transparent!important;box-shadow:none!important}
/* 장식용 배경층(.slidebg — 장면 일러스트)은 줄인 만큼 되돌려 화면 전체로(무대와 같은 기준점) */
#frame.hdr-on #deck .slide.vh-clear>.slidebg{transform-origin:640px 616px;transform:scale(calc(1 / var(--hk)))}
/* 첫 장 «사진 헤드라인»(hero)은 사진이 곧 장 바탕이다 — 줄이지 않고 원래 크기 그대로 둔다(위 88px 는 헤더가 덮는다). 글(.cap)은 사진 안 아래쪽이라 헤더와 안 겹친다 */
#frame.hdr-on #deck .slide.vh-clear[data-open="hero"] .photowrap{transform-origin:640px 616px;transform:scale(calc(1 / var(--hk)))}
/* 화면 전체 «내용 그림»(웹툰 배경형 컷 .toonwrap.tbg · 키움 «배경 전체» 캡처)도 좌우 끝까지(사장님 2026-09-27 «좌우 여백 전부 없게»).
   예전엔 무대와 같이 줄고 옆을 그 그림의 흐린 사본(.vhbg.fill)으로 채웠는데, 흐린 띠가 여백으로 보였다.
   헤더가 뜨는 장(.vh-on)은 줄어든 무대 좌표에서 칸을 넓혀 **화면 0..1280 × 헤더 아래 88..720** 을 채운다(기준점 640,616 · 배율 K):
   왼쪽·오른쪽 640−640/K · 위 0(=화면 88) · 아래 104−104/K(=화면 720) → 무대 좌표 1493×737. 그림은 그 칸에 cover — 헤더 밑에 들어가는 그림은 없다.
   ⚠️ .vh-on 은 «지금 장»(hdr-on)이 아니라 판정표대로 **장마다 미리** 붙는 고정 표식이다(app.js hdrMark).
      말풍선 자리(toonlayout)가 불러올 때 이 칸 크기로 재기 때문에 — 보일 때만 넓히면 잰 칸과 그린 칸이 달라 말풍선이 그림과 어긋난다.
   ⚠️ width:auto·max-width:none 이 없으면 캡처 칸이 기본 규칙(.chartbox.hasimg{width:fit-content;max-width:100%})에 걸려 오른쪽이 1097px 에서 끊겼다(실측).
   ⚠️ 캡처 장 콜아웃 층(.callayer) — 접힘은 slides.css 가 고친다(:not(.chartbox,.callayer), 2026-09-28). 여기서는 넓어진 캡처 가장자리 봉을 짚은 동그라미가
      장 상자(화면 91..1189)에서 잘리지 않게 overflow 만 푼다(아래 줄). 이 줄만 따로 넣으면 콜아웃이 헤더 장에서만 제목 줄에 몰려 뜬다(검토 2026-09-27) — 둘은 같이 간다. */
#frame.toonbg #deck .slide.vh-on .toonwrap.tbg,
#frame.chartbg #deck .slide.vh-on:has(.chartbox.hasimg) .chartbox.hasimg{left:calc(640px - 640px / var(--hk));right:calc(640px - 640px / var(--hk));top:0;bottom:calc(104px - 104px / var(--hk));width:auto;max-width:none}
#frame.chartbg #deck .slide.vh-on:has(.chartbox.hasimg) .callayer{overflow:visible}   /* 바깥은 #frame(hdr-on overflow:hidden)이 자르고 위 88px 는 헤더(z 30)가 덮는다 */
/* 칸 안의 자막 자리 기준 값도 1/K — 아래 띠는 자막 띠(화면 616) 바로 위, 아래 그늘·픽셀 하늘색 띠는 화면 616..720 */
#frame.toonbg #deck .slide.vh-on .toonwrap.tbg .tband.bot{bottom:calc(104px / var(--hk))}
#frame.toonbg #deck .slide.vh-on .toonwrap.tbg::after{height:calc(150px / var(--hk))}
#frame.toonbg[data-dsn="pixel"] #deck .slide.vh-on .toonwrap.tbg::after{height:calc(104px / var(--hk))}
/* 알약형(띠가 투명한 헤더) — 웹툰 배경형 컷은 그림을 헤더 뒤(화면 0..88)까지 편다(사장님 2026-09-28 예시 보고 선택). 칸 = 무대 1493×840 = 화면 전체 1280×720
   → 헤더 끈 컷과 같은 자르기. 말풍선·외침은 toonlayout.js topReserve 가 위 88px(무대 88/K)를 비워 알약 밑으로 안 들어간다. 키움 캡처는 그대로 헤더 아래부터.
   ⚠️ 표식(.vh-on)과 [data-hdr] 둘 다 보는 칸이라, 템플릿을 알약 ↔ 다른 것으로 바꾸면 app.js hdrMark 가 그 컷을 다시 잰다 */
#frame.toonbg[data-hdr="pill"] #deck .slide.vh-on .toonwrap.tbg{top:calc(-88px / var(--hk))}
#frame.toonbg[data-hdr="pill"] #deck .slide.vh-on .toonwrap.tbg .tband.top{top:calc(88px / var(--hk))}   /* 위 띠(«배경+띠» 글꼴)도 헤더 자리 아래부터 — 칸만 헤더 뒤로 펴고 띠는 예전처럼 화면 88 바로 밑(2026-09-28 _fullbleedcheck A 실측: 안 넣으면 띠가 화면 0..51 알약 밑에 숨었다) */
/* 줄어든 무대의 «넘침 자르기» 가 원래 크기로 되돌린 배경층을 가장자리에서 잘랐다(실측 — 첫 장 일러스트가 1190px 에서 끊김). 헤더가 뜬 동안만 풀고, 바깥은 #frame 이 자른다 */
#frame.hdr-on #deck{overflow:visible}
#frame.hdr-on{overflow:hidden}
.vhdr{position:absolute;left:0;top:0;width:1280px;height:var(--hh,88px);z-index:30;visibility:hidden;overflow:hidden;box-sizing:border-box;
  background-color:var(--vh-bgc,#000);background-image:var(--vh-bg,none)}
.vhdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--vh-edge-w,0px);background:var(--vh-edge,transparent)}
#frame.hdr-on .vhdr{visibility:visible}
.vh-face{position:absolute;left:0;right:0;top:0;bottom:var(--vh-edge-w,0px);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 32px;
  white-space:nowrap;visibility:hidden;box-sizing:border-box;
  color:var(--vh-tx,#fff);font-family:var(--vh-font,'BlackHanSans','GmarketSans','Pretendard',sans-serif);font-weight:var(--vh-fw,400);
  font-size:var(--vh-fs,48px);line-height:1;letter-spacing:-.5px}
#frame.hdr-on:not(.hdr-ph) .vh-slo,#frame.hdr-on.hdr-ph .vh-cta{visibility:visible}
.vh-t{color:var(--vh-tx,#fff);font-family:inherit}
.vh-t span{font-style:normal;font-family:inherit}
.vh-r{color:var(--vh-r,#FF3B30)}.vh-y{color:var(--vh-y,#FFD400)}.vh-c{color:var(--vh-c,#35D7E8)}
/* 번호 면은 띠(88px)를 꽉 채운다 — 사장님 2026-09-27 «번호를 칸에 좀 더 꽉 차게»(54px → 68px, 띠 높이의 77%) */
.vh-lab{flex:none;font-family:'Pretendard',sans-serif;font-weight:800;font-size:28px;line-height:1;padding:9px 14px;border-radius:10px;
  background:var(--vh-chip-bg,#FFD400);color:var(--vh-chip-tx,#111);border:var(--vh-chip-bd,0 solid transparent);letter-spacing:0}
.vh-ph{flex:none;font-family:var(--vh-num,'GmarketSans','Pretendard',sans-serif);font-weight:700;font-size:68px;color:var(--vh-tx,#fff);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.vh-kw{flex:none;font-family:var(--vh-font,'BlackHanSans','GmarketSans',sans-serif);font-size:52px;color:var(--vh-y,#FFD400)}
.vh-ic{flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:12px;background:var(--vh-ic-bg,transparent);color:var(--vh-ic,#fff)}
.vh-ic svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vh-ic.cd svg{width:46px;height:46px}
.vh-cta .vh-in{gap:14px}
/* 안쪽 묶음 — 칸을 넘치면 app.js hdrFit 이 이것만 줄인다(transform 이라 칸 크기·다른 측정은 그대로) */
.vh-in{display:inline-flex;align-items:center;gap:16px;flex:none;transform-origin:50% 50%}
.vhs[data-hdr="split"] .vh-in{transform-origin:0 50%}
/* 번호 헤더가 떠 있는 장에서는 장 안의 작은 번호 상자(.ctabox)를 숨긴다 — 같은 번호가 두 번(클래스로만, 인라인 display 금지 — 절대 규칙 10) */
#frame.hdr-ph .ctabox{visibility:hidden}

/* ---------- 고정 템플릿 5종(스킨 무관) ---------- */
/* 블랙 임팩트 — 사장님 예시 ① «구독&좋아요는 종목분석에 힘이 됩니다!» */
.vhs[data-hdr="black"]{--vh-bgc:#000;--vh-bg:none;--vh-edge:#1A1A1A;--vh-edge-w:2px;--vh-tx:#FFFFFF;--vh-r:#FF3B30;--vh-y:#FFD400;--vh-c:#35D7E8;
  --vh-chip-bg:#FFD400;--vh-chip-tx:#111111;--vh-font:'BlackHanSans','GmarketSans',sans-serif;--vh-fw:400;--vh-fs:52px;--vh-ic:#FF0000}
/* 방송 레드 — 사장님 예시 ② «010-… '구독'». 대비는 가장 밝은 정거장(#E8141B)으로 잰다 */
.vhs[data-hdr="red"]{--vh-bgc:#E8141B;--vh-bg:linear-gradient(180deg,#E8141B,#B00D12);--vh-edge:#5A0000;--vh-edge-w:4px;--vh-tx:#FFFFFF;--vh-r:#FFF36B;--vh-y:#FFF36B;--vh-c:#FFFFFF;
  --vh-chip-bg:#FFFFFF;--vh-chip-tx:#B00D12;--vh-font:'BlackHanSans','GmarketSans',sans-serif;--vh-fw:400;--vh-fs:50px;--vh-ic-bg:#FFFFFF;--vh-ic:#E8141B}
/* 투톤 — 왼쪽 빨강 칸(아이콘·라벨) + 오른쪽 먹색(번호) */
.vhs[data-hdr="split"]{--vh-bgc:#111111;--vh-bg:linear-gradient(105deg,#D90000 0 300px,#111 300px);--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF5A4E;--vh-y:#FFD400;--vh-c:#35D7E8;
  --vh-chip-bg:#FFD400;--vh-chip-tx:#111111;--vh-font:'BlackHanSans','GmarketSans',sans-serif;--vh-fw:400;--vh-fs:46px;--vh-ic:#FFFFFF}
/* 빨강 칸(0~300px, 105도로 기울어 위아래 ±12px) 안에는 아이콘(+번호 면은 «문자» 칩)만 — 글자·번호는 칸 밖(330px~)에서 시작.
   실측 2026-09-27: 첫 판은 «구독»·«010-8» 이 빨강 칸에 걸렸고, 유튜브 아이콘(빨강)이 빨강 칸에 묻혔다 */
.vhs[data-hdr="split"] .vh-face{justify-content:flex-start;padding-left:36px}
.vhs[data-hdr="split"] .vh-slo .vh-ic{background:#FFFFFF}
.vhs[data-hdr="split"] .vh-slo .vh-t{margin-left:220px}
.vhs[data-hdr="split"] .vh-cta .vh-lab{order:1;background:#FFFFFF;color:#D90000}
.vhs[data-hdr="split"] .vh-cta .vh-ph{order:2;margin-left:128px}
.vhs[data-hdr="split"] .vh-cta .vh-kw{order:3}
/* 형광 라벨 — 노란 띠 + 먹색 글자 */
.vhs[data-hdr="yellow"]{--vh-bgc:#FFE14D;--vh-bg:none;--vh-edge:#111111;--vh-edge-w:3px;--vh-tx:#111111;--vh-r:#B00012;--vh-y:#B00012;--vh-c:#0B4FC4;
  --vh-chip-bg:#111111;--vh-chip-tx:#FFE14D;--vh-font:'BlackHanSans','GmarketSans',sans-serif;--vh-fw:400;--vh-fs:50px;--vh-ic:#111111}
/* 미니멀 알약 — 띠 없이 가운데 알약 하나(여백 색 = 장 바탕) */
.vhs[data-hdr="pill"]{--vh-bgc:transparent;--vh-bg:none;--vh-edge-w:0px;--vh-tx:#111823;--vh-r:#D0021B;--vh-y:#D0021B;--vh-c:#0B4FC4;
  --vh-chip-bg:#D0021B;--vh-chip-tx:#FFFFFF;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:38px;--vh-num:'Pretendard',sans-serif;--vh-ic:#D0021B}
.vhs.light[data-hdr="pill"]{--vh-tx:#FFFFFF;--vh-r:#FF6B6B;--vh-y:#FFD470;--vh-c:#7FD3FF;--vh-ic:#FFFFFF}
/* 알약 — 가로로 넓게(최소 900px) · 높이 70px(띠 88px 안) · 글씨 키움(2026-09-27 2차 사장님 «옆으로 더 키우면서 글씨 크기도») */
.vhs[data-hdr="pill"] .vh-face{left:50%;right:auto;top:9px;bottom:auto;height:70px;min-width:900px;transform:translateX(-50%);padding:0 56px;border-radius:9999px;gap:14px;max-width:1240px;overflow:hidden;background:#FFFFFF;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vhs.light[data-hdr="pill"] .vh-face{background:#111823}
.vhs[data-hdr="pill"] .vh-ph{font-size:54px;font-weight:800}
.vhs[data-hdr="pill"] .vh-kw{font-family:'Pretendard',sans-serif;font-weight:800;font-size:44px}
.vhs[data-hdr="pill"] .vh-lab{font-size:26px;padding:7px 12px}
.vhs[data-hdr="pill"] .vh-in{gap:12px}
.vhs[data-hdr="pill"] .vh-ic{width:50px;height:50px}.vhs[data-hdr="pill"] .vh-ic svg{width:38px;height:38px}

/* ---------- 디자인 맞춤(auto) — 스킨·밝기 짝. 옛 상단 바의 색·두께는 아랫선(edge)으로 옮겨 스킨의 얼굴을 잇는다 ---------- */
/* a(기본) — 어둡게 */
.vhs[data-hdr="auto"]{--vh-bgc:#070B14;--vh-bg:none;--vh-edge:linear-gradient(90deg,#35D7E8,#4A9FE8,#F5B942,#F07C3C,#FF4D4D);--vh-edge-w:4px;
  --vh-tx:#EFF4FA;--vh-r:#FF6B6B;--vh-y:#F5B942;--vh-c:#35D7E8;--vh-chip-bg:#F5B942;--vh-chip-tx:#0B1220;
  --vh-font:'GmarketSans','Pretendard',sans-serif;--vh-fw:700;--vh-fs:44px;--vh-ic:#F5B942}
.vhs.light[data-hdr="auto"]{--vh-bgc:#16202F;--vh-tx:#FFFFFF;--vh-y:#FFD470;--vh-r:#FF8A8A;--vh-chip-bg:#FFD470;--vh-chip-tx:#16202F;--vh-ic:#FFD470}
/* news — 빨강 띠 */
.vhs[data-hdr="auto"][data-dsn="news"]{--vh-bgc:#C41E17;--vh-edge:#7A0A06;--vh-edge-w:3px;--vh-tx:#FFFFFF;--vh-r:#FFF36B;--vh-y:#FFF36B;--vh-c:#FFFFFF;
  --vh-chip-bg:#FFFFFF;--vh-chip-tx:#C41E17;--vh-font:'BlackHanSans','Pretendard',sans-serif;--vh-fw:400;--vh-fs:48px;--vh-ic:#FFFFFF}
/* punch — 먹보라 + 무지개 아랫선 */
.vhs[data-hdr="auto"][data-dsn="punch"]{--vh-bgc:#0C0518;--vh-edge:linear-gradient(90deg,#FFC531,#FF8A00,#FF3D6E,#B14BFF,#22E0C0);--vh-edge-w:4px;--vh-tx:#FFFFFF;
  --vh-r:#FF3D6E;--vh-y:#FFC531;--vh-c:#22E0C0;--vh-chip-bg:#FFC531;--vh-chip-tx:#0C0518;--vh-font:'BlackHanSans','Pretendard',sans-serif;--vh-fw:400;--vh-fs:50px;--vh-ic:#FFC531}
/* min — 채움 없이 가는 금선 */
.vhs[data-hdr="auto"][data-dsn="min"]{--vh-bgc:transparent;--vh-edge:#F5B942;--vh-edge-w:1px;--vh-tx:#EFF4FA;--vh-r:#FF8A8A;--vh-y:#F5B942;--vh-c:#7FD3FF;
  --vh-chip-bg:transparent;--vh-chip-tx:#F5B942;--vh-chip-bd:1.5px solid #F5B942;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:40px;--vh-ic:#F5B942}
.vhs.light[data-hdr="auto"][data-dsn="min"]{--vh-edge:#7E6220;--vh-tx:#16202F;--vh-r:#B00012;--vh-y:#7E6220;--vh-c:#0B4FC4;--vh-chip-tx:#7E6220;--vh-chip-bd:1.5px solid #7E6220;--vh-ic:#7E6220}
/* kiwoom — HTS 먹회색 + 빨강·금·청록 아랫선 */
.vhs[data-hdr="auto"][data-dsn="kiwoom"]{--vh-bgc:#1A1F26;--vh-edge:linear-gradient(90deg,#F0464B,#C9942F,#35D7E8);--vh-edge-w:3px;--vh-tx:#EFF4FA;--vh-r:#FF6B70;--vh-y:#E8B24B;--vh-c:#35D7E8;
  --vh-chip-bg:#F0464B;--vh-chip-tx:#FFFFFF;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:42px;--vh-ic:#F0464B}
.vhs.light[data-hdr="auto"][data-dsn="kiwoom"]{--vh-bgc:#FFFFFF;--vh-tx:#10233A;--vh-r:#D63A3A;--vh-y:#8A6100;--vh-c:#0B4FC4;--vh-chip-bg:#D63A3A;--vh-ic:#D63A3A}
/* coin — 노랑 + 먹색(캔들) */
.vhs[data-hdr="auto"][data-dsn="coin"]{--vh-bgc:#FFE14D;--vh-edge:#141414;--vh-edge-w:3px;--vh-tx:#141414;--vh-r:#B00012;--vh-y:#B00012;--vh-c:#0B4FC4;
  --vh-chip-bg:#141414;--vh-chip-tx:#FFE14D;--vh-font:'BlackHanSans','Pretendard',sans-serif;--vh-fw:400;--vh-fs:48px;--vh-ic:#141414}
/* report — 남색 + 왼쪽 금 기둥 */
.vhs[data-hdr="auto"][data-dsn="report"]{--vh-bgc:#161D2E;--vh-bg:linear-gradient(90deg,#F5B32B 0 8px,#161D2E 8px);--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF8A8A;--vh-y:#F5B32B;--vh-c:#7FD3FF;
  --vh-chip-bg:#F5B32B;--vh-chip-tx:#10254A;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:42px;--vh-ic:#F5B32B}
.vhs.light[data-hdr="auto"][data-dsn="report"]{--vh-bgc:#10254A;--vh-bg:linear-gradient(90deg,#F5B32B 0 8px,#10254A 8px)}
/* edit — 주황 띠 + 먹색 글자(흰 글자는 3.1 로 미달) */
.vhs[data-hdr="auto"][data-dsn="edit"]{--vh-bgc:#FF5A1F;--vh-edge-w:0px;--vh-tx:#141414;--vh-r:#141414;--vh-y:#141414;--vh-c:#141414;
  --vh-chip-bg:#141414;--vh-chip-tx:#F4F1EA;--vh-font:'Pretendard',sans-serif;--vh-fw:900;--vh-fs:44px;--vh-ic:#141414}
/* research — 먹색 + 왼쪽 빨강 기둥 */
.vhs[data-hdr="auto"][data-dsn="research"]{--vh-bgc:#181818;--vh-bg:linear-gradient(90deg,#DA291C 0 28px,#181818 28px);--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF5A4E;--vh-y:#FF5A4E;--vh-c:#7FD3FF;
  --vh-chip-bg:#FF5A4E;--vh-chip-tx:#181818;--vh-font:'Pretendard',sans-serif;--vh-fw:900;--vh-fs:44px;--vh-ic:#FF5A4E}
/* binance — 옛 38px 시세 줄을 헤더로 승격 */
.vhs[data-hdr="auto"][data-dsn="binance"]{--vh-bgc:#090C0F;--vh-edge:#2B3139;--vh-edge-w:1px;--vh-tx:#FFFFFF;--vh-r:#F6465D;--vh-y:#FCD535;--vh-c:#0ECB81;
  --vh-chip-bg:#FCD535;--vh-chip-tx:#0B0E11;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:42px;--vh-ic:#FCD535}
/* kikin 셋 — 어두운 판 고정(장마다 밝기를 뒤집는 스킨이라 헤더는 한 판으로) */
.vhs[data-hdr="auto"][data-dsn="kikin"]{--vh-bgc:#0A0A0C;--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF6B6B;--vh-y:#C6FF3D;--vh-c:#7FD3FF;--vh-chip-bg:transparent;--vh-chip-tx:#C6FF3D;--vh-chip-bd:1.5px solid #C6FF3D;
  --vh-font:'GmarketSans','Pretendard',sans-serif;--vh-fw:700;--vh-fs:44px;--vh-ic:#C6FF3D}
.vhs[data-hdr="auto"][data-dsn="kikin-night"]{--vh-bgc:#0B1626;--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF8A8A;--vh-y:#6FE3FF;--vh-c:#6FE3FF;--vh-chip-bg:transparent;--vh-chip-tx:#6FE3FF;--vh-chip-bd:1.5px solid #6FE3FF;
  --vh-font:'GmarketSans','Pretendard',sans-serif;--vh-fw:700;--vh-fs:44px;--vh-ic:#6FE3FF}
.vhs[data-hdr="auto"][data-dsn="kikin-maple"]{--vh-bgc:#1E0F0D;--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FF8A8A;--vh-y:#FFAF5C;--vh-c:#FFD9A8;--vh-chip-bg:transparent;--vh-chip-tx:#FFAF5C;--vh-chip-bd:1.5px solid #FFAF5C;
  --vh-font:'GmarketSans','Pretendard',sans-serif;--vh-fw:700;--vh-fs:44px;--vh-ic:#FFAF5C}
/* pixel — 주황 + 먹색 픽셀 글자(흰 글자는 3.05 로 미달) */
.vhs[data-hdr="auto"][data-dsn="pixel"]{--vh-bgc:#FF5E24;--vh-edge:#232629;--vh-edge-w:3px;--vh-tx:#232629;--vh-r:#232629;--vh-y:#232629;--vh-c:#232629;
  --vh-chip-bg:#232629;--vh-chip-tx:#FFFFFF;--vh-font:'Galmuri11','Pretendard',sans-serif;--vh-fw:700;--vh-fs:44px;--vh-num:'Galmuri11','Pretendard',sans-serif;--vh-ic:#232629}
.vhs[data-hdr="auto"][data-dsn="pixel"] .vh-ph{font-size:62px;font-weight:700}
/* bugatti(모노라인) — 순검정 + 파랑 가는 선, 굵기 400, 모서리 0 */
.vhs[data-hdr="auto"][data-dsn="bugatti"]{--vh-bgc:#000000;--vh-edge:#5B8CFF;--vh-edge-w:1px;--vh-tx:#FFFFFF;--vh-r:#FF6B6B;--vh-y:#5B8CFF;--vh-c:#5B8CFF;
  --vh-chip-bg:transparent;--vh-chip-tx:#5B8CFF;--vh-chip-bd:1px solid #5B8CFF;--vh-font:'Saira Condensed','Pretendard',sans-serif;--vh-fw:400;--vh-fs:44px;--vh-num:'JetBrains Mono','Pretendard',monospace;--vh-ic:#5B8CFF}
.vhs[data-hdr="auto"][data-dsn="bugatti"] .vh-lab{border-radius:0}
.vhs[data-hdr="auto"][data-dsn="bugatti"] .vh-ph{font-weight:400}
/* apple — 어둡게(키노트) · 밝게(제품 페이지). 1판은 불투명(유리 blur 는 2판) */
.vhs[data-hdr="auto"][data-dsn="apple"]{--vh-bgc:#1C1C22;--vh-edge:#3A3A40;--vh-edge-w:1px;--vh-tx:#F5F5F7;--vh-r:#FF6B6B;--vh-y:#2997FF;--vh-c:#2997FF;
  --vh-chip-bg:#0071E3;--vh-chip-tx:#FFFFFF;--vh-font:'Pretendard',sans-serif;--vh-fw:700;--vh-fs:42px;--vh-ic:#2997FF}
.vhs.light[data-hdr="auto"][data-dsn="apple"]{--vh-bgc:#FFFFFF;--vh-edge:#D2D2D7;--vh-tx:#1D1D1F;--vh-r:#D0021B;--vh-y:#0071E3;--vh-c:#0071E3;--vh-ic:#0071E3}
/* pistachio — 초록 띠 + 흰 글자(금색을 초록 위 글자로 쓰면 2.59) */
.vhs[data-hdr="auto"][data-dsn="pistachio"]{--vh-bgc:#00704A;--vh-edge-w:0px;--vh-tx:#FFFFFF;--vh-r:#FFE9A8;--vh-y:#FFE9A8;--vh-c:#FFFFFF;
  --vh-chip-bg:#F1F8F6;--vh-chip-tx:#00704A;--vh-font:'Pretendard',sans-serif;--vh-fw:800;--vh-fs:42px;--vh-ic:#FFFFFF}

/* ---------- 화면 카드 견본(gen.js hdrCards) — 같은 토큰·같은 마크업을 카드 폭에 맞춰 줄인다(배율은 JS 가 넣는다) ---------- */
.hdrmbox{display:block;position:relative;width:100%;height:18px;overflow:hidden;background:#0A121E}
.hdrmbox+.hdrmbox{margin-top:3px}
.hdrmini{display:block;position:absolute;left:0;top:0;width:1280px;height:88px;transform:scale(.21);transform-origin:0 0;--vh-rail:#0A121E}
.hdrmini.light{--vh-rail:#EEF2F8}
.hdrmini .vhdr{visibility:visible}
.hdrmini .vh-slo{visibility:visible}
.hdrmini.ph .vh-slo{visibility:hidden}.hdrmini.ph .vh-cta{visibility:visible}
/* 설정 칸 */
#hdrWrap{display:block}
#hdrWrap .hdrbadge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:800;background:#E8141B;color:#fff;vertical-align:1px}
#hdrCards.hdrg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#hdrCards .hdrc{padding:0 0 8px}
#hdrCards .hdrc .hdrmbox:first-child{border-radius:10px 10px 0 0}
#hdrCards .hdroff{display:flex;align-items:center;justify-content:center;height:40px;font-size:12px;color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(127,127,127,.12) 8px 16px)}
#hdrCards .hdrc b{margin-top:6px;font-size:13px}
#hdrCards .hdrc em{font-size:10.5px}
#hdrWrap.off #hdrOpts{display:none}
#hdrOpts{margin-top:10px;display:grid;gap:8px}
#hdrOpts .hdrwarn{display:block;color:var(--red,#E5484D);font-style:normal;font-weight:700;font-size:12px}
#hdrOpts .hdrwarn:empty{display:none}
.hdrpicks{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.hdrpick{border:1px solid var(--line,#e0e0e0);background:#111;color:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;line-height:1.3}
.hdrpick .vh-r{color:#FF5A4E}.hdrpick .vh-y{color:#FFD400}.hdrpick .vh-c{color:#35D7E8}
.hdrpick span{font-style:normal}
.hdrpick:hover{border-color:#FFD400}
.hdrpv{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.hdrpv button{border:1px solid var(--line,#e0e0e0);background:transparent;color:var(--text);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
.hdrpv button.on{background:#E8141B;border-color:#E8141B;color:#fff;font-weight:800}
/* ---------- 2차(2026-09-27) — 시점·표시 칩 · 상태 줄 · 잠금 안내 · 타임라인 · 첫 켜기 안내창 ---------- */
#hdrWrap .hdrstatus{margin:8px 0 2px;font-size:12px;line-height:1.55;color:var(--mut,var(--dim))}
#hdrWrap.off .hdrstatus{margin-top:6px}
.hdrstatus b{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:800;vertical-align:1px}
.hdrstatus .hdrst-def{background:var(--acc,#2E7DFF);color:#fff}
.hdrstatus .hdrst-once{background:#F59E0B;color:#111}
.hdrstatus .hdrst-off{background:var(--card2,#1B2540);color:var(--mut,#aaa);border:1px solid var(--line2,rgba(127,127,127,.3))}
.hdrst-btn{margin-left:6px;border:1px solid var(--line2,rgba(127,127,127,.35));background:transparent;color:var(--tx,inherit);border-radius:7px;padding:2px 9px;font-size:11.5px;cursor:pointer}
.hdrst-btn.pri{background:var(--acc,#2E7DFF);border-color:var(--acc,#2E7DFF);color:#fff;font-weight:800}
.hdrst-btn:disabled{opacity:.6;cursor:default}
#hdrOpts .hdrrow{display:grid;gap:6px}
#hdrOpts .hdrlab{font-size:12.5px;font-weight:800;color:var(--tx,inherit)}
.hdrchips{display:flex;flex-direction:column;gap:6px}
#hdrFaceChips.hdrchips,#pfHdrFaceChips.hdrchips{flex-direction:row;flex-wrap:wrap}
.hdrcgrp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hdrcg{min-width:84px;font-size:11px;color:var(--dim,#999);font-weight:700}
.hdrchip{border:1px solid var(--line2,rgba(127,127,127,.35));background:var(--card2,transparent);color:var(--tx,inherit);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;line-height:1.3}
.hdrchip.on{background:var(--acc,#2E7DFF);border-color:var(--acc,#2E7DFF);color:#fff;font-weight:800}
.hdrchip.dis{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.hdrchip .hdrlock{font-style:normal;font-size:10px;margin-left:3px;padding:0 4px;border-radius:4px;background:rgba(127,127,127,.25);text-decoration:none;display:inline-block}
/* 잠금 안내 — 빨강(사장님 2026-09-27 «안 된다는 안내문구 빨간색으로») */
.hdrnote{display:none;font-size:12.5px;line-height:1.55;padding:8px 11px;border-radius:9px;background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.55);color:#E5484D;font-weight:600}
:root.lite .hdrnote{color:#C62828;background:rgba(198,40,40,.07);border-color:rgba(198,40,40,.45)}
.hdrnote b{display:inline-block;margin-right:6px;padding:0 7px;border-radius:6px;background:#E5484D;color:#fff;font-size:11px;font-weight:800}
.hdrnote.on{display:block}
.hdrnote.flash{outline:2px solid #E5484D;background:rgba(229,72,77,.18)}
#hdrWrap .hdrpv button.dis{opacity:.45;cursor:not-allowed}
/* 제목 줄 오른쪽(2026-09-29) — 제목 글씨(800)를 물려받지 않게 · 헤더를 끄면 숨김 */
#hdrWrap>span>.hdrpv{margin-left:auto;font-weight:600;font-size:12px;flex-wrap:nowrap}
#hdrWrap.off .hdrpv{display:none}
/* 타임라인 개략도 — 10분 영상 기준, 어디서 무엇이 뜨나 */
.hdrtl:empty{display:none}
.hdrtlbar{position:relative;height:16px;border-radius:6px;background:rgba(127,127,127,.18);overflow:visible;margin:18px 0 4px}
.hdrtlbar>b{position:absolute;top:0;bottom:0}
.hdrtl-s{background:#3B82F6}.hdrtl-c{background:#E8141B}.hdrtl-x{background:rgba(127,127,127,.22)}
.hdrtlbar>b:first-child{border-radius:6px 0 0 6px}
.hdrtlm{position:absolute;top:-16px;font-style:normal;font-size:10px;color:var(--dim,#999);white-space:nowrap;transform:translateX(-10%)}
.hdrtlm::after{content:'';position:absolute;left:10%;top:13px;width:1px;height:22px;background:currentColor;opacity:.6}
.hdrtlleg{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--dim,#999);align-items:center}
.hdrtlleg span{display:inline-flex;align-items:center;gap:4px}
.hdrtlleg span b{display:inline-block;width:12px;height:8px;border-radius:2px}
.hdrtlleg em{font-style:normal;opacity:.8;margin-left:auto}
/* 첫 켜기 안내창 */
.hdrtip{position:fixed;inset:0;z-index:100000;background:rgba(5,8,14,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.hdrtip-in{max-width:460px;width:100%;background:var(--card,#151E31);color:var(--tx,#E8EEF7);border:1px solid var(--line2,rgba(255,255,255,.12));border-radius:16px;padding:20px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hdrtip-in h4{margin:0 0 10px;font-size:16px}
.hdrtip-in p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--mut,inherit)}
.hdrtip-off{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim,#999);margin:6px 0 4px}
.hdrtip-err{color:var(--red,#E5484D);font-size:12px;min-height:0}
.hdrtip-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.hdrtip-btns .btn{width:auto;padding:7px 14px}
/* 예약 폼(pipeline.js) 헤더 칸 */
.pfhdrrow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
#pfHdrBox .hdrnote{margin-top:4px}
#pfHdrBox .hdrstatus{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--mut,var(--dim))}
/* 내 채널 설정(selfsetup.js) — 상단 헤더 기본값 */
#selfSetup .sshdr{margin:4px 0 12px;padding:10px 12px;border:1px solid var(--line2,rgba(127,127,127,.3));border-radius:10px;background:var(--card2,transparent)}
#selfSetup .sshdr.flash{outline:2px solid var(--acc,#2E7DFF)}
#selfSetup .sshdr-h{font-size:12px;line-height:1.55;color:var(--mut,inherit);margin-bottom:8px}
#selfSetup .sshdr label.chk{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--tx,inherit)}
#selfSetup .sshdr-g{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#selfSetup .sshdr-g label:last-child{grid-column:1/-1}
#selfSetup .sshdr-g.dim{opacity:.5}
#selfSetup .sshdr em{display:block;font-style:normal;font-size:11px;line-height:1.5;color:var(--dim,#999)}
#selfSetup .sshdr .sshdr-w{color:var(--red,#E5484D);font-weight:700}
#selfSetup .sshdr .sshdr-w:empty{display:none}
#selfSetup .sshdr label.chk input{display:inline-block;width:auto;margin:0;flex:none}
#selfSetup .ssInner{max-height:92vh;overflow-y:auto}   /* 칸이 늘어 작은 화면에서 저장 단추가 화면 밖으로 밀리지 않게 */

/* ---------- B안(사장님 2026-09-27 선택) — 기본은 «언제부터 보일까요?» 셋 · 나머지는 세부 설정 ---------- */
.hdrmain{display:flex;flex-wrap:wrap;gap:8px}
.hdrmain .hdrchip{font-size:14px;padding:9px 18px;font-weight:700}
.hdrmore{margin-top:4px;border:1px dashed var(--line2,rgba(127,127,127,.4));border-radius:10px;padding:0 12px}
.hdrmore>summary{cursor:pointer;list-style:none;padding:9px 0;font-size:12.5px;font-weight:800;color:var(--tx,inherit)}
.hdrmore>summary::-webkit-details-marker{display:none}
.hdrmore>summary::before{content:'▸ ';color:var(--dim,#999)}
.hdrmore[open]>summary::before{content:'▾ '}
.hdrmore>summary span{font-weight:500;color:var(--dim,#999)}
.hdrmore>summary b{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:var(--acc,#2E7DFF)}
.hdrmore[open]{padding-bottom:10px}
.hdrmore>.hdrrow,.hdrmore>label.f,.hdrmore>.hdrpv,.hdrmore>.hint{margin-top:10px}
.hdrtip-in .hdrtip-note{color:#E5484D;font-weight:600;font-size:12.5px}
/* #hdrWrap 제목·설명 — 화면 구성 오른쪽 다른 칸(label.f)과 같은 규격(검토: div.f 라 규격을 못 받아 제목·설명이 한 줄 이탤릭으로 붙었다) */
#hdrWrap>span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin-bottom:3px;color:var(--tx,inherit)}
#hdrWrap>em{display:block;font-style:normal;font-size:12px;color:var(--mut,var(--dim));margin-bottom:9px;line-height:1.55}
#hdrWrap .hdrbadge{margin-left:0}
#screenSetBox .ssR>#hdrWrap{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
#screenSetBox .ssR>#hdrWrap>span::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--gold);flex:none}
/* 화면 구성 배치(사장님 2026-09-28 선택) — PPT형·정보성(PPT)·코인은 헤더 칸이 짧은 쪽(왼쪽)으로 갈 수 있다(refstyle.js hdrSide). 왼쪽에서도 같은 구분선·금색 막대 */
#screenSetBox .ssL>#hdrWrap{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
#screenSetBox .ssL>#hdrWrap>span::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--gold);flex:none}
/* 코인 = 안 2 — 헤더 칸 압축: 템플릿 3열·이름만(설명은 말풍선 title) · «끔» 빗금 24px · «언제부터» 제목과 칩 한 줄. B안 구성·순서는 그대로 */
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrCards.hdrg{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrCards .hdrc{padding:0 0 5px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrCards .hdrc em{display:none}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrCards .hdrc b{margin-top:4px;font-size:12px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrCards .hdroff{height:24px;font-size:10.5px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrWrap>em{margin-bottom:6px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrOpts{margin-top:8px;gap:6px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrOpts>.hdrrow:first-child{grid-template-columns:auto 1fr;align-items:center;gap:10px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrOpts .hdrmain .hdrchip{font-size:13px;padding:6px 14px}
#screenSetBox:is([data-ssfmt="coin"],[data-ssfmt="kiwoom"]) #hdrWrap .hdrtlbar{margin:16px 0 4px}
/* 키움 = 안 2 + 그림 모델 카드 작게(사장님 2026-09-28) — 세로 카드 → 가로 줄(견본 왼쪽 · 설명 오른쪽) */
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards.pickgrid{grid-template-columns:1fr;gap:6px}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;padding:6px;text-align:left;align-items:start}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard .pkthumb{grid-row:1/4;border-radius:7px}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard b{margin-top:2px}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard em{padding:2px 0 0}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard .pkwhen{padding:3px 0 0}
#screenSetBox[data-ssfmt="kiwoom"] #imgModelCards .pickcard .cardlock{grid-column:2}