/* app.css — 웹/앱 공용 스타일. 글래스모피즘 + 벤또 격자.
   유리는 뒤에 배경이 있어야 보인다. body::before의 메시 그라데이션이 그 배경이고,
   모든 판은 그 위에 반투명으로 얹힌다. 다만 글씨 대비가 곧 기능이라
   유리는 충분히 불투명하게(.72~.86) 잡아 본문이 항상 AA를 넘게 했다. */
/* Linear 스타일 — 라이트가 기본, html[data-theme=dark] 가 덮는다 (2026-08-25 확정).
   기존 코드가 var(--teal) 등을 쓰므로 이름은 남기고 값만 갈아끼운다 —
   덕분에 460줄을 다시 쓰지 않고 팔레트가 통째로 바뀐다. */
:root{
  /* ── 색 = '먹' (2026-08-25 대표님이 4안 중 1번 선택) ─────────────────
     검정 · 노랑 · 흰색 · 짙은 회색만 쓴다. 회색을 순수 무채색으로 두면 값싸 보여서
     노랑 쪽으로 아주 살짝 따뜻하게 기울였다 — 강조색과 한 식구로 읽힌다. */
  --ink:#151312; --muted:#5F5B55;
  /* 강조색 — 노랑 (2026-08-25 대표님 지시로 보라에서 바꿈).
     **--onAcc 가 핵심이다.** 노랑은 밝아서 흰 글씨를 얹으면 안 보인다.
     보라 시절에는 전부 #fff 였는데, 색만 바꾸고 글자를 그대로 두면
     '안 보이는 글씨' 사고가 그대로 반복된다. 노랑 위에는 항상 --onAcc 를 쓴다. */
  --teal:#FFC300; --teal-d:#E0A800; --bright:#FFD84D;   /* 이름은 옛것, 값은 노랑 */
  --onAcc:#141210;                                       /* 노랑을 칠한 위에 얹는 글자색 */
  /* **칠하는 노랑과 글자로 쓰는 노랑은 달라야 한다.** 흰 바탕에 #FFC300 글씨는
     대비가 1.7:1 로 거의 안 읽힌다. 글자로 쓸 때는 이 짙은 호박색을 쓴다(6.0:1). */
  --accTx:#8A5E00;
  --line:rgba(21,19,18,.11);
  --bg:#FBFAF8;
  --card:#FFFFFF; --card-hi:#FFFFFF; --chip:#F2F0EC;
  --glass:var(--card); --glass-hi:var(--card-hi); --edge:var(--line);
  --shadow:0 1px 3px rgba(21,19,18,.07);
  --shadow-lift:0 6px 20px rgba(21,19,18,.11);
  --r:12px; --r-sm:10px; --r-pill:999px;
  --warn:#A9601C; --warn-bg:#FDF0E2; --warn-line:#F0D6B4; --warn-ink:#7A5A32;
  /* 꺼진 버튼 — 반드시 불투명해야 한다. 반투명이면 밑으로 흘러가는 글자가 비쳐
     '글자가 겹쳤다'로 보인다 (2026-08-28 대표님 신고의 원인). 지금 보이던 색 그대로. */
  --off:#B3BFC2;
}
html[data-theme="dark"]{
  --ink:#F4F2EF; --muted:#8E8A85;
  --teal:#FFC94D; --teal-d:#E8B32E; --bright:#FFD97A;
  --onAcc:#141210;
  --accTx:#FFCB55;              /* 어두운 바탕에서는 밝은 노랑이 잘 읽힌다 */
  --line:rgba(255,255,255,.10);
  --bg:#0E0D0B;
  --card:#1A1817; --card-hi:#211F1D; --chip:#262322;
  --shadow:none; --shadow-lift:0 8px 24px rgba(0,0,0,.4);
  --warn:#E0A05C; --warn-bg:#26200F; --warn-line:#4A3B1A; --warn-ink:#D9B98A;
  --off:#485458;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* **버튼은 글자색을 물려받는다.** 안 정해두면 브라우저 기본값(거의 검정)을 쓰는데,
   다크 화면에서는 검은 카드 위에 검은 글씨가 되어 아예 안 보인다.
   2026-08-25 '알아서 만들기' 제목이 실제로 그렇게 사라졌다.
   색을 따로 정한 버튼(.cta 등)은 더 구체적이라 이 줄을 이긴다. */
button{color:inherit}
body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
  color:var(--ink);line-height:1.5;background:var(--bg);min-height:100vh}

.wrap{max-width:520px;margin:0 auto;height:100dvh;display:flex;flex-direction:column}

/* 탑줄 — 08-26 개편. 상단'바'가 아니라 콘텐츠의 첫 줄이다:
   판 배경·밑줄을 없애 본문과 한 몸으로 읽히게 한다. */
header{flex:0 0 auto;z-index:20;display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 8px;background:var(--bg)}
header .kicker{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
/* 오른쪽 구석 아이콘 — 설정(톱니)·닫기(✕)·뒤로. 톱니 왼쪽은 나중에 구독 자리 */
.iconbtn{flex:0 0 auto;width:36px;height:36px;border:0;background:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
/* display:flex 가 hidden 속성을 이겨버린다 — 로그인 화면에 뒤로 화살표가 떠 있던
   버그(08-26 발견)의 뿌리. 숨김이 항상 이기게 못을 박는다. */
.iconbtn[hidden]{display:none}
.iconbtn svg{width:21px;height:21px}
.iconbtn.on{color:var(--accTx)}
.iconbtn:active{transform:scale(.9)}
#backBtn{color:var(--ink);margin-left:-8px}
#backBtn svg{width:23px;height:23px}
/* 만들기 흐름의 단계 표시 — 사진 → 미리보기 → 저장. 지금 단계만 진하게 */
.steps{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(2px,1.5vw,7px);
  /* 좁은 창에서 글자가 잘리던 문제 (2026-08-28 실측: 223px 자리에 영어 244px).
     한국어는 짧아 폰에서 멀쩡했고 영어에서만 양끝이 잘렸다. 창 너비에 맞춰 줄인다. */
  font-size:clamp(11px,3.5vw,13.5px);
  font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden}
.steps i{margin:0 -1px}
.steps b{color:var(--ink);font-weight:800}
.steps i{font-style:normal;opacity:.45}
.steps[hidden]{display:none}
/* AI 연결 — 관리자에게만 보인다 */
#aiBox,#typoBox{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:16px;
  background:var(--card)}
#aiBox h4,#typoBox h4{font-size:14px;font-weight:800;margin-bottom:4px}
#aiBox .note,#typoBox .note{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:12px}
#aiBox .msg,#typoBox .msg{font-size:12px;margin-top:10px;min-height:16px;color:var(--accTx);font-weight:600}
#aiBox .msg.bad,#typoBox .msg.bad{color:#C43A2E}
header h1{flex:1;min-width:0;font-size:24px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 18px 104px;overscroll-behavior:contain}
.page{display:none}.page.on{display:block}

/* 유리 재질 — 판은 전부 이걸 쓴다 */
.glass{background:var(--glass);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}

/* ── 카테고리 칩 ── */
/* 모드 고르기 카드 — 첫 화면. 손가락으로 누를 자리를 크게 준다 */
.modecard{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:22px 20px;margin-bottom:14px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);font-family:inherit;cursor:pointer}
.modecard:active{transform:scale(.985)}
.modecard .mc-ic{flex:0 0 auto;width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bright),var(--teal));color:var(--onAcc)}
.modecard .mc-ic svg{width:26px;height:26px}
.modecard h3{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.modecard p{font-size:13px;line-height:1.5;color:var(--muted)}
#modeAuto{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
/* 카드 안의 '항상 이걸로 시작' — 카드를 누르면 그 모드로 가고,
   이 줄을 누르면 기본으로 저장까지 한다. 설정에서 언제든 바꾼다. */
.mc-set{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:12px;font-weight:600;color:var(--muted)}
.mc-set i{width:16px;height:16px;border:1.5px solid var(--line);border-radius:5px;
  display:inline-block;position:relative;background:var(--card-hi)}
.mc-set.on{color:var(--accTx)}
.mc-set.on i{background:var(--teal);border-color:var(--teal)}
.mc-set.on i::after{content:'';position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* 결과 화면 — 폰 안에서 HTML 을 그대로 재생한다. 굽지 않으니 즉시 보인다 */
/* 영상 + 장면 띠를 나란히 (2026-08-27). 띠 폭은 고정, 영상이 남는 폭을 먹는다 */
/* 띠가 길어져도 영상을 밀어내면 안 된다 — **영상 높이가 기준**이고 띠는 그 안에서 스크롤한다.
   장면이 11개까지 늘 수 있어서(30초) 못을 박아두지 않으면 화면 밖으로 넘친다.
   그래서 띠를 흐름에서 빼고 영상 옆자리에 붙여 높이를 영상에 묶는다. */
#resWrap{position:relative;padding-right:60px;margin-bottom:10px}
/* 9:16 을 지키되 화면 높이에 들어가게 폭을 줄인다 (08-29 — 위 자막이 잘리던 문제).
   높이를 깎으면 비율이 깨져 잘리므로, 높이에서 폭을 역산한다. */
#resStage{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  background:#141210;margin:0 auto;
  width:min(100%, calc(min(74dvh, 720px) * 0.5625))}   /* 58→74dvh: 아래 버튼이 기둥으로 갔다 (08-30) */
/* 장면 띠 — 완성된 장면을 그대로 줄인 축소판. 넘치면 띠 안에서만 스크롤 */
#sceneRail{position:absolute;top:0;right:0;bottom:0;width:52px;
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;overscroll-behavior:contain;padding:1px}
#sceneRail::-webkit-scrollbar{width:0}
.rthumb{position:relative;flex:0 0 auto;aspect-ratio:9/16;border-radius:8px;overflow:hidden;
  background:#141210;border:1px solid var(--line);cursor:pointer}
.rthumb.on{border:2px solid var(--teal)}
.rthumb iframe{position:absolute;top:0;left:0;width:1080px;height:1920px;border:0;
  transform-origin:0 0;pointer-events:none}
.rthumb .rno{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:700;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.rthumb .rlock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,16,.55);color:#D3D1C7;font-size:13px}
.rbtn{flex:0 0 auto;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;padding:0}
/* 고치는 모드일 때 ▶ 가 눈에 띄어야 한다 — 다시 보려면 여기를 누르라는 뜻 */
.rbtn.on{background:var(--teal);color:var(--onAcc);border-color:var(--teal)}
/* 띠 손잡이 — 잡아야만 끌린다. 띠 자체를 위아래로 넘기는 동작과 안 싸우게 (2026-08-27) */
.rgrip{position:absolute;top:2px;left:2px;width:16px;height:16px;cursor:grab;
  background:rgba(12,10,8,.5);border-radius:5px;touch-action:none}
.rgrip::before{content:'⋮⋮';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:9px;color:#fff;letter-spacing:-1px}
.rthumb.dragging{opacity:.5}
.rthumb.drop-here{outline:2px dashed var(--teal);outline-offset:1px}
/* 길게 눌렀을 때 나오는 메뉴 — 띠 왼쪽에 붙는다(오른쪽은 화면 끝) */
.rmenu{position:fixed;right:64px;z-index:80;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:5px;min-width:140px;
  box-shadow:0 8px 28px rgba(0,0,0,.18)}
.rmenu button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;
  background:none;color:var(--ink);font:inherit;font-size:14px;border-radius:8px;cursor:pointer}
.rmenu button.danger{color:#B3261E}
#resFrame{position:absolute;left:0;top:0;width:1080px;height:1920px;border:0;
  transform-origin:0 0;background:#141210;
  /* 손가락은 위의 #resTouch 가 받는다 — 안 그러면 틀이 먹어서 스와이프가 안 된다 (08-29) */
  pointer-events:none}
.res-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#D3D1C7;font-size:14px;font-weight:600}
.res-meta{font-size:12px;color:var(--muted);text-align:center;margin-bottom:14px;line-height:1.6}
#goB .ghost{margin-top:10px}
/* 자막 스타일(팩) 토글 — 같은 내용에 옷만 갈아입힌다 */
.packrow{display:flex;gap:8px;margin-bottom:14px}
/* 곡 고르기처럼 항목이 많은 줄 — 칸을 흘려 여러 줄로 감는다 */
.packrow.wrap{flex-wrap:wrap}
.packrow.wrap .packbtn{flex:0 1 auto;padding:11px 14px}
.packbtn{flex:1;padding:13px 0;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font-family:inherit;font-size:14px;font-weight:700;
  color:var(--muted);cursor:pointer}
/* 요일별 영업시간 */
.wkrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wkrow b{width:26px;font-size:14px;color:var(--ink)}
.wkrow input[type=time]{flex:1;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--card-hi);font-family:inherit;font-size:14px}
.wkrow .tilde{color:var(--muted)}
.wk-off{border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:9px 12px;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.wkrow.off input[type=time]{opacity:.3;pointer-events:none}
.wkrow.off .wk-off{background:var(--ink);color:#fff;border-color:transparent}
/* 광고 노출 체크 — 칸 라벨 오른쪽에 붙는다 */
.expchk{float:right;display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;
  font-weight:600;color:var(--muted);cursor:pointer}
.expchk input{width:15px;height:15px}
.expchk.big{display:flex;justify-content:flex-end;margin:-6px 0 14px}
/* 손보기 패널 */
#editPanel{margin-top:6px;padding:16px;border:1px solid var(--line);border-radius:16px;
  background:var(--card)}
.e-cap{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.04em;margin:4px 0 8px}
.e-cap+.e-cap{margin-top:14px}
/* 배경음악 드롭다운 — 곡 21개를 버튼으로 늘어놓지 않는다 (2026-08-27) */
.bgmpick{width:100%;height:44px;padding:0 38px 0 14px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bgmpick:focus{outline:none;border-color:var(--teal)}
.e-line{width:100%;margin-bottom:8px;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--card-hi);font-family:inherit;font-size:16px;font-weight:600}
.e-line:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.12)}
/* 미리보기에서 자막을 눌러 찾아온 칸 — 어디로 왔는지 잠깐 보여준다 (2026-08-27) */
.e-line.justpicked{border-color:var(--teal);box-shadow:0 0 0 4px rgba(255,195,0,.28)}
/* 미리보기 위 안내 — "자막을 만질 수 있다"를 한 줄로 */
.caphint{margin:6px 0 0;font-size:12px;color:var(--muted);text-align:center}
/* 자막 고치는 바 — 키보드 바로 위에 붙는다 (2026-08-27).
   자막이 화면 어디에 있든 이 자리는 키보드에 안 가린다. */
/* 자막 입력칸 — 하단 탭 위에 붙는다. 키보드가 올라오면 그 위로 밀린다.
   미리보기 안에서 치면 커서가 0.33px 이 되어 안 보인다(배율 0.33) — 그래서 여기서 친다. */
#capBar{position:fixed;left:0;right:0;bottom:var(--navh,63px);z-index:70;
  background:var(--card);border-top:1px solid var(--line);
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  box-shadow:0 -6px 24px rgba(0,0,0,.14)}
#capBar[hidden]{display:none}
.capbar-row{display:flex;gap:8px;align-items:center}
.capinput{flex:1;min-width:0;height:44px;padding:0 14px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px}
.capinput:focus{outline:none;border-color:var(--teal)}
.capsz,.capx{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:15px;font-weight:800;cursor:pointer}
.capx{font-weight:400;color:var(--muted)}
/* 단어 칩 — 누를 때마다 강조가 돌아간다 */
.capwords{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cw{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.cw.key{background:var(--teal);color:var(--onAcc);border-color:var(--teal)}
.cw.num{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cw.soft{color:var(--muted);font-weight:500}
.swrow{display:flex;gap:12px;margin:4px 0 16px}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.sw.on{border-color:var(--ink)}
.packbtn.on{background:linear-gradient(135deg,var(--teal),var(--teal-d));
  border-color:transparent;color:var(--onAcc)}

/* 자동생성 — 사진 한 장 + 설명 한 줄이 한 묶음 */
.a-hint{font-size:13px;color:var(--muted);margin:2px 0 16px;line-height:1.55}
.arow{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;padding:12px;
  border:1px solid var(--line);border-radius:16px;background:var(--card)}
.arow.filled{border-color:rgba(20,18,16,.45)}
.arow .pic{flex:0 0 88px;width:88px;height:88px;border-radius:12px;cursor:pointer;
  border:1px dashed var(--line);background:var(--card) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:700;color:var(--muted);line-height:1.4}
.arow.filled .pic{border-style:solid;border-color:transparent}
.arow input[type=file]{display:none}
.arow .side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.arow .rno{font-size:11px;font-weight:800;color:var(--accTx);letter-spacing:.09em}
.arow textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--card-hi);font-family:inherit;font-size:14px;line-height:1.5;resize:none;
  -webkit-appearance:none}
.arow textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(29,158,117,.12)}
.arow .del{align-self:flex-start;border:0;background:none;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--muted);padding:2px 0;cursor:pointer}
#autoAdd{margin-bottom:10px}
.a-count{font-size:12px;color:var(--muted);text-align:center;margin-bottom:16px;line-height:1.5}
/* 탑메뉴 탭 — 알약 칩이 아니라 글자+밑줄. 틱톡·샤오홍슈 방식이라 한 줄에 더 많이 들어간다 */
.tabs{display:flex;gap:16px;overflow-x:auto;flex:1 1 auto;min-width:0;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;position:relative;padding:8px 0 9px;border:0;background:none;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--muted);
  white-space:nowrap;cursor:pointer}
.tab.on{color:var(--ink);font-weight:800}
.tab.on::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--bright),var(--teal))}
/* 보기 크기 — 한 줄을 먹던 크게/보통/많이 를 버튼 하나로 접었다. 누르면 순환한다 */
/* 보기 크기 — 1칸 / 2칸 / 4칸. 맨 윗줄 왼쪽, 톱니 반대편에 둔다 (08-28).
   손가락 크기를 지킨다 — 옛 낱말 버튼은 72x28 이라 권장(44)보다 한참 작았다. */
.denpick{flex:0 0 auto;display:flex;gap:5px}
.denpick button{width:38px;height:38px;padding:7px;border:1px solid var(--line);
  background:var(--card);border-radius:10px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.denpick button svg{width:100%;height:100%;display:block}
.denpick button.on{background:var(--teal);border-color:transparent;color:var(--onAcc)}
.denpick button:active{transform:scale(.95)}
/* 화면 성격별로 탑줄 구성이 바뀐다 (08-26):
   tabs(템플릿) = 칩+보기크기+톱니 · title(루트) = 큰 제목+톱니 · flow(만들기) = 뒤로+단계+✕ */
header[data-mode="tabs"] h1,header[data-mode="tabs"] .steps{display:none}
/* 템플릿 화면만 두 줄. 칩이 660px 인데 179px 자리에 눌려 있던 문제도 같이 풀린다 (08-28) */
header[data-mode="tabs"]{flex-wrap:wrap}
header[data-mode="tabs"] .denpick{order:1;margin-right:auto}
header[data-mode="tabs"] #gearBtn{order:2}
header[data-mode="tabs"] .tabs{order:3;flex:0 0 100%;margin-top:6px}
header[data-mode="title"] .tabs,header[data-mode="title"] .denpick,
header[data-mode="title"] .steps{display:none}
header[data-mode="flow"] .tabs,header[data-mode="flow"] .denpick,
header[data-mode="flow"] #gearBtn{display:none}
header h1[hidden],.steps[hidden]{display:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 16px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:10px 16px;border-radius:var(--r-pill);
  background:var(--card);
  -webkit-
  border:1px solid var(--edge);font-size:14px;font-weight:700;color:var(--muted);
  white-space:nowrap;cursor:pointer;transition:transform .16s ease}
.chip:active{transform:scale(.96)}
.chip.on{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-color:transparent;
  color:var(--onAcc);box-shadow:0 6px 18px rgba(20,18,16,.32)}

/* ── 벤또 격자 (영감) ──
   sample 있는 카드는 2칸을 먹는 큰 타일, 나머지는 1칸 타일.
   작은 타일 위쪽 색면은 그 카드가 실제로 만들 영상의 색이다(프리셋의 THEME). */
  /* 밀도 — 1(전체화면) · 2 · 4열. 핀치로 오간다 */
  .bento{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento[data-den="1"]{grid-template-columns:1fr;gap:14px}
  /* 1열 = 큰 카드 한 장씩. 화면을 통째로 점령하지는 않는다 —
     전체화면으로 만들었더니 밀도 버튼이 위로 밀려 되돌아갈 길이 막혔다. */
  .bento[data-den="1"] .tile{grid-column:span 1 !important}
  .bento[data-den="1"] .tile .swatch,
  .bento[data-den="1"] .tile video{aspect-ratio:9/16;max-height:50dvh}
  .bento[data-den="1"] .tile h3{font-size:21px;-webkit-line-clamp:2}
  .bento[data-den="1"] .tile p{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bento[data-den="1"] .tile .body{padding:15px 17px 17px}
  .bento[data-den="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bento[data-den="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  /* 4열 — 제목만 남기고 최대한 많이 보이게 */
  .bento[data-den="4"] .tile{grid-column:span 1 !important;border-radius:12px}
  .bento[data-den="4"] .tile .body{padding:7px 8px 9px}
  .bento[data-den="4"] .tile h3{font-size:11.5px;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bento[data-den="4"] .tile .swatch,
  .bento[data-den="4"] .tile video{aspect-ratio:9/16}
  .bento[data-den="4"] .tile.wide{grid-column:span 1}
  /* 한 줄 안에서 타일 높이를 맞춘다 */
  .bento .tile{align-self:stretch}
  .bento .tile .body{flex:1}
  .bento[data-den="4"] .tile .cat,
  .bento[data-den="4"] .tile p,
  .bento[data-den="4"] .tile .go,
  .bento[data-den="4"] .tile .glyph,
  .bento[data-den="4"] .favbtn{display:none}
  .bento[data-den="2"] .tile.wide{grid-column:span 2}
  .tile{will-change:transform}

  /* 밀도 전환 버튼 — 핀치를 모르는 분을 위해 */
  .denbar{display:flex;justify-content:flex-end;gap:6px;padding:0 0 10px}
  .denbtn{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--r-pill);
    background:var(--card);
    -webkit-border:1px solid var(--edge);
    font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
  .denbtn.on{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-color:transparent;color:var(--onAcc)}
  .denbtn svg{width:15px;height:15px}
.tile{grid-column:span 1;display:flex;flex-direction:column;overflow:hidden;text-align:left;
  position:relative;   /* 즐겨찾기 하트(.favbtn)가 오른쪽 위에 붙는 기준 */
  padding:0;font-family:inherit;cursor:pointer;color:var(--ink);
  background:var(--glass);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
.tile:active{transform:scale(.975);box-shadow:var(--shadow-lift)}
.tile.wide{grid-column:span 2}
.tile .swatch{position:relative;width:100%;aspect-ratio:9/16;display:block;overflow:hidden}
  /* 큰 타일(카테고리 대표)만 가로로 넓게 — 격자에 리듬을 준다 */
  .tile.wide .swatch{aspect-ratio:4/3}
.tile .swatch img{width:100%;height:100%;object-fit:cover;display:block}
.tile .swatch video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
  /* 대표 카드가 너무 길면 2열이 1열처럼 보인다. 아래 격자가 걸쳐 보이는 높이로 */
  .tile.wide video{width:100%;aspect-ratio:16/11;max-height:300px;object-fit:cover;display:block;background:#0E1A1F}
.tile .swatch .glyph{position:absolute;right:10px;bottom:9px;font-size:11px;font-weight:800;
  letter-spacing:-.01em;color:#fff;background:rgba(10,26,31,.62);padding:5px 10px;
  border-radius:var(--r-pill);-webkit-}
.tile .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.tile .cat{font-size:11px;font-weight:800;color:var(--accTx);letter-spacing:.08em}
.tile h3{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile.wide h3{font-size:19px}
.tile p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.tile.wide p{font-size:13.5px}
.tile .go{margin-top:auto;padding-top:10px;font-size:13px;font-weight:800;color:var(--accTx);
  display:flex;align-items:center;gap:5px}
.tile[disabled]{opacity:.55;cursor:default}
.tile[disabled] .go{color:var(--muted)}

/* ── 만들기 ── */
.slot{margin-bottom:12px;overflow:hidden;
  background:var(--glass);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.slot .top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 16px}
.slot .no{font-size:11px;font-weight:800;color:var(--accTx);letter-spacing:.1em}
.slot .ttl{font-size:16px;font-weight:700;margin-top:3px;letter-spacing:-.01em}
.slot .hint{font-size:13px;color:var(--muted);margin-top:3px}
.slot .thumb{width:74px;height:74px;flex:0 0 74px;border-radius:var(--r-sm);
  background:rgba(14,60,72,.08) center/cover;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;font-weight:600;border:1px solid var(--edge)}
.slot.filled{border-color:rgba(20,18,16,.5);box-shadow:0 10px 30px rgba(20,18,16,.18)}
label.pick{display:block;padding:14px 16px;border-top:1px solid var(--line);
  background:var(--chip);color:var(--accTx);font-weight:800;font-size:15px;
  text-align:center;cursor:pointer}
input[type=file]{display:none}

.field{padding:12px 15px;margin-bottom:10px;
  background:var(--glass-hi);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.field span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.field input{width:100%;border:0;outline:0;font-size:17px;font-family:inherit;color:var(--ink);background:transparent}

.tpl{padding:16px;margin-bottom:12px;cursor:pointer;
  background:var(--glass);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .16s ease}
.tpl:active{transform:scale(.985)}
.tpl.sel{border-color:rgba(20,18,16,.55);box-shadow:0 12px 32px rgba(20,18,16,.2)}
.tpl h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.tpl p{font-size:13px;color:var(--muted);margin-top:5px}
.tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;font-weight:700;color:var(--accTx);background:rgba(20,18,16,.12);
  padding:5px 10px;border-radius:var(--r-pill)}

.warn{background:rgba(255,241,224,.8);
  -webkit-border:1px solid var(--warn);
  border-radius:var(--r-sm);padding:14px;margin-bottom:12px;font-size:13px;color:var(--warn)}
.warn b{color:var(--warn)}
.center{text-align:center;padding:52px 20px}
.spin{width:46px;height:46px;margin:0 auto 18px;border:4px solid rgba(14,60,72,.14);
  border-top-color:var(--teal);border-radius:50%;animation:r 1s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}

.cta{width:100%;border:0;border-radius:var(--r-pill);padding:18px;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));color:var(--onAcc);
  font-size:17px;font-weight:800;font-family:inherit;cursor:pointer;
  /* 그림자도 노랑 계열로. 청록 그림자가 노란 버튼 밑에 깔리면 색이 탁해진다 */
  box-shadow:0 12px 30px rgba(160,110,0,.30);transition:transform .16s ease}
.cta:active{transform:scale(.98)}
.cta:disabled{background:var(--off);box-shadow:none;color:var(--card-hi)}
.ghost{width:100%;border:1px solid var(--edge);border-radius:var(--r-pill);padding:15px;
  background:var(--glass-hi);-webkit-
  color:var(--ink);font-size:15px;font-weight:700;font-family:inherit;margin-top:8px;
  cursor:pointer;box-shadow:var(--shadow)}
.bar{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 64px);z-index:15}
/* 아래 [다음] 바가 목록 끝을 덮던 문제 (2026-08-27 실측).
   본문 바닥 여백 104px < 바(56px) + 탭(64px). 만들기 화면에만 모자란 만큼 더 준다. */
#pg-make{padding-bottom:72px}
.bar .inner{max-width:520px;margin:0 auto;padding:0 18px}
video.player{width:100%;background:#000;display:block;border-radius:var(--r);border:1px solid var(--edge)}
.meta{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}

/* ── 내 영상 ── */
.vid{margin-bottom:14px;overflow:hidden;
  background:var(--glass);
  -webkit-
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.vid video{width:100%;aspect-ratio:9/16;max-height:380px;object-fit:cover;display:block;background:#000}

/* 전체화면에서는 잘라내지 않는다.
   목록에서는 타일 높이를 맞추려 cover 로 잘라내지만, 크롬은 전체화면에서도
   그 cover 를 그대로 적용해 세로 영상의 좌우를 날려버린다.
   important 를 쓰는 이유 — `.tile.wide video`(0,2,1)가 `video:fullscreen`(0,1,1)보다
   우선순위가 높아서, 이게 없으면 예시 영상 타일에서만 규칙이 진다.
   셀렉터를 한 줄에 묶으면 :fullscreen 을 모르는 브라우저가 규칙 전체를 버리므로 따로 쓴다. */
video:fullscreen{width:100%!important;height:100%!important;max-height:none!important;
  aspect-ratio:auto!important;object-fit:contain!important;background:#000}
video:-webkit-full-screen{width:100%!important;height:100%!important;max-height:none!important;
  aspect-ratio:auto!important;object-fit:contain!important;background:#000}
.vid .body{display:flex;justify-content:space-between;align-items:center;padding:13px 16px}
.vid .t{font-size:14px;font-weight:700}
.vid .s{font-size:12px;color:var(--muted);margin-top:2px}
.vid a{color:var(--accTx);font-size:14px;font-weight:800;text-decoration:none}
.empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px}

/* ── 즐겨찾기 (08-26) ──
   타일이 <button> 이라 안에 버튼을 못 넣는다 — 하트는 span 에 역할만 준다 */
.favbtn{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(12,10,8,.42);
  color:#fff;cursor:pointer}
.favbtn svg{width:17px;height:17px}
.favbtn.on{color:var(--teal)}
.favbtn.on svg{fill:var(--teal)}
/* 템플릿 정리(임시) — 관리자 정리 모드에서 카드 왼쪽 위에 붙는 [숨김/복원] 단추 */
.hidebtn{position:absolute;top:8px;left:8px;z-index:2;padding:7px 12px;border-radius:var(--r-pill);
  background:rgba(12,10,8,.62);color:#fff;font-size:11.5px;font-weight:800;cursor:pointer}
.hidebtn.off{background:var(--teal);color:var(--onAcc)}
.tile.ghosted{opacity:.35}
.tile.ghosted:active{transform:none}

/* 시트 안 즐겨찾기 알약 */
.sheetfav{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:9px 15px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font-family:inherit;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer}
.sheetfav svg{width:15px;height:15px}
.sheetfav.on{color:var(--accTx);border-color:var(--teal)}
.sheetfav.on svg{fill:var(--teal);color:var(--teal)}
/* 만들기 진입 화면의 즐겨찾기 가로 줄 */
#modeFav{margin-top:22px}
.favstrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.favstrip::-webkit-scrollbar{display:none}
.favcard{flex:0 0 96px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);font-family:inherit;color:var(--ink);cursor:pointer;padding:0;text-align:left}
.favcard img{width:100%;aspect-ratio:9/12;object-fit:cover;display:block}
.favcard span{display:block;padding:7px 9px;font-size:11.5px;font-weight:700;line-height:1.3}

/* ── 플래너 (08-26, D-3 발행 캘린더 v1) ── */
.plrow{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:14px}
.pld{flex:0 0 auto;min-width:52px;text-align:center;font-size:12px;font-weight:800;
  color:var(--muted);background:var(--chip);border-radius:var(--r-pill);padding:6px 9px;
  font-variant-numeric:tabular-nums}
.pld.soon{background:linear-gradient(135deg,var(--bright),var(--teal));color:var(--onAcc)}
.plt{flex:1;min-width:0}
.plt b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plt span{font-size:12px;color:var(--muted)}
.plgo{flex:0 0 auto;border:1px solid var(--line);background:var(--chip);color:var(--accTx);
  border-radius:var(--r-pill);padding:8px 14px;font-family:inherit;font-size:12.5px;
  font-weight:800;cursor:pointer}
.plrow.past{opacity:.5}
.pldel{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--muted);font-size:12px;font-family:inherit;cursor:pointer}
.plempty{padding:18px 8px;font-size:13px;color:var(--muted);line-height:1.6}

/* ── 홈 = 광고 계획판 ─────────────────────────────────────────────────
   달력·계획 짜기·날짜 상세를 pg-home 안에서 갈아 끼운다. 전면 시트를 쓰지 않는
   이유는 하단 탭을 덮는 사고가 두 번 났기 때문이다(인수인계 23번). */
.calhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.calhead b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.calnav{width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:16px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.calnav:active{transform:scale(.9)}
.hmi{width:18px;height:18px;flex:0 0 auto}
.prow .hmi{color:var(--muted)}
.prow.done .hmi{color:var(--accTx)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calw{font-size:10.5px;color:var(--muted);text-align:center;padding:2px 0 4px}
.cd{height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:12.5px;color:var(--ink);border-radius:9px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.cd.out{visibility:hidden}
.cd.now{background:var(--chip);font-weight:800}
.cd:active{background:var(--chip)}
/* 점은 자리를 늘 차지한다 — 있을 때만 그리면 날짜 숫자가 위아래로 튄다 */
.cdot{width:5px;height:5px;border-radius:50%;background:transparent}
.cdot.done{background:var(--teal)}
.cdot.plan{box-shadow:inset 0 0 0 1.5px var(--teal)}
.cdot.seas{background:var(--muted);opacity:.45}
.callegend{display:flex;gap:12px;align-items:center;margin:10px 0 4px;
  font-size:10.5px;color:var(--muted)}
.callegend span{display:flex;align-items:center;gap:4px}
/* 다가오는 계획 */
.prow{display:flex;align-items:center;gap:10px;padding:10px 11px;margin-bottom:7px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.prow:active{transform:scale(.99)}
.prow.done{opacity:.6}
.prow.seas{border-style:dashed}
.pchip{flex:0 0 auto;min-width:52px;text-align:center;font-size:11px;color:var(--muted);
  background:var(--chip);border-radius:var(--r-pill);padding:6px 8px}
.pbody{flex:1;min-width:0}
.pbody b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbody span{font-size:11.5px;color:var(--muted)}
.pgo{flex:0 0 auto;background:var(--teal);color:var(--onAcc);border-radius:var(--r-pill);
  padding:7px 13px;font-size:12px;font-weight:800;white-space:nowrap}
.pempty{padding:22px 10px;font-size:13px;color:var(--muted);line-height:1.6;text-align:center}
.planbtn{display:block;width:100%;margin:16px 0 4px;padding:14px;background:none;
  border:1px solid var(--line);border-radius:var(--r);color:var(--accTx);
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
.planbtn.pri{background:var(--teal);border-color:var(--teal);color:var(--onAcc)}
.planbtn:active{transform:scale(.99)}
/* 계획 짜기 */
.wizhead{display:flex;align-items:center;gap:6px;margin:0 0 14px}
.wizhead .calnav{margin-left:-8px}
.wizhead b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.wizq{font-size:13px;font-weight:800;margin:0 0 8px}
.wizq.acc{color:var(--accTx);margin-top:20px}
.wizrow{display:flex;gap:6px;margin-bottom:18px}
.wopt{flex:1;min-width:0;padding:11px 4px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:800;
  cursor:pointer;line-height:1.25}
.wopt span{display:block;font-size:10px;font-weight:600;opacity:.75;margin-top:2px}
.wopt.sm{padding:10px 0;font-size:12px}
.wopt.on{background:var(--teal);border-color:var(--teal);color:var(--onAcc)}
.wizlist{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:2px 12px}
.wizlist div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.wizlist div:last-child{border-bottom:0}
.wizlist span{color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.wizlist b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wizlist .more{color:var(--muted)}
.wizlist .more b{font-weight:600;color:var(--muted)}
.wiznote{font-size:11px;color:var(--muted);line-height:1.55;margin:10px 2px 0}
/* 날짜 상세 */
.dayeb{font-size:12px;color:var(--accTx);font-weight:800;margin:0 0 16px}
.daycard{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.daypos{flex:0 0 auto;width:74px;height:111px;border-radius:10px;
  background:var(--chip) center/cover no-repeat}
.dayt{font-size:13.5px;line-height:1.5;margin:0 0 6px}
.days{font-size:11.5px;color:var(--muted);margin:0}
.dayrow{display:flex;gap:8px;margin-top:8px}
.dayrow button{flex:1;padding:12px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:13px;
  font-weight:800;cursor:pointer}
.pladd{display:flex;gap:8px;margin-top:12px;align-items:stretch}
.pladd input{border:1px solid var(--line);border-radius:11px;background:var(--card-hi);
  font-family:inherit;font-size:14px;padding:11px 12px;color:var(--ink)}
.pladd input[type=date]{flex:0 0 auto;width:130px}
.pladd input[type=text]{flex:1;min-width:0}

/* ── 하단 탭 — 아이콘만 5개, 인스타처럼 화면 아래를 꽉 채우는 판 (08-26 대표님) ──
   떠 있는 알약을 걷어내고 바닥에 붙였다. 위 헤어라인 하나로 본문과 가른다. */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0;pointer-events:none}
nav .inner{max-width:none;margin:0;display:flex;align-items:center;pointer-events:auto;
  background:var(--card);
  border:0;border-top:1px solid var(--edge);border-radius:0;box-shadow:none;
  padding:4px 10px calc(env(safe-area-inset-bottom) + 4px)}
nav button{position:relative;flex:1;border:0;background:none;font-family:inherit;
  padding:10px 0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink)}
nav button.on{color:var(--accTx)}
/* 가운데 ＋ — 노란 동그라미라 **글자색을 따로 정해야 한다.**
   안 정하면 nav button 의 색을 물려받아 노랑 위 안 보이는 ＋ 가 된다(실제로 그랬다). */
nav button.make .ic{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--bright),var(--teal));color:var(--onAcc);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(160,110,0,.3)}
nav svg{width:23px;height:23px}
nav .ic svg{width:19px;height:19px}
/* 새 영상 도착 점 — 알림 탭의 후계자. 내 영상을 열면 사라진다 */
nav .dot{position:absolute;top:9px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;
  background:#C43A2E;box-shadow:0 0 0 2px var(--card)}
.hide{display:none}

/* 안내 배너 — 테마를 따른다 (하드코딩 민트색 폐기) */
.note-info{background:var(--chip);border-color:var(--line);color:var(--ink)}
.note-info b{color:var(--accTx)}

/* ── 언어 고르기 ── */
  .langrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
  .langbtn{padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--edge);
    background:var(--card);font-family:inherit;font-size:13.5px;font-weight:700;
    color:var(--muted);cursor:pointer}
  .langbtn.on{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-color:transparent;color:var(--onAcc)}
  .langnote{margin-top:8px;font-size:12px;color:var(--muted)}

/* ── 템플릿 전면 미리보기 (08-26 대표님: "전체 화면으로 보여줘") ──────────
   카드를 누르면 영상이 화면을 통째로 채우고, 정보·버튼은 아래 어둠 위에 얹힌다.
   예전 전체화면의 함정(되돌아갈 길 막힘)은 나가는 길 셋으로 푼다:
   ✕ · 폰 뒤로가기(기록 연동) · [다른 템플릿 보기]. ESC 도 그대로.
   등장 애니메이션은 없앴다 — 반쯤 올라온 프레임이 폰 캡처에 깨진 화면처럼 잡혔다(08-26). */
/* 전면 시트는 하단 5탭 위에서 끝난다 — 탭은 언제나 보여야 한다 (2026-08-30 대표님 지시).
   전에는 inset:0 으로 화면을 다 덮어 카드를 열면 탭이 사라졌다. */
.sheet{position:fixed;left:0;right:0;top:0;bottom:var(--navh,63px);z-index:60}
.sheet[hidden]{display:none}
.sheet-bg{display:none}
.sheet-card{position:absolute;inset:0;width:100%;max-width:none;max-height:none;
  border-radius:0;background:#0B0A09;overflow:hidden;display:flex;flex-direction:column}
/* 소리 토글 — ✕ 아래 같은 짙은 알약 (08-27) */
.sndbtn{position:absolute;top:calc(env(safe-area-inset-top) + 64px);right:12px;z-index:3;
  width:40px;height:40px;border:0;border-radius:var(--r-pill);
  background:rgba(12,10,8,.55);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.sndbtn svg{width:20px;height:20px}
.sndbtn[hidden]{display:none}
/* ✕·탭 알약은 짙은 반투명 — 뒤가 영상(어두움)이든 구조 보기(라이트 배경)든 다 읽힌다 */
.sheet-x{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:3;
  width:40px;height:40px;border:0;
  border-radius:var(--r-pill);background:rgba(12,10,8,.55);color:#fff;font-size:16px;cursor:pointer}
/* 잘라내지 않는다. 결과를 보고 결정하는 자리라 한 컷도 가리면 안 된다. */
.sheet video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;background:#0B0A09;border-radius:0}
/* 정보 판 — 영상 위 아래쪽 어둠. 테마와 무관하게 밝은 글씨(뒤가 항상 영상이다) */
.sheet-body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:56px 20px calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(180deg,rgba(11,10,9,0) 0%,rgba(11,10,9,.82) 26%,rgba(11,10,9,.94) 100%)}
.sheet-cat{font-size:13px;font-weight:700;color:var(--bright);letter-spacing:.02em}
.sheet-body h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:2px;color:#fff}
.sheet-body p{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:6px;line-height:1.5}
.sheet-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sheet-meta span{font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:7px 13px}
.sheet-fx{font-size:13px;color:rgba(255,255,255,.66);line-height:1.5;margin-top:10px;
  border-left:3px solid rgba(255,255,255,.3);padding-left:11px}
.sheet-body .sheetfav{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.sheet-body .sheetfav.on{color:var(--bright)}
.sheet-body .sheetfav.on svg{fill:var(--bright);color:var(--bright)}
/* 구조 보기에서는 정보판을 접는다 — 장면 카드와 겹쳐 읽히던 문제(08-26). 버튼 둘만 남긴다 */
.sheet-body.slim .sheet-cat,.sheet-body.slim h3,.sheet-body.slim p,
.sheet-body.slim .sheet-meta,.sheet-body.slim .sheet-fx,.sheet-body.slim .sheetfav{display:none}
.sheet-body.slim{background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--bg) 40%);padding-top:44px}
.sheet-body.slim .sheet-back{color:var(--muted)}
.sheet-go{display:block;width:100%;margin-top:14px;padding:17px;border:0;border-radius:var(--r-pill);
  background:var(--teal);color:var(--onAcc);font-size:17px;font-weight:800;cursor:pointer;font-family:inherit}
.sheet-back{display:block;width:100%;margin-top:6px;padding:13px;border:0;border-radius:var(--r-pill);
  background:transparent;color:rgba(255,255,255,.72);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}


/* ── 로그인 화면 ──
   전체를 덮는다 — 로그인 전에는 다른 화면을 만질 수 없다.
   유리 카드·색·글자는 전부 기존 토큰. 새 색 금지 규칙 그대로. */
/* 배경을 불투명하게 — 반투명이면 밑에 깔린 탑줄·탭이 비쳐서
   로그인 화면에 뒤로 화살표가 떠 있는 것처럼 보인다(08-26 실제 발견). */
.auth{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg)}
.auth[hidden]{display:none}
.auth-card{width:100%;max-width:400px;padding:28px 24px calc(env(safe-area-inset-bottom) + 24px)}
.auth-k{font-size:13px;font-weight:700;color:var(--accTx);letter-spacing:.02em}
.auth-card h2{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:2px 0 18px}
.auth-err{min-height:20px;font-size:13.5px;font-weight:600;color:var(--warn);margin:2px 0 8px}


/* ── 시트: 완성 예시 ↔ 구조 보기 토글 ──
   완성 예시는 남의 가게 재료라 "내 것으로 바꾸면 뭐가 바뀌나"를 상상해야 한다.
   구조 보기는 그 상상을 없앤다 — 장면마다 무슨 글자가 들어가고
   어떤 칸을 내가 고칠 수 있는지 그대로 보여준다. */
.sheet-tabs{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px;z-index:3;display:flex;gap:6px}
.sheet-tabs button{border:0;border-radius:var(--r-pill);padding:9px 15px;font-size:13.5px;
  font-weight:800;cursor:pointer;background:rgba(12,10,8,.55);color:#fff;font-family:inherit}
.sheet-tabs button.on{background:var(--teal);color:var(--onAcc)}
/* 구조 보기 — 전면 스크롤. 다크에서도 앱 배경색을 따른다(전에는 밝은 회색이 박혀 있었다) */
.anatomy{position:absolute;inset:0;overflow-y:auto;background:var(--bg);border-radius:0;
  padding:calc(env(safe-area-inset-top) + 64px) 18px 200px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scene{background:var(--card-hi);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:10px}
.scene .sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.scene .sh b{font-size:14px;font-weight:800;color:var(--accTx)}
.scene .sh span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tok{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line)}
.tok:last-child{border-bottom:0}
.tok .v{font-size:14px;font-weight:600;line-height:1.4;min-width:0;word-break:break-word}
.tok .b{flex:0 0 auto;font-size:10.5px;font-weight:800;border-radius:5px;padding:3px 7px;margin-top:1px}
.tok.edit .b{background:#DCF0E4;color:#14663A}
.tok.fixed .b{background:#ECEAE6;color:#8A8F94}
.tok.fixed .v{color:var(--muted);font-weight:500}

/* hidden 속성이 display:block 에 지지 않게 — 토글이 실제로 숨긴다 */
.sheet video[hidden]{display:none}
.anatomy[hidden]{display:none}

/* ── 끌어서 순서 바꾸기 (2026-08-25) ────────────────────────────────────
   손잡이(≡)를 잡아야만 움직인다. 사진이나 글칸을 잡으면 사진 고르기·글쓰기가 막힌다. */
.grip{flex:none;width:30px;align-self:stretch;display:flex;flex-direction:column;
  justify-content:center;gap:4px;padding:0 9px;border:0;background:none;cursor:grab;
  touch-action:none}
.grip span{display:block;height:2px;border-radius:2px;background:var(--muted);opacity:.55}
.grip:active{cursor:grabbing}
.dragging{opacity:.45}
.drop-here{box-shadow:inset 0 3px 0 var(--teal)}
body.dragging-on{user-select:none;-webkit-user-select:none}

/* ── 손보기: 사진 한 장에 문구 한 줄 ─────────────────────────────────── */
.escene{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.escene:last-of-type{border-bottom:0}
.ethumb{flex:none;width:56px;height:88px;border-radius:10px;background:var(--chip);
  background-size:cover;background-position:center}
.eside{flex:1;min-width:0}
.eno{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.einput{display:flex;gap:7px;align-items:center}
.einput .e-line{flex:1;min-width:0;margin:0}
.sbtn{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--chip);color:var(--ink);font-weight:900;font-size:14px;
  font-family:inherit;cursor:pointer}
.eszname{font-size:12px;font-weight:700;color:var(--muted);margin-top:5px}

/* ── 글자 크기 고르는 팝업 ──────────────────────────────────────────────
   "132px" 같은 말은 안 쓴다. 사장님이 쓴 문구를 그 크기 그대로 그려서 눈으로 고른다. */
.sz-note{font-size:13px;color:var(--muted);margin:3px 0 14px}
.szopt{display:block;width:100%;text-align:left;margin-bottom:9px;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  font-family:inherit;color:var(--ink);cursor:pointer}
.szopt.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.szopt.off{opacity:.4;cursor:not-allowed}
.szname{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.szdemo{display:block;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 한 장면에 문구 여러 줄 (2026-08-25, 2단계) */
.eline{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.eline .e-line{flex:1;min-width:110px;margin:0}
.xline{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer}
.eline .eszname{flex-basis:100%;margin:0}
.addline,.xscene{border:0;background:none;font-family:inherit;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--accTx);padding:4px 0}
.xscene{float:right;color:var(--muted)}

/* 영상 길이 버튼 — 길이 아래에 "사진 몇 장까지"를 같이 보여준다 */
#lenRow .packbtn{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25}
#lenRow .packbtn small{font-size:11px;font-weight:600;opacity:.7}
#lenRow .packbtn.off{opacity:.38}

/* ── 내 가게 카드 (2026-08-25) ─────────────────────────────────────────
   모든 광고 마지막에 들어가는 명함. 여기 미리보기가 실제 마무리 장면과 같은 짜임이다
   (가게 이름 · 밑줄 · 연락처 넉 줄). 세로 9:16 을 눕혀 넣지 않고 그대로 보여준다. */
.cardbox{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.cardbox .note{font-size:12px;color:var(--muted);line-height:1.5;margin:2px 0 12px}
.cardprev{position:relative;aspect-ratio:9/16;max-height:300px;margin:0 auto 10px;
  border-radius:14px;overflow:hidden;background:#1A1712 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center}
.cardprev::after{content:"";position:absolute;inset:0;background:rgba(10,8,7,.55)}
/* 대표 사진이 없을 때 안내 — **카드 안이 아니라 밖에** 둔다.
   안에 두었더니 카드 내용과 겹쳐 둘 다 안 읽혔다(첫 시도). */
.cardempty{margin:0 0 10px;text-align:center;font-size:11px;line-height:1.5;color:var(--muted)}
.cardink{position:absolute;z-index:2;left:14px;right:14px;text-align:center}
.cardnm{font-size:17px;font-weight:900;letter-spacing:-.03em;color:#fff}
.cardrule{height:2px;width:56px;margin:8px auto 7px;border-radius:2px}
.cardct{font-size:10px;font-weight:700;line-height:1.6;color:rgba(255,255,255,.9)}
.cardrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cardrow .msg{font-size:12px;color:var(--muted)}


/* ── v2 장면 편집기 (2026-08-28) — 실험실에서 확정한 조작을 본편으로 ──
   전체 화면 캔버스 · 자막은 화면에서 직접(누르면 그 자리 타이핑, 끌면 이동) ·
   연출은 이미지 위 팝업(골라도 안 닫힘) · 오른쪽 칩 기둥 없음 */
#s-edit{display:flex;flex-direction:column;gap:8px}
/* 아래 큰 버튼과 장면 넘기는 줄이 사라져 그만큼 무대에 돌려준다 (2026-08-30).
   58% → 76%. 조작은 영상 위 기둥으로 올라갔다. */
#edBox{position:relative;height:min(76dvh,660px);border-radius:14px;overflow:hidden;
  background:#111;box-shadow:var(--shadow-lift)}
#edCv{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:top left;border:0;pointer-events:none}
#edTouch{position:absolute;inset:0;touch-action:none}
#edTools{position:absolute;z-index:7;display:none;gap:5px}
#edTools.on{display:flex}
#edTools button{border:0;background:rgba(20,18,16,.88);color:#fff;border-radius:var(--r-pill);
  padding:7px 11px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px}
#edTools .dot{width:13px;height:13px;border-radius:50%;display:inline-block}
#edHint{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;z-index:6;
  background:rgba(20,18,16,.82);color:#fff;font-size:12px;font-weight:700;padding:7px 13px;
  border-radius:var(--r-pill);opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}


/* ── 자동생성 미리보기 = 장면 편집기 (2026-08-28 대표님 확정 ㄱ안) ──
   오른쪽 장면 띠를 걷고 캔버스가 폭을 다 쓴다. 조작은 카드 흐름(s-edit)과 같다. */
#resWrap{padding-right:0}
#resStage{position:relative}
#resTouch{position:absolute;inset:0;touch-action:none;z-index:5}
#resTools{position:absolute;z-index:7;display:none;gap:5px}
#resTools.on{display:flex}
#resTools button{border:0;background:rgba(20,18,16,.88);color:#fff;border-radius:var(--r-pill);
  padding:7px 11px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px}
#resTools .dot{width:13px;height:13px;border-radius:50%;display:inline-block}
#resHint{position:absolute;left:50%;transform:translateX(-50%);bottom:62px;z-index:6;
  background:rgba(20,18,16,.82);color:#fff;font-size:12px;font-weight:700;padding:7px 13px;
  border-radius:var(--r-pill);opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}

/* 장면별 사진 넣기 관문 — 그 장면이 쓸 사진이 없으면 캔버스를 덮는다 (08-28) */
/* 사진 관문 — 연출 띠 위까지만 덮는다 (08-29 대표님 ㄱ안).
   전에는 inset:0 로 다 덮어서 카메라·자막 버튼이 안 눌렸다. */
/* 관문은 무대를 다 덮되 오른쪽 기둥(z-index 7)보다 아래에 둔다 (2026-08-30).
   전에는 아래 68px 을 비워 연출 띠를 살렸는데, 그 띠가 기둥으로 올라가 필요 없어졌다. */
#edGate,#resGate{position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  /* 자막이 비쳐 보이면 글자끼리 포개져 둘 다 안 읽힌다 (08-29 실측).
     뒤를 확실히 덮고 살짝 흐린다. */
  background:rgba(10,9,8,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:#fff;text-align:center;padding:18px;
  /* 틀이 손가락을 먹으면 사진 없는 장면에서 스와이프가 안 된다 (08-30 신고).
     인수인계 17번과 같은 함정 — 틀은 통과시키고 버튼만 받는다. */
  pointer-events:none}
#edGate .g-btns,#resGate .g-btns{pointer-events:auto}
.g-name{font-size:17px;font-weight:800}
.g-hint{font-size:13px;color:rgba(255,255,255,.72);max-width:240px;line-height:1.5}
.g-btns{display:flex;gap:14px;margin-top:6px}
.g-b{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  font-size:12px;font-weight:800;color:#fff}
.g-b .g-ic{width:52px;height:52px;border-radius:15px;border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;font-size:23px}
.g-b.g-cam .g-ic{background:var(--teal);border-color:transparent;color:var(--onAcc)}
.g-b:active .g-ic{transform:scale(.95)}
/* 9:16 이 아닌 사진 — 끌어서 맞추기 */
#cropper{position:fixed;inset:0;z-index:120;background:#0B0A09;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px)}
#cropper .cr-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#crCv{max-height:100%;max-width:100%;aspect-ratio:9/16;border-radius:12px;
  outline:2px solid var(--teal);touch-action:none;background:#12100E}
#cropper .cr-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  background:rgba(20,18,16,.8);color:#fff;font-size:12px;font-weight:700;
  padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none}
#cropper .cr-row{display:flex;gap:8px;width:100%;max-width:520px}
#cropper .cr-row button{flex:1;border:0;border-radius:var(--r-pill);padding:14px 0;
  font-size:15px;font-weight:800;font-family:inherit;cursor:pointer}
#crNo{background:rgba(255,255,255,.12);color:#fff}
#crOk{background:var(--teal);color:var(--onAcc)}

/* 사진 관문이 떠 있는 동안은 자막 추가 ＋ 를 숨긴다 — ＋ 가 둘이면 헷갈린다 (08-29) */
#edBox:has(#edGate) #edAdd{display:none !important}


/* 눌리는 느낌 (08-29 대표님 지적: "버튼을 누르는 느낌이 전혀 없어").
   손끝 반응이 없으면 앱이 죽은 것처럼 느껴진다 — 눌리는 순간 줄고 어두워진다. */
.cta:active,.ghost:active,.langbtn:active,.denpick button:active,
.tile:active,.chip:active,.tab:active,#bake:active,.g-b:active .g-ic,
#crNo:active,#crOk:active,.sheet-go:active,.sheet-back:active,
.edt-it:active .cc,.edt-ri:active,.edt-make:active .b{
  transform:scale(.97);filter:brightness(.92)}
.cta,.ghost,.langbtn,.denpick button,#bake,#crNo,#crOk,.sheet-go,.sheet-back,
.edt-it .cc,.edt-ri,.edt-make .b{
  transition:transform .06s ease,filter .06s ease}

/* ══ 편집기 껍데기 (2026-08-30) — editor.js 가 그린다 ═══════════════════
   조작 다섯을 영상 오른쪽 기둥으로 올리고, 고르는 판은 아래에서 올라온다.
   판·기둥은 영상(어두움) 위에 얹히므로 라이트/다크 토큰을 쓰지 않고
   고정 어두운 값을 쓴다 — 옛 #edFxPop 이 쓰던 방식과 같다. */
.edt-count{position:absolute;top:10px;left:0;right:0;z-index:7;text-align:center;
  font-size:13px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none}
.edt-rail{position:absolute;right:8px;bottom:14px;z-index:7;display:flex;flex-direction:column;
  gap:14px;align-items:center}
.edt-ri{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;
  color:#fff;padding:2px 4px;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.edt-ri svg{width:26px;height:26px}
.edt-ri span{font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.edt-ri.on{color:var(--teal)}
.edt-ri:active{transform:scale(.92)}
/* Make — 기둥 맨 아래. 사진이 모자라면 숫자가 붙고, 다 차면 은은하게 맥박친다 */
.edt-make{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  border:0;background:none;margin-top:4px;cursor:pointer}
.edt-make .b{width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--onAcc);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.edt-make .b svg{width:24px;height:24px}
.edt-make .lb{font-size:10.5px;font-weight:800;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.edt-make .badge{position:absolute;right:-2px;top:-4px;min-width:21px;height:21px;border-radius:99px;
  background:#fff;color:#141210;font-size:12px;font-weight:800;display:grid;place-items:center;
  padding:0 5px;border:2px solid #0E0D0B}
.edt-make:active .b{transform:scale(.94)}
.edt-make.ready .b{animation:edtPulse 1.9s ease-out infinite}
@keyframes edtPulse{0%{box-shadow:0 0 0 0 rgba(255,201,77,.5)}70%{box-shadow:0 0 0 15px rgba(255,201,77,0)}
  100%{box-shadow:0 0 0 0 rgba(255,201,77,0)}}

.edt-scrim{position:fixed;left:0;right:0;top:0;bottom:var(--navh,63px);z-index:60;background:rgba(0,0,0,.18);opacity:0;
  pointer-events:none;transition:opacity .25s}
.edt-scrim.on{opacity:1;pointer-events:auto}
.edt-sheet{position:fixed;left:0;right:0;bottom:var(--navh,63px);z-index:61;background:rgba(20,18,17,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.14);border-radius:20px 20px 0 0;
  /* 닫힐 때 '자기 높이 + 탭 높이'만큼 내려야 완전히 사라진다 (2026-08-30 수리).
     102% 만 내리면 탭 위로 올려둔 63px 이 그대로 남아 하단 탭을 덮었다 —
     아이폰 14 에서 탭이 안 눌린다는 신고의 원인. */
  transform:translateY(calc(100% + var(--navh,63px) + 12px));
  transition:transform .30s cubic-bezier(.2,.85,.25,1);
  display:flex;flex-direction:column;color:#fff;
  padding-bottom:8px}
.edt-sheet.on{transform:translateY(0)}
.edt-grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.26);margin:9px auto 0;flex:0 0 auto}
.edt-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:9px 6px 2px;flex:0 0 auto}
.edt-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.edt-tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;
  color:rgba(255,255,255,.55);padding:7px 0;border-radius:11px;cursor:pointer;font-family:inherit}
.edt-tabs button svg{width:21px;height:21px}
.edt-tabs button span{font-size:10px;font-weight:700}
.edt-tabs button.on{color:var(--teal);background:rgba(255,255,255,.07)}
.edt-head{display:flex;align-items:center;gap:9px;padding:6px 16px 0;flex:0 0 auto}
.edt-head .t{font-size:17px;font-weight:800}
.edt-head .c{font-size:13px;font-weight:700;color:var(--teal)}
.edt-head .x{margin-left:auto;width:30px;height:30px;border-radius:99px;border:0;
  background:rgba(255,255,255,.10);color:#fff;display:grid;place-items:center;cursor:pointer}
.edt-head .x svg{width:15px;height:15px}
/* 층 1 — 고치는 대상이 둘일 때만 (Captions: 글자 나타나기 / 장면 넘어가기) */
.edt-seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:11px 16px 0;
  border-radius:12px;background:rgba(255,255,255,.07);flex:0 0 auto}
.edt-seg button{border:0;background:none;padding:9px 0;border-radius:10px;font-size:13px;
  font-weight:800;color:rgba(255,255,255,.62);cursor:pointer;font-family:inherit}
.edt-seg button.on{background:#fff;color:#141210}
/* 층 2 — 항목이 많아 걸러 봐야 할 때만 */
.edt-chips{display:flex;gap:6px;padding:11px 16px 2px;overflow-x:auto;flex:0 0 auto}
.edt-chips::-webkit-scrollbar{display:none}
.edt-chips button{flex:0 0 auto;border:0;padding:6px 13px;border-radius:99px;font-size:12.5px;
  font-weight:700;background:rgba(255,255,255,.09);color:rgba(255,255,255,.66);
  white-space:nowrap;cursor:pointer;font-family:inherit}
.edt-chips button.on{background:#fff;color:#141210}
.edt-srch{display:flex;align-items:center;gap:9px;margin:11px 16px 0;padding:10px 14px;
  border-radius:12px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.6);flex:0 0 auto}
.edt-srch svg{width:17px;height:17px}
.edt-srch input{flex:1;border:0;background:none;color:#fff;font:inherit;font-size:14px;outline:none}
.edt-srch input::placeholder{color:rgba(255,255,255,.45)}
/* 동그라미 4칸 × 2줄, 나머지는 세로 스크롤 — 늘어나도 화면이 안 변한다 */
.edt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 7px;padding:13px 16px 4px;
  max-height:214px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.edt-it{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;
  cursor:pointer;font-family:inherit;padding:0}
.edt-it .cc{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#3b332b,#6b5a45);border:1.5px solid rgba(255,255,255,.14);position:relative}
.edt-it .cc svg{width:21px;height:21px}
.edt-it.on .cc{border:3px solid var(--teal)}
.edt-it.on .cc::after{content:"";position:absolute;right:0;top:0;width:12px;height:12px;
  border-radius:99px;background:var(--teal);border:2px solid #141210}
.edt-it .n{font-size:9.5px;letter-spacing:-.02em;font-weight:700;color:rgba(255,255,255,.82);text-align:center;line-height:1.2}
.edt-it.on .n{color:#fff}
.edt-it:active .cc{transform:scale(.94)}
.edt-empty{grid-column:1/-1;color:rgba(255,255,255,.5);font-size:13px;padding:14px 2px}


/* ══ 관문·자막 도구를 새 결에 맞춤 (2026-08-30) ═══════════════════════ */
/* 찍기·앨범 — 이모지에서 선 아이콘으로. 앱의 다른 아이콘과 한 벌이 된다 */
#edGate .g-ic,#resGate .g-ic{width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);color:#fff}
#edGate .g-ic svg,#resGate .g-ic svg{width:26px;height:26px}
#edGate .g-b.g-cam .g-ic,#resGate .g-b.g-cam .g-ic{background:var(--teal);border-color:var(--teal);color:var(--onAcc)}
#edGate .g-btns,#resGate .g-btns{gap:18px}

/* 자막 도구 — 손잡이(⋮⋮)를 잡았을 때만 자막이 움직인다.
   무대 위 위아래 쓸기는 장면 넘기기가 가져갔기 때문이다. */
#edTools,#resTools{background:rgba(20,18,16,.92);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:5px 7px;gap:6px;align-items:center}
#edTools button,#resTools button{background:none;padding:5px 7px}
#edGrip{width:28px;height:28px;border-radius:99px;background:rgba(255,255,255,.12) !important;
  display:grid;place-items:center;touch-action:none;cursor:grab}
#edGrip svg{width:16px;height:16px}
#edGrip:active{cursor:grabbing;transform:scale(.94)}

/* ＋ 자막 부품 추가 — 오른쪽은 기둥이 쓰므로 왼쪽 아래로 옮겼다 (2026-08-30) */
#edAdd{position:absolute;left:12px;bottom:16px;z-index:6;width:44px;height:44px;border:0;
  border-radius:50%;background:rgba(20,18,16,.72);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:23px;line-height:1;cursor:pointer;display:grid;place-items:center}
#edAdd:active{transform:scale(.94)}

/* ══ 템플릿 시트 정리 (2026-08-30 대표님 지시) ═══════════════════════════
   · [완성 예시][뭐가 들어가나] 탭 제거 — 영상만 본다.
     '뭐가 들어가나'(장면 지도, 08-22)는 코드째 지우지 않고 버튼만 뺐다.
     되살리려면 아래 한 줄만 지우면 된다.
   · 'Effects used ⋯' 줄 제거 — 만든 사람 말이지 사장님 말이 아니다.
   · 분류를 제일 큰 글자로, 그 아래 '사진 N장 · N초' 한 줄, 옆에 [Use].
   · 소리 아이콘은 켜짐·꺼짐 중 하나만 — hidden 이 인라인 SVG 에 안 먹어
     둘 다 보이던 것을 여기서 못 박는다(인수인계 6-0 함정의 사촌). */
.sheet-tabs{display:none !important}
#sheetFx{display:none !important}
.sndbtn svg[hidden]{display:none !important}

#sheet .sheet-body{display:grid;grid-template-columns:1fr auto auto;
  align-items:center;column-gap:10px;row-gap:2px}
#sheetCat{grid-column:1;grid-row:1;font-size:25px;font-weight:900;letter-spacing:-.025em;
  color:#fff;text-transform:none}
#sheetMeta{grid-column:1;grid-row:2;display:flex;gap:8px;margin:0;white-space:nowrap}
#sheetMeta span{background:none;padding:0;font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.72)}
#sheetMeta span+span::before{content:"· ";color:rgba(255,255,255,.45)}
#sheetFav{grid-column:2;grid-row:1/3;width:48px;height:48px;padding:0;border-radius:50%;
  justify-content:center;margin:0}
#sheetFav span{display:none}
#sheetGo{grid-column:3;grid-row:1/3;width:auto;margin:0;padding:15px 34px;font-size:17px;white-space:nowrap}
#sheetTitle{grid-column:1/-1;grid-row:3;font-size:14px;font-weight:700;
  color:rgba(255,255,255,.72);margin-top:8px}
#sheetDesc{grid-column:1/-1;grid-row:4;font-size:13.5px;margin-top:2px}
#sheetBack{grid-column:1/-1;grid-row:5}