/* ==========================================================
   생성기 휴대폰 화면(2026-10-21 사장님 «생성기도 모바일 전용 UI — 단계 칩은 위 · 이전/다음은 아래 고정 · 1차»).
   ⚠️ 규칙은 전부 760px 안 · body.gm 으로만 건다 — genmobile.js 가 렌더 페이지(?render=1)가 아닐 때만 붙인다.
      그래서 PC 화면과 미리보기 iframe(좁아도 ?render=1)은 그대로다. 밖에 있는 건 휴대폰 전용 요소 숨김 한 줄뿐.
   ⚠️ base.css 의 맨 끝 K1 블록이 !important 를 많이 쓴다 — 여기도 필요한 곳만 !important.
   ========================================================== */
#gmBar{display:none}
@media (max-width:760px){
  /* ---- 스크롤: base.css 는 body 를 스크롤 칸으로 쓴다(height:100vh) — 휴대폰은 문서가 스크롤해야 주소창이 접히고 전체 갈무리·scrollTo 가 된다 ---- */
  body.gm{height:auto!important;min-height:100vh;overflow:visible!important}
  body.gm.gmbar{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
  /* .app 은 100vh 격자, .panel 은 제 스크롤 칸이었다 — 휴대폰은 한 줄로 펴고 문서가 스크롤한다 */
  body.gm:not(.guest) .app{display:block!important;height:auto!important;min-height:0!important}
  body.gm .panel{overflow:visible!important;height:auto!important;max-width:none!important;margin:0!important;
    padding:8px max(12px, env(safe-area-inset-right,0px)) 16px max(12px, env(safe-area-inset-left,0px))!important}
  /* 작은 글자 → 12px(genmobile.js 가 재서 붙인다) */
  body.gm .gmfs{font-size:12px!important}
  /* 자주 다시 그려지는 칸은 재기(0.6초에 한 번) 사이에 11px 가 잠깐 보인다 — 글자를 박아 둔다(대본 조합 한 줄) */
  body.gm #scriptCombo .scflow{font-size:12px}

  /* ---- 입력칸·단추: 손가락 크기 · 입력칸 글자 16px(아이폰은 16px 아래 칸을 누르면 화면을 확대한다) ---- */
  body.gm .panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  body.gm .panel select,body.gm .panel textarea,
  body.gm .lightbox input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.gm .lightbox select,body.gm .lightbox textarea,
  body.gm #pipePanel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.gm #pipePanel select,body.gm #pipePanel textarea,
  body.gm #selfSetup input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.gm #selfSetup select,body.gm #selfSetup textarea{font-size:16px!important}
  body.gm .panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),body.gm .panel select{min-height:42px}
  body.gm :is(.panel,#pipePanel,#selfSetup,.lightbox,#bellPanel) .btn{min-height:36px}
  body.gm :is(.panel,#pipePanel,#selfSetup,.lightbox,#bellPanel) .btn.sm{min-height:34px;padding-top:6px;padding-bottom:6px}

  /* ---- 1단계 종목 줄: [시장][종목][시점] 한 줄이면 종목 칸이 30px 로 눌린다 — 종목 칸을 첫 줄 전체로, 시장·시점은 둘째 줄 반반 ---- */
  body.gm .row:has(> #genStock){flex-wrap:wrap!important;gap:8px!important}
  body.gm .row > #genStock{order:-1;flex:1 1 100%!important;width:100%!important}
  body.gm .row:has(> #genStock) > select{flex:1 1 0!important;width:auto!important;min-width:0!important}
  /* 인기 종목 칩·새로고침 */
  body.gm #rankWrap .rtab{min-height:34px;padding:0 12px!important;font-size:13px!important}
  body.gm #rankRefresh{min-height:34px!important;padding:0 12px!important;font-size:13px!important}
  body.gm .fmtbadge{font-size:12px!important}
  body.gm .ctaadd-row .cardmore{min-height:36px;padding:0 6px!important}   /* 번호 안내 때 덧붙일 말 «예문 보기»(2026-10-22) */
  body.gm #rankWrap .rankchip{min-height:36px}
  body.gm .hdrst-btn{min-height:34px;padding:0 12px!important}
  body.gm #mktDot{font-size:12px!important}
  body.gm #bellBtn{min-width:36px;min-height:36px}

  /* ---- 두 칸 상자 → 한 칸(반 칸에 눌려 글이 한 단어씩 떨어졌다) ---- */
  body.gm #motionSetBox .msCols,body.gm #screenSetBox .ssTop{display:block!important}
  /* 화면 구성: 미리보기·디자인(오른쪽 칸)을 먼저 — PC 는 오른쪽에 붙어 있지만 휴대폰은 맨 아래로 내려가 고른 결과를 보려면 한참 내려가야 했다 */
  /* 칸 묶음(.ssCols)을 풀어(display:contents) 미리보기·디자인(.ssR)을 상자 맨 위로 — 글꼴·목소리(.ssTop)보다도 위(사장님이 고른 예시 그대로) */
  body.gm #screenSetBox{display:flex!important;flex-direction:column}
  body.gm #screenSetBox .ssCols{display:contents!important}
  body.gm #screenSetBox .ssCols>.ssR{order:-1;position:static!important}
  body.gm #motionSetBox .msCols>*,body.gm #screenSetBox .ssCols>*{width:auto!important;max-width:none!important}
  /* 목소리 줄: [고르기][미리듣기][새로고침] → 고르기 한 줄 · 단추 둘 아래 */
  body.gm .row:has(> #voiceSel){flex-wrap:wrap!important}
  body.gm .row > #voiceSel{flex:1 1 100%!important}
  body.gm .row:has(> #voiceSel) > .btn{flex:1 1 0!important}
  /* 슬라이드 미리보기 아래 줄: 설명 글은 다음 줄로 */
  body.gm #themePreview .row{flex-wrap:wrap!important}
  body.gm #themePreview .row > em.stat{flex:1 1 100%!important}
  body.gm #themePreview .row > .btn{flex:1 1 0!important;min-height:40px}
  /* 그림 카드 묶음 — 한 줄에 둘(썸네일 디자인 19 · 말하는 틀 · 화면 형식) */
  body.gm #thPresetCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.gm #pptStyleCards,body.gm #imgStyleCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}

  /* ---- 후킹 실적 표: 칸마다 이름(genmobile.js 가 .gmhf 로 감싼다) · 두 칸씩 — 종목은 한 줄 전체 ---- */
  body.gm .hk2grid.hookrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;padding:10px;border:1px solid var(--line2);border-radius:12px;margin-bottom:10px!important}
  body.gm .hk2grid.hookrow .gmhf{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
  body.gm .hk2grid.hookrow .gmhf>span{font-size:12px;font-weight:700;color:var(--mut)}
  body.gm .hk2grid.hookrow .gmhf>input,body.gm .hk2grid.hookrow .gmhf>select{width:100%!important;min-width:0}
  body.gm .hk2grid.hookrow .gmhf-stock{grid-column:1/-1}
  body.gm .hk2grid.hookrow .hk2ops,body.gm .hk2grid.hookrow .hk2note,body.gm .hk2grid.hookrow .hk2cfx{grid-column:1/-1}
  body.gm .hk2grid.hookrow .hk2ops .btn{min-height:36px}

  /* ---- 닫기 단추 없는 창에 붙인 «닫기 ✕»(genmobile.js lbClose) — 창 맨 위 오른쪽, 창을 내려도 보이게 ---- */
  body.gm .lightbox .gmlbx{position:sticky;top:0;z-index:5;display:block;margin:0 0 8px auto!important;width:auto!important;min-height:36px;padding:0 14px!important;border-radius:18px!important;font-weight:800}

  /* ---- 사이드 메뉴: 화면 전체를 덮는다(고르면 genmobile.js 가 닫는다) ----
     PC 는 메뉴 목록만 스크롤하고 잔액 칸이 아래에 붙는다 — 휴대폰은 화면이 낮아 목록이 다섯 줄만 보였다. 메뉴 전체를 한 번에 스크롤 */
  body.gm .wzshell{width:100vw!important;max-width:100vw!important}
  body.gm .wzside{width:100%!important;height:100%!important;border-right:0!important;overflow-y:auto!important;overscroll-behavior:contain;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
  body.gm .wzside .wzmenu{flex:none!important;overflow:visible!important}
  body.gm .wzside .wzitem{min-height:46px}
  body.gm .wzside .wzsub2b{min-height:36px}
  body.gm.sideopen #gmBar{display:none!important}

  /* ---- 검수함·예약·작업 현황 창: 화면 전체 ---- */
  body.gm #pipePanel{padding:0!important;align-items:stretch!important}
  body.gm #pipePanel .pipeInner{width:100%!important;max-width:none!important;min-height:100%;max-height:none!important;height:auto!important;overflow:visible!important;border-radius:0!important;border:0!important;box-shadow:none!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px))!important}
  body.gm #pipePanel .pipeHead{position:sticky;top:0;z-index:5;background:var(--panel);gap:6px!important;padding:6px 0 8px;margin:0 0 8px!important}
  body.gm #pipePanel .pipeHead > span{display:none}
  body.gm #pipePanel .ptab{flex:1 1 0;min-width:0;min-height:44px;padding:4px 6px!important;font-size:13px!important;line-height:1.25;white-space:normal;word-break:keep-all}
  body.gm #pipePanel #pipeClose{flex:none;min-height:44px}
  body.gm #pipeNudge .pnlink{min-height:36px;padding:0 8px}
  body.gm #pipeNudge .pnx{min-width:36px;min-height:36px}
  /* 예약 확인표(.pfsheet) — 화면 전체 */
  body.gm .pfsheet{padding:0!important;align-items:stretch!important}
  body.gm .pfsheet .pfsinner{width:100%!important;max-height:none!important;min-height:100%;border-radius:0!important;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px))!important}

  /* ---- 상담·텔레그램 둥근 단추: 아래 줄 위로 · 조금 작게 ---- */
  body.gm #vgChatRoot{right:max(12px, env(safe-area-inset-right,0px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;gap:8px!important}
  body.gm.gmbar #vgChatRoot{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
  body.gm .vgc-fab{width:46px!important;height:46px!important}
  body.gm .vgc-fab svg{width:21px!important;height:21px!important}

  /* ---- 단계 머리: 제목 · «8단계 중 N» · 진행 막대 · 옆으로 넘기는 단계 칩 ----
     이전/다음·자동 제작 시작은 아래 고정 줄이 같은 단추를 누른다 — 여기서는 숨긴다(초보 가이드 단추만 오른쪽 위에 남긴다) */
  body.gm #wznav{position:relative!important;top:auto!important;padding:12px 12px 10px!important;margin:0 0 10px!important;border-radius:16px!important}
  /* ⚠️ display 는 홈·로그인 전(body.athome·guest — base.css 가 !important 로 숨긴다)이 아닐 때만 — 안 그러면 홈 허브 위에 단계 머리가 떴다 */
  body.gm:not(.athome):not(.guest) #wznav{display:block!important}
  body.gm #wznav .wzhead{display:block!important;min-width:0!important;margin:0!important;padding-right:118px}
  body.gm #wznav #wzTitle{display:block;font-size:19px!important;line-height:1.3;letter-spacing:-.3px}
  body.gm #wznav .wzsub{display:block;font-size:13px!important;margin-top:2px;color:var(--mut)}
  body.gm #wznav .gmprog{height:5px;border-radius:3px;background:rgba(128,148,190,.2);margin:9px -118px 10px 0;overflow:hidden}
  body.gm #wznav .gmprog i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2F7BF6,#22B8F0);transition:width .25s}
  body.gm #wznav .wzctrl{position:absolute;top:10px;right:10px;display:flex;gap:6px}
  body.gm #wznav #wzPrev,body.gm #wznav #wzNext,body.gm #wznav #btnOneShot{display:none!important}
  body.gm #wznav #btnGuideTour{height:34px;padding:0 12px!important;font-size:13px!important;border-radius:17px!important;white-space:nowrap}
  body.gm #wznav .wztabs{display:flex;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    gap:7px!important;padding:2px 0!important;margin:0!important;background:transparent!important;border-radius:0!important;scrollbar-width:none}
  body.gm #wznav .wztabs::-webkit-scrollbar{display:none}
  body.gm #wznav .wztab{flex:0 0 auto!important;height:36px;padding:0 14px!important;font-size:14px!important;border-radius:18px!important;scroll-snap-align:center;
    border:1px solid var(--line2)!important;background:var(--card)!important}
  body.gm #wznav .wztab.on{background:linear-gradient(90deg,#2F7BF6,#22B8F0)!important;color:#fff!important;border-color:transparent!important}

  /* ---- 콘텐츠 유형(후킹형·정보성) — 두 칸 고르기 ---- */
  body.gm #vgContentPick{grid-template-columns:1fr 1fr;gap:6px;padding:12px!important;margin:0 0 10px!important;border-radius:16px!important}
  /* wizard.js 가 형식에 따라 inline display 를 flex/none 으로 준다 — flex 일 때만 두 칸 격자로(none 을 덮으면 홈·레퍼런스형에도 떴다) */
  body.gm #vgContentPick[style*="flex"]{display:grid!important}
  body.gm #vgContentPick .cpk-l{grid-column:1/-1;font-size:13px!important;font-weight:800;color:var(--mut)}
  body.gm #vgContentPick button{height:44px;font-size:15px!important;margin:0!important;border-radius:12px!important}
  body.gm #vgContentPick .cpk-h{grid-column:1/-1;font-size:12.5px!important;line-height:1.5}

  /* ---- 아래 고정 줄 ----
     z-index 170: 본문 위 · 도구 화면(#toolStage 180)·상단바(200)·검수함(400)·창(3000~) 아래 — 창이 뜨면 그 밑에 깔린다. 메뉴가 열리면 숨긴다 */
  body.gm #gmBar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:170;gap:8px;align-items:center;
    padding:10px max(14px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px));
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid rgba(15,23,42,.08);box-shadow:0 -6px 18px rgba(20,33,61,.08)}
  :root:not(.lite) body.gm #gmBar{background:rgba(12,17,30,.94);border-top:1px solid rgba(148,184,255,.12);box-shadow:0 -6px 18px rgba(0,0,0,.35)}
  body.gm #gmBar[hidden]{display:none}
  body.gm #gmBar button{height:52px;border-radius:14px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;border:1px solid var(--line2);background:var(--card);color:var(--tx)}
  body.gm #gmBar button[hidden]{display:none}
  body.gm #gmBar .gmprev{flex:0 0 auto;padding:0 16px}
  body.gm #gmBar .gmmain{flex:1 1 auto;min-width:0;border:0;color:#fff;background:linear-gradient(90deg,#2F7BF6,#22B8F0);box-shadow:0 6px 16px rgba(47,123,246,.28)}
  body.gm #gmBar .gmmain span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px}
  body.gm #gmBar .gmmain:disabled{opacity:.55}
  body.gm #gmBar .gmnext{flex:0 0 52px;padding:0}

  /* ==========================================================
     2차(2026-10-21) — 끌어 놓는 조작이 많은 도구 넷: 쇼츠 편집기 · 캐릭터 만들기 · 썸네일 디자인 만들기 · 대량 제작
     ========================================================== */
  /* ---- 도구 화면(#toolStage — 덮는 창, 제 스크롤 칸): wizard.js 가 넣는 #toolStage{padding:4px 0} 때문에 휴대폰에선 글이 화면 끝에 붙었다 — 좌우 여백 ·
     머리 줄은 위에 붙임 · 끝까지 내려도 뒤 화면이 같이 끌려오지 않게 */
  body.gm #toolStage{padding:0 max(12px, env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.gm #toolStage .tshead{top:0;margin:0 calc(-1 * max(12px, env(safe-area-inset-left,0px))) 12px;padding:10px 12px}
  body.gm #toolStage .tshead .btn{min-height:40px}

  /* ---- 쇼츠 목록(#shortsSec) · 빠른 생성 창(#shortsBox) ---- */
  body.gm .shortsTool .chip{min-height:36px;padding:0 13px;font-size:13px}
  body.gm .shortsTool .shurl .row>*{flex:1 1 100%!important;min-width:0!important}
  body.gm .shortsTool .shbulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  body.gm .shortsTool .shbulk .hint{flex:1 1 100%;margin:0}
  body.gm .shortsTool .shbulk #shSelGo{flex:1 1 100%;min-height:44px}
  body.gm .shortsTool .shrow .btn{min-height:40px}
  body.gm .shortsTool .shmine1{flex-wrap:wrap}
  /* 쇼츠 만들기 창 · 썸네일 디자인 예시·관리 창 · 썸네일 수정 창 — 화면 전체(1차의 검수함·예약 창과 같은 방식). 닫기 줄은 아래에 붙인다 */
  body.gm :is(#shortsBox,#thStylePanel,#thEditBox).lightbox{padding:0;align-items:stretch}
  body.gm :is(#shortsBox,#thStylePanel,#thEditBox) .upanel{width:100%;max-width:none;max-height:none;min-height:100%;height:100%;border-radius:0;border:0;box-shadow:none;overflow:auto;overscroll-behavior:contain;
    padding:calc(14px + env(safe-area-inset-top,0px)) max(14px, env(safe-area-inset-right,0px)) 0 max(14px, env(safe-area-inset-left,0px))}
  body.gm #thStylePanel .upanel>.row:last-child,body.gm #shortsBox .shleft>.row:has(#shGo),body.gm #thEditBox .upanel>.row:has(#thEditGo){position:sticky;bottom:0;z-index:3;background:var(--panel);margin:12px -2px 0;
    padding:10px 2px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex-wrap:wrap;gap:8px}
  body.gm #thStylePanel .upanel>.row:last-child .btn,body.gm #shortsBox .shleft>.row:has(#shGo) .btn,body.gm #thEditBox .upanel>.row:has(#thEditGo) .btn{min-height:44px;flex:1 1 0}
  body.gm #shortsBox .shortsp2 .shrow2 .f{min-width:0;flex:1 1 100%}
  /* 미리보기를 먼저(1차 «화면 구성은 미리보기 먼저» 와 같은 뜻) — 휴대폰에선 설정 칸이 길어 맨 아래 미리보기가 안 보였다. 조금 작게(270×480 → 216×384) */
  body.gm #shortsBox .shortsp2 .shright{width:100%;order:-1}
  body.gm #shortsBox .shortsp2 .shprev{margin:0 auto;width:216px;height:384px}
  body.gm #shortsBox .shortsp2 .shprev iframe{transform:scale(.2)}

  /* ---- 쇼츠 편집기(#shEd) — 세 칸이 한 줄로 쌓인다(base.css 760px 규칙). 머리 · 작은 단추 · 칸 안 스크롤 · 미리보기 크기 ---- */
  body.gm .shed .shed-top{gap:8px}
  body.gm .shed .shed-top #seBack{order:0}
  body.gm .shed .shed-top #seStat{order:1;margin-left:auto;text-align:right}
  body.gm .shed .shed-top .shed-namein{order:2;flex:1 1 100%;max-width:none;border-color:var(--line)}
  body.gm .shed .shed-top .shed-topr{order:3;flex:1 1 100%;margin-left:0;flex-wrap:wrap}
  body.gm .shed .shed-top .shed-topr .btn{flex:1 1 0;min-height:40px}
  body.gm .shed .shed-top .shed-name{max-width:none;flex:1 1 100%;order:2;white-space:normal}
  body.gm .shed .chip{min-height:36px;padding:0 13px;font-size:13px}
  body.gm .shed .shed-cuts,body.gm .shed .shed-set{padding:10px}
  body.gm .shed .shed-airow>.btn{min-height:40px}
  body.gm .shed .shed-airow select{flex:1 1 auto}
  body.gm .shed .se-candmk{padding:4px 2px}
  body.gm .shed .se-candmk input{width:20px;height:20px}
  body.gm .shed .shed-list{max-height:min(52vh,460px)}
  body.gm .shed .se-cue{padding:9px 8px;gap:10px;font-size:14px}
  body.gm .shed .se-cue input{width:20px;height:20px;margin-top:1px}
  /* 미리보기 — 360×640 무대를 화면 폭에 맞춰 줄인다(배율 --gmk 는 genmobile.js 가 잰다 · 그림 칸·자막 자리 계산은 무대 안 좌표라 그대로) */
  body.gm .shed .shed-prev{width:auto;max-width:none;margin:0;padding:10px;overflow:visible}
  body.gm .shed .se-stage{transform:scale(var(--gmk,1));transform-origin:0 0;
    margin:0 0 calc(640px * (var(--gmk,1) - 1)) calc((100% - 360px * var(--gmk,1)) / 2)}
  /* 휴대폰은 미리보기를 끌면 화면이 안 내려간다(손가락이 끌기 층에 잡힌다) — 끌기 대신 아래 조작(.gmlay)을 쓴다 */
  body.gm .shed .se-drag{pointer-events:none;touch-action:auto}
  body.gm .shed .shed-prevhint{display:none}
  /* 미리보기 아래 조작(genmobile.js 가 붙인다) — 그림 칸·자막 위치: 슬라이더(크게) + 양 끝 ▲▼(조금씩, 사장님 선택 2026-10-21) */
  body.gm .shed .gmlay{margin-top:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--card)}
  body.gm .shed .gmlay-h{font-size:13px;font-weight:800;color:var(--mut);margin-bottom:4px}
  body.gm .shed .gmlay-r{display:flex;align-items:center;gap:8px;min-height:50px}
  body.gm .shed .gmlay-r>span{flex:0 0 52px;font-size:14px;font-weight:700}
  body.gm .shed .gmlay-r>input[type=range]{flex:1 1 auto;min-width:0;height:36px;margin:0;accent-color:var(--acc,#3B82F6)}
  body.gm .shed .gmlay-r>button{flex:0 0 42px;min-height:42px;padding:0;border-radius:10px;border:1px solid var(--line2);background:var(--card2,var(--card));color:var(--tx);font:inherit;font-size:15px;font-weight:700;cursor:pointer;touch-action:manipulation}
  body.gm .shed .shed-prevbar{flex-wrap:wrap}
  body.gm .shed .shed-prevbar #sePlay{min-height:42px}
  body.gm .shed .shed-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -10px 8px;padding:0 10px 2px}
  body.gm .shed .shed-tabs::-webkit-scrollbar{display:none}
  body.gm .shed .shed-tabs .chip{flex:0 0 auto}
  body.gm .shed .shed-panel{max-height:none;overflow:visible;padding-right:0}
  body.gm .shed .se-tplgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.gm .shed .se-inline{flex-wrap:wrap}
  body.gm .shed .se-inline>label.f{flex:1 1 140px}
  body.gm .shed .se-reset{min-height:32px;padding:0 10px}
  body.gm .shed .se-color input[type=color]{width:40px;height:32px}
  body.gm .shed .se-text{gap:6px}
  body.gm .shed .se-text input[type=text]{flex:1 1 100%}
  body.gm .shed .se-text input[type=number]{width:auto;flex:1 1 60px}
  body.gm .shed .se-text select{flex:1 1 120px}
  body.gm .shed .se-tl{height:40px}
  body.gm .shed .tl-seg{top:8px;bottom:8px}
  body.gm .shed .tl-seg.all{top:17px;bottom:17px}
  body.gm .shed .se-tltime{flex-wrap:wrap;gap:4px}
  body.gm .shed .shed-makerow #seMake{flex:1 1 100%;min-height:48px}
  body.gm .shed .se-results{grid-template-columns:minmax(0,1fr)}
  body.gm .shed .se-res video{width:120px;height:213px}

  /* ---- 캐릭터 만들기(#toonCharWrap — 도구 화면·웹툰 1단계 공용) ---- */
  body.gm .tcmake textarea{min-height:96px}
  body.gm .tcmake-row{gap:8px}
  body.gm .tcmake-row #toonCharRefBtn{flex:1 1 100%;min-height:42px}
  body.gm .tcmake-opt{flex:1 1 calc(50% - 4px);min-width:0;font-size:13px}
  body.gm .tcmake-opt select{flex:1 1 auto;min-width:0;width:auto}
  body.gm .tcmake-row #toonCharGen{flex:1 1 100%;margin-left:0;min-height:46px}
  body.gm .tcatt button{width:32px;height:32px;top:-12px;right:-12px;line-height:30px}
  body.gm .tcpicks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.gm .tcpick>img{height:150px}
  body.gm .tcpick .tcpbtns{flex-direction:column}
  body.gm .tcpick .tcpbtns .btn{min-height:38px;font-size:13px}
  body.gm .tcpick .genprompt>summary{font-size:12.5px;padding:9px 8px}
  body.gm .tcpick .genprompt .btn{font-size:13px;min-height:34px}
  body.gm #toonCharPick [data-role]{flex:1 1 calc(50% - 8px)!important}
  body.gm #toonCharPick [data-role] .row{flex-wrap:wrap}
  body.gm #toonCharPick [data-role] .tsfix{flex:1 1 100%}
  body.gm #toonCharPick [data-role] .tsredo{flex:1 1 100%!important;min-height:38px}
  body.gm #toonCharPick .row:has(#toonSetReg){flex-wrap:wrap}
  body.gm #toonCharPick .row:has(#toonSetReg)>*{flex:1 1 100%!important;min-height:42px}
  body.gm #toonCharWrap .row:has(>#toonCharPickSel) #toonCharDelBtn{min-height:42px}
  body.gm #toonCharBrief .btn{min-height:38px}

  /* ---- 썸네일 디자인 만들기(4단계 #thMakeWrap) · 예시·관리 창 ---- */
  body.gm #thMakeWrap input[type=file],body.gm #thStylePanel input[type=file]{font-size:14px;width:100%}
  body.gm #thMakeWrap .row:has(#tsGo){gap:8px}
  body.gm #thMakeWrap .row:has(#tsGo) .btn{flex:1 1 0;min-height:44px;margin-left:0!important;font-size:14px}
  body.gm #thStyleWrap>.row{flex-wrap:wrap}
  body.gm #thStyleWrap>.row>#thStyle{flex:1 1 100%}
  body.gm #thStyleWrap>.row>.btn{flex:1 1 0;min-height:40px}
  body.gm #thStylePanel .thsgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.gm #thStylePanel .thsgal .g img,body.gm #thStylePanel .thsgal .g .ph{height:92px}
  body.gm #thStylePanel .tschar .row>*{flex:1 1 100%;min-height:42px;display:flex;align-items:center;justify-content:center}
  body.gm #thStylePanel .tschar .row>img{flex:0 0 auto;min-height:0;display:block}
  body.gm #thStylePanel .row:has(>#tsPSave){margin-bottom:12px}
  body.gm #thStylePanel .row:has(#tsRenameGo) .btn{min-height:42px}
  body.gm #thStylePanel #tsShotA,body.gm #thStylePanel #tsPSave{flex:1 1 100%;min-height:44px}

  /* ---- 대량 제작(예약 창 #pfBulk) — 시장 넷을 한 칸씩 옆으로 넘긴다(두 칸에 눌려 종목명이 «삼성…» 으로 잘렸다) · 고른 종목 줄은 아래에 붙는다 ---- */
  body.gm .bksearch>select{flex:1 1 auto}
  body.gm .bksearch>input{order:-1;flex:1 1 100%}
  body.gm .bksearch>#pfBulkAdd{min-height:42px;flex:0 0 auto;padding:0 18px}
  body.gm .bktabs{gap:6px}
  body.gm .bktab{min-height:36px;padding:0 12px;font-size:13px}
  body.gm .bkcols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:10px;margin:0 -12px;padding:0 12px 6px;scrollbar-width:none}
  body.gm .bkcols::-webkit-scrollbar{display:none}
  body.gm .bkcol{flex:0 0 86%;min-width:0;scroll-snap-align:start;border:1px solid var(--line2);border-radius:12px;padding:10px}
  body.gm .bkcol h5{font-size:14px}
  body.gm .bklist{max-height:min(56vh,440px);overscroll-behavior:contain}
  body.gm .bkrow{grid-template-columns:22px 32px minmax(0,1fr) auto;min-height:52px;padding:7px 8px}
  body.gm .bkrow .bklogo{width:32px;height:32px}
  body.gm .bkrow .bklogo.txt{font-size:13px}   /* 로고 그림을 못 받으면 첫 글자 한 자 — 그림이 늦게 실패해 나중에 생기면 글자 재기보다 늦을 수 있어 직접 준다 */
  body.gm .bkrow .bknm b{font-size:14px}
  body.gm .bkrow .bkpx{font-size:13px}
  /* 순위를 받을 때마다 줄을 통째로 다시 그린다 — 글자 재기(0.6초 간격)보다 먼저 보이는 틈이 있어 직접 준다(2026-10-22 종합 검사: PC 가 바쁠 때 10.5~11.5px 가 잡혔다) */
  body.gm .bkrow .bkno,body.gm .bkrow .bkno b,body.gm .bkrow .bknm em,body.gm .bkrow .bkpx i,body.gm .bkempty,body.gm .bkcol h5 em{font-size:12px}
  /* 고른 종목 줄 — 화면 아래에 붙는다. 단추(비우기·시작)는 맨 윗줄, 그 아래 고른 순서(많이 고르면 이 칸만 스크롤) */
  body.gm .bksel{position:sticky;bottom:0;z-index:4;background:var(--card);margin:10px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 16px rgba(20,33,61,.08);
    max-height:42vh;overflow-y:auto;overscroll-behavior:contain}
  body.gm .bksel .bkchip{min-height:34px;padding:0 4px 0 10px;font-size:13px}
  body.gm .bksel .bkchip b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px}
  body.gm .bksel>.btn{order:-2;flex:1 1 0;min-height:44px;font-size:14px}
  body.gm .bksel>#pfBulkStart{flex:2 1 0}
  body.gm .bksel .grow{order:-1;flex:1 1 100%;height:0}
  body.gm .bksel>.hint{flex:1 1 100%;margin:0}
}