/* app.css — 웹/앱 공용 스타일. 글래스모피즘 + 벤또 격자.
   유리는 뒤에 배경이 있어야 보인다. body::before의 메시 그라데이션이 그 배경이고,
   모든 판은 그 위에 반투명으로 얹힌다. 다만 글씨 대비가 곧 기능이라
   유리는 충분히 불투명하게(.72~.86) 잡아 본문이 항상 AA를 넘게 했다. */
:root{
  --ink:#0E1A1F; --muted:#4C6169; --teal:#0E6472; --teal-d:#0A3B45; --bright:#3FC3D6;
  --line:rgba(14,60,72,.10);
  --glass:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.86);
  --edge:rgba(255,255,255,.75);
  --shadow:0 10px 30px rgba(10,50,62,.10);
  --shadow-lift:0 16px 40px rgba(10,50,62,.16);
  --r:22px; --r-sm:16px; --r-pill:999px;
  --warn:#A9601C;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
  color:var(--ink);line-height:1.5;background:#F2F7F9;min-height:100vh}

/* 유리 뒤에 깔리는 배경. 고정이라 스크롤해도 판만 움직인다 */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(62% 48% at 10% 6%,   #BCE8EF 0%, rgba(188,232,239,0) 62%),
    radial-gradient(56% 44% at 94% 12%,  #FFE0BF 0%, rgba(255,224,191,0) 62%),
    radial-gradient(72% 52% at 52% 98%,  #CBDDFA 0%, rgba(203,221,250,0) 64%),
    radial-gradient(46% 38% at 88% 70%,  #E3D5F7 0%, rgba(227,213,247,0) 62%),
    #F2F7F9;}

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

header{flex:0 0 auto;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);border-bottom:1px solid var(--line)}
header .kicker{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
header h1{font-size:19px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}

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

/* 유리 재질 — 판은 전부 이걸 쓴다 */
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  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:rgba(255,255,255,.82);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:#fff}
.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:#fff}
.mc-set.on{color:var(--teal)}
.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)}
/* 오토 1단계 — 말하기 */
.a-q{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:6px 0 6px}
.a-hint{font-size:13px;color:var(--muted);margin-bottom:16px}
#autoText{width:100%;padding:16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.9);font-family:inherit;font-size:16px;line-height:1.6;
  resize:none;-webkit-appearance:none}
#autoText:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.13)}
.a-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.a-chip{padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);font-family:inherit;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer}
.a-chip:active{transform:scale(.96)}
/* 탑메뉴 탭 — 알약 칩이 아니라 글자+밑줄. 틱톡·샤오홍슈 방식이라 한 줄에 더 많이 들어간다 */
.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))}
/* 보기 크기 — 한 줄을 먹던 크게/보통/많이 를 버튼 하나로 접었다. 누르면 순환한다 */
.denToggle{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.7);
  font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);
  padding:6px 11px;border-radius:var(--r-pill);cursor:pointer}
.denToggle:active{transform:scale(.95)}
/* 둘러보기에서는 제목을 숨기고, 다른 화면에서는 탭·보기크기를 숨긴다 */
header[data-mode="tabs"] h1{display:none}
header[data-mode="title"] .tabs,header[data-mode="title"] .denToggle{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:rgba(255,255,255,.68);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  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:#fff;box-shadow:0 6px 18px rgba(14,100,114,.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{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:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.5);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);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:#fff}
  .denbtn svg{width:15px;height:15px}
.tile{grid-column:span 1;display:flex;flex-direction:column;overflow:hidden;text-align:left;
  padding:0;font-family:inherit;cursor:pointer;color:var(--ink);
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  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);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.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(--teal);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(--teal);
  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);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  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(--teal);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(14,100,114,.5);box-shadow:0 10px 30px rgba(14,100,114,.18)}
label.pick{display:block;padding:14px 16px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.4);color:var(--teal);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);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  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);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  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(14,100,114,.55);box-shadow:0 12px 32px rgba(14,100,114,.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(--teal);background:rgba(14,100,114,.12);
  padding:5px 10px;border-radius:var(--r-pill)}

.warn{background:rgba(255,241,224,.8);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);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:#fff;
  font-size:17px;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 12px 30px rgba(14,100,114,.38);transition:transform .16s ease}
.cta:active{transform:scale(.98)}
.cta:disabled{background:rgba(120,142,150,.55);box-shadow:none;color:rgba(255,255,255,.9)}
.ghost{width:100%;border:1px solid var(--edge);border-radius:var(--r-pill);padding:15px;
  background:var(--glass-hi);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  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) + 96px);z-index:15}
.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);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  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(--teal);font-size:14px;font-weight:800;text-decoration:none}
.empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px}

/* ── 알림 ── */
.noti{display:flex;gap:13px;padding:15px 16px;margin-bottom:10px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.noti.new{border-left:3px solid var(--teal)}
.noti .dot{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,rgba(63,195,214,.35),rgba(14,100,114,.28));
  color:var(--teal-d);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge)}
.noti .dot svg{width:18px;height:18px}
.noti .t{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.noti .d{font-size:13px;color:var(--muted);margin-top:3px}
.noti .w{font-size:12px;color:var(--muted);opacity:.85;margin-top:6px}
.noti .act{margin-top:9px;border:0;background:none;padding:0;font-family:inherit;
  font-size:13px;font-weight:800;color:var(--teal);cursor:pointer}
.soonbox{padding:16px;margin-top:4px;font-size:13px;color:var(--muted);line-height:1.75;
  background:rgba(255,255,255,.46);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px dashed rgba(14,60,72,.22);border-radius:var(--r)}
.soonbox b{display:block;margin-bottom:7px;font-size:13px;color:var(--ink)}

/* ── 하단 탭 — 바닥에 붙이지 않고 떠 있는 유리 막대 ── */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:0 14px calc(env(safe-area-inset-bottom) + 12px);pointer-events:none}
nav .inner{max-width:492px;margin:0 auto;display:flex;pointer-events:auto;
  background:rgba(255,255,255,.78);backdrop-filter:blur(26px) saturate(1.8);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid var(--edge);border-radius:26px;box-shadow:0 14px 36px rgba(10,50,62,.18)}
nav button{position:relative;flex:1;border:0;background:none;font-family:inherit;
  padding:11px 0 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;color:#546973;border-radius:26px}
nav button.on{color:var(--teal)}
nav button span{font-size:11px;font-weight:700}
nav button.make .ic{width:48px;height:48px;margin-top:-22px;border-radius:50%;
  background:linear-gradient(135deg,var(--bright),var(--teal));display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 20px rgba(14,100,114,.42);
  border:2px solid rgba(255,255,255,.7)}
nav svg{width:24px;height:24px}
nav .bdg{position:absolute;top:6px;left:50%;margin-left:5px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:#C43A2E;color:#fff;font-size:10px;font-weight:800;
  line-height:18px;text-align:center;box-shadow:0 2px 6px rgba(196,58,46,.45)}
.hide{display:none}

/* 유리를 못 쓰는 환경(구형 웹뷰)에서는 불투명 판으로 내려앉는다 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.tile,.slot,.field,.tpl,.vid,.noti,.chip,.ghost{background:rgba(255,255,255,.95)}
  header,nav .inner{background:rgba(255,255,255,.96)}
}

  /* ── 언어 고르기 ── */
  .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:rgba(255,255,255,.6);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:#fff}
  .langnote{margin-top:8px;font-size:12px;color:var(--muted)}

/* ── 템플릿 미리보기 시트 ──────────────────────────────────────────────
   카드를 누르면 사진 화면으로 바로 넘어가던 것을, 결과를 크게 보고
   결정하는 자리로 바꿨다. 사진 3~5장을 다 올린 뒤에 "이게 아닌데"를
   알면 되돌리는 값이 너무 크다. */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(8,26,32,.52);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:shFade .18s ease-out}
.sheet-card{position:relative;width:100%;max-width:520px;max-height:94dvh;overflow-y:auto;
  border-radius:26px 26px 0 0;background:var(--glass-hi);animation:shUp .26s cubic-bezier(.22,1,.36,1);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@keyframes shFade{from{opacity:0}to{opacity:1}}
@keyframes shUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:0;
  border-radius:var(--r-pill);background:rgba(10,40,50,.55);color:#fff;font-size:16px;cursor:pointer}
/* 잘라내지 않는다. 결과를 보고 결정하는 자리라 한 컷도 가리면 안 된다.
   (전체화면에서 세로 영상 좌우가 잘렸던 것과 같은 실수를 여기서 반복하지 않는다) */
.sheet video{display:block;width:100%;height:46dvh;object-fit:contain;
  background:#08222A;border-radius:26px 26px 0 0}
.sheet-body{padding:16px 20px calc(env(safe-area-inset-bottom) + 20px)}
.sheet-cat{font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.02em}
.sheet-body h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.sheet-body p{font-size:15px;color:var(--muted);margin-top:7px;line-height:1.5}
.sheet-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.sheet-meta span{font-size:13px;font-weight:700;color:var(--teal-d);
  background:rgba(14,100,114,.10);border-radius:var(--r-pill);padding:7px 13px}
.sheet-fx{font-size:14px;color:var(--muted);line-height:1.5;margin-top:11px;
  border-left:3px solid rgba(14,100,114,.28);padding-left:11px}
.sheet-go{display:block;width:100%;margin-top:18px;padding:17px;border:0;border-radius:var(--r-sm);
  background:var(--teal);color:#fff;font-size:17px;font-weight:800;cursor:pointer}
.sheet-back{display:block;width:100%;margin-top:9px;padding:14px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer}


/* ── 로그인 화면 ──
   전체를 덮는다 — 로그인 전에는 다른 화면을 만질 수 없다.
   유리 카드·색·글자는 전부 기존 토큰. 새 색 금지 규칙 그대로. */
.auth{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(242,247,249,.6);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5)}
.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(--teal);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:12px;left:12px;z-index:2;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(10,40,50,.55);color:#fff;font-family:inherit}
.sheet-tabs button.on{background:var(--glass-hi);color:var(--teal-d)}
.anatomy{height:46dvh;overflow-y:auto;background:#F0F4F5;border-radius:26px 26px 0 0;
  padding:64px 18px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scene{background:#fff;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(--teal-d)}
.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}