/* cutpro — 디자인 토큰. **여기가 유일한 정의다.**
   예전에는 spec/design-tokens.css 에 같은 값을 복제하고 주석으로 "함께 고친다" 고 적어
   뒀는데, 그건 규칙이 아니라 바람이었다 — `--s-ink-4` 가 실제로 갈라져 있었다
   (E16 이 이쪽만 고쳤다). 복제본은 지웠고 `test_design_contract` 가 정의가 한 곳인지 검사한다.
   docs/design-plan.md D01 참고. */

/* ── 화면 전환 (R7 · design-plan M01) ────────────────────────────────────────
   소재 → 편집 → 결과물은 **한 작업**인데 페이지가 바뀔 때마다 화면이 한 번 죽는다.
   그러면 사용자는 매번 '어디까지 했지' 를 다시 짓는다 (G13).

   **라우팅은 안 바꾼다.** 지금의 다중 문서 구조 그대로이고, 브라우저가 같은 출처의 문서
   사이를 교차 전환으로 잇는다 (cross-document view transition). 지원 안 하는 브라우저는
   예전처럼 그냥 넘어간다 — 폴백을 따로 쓸 필요가 없는 것이 이 방식의 값이다.

   상단 크롬은 **자리에 남는다** (`view-transition-name`). 내비까지 같이 페이드되면
   '다른 앱에 왔다' 로 읽히는데 실제로는 같은 앱의 다른 화면이다. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--dur-2)}
::view-transition-old(root),::view-transition-new(root){animation-timing-function:var(--ease)}

:root {
  color-scheme: dark;

  /* ── 표면 램프 — 본 화면과 스튜디오가 **하나의 계단**을 나눠 쓴다.
     예전엔 --panel*(본 화면)과 --s-*(편집기)가 다른 회색 계열이라, 편집기에 들어가면
     다른 앱에 온 것 같았다 (G11). 계단은 여섯이고 아래 별칭들이 그 위에 얹힌다.

     **값은 Higgsfield 의 표면과 같은 계열이다** (2026-09-21). 우리 램프는 순중성
     회색(#0A0A0B…#2C2C2E)이었는데, 소재를 만드는 도구와 나란히 두면 우리 쪽만
     탁하게 보인다 — 순중성 검정은 화면에서 '까맣다' 가 아니라 '색이 빠졌다' 로 읽힌다.
     실측한 저쪽 토큰(surface-tertiary #0F1113 · page-primary #131517 · section #18191C ·
     surface-primary #1C1E20 · secondary #23262A · hover #2A2D32)을 우리 여섯 계단에
     그대로 맞췄다. 파랑이 R 보다 4 높은 **차가운 중성**이고, 그래서 위에 얹는 주황이
     더 형광으로 읽힌다 (보색 대비 — 색을 바꾼 것의 절반은 배경이 한다). */
  --surface-0:#0F1113; --surface-1:#131517; --surface-2:#18191C;
  --surface-3:#1C1E20; --surface-4:#23262A; --surface-5:#2A2D32;
  --line:#292C31; --line-2:#383C42;

  /* ── 잉크 — **모든 잉크 × 모든 표면이 4.5:1 을 넘는다** (test_design_contract 가 계산한다).
     --ink-3 은 #7A7A80 이었고 가장 밝은 표면에서 3.27:1 이었다. 어두운 배경 위의 흐린
     회색은 '보인다' 고 착각하기 쉽고, 눈으로는 못 잰다 (E16 에서 --s-ink-4 로 한 번 겪었다). */
  /* --ink-1 은 편집기가 필요로 하던 계단이다 (`--s-ink-2:#C7C7CC` 로 따로 살던 값).
     밀도 높은 작업면에서 보조 글자를 --ink-2(A1) 로 내리면 읽기가 나빠진다 —
     계단을 하나 늘려 두 세계가 **같은 어휘**를 쓰게 한다 (V05). */
  --ink:#F5F5F7; --ink-1:#C7C7CC; --ink-2:#A1A1A6; --ink-3:#94949A;

  /* ── 액센트 — **--hot 만 헥스로 고정한다.** 렌더러가 자막에 굽는 강조색과 같은 값이어야
     하고(의도된 커플링 · CLAUDE.md), spec/templates.json 의 첫 강조색과 대조한다.
     어두운 단계는 여기서 파생한다: L 을 내릴 때 **채도도 같이 내린다** — 채도를 그대로
     두면 색역을 벗어나 빨갛게 클리핑된다 (실측: oklch(from --hot 45% c h) → #8F3700).

     **형광 노랑으로 옮겼다** (2026-09-22). 세 걸음이었고 가운데가 틀린 걸음이다:
       #FF9E2C 호박 (L 78 · C .164 · H 64)
       #FF6B1A 진한 주황 (L 70 · C .198 · H 43)   ← 틀린 방향
       #F2E55C 형광 노랑 (L 90.7 · C .156 · H 104)

     **화면의 주황은 형광이 될 수 없다.** 형광으로 읽히는 것은 채도만이 아니라 채도 ×
     **밝기**인데(빛을 내는 것처럼 보여야 한다), sRGB 는 주황 쪽 색역이 L≈70 에서 끝난다 —
     더 밝히면 살구색이 되고 채도를 올려도 L 이 안 따라온다. 그래서 채도를 끝까지 올린
     #FF6B1A 도 '진한 주황' 이었지 형광이 아니었다. 형광펜·안전조끼가 전부 노랑~연두인
     것과 같은 이유이고, 그쪽이 sRGB 에서 가장 밝은 모서리(L 92~95)다.

     **양옆이 다 막혀 있다.** 더 연두로 가면(#E8FF3D L 95) 힉스필드 브랜드색 #D1FE17 과
     5° 라 남의 색이 되고, 밝기를 내리면(#FFD60A L 88.5) 우리 노랑 스와치 #FFD24A 와 5° 라
     같은 색이 둘이 된다. 그래서 **톤을 낮출 때도 밝기가 아니라 채도를 내린다** —
     쨍한 느낌을 만드는 것이 채도이고, 밝기를 내리는 순간 주황을 떠난 이유가 사라진다
     (#FFE81F C .188 → #F2E55C C .156, 밝기는 92.1 → 90.7 로 거의 그대로).
     지금 값은 노랑에서 14° · 연두에서 24° · 힉스필드에서 18° 로 셋 다에서 떨어져 있다.

     배경으로 쓰는 자리(버튼·배지)는 전부 아주 어두운 글자를 얹으므로 대비는 6.8 → 14.5:1 로
     좋아진다. 자막 강조색으로서도 노랑은 쇼츠의 표준 강조색이라 잃는 것이 없다. */
  --hot:#F2E55C;
  --hot-dim:   oklch(from var(--hot)  48% calc(c * .55) h);
  --hot-ghost: oklch(from var(--hot)  22% calc(c * .25) h);
  --cool:#3FD3C6;
  --cool-dim:  oklch(from var(--cool) 45% calc(c * .55) h);
  --bad:#FF453A;

  /* 점수 히트맵 — 액센트와 다른 축이다 (낮음→높음의 순서가 뜻이다) */
  --h0:#14262B; --h1:#1B4C54; --h2:#2C8079; --h3:#7FAE5C; --h4:#D4A93A; --h5:#F2E55C;
  /* 히트맵 칸을 **글자**로 쓸 때의 h2 (R7-15) — 칸 색 #2C8079 는 카드 위 글자로 3.74:1 이라 점수 '약함' 이 안 읽혔다.
     같은 색상·채도에서 밝기만 올려 모든 표면 위 4.5:1 을 넘긴다 (test_design_contract 가 계산한다). */
  --h2-ink:#3FA89E;

  /* 제목 글꼴 = 우리가 쇼츠에 굽는 기본 자막의 글꼴 (bold-stroke · Pretendard Black · SV2). `--hot` 과 강조색을
     묶은 것과 같은 커플링이다 — 사이트의 제목과 결과물의 글자가 같은 얼굴이어야 한 회사의 것으로 읽힌다.
     기본 템플릿의 글꼴이 바뀌면 test_site_voice_contract 가 여기도 볼지 묻는다. 'Pretendard Web' 은
     assets/webfonts 의 조각 묶음이고 자막 미리보기의 'Pretendard'(OTF)와 다른 이름이다. */
  --disp:'Pretendard Web','Pretendard Web Fallback',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  /* 본문도 같은 묶음이다 (SV3). 예전엔 OS 글꼴이라 맥은 Apple SD Gothic Neo, 윈도우는 맑은 고딕으로 **기기마다 다른
     사이트**였다 — 맥에서는 바꿔도 차이가 거의 안 보이고 이득은 윈도우·안드로이드에서 난다. 굵기는 400·500·600·700·900
     다섯만 쓴다 — 가변 글꼴이라 사이 값도 그려지지만 굵기도 계단이다: 650·750·800 이 섞이면 위계가 흐려진다
     (test_site_voice_contract). */
  --body:'Pretendard Web','Pretendard Web Fallback',-apple-system,BlinkMacSystemFont,'SF Pro Text','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Apple SD Gothic Neo','Noto Sans KR',monospace;

  /* ── 여백 — 값을 눈으로 고르지 않는다. 예전엔 padding·gap 이 **73종**(1~26px 의 거의 모든
     정수)이었고, 그래서 같은 종류의 상자가 화면마다 다른 여백을 가졌다.
     48px 이하는 이 계단만 쓰고, 그 위는 리듬이 아니라 레이아웃 치수라 8의 배수면 된다. */
  --sp-2:2px;  --sp-4:4px;  --sp-6:6px;  --sp-8:8px;  --sp-10:10px; --sp-12:12px;
  --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px;

  /* ── 글자 크기 — 28종(8.5~38px, 0.5px 단위)이었다. 0.5px 은 위계가 아니라 사고다.
     **아래가 10px 이다**: 그보다 작으면 한글 자소가 뭉친다 (라틴은 버티지만 한글은 아니다).
     기획서엔 11px 이라고 적었는데 실측해 보니 10px 이 두 번째로 많이 쓰이는 크기였고
     (39곳), 이 화면은 원래 빽빽한 프로 앱이다 — 근거는 '자소 뭉침' 이므로 10 이 맞다.
     작은 쪽은 1px 씩(빽빽한 UI 라 위계가 촘촘하다), 큰 쪽은 성기게. */
  /* **단위는 rem 이다** (R7-05). 사용자가 브라우저 기본 글꼴을 키우면(저시력 사용자의 흔한 설정) 본문이 따라 커져야 한다 —
     px 이던 동안 h1(rem)만 커져 위계가 깨졌다. 값은 기본 16px 기준으로 예전 px 과 **정확히 같다**(전부 1/16 의 배수라
     반올림이 없다): 11 · 12 · 13 · 14 · 15 · 16 · 18 · 21 · 25 · 30 · 36px. 그래서 기본 설정의 화면은 한 픽셀도 안 바뀐다. */
  --t-xs:.6875rem; --t-sm:.75rem;   --t-base:.8125rem; --t-md:.875rem; --t-lg:.9375rem;
  --t-xl:1rem;     --t-2xl:1.125rem; --t-3xl:1.3125rem; --t-4xl:1.5625rem; --t-5xl:1.875rem; --t-6xl:2.25rem;
  /* 줄간격은 크기와 짝이다 — 큰 글자는 좁게, 본문은 넓게 */
  --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.6;

  /* ── 본문 기둥 — **하나다** (L00). 기둥이 다섯 종(1140·1180·1280·1320·1400)이었고
     여백이 여섯 종(24·40·72·80·130·150)이었다. 화면을 옮길 때마다 본문이 좌우로 튀고,
     내비 로고는 어느 화면에서도 본문과 안 맞았다. 기둥은 `--col` 하나이고 화면 래퍼도
     내비도 같은 값을 쓴다 — 내비는 자리(sticky·전체 폭 배경)가 달라서 max-width 대신
     **같은 결과를 내는 padding** 으로 맞춘다(§L00). */
  --col:1280px; --gut:20px;


  /* ── 조작의 높이 — **padding 이 아니라 높이가 정한다** (L00). `.btn` 이
     `padding:8px 16px;font-size:var(--t-md)` 라 높이가 글자에서 나왔고, 그래서 같은 행의
     select(브라우저 기본 line-height)와 1~4px 씩 어긋났다. 한 화면에 3~6종의 높이가
     섰다 (35·37·39·43 …). 값은 지금 가장 많이 쓰이는 높이에서 왔다 — 이 화면은 원래
     빽빽한 프로 앱이고, 근거 없이 키우면 한 화면에 들어가던 것이 안 들어간다. */
  /* 높이는 기하라 px 이 바닥이다. 다만 글자 계단이 rem 이 된 뒤(R7-05) 기본 글꼴을 키운 사람에게 단추가 글자를 자르지 않게
     **같은 비율의 rem 과 큰 쪽**을 고른다 — 기본 16px 에서는 둘이 같은 값이라 그림이 그대로이고, 기본 글꼴을 작게 한 사람에게도
     누르는 자리가 줄지 않는다. */
  --ctl-sm:max(26px,1.625rem);  /* 카드 안 인라인 조작 */
  --ctl-md:max(30px,1.875rem);  /* 보조 — 작은 버튼·셀렉트 */
  --ctl-lg:max(34px,2.125rem);  /* 밀집 툴바 */
  --ctl-xl:max(40px,2.5rem);    /* 기본 — 페이지의 조작 줄 */
  --ctl-hero:max(48px,3rem);    /* 히어로 CTA */

  /* ── 라운드 — 곡률은 **상자 크기가 아니라 역할**이 정한다 (24종 → 6단계) */
  --r-xs:2px; --r-sm:4px; --r:8px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* ── 아이콘 — 크기 셋 · 획 1.8 하나 (R5-22). 편집기 안쪽의 미세 조정은 그 기하의 몫이다 */
  --ic-sm:14px; --ic-md:16px; --ic-lg:20px;

  /* ── 깊이 — 어두운 UI 에서 그림자는 거의 안 보인다. 주 깊이 수단은 경계선(--hair)이고
     그림자는 뜬 것(팝오버·시트)에만 쓴다. **링(0 0 0 Npx)과 글로는 다른 축이다** —
     링은 테두리이고 글로는 강조다. 한 스케일에 섞으면 넷 다 뜻을 잃는다. */
  --e-1:0 8px 24px rgba(0,0,0,.45);
  --e-2:0 14px 36px rgba(0,0,0,.5);
  --e-3:0 20px 60px rgba(0,0,0,.55);
  --e-4:0 36px 100px rgba(0,0,0,.6);
  --lift:var(--e-2);                   /* 옛 이름 — hover 부양 */

  /* ── 모션 — **같은 동작은 같은 속도로 움직인다** (G15). 지속시간이 27종·이징이 6종이었다.
     0.14 초와 0.15 초는 다른 뜻이 아니고, 눈은 그 차이를 '들쭉날쭉' 으로만 읽는다.
     1초 이상은 계단에 넣지 않는다 — 그건 상태 변화가 아니라 **앰비언트 루프**(맥박·흐름)이고
     다른 축이다 (D02 에서 링·글로·깊이를 갈랐던 것과 같은 이유). */
  --dur-1:.12s;   /* 즉각 — 색·테두리 */
  --dur-2:.18s;   /* 기본 — 상태 변화 */
  --dur-3:.28s;   /* 이동 — 부양·펼침 */
  --dur-4:.45s;   /* 열림·닫힘 */
  --dur-5:.8s;    /* 등장 (스크롤 진입) */
  --ease:cubic-bezier(.2,.7,.2,1);       /* 표준 — 빨리 나가고 부드럽게 선다 */
  --ease-inout:cubic-bezier(.4,0,.2,1);  /* 양끝이 분명한 이동 */
  --ease-back:cubic-bezier(.3,1.4,.5,1); /* 살짝 튕김 — 강조 하나 · 영상 안 연출(CTA·텍스트 등장)에만 */
  --ease-exit:cubic-bezier(.4,0,1,1);    /* 나감 — 가속하며 떠난다 (감속 --ease 로 나가면 멈춘 것처럼 보인다 · R6-07) */
  --dur-loop:1.2s;      /* 루프 — '일하는 중' 맥박 하나 (R6-08) */
  --dur-loop-slow:1.6s; /* 느린 루프 — 스캔·골격 (R6-08·R6-10) */


  /* ── 꺼진 것 — **한 값이다.** 예전엔 `:disabled` 가 12곳에 흩어져 opacity 가 다섯 값
     (.3 · .4 · .42 · .45)이었고 `cursor:not-allowed` 는 셋에만 있었다. 같은 '못 누른다' 가
     화면마다 다른 흐림으로 보이면 눈은 그걸 '어떤 건 더 못 누른다' 로 읽는다.
     .3 은 어두운 배경에서 글자가 거의 사라져 '없는 버튼' 처럼 보인다 — 못 누르는 것과
     없는 것은 다르다. --btn 의 값이었던 .45 로 맞춘다. */
  --o-off:.45;

  /* ── 겹침 — 지역 스택(0~5)은 컴포넌트 안의 일이라 숫자로 둔다.
     화면 전체를 덮는 층만 이름을 가진다. 새 층이 필요하면 **이름을 추가**한다. */
  --z-sticky:10; --z-nav:20; --z-pop:30; --z-sheet:40; --z-toast:50;

  --glass:rgba(19,21,23,.76);          /* 프로스트 크롬 */
  --hair:rgba(255,255,255,.08);        /* 유리 위 헤어라인 */
  --hair-2:rgba(255,255,255,.14);
  --fill:rgba(255,255,255,.06);        /* 반투명 버튼·pill 필 */
  --fill-2:rgba(255,255,255,.12);

  /* ── 옛 이름 — 셀렉터 1,380개가 이미 쓰고 있다. 램프 위의 **별칭일 뿐**이고,
     V05 에서 이 블록이 사라진다. 지금 한 번에 이름을 바꾸면 무엇이 깨졌는지 알 수 없다. */
  --void:var(--surface-0); --panel:var(--surface-2);
  --panel-2:var(--surface-3); --panel-3:var(--surface-5);
  /* 스튜디오 램프(`--s-*`)는 없앴다 (V05) — D01 이 값을 이미 같게 만들어
     별칭만 남아 있었고, 별칭이 남아 있는 한 '편집기는 다른 세계' 라는
     어휘가 계속 재생산된다. 편집기만 필요하던 계단은 `--ink-1` 이다. */
}

/* 좁은 폭에서 여백을 줄이는 것도 **한 곳**이다 — 화면마다 따로 줄이면 내비와 본문이 또 갈라진다 */
@media(max-width:720px){:root{--gut:16px}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 배경 그림은 **한 번만** 그린다 (W8 · 2026-10-24). body 배경은 캔버스로 퍼지고 그 위치 기준은 html 상자인데,
   본문이 화면보다 짧으면(로그인·결제·빈 목록) html 상자가 짧아 방사형 그라데이션이 그 높이마다 다시 시작해
   가로 선처럼 끊겨 보였다 (R2-20 · 레이아웃 화면에서 먼저 잡았다). 그림 층만 반복을 끄고(색 층은 그대로 캔버스를 채운다)
   html 이 늘 화면 높이 이상이 되게 한다 */
html{min-height:100%}
body{background:radial-gradient(1100px 480px at 50% -12%,rgba(242,229,92,.075),transparent 62%) no-repeat,var(--void);color:var(--ink);font-family:var(--body);font-size:var(--t-lg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cool);text-decoration:none}
button{font-family:var(--body);cursor:pointer}
/* 단추는 글자를 물려받는다 (R5-20) — 브라우저 기본 13.333px 은 계단 밖이다. 크기를 정한 단추(.btn·.fchip …)는
   자기 규칙이 이긴다. 편집기는 그 기본값 위에 기하를 쌓아 두었으므로 이번 판에서는 손대지 않는다. */
:where(body:not(.studio-body)) button{font:inherit;line-height:normal}
/* 꺼진 것은 한 규칙으로 꺼진다 (D04a). 흩어져 있던 12개를 여기로 모았다 — 버튼만이
   아니라 폼 컨트롤도 같은 규칙이다(같은 '못 만진다' 이므로). 값은 --o-off 하나다. */
button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled,
[aria-disabled="true"]{opacity:var(--o-off);cursor:not-allowed}
:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:var(--r-sm)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ── 앱 크롬 — 프로스트 글래스 (apple.com 내비와 같은 재질) ── */
.chrome{view-transition-name:chrome}
/* 내비의 안쪽 내용은 **본문과 같은 선**에서 시작한다 (L00). 배경·경계선은 전체 폭이라
   max-width 로는 그 둘을 같이 못 한다 — 기둥과 같은 결과를 내는 padding 으로 맞춘다.
   1440px 에서 80px, 좁아지면 `--gut` 으로 수렴한다. */
.chrome{display:flex;align-items:center;gap:12px;height:max(52px,3.25rem);
  padding-inline:max(var(--gut),calc((100% - var(--col))/2));
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:var(--z-nav)}
.logo{display:inline-flex;align-items:center;gap:var(--sp-8);flex-shrink:0;font-family:var(--disp);font-weight:900;font-size:var(--t-4xl);line-height:1;letter-spacing:-.04em;color:var(--ink);white-space:nowrap;text-decoration:none}
.brand-symbol{display:block;width:32px;height:32px;flex:none;object-fit:contain}
.brand-name{display:block}
.crumb{font-size:var(--t-md);color:var(--ink-2);display:flex;align-items:center;gap:8px;min-width:0}
.crumb b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.chrome .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
.userbox{display:flex;gap:6px;align-items:center;margin-left:6px}
/* 접는 줄은 앱에 한 모양이다 (P06) — 랜딩 FAQ(+/− 글자) · 요금(브라우저 기본 ▶) · 안내(셰브런)가 세 모양이었다.
   표식은 그린 더하기이고 열리면 세로 획이 접혀 빼기가 된다. 열림은 높이로 펼친다(::details-content ·
   지원하지 않는 브라우저는 그냥 열린다). 모션을 줄인 사람에게는 펼침도 회전도 없다. */
details.acc{interpolate-size:allow-keywords}
details.acc>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);cursor:pointer;list-style:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"";flex:none;width:14px;height:14px;color:var(--ink-2);
  background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat;
  transition:background-size var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
details.acc[open]>summary::after{background-size:100% 1.6px,1.6px 0;transform:rotate(90deg)}
details.acc>summary:hover::after{color:var(--ink)}
details.acc::details-content{block-size:0;overflow:clip;
  transition:block-size var(--dur-3) var(--ease),content-visibility var(--dur-3) linear allow-discrete}
details.acc[open]::details-content{block-size:auto}
/* 글자 옆 이어가기 표식(→ ↗ 대신) — 글줄 안에서 글자 높이를 따른다 (P22) */
.ic.ic-go{display:inline-block;width:var(--ic-sm);height:var(--ic-sm);vertical-align:-.14em;margin-left:.3em;flex:none}
/* 공개 화면의 본문 속 링크는 한 모양 (P16) — 같은 '글 속 링크' 가 화면마다 청록(전역 a)·노랑(랜딩)·흰 밑줄(요금)이었다.
   글자색은 본문과 같고 밑줄이 링크를 말하며, 올리면 포인트 색이다. 단추 모양 링크는 제외. */
:is(.doc,.landing .faq,.help-wrap,.pricing-wrap,.auth) :is(p,li,dd,.a) a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px;border-bottom:0;transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease)}
:is(.doc,.landing .faq,.help-wrap,.pricing-wrap,.auth) :is(p,li,dd,.a) a:not(.btn):hover{color:var(--hot);text-decoration-color:currentColor}
/* 720px 아래는 내비가 둘째 줄로 내려가 오른쪽 상자 밑으로 스크롤할 것이 없다 — 고정용 바탕(760px 규칙)이 크롬 위의 어두운 사각형으로만 남았다 (P11)
   아래쪽 760px 규칙보다 앞에 있어서 html 을 붙여 이긴다 — 그 규칙의 본문은 크롬 담당 작업의 것이라 건드리지 않는다. */
@media (max-width:720px){html .chrome>.right{position:static;background:none}
  /* 둘째 줄 내비의 알약은 조작 계단 위에 — 글자 줄 높이로 35px 이 되어 켜진 '요금' 이 동그라미처럼 줄보다 컸다 (P19) */
  .chrome .nav .nav-main{height:var(--ctl-sm);padding-block:0}}
/* 내비 펼침 메뉴의 키보드 표식 (P23) — 배경만 바뀌고 outline:0 이라 탭으로 옮겨도 어디인지 안 보였다 */
.chrome .nav-group .nav-menu a:focus-visible,.chrome .nav-group>.nav-main:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.chrome .nav{display:flex;gap:2px;margin-left:6px;height:100%;align-items:center}
@media (width >= 1100px){.chrome .nav{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}.crumb b{max-width:24vw}}
.nav-group{position:relative;height:100%;display:flex;align-items:center}
.chrome .nav-main{display:flex;align-items:center;gap:4px;font-size:var(--t-base);color:var(--ink-2);padding:6px 12px;border-radius:1000px;border:1px solid transparent;white-space:nowrap;transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.chrome .nav-main i{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform var(--dur-2) var(--ease)}
/* 누른 것은 **시그니처 색으로** 말한다. 예전엔 hover 가 --ink, 지금 화면(.on)이
   --ink + 회색 필이라 둘 다 '조금 밝은 회색' 이었다 — 어디 있는지가 밝기로만 적혀
   있으면 훑어서는 안 읽힌다. 색은 한 곳(--hot)에서 오므로 브랜드 색을 바꾸면
   누름 상태도 따라온다. */
.chrome .nav-main:hover,.nav-group:focus-within>.nav-main{color:var(--hot);background:var(--fill)}
.chrome .nav-main:active{background:var(--hot-ghost);border-color:var(--hot-dim)}
.chrome .nav-main.on{color:var(--hot);background:var(--hot-ghost);border-color:var(--hot-dim)}
.chrome .nav a.locked{color:var(--ink-3);opacity:.8}
.nav-menu{position:absolute;left:50%;top:calc(100% - 1px);width:286px;padding:10px;background:rgba(24,25,28,.96);border:1px solid var(--hair-2);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.55);backdrop-filter:saturate(160%) blur(22px);-webkit-backdrop-filter:saturate(160%) blur(22px);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-7px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.nav-menu:before{content:'';position:absolute;left:0;right:0;top:-10px;height:12px}
.nav-group:hover>.nav-menu,.nav-group.open>.nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.nav-group:hover>.nav-main i,.nav-group.open>.nav-main i{transform:rotate(225deg) translate(-1px,-1px)}
.nav-menu-label{padding:4px 8px 8px;font:var(--t-xs) var(--mono);letter-spacing:.14em;color:var(--hot)}
.chrome .nav-menu a{display:flex;flex-direction:column;gap:0px;padding:8px 10px;border-radius:8px;color:var(--ink-2)}
/* 중메뉴도 같은 어휘다 — 고른 것(.on)과 짚은 것(hover)이 둘 다 시그니처 색이고,
   설명 줄(span)은 --ink-3 그대로다 (제목만 색이 붙어야 훑을 때 이름이 먼저 읽힌다). */
.chrome .nav-menu a:hover,.chrome .nav-menu a:focus-visible{background:var(--fill-2);color:var(--hot);outline:2px solid transparent;outline-offset:-2px}
.chrome .nav-menu a.on{background:var(--hot-ghost);color:var(--hot)}
.nav-menu a b{font-size:var(--t-base);font-weight:600;color:inherit}.nav-menu a span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
@media(max-width:900px){.chrome{gap:8px}.crumb{display:none}.chrome .nav{overflow-x:auto;overflow-y:visible;scrollbar-width:none}.chrome .nav::-webkit-scrollbar{display:none}.chrome .nav-main{padding-left:8px;padding-right:9px}.nav-menu{position:fixed;left:12px;right:12px;top:51px;width:auto;transform:translateY(-7px)}.nav-group:hover>.nav-menu,.nav-group.open>.nav-menu{transform:translateY(0)}}
/* 내비 끝 흐림 (A18) — 표식은 app.watchNavMore. 열린 중메뉴가 있으면 흐림을 뺀다: mask 는 자손 전부를 같이 가린다 */
.chrome .nav{--nav-fl:0px;--nav-fr:0px}
.chrome .nav[data-more~="l"]{--nav-fl:28px}
.chrome .nav[data-more~="r"]{--nav-fr:28px}
.chrome .nav[data-more]:not(:has(.nav-group:hover,.nav-group:focus-within)){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--nav-fl),#000 calc(100% - var(--nav-fr)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--nav-fl),#000 calc(100% - var(--nav-fr)),transparent)}
@media(max-width:620px){.chrome .right .pill:not(.live):not(.bad),.chrome #logout:not(.usermenu>#logout){display:none}.logo{flex:none}.nav-menu{grid-template-columns:1fr 1fr}.nav-menu-label{grid-column:1/-1}.nav-group:hover>.nav-menu,.nav-group.open>.nav-menu{display:grid}.nav-menu a span{display:none}}
.state i{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.state.ok i{background:var(--cool)}
.state.hot i{background:var(--hot);animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}
.state.bad i{background:var(--bad)}
/* '일하는 중' 맥박은 하나다 (R6-08) — 예전엔 `pulse` 가 두 번 정의돼(1→.25→1 · .25→1→.25) 뒤의 것이 전역으로
   이겼고 주기가 1.1·1.2·1.4·1.6초 다섯 가지였다. 모션 줄이기의 맥박(busy-still)은 아래 전역 규칙 옆이다 */
@keyframes busy-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 버튼의 높이는 **계단이 정한다** (L00). 세로 padding 을 쓰면 글자 크기를 1px 만
   바꿔도 높이가 달라지고, 같은 행의 select 와 어긋난다. 가로 padding 만 남긴다. */
.btn{font-size:var(--t-md);font-weight:500;height:var(--ctl-xl);padding:0 16px;border-radius:1000px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  border:1px solid var(--hair);background:var(--fill);color:var(--ink)}
.btn:hover{background:var(--fill-2);border-color:var(--hair-2)}
.btn.primary{background:var(--hot);border-color:var(--hot);color:#140C02;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{height:var(--ctl-md);padding:0 12px;font-size:var(--t-base)}
/* 한 행의 조작은 같은 높이로 선다 (R4). 행이 `--ctl` 을 정하고 안의 것들이 그것을 쓴다 —
   높이를 컨트롤마다 적으면 행을 옮길 때마다 다시 어긋난다. */
.ctl-row{display:flex;align-items:center;gap:var(--sp-8);--ctl:var(--ctl-xl)}
.ctl-row.sm{--ctl:var(--ctl-md)}
.ctl-row>.btn,.ctl-row>select,.ctl-row>input,.ctl-row>button,.ctl-row>label>select,
.ctl-row>.field>select,.ctl-row>.field>input{height:var(--ctl);padding-block:0}

/* 본문 래퍼가 컨테이너다 (D05). 안의 블록은 뷰포트가 아니라 **자기가 놓인 자리의**
   폭을 본다 — 사이드바가 생기거나 블록을 다른 화면으로 옮겨도 반응형이 따라온다.
   `inline-size` 는 가로만 가두므로 높이는 그대로다. */
.wrap{max-width:calc(var(--col) + var(--gut)*2);margin:0 auto;
  padding:24px var(--gut) 88px;container-type:inline-size}
h1,h2,h3,h4,h5{font-family:var(--disp);letter-spacing:-.022em;margin:0;font-weight:700}
.sec-h{margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--ink-3)}
.err{background:rgba(255,69,58,.1);border:1px solid rgba(255,69,58,.32);color:#FFB4AB;padding:10px 16px;
  border-radius:12px;font-size:var(--t-md);margin:12px 0}
/* 빈 상태 — 그림이 있으면 점선 상자를 걷는다. 상자 안의 상자는 두 겹으로 읽힌다.
   그림은 A1 의 네 장 한 세트이고 폭을 캡해서 '삽화' 로 남는다 (배경이 되면 글자를 먹는다). */
.empty.has-art{border:0;padding:40px 20px;display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center}
/* 가장자리를 녹인다 — 생성 그림의 바탕이 페이지 바탕과 정확히 같지 않아 그냥 놓으면
   사각 상자로 읽힌다 (A1 에서 pad 했을 때와 같은 이음매다). */
.empty-art{width:100%;max-width:260px;height:auto;opacity:.85;margin-bottom:8px;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.empty.has-art b{font-size:var(--t-lg);color:var(--ink)}
.empty.has-art p{margin:0;max-width:44ch;line-height:1.7}
.empty.has-art .btn{margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  .empty-art{animation:empty-in var(--dur-3) var(--ease) both}
}
@keyframes empty-in{from{opacity:0;transform:translateY(6px)}to{opacity:.85;transform:none}}

.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:32px 20px;
  text-align:center;color:var(--ink-3);font-size:var(--t-md)}
.empty code{font-family:var(--mono);color:var(--hot);font-size:var(--t-base)}

/* ── 프로젝트 홈 ── */
.project-home{padding-top:34px}
  gap:40px;align-items:center;min-height:540px;padding:96px 40px 56px;margin-bottom:64px;overflow:hidden;
  border:1px solid var(--hair);border-radius:32px;background:
  linear-gradient(180deg,rgba(15,17,19,.2) 0%,rgba(15,17,19,.62) 62%,rgba(15,17,19,.86) 100%),
  url('/assets/hero-dark.jpg') center/cover no-repeat,
  #131315}
  background:linear-gradient(92deg,#FFC46E,var(--hot));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.project-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.project-section-head>div{display:flex;flex-direction:column;gap:3px}
.project-detail-label{display:flex;align-items:center;gap:12px;margin:56px 0 0px;padding-top:24px;border-top:1px solid var(--line)}
.project-detail-label span{font:var(--t-xs) var(--mono);letter-spacing:.14em;color:var(--hot)}.project-detail-label b{font-size:var(--t-base);color:var(--ink-2)}
.project-empty{padding:54px 20px}.project-empty>b{display:inline-block;color:var(--ink);font-size:var(--t-2xl);margin-bottom:5px}
@media(max-width:520px){.project-home{padding-top:18px}}

/* ── 원본 목록 ── */
/* 프로젝트 목록은 **띠의 스택**이다 (site-relaunch R1 · design-plan V01).
   격자에서는 1시간 원본과 20초 컷이 같은 크기의 상자였다 — 스캔 방향을 세로 하나로 정리하고,
   가로축을 시간에 내준다. 컨테이너 질의라 어디에 놓아도 자기 폭을 보고 접힌다 (D05 의 방향). */
.vlist{display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.vlist .vcard{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center;
  padding:12px 16px 12px 12px;border-radius:16px;width:100%}
.vlist .vcover{width:132px;aspect-ratio:16/9;border-radius:8px;flex:none}
.vlist .vcopy{padding:0;gap:6px;min-width:0}
.vlist .vcard h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlist .vcard:hover{transform:none;box-shadow:none;background:var(--panel-2)}
@container (max-width:520px){
  .vlist .vcard{grid-template-columns:84px 1fr;gap:10px}
  .vlist .vcover{width:84px}
}

/* 화면에는 안 보이고 스크린 리더에는 읽히는 이름표. A01 이 '이름 없는 컨트롤' 을 고쳤을 때
   부품을 안 만들어서, 라벨을 숨기려면 화면마다 다시 발명해야 했다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.catalog-urlbox,.project-urlbox{margin:0 0 16px;container-type:inline-size}

/* 각도를 보간하려면 타입을 선언해야 한다 (선언 없으면 0→360 이 '문자열' 이라 안 움직인다) */
@property --ub-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ub-spin{to{--ub-ang:360deg}}
@keyframes ub-run{to{offset-distance:100%}}

/* URL 붙여넣기 상자 (U4·U5·U6) — 부품 하나, 자리 셋 (히어로·프로젝트·카탈로그) */
.urlbox{--ub-gap:8px;display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:var(--ub-gap);position:relative;
  border:1px solid var(--line);border-radius:16px;padding:8px;background:var(--panel);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),min-height var(--dur-2) var(--ease)}
/* 자리는 DOM 순서가 정한다 (zone → 링크 목록 → 입력 → 단추 → 안내) — 행 번호를 박지 않는다. 입력과 그 안내 줄(.ub-ph)은
   `.ub-in` 한 칸 안에 겹친다 (예전엔 둘을 같은 격자 칸 번호로 겹쳤는데, 그 번호 때문에 비어 있는 목록 줄이 틈을 만들었다) */
.urlbox .ub-in{position:relative;display:grid;min-width:0}
.urlbox .ub-in>input,.urlbox .ub-in>.ub-ph{grid-area:1/1}
.urlbox>.ub-make{grid-column:2}
.urlbox>.urlbox-note{grid-column:1/-1}
/* ── 링크 목록 (app.urlBox · 2026-10-31 사용자 요청 "링크 하나 복붙하면 밑에 애니메이션으로 입력칸이 내려가는 방식") ──
   줄(li)은 격자 한 행(grid-template-rows)이 0fr → 1fr 로 **자라며** 들어오고, 안의 글자는 반 걸음 늦게 떠오른다 — 그래서 아래 입력칸이
   그만큼 미끄러져 내려온다. 측정·JS 높이 계산이 없다 (브라우저가 fr 사이를 보간한다). 빈 목록은 격자의 틈(row-gap)만큼 음수 여백으로
   없는 듯 서 있다가 첫 줄이 들어오는 순간 여백이 풀린다 — display:none 으로 치우면 들어올 때 틈이 한 번에 벌어진다.
   곡선은 사이트 표준(--ease · 빨리 나가고 부드럽게 선다) 하나이고 튕김은 없다 — 입력 폼의 모션은 조용해야 다음 붙여넣기를 방해하지 않는다.
   나갈 때는 가속하며(--ease-exit) 접힌다. 모션 줄이기에서는 전부 즉시다 (전역 규칙). */
.ub-stack{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;min-width:0;
  transition:margin var(--dur-3) var(--ease)}
.ub-stack:not(:has(.ub-link)){margin-bottom:calc(-1 * var(--ub-gap))}
.ub-link{display:grid;grid-template-rows:0fr;min-width:0;
  transition:grid-template-rows var(--dur-3) var(--ease)}
.ub-link.in{grid-template-rows:1fr}
.ub-link.out{grid-template-rows:0fr;transition:grid-template-rows var(--dur-2) var(--ease-exit)}
.ub-link-body{min-height:0;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:0 2px 6px 6px;opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-3) var(--ease) calc(var(--dur-1)/2),transform var(--dur-3) var(--ease) calc(var(--dur-1)/2)}
.ub-link.in .ub-link-body{opacity:1;transform:none}
.ub-link.out .ub-link-body{opacity:0;transform:translateY(-4px);transition:opacity var(--dur-1) var(--ease-exit),transform var(--dur-1) var(--ease-exit)}
.ub-link:last-child .ub-link-body{padding-bottom:0}
.ub-link-ic{display:inline-grid;place-items:center;width:44px;height:28px;color:var(--ink-3);border-radius:var(--r-xs);flex:none}
.ub-link-ic svg{width:20px;height:20px}
.ub-link-thumb{display:block;width:44px;height:26px;border-radius:var(--r-xs);background:var(--surface-4) var(--thumb,none) center/cover;
  opacity:0;transform:scale(.92);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.ub-link.has-thumb .ub-link-thumb{opacity:1;transform:none}
.ub-link-t{display:grid;min-width:0;line-height:1.3}
.ub-link-t b{font:600 var(--t-base) var(--body);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.ub-link-t small{font-size:var(--t-sm);color:var(--ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.ub-link-t small:empty{display:none}
.ub-link-s{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:var(--t-sm) var(--mono);color:var(--ink-2)}
.ub-link.bad .ub-link-s{font-family:var(--body);color:var(--bad);white-space:normal;min-width:0;max-width:40cqi}
.ub-link.bad .ub-link-s svg{width:16px;height:16px;flex:none}
.ub-link .ub-swap{animation:ub-swap var(--dur-3) var(--ease)}
@keyframes ub-swap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ub-link-x{display:inline-grid;place-items:center;width:var(--ctl-sm);height:var(--ctl-sm);border:0;border-radius:var(--r-full);background:transparent;
  color:var(--ink-3);cursor:pointer;padding:0}
.ub-link-x svg{width:14px;height:14px}
.ub-link-x:hover{background:var(--surface-4);color:var(--ink)}
.ub-link-x:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.ub-link.shake{animation:ub-shake var(--dur-3) var(--ease)}
@keyframes ub-shake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
/* 판정을 기다리는 자리 — 골격 한 줄 (스캔 루프와 같은 느린 박자) */
.ub-shim{display:inline-block;width:52px;height:8px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--line) 0%,var(--line-2) 50%,var(--line) 100%);background-size:200% 100%;
  animation:ub-shim var(--dur-loop-slow) linear infinite} /* motion:loop */
@keyframes ub-shim{to{background-position:-200% 0}}
/* 단추의 글자(영상 확인 → 영상 2개 확인)가 바뀔 때 한 번 숨을 쉰다 — 수가 바뀐 것을 눈이 놓치지 않게 · 작게 */
.ub-make.ub-pulse{animation:ub-pulse var(--dur-3) var(--ease)}
@keyframes ub-pulse{40%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.ub-shim{animation:none;background:var(--line-2)}}
.urlbox:focus-within{border-color:var(--hot-dim);box-shadow:0 0 0 4px color-mix(in oklch,var(--hot) 14%,transparent)}
/* 도는 불 — 첫인상에서 **여기가 시작 자리**라고 말하는 유일한 장치다.
   **각도가 아니라 둘레를 돈다.** 원뿔 그라디언트(conic)를 돌리면 각속도만 일정해서 가로로 긴
   상자에서는 긴 변을 휙 지나가고 좌우 끝에서 기어간다 — 일정하게 도는데 가속처럼 보인다
   (실측: 720×86 상자). `offset-path:border-box` 는 **테두리 길이**를 0→100% 로 걸으므로
   모서리에서도 빠르기가 같다.
   **꼬리는 긴 막대가 아니라 여러 조각이다.** 막대는 직선이라 굽은 모서리에서 테두리 밖으로
   뻗는다 (실측: 132px 막대가 왼쪽 위에서 상자 밖으로 나갔다). 짧은 조각 여섯을 같은 길 위에
   조금씩 뒤처지게 띄우면 꼬리가 모서리를 그대로 탄다. **지연은 음수다** — 더 음수일수록
   앞선다: 양수로 주면 그만큼 출발을 기다려서, 페이지를 연 직후 0.3초 동안 조각들이 출발점
   (왼쪽 위 모서리)에 겹쳐 선 채 한 점으로 반짝인다.
   빠르기는 **한 값이다** — 손이 닿으면 밝아지기만 한다. 속도가 바뀌면 상태가 변할 때마다
   눈이 다시 따라가야 해서 산만하다. 줄이기를 켠 사용자에게는 불을 그리지 않는다 (아래). */
.ub-fire{position:absolute;inset:-1px;border-radius:var(--r-lg);pointer-events:none}
/* **불은 랜딩 히어로에서만 돈다** (W8 · 2026-10-24). '여기가 시작 자리' 는 처음 온 사람에게 하는 말이다 —
   프로젝트 목록의 같은 상자에서는 이미 아는 사람에게 같은 말을 되풀이하며 카드 옆에서 계속 움직였고,
   시트가 열려 있어도 뒤에서 돌았다. 그리고 모션 줄이기에서는 멈춘 조각이 상자 모서리의 '•••' 점으로 남는데,
   멈춘 불은 아무 뜻도 없다 — 그때는 아예 안 그린다. */
.ub-fire{display:none}
@media (prefers-reduced-motion:no-preference){.landing .ub-fire{display:block}}
/* 조각은 **짧다** — 모서리 곡률(16px)보다 길면 직선이 굽이를 가로질러 테두리 밖으로 나간다 */
.ub-fire i{position:absolute;top:0;left:0;width:14px;height:3px;border-radius:var(--r-full);
  offset-path:border-box;offset-rotate:auto;offset-anchor:100% 50%;offset-distance:0%;
  background:linear-gradient(90deg,transparent,var(--hot));
  animation:ub-run 4.2s linear infinite} /* motion:ambient — 랜딩 입력 상자의 불, 화면 장식 루프 */
.ub-fire i:nth-child(1){animation-delay:-.4s;
  background:linear-gradient(90deg,transparent,var(--hot) 55%,
  color-mix(in oklch,#fff 55%,var(--hot)));
  filter:drop-shadow(0 0 8px color-mix(in oklch,var(--hot) 65%,transparent))}
/* 간격(0.03s ≈ 테두리 11px)이 조각 길이(14px)보다 짧아야 꼬리가 끊기지 않는다 */
.ub-fire i:nth-child(2){animation-delay:-.37s;opacity:.85;filter:blur(1px)}
.ub-fire i:nth-child(3){animation-delay:-.34s;opacity:.7;filter:blur(1px)}
.ub-fire i:nth-child(4){animation-delay:-.31s;opacity:.55;filter:blur(1px)}
.ub-fire i:nth-child(5){animation-delay:-.27s;opacity:.4;filter:blur(2px)}
.ub-fire i:nth-child(6){animation-delay:-.23s;opacity:.28;filter:blur(2px)}
.ub-fire i:nth-child(7){animation-delay:-.18s;opacity:.17;filter:blur(2px)}
.ub-fire i:nth-child(8){animation-delay:-.12s;opacity:.09;filter:blur(3px)}
.urlbox:focus-within .ub-fire i:nth-child(1),.urlbox:hover .ub-fire i:nth-child(1){
  filter:drop-shadow(0 0 11px color-mix(in oklch,var(--hot) 70%,transparent))}
/* 둘레 걷기를 모르는 브라우저에는 도는 테두리를 준다 — 각속도라 모서리에서 빨라지지만
   아무것도 안 도는 것보다 낫다. mask xor 로 테두리 두께만 남기고 각도(--ub-ang)를 돌린다
   (요소를 transform 으로 돌리면 mask 까지 같이 돌아 링이 찌그러진다). */
@supports not (offset-path:border-box){
  .ub-fire i{display:none}
  .ub-fire{inset:-1px;padding:2px;
    background:conic-gradient(from var(--ub-ang),
      transparent 0 52%,
      color-mix(in oklch,var(--hot) 16%,transparent) 80%,
      color-mix(in oklch,var(--hot) 65%,transparent) 92%,
      var(--hot) 97%,
      color-mix(in oklch,#fff 40%,var(--hot)) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:ub-spin 4.2s linear infinite}} /* motion:ambient */
/* 끌기 전에는 붙여넣기 바, 끄는 순간 놓는 자리. **쉬는 상태를 점선 상자로 두지 않는다** —
   그러면 붙여넣기(주 행동)와 놓기가 같은 무게로 싸우고, 히어로의 첫인상이 '업로드 폼' 이
   된다. 능력은 아래 한 줄(아이콘 + 문구)이 말하고, 자리는 필요할 때 열린다.
   **열릴 때는 실제로 열린다.** 한 줄 바(86px)에 글자 두 줄을 끼워 넣으면 그건 놓는 자리가
   아니라 문구가 바뀐 입력칸이다 — 파일을 든 손이 겨눌 과녁이 없다. 끄는 동안만 상자가
   자라고(min-height), 놓거나 나가면 원래 바로 돌아온다. */
.urlbox.is-drop{border-color:var(--hot);border-style:dashed;background:var(--hot-ghost);
  min-height:176px}
.urlbox.is-drop>*:not(.urlbox-drop){visibility:hidden}
.urlbox-drop{position:absolute;inset:0;display:none;align-content:center;justify-items:center;
  gap:8px;text-align:center;padding:0 16px;border-radius:16px}
.urlbox.is-drop .urlbox-drop{display:grid}
.ub-drop-ic{width:40px;height:40px;color:var(--hot);opacity:.9}
.urlbox-drop b{font-size:var(--t-2xl);color:var(--hot);letter-spacing:-.01em}
/* 확장자는 **안내이지 제목이 아니다** — 같은 무게로 두면 두 줄이 한 덩어리로 읽힌다 */
.urlbox-drop span{font:var(--t-base) var(--mono);color:var(--ink-3);letter-spacing:.02em}
/* 놓는 자리의 그림은 **겹친 카드 셋 + 배지**다 (2026-10-30 사용자 결정). 화살표 하나는 '파일 하나' 의 그림이라
   여러 개를 놓을 수 있다는 사실을 말하지 못했다. 개수와 무관하게 늘 같은 그림이다 — 상태가 하나라 설명할 것도 하나다. */
.ub-fan{position:relative;width:76px;height:44px;margin-bottom:2px}
.ub-fan i{position:absolute;left:14px;top:4px;width:48px;height:32px;border-radius:var(--r);border:1.5px solid var(--hot);background:var(--hot-ghost);display:block}
.ub-fan i:nth-child(1){transform:rotate(-10deg) translate(-14px,3px);opacity:.5}
.ub-fan i:nth-child(2){transform:rotate(-2deg);opacity:.8}
.ub-fan i:nth-child(3){transform:rotate(7deg) translate(12px,0);background:var(--hot);border-color:var(--hot)}
.ub-fan em{position:absolute;right:-2px;bottom:-4px;font:500 var(--t-xs) var(--mono);font-style:normal;color:#140C02;background:var(--hot);border-radius:var(--r-full);padding:0 6px;line-height:18px}
/* 쉬는 상태의 힌트 아이콘도 같은 어휘 — 겹친 두 장 + 화살표. '여러 개도' 는 점선 밑줄 한 낱말이고 올리면 설명(title)이 뜬다 */
.ub-ic-stack{width:18px}
.urlbox-hint .ub-many{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);border-bottom:1px dotted var(--ink-3);cursor:help}.ub-many .ub-ic{color:var(--ink-2)}

/* 놓는 자리가 **늘 열린** 상자 — `form.has-zone` (랜딩 히어로 · app.js ZONE_HTML · 2026-10-30 사용자 결정 "여러 파일을
   올릴 수 있는 박스로 안 읽힌다 · 익숙한 UI 로" → 2차 "링크·끌어다 놓기 둘 말고 하나로 · 설명 적게"). 점선 둘레는 **폼 전체**이고
   안은 둘뿐이다: 1행 겹친 파일 카드 + 문장 하나 · 2행 [링크 입력] [파일 선택] [영상 확인]. 첫 판처럼 파일 상자 아래 '또는 링크로' 와
   링크 줄을 따로 두면 입구가 둘로 읽힌다. 위 '한 줄 바' 의 규칙(쉬는 상태를 점선 상자로 두지 않는다)은 프로젝트·카탈로그의
   공용 상자에만 남는다 — 거기는 이미 아는 사람의 자리다. */
.urlbox.has-zone{--ub-gap:var(--sp-12);grid-template-columns:minmax(0,1fr) auto auto;cursor:pointer;
  border:1.5px dashed color-mix(in oklch,var(--hot) 55%,var(--line));background:color-mix(in oklch,var(--hot) 4%,transparent);
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.urlbox.has-zone:hover{border-color:var(--hot);background:var(--hot-ghost)}
.urlbox.has-zone .ub-zone{grid-column:1/-1}
.urlbox.has-zone .ub-in{grid-column:1;cursor:text}
.urlbox.has-zone .ub-pick{grid-column:2}
.urlbox.has-zone>.ub-make{grid-column:3}
.urlbox.has-zone .ub-link,.urlbox.has-zone .ub-link-x{cursor:default}
.urlbox.has-zone .ub-link-x{cursor:pointer}
.ub-zone{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:var(--sp-6);padding:var(--sp-16) var(--sp-16) var(--sp-4)}
.ub-zone .ub-fan{margin-bottom:var(--sp-4)}
.ub-zone-t,.ub-zone-d{font:700 var(--t-2xl) var(--body);color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.ub-zone-d{display:none;color:var(--hot)}
.urlbox .ub-pick{display:inline-flex;align-items:center;gap:var(--sp-6);white-space:nowrap}
.urlbox .ub-pick svg{width:18px;height:18px}
/* 끄는 동안 — 상자를 덮개로 바꾸지 않는다. 과녁이 이미 있으니 그 자리가 밝아지고 문장만 '여기에 놓으세요' 로 바뀐다 */
.urlbox.has-zone.is-drop{min-height:0;border-style:solid;border-color:var(--hot);background:var(--hot-ghost);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--hot) 18%,transparent) inset}
.urlbox.has-zone.is-drop>*{visibility:visible}
.urlbox.has-zone .urlbox-drop{display:none}
.urlbox.has-zone.is-drop .ub-zone-t{display:none}
.urlbox.has-zone.is-drop .ub-zone-d{display:block}
.urlbox.has-zone.is-drop .ub-fan i:nth-child(3){transform:rotate(7deg) translate(12px,-4px)}
.urlbox .ub-pick:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@container (max-width:420px){
  .urlbox.has-zone{grid-template-columns:1fr 1fr}
  .urlbox.has-zone .ub-in{grid-column:1/-1}
  .urlbox.has-zone .ub-pick{grid-column:1}
  .urlbox.has-zone>.ub-make{grid-column:2}}

/* 여러 영상 시트 — 뜻 둘을 그림 둘로 묻는다 (app.openFilesSheet · 2026-10-30 사용자 결정 '쇼츠 이미지 형태로'):
   세로 쇼츠 n장 = 각각 · 한 장에 n개 원본의 구간이 층층이 = 하나로 잇기. 그림은 CSS 가 그리고 JS 는 수만 넣는다 */
.fm-q{margin:var(--sp-12) 0 var(--sp-8);font:600 var(--t-md) var(--body);color:var(--ink)}
.fm-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin:0 0 var(--sp-10)}
.fm-card{display:grid;justify-items:center;gap:4px;padding:var(--sp-12) var(--sp-10) var(--sp-10);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-3);color:var(--ink-2);font:inherit;cursor:pointer;text-align:center;min-width:0}
.fm-card b{color:var(--ink);font-size:var(--t-md)}
.fm-card span{font-size:var(--t-sm);line-height:1.45}
.fm-card:hover{border-color:var(--line-2)}
.fm-card[aria-checked="true"]{border-color:var(--hot);background:var(--hot-ghost);box-shadow:0 0 0 1px var(--hot) inset}
.fm-card:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.fm-art{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:84px;margin-bottom:6px}
.fm-art i,.fm-art b{background-color:var(--surface-4);background-image:var(--thumb,none);background-size:cover;background-position:center}
.fm-phones i{display:block;width:34px;height:60px;border:1.5px solid var(--ink-3);border-radius:var(--r);box-shadow:0 2px 6px #0006}
.fm-phones i:nth-child(2){height:68px;width:38px}
.fm-phones i:nth-child(3){height:64px}
.fm-card[aria-checked="true"] .fm-phones i{border-color:var(--hot)}
.fm-one i{display:grid;grid-auto-rows:1fr;gap:2px;padding:2px;width:46px;height:80px;border:1.5px solid var(--ink-2);border-radius:var(--r);background-image:none;box-shadow:0 2px 6px #0006}
.fm-one b{display:block;border-radius:var(--r-xs);min-height:0}
.fm-card[aria-checked="true"] .fm-one i{border-color:var(--hot)}
.fm-thumb{display:block;width:44px;height:26px;border-radius:var(--r-xs);background:var(--surface-4) var(--thumb,none) center/cover;flex:none}
.fm-row .fm-ic{width:44px;justify-content:center}
.fm-want{display:flex;align-items:center;gap:var(--sp-8);margin:0 0 var(--sp-10);font-size:var(--t-sm);color:var(--ink-2)}
.fm-want select{height:var(--ctl-md)}
.fm-ok{color:var(--cool)}

/* 여러 영상 시트 — 파일 줄 목록 (app.openFilesSheet) */
.fm-lead{margin:0 0 var(--sp-10);color:var(--ink-2);line-height:1.55}
/* 한 쇼츠로 잇기의 옵션 — 단일 파일 시트와 같은 부품(mode-pick · vb-narr · fs-review) 을 한 상자에 (2026-10-31) */
.fm-opts{display:flex;flex-direction:column;gap:var(--sp-10);margin:0 0 var(--sp-12);padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r)}
.fm-opts .mode-pick{margin:0}
.fm-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.fm-row2 .sheet-field,.fm-memo{margin:0}
.fm-memo input{width:100%}
@media (max-width:520px){.fm-row2{grid-template-columns:1fr}}
.fm-list{list-style:none;margin:0 0 var(--sp-10);padding:0;display:grid;gap:6px}
.fm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-3);font-size:var(--t-sm)}
.fm-row.bad{border-color:color-mix(in oklch,var(--bad,#e5484d) 50%,var(--line))}
.fm-ic{display:inline-flex;color:var(--ink-3)}.fm-ic svg{width:18px;height:18px}
.fm-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.fm-state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink-2);font-family:var(--mono)}
.fm-bar{width:72px;height:4px;border-radius:var(--r-full);background:var(--line);overflow:hidden}
.fm-bar i{display:block;height:100%;background:var(--hot)}
.fm-state.fm-err{white-space:normal;font-family:var(--body);color:var(--bad);min-width:0}
.fm-quote{margin:0;font-size:var(--t-base);line-height:1.6}
@media (max-width:520px){.fm-row{grid-template-columns:auto minmax(0,1fr) auto}.fm-state{grid-column:2;font-size:var(--t-xs)}.fm-row>[data-rm]{grid-row:1;grid-column:3}}
.urlbox input[type=url]{background:transparent;border:0;color:var(--ink);font:var(--t-xl) var(--body);
  height:var(--ctl-hero);padding:0 12px;min-width:0;width:100%}
.urlbox input[type=url]:focus{outline:none}
/* 입력과 버튼은 **한 덩이의 조작 바**다 — 버튼이 입력칸 높이를 채운다. `.btn` 이 계단
   높이(40px)를 갖게 되면서(L00) 46px 짜리 입력 옆에서 위로 6px 붙어 있었다: 높이가 고정된
   격자 항목은 `stretch` 를 못 받는다. 여기서는 행을 채우는 게 맞는 자리다.
   **안쪽 곡률 = 바깥 곡률 − 여백** (16 − 8 = 8) — 그래야 두 모서리가 같은 중심을 돈다. */
/* 자리를 **둘 다 적는다.** 행만 적으면 자동 배치가 버튼을 첫 칸으로 보내 입력과 자리가
   바뀐다 (실측: 버튼이 왼쪽, 입력이 오른쪽으로 갔다). */
/* 입력칸의 안내 줄 — '영상 [출처 표식] 링크를 넣으세요'. placeholder 는 그림을 못 담아 이 줄이 그 자리를 그린다
   (진짜 placeholder 는 공백 한 칸 — :placeholder-shown 이 비었는지를 말한다). 입력과 같은 칸(.ub-in 의 1/1)·같은 글꼴·같은 왼쪽 여백이고,
   쓰기 시작하면 사라진다 (placeholder 와 같은 순간 — 서서히 사라지면 글자와 겹친다) */
.ub-ph{align-self:center;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;
  padding:0 12px;font:var(--t-xl) var(--body);color:var(--ink-3);white-space:nowrap;pointer-events:none}
.ub-src{display:inline-flex;align-items:center;gap:6px;flex:none}
.ub-src svg{width:20px;height:20px}
.urlbox:has(input[type=url]:not(:placeholder-shown)) .ub-ph{display:none}
/* 버튼은 입력과 **같은 계단(--ctl-hero 48)** 이다 — 두 행을 이어 늘이면 힌트 줄만큼 66px 로 커져 입력(39px)과
   다른 조작이 됐다 (점검 A14). 버튼은 입력 줄에만 서고 힌트 줄 오른쪽은 비워 둔다 */
.urlbox .btn{white-space:nowrap;align-self:center;height:var(--ctl-hero);
  min-height:0;padding:0 20px}
/* 힌트는 **첫 칸에만** 선다 — 두 칸을 지나가면 그 오른쪽(버튼 아래)이 죽은 자리가 되고,
   상자가 '바 + 각주' 로 갈라져 보인다. 버튼이 두 행을 이어 상자가 한 덩이가 된다. */
.urlbox-hint{grid-column:1;margin:0;padding:0 12px 4px;font:var(--t-base) var(--body);color:var(--ink-3);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ub-ic{width:14px;height:14px;flex:none;color:var(--ink-3)}
.urlbox-note{grid-column:1;margin:0;padding:0 12px 4px;font:var(--t-base) var(--mono);color:var(--ink-2)}
/* 문장 안의 글자 버튼 — 상자가 아니라 **글자**다. 조작 높이 계단(--ctl-*)의 대상이 아니며
   `align` 이 이 이름을 보고 뺀다 (`display:inline` 은 못 쓴다 — 브라우저가 버튼을
   inline-block 으로 되돌린다). 문장 안에 버튼이 필요하면 새로 만들지 말고 이것을 쓴다. */
.linky{background:none;border:0;color:var(--ink-2);font:inherit;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.linky:hover{color:var(--hot)}
/* 한 칸으로 접히면 버튼은 자기 줄을 갖는다 (행을 이을 이웃이 없다) */
@container (max-width:420px){.urlbox{grid-template-columns:1fr}
  .urlbox .ub-in,.urlbox>.ub-make,.urlbox-hint{grid-column:1}
  .ub-ph{font-size:var(--t-lg);gap:6px}.ub-src{gap:4px}.ub-src svg{width:16px;height:16px}}

/* 해석 카드 — 시트 안 */
.ub-card{margin-bottom:12px}
/* 로그인 전 카드의 예상 — 무엇을 얻는지 한 덩이로 (app.paintGuestSheet) */
.ub-guest{padding:var(--sp-12) var(--sp-16);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}.ub-guest p{margin:0}.ub-guest p+p{margin-top:var(--sp-6)}
/* 편집 방식 — '상세 설정' 안의 한 자리 (app.modePicker). 기본은 'AI가 고르기'(한 줄 전체) · 나머지는 이름 + 설명이 다 보이는 두 열 */
.mode-pick{border:0;padding:var(--sp-12) var(--sp-12) 0;margin:0;min-width:0}
.mode-pick>legend{padding:0;margin:0 0 var(--sp-6);font-size:var(--t-sm);color:var(--ink-2)}
.mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.mode-card{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4);text-align:left;padding:var(--sp-10) var(--sp-12);
  border:1px solid var(--line-2);border-radius:8px;background:var(--surface-3);color:var(--ink);cursor:pointer;min-width:0;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.mode-card.auto{grid-column:1/-1}
.mode-card:hover{border-color:var(--ink-3)}
.mode-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);min-width:0}
.mode-top svg{width:14px;height:14px;color:var(--hot);flex:none}
.mode-top b{font-size:var(--t-lg);font-weight:600;min-width:0}
.mode-sum{font-size:var(--t-base);color:var(--ink-2);line-height:1.5}
.mode-fit{flex:none;font-size:var(--t-xs);font-style:normal;padding:2px 6px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-3)}
.mode-fit.rec{color:var(--hot);border-color:var(--hot-dim)}
.mode-card.dim .mode-top b{color:var(--ink-2)}
.mode-card.on{border-color:var(--hot);background:var(--hot-ghost)}
.mode-card.on .mode-top b{color:var(--hot)}
.mode-card:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media (max-width:520px){.mode-list{grid-template-columns:1fr}}
.ub-cover{width:100%;max-height:180px;object-fit:cover;border-radius:8px;display:block;margin-bottom:8px}
.ub-meta{margin:0 0 6px;font:var(--t-base) var(--mono);color:var(--ink-3)}
.ub-attest{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-md);line-height:1.5;
  border:1px solid var(--hot-dim);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.ub-mode-field{display:grid;gap:4px;margin:var(--sp-8) 0 var(--sp-12)}
.ub-mode-field label{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--t-sm);color:var(--ink-2)}
.ub-mode-field select{width:100%;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font:var(--t-md) var(--body);padding:7px 9px}
.ub-mode-field p{margin:0;line-height:1.45}
.ub-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:8px}
.ub-opts label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--t-sm);color:var(--ink-2)}
.ub-opts .opt-h{display:flex;align-items:center;gap:var(--sp-4)}
.ub-opts select{width:100%;min-width:0}
.ub-opts .vb-pick{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--t-sm);color:var(--ink-2)}
.fs-review{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin:var(--sp-4) var(--sp-12) var(--sp-12);font-size:var(--t-base);color:var(--ink-1)}
.fs-review input{margin:0;accent-color:var(--hot)}
.fs-review .muted{font:var(--t-base) var(--mono)}
.ub-opts input,.ub-opts select{background:var(--surface-3);border:1px solid var(--line);
  border-radius:6px;color:var(--ink);font:var(--t-md) var(--body);padding:6px 8px}
.ub-hint{margin:8px 0 0;font-size:var(--t-base);color:var(--ink-3);line-height:1.6}

/* 띠 — 원본 한 편이 한 줄, 컷이 그 위의 구간. 좌표는 render.js 가 % 로 넘긴다.
   층은 넷이고 선언 순서가 곧 z 순서다: 막(바탕) → 트랙 → 컷 → 댓글 핀. */
.ribbon{position:relative;display:block;height:14px;width:100%}
.ribbon.has-pins{height:20px}
.rb-track{position:absolute;inset:5px 0;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,var(--hair),var(--hair-2),var(--hair))}
/* 막(기승전결) — 컷이 한쪽에 몰렸는지가 바탕으로 보인다. 홀·짝만 갈라 이름을 안 읽어도
   경계가 보이게 한다 (막의 정체성은 순서이지 이름이 아니다). */
.rb-act{position:absolute;left:var(--l);width:var(--w);top:0;bottom:0;font-style:normal;
  background:rgba(255,255,255,calc(.03 + var(--i) * .045));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.09)}
.rb-act:last-of-type{box-shadow:none}
/* 댓글이 지목한 시점 — 진할수록 여러 명. 억제된 버킷은 서버가 이미 걸렀다 */
.rb-pin{position:absolute;left:var(--l);bottom:0;width:2px;height:6px;transform:translateX(-50%);
  border-radius:1000px;font-style:normal;background:var(--cool);
  opacity:calc(.35 + var(--s) * .65)}
.rb-cut{position:absolute;left:var(--l);width:var(--w);top:0;bottom:0;border-radius:4px;
  background:var(--hot);box-shadow:0 0 0 1px #0F111399,0 0 10px -2px var(--hot);
  font-style:normal;transition:transform var(--dur-2) var(--ease)}
.vcard:hover .rb-cut{transform:scaleY(1.14)}
.ribbon.is-empty .rb-track{background:repeating-linear-gradient(90deg,var(--hair) 0 6px,transparent 6px 12px)}
.ribbon.is-busy .rb-track{background:linear-gradient(90deg,var(--hair),var(--hot-dim),var(--hair));
  background-size:220% 100%;animation:rb-scan var(--dur-loop-slow) var(--ease-inout) infinite}
@keyframes rb-scan{from{background-position:120% 0}to{background-position:-20% 0}}

.vcard{background:var(--panel);padding:16px 16px;text-align:left;border:0;color:inherit;
  display:flex;flex-direction:column;gap:8px;width:100%}
.vcard:hover{background:var(--panel-2)}
.vcard.req{text-decoration:none;border:1px dashed var(--hot-dim)}
.vcard.on{background:var(--panel-3);border-color:var(--hot-dim);box-shadow:inset 3px 0 0 var(--hot)}
.vcard h2{font-size:var(--t-lg);font-weight:700;line-height:1.4}
.vcard .meta{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.vcard .meta b{color:var(--ink-2);font-weight:500}
.vcard{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px}
.vcard{transition:transform var(--dur-3) var(--ease-inout),box-shadow var(--dur-3) var(--ease-inout),border-color var(--dur-2) var(--ease)}
.vcard:hover{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--lift)}.vcover{position:relative;display:block;width:100%;aspect-ratio:16/8.5;background:linear-gradient(135deg,#1D1D21,#0F0F11);overflow:hidden}.vcover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease)}.vcard:hover .vcover img{transform:scale(1.025)}.vcover>i{position:absolute;inset:0;display:grid;place-items:center;font:var(--t-xs) var(--mono);font-style:normal;color:#5A5A60}.vcover>em{position:absolute;right:7px;bottom:6px;background:#08090add;color:#fff;padding:2px 4px;border-radius:4px;font:var(--t-xs) var(--mono);font-style:normal}.vcopy{padding:12px 12px 12px;display:flex;flex-direction:column;gap:8px}.vcopy .meta{display:flex}

/* ── 원본 헤더 ── */
.srchead{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:26px 0 12px}
.srchead h2{font-size:var(--t-4xl);font-weight:700;letter-spacing:-.028em;margin-bottom:8px}
.facts{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.facts b{color:var(--ink-2);font-weight:500}
.srchead .act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
select{font-family:var(--body);font-size:var(--t-base);background:var(--panel-3);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);padding:6px 9px}

/* ── 히트맵 ── */
.tl{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px}
.tl-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--ink-3);margin-bottom:6px;letter-spacing:.05em}
canvas{display:block;width:100%;border-radius:var(--r-sm);background:var(--panel-2);cursor:crosshair}
.tl-legend{display:flex;gap:16px;margin-top:10px;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--ink-3);flex-wrap:wrap}
.tl-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;
  vertical-align:-1px;font-style:normal}

/* ── 하이라이트 카드 — 붙은 표가 아니라 떨어진 라운드 카드 (애플식) ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
/* 컷 카드 — 프로젝트 컷 탭과 보관함 컷 탭이 같은 부품(app.js cutCard)이다 (R5-04).
   그림은 끝까지 · 순위·꼬리표는 그림 위 · 행동 줄은 위 선 하나 아래. 차이는 행동 줄 끝 한 칸(cc-tail)뿐이다. */
.ccard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;text-align:left;color:inherit;cursor:pointer;
  transition:transform var(--dur-3) var(--ease-inout),box-shadow var(--dur-3) var(--ease-inout),border-color var(--dur-2) var(--ease)}
.ccard:hover{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--lift)}
.ccard.cand{border-color:var(--cool-dim)}
.ccard.dropped{opacity:.5}
.ccard.picked{border-color:var(--hot-dim);box-shadow:0 0 0 1px var(--hot-dim)}
.ccard .cc-th{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;border-bottom:1px solid var(--line)}
.ccard .cc-th img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88);transition:filter var(--dur-2) var(--ease)}
.ccard:hover .cc-th img{filter:saturate(1.1)}
.ccard.expired .cc-th img{filter:grayscale(1) brightness(.6)}
.ccard .cc-tags{position:absolute;left:10px;top:10px;right:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ccard .cc-rank{font:700 var(--t-sm) var(--mono);letter-spacing:.06em;color:var(--ink);background:rgba(10,10,11,.66);
  backdrop-filter:blur(6px);border:1px solid var(--hair-2);border-radius:var(--r);padding:var(--sp-4) var(--sp-8)}
.ccard .cc-rank.cand{color:var(--cool);border-color:var(--cool-dim)}
.ccard .cc-tags .newtag{background:rgba(10,10,11,.66);backdrop-filter:blur(6px)}
.ccard .cc-len{position:absolute;right:10px;bottom:10px;font:600 var(--t-sm) var(--mono);color:var(--ink);
  background:rgba(10,10,11,.7);backdrop-filter:blur(6px);border-radius:var(--r);padding:var(--sp-4) var(--sp-8)}
.ccard .dday{font:700 var(--t-sm) var(--mono);letter-spacing:.04em;border-radius:var(--r);padding:var(--sp-4) var(--sp-8);border:1px solid transparent;backdrop-filter:blur(6px)}
.ccard .dday.ok{color:#7FE3B5;background:rgba(18,64,44,.78);border-color:rgba(127,227,181,.35)}
.ccard .dday.warn{color:#FFC266;background:rgba(84,52,8,.82);border-color:rgba(255,194,102,.4)}
.ccard .dday.bad{color:#FF8A82;background:rgba(92,18,14,.85);border-color:rgba(255,138,130,.45)}
.ccard .dday.gone{color:var(--ink-2);background:rgba(10,10,11,.7);border-color:var(--hair-2);font-family:inherit;font-weight:600}
.ccard .cc-body{padding:var(--sp-12) var(--sp-16);display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.ccard .cc-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.ccard .cc-meta .muted{font-family:inherit}
.ccard h3{font-size:var(--t-md);font-weight:700;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .sub{font-size:var(--t-sm);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard .sub a{color:inherit;text-decoration:none}.ccard .sub a:hover{color:var(--ink-2)}
.ccard .note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}
.ccard .note b{color:var(--hot);font-weight:600}
.ccard .act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
/* 카드 안 행동은 중립 단추다 — 노랑은 화면 머리의 주 조작 하나에만 (R5-06) */
.ccard .cbtn{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-md);padding:0 var(--sp-16) 0 var(--sp-12);border-radius:var(--r-full);
  border:1px solid var(--hair-2);background:rgba(255,255,255,.03);color:var(--ink);font-family:inherit;font-weight:600;font-size:var(--t-base);cursor:pointer}
.ccard .cbtn svg,.ccard .cshorts svg{width:var(--ic-md);height:var(--ic-md);flex:none}
.ccard .cbtn:hover{border-color:var(--line-2);background:var(--fill)}
/* '만든 쇼츠 n개' — 보조 정보라 --t-sm · --ink-3 (R5-24) */
.ccard .cshorts{display:inline-flex;align-items:center;gap:var(--sp-6);height:var(--ctl-md);padding:0 8px;border:0;border-radius:var(--r-full);
  background:none;color:var(--ink-3);font-family:inherit;font-weight:500;font-size:var(--t-sm);cursor:pointer}
.ccard button.cshorts:hover{color:var(--ink-2);background:var(--fill)}
.ccard .cshorts.none{cursor:default}
.ccard .cc-tail{margin-left:auto;display:inline-flex;align-items:center}
.ccard .pick{display:inline-flex;align-items:center;gap:6px;font:600 var(--t-sm) var(--mono);color:var(--ink-2);cursor:pointer}
.ccard .pick b{color:var(--hot);min-width:14px;text-align:center}
.rank{font-family:var(--mono);font-size:var(--t-sm);color:var(--hot);letter-spacing:.1em}
.rank.cand{color:var(--cool)}
.score{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* 쇼츠 점수 0~99 — 값·문장은 서버(cutscore.py)가 만들고 여기는 그린다. 색은 히트맵 축(낮음→높음)을 쓴다 */
.grade{display:inline-flex;align-items:baseline;gap:var(--sp-2);font-variant-numeric:tabular-nums;color:var(--h3)}
.grade b{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;line-height:1}
.grade small{font-size:var(--t-xs);color:var(--ink-3)}
.lv-good{color:var(--h5)}.lv-ok{color:var(--h4)}.lv-weak{color:var(--h2-ink)}.lv-none{color:var(--ink-3)}
.cd-grade{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
.cd-grade-top{display:flex;align-items:center;gap:var(--sp-12)}
.cd-grade-top b{font-family:var(--mono);font-size:var(--t-6xl);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cd-grade-top span{display:grid;font-size:var(--t-sm);color:var(--ink-2)}
.cd-grade-top small{font-size:var(--t-base);color:var(--ink)}
/* 네 축 — 막대가 강도를 말하므로 설명 문장은 설명 점 뒤에 있다 (U01).
   예전엔 축마다 한 줄씩 붙어 서랍 위쪽 절반이 글이었다. */
.cd-axis{display:grid;grid-template-columns:52px 1fr 26px auto;align-items:center;column-gap:var(--sp-8);font-size:var(--t-sm)}
.cd-axis span{color:var(--ink-1)}
.cd-axis i{height:4px;border-radius:4px;background:var(--panel-3);display:block;overflow:hidden}
.cd-axis u{display:block;height:100%;background:currentColor}
.cd-axis b{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.cd-axis p{grid-column:2/-1;margin:var(--sp-2) 0 0;color:var(--ink-3);line-height:var(--lh-snug)}
.cd-rawsig{margin-top:var(--sp-8)}.cd-rawsig summary{font-size:var(--t-sm);color:var(--ink-3);cursor:pointer}
/* 쇼츠 점수의 네 축 — 값·문장은 서버(cutscore.py) */
.grade-axes{list-style:none;margin:var(--sp-8) 0;padding:0;display:grid;grid-template-columns:fit-content(40%) 26px 1fr;column-gap:var(--sp-8);row-gap:var(--sp-6)}
.grade-axes li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;font-size:var(--t-sm)} /* 이름 칸 52px 고정이면 'Primeros 3 s' 가 두 줄로 접혔다 — 가장 긴 이름만큼(최대 40%), 줄마다 같은 칸 */
.grade-axes li span{color:var(--ink-1)}.grade-axes li b{font-family:var(--mono);color:var(--hot)}
.grade-axes li small{color:var(--ink-3);line-height:var(--lh-snug)}
.source-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:15px 0}.source-frames:empty{display:none}.source-frames button{position:relative;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#111;aspect-ratio:16/7}.source-frames img{width:100%;height:100%;object-fit:cover;display:block}.source-frames span{position:absolute;left:5px;bottom:4px;background:#000b;color:#fff;border-radius:2px;padding:0px 4px;font:var(--t-xs) var(--mono)}.source-frames button:hover{border-color:var(--hot)}
.vcover video{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease)}.vcard:hover .vcover video{transform:scale(1.025)}
.sigbar{display:flex;gap:2px;height:3px;margin-top:2px}
.sigbar i{flex:1;border-radius:2px}
.perf{font-family:var(--mono);font-size:var(--t-sm);color:var(--cool)}

/* ── 에디터 3열 ── */
.ed{display:grid;grid-template-columns:1.1fr .85fr .62fr;gap:0px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);min-height:520px}
.ed>div{background:var(--panel);padding:12px 16px;min-width:0}
@media (max-width:1080px){.ed{grid-template-columns:1fr}}

/* 트랜스크립트 */
.tx{font-size:var(--t-lg);line-height:2.05;max-height:400px;overflow-y:auto}
.tx w{cursor:pointer;border-radius:var(--r-sm);padding:0px 2px;display:inline-block}
.tx w:hover{background:var(--panel-3)}
.tx w.emph{color:var(--hot);font-weight:700}
.tx w.cut{color:var(--ink-3);text-decoration:line-through;
  text-decoration-color:var(--bad);text-decoration-thickness:2px;opacity:.5}
.tx w.play{background:var(--hot);color:#140C02;font-weight:700}
.tx w.filler{opacity:.55;font-size:.92em}
.tx-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.tx-row:last-child{border-bottom:0}
.tx-row .tc{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);flex:0 0 40px;padding-top:6px}
.hint{margin-top:12px;font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);line-height:1.85}
kbd{background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:0px 4px;font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}

/* 프리뷰 — subtitle_doc 을 그리는 곳 */
.pv-wrap{max-width:300px;margin:0 auto}
.pv{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line-2);
  background:#000;aspect-ratio:9/16}
.pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pv .nomedia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);padding:20px;
  background:repeating-linear-gradient(48deg,var(--surface-2),var(--surface-2) 8px,#1B1B1E 8px,#1B1B1E 16px)}
.pv .layer{position:absolute;inset:0;pointer-events:none}
.pv .sub{position:absolute;left:4%;right:4%;text-align:center;font-family:var(--disp);
  line-height:1.24;white-space:pre-wrap;word-break:keep-all}
.pv .sub em{font-style:normal}
.pv .ctx{position:absolute;left:50%;transform:translate(-50%,-50%);max-width:86%;background:#000000B3;
  color:#fff;padding:.35em .7em;border-radius:.3em;font-weight:700;text-align:center;line-height:1.3;
  white-space:pre-wrap;word-break:keep-all}
/* ty:fixed — 영상 안(프리뷰)의 댓글 인용 오버레이(comment_quote)다. 화면 글자 계단을 따라가면 프리뷰가 렌더와 갈라진다 (docs/type-scale-plan.md).
   **`.ovl` 전체에 걸지 않는다** — 넓은 선택자였던 동안 훅 문구(ovl-hook)에 검은 상자·여백이 새어 렌더(외곽선 글자)와 달랐다 (2026-10-22 사용자 지적). */
.pv .ovl.ovl-quote{position:absolute;left:6%;right:6%;background:#0F1214EE;border:1px solid var(--line-2);
  border-radius:6px;padding:8px 10px;font-size:11px;line-height:1.5;text-align:left}
.pv .ovl.ovl-quote b{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);
  margin-bottom:2px;font-weight:400}
.scrub{margin-top:11px}
.scrub .bar{height:5px;background:var(--panel-3);border-radius:2px;position:relative;cursor:pointer}
.scrub .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--hot);border-radius:2px;width:0}
.scrub .t{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums}
.pvctl{display:flex;gap:6px;margin-top:8px;justify-content:center}

/* 인스펙터 */
.grp{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.grp>b{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);
  padding:8px 10px;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
.grp>b em{font-style:normal;color:var(--hot);text-transform:none;letter-spacing:0}
.grp .in{padding:10px 11px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:var(--t-base)}
.kv span{color:var(--ink-3)}
.kv b{font-family:var(--mono);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;text-align:right}
.kv b.hot{color:var(--hot)}
.lock{color:var(--ink-3);font-size:var(--t-xs);margin-left:4px}
.note{font-size:var(--t-sm);color:var(--ink-3);margin:8px 0 0;line-height:1.6}
.tpls{display:flex;gap:6px}
.tplbtn{flex:1;border:0;background:none;padding:0}
.tpl{aspect-ratio:9/13;border-radius:var(--r-sm);border:1px solid var(--line-2);
  position:relative;overflow:hidden;background:linear-gradient(160deg,#242428,#0F0F11)}
.tplbtn.on .tpl{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
.tpl u{position:absolute;left:3px;right:3px;bottom:5px;height:3px;border-radius:2px;text-decoration:none}
.tpl-name{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);text-align:center;margin-top:4px}
.tplbtn.on .tpl-name{color:var(--hot)}
.sigrow{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:var(--t-sm)}
.sigrow span{flex:0 0 48px;color:var(--ink-3)}
.sigrow .m{flex:1;height:5px;background:var(--panel-3);border-radius:2px;overflow:hidden}
.sigrow .m i{display:block;height:100%;background:var(--cool)}
.sigrow .m i.top{background:var(--hot)}
.sigrow b{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);flex:0 0 26px;
  text-align:right;font-variant-numeric:tabular-nums}

/* ── Studio editor ── */
.studio-body{overflow:hidden;background:var(--void);color:var(--ink)}.studio-body button{color:inherit}

/* ── 편집기 소형 컨트롤 (D04) ─────────────────────────────────────────────────
   같은 모양이 **열두 곳에 거의 같은 값으로** 흩어져 있었다 (design-plan D04 의 '두 번째
   가족'). 테두리·바탕·글자색·전이를 여기 한 곳에 모은다 — 버튼 하나를 고치려고 열두 곳을
   찾아다니지 않게. **크기는 각자 둔다**: 아이콘 하나짜리와 글자 두 자짜리는 다른 물건이고,
   합치면 편집기 전체의 픽셀이 움직인다.
   라운드도 **크기를 따른다** — 16px 짜리에 6px 을 주면 알약이 된다. 지금 값을 그대로
   유지하도록 세 계단으로 나눴다 (**이 바퀴에서 움직이는 픽셀은 0 이다**).
   의도적으로 다른 것(오류 막대의 빨간 테두리 · 초안 막대의 amber · 패널 바탕 · 얇은 선 ·
   `border:0`)은 **각자 규칙에 그대로 남아** 뒤에서 이 기반을 덮는다.
   `.guide-btn`·`.zoom button` 은 뺐다 — 두 번 정의돼 있고 **뒤쪽이 `border:0;
   background:transparent`** 라, 합치면 뜻이 뒤집힌다 (D04 의 남은 몫). */
.cut-nudge button, #error button, .cmp-actions button, .cmp-actions select,
.cut-switch button, .render-state button, .draft-bar button, .bulk-row button,
.caption-item .cap-acts button, .sc-row .sc-acts button, .caption-props button,
.timeline-tools button, .icon-btn{
  border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);
  font-family:inherit;cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.cut-nudge button, .cmp-actions button, .cmp-actions select, .cut-switch button,
.caption-item .cap-acts button, .timeline-tools button{border-radius:var(--r-sm)}
#error button, .render-state button, .draft-bar button, .bulk-row button,
.sc-row .sc-acts button, .caption-props button{border-radius:6px}
.icon-btn{border-radius:var(--r)}

.studio-top{height:58px;display:flex;align-items:center;padding:0 12px;gap:10px;background:var(--surface-2);border-bottom:1px solid var(--line);position:relative;z-index:var(--z-pop)}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;color:var(--ink-1);font-size:var(--t-lg)}.icon-btn.sm{width:28px;height:28px}
.brand-mark{width:30px;height:30px;flex:none;border-radius:8px;background:var(--hot);display:grid;place-items:center}
.brand-mark img{display:block;width:27px;height:27px;object-fit:contain}
.studio-title{display:flex;flex-direction:column;min-width:0}.studio-title>b{font-size:var(--t-base);max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-title>#project-meta,.panel-head small,.inspector-head small{font:var(--t-xs) var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.top-center{position:absolute;left:50%;transform:translateX(-50%);font:var(--t-sm) var(--mono);color:var(--ink-3)}.top-center i{display:inline-block;width:6px;height:6px;background:var(--cool);border-radius:50%;margin-right:6px}.top-center.dirty{color:var(--hot)}.top-center.dirty i{background:var(--hot)}/* 좁아지면 안쪽도 접힌다 (G21). `.studio-top` 은 이미 줄바꿈하는데 이 묶음이
   통째로 안 접혀서 390px 화면을 68px 넘겼다 — 넓은 화면에서는 여유가 있어
   줄바꿈이 일어나지 않으므로 데스크톱은 그대로다. */
.top-actions{margin-left:12px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:calc(100% - 12px)}.version{font:var(--t-sm) var(--mono);color:var(--ink-3);border-left:1px solid var(--line-2);padding-left:10px}.export-btn{border:0;border-radius:8px;background:var(--hot);color:#1b0d00!important;height:var(--ctl-lg);padding:0 12px;font-weight:900;display:flex;gap:12px;align-items:center}
/* 왼쪽 패널 폭은 이 변수 한 곳이다 (M7-a) — 286 에서는 장면 행 버튼이 두 줄로 접히고 효과음 이름이 잘렸다 */
.studio-shell{--asset-w:360px;height:calc(100vh - 58px);display:grid;grid-template-columns:72px var(--asset-w) minmax(390px,1fr) 278px;grid-template-rows:minmax(0,1fr) 212px;background:#232327;gap:1px}
.tool-rail{grid-row:1/3;background:var(--surface-2);padding:10px 6px;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto}.tool{flex:0 0 auto;height:62px;border:0;border-radius:8px;background:transparent;color:var(--ink-3)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.tool span{font:var(--t-2xl) var(--disp)}.tool b{font-size:var(--t-sm);font-weight:600}.tool:hover{background:var(--surface-4);color:var(--ink-1)!important}.tool.on{color:var(--hot)!important;background:var(--hot-ghost);box-shadow:inset 2px 0 var(--hot)}
.asset-panel,.inspector-panel{background:var(--surface-3);min-height:0;overflow:auto}.panel-page{display:none;padding:18px 15px}.panel-page.on{display:block}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.panel-head h2,.inspector-head h2{font-size:var(--t-xl);margin-top:3px}.searchbox{height:36px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:0 10px;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-bottom:12px}.searchbox input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:var(--t-base) var(--body)}
.caption-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 310px);overflow:auto;padding-right:2px}.caption-item{display:grid;grid-template-columns:24px 1fr 25px;gap:6px;border:1px solid var(--line);background:var(--surface-4);border-radius:8px;padding:8px 6px;transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}.caption-item.playing{border-color:var(--hot-dim);background:var(--hot-ghost)}.caption-item.is-hidden{opacity:.45}.caption-item button{border:0;background:transparent;color:var(--ink-3)}.caption-item>div{min-width:0}.caption-item span{font:var(--t-sm) var(--mono);color:var(--ink-3)}.caption-item textarea{display:block;resize:none;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:var(--t-base)/1.5 var(--body);padding:3px 0 0}.panel-tip{margin-top:12px;padding:10px;background:#131d1c;border:1px solid var(--cool-dim);border-radius:8px;display:flex;flex-direction:column;gap:3px}.panel-tip b{font-size:var(--t-sm);color:var(--cool)}.panel-tip span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}.panel-tip.warn{background:var(--hot-ghost);border-color:var(--hot-dim)}.panel-tip.warn b{color:#f0dd63}
.group-label{font:var(--t-xs) var(--mono);letter-spacing:.12em;color:var(--ink-3);margin:20px 0 9px}.upload-card{height:116px;border:1px dashed var(--line-2);border-radius:8px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}.upload-card>span{font-size:var(--t-4xl);color:#f3a44c}.upload-card b{font-size:var(--t-base)}.upload-card small{font:var(--t-xs) var(--mono);color:var(--ink-3)}.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.icon-grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:var(--surface-4);font-size:var(--t-3xl)}.icon-grid button:hover{border-color:var(--hot);background:var(--hot-ghost)}.switch-row{height:54px;display:flex;align-items:center;border-bottom:1px solid var(--line);position:relative}.switch-row>span{display:flex;flex-direction:column}.switch-row b{font-size:var(--t-sm)}.switch-row small{font-size:var(--t-xs);color:var(--ink-3)}.switch-row input{opacity:0;position:absolute}.switch-row>i{margin-left:auto;width:30px;height:17px;border-radius:16px;background:var(--line-2);position:relative}.switch-row>i:after{content:'';position:absolute;width:13px;height:13px;background:var(--ink-3);border-radius:50%;top:2px;left:2px;transition:left var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}.switch-row input:checked+i{background:var(--hot-dim)}.switch-row input:checked+i:after{left:15px;background:var(--hot)}
/* 자막 스타일은 그림으로 고른다 — 카드마다 그 스타일의 번들 폰트·채움·테두리(상자)로 견본 문장을 그린다 (2026-10-14) */
.template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.property-card{border:1px solid var(--line);border-radius:8px;padding:8px 10px}.property-card div,.info-rows div{display:flex;justify-content:space-between;padding:5px 0}.property-card span,.info-rows span{font-size:var(--t-sm);color:var(--ink-3)}.property-card b,.info-rows b{font:var(--t-sm) var(--mono);color:var(--ink-1)}
.stage-column{background:var(--surface-1);display:flex;flex-direction:column;min-width:0;min-height:0;container:stage/inline-size}.stage-toolbar{height:48px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line)}.device-label{display:flex;gap:6px;align-items:center}.device-label>span{font-size:var(--t-xs);color:var(--cool)}.device-label b{font-size:var(--t-sm)}.device-label em{font:var(--t-xs) var(--mono);font-style:normal;color:var(--ink-3)}/* 스테이지 위의 조작도 계단을 쓴다 (L07/R3). 확대 스테퍼의 −·＋ 가 15·16px 이라
   같은 줄의 가이드 버튼(30)과 눈에 띄게 어긋났고, 무엇보다 **누를 자리가 없었다**. */
.zoom{margin:auto;display:flex;gap:2px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:2px}
.zoom button,.guide-btn{border:0;background:transparent;color:var(--ink-3);font-size:var(--t-sm)}
.zoom button{width:var(--ctl-sm);height:var(--ctl-sm);display:grid;place-items:center;border-radius:4px}
.zoom button:hover{background:var(--fill)}
.zoom span{font:var(--t-xs) var(--mono);min-width:31px;text-align:center}
.guide-btn{border:1px solid var(--line);border-radius:6px;height:var(--ctl-md);padding:0 8px}.guide-btn.on{color:var(--hot);border-color:var(--hot-dim)}
.stage-space{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,var(--surface-4) 0,var(--surface-1) 65%)}.canvas-shell{--stage-zoom:.7;position:relative;height:calc((100vh - 318px)*var(--stage-zoom));max-height:calc(100% - 24px);aspect-ratio:9/16;box-shadow:var(--e-3)}.studio-preview{position:absolute;inset:0;width:100%;height:100%;border-radius:4px}.safe-guides,.custom-layer{position:absolute;inset:0;pointer-events:none}.safe{position:absolute;left:5%;right:5%;border:1px dashed #ffb15b66}.safe span{font:var(--t-xs) var(--mono);color:#ffc277;background:#18120dbb;padding:1px 3px}.header-safe{top:3%;height:11%}.content-safe{top:16%;height:49%;border-color:#62d6ba55}.content-safe span{color:var(--cool)}.caption-safe{top:68%;height:15%}.footer-safe{bottom:3%;height:10%;border-color:#e5717155}.footer-safe span{color:#e99090}.center-guide{position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed #fff5}.custom-layer{pointer-events:none}/* 사용자 오버레이는 render.js 가 프리뷰 안에 그린다 — 편집기는 그 위에 선택 표시만 얹는다.
   .custom-layer 가 클릭을 먹으면 프리뷰의 오버레이를 고를 수 없다 */
.source-guide-layer{position:absolute;inset:1px;pointer-events:none;z-index:3} /* .pv 테두리 안쪽과 같은 좌표 */
.source-guide{position:absolute;pointer-events:none}
.source-boundary{position:absolute;outline:1px dashed var(--cool);box-shadow:0 0 0 1px #0008;pointer-events:none}
.source-boundary>span{position:absolute;left:0;top:-23px;white-space:nowrap;padding:4px 6px;border-radius:4px;background:var(--surface-1);color:var(--cool);font:var(--t-xs) var(--body)}
.source-guide-btn{margin-right:6px;white-space:nowrap}.source-guide-btn.on{color:var(--cool);border-color:var(--cool-dim)}
.source-map{margin:12px 0 16px;padding:16px 10px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-1)}
.source-map-frame{position:relative;width:min(100%,220px,calc(120px * var(--source-ratio)));aspect-ratio:var(--source-ratio);margin:0 auto;outline:1px dashed var(--cool);overflow:hidden;background:repeating-linear-gradient(135deg,transparent 0 7px,#ffffff05 7px 8px)}
.source-map-window{position:absolute;box-sizing:border-box;border:1px solid var(--cool);background:#62d6ba33}
.source-map figcaption{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin-top:10px;color:var(--ink-3);font:var(--t-xs) var(--body)}
.source-map figcaption span:last-child{color:var(--cool)}
.pv .ovl{position:absolute;transform:translate(-50%,-50%);line-height:1;white-space:nowrap;text-shadow:0 2px 5px #000;pointer-events:auto;cursor:pointer}.pv .ovl img{width:100%;display:block;pointer-events:none}.pv .ovl.selected{outline:1px solid var(--hot);outline-offset:3px}.pv .ovl .ovl-handle{display:none}.pv .ovl.selected .ovl-handle{display:block;position:absolute;right:-7px;bottom:-7px;width:11px;height:11px;background:var(--hot);border-radius:2px;cursor:nwse-resize}.lay-ovl{position:absolute;transform:translate(-50%,-50%);line-height:1;white-space:nowrap;text-shadow:0 2px 5px #000;pointer-events:none}.lay-ovl img{width:100%;display:block}.canvas-object{position:absolute;transform:translate(-50%,-50%);padding:0;border:1px solid transparent;background:transparent}.canvas-object.selected{border:1px solid var(--hot);box-shadow:0 0 0 2px #0008}.canvas-object img{width:100%;display:block}.canvas-object span{font-size:var(--t-6xl);text-shadow:0 2px 5px #000}
.transport{height:54px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--line);position:relative;padding-inline:12px}.transport button{border:0;background:transparent;color:var(--ink-3)}.play-main{width:var(--ctl-lg)!important;height:var(--ctl-lg);border-radius:50%!important;background:var(--ink)!important;color:#111!important}.timecode{font:var(--t-sm) var(--mono);font-variant-numeric:tabular-nums}.transport .timecode{display:inline-block;min-width:5em}#t-now{text-align:right}.slash{color:var(--ink-3)}.fit-btn{position:absolute;right:12px;top:calc(50% - var(--ctl-sm)/2);border:1px solid var(--line)!important;border-radius:6px!important;height:var(--ctl-sm)!important;padding:0 8px!important;font-size:var(--t-xs)!important}
.inspector-panel{padding:18px 15px}.inspector-head{margin-bottom:18px}.inspect-section{border-top:1px solid var(--line);padding:14px 0}.inspect-section h3{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 10px}.ai-badge{font:var(--t-xs) var(--mono);color:var(--hot);border:1px solid var(--hot-dim);background:var(--hot-ghost);padding:2px 4px;border-radius:4px}.rec-card{display:grid;grid-template-columns:25px 1fr auto;gap:8px;margin-bottom:6px;padding:8px;border:1px solid var(--line);border-radius:8px}.rec-card>span{font:var(--t-xs) var(--mono);color:var(--hot)}.rec-card div{display:flex;flex-direction:column}.rec-card b{font-size:var(--t-sm)}.rec-card small{font-size:var(--t-xs);color:var(--ink-3)}.rec-card em{font:var(--t-xs) var(--mono);font-style:normal;color:var(--cool)}.empty-property{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}.layer-props label{display:flex;flex-direction:column;font-size:var(--t-xs);color:var(--ink-3);margin-bottom:8px}.layer-props input{width:100%}.danger-btn{width:100%;border:1px solid #56302d;background:#221313;color:var(--bad)!important;border-radius:6px;padding:6px;font-size:var(--t-sm)}
.score-ring{width:96px;height:96px;border-radius:50%;margin:8px auto 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--surface-3) 58%,transparent 60%),conic-gradient(var(--hot) 84%,#2E2E33 0)}.score-ring b{font:800 var(--t-4xl) var(--disp)}.score-ring span{font:var(--t-xs) var(--mono);color:var(--ink-3)}.analysis-copy b{display:block;font-size:var(--t-base);text-wrap:balance}.analysis-copy p{font-size:var(--t-sm);color:var(--ink-3)}.signal-list{display:grid;grid-template-columns:fit-content(45%) 1fr 24px;column-gap:var(--sp-8)}.signal-list div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;margin:7px 0}.signal-list span,.signal-list b{font:var(--t-xs) var(--mono);color:var(--ink-3)}.signal-list i{height:4px;background:var(--line);border-radius:5px}.signal-list u{display:block;height:100%;background:var(--hot);border-radius:5px}
.timeline-panel{grid-column:2/5;background:var(--surface-2);min-width:0}.timeline-head{height:34px;display:grid;grid-template-columns:126px 1fr 120px;border-bottom:1px solid var(--line)}.timeline-tools{display:flex;gap:4px;align-items:center;padding-left:10px}.timeline-tools button{border:0;color:var(--ink-3)}.ruler{position:relative}.ruler span{position:absolute;top:10px;font:var(--t-xs) var(--mono);color:var(--ink-3)}.timeline-zoom{font:var(--t-xs) var(--mono);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}.tracks{height:auto;min-height:178px;max-height:300px;position:relative;overflow:auto}.track{height:58px;display:grid;grid-template-columns:126px 1fr;border-bottom:1px solid var(--line)}.track.compact{height:50px}.track.compact:has(.audio-wave){height:58px}.track:has(>.video-lane){height:68px}.track-label{padding:0 12px;display:flex;align-items:center;gap:8px;background:var(--surface-3);border-right:1px solid var(--line)}.track-label span{color:var(--hot)}.track-label b{font-size:var(--t-xs);color:var(--ink-3)}.track-lane{position:relative;padding:4px 0;background:repeating-linear-gradient(90deg,transparent,transparent calc(16.666% - 1px),#242428 calc(16.666% - 1px),#242428 16.666%)}.video-clip{position:absolute;inset:5px 2px;border:1px solid var(--hot-dim);background:var(--hot-ghost);border-radius:4px;overflow:hidden}.video-clip b{position:absolute;left:8px;bottom:4px;font-size:var(--t-xs)}.thumb-strip{height:100%;opacity:.35;background:repeating-linear-gradient(90deg,#7a7526 0,#7a7526 45px,#4a481c 46px,#4a481c 92px)}.caption-clip{position:absolute;top:7px;bottom:7px;border:1px solid var(--hot-dim);background:var(--hot-ghost);color:#e0d789;border-radius:4px;overflow:hidden;text-align:left;padding:0 5px}.caption-clip span{font-size:var(--t-sm);white-space:nowrap}.caption-clip.off{opacity:.3}.caption-clip{cursor:grab;touch-action:none}.caption-clip.on{border-color:var(--hot);box-shadow:0 0 0 1px #f2e55c55}.clip-edge{position:absolute;top:-1px;bottom:-1px;width:7px;cursor:ew-resize;background:var(--hot);opacity:0;border-radius:3px}.caption-clip:hover .clip-edge{opacity:.65}.clip-edge:hover{opacity:1!important}.clip-edge[data-edge=in]{left:-3px}.clip-edge[data-edge=out]{right:-3px}.audio-wave{height:100%;position:relative}.audio-wave svg{position:absolute;inset:0;width:100%;height:100%;display:block}.playhead{position:absolute;top:0;bottom:0;left:126px;border-left:1px solid var(--hot);z-index:5;pointer-events:none}.playhead i{position:absolute;top:0;left:-4px;width:8px;height:8px;background:var(--hot);clip-path:polygon(0 0,100% 0,50% 100%)}
@media(max-width:1150px){.studio-shell{--asset-w:320px;grid-template-columns:64px var(--asset-w) minmax(350px,1fr)}.inspector-panel{display:none}.timeline-panel{grid-column:2/4}}
.workflow{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:var(--t-xs) var(--mono);color:var(--ink-3)}.workflow span.on{color:var(--hot)}.workflow span.done{color:var(--cool)}.workflow i{font-style:normal;color:var(--ink-3)}.studio-top .top-center{position:static;transform:none;margin-left:auto;min-width:0;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption-item.selected{border-color:var(--hot);box-shadow:0 0 0 1px #f2e55c55}.caption-item{cursor:pointer}.inspector-head p{font-size:var(--t-xs);color:var(--ink-3);margin:4px 0 0;line-height:1.5}.caption-props label{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-size:var(--t-xs);color:var(--ink-3)}.caption-props input{background:var(--surface-4);border:1px solid var(--line-2);border-radius:6px;color:var(--ink);padding:6px;font:var(--t-xs) var(--mono)}.caption-props .prop-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.caption-props button{padding:6px;font-size:var(--t-xs)}.caption-props button.danger{color:var(--bad);border-color:#573330}.studio-toast{position:fixed;left:50%;bottom:calc(var(--tl-h,212px) + 70px);transform:translateX(-50%);z-index:var(--z-sheet);background:var(--ink);color:var(--surface-3);border-radius:8px;padding:8px 12px;font-size:var(--t-sm);font-weight:700;box-shadow:var(--e-1)}.studio-toast.bad{background:var(--bad);color:#fff}/* 재생 줄(54px) 위에 뜬다 — 예전 232px 고정은 타임라인을 키우면 눈금자를 덮었다 (E16) */.studio-toast:not([hidden]){animation:st-in var(--dur-2) var(--ease)}.studio-toast.out{animation:st-out var(--dur-1) var(--ease-exit) forwards}@keyframes st-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}@keyframes st-out{to{opacity:0;transform:translate(-50%,4px)}}
.cut-lane{background:#1b1b1f}.cut-band{position:absolute;top:8px;bottom:8px;border:1px solid var(--cool);background:#2f6e6122;border-radius:4px;display:flex;align-items:center;justify-content:center}.cut-band.locked{opacity:.5}.cut-band b{font:var(--t-xs) var(--mono);color:var(--cool);pointer-events:none;white-space:nowrap;overflow:hidden}.cut-edge{position:absolute;top:-2px;bottom:-2px;width:9px;cursor:ew-resize;background:var(--cool);border-radius:2px;opacity:.75}.cut-edge:hover{opacity:1}.cut-edge[data-edge=start]{left:-5px}.cut-edge[data-edge=end]{right:-5px}.cut-band.locked .cut-edge{cursor:not-allowed}.cut-nudge{display:flex;gap:2px;margin-left:auto}.cut-nudge button{font-size:var(--t-xs);line-height:1;padding:2px 4px;color:var(--ink-3)}.cut-nudge button:hover{border-color:var(--cool);color:var(--cool)}.icon-btn.redo .ic{transform:scaleX(-1)}/* 포커스 링 — 어두운 배경에서 보여야 한다. 스튜디오의 모든 조작 가능한 것에 건다
   (E16). 마우스 클릭에는 안 뜨고 키보드에만 뜨는 :focus-visible 이다. */
.studio-shell button:focus-visible,.studio-shell input:focus-visible,.studio-shell select:focus-visible,.studio-shell textarea:focus-visible,.studio-shell a:focus-visible,.studio-shell [tabindex]:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:5px}
/* 움직임을 줄이라고 한 사람에게는 전환·플레이헤드 애니메이션을 끈다 */
/* 모션을 줄여 달라고 한 사람에게는 **사이트 전체가** 줄어야 한다 (M03a). 예전엔 이
   규칙이 `.studio-shell` 안에만 걸려 있어 랜딩·프로젝트·카탈로그·결과물은 그대로
   움직였다 — E16 이 편집기만 봤기 때문이다.
   **끝난 상태를 같이 못박는 것이 핵심이다**: 등장(.rv)은 애니메이션이 끝나야 보이므로,
   모션만 끄면 콘텐츠가 영영 안 보인다 (uiqa 의 freeze() 가 같은 일을 한다). */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;animation-delay:0s!important;scroll-behavior:auto!important}html.js .rv,html.js .rv.scale{opacity:1!important;transform:none!important;filter:none!important}
  /* '일하는 중' 표식은 멈추지 않는다 (R6-01) — 모션 줄이기는 '움직임을 줄이라' 이지 '상태 신호를 없애라' 가 아니다.
     예전엔 위 규칙과 `*{animation:none}` 한 벌이 스피너·맥박·스캔을 다 세워 진행 패널이 '멈춘 작업' 과 같아 보였다.
     회전·이동은 빼고 **불투명도만** 천천히 바뀐다 (WCAG 2.3.3 이 허용하는 비이동 변화). 다른 화면의 표식은
     `.busy-signal` 을 달면 여기로 온다. 전역 규칙은 이 한 곳이다 (R6-09) */
  :is(.busy-signal,.state.hot i,.prog .dot,.pg-steps li.on i,.nav-active:not(.stalled) i,.pstate.progress i,
    .card-progress.running i,.ribbon.is-busy .rb-track,.catalog-spinner,.skel,.studio-skeleton i,
    .progress-panel.running .pg-bar i,.progress-panel.queued .pg-bar::before,.progress-panel.waiting .pg-bar::before){
    animation-name:busy-still!important;animation-duration:calc(var(--dur-loop) * 2)!important;
    animation-timing-function:var(--ease-inout)!important;animation-iteration-count:infinite!important;animation-direction:normal!important}}
@keyframes busy-still{0%,100%{opacity:1}50%{opacity:.55}}
.empty-note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.7;padding:12px 12px;border:1px dashed var(--line-2);border-radius:8px;margin:6px 0}.empty-note b{color:var(--hot)}.lane-empty{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:var(--t-sm) var(--mono);color:var(--ink-3)}#error{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:var(--t-sm);background:#2a1614;border-bottom:1px solid #56302d}#error b{color:var(--bad)}#error span{color:var(--ink-1)}#error nav{margin-left:auto;display:flex;gap:6px}#error button{border:1px solid #56302d;color:var(--ink);padding:4px 8px;font-size:var(--t-xs)}.studio-skeleton{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface-3);z-index:4}.studio-skeleton i{display:block;position:relative;overflow:hidden;width:180px;height:9px;border-radius:4px;margin:6px auto;background:var(--surface-4)}.stage-space.compare{display:flex;gap:12px;align-items:center;justify-content:center}.stage-space.compare .canvas-shell{height:calc((100vh - 318px)*var(--stage-zoom)*.82)}.canvas-shell.cmp{position:relative}.stage-tag{position:absolute;top:-20px;left:0;font:var(--t-xs) var(--mono);color:var(--hot);background:var(--hot-ghost);border:1px solid var(--hot-dim);border-radius:4px;padding:0px 4px;z-index:3}.canvas-shell.cmp .stage-tag{color:var(--ink-3);background:var(--surface-4);border-color:var(--line-2)}.cmp-actions{position:absolute;bottom:-30px;left:0;right:0;display:flex;gap:5px}.cmp-actions select,.cmp-actions button{color:var(--ink-3);font-size:var(--t-xs);padding:3px 6px}.cmp-actions select{flex:1;min-width:0}#cmp-btn.on{border-color:var(--hot);color:var(--hot)}/* 편집기의 확인 시트는 `.sheet-back > .sheet` 다. **부모로 묶는 것이 규칙이다** —
   `.sheet` 라는 이름은 카탈로그·결과물의 전체 화면 덮개가 이미 쓰고 있었고(Phase 1),
   E15 가 같은 이름으로 확인 시트를 정의하면서 `max-width:520px`·`max-height:80vh` 가
   소재 상세 시트로 흘러 데스크톱에서 **왼쪽 486px 상자로 찌그러져 있었다**. 화면을 찍는
   시각 회귀는 시트를 열지 않아 이걸 못 봤다 — 이제 uiqa C02 가 연다. */
.sheet-back{position:fixed;inset:0;z-index:var(--z-toast);background:#000a;display:flex;align-items:center;justify-content:center}.sheet-back .sheet{position:relative;inset:auto;display:block;background:var(--surface-3);border:1px solid var(--line-2);border-radius:12px;padding:16px 20px;min-width:320px;max-width:520px;max-height:80vh;overflow:auto;box-shadow:var(--e-3);-webkit-backdrop-filter:none;backdrop-filter:none}.sheet-back .sheet h2{font-size:var(--t-md);margin:0 0 10px}.sheet-back .sheet p{font-size:var(--t-sm);color:var(--ink-3);line-height:1.6;margin:0 0 6px}.sheet-back .sheet nav{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}.sheet-back .sheet nav button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink);border-radius:6px;padding:6px 12px;font-size:var(--t-sm)}.sheet-back .sheet nav button.primary{background:var(--ink);color:var(--surface-3);border-color:var(--ink)}.sheet-back .sheet nav button.danger{background:var(--bad);color:#fff;border-color:var(--bad)}.sheet-back .sheet nav button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}dl.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:var(--t-sm)}dl.keys dt{font:var(--t-xs) var(--mono);color:var(--hot);white-space:nowrap}dl.keys dd{margin:0;color:var(--ink-3)}.cut-switch{display:flex;align-items:center;gap:2px;margin-right:8px}.cut-switch button{color:var(--ink-1);width:var(--ctl-sm);height:var(--ctl-sm);font-size:var(--t-base);line-height:1}.cut-switch select{background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink-1);border-radius:4px;font-size:var(--t-xs);height:var(--ctl-sm);padding:0 6px;max-width:190px}.render-state{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:var(--t-sm);background:var(--surface-4);border-bottom:1px solid var(--line)}.render-state b{color:var(--cool)}.render-state span{color:var(--ink-3)}.render-state.failed b{color:var(--bad)}.render-state.completed b{color:var(--cool)}.render-state button{margin-left:auto;background:var(--surface-3);color:var(--ink);padding:4px 8px;font-size:var(--t-xs)}.draft-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--hot-ghost);border-bottom:1px solid var(--hot-dim);font-size:var(--t-sm)}.draft-bar b{color:var(--hot);white-space:nowrap;flex:none}.draft-bar span{color:var(--ink-3);min-width:0;flex:1 1 auto}.draft-bar nav{margin-left:auto;display:flex;gap:6px;flex:none}.draft-bar button{border:1px solid var(--hot-dim);color:var(--hot);height:var(--ctl-sm);padding:0 8px;font-size:var(--t-xs);white-space:nowrap}.draft-bar.stale{background:var(--surface-4);border-color:var(--line-2)}.draft-bar.stale b{color:var(--ink-1)}.zoom-row{display:flex;align-items:center;gap:8px}.zoom-row input{flex:1;accent-color:var(--hot)}.zoom-row b{font:var(--t-xs) var(--mono);color:var(--hot);width:26px;text-align:right}.pan-note{font-size:var(--t-xs);color:var(--ink-3);margin:4px 0 0;line-height:1.5}#c-title{cursor:text;border-radius:4px;padding:0px 2px;margin:-1px -3px}#c-title:hover{background:var(--surface-4)}#c-title.editing{background:var(--surface-4);outline:1px solid var(--hot)}#cut-title-note{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:1px}.title-alts{position:relative;display:block;margin-top:1px}.title-alts .ta-open{border:0;background:none;color:var(--cool);font-size:var(--t-xs);padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.title-alts .ta-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:var(--z-pop,40);min-width:260px;max-width:420px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--e-3);padding:4px}.title-alts .ta-pick{padding:8px}.title-alts .ta-pop{width:min(400px,calc(100vw - 32px));min-width:0;max-width:none;box-sizing:border-box}.title-alts .ta-pop .ta-go{display:block;width:100%;border-radius:6px;cursor:pointer}.title-alts .ta-rewrite{border-top:1px solid var(--line);margin-top:4px;padding:8px 8px 4px}.title-alts .ta-head{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ink-3)}.title-alts .ta-head b{color:var(--ink);font-weight:600}.title-alts .ta-level{width:100%;accent-color:var(--hot);margin:6px 0 0}.title-alts .ta-ends{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ink-3)}.title-alts .ta-pop .ta-go{margin-top:8px;text-align:center;height:var(--ctl-sm);padding:0 8px;border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot);font-size:var(--t-sm)}.title-alts .ta-pop .ta-go:disabled{opacity:var(--o-off)}#cut-title-note button{border:0;background:none;color:var(--hot);font-size:var(--t-sm);padding:0 0 0 4px;text-decoration:underline}.ovl-lane{background:#191b1f}.ovl-clip{position:absolute;top:9px;bottom:9px;border:1px solid #6f5ad0;background:#6f5ad022;border-radius:4px;color:#b3a5ee;padding:0 6px;overflow:hidden;text-align:left;cursor:grab;touch-action:none}.ovl-clip.on{border-color:var(--hot);color:var(--hot)}.ovl-clip span{font-size:var(--t-xs);white-space:nowrap;pointer-events:none}.ovl-clip .clip-edge{background:#6f5ad0}.ovl-clip:hover .clip-edge{opacity:.7}.sc-rate{background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink-3);border-radius:4px;font:var(--t-xs) var(--mono);padding:2px 3px}.sc-first{font:var(--t-xs) var(--mono);color:var(--hot);border:1px solid var(--hot-dim);background:var(--hot-ghost);border-radius:2px;padding:0px 2px;font-style:normal}.sc-row[draggable=true]{cursor:grab}.bulk-row{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 4px}.bulk-row button{padding:4px 6px;font-size:var(--t-sm);color:var(--ink-1)}.bulk-row button:hover{border-color:var(--hot);color:var(--hot)}.bulk-row button.armed{border-color:var(--hot);background:var(--hot-ghost);color:var(--hot)}.bulk-preview{flex:1 0 100%;margin:2px 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}.bulk-preview b{color:var(--hot)}.bulk-preview s{color:var(--ink-3)}.word-chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px}.chip{display:inline-flex;align-items:center;gap:2px;font-size:var(--t-xs);line-height:1;padding:2px 4px 2px 6px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface-4);color:var(--ink-1)}.chip.em{border-color:var(--hot);color:var(--hot);background:var(--hot-ghost)}.chip.off{opacity:.42;text-decoration:line-through}.chip.review{text-decoration:underline wavy var(--cool);text-underline-offset:3px;text-decoration-thickness:1px}.caption-item.has-review>div>span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cool);margin-right:6px;vertical-align:1px}.cap-review{font-style:normal;color:var(--cool);margin-left:8px}.review-next{display:flex;align-items:center;gap:6px;width:100%;height:var(--ctl-md);margin:0 0 8px;padding:0 10px;border:1px solid var(--cool-dim);border-radius:6px;background:none;color:var(--cool);font-size:var(--t-sm);text-align:left}.review-next i{width:6px;height:6px;border-radius:50%;background:var(--cool)}.review-next:hover{border-color:var(--cool)}.review-next[hidden]{display:none}.chip .chip-x{font-style:normal;font-size:var(--t-sm);color:var(--ink-3);padding:0 2px;border-radius:3px}.chip:hover .chip-x{color:var(--bad)}.add-caption-btn{border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot)!important;border-radius:6px;padding:6px 8px;font-size:var(--t-xs)}
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.asset-grid button{border:1px solid var(--line);border-radius:8px;background:var(--surface-1);padding:0;overflow:hidden;text-align:left}.asset-grid button:hover{border-color:var(--hot)}.asset-grid img{width:100%;height:88px;object-fit:contain;display:block;background:var(--void)}.asset-grid span{display:block;font-size:var(--t-xs);padding:6px 6px;color:var(--ink-2)}.compact-upload{height:72px;margin-top:8px}.compact-upload>span{font-size:var(--t-2xl)}
.volume-control{display:flex;align-items:center;gap:4px;margin-left:8px}.volume-control button{font-size:var(--t-md)}.volume-control input{width:72px;accent-color:var(--hot)}.volume-control span{font:var(--t-xs) var(--mono);color:var(--ink-3);width:18px}/* 재생 줄이 좁아지면(레이아웃 묶음을 열어 패널이 넓어질 때 · 768 폭) 가운데 묶음이 '화면 맞춤' 에 닿았다 (E01) —
   재생 줄이 사는 열(.stage-column)의 폭으로 판정해 볼륨 숫자 → 슬라이더 순으로 접고, 더 좁으면 가운데 정렬을 놓고 맞춤 단추 자리를 비운다 */
@container stage (max-width:640px){.transport{gap:6px}.volume-control{margin-left:2px}.volume-control input{width:52px}.volume-control span{display:none}}
@container stage (max-width:560px){.volume-control input{display:none}}
@container stage (max-width:500px){.transport{justify-content:flex-start;padding-right:96px}}
/* 좁은 폭: '화면 맞춤' 이 오른쪽 끝에 떠 있으면(absolute) 가운데 줄이 그 위로 지나간다 (390px 에서 음량 슬라이더가 단추를 덮었다).
   줄 안으로 들이고, 음량은 끄기 단추만 남긴다 — 휴대폰은 기기 음량이 있다 */
@media(max-width:720px){.transport{gap:6px;flex-wrap:wrap;height:auto;min-height:54px;padding-inline:var(--gut)}.fit-btn{position:static}.volume-control{margin-left:0}.volume-control input,.volume-control span{display:none}}
/* 파형은 **면적 그래프**다 — 가운데 기준 위아래 대칭인 연속 곡선 두 겹. 바깥이 포락(peak),
   안이 소리 크기(rms)다. 예전엔 막대였고, 촘촘해질수록 잔디처럼 보였다 (사용자가 '없어 보인다'
   고 한 그림의 나머지 절반이다). 곡선·좌표는 editor-app.js 가 굽고 여기서는 **색만** 정한다.
   색은 하나다: 주황(--hot)은 플레이헤드·선택의 뜻이라, 한 레인에서 같은 색이 두 뜻을 가지면
   어느 쪽도 안 읽힌다. 정점은 색이 아니라 모양이 말한다. */
.audio-wave:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#ffffff10}
.audio-wave stop.ed,.audio-wave stop.md{stop-color:var(--cool)}
.audio-wave stop.ce{stop-color:color-mix(in oklab,var(--cool),#fff 70%)}
.audio-wave stop.cm{stop-color:color-mix(in oklab,var(--cool),#fff 25%)}
.audio-wave .wv-halo{opacity:.50}
.audio-wave .wv-line{stroke:color-mix(in oklab,var(--cool),#fff 40%);stroke-opacity:.70;stroke-width:1}
.audio-wave .wv-glow{stroke:color-mix(in oklab,var(--cool),#fff 40%);stroke-opacity:.35;stroke-width:1.5}
.wave-empty{font:var(--t-xs) var(--mono);color:var(--ink-3);position:absolute;left:8px;top:50%;transform:translateY(-50%)}
/* 영상 레인 조각 (M9-d) — 타임라인 항목 하나가 조각 하나. 자리·폭은 클립 시각이라 자막·파형과 같은 자를 쓴다 */
.vseg{position:absolute;top:5px;bottom:5px;box-sizing:border-box;border:1px solid var(--hot-dim);background:var(--hot-ghost);border-radius:4px;overflow:hidden}
.vseg+.vseg{border-left-width:2px}
.vseg .thumb-strip{display:flex;height:100%;opacity:.72}.vseg .thumb-strip img{flex:0 0 auto;height:100%;aspect-ratio:16/9;object-fit:cover;border-right:1px solid #111}.vseg .thumb-strip span{margin:auto;font:var(--t-xs) var(--mono);color:#a47a4e;white-space:nowrap}
.vseg b{position:absolute;left:6px;bottom:3px;font:var(--t-xs) var(--mono);color:#e0d789;white-space:nowrap;text-shadow:0 0 3px #000}
.vseg-insert{border-color:var(--cool);background:#131d1c}.vseg-insert .thumb-strip{opacity:.9}.vseg-insert b{color:var(--cool)}
.wave-insert{position:absolute;top:18%;bottom:18%;box-sizing:border-box;border:1px dashed var(--cool-dim);border-radius:4px;background:repeating-linear-gradient(135deg,transparent 0 4px,#3fd3c614 4px 6px)}

/* ── 소재 카탈로그 ────────────────────────────────────────────
   썸네일이 주인공인 화면이다. 카드 자체는 링크가 아니라 컨테이너 —
   '편집하기'(우리 쪽에서 처리)와 '원본'(유튜브로 나감)이 서로 다른 행동이라
   한 덩어리로 묶으면 오클릭이 난다. */
/* 머리는 프로젝트와 **같은 모양**이다 (L02/R2) — 제목 줄 오른쪽에 표식, 설명은 아래 줄
   전체 폭. 화면마다 머리를 다르게 짜면 화면을 옮길 때마다 눈이 기준선을 다시 찾는다.
   가로 padding 4px 도 뺐다: 기둥 안의 블록은 기둥 끝에 붙는다. */
.catalog-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:0 24px;padding:20px 0 26px}
.catalog-head>div{min-width:0}
.catalog-head p{grid-column:1/-1}
.catalog-head h1{font-size:clamp(25px,3vw,38px);line-height:1.15;letter-spacing:-.04em}
.catalog-head p{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-md)}
/* 열 폭을 **내재적으로** 정한다 — `minmax(260px,…)` 는 390px 화면에서도 260px 을 요구해
   넘침의 절반을 만든다. `min(260px,100%)` 는 좁아지면 스스로 접힌다 (질의가 필요 없다). */
/* **라벨-필드는 격자다** (L02/R5). 예전엔 `라벨 필드` 쌍을 인라인으로 흩은 flex 라
   행마다 필드 시작 x 가 달랐다 (컷 개수 880 · 편집 방식 434 · 추가 지시 1016). 라벨을
   필드 위에 얹고 6열 격자에 앉히면 필드의 좌우 끝이 저절로 맞는다. 설명과 나란히 두던
   2열도 풀었다 — 폼이 카드의 절반만 쓰면 긴 select 가 잘린다. */
.look-note{padding:8px 10px;border:1px dashed var(--hair-2);border-radius:8px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.look-note a{color:var(--hot)}
.catalog-license{flex:none;padding:6px 12px;border-radius:1000px;background:rgba(63,211,198,.09);
  border:1px solid rgba(63,211,198,.18);color:var(--cool);font-size:var(--t-sm);white-space:nowrap}
.statbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:10px 16px;margin-bottom:12px;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.statbar b{color:var(--ink-2);font-weight:500}
.statbar .grow{margin-left:auto;display:flex;gap:8px;align-items:center}
.qbar{display:inline-block;width:72px;height:5px;border-radius:2px;background:var(--panel-3);
  overflow:hidden;vertical-align:middle}
.qbar i{display:block;height:100%;background:var(--cool)}
.qbar i.warn{background:var(--hot)}

/* 필터 다섯은 **동등한 것**이라 같은 폭이다 (L02/R4). 내용 폭대로 두면 언어 108 ·
   카테고리 176 · 길이 190 · 정렬 150 · 상태 120 으로 들쭉날쭉하고, 고르는 사람은 그
   들쭉날쭉을 '무언가 더 중요하다' 로 읽는다. 열 질의는 뷰포트가 아니라 이 줄이 놓인
   기둥을 본다 (@container — 브레이크포인트를 늘리지 않는다). */
.filters{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(5,minmax(0,1fr)) auto;
  gap:8px;align-items:center;margin-bottom:24px;background:rgba(28,28,30,.72);
  border:1px solid var(--hair);border-radius:16px;padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.filters input[type=search],.filters select{background:var(--panel-3);color:var(--ink);
  border:1px solid transparent;border-radius:1000px;padding:0 12px;font-size:var(--t-base);
  height:var(--ctl-lg);min-width:0;width:100%;font-family:inherit}
.filters select{padding-right:24px}
.filters input[type=search]:focus{outline:0;border-color:var(--hot-dim)}
.filters .spacer{display:none}
@container (max-width:900px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters input[type=search]{grid-column:1/-1}.filters .seg{grid-column:1/-1;justify-self:end}}
@container (max-width:560px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 카드 = 클릭 대상 하나. 안에 버튼을 또 두면 오클릭이 나고 카드가 두 배로 커진다.
   961편을 훑어야 하는 화면이라 한 화면에 몇 개가 들어오느냐가 곧 사용성이다. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 16px}
.tcard{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:0 0 12px;text-align:left;
  color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;
  transition:transform var(--dur-3) var(--ease-inout),box-shadow var(--dur-3) var(--ease-inout),border-color var(--dur-2) var(--ease)}
.tcard:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--lift)}
.tcard .thumb{border-radius:0;overflow:hidden;border:0;border-bottom:1px solid var(--hair)}
.tcard:hover .thumb{border-color:var(--hair-2)}
.tcard.busy .thumb{border-color:var(--hot)}
.tcard.done .thumb{border-color:var(--cool)}
.thumb{position:relative;aspect-ratio:16/9;background:var(--panel-3);display:block;
  width:100%;padding:0;border:0;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease)}
.tcard:hover .thumb img{transform:scale(1.035)}
.thumb .dur{position:absolute;right:4px;bottom:4px;background:#000C;color:#fff;
  font-family:var(--mono);font-size:var(--t-xs);padding:0px 4px;border-radius:3px}
.thumb .rank{position:absolute;left:8px;top:8px;background:rgba(15,17,19,.78);backdrop-filter:blur(8px);color:#FFF2A8;
  font-family:var(--mono);font-size:var(--t-xs);padding:2px 6px;border:1px solid rgba(255,255,255,.12);border-radius:20px}
.thumb .badge{position:absolute;inset:auto 0 0 0;background:#000C;padding:2px 4px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--hot);text-align:center}
.thumb .badge.ok{color:var(--cool)}
.thumb .badge.err{color:var(--bad)}
.tcard .txt{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0 13px}
.tcard h3{font-size:var(--t-md);font-weight:700;line-height:1.42;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tmeta{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--ink-3);min-width:0}
.tmeta b{color:var(--ink-2);font-weight:500}
.tmeta .ch{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tmeta .age:before{content:'·';margin-right:6px;color:var(--ink-3)}
/* 업로드 블록은 **자기 폭**으로 접힌다 — 뷰포트가 아니라 (N7 을 고치면서 옮겼다).
   넘침 자체는 질의가 아니라 내재적 크기(`min(260px,100%)`·`min-width:0`)로 이미
   없앴고, 남은 것은 '좁으면 세로로' 뿐이다. `.wrap` 이 컨테이너다. */
@container (max-width:620px){
}
@media(max-width:620px){.catalog-head{grid-template-columns:minmax(0,1fr);padding-top:10px}.catalog-license{display:none}.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.tcard .txt{padding:0 10px}.tcard h3{font-size:var(--t-base)}}
/* 숨기기는 썸네일 위에 얹는다. 자리를 차지하지 않고, 훑을 때 눈에 걸리지도 않는다 */
.hidebtn{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;
  border:0;background:#000B;color:#fff;font-size:var(--t-sm);line-height:1;cursor:pointer;
  opacity:0;transition:opacity var(--dur-1) var(--ease)}
.tcard:hover .hidebtn,.hidebtn:focus-visible{opacity:1}
.hidebtn:hover{background:var(--bad)}

/* 목록 모드 — 제목으로 훑을 때는 이쪽이 몇 배 빠르다 */
.tgrid.rows{grid-template-columns:1fr;gap:0px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tgrid.rows .tcard{flex-direction:row;align-items:center;gap:10px;background:var(--panel);
  padding:6px 10px}
.tgrid.rows .tcard:hover{background:var(--panel-2)}
.tgrid.rows .thumb{width:104px;flex:0 0 104px;border-radius:3px}
.tgrid.rows .rank,.tgrid.rows .badge{display:none}
.tgrid.rows .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tgrid.rows h3{-webkit-line-clamp:1;font-size:var(--t-base)}
.tgrid.rows .hidebtn{position:static;opacity:.35;flex-shrink:0}
.tgrid.rows .tcard:hover .hidebtn{opacity:1}
.tgrid.rows .rowstat{font-family:var(--mono);font-size:var(--t-xs);color:var(--hot);
  flex-shrink:0;text-align:right;min-width:74px}
.tgrid.rows .rowstat.ok{color:var(--cool)}
.tgrid.rows .rowstat.err{color:var(--bad)}

.seg{display:inline-flex;gap:2px;border:0;background:var(--fill);border-radius:1000px;padding:2px;overflow:hidden;height:var(--ctl-lg)}
.seg button{background:transparent;border:0;color:var(--ink-2);font-size:var(--t-sm);
  padding:0 12px;cursor:pointer;font-family:inherit;border-radius:1000px;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.seg button.on{background:var(--fill-2);color:var(--ink)}

.prog{font-family:var(--mono);font-size:var(--t-sm);color:var(--hot);display:flex;gap:6px;
  align-items:center}
.prog .dot{width:6px;height:6px;border-radius:50%;background:var(--hot);
  animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}
.prog.err{color:var(--bad)}
.prog.ok{color:var(--cool)}

/* ── 소재 상세: 재생 → 설정 → 편집 시작 ──────────────────────
   목록에서 바로 파이프라인을 돌리지 않는다. 한 편에 수십 분이 드는 일을
   썸네일만 보고 시작하게 두면 잘못 고른 것을 되돌릴 방법이 없다. */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);display:flex;justify-content:center;
  align-items:flex-start;overflow-y:auto;padding:24px 16px;z-index:var(--z-pop)}
.sheet[hidden]{display:none}
.sheet-box{background:var(--panel-2);border:1px solid var(--hair-2);border-radius:16px;
  width:min(940px,100%);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.sheet-head{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:var(--t-xl);font-weight:700;line-height:1.4;min-width:0}
.sheet-head .x{margin-left:auto;flex-shrink:0}
.sheet-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}
@media (max-width:820px){.sheet-body{grid-template-columns:1fr}}
.player{background:#000;aspect-ratio:16/9;position:relative}
.player iframe,.player img{width:100%;height:100%;border:0;display:block;object-fit:cover}
.player .noembed{position:absolute;inset:auto 0 0 0;background:#000B;color:var(--ink-2);
  font-size:var(--t-sm);padding:8px 10px;text-align:center}
/* 소재 시트의 사실 — 칩 넷이 위에 서고 나머지는 접기 안의 표다 (U01).
   표가 여덟 줄이던 시절 오른쪽 폼보다 설명이 길었다. */
.metatable{padding:12px 16px;font-size:var(--t-base);border-top:1px solid var(--line)}
.metatable .facts{margin-bottom:var(--sp-8)}
.metatable .lang-other{margin:0 0 var(--sp-8);display:flex;align-items:center;gap:var(--sp-6);
  font-size:var(--t-sm);line-height:var(--lh-snug)}
.metatable .lang-other .ic{width:14px;height:14px;flex:0 0 auto}
.metatable .fold{margin-top:0}
.metatable-in div{display:flex;gap:10px;padding:2px 0;border-bottom:1px dotted var(--line)}
.metatable-in div:last-child{border-bottom:0}
.metatable-in dt{color:var(--ink-3);min-width:76px;font-family:var(--mono);font-size:var(--t-sm);
  padding-top:1px}
.metatable-in dd{color:var(--ink);min-width:0;word-break:break-word}
.metatable-in{margin:0}
.attrib{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);white-space:pre-wrap;
  background:var(--panel-3);border-radius:var(--r-sm);padding:8px 10px;margin-top:4px}

/* 화면에는 없지만 읽는 도구에는 있는 것. 시각적으로 자리를 안 차지하되 `display:none` 이
   아니어야 한다 — 그건 스크린리더에게도 없는 것이 된다. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* 카드 위의 작은 라벨. **제목이 아니다** — 계정 화면의 '지금 할 일' 은 아래 큰 제목을
   설명하는 말이라, 제목 단계를 맞추려고 h2 로 올렸더니 `.status-card h2`(25px)에 걸려
   같이 커졌다. 태그는 구조이고, 구조가 아닌 것에 제목 태그를 주면 그 다음이 꼬인다. */
.card-eyebrow{font:600 var(--t-md)/1.4 var(--disp);color:var(--ink-2);margin:0 0 8px}

/* ── 소재 언어 다리 (C02) — 다른 언어라는 사실은 경고가 아니라 **갈림길**이다.
   빨강(--bad)이 아니라 액센트를 쓰는 이유가 그것이다: 고치라는 게 아니라 고르라는 뜻이다. */
.lang-other{color:var(--hot)}
.lang-bridge{margin:0;padding:8px 10px;border:1px solid var(--hot-dim);background:var(--hot-ghost);
  border-radius:var(--r);font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-body)}
.lang-bridge[hidden]{display:none}
.lang-bridge b{color:var(--hot)}
.lang-bridge a{color:var(--hot)}

/* ── 발행 키트 (C01) — 붙여넣으면 발행되는 문구. 항목마다 같은 모양이라
   화면이 항목을 몰라도 그린다 (publish.py 가 fields[] 를 정한다). */
.pubkit{padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px}
.pubkit .pk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pubkit .pk-top select{background:var(--panel-3);border:1px solid var(--hair-2);
  color:var(--ink);border-radius:var(--r-sm);height:var(--ctl-md);padding:0 8px;font-size:var(--t-base)}   /* 높이는 계단 (A28 · 25px 였다) */
.pubkit .pk-top .hint{font-size:var(--t-sm);color:var(--ink-3);margin-left:auto}
.pk-warn{background:var(--hot-ghost);border:1px solid var(--hot-dim);border-radius:var(--r);
  padding:8px 12px;font-size:var(--t-base);line-height:var(--lh-body);color:var(--ink-2)}
.pk-warn b{color:var(--hot);display:block;margin-bottom:2px}
.pk-warn ul{margin:0;padding-left:16px}
/* 잔액 부족 한 줄 (첫 성공 S09) — 견적 문장 안에 이어지는 글이라 상자(.pk-warn)가 아니라 색이다. 상자는 줄 안에서 윗줄을 덮는다 */
.short-warn{color:var(--bad);font-weight:600}
/* 알림은 경고가 아니다 — '이렇게 돼 있으니 알아 두라' 다. 색과 무게를 낮춰야
   경고가 뜰 때 눈이 그리로 간다 (둘을 같은 빨강으로 그리면 둘 다 벽지가 된다). */
.pk-note{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;font-size:var(--t-base);line-height:var(--lh-body);color:var(--ink-3)}
.pk-note b{color:var(--ink-2);display:block;margin-bottom:2px;font-weight:600}
/* 한 줄짜리 알림(아이콘 · 말 · 설명 점)은 가로로 선다 — b 의 display:block 이 이기지 않게 */
#cut-review-note{display:flex;align-items:center;gap:var(--sp-6)}
#cut-review-note b{display:inline;margin:0}
#cut-review-note .ic{width:14px;height:14px;color:var(--ink-3);flex:0 0 auto}
.pk-note ul{margin:0;padding-left:16px}
.pk-f{display:flex;flex-direction:column;gap:4px}
/* 유튜브에 바로 올리기 — 발행 문구 아래 한 상자 (score-uplift S3) */
.pk-yt{display:flex;flex-direction:column;gap:var(--sp-8);border-top:1px solid var(--hair-2);padding-top:var(--sp-12)}
.pk-yt h3{display:flex;align-items:center;gap:var(--sp-6);margin:0;font-size:var(--t-md)}
.pk-yt .ic{width:16px;height:16px}
.pk-yt-row{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.pk-yt-row label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm);color:var(--ink-3);min-width:0}
.pk-yt-row select,.pk-yt-row input{height:var(--ctl-md);background:var(--panel-3);border:1px solid var(--hair-2);border-radius:var(--r);color:var(--ink);padding:0 var(--sp-8)}
.pk-yt .btn.primary{align-self:flex-start}
.pk-yt-state{margin:0;font-size:var(--t-sm)}
.pk-yt-err{margin:0;font-size:var(--t-sm);color:var(--bad)}
.pk-f header{display:flex;align-items:center;gap:8px}
.pk-f header b{font-size:var(--t-md);font-weight:600}
.pk-f header .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.pk-f header .n.over{color:var(--bad)}
.pk-f header button{margin-left:auto}
.pk-f textarea{width:100%;box-sizing:border-box;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r);color:var(--ink);
  padding:8px 12px;font-family:var(--body);font-size:var(--t-md);
  line-height:var(--lh-body);resize:vertical}
.pk-f textarea:focus{outline:none;border-color:var(--hot)}
.pk-f .note{font-size:var(--t-sm);color:var(--ink-3)}

.setform{border-left:1px solid var(--line);padding:12px 16px;display:flex;
  flex-direction:column;gap:11px}
@media (max-width:820px){.setform{border-left:0;border-top:1px solid var(--line)}}
.setform label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);
  font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.setform select,.setform input{background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);padding:6px 8px;font-size:var(--t-base);
  font-family:inherit;text-transform:none;letter-spacing:0}
.setform .row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.setform .hint{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;
  text-transform:none;letter-spacing:0}
.setform .go{margin-top:2px}
.worker-warn{background:#2A1B08;border:1px solid var(--hot-dim);color:#FFD9A8;
  border-radius:var(--r-sm);padding:8px 10px;font-size:var(--t-sm);line-height:1.5}
.worker-warn code{font-family:var(--mono);color:var(--hot)}
.steps{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:var(--t-sm)}
.steps i{display:flex;gap:6px;align-items:center;font-style:normal;color:var(--ink-3)}
.steps i.on{color:var(--hot)}
.steps i.ok{color:var(--cool)}
.steps i b{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ── 템플릿 라이브러리 ── */
.template-library{background:radial-gradient(circle at 85% 18%,#1A1A22 0,transparent 35%),radial-gradient(circle at 8% 8%,#211615 0,transparent 28%),var(--void)}
.template-wrap{max-width:1240px;margin:auto;padding:56px 24px 100px}.library-hero{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;padding:16px 0 40px;border-bottom:1px solid var(--line)}.eyebrow{font:var(--t-sm) var(--mono);letter-spacing:.15em;color:var(--hot)}.library-hero h1{font-size:clamp(36px,5vw,66px);line-height:1.04;margin:12px 0 16px;letter-spacing:-.055em}.library-hero p{margin:0;color:var(--ink-2);font-size:var(--t-lg);line-height:1.8}
.library-stats{display:flex;border:1px solid var(--line);border-radius:12px;background:#121416aa;backdrop-filter:blur(12px);flex-shrink:0}.library-stats div{min-width:105px;padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column}.library-stats div:last-child{border:0}.library-stats b{font:700 var(--t-2xl) var(--mono)}.library-stats span{font-size:var(--t-sm);color:var(--ink-3)}
.library-controls{padding:24px 0 24px;display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:12px 20px;align-items:center}.library-search{height:44px;display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:0 12px;color:var(--ink-3)}.library-search:focus-within{border-color:var(--hot-dim)}.library-search input{background:transparent;border:0;outline:0;color:var(--ink);font:var(--t-base) var(--body);width:100%}.library-search kbd{border:1px solid var(--line-2);border-radius:4px;padding:0 6px;font:var(--t-sm) var(--mono)}
.filter-row{display:flex;gap:6px;overflow:auto}.filter-row button,.library-sort button{white-space:nowrap;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:16px;padding:6px 12px;font-size:var(--t-sm)}.filter-row button.on,.library-sort button.on{background:var(--ink);border-color:var(--ink);color:var(--void)}.library-sort{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.library-sort span{font:var(--t-sm) var(--mono);color:var(--ink-3)}
.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.library-card{position:relative;background:linear-gradient(145deg,#1A1A1E,#131315);border:1px solid var(--line-2);border-radius:12px;padding:12px;transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);overflow:hidden}.library-card:hover{transform:translateY(-4px);border-color:#4a5057;box-shadow:var(--e-2)}.save-template{position:absolute;z-index:2;right:23px;top:23px;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff2a;background:#090a0cbb;color:#fff;font-size:var(--t-2xl)}.save-template.on{background:var(--hot);border-color:var(--hot);color:#1a0e03}
.template-phone{height:340px;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(165deg,#080909 0 39%,#34373a 39% 73%,#080909 73%);box-shadow:inset 0 0 0 1px #fff1}.template-phone:before{content:'';position:absolute;inset:39% 0 27%;background:radial-gradient(circle at 52% 48%,#777 0 8%,#45484b 9% 23%,transparent 24%),linear-gradient(135deg,#333,#555)}.phone-top{position:absolute;left:14px;right:14px;top:14px;display:flex;align-items:center;gap:6px;font:var(--t-xs) var(--mono);color:#fff9}.phone-top i,.phone-foot i{width:7px;height:7px;border-radius:50%;background:var(--accent)}.phone-top em{margin-left:auto;border:1px solid #fff3;border-radius:8px;padding:2px 6px;font-style:normal;color:#fff}.phone-sub{position:absolute;z-index:1;top:22%;left:8%;right:8%;text-align:center;color:var(--fill);font-family:var(--disp);font-weight:900;font-size:var(--t-2xl);line-height:1.25;text-shadow:0 2px 8px #000}.phone-sub span,.phone-sub b{display:block}.phone-sub b{color:var(--accent)}.phone-sub.box{background:var(--box);padding:8px;border-radius:4px;text-shadow:none}.phone-focus{position:absolute;top:51%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:2px solid #fff8;border-radius:50%}.phone-wave{position:absolute;left:18%;right:18%;top:64%;height:18px;background:repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 7px);opacity:.65}.phone-foot{position:absolute;bottom:14px;left:14px;display:flex;align-items:center;gap:6px;font:var(--t-xs) var(--mono);color:#fff9}.scene-paper{background:linear-gradient(#f0ebe2 0 39%,#d5d3cf 39% 73%,#f0ebe2 73%)}.scene-paper .phone-top,.scene-paper .phone-foot{color:#292724}.scene-soft{background:linear-gradient(155deg,#372a31,#755d64 45%,#1d181b)}.scene-neon{background:linear-gradient(160deg,#070811,#20273a 50%,#08090c)}.scene-news .phone-sub{top:18%;border-left:4px solid var(--accent)}.scene-bold .phone-sub{font-size:var(--t-3xl)}.scene-mono{filter:grayscale(1)}
.template-copy{padding:14px 2px 10px}.template-copy>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.template-copy h2{font-size:var(--t-xl)}.template-copy>div>span{font:var(--t-xs) var(--mono);color:var(--hot)}.template-copy p{height:40px;margin:6px 0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.65}.template-tags{display:flex;gap:5px}.template-tags span{font:var(--t-xs) var(--mono);color:var(--ink-3);border:1px solid var(--line);border-radius:8px;padding:2px 6px}.apply-template{width:100%;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-3);color:var(--ink);padding:8px 10px;display:flex;justify-content:space-between;font-size:var(--t-sm)}.apply-template:hover{background:var(--ink);color:var(--void)}
.library-empty{padding:72px;border:1px dashed var(--line-2);border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}.library-empty span{color:var(--ink-3);font-size:var(--t-base)}.project-picker{width:min(620px,calc(100% - 28px));border:1px solid var(--line-2);border-radius:12px;background:var(--panel);color:var(--ink);padding:0;box-shadow:var(--e-4)}.project-picker::backdrop{background:#000b;backdrop-filter:blur(4px)}.project-picker form>header{display:flex;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}.project-picker h2{font-size:var(--t-3xl);margin-top:4px}.project-picker header button{border:0;background:transparent;font-size:var(--t-4xl);color:var(--ink-2)}.project-picker form>p{font-size:var(--t-sm);color:var(--ink-3);margin:14px 20px}.short-picker-list{padding:0 20px 20px;max-height:52vh;overflow:auto}.short-picker-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px;border:1px solid var(--line);margin-top:6px;border-radius:8px;color:var(--ink)}.short-picker-list a:hover{border-color:var(--hot-dim);background:var(--hot-ghost)}.short-picker-list a span{display:flex;flex-direction:column;min-width:0}.short-picker-list b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.short-picker-list small{color:var(--ink-3);font-size:var(--t-xs)}.short-picker-list em{color:var(--hot);font:var(--t-sm) var(--mono);font-style:normal;white-space:nowrap}.picker-loading{padding:24px;text-align:center;color:var(--ink-3);font-size:var(--t-sm)}
@media(max-width:980px){.library-grid{grid-template-columns:repeat(3,1fr)}.library-stats{display:none}}@media(max-width:720px){.template-wrap{padding:30px 14px 70px}.library-hero h1{font-size:var(--t-6xl)}.library-hero p br{display:none}.library-controls{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,1fr);gap:10px}.template-phone{height:270px}.library-card{padding:9px}.save-template{right:15px;top:15px}.phone-sub{font-size:var(--t-lg)}}@media(max-width:430px){.template-phone{height:240px}.template-copy p,.template-tags{display:none}.template-copy h2{font-size:var(--t-md)}}

/* 카탈로그 밀도와 크레딧 표시 */
.template-wrap{max-width:1100px;padding-top:38px}.library-hero.compact{align-items:center;padding:0 0 27px}.library-hero.compact h1{font-size:var(--t-6xl);line-height:1.15;margin:6px 0 4px;letter-spacing:-.045em}.library-hero.compact p{font-size:var(--t-base)}.credit-wallet{min-width:160px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:linear-gradient(135deg,#211A13,var(--surface-3));display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 12px}.credit-wallet span{font-size:var(--t-xs);color:var(--ink-2)}.credit-wallet b{font:700 var(--t-xl) var(--mono);color:var(--hot)}.credit-wallet small{grid-column:1/-1;font-size:var(--t-xs);color:var(--ink-3)}.library-controls{grid-template-columns:minmax(240px,300px) 1fr;padding:21px 0 18px}.library-search{height:40px}.library-grid{gap:16px}.library-card{padding:10px;border-radius:12px}.template-phone{height:292px}.save-template{right:18px;top:18px;width:31px;height:31px}.credit-price{position:absolute;z-index:2;left:18px;top:18px;padding:4px 8px;border-radius:16px;background:#08090ccc;border:1px solid #ffffff25;color:#fff;font:var(--t-xs) var(--mono);backdrop-filter:blur(5px)}.credit-price b{color:var(--hot);font-size:var(--t-sm)}.template-copy{padding:11px 2px 8px}.template-copy p{margin:4px 0;height:35px}.apply-template{padding:8px 10px}.create-template{min-height:430px;border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,var(--surface-3),var(--surface-2))}.create-plus{width:64px;height:64px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-size:var(--t-5xl);color:var(--ink-2);margin-bottom:18px}.create-template h2{font-size:var(--t-xl)}.create-template p{max-width:190px;color:var(--ink-3);font-size:var(--t-xs);margin:8px auto 24px}.create-template .apply-template{width:auto;padding:8px 14px}.library-sort{min-height:30px}
@media(max-width:720px){.library-hero.compact{align-items:flex-start}.library-hero.compact h1{font-size:var(--t-5xl)}.credit-wallet{display:none}.template-phone{height:255px}.create-template{min-height:377px}}@media(max-width:430px){.template-phone{height:225px}.create-template{min-height:335px}.credit-price{left:13px;top:13px}.save-template{right:13px;top:13px}}

/* ── 마감 패스 (2026-09): 스켈레톤 · SVG 아이콘 · 스크롤바 · 셀렉트 · 모바일 크롬 ──
   새 색을 만들지 않는다 — 기존 토큰만 조합한다. */
.skel{position:relative;overflow:hidden;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.skel::after,.studio-skeleton i::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:skel var(--dur-loop-slow) linear infinite}
/* 골격은 한 벌이다 (R6-10) — 편집기 골격(.studio-skeleton i)은 같은 색 셋의 그라데이션을 돌려서 아무것도 안 보이는데
   페인트만 썼다. 이제 .skel 과 같은 transform 스윕이다 (다른 화면의 골격은 class="skel" 을 단다) */
@keyframes skel{to{transform:translateX(100%)}}
.catalog-loader{min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-3);font:var(--t-sm) var(--mono)}
.catalog-spinner{width:15px;height:15px;border:2px solid var(--line-2);border-top-color:var(--hot);
  border-radius:50%;animation:catalog-spin var(--dur-5) linear infinite}
#catalog-sentinel{height:1px}
@keyframes catalog-spin{to{transform:rotate(360deg)}}
.ic{width:var(--ic-md);height:var(--ic-md);display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}
.btn,.tcard .thumb,.tool,.pill,select{transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:24px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238A9399' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center}
/* 장면 이미지 없는 카드가 '고장'처럼 보이지 않게 */
.hcover i{background:radial-gradient(90% 130% at 50% 0%,#1B1B1F00 30%,#0F0F11 100%),linear-gradient(150deg,#1A1A1E,#0E0E10);letter-spacing:.12em}
.vcover>i{letter-spacing:.12em}
/* 모바일 크롬 — 내비가 세로로 무너지지 않게: 줄바꿈 금지 + 가로 스크롤 */
.chrome .nav a{white-space:nowrap}
/* **크롬 자신은 스크롤하지 않는다** — 넘치는 것은 내비 한 줄이다(.nav 가 가로로 민다). 예전엔 크롬 전체가
   overflow-x:auto 라 그 안의 계정 메뉴(.usermenu · absolute)가 크롬 높이에서 잘려 390px 에서 머리만 보이고
   잔액·알림·로그아웃에 손이 안 닿았다 (점검 A01). overflow 를 주면 세로도 같이 잘린다 (CSS 규칙: 한 축만 visible 일 수 없다). */
@media (max-width:760px){
  .chrome{gap:8px;padding:0 10px}
  .chrome>.crumb{display:none}
  .chrome>*{flex-shrink:0}
  .chrome .nav{flex-shrink:1;min-width:0}
  /* z-index 1 — 내비가 둘째 줄로 내려가면 열린 계정 메뉴 위로 내비 알약이 그려졌다 (스크롤 상자인 내비가 먼저 합성된다) */
  .chrome .right{position:sticky;right:0;z-index:1;background:rgba(28,30,32,.92);padding-left:8px}
  .wrap{padding:14px 12px 60px}
}
/* 스튜디오 아이콘 크기 · 재생/음소거 상태 토글 */
.icon-btn .ic{width:16px;height:16px;margin:auto}
.icon-btn>b{font-size:var(--t-md);font-weight:700;line-height:1}  /* 글자 하나짜리 아이콘 단추 (편집기 단축키 ?) */
.tool span{display:grid;place-items:center}
.tool .ic{width:19px;height:19px}
.searchbox .ic{width:14px;height:14px}
.add-caption-btn{display:inline-flex;align-items:center;gap:4px}
.add-caption-btn .ic{width:11px;height:11px}
.caption-eye{display:grid;place-items:center}
.caption-eye .ic{width:14px;height:14px}
.caption-more{display:grid;place-items:center}
.caption-more .ic{width:12px;height:12px}
.timeline-tools button{display:grid;place-items:center;width:26px;height:26px}
.timeline-tools .ic{width:13px;height:13px}
.transport button{display:grid;place-items:center}
.transport .ic{width:14px;height:14px}
.transport .repeat-btn.on{color:var(--hot)}
.play-main .ic{width:15px;height:15px}
.play-main .ic-pause{display:none}
.play-main.playing .ic-play{display:none}
.play-main.playing .ic-pause{display:block}
#mute .ic-off{display:none}
#mute.muted .ic-on{display:none}
#mute.muted .ic-off{display:block}
.guide-btn{display:inline-flex;align-items:center;gap:5px}
.guide-btn .ic{width:13px;height:13px}
/* 이름표는 쪼개지 않는다 — 글자를 한 칸 키운 뒤 폰 폭에서 '비/교'·'앱/UI' 로 갈라졌다 (type-scale T4).
   폰에서는 해상도 표기(9:16 · 1080×1920)를 빼서 자리를 만든다 — 기기 이름이 같은 말을 한다. */
.guide-btn,.device-label b{white-space:nowrap}
@media(max-width:720px){.device-label em{display:none}.stage-toolbar{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;padding-block:6px}}
.track-label span{display:grid;place-items:center}
.track-label .ic{width:13px;height:13px}
.upload-card .ic{width:22px;height:22px}
@media (width < 1100px){.workflow{display:none}}

/* ── 모바일 (≤720px) — 표는 가로 스크롤로 도피하고, 그리드는 한두 열로 줄인다 ── */
@media (max-width:720px){
  .chrome{flex-wrap:wrap;height:auto;padding:8px 12px;row-gap:6px}
  .chrome .nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chrome .crumb b{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
  .wrap{padding:14px 12px 60px}
  .vlist{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .srchead .act{margin-left:0;width:100%}
  .filters input[type=search]{min-width:0;flex:1 1 100%}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .rgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .sum{grid-template-columns:repeat(3,1fr)}
  .sum b{font-size:var(--t-2xl)}
  .grid2{grid-template-columns:1fr}
  .statbar{overflow-x:auto;white-space:nowrap}
}
/* 에디터는 데스크톱 도구다 — 폰에서는 망가진 4열 대신 안내를 띄운다 */
@media (max-width:760px){
  .studio-shell{display:block;height:auto;overflow:auto}
  .tool-rail,.asset-panel,.inspector-panel,.timeline-panel{display:none}
  .stage-column{min-height:70vh}
  .studio-top{flex-wrap:wrap;height:auto;row-gap:6px;padding:8px 10px}
  .studio-shell::before{content:"화면이 좁아 프리뷰만 표시합니다 — 자막·타임라인 편집은 넓은 화면에서 하세요";
    display:block;padding:10px 12px;font-size:var(--t-base);color:#FFD9A8;background:#2A1B08}
}

/* 렌더 화면 — 성과 요약 스트립 (publish → perf-sync 루프 가시화) */
.perfstrip{margin:0px 0 12px;padding:8px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel);font-size:var(--t-base);color:var(--ink-2)}
.perfstrip b{color:var(--ink)}
.perfstrip code{font-family:var(--mono);font-size:var(--t-sm);color:var(--hot);margin-left:6px}

/* 에디터 분석 카드 — 컷의 전제 (judge 의 context: 30분 중간의 20초는 전제 없이는 안 웃기다) */
.cut-context{margin-top:10px;padding:8px 12px;border-left:2px solid var(--hot);
  background:var(--panel-2);border-radius:0 var(--r) var(--r) 0}
.cut-context b{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--hot);margin-bottom:4px}
.cut-context p{margin:0 0 6px;font-size:var(--t-base);line-height:1.6;color:var(--ink-2)}
.cut-context small{display:block;font-size:var(--t-sm);color:var(--ink-3);line-height:1.7}
.cut-context small::before{content:'·  '}
p.evidence,.why.evidence{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}

/* 프로젝트 상세 — 측정된 순간 (점수가 안 쓴 순간을 사람이 컷으로 살리는 입구) */
.moments{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.moment{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.moment.covered{opacity:.55}
.moment .mtime{font-family:var(--mono);font-size:var(--t-base);color:var(--cool);flex:0 0 52px}
.moment .mbar{flex:0 0 90px;height:5px;border-radius:2px;background:var(--panel-3);
  overflow:hidden;display:block}
.moment .mbar u{display:block;height:100%;background:var(--hot)}
.moment .mlabel{flex:1;min-width:0;font-size:var(--t-base);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment .mtag{font-family:var(--mono);font-size:var(--t-xs);font-style:normal;color:var(--hot);
  white-space:nowrap}
.moment .mtag.off{color:var(--ink-3)}
.moment .btn.mini{font-size:var(--t-sm);padding:4px 10px;white-space:nowrap}
@media (max-width:720px){.moment .mbar{display:none}}

/* ── 레이아웃 라이브러리 ────────────────────────────────────────
 * 미리보기는 doc.layout 의 픽셀 값을 %로 환산해 그린 것이다. 목업이 아니라
 * 파이프라인이 만들 doc 그대로이고, 그래서 여기서 본 것이 렌더에서 나온다.
 * 크기 단위는 cqh(컨테이너 높이 1%) — 카드 크기가 달라도 비율이 유지된다.
 */
.lay-stage{position:relative;container-type:size;background:#000;overflow:hidden;
  border-radius:6px;isolation:isolate}
.lay-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08)}
.lay-video{position:absolute;overflow:hidden;background:#05070A}
.lay-video-inner{position:absolute;background-size:cover;background-position:center}
/* 원본에 박힌 자막을 가리는 띠 — 렌더의 boxblur + 0.82 밝기와 같은 뜻 (자리는 doc.source_cover.rect) */
.lay-cover{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;
  -webkit-backdrop-filter:blur(10px) brightness(.82);backdrop-filter:blur(10px) brightness(.82);
  /* 위쪽 14% 를 푼다 — render.COVER_FEATHER 와 짝 (딱 끊긴 띠는 '가렸다' 는 표식이 된다) */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
.lay-cover.mid{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
video.lay-video-inner{object-fit:fill;inset:auto;background:#000}
/* 원본 자막 가리기(doc.source_subs · blur) — 영상과 같은 크롭 층(paintCrop)에 원본 % 로 얹는 상자. 렌더의 1/12 축소 블러 + 0.82 밝기와
   같은 뜻이고, 네 변을 푸는 폭(--fx · 세로 18%)은 render.SRC_COVER_FEATHER 와 짝이다 */
.lay-srccover-layer{position:absolute;pointer-events:none;z-index:1}
.lay-srccover{position:absolute;-webkit-backdrop-filter:blur(9px) brightness(.82);backdrop-filter:blur(9px) brightness(.82);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fx,6%),#000 calc(100% - var(--fx,6%)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 var(--fx,6%),#000 calc(100% - var(--fx,6%)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-composite:intersect}
/* 나눠 보기 — 칸 층. 자리·크롭은 doc.layout.tile_track 의 값이다 (render.js mountTiles). 끌기는 아래의 영상 상자가 받는다 */
.lay-tiles{position:absolute;inset:0;z-index:2;pointer-events:none;background:#000}
.lay-tiles[hidden]{display:none}
.lay-tile{position:absolute;overflow:hidden}
.lay-tile>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lay-seams>i{position:absolute;display:block;background:var(--seam,#000)}
/* 편집기 — 나눠 보기의 구간 목록 (영상 맞추기 묶음). 시각은 누르면 그 자리로 간다 */
.split-spans{margin:0 0 var(--sp-8)}
.split-kind{margin:var(--sp-8) 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.split-spans .group-label{margin:var(--sp-12) 0 var(--sp-4)}
.split-span{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--ctl-lg);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.split-span .linky{font:var(--t-xs) var(--mono);color:var(--ink-3)}
.split-span b{font-weight:600;color:var(--ink-1)}
.split-span[data-n="1"] b{color:var(--ink-3)}
.split-span em{font-style:normal;font-size:var(--t-xs);color:var(--hot)}
.split-flip{margin-left:auto;height:var(--ctl-sm);padding:0 var(--sp-8);border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);border-radius:6px;font-size:var(--t-xs);white-space:nowrap}
.split-flip:hover:not(:disabled){border-color:var(--hot);color:var(--hot)}
.split-flip:disabled{opacity:var(--o-off)}
.split-here{margin:var(--sp-8) 0 0;width:100%}
.pv.pv-source{border-radius:0}.pv.pv-source .layer{z-index:2}
.lay-band-deco{position:absolute;pointer-events:none;object-fit:fill;user-select:none}
.lay-band{position:absolute;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:0 6cqw;text-align:center;overflow:hidden}
.lay-band span{line-height:1.24;font-weight:700;text-wrap:balance;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.lay-band--header{background:rgba(18,24,38,.86)}
.lay-band--header span{color:#fff}
.lay-band--brand{background:#5B3DF5}
.lay-band--brand span{color:#fff;letter-spacing:.06em}
.lay-band--footer{background:rgba(18,24,38,.80)}
.lay-band--footer span{color:#C8D0DC;font-weight:500}
.lay-band--footer span:only-child{-webkit-line-clamp:1}
.formatted-text{flex:none;letter-spacing:0;white-space:pre;text-wrap:nowrap}
.formatted-line{display:block;white-space:pre;text-wrap:nowrap}
.formatted-text .formatted-line>span{display:inline;overflow:visible;line-height:1;letter-spacing:0;text-wrap:nowrap;-webkit-line-clamp:unset;vertical-align:baseline}
.lay-band.has-format{overflow:visible}
.text-format{margin-top:8px;border:1px solid var(--line-2);border-radius:6px;padding:var(--sp-8);color:var(--ink);font-size:var(--t-sm)}
.text-format summary{cursor:pointer;color:var(--hot);font-weight:600}
.text-format textarea{display:block;box-sizing:border-box;width:100%;resize:vertical;min-height:48px;margin-top:8px;padding:var(--sp-8);border:1px solid var(--line-2);border-radius:4px;background:var(--surface-4);color:var(--ink);font-family:inherit;font-size:var(--t-md);line-height:1.5;cursor:text}
.format-hint{font-size:var(--t-xs);line-height:1.5;color:var(--ink-3);margin:6px 0}
.format-scope,.format-actions{display:flex;gap:6px;align-items:center;justify-content:space-between;margin:6px 0;flex-wrap:wrap}
.format-scope b{font-size:var(--t-xs);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.format-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:6px}.format-tools>label{display:grid;gap:4px;min-width:0;color:var(--ink-2);white-space:nowrap}.format-tools>label>input:not([type=color]),.format-tools>label>select{width:100%;min-width:0;box-sizing:border-box}.format-tools>label>input[type=color]{width:44px}.text-format button{font-size:var(--t-xs);padding:4px 6px;background:var(--surface-4);border:1px solid var(--line-2);border-radius:4px;color:var(--ink)}
.text-format[aria-busy=true]{opacity:.7}.band-title-row input[data-band-title]{font-weight:700}
.band-title-row{grid-template-columns:minmax(0,1fr)}.band-title-row small{font-family:var(--body);overflow:visible;white-space:normal}
.band-title-row textarea[data-band-title]{box-sizing:border-box;width:100%;font-family:var(--body);min-height:42px;resize:vertical;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;font-size:var(--t-sm);line-height:1.35;padding:6px 6px;font-weight:700}
.band-title-row textarea[data-band-title]::placeholder{color:var(--ink-3);font-weight:400}
.band-title-hint{font-size:var(--t-xs);color:var(--ink-3)}
.band-row .band-auto{font-style:normal;font-size:var(--t-xs);color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;margin-left:4px}
.band-row [data-format-selection]::selection{background:color-mix(in srgb,var(--hot) 45%,transparent)}
.text-format.format-external{margin-top:4px}
.band-row textarea[data-band-text]{min-width:0;resize:vertical;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;font-size:var(--t-sm);line-height:1.35;padding:var(--sp-4) var(--sp-6);font-family:inherit}
.band-row.band-title-row{grid-template-columns:56px 1fr;align-items:start}
.band-title-row .band-title-hint{grid-column:2;line-height:1.4}.band-more{margin-top:8px;border-top:1px solid var(--line-2)}
.band-more summary{padding:8px 2px 4px;color:var(--ink-3);font-size:var(--t-xs);cursor:pointer;list-style:none}
.band-more summary::before{content:'＋';display:inline-block;width:16px;color:var(--hot)}
.band-more[open] summary::before{content:'−'}
.band-more-body{padding-bottom:3px}
.band-inline-settings{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}
.band-more .text-format{margin-top:6px;background:transparent}
.lay-sub{position:absolute;left:0;right:0;transform:translateY(-100%);
  padding:0 5.5cqw;text-align:center;line-height:1.22;white-space:pre}
.lay-sub i{font-style:normal}
/* 유튜브 앱 화면 겹쳐보기 — 앱이 영상 위에 얹는 버튼·글자를 그 모양대로. 기하는 서버의 ui_zones 다 */
.lay-ui{position:absolute;pointer-events:none;color:#fff;font-family:var(--body);
  display:flex;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.lay-ui--top{align-items:flex-start;justify-content:space-between;padding:2.2cqh 4cqw 0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.lay-ui--top b{font-size:2.4cqh;font-weight:700}
.lay-ui--top span{font-size:2.2cqh;opacity:.9}
.lay-ui--rail{flex-direction:column;align-items:center;justify-content:flex-end;gap:2.2cqh;padding-bottom:1cqh}
.lay-ui--rail span{display:flex;flex-direction:column;align-items:center;gap:.4cqh}
.lay-ui--rail i{display:grid;place-items:center;width:5.2cqh;height:5.2cqh;border-radius:50%;
  background:rgba(40,40,44,.75);font-style:normal;font-size:2.4cqh}
/* 겹쳐보기의 표식은 선 아이콘이다 (render.js 의 UI_ICON) — 글자가 아니라 SVG 라
   text-shadow 가 안 걸린다. 같은 그림자를 drop-shadow 로 준다. */
.lay-ui--rail i svg{width:2.9cqh;height:2.9cqh;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.lay-ui--rail small{font-size:1.45cqh;font-weight:500}
.lay-ui--bottom{flex-direction:column;justify-content:flex-start;gap:1.2cqh;padding:2.4cqh 18cqw 0 4cqw;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6) 40%)}
.lay-ui-ch{display:flex;align-items:center;gap:1.4cqw;font-size:1.9cqh}
.lay-ui-ch i{width:4cqh;height:4cqh;border-radius:50%;background:#c9c9cf}
.lay-ui-ch b{font-weight:600}
.lay-ui-ch em{font-style:normal;font-size:1.5cqh;background:#fff;color:#000;border-radius:2cqh;padding:.3cqh 1.4cqw;font-weight:600}
.lay-ui-desc{font-size:1.85cqh;opacity:.92}
.lay-ui-music{display:flex;align-items:center;gap:1cqw;font-size:1.6cqh;opacity:.8}
.lay-ui-music svg{width:1.9cqh;height:1.9cqh;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
/* 스튜디오 단계 */
.st-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px}
.st-steps button{display:flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl-xl);padding:0 6px;
  font:var(--t-base) var(--body);color:var(--ink-3);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer}
.st-steps button b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font:var(--t-sm) var(--mono);background:var(--panel-3);color:var(--ink-3)}
.st-steps button.on{color:var(--ink);border-color:var(--hot-dim);background:var(--hot-ghost)}
.st-steps button.on b{background:var(--hot);color:#140C02}
.st-step{display:none}
.st-step.on{display:block}
.st-step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:4px}

/* ── 레이아웃 스튜디오 (templates.html) ─────────────────────
 * 왼쪽은 큰 스테이지(실제 키프레임 위의 실제 doc), 오른쪽은 고르는 것들.
 * 크기 단위가 cqh 라 스테이지가 커져도 비율이 유지된다.
 */
.st-wrap{max-width:calc(var(--col) + var(--gut)*2);margin:0 auto;padding:24px var(--gut) 90px}
/* 머리는 다른 화면과 **같은 모양**이다 (L06/R2) — 제목 줄 오른쪽에 원본 고르개,
   설명은 아래 줄 전체 폭. */
.st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:center;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.st-head>div:first-child{min-width:0}
.st-head p{grid-column:1/-1;margin-top:8px}
.st-head h1{margin:6px 0 4px;font-family:var(--disp);font-size:var(--t-4xl);letter-spacing:-.015em}
.st-head p{margin:0;color:var(--ink-2);font-size:var(--t-md);max-width:66ch;line-height:1.72}
.st-head b{color:var(--ink);font-weight:500}
.st-src{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;justify-items:end;min-width:min(230px,100%);max-width:100%}
/* 옵션 글이 길면 select 가 내용만큼 넓어진다 — 좁은 화면에서 컨테이너를 넘겼다 */
.st-src select,.st-src label{max-width:100%}
.st-src label{font:var(--t-sm) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st-src-meta{font-size:var(--t-sm);color:var(--ink-3);text-align:right;max-width:min(34ch,100%)}

.st-grid{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:24px;align-items:start}
/* **조작은 자기가 다루는 것의 폭을 넘지 않는다** (L06/R4). 스테이지는 404px 인데 그
   아래의 확대 슬라이더·메모·적용 상자는 888px 이라, 무엇을 조절하는 것인지 눈이 잇지
   못했다. 고치는 것은 **조작의 폭**이지 자리가 아니다 — 스테이지 위아래로 같은 폭이
   쌓이면 그 묶음이 하나의 캔버스로 읽힌다 (가운데 남는 여백은 캔버스의 여백이다).
   L06 에서 한 번 2열로 갈랐다가 되돌렸다: `grid-row:1/-1` 이 첫 행에 스테이지 높이
   739px 를 통째로 주는 바람에 **조작 여섯이 스테이지 아래로 밀려났다** (실측 y955~). */
/* 캡은 **묶음에 건다**. 자식에 걸면 `.st-ctl{width:100%}` 같은 뒤 규칙이 같은 순위로
   이겨서(0,1,0) 조작이 다시 벌어진다 — 834px 에서 794px 이 됐다. */
.st-left{display:grid;gap:12px;justify-items:stretch;width:min(100%,404px);justify-self:center}
.st-side{display:grid;gap:12px;position:sticky;top:62px;min-width:0}

.st-stage-box{display:grid;gap:8px;justify-items:center;width:100%}
.st-stage{width:min(100%,404px);box-shadow:0 12px 40px rgba(0,0,0,.5);touch-action:none;
  user-select:none;border-radius:8px}
.st-stage.pannable{cursor:grab}
.st-stage.dragging{cursor:grabbing}
.st-stage:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.st-hint{margin:0;font:var(--t-sm) var(--mono);color:var(--ink-3);text-align:center}

.st-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 14px}
.st-ctl input[type=range]{flex:1 1 180px;min-width:150px;accent-color:var(--hot)}
.st-ctl output{font-family:var(--mono);font-size:var(--t-base);color:var(--hot);min-width:88px}
.st-ctl-label{font:var(--t-sm) var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);flex-shrink:0}
.st-note{margin:0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.55;width:100%}

.st-film{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.st-frame{width:62px;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:4px;
  background:#000 center/cover no-repeat;padding:0;opacity:.62}
.st-frame.on{border-color:var(--hot);opacity:1}
.st-frame:hover{opacity:1}

.st-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:4px 20px;
  width:100%;margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:11px 14px}
.st-meta div{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-sm)}
.st-meta dt{color:var(--ink-3)}
.st-meta dd{margin:0;font-family:var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.st-warn{width:100%;display:grid;gap:6px}
.st-warn p{margin:0;font-size:var(--t-sm);color:var(--bad);line-height:1.5;
  background:rgba(255,90,69,.08);border:1px solid rgba(255,90,69,.28);
  border-radius:6px;padding:8px 10px}

.st-cli{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px}
.st-cli code{flex:1;min-width:0;font-family:var(--mono);font-size:var(--t-sm);color:var(--cool);
  overflow-x:auto;white-space:nowrap;scrollbar-width:thin}

/* 스튜디오의 상자도 **이 앱의 카드**다 (L06/R2) — 곡률이 8px 이면 소재 카드(16)·프로젝트
   카드(18)·필터 바(16) 옆에서 혼자 다른 종류로 보인다. 곡률은 크기가 아니라 역할이 정한다. */
.st-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 14px}
.st-block h2{margin:0 0 10px;font:var(--t-sm) var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:8px}
.st-block h2 span{font-family:var(--body);font-size:var(--t-sm);letter-spacing:0;text-transform:none;
  color:var(--ink-3);font-weight:400}
.st-block h2 .btn{margin-left:auto}
.st-fields{display:grid;gap:9px}
.st-fields label{display:grid;gap:4px;font-size:var(--t-sm);color:var(--ink-3)}
.st-src select,.st-fields select{background:var(--panel-3);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);height:var(--ctl-lg);padding:0 24px 0 10px;font-size:var(--t-base);
  font-family:var(--body);max-width:100%}

.st-fields input[type=text]{background:var(--panel-3);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r);height:var(--ctl-lg);padding:0 10px;font-size:var(--t-base);font-family:var(--body)}
/* 머리의 원본 고르개는 **페이지 수준의 조작**이라 패널 안의 필드보다 한 단 크다 */
.st-src select{height:var(--ctl-xl)}
.st-fields input[type=color]{width:44px;height:26px;padding:0;border:1px solid var(--line-2);
  border-radius:4px;background:none;cursor:pointer}
.st-toggles{margin-top:10px}
.st-strip-row{display:flex!important;align-items:center;gap:6px;color:var(--ink-2)!important;
  font-size:var(--t-sm)!important;flex-direction:row}
.st-strip-row input{accent-color:var(--hot);margin:0}
.st-strip-row small{color:var(--ink-3)}/* 포인트 색 견본 */
.st-accents{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.st-accents .st-ctl-label{margin-right:4px}.st-accents .btn{margin-left:auto}
/* 쇼츠에 적용 */
.st-recommend{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;margin-bottom:20px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2)}
.st-recommend[hidden]{display:none}
.st-recommend>div{display:grid;align-content:start;gap:var(--sp-4);min-width:0}
.st-recommend b{font-size:var(--t-md);line-height:1.6;overflow-wrap:anywhere}
.st-recommend p{font-size:var(--t-base);line-height:1.6;color:var(--ink-2);margin:0}
.st-recommend>p,.st-recommend .st-recommend-actions{grid-column:1/-1}
.st-recommend .st-recommend-actions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:720px){.st-recommend{grid-template-columns:1fr}}
#tone-note button{align-self:flex-start;margin-top:6px}#tone-note{margin:var(--sp-12) 0}
.st-apply{display:flex;align-items:center;gap:12px;width:100%;padding:12px;
  border:1px solid var(--hot-dim);border-radius:var(--r-lg);background:var(--hot-ghost)}
.st-apply>div{flex:1;display:grid;gap:3px}
.st-apply b{font-size:var(--t-md);color:var(--ink)}
.st-apply span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}

@media (max-width:1040px){
  .st-grid{grid-template-columns:1fr}
  .st-side{position:static}
  .st-lays{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (max-width:720px){
  /* 머리의 오른쪽 칸(원본 고르개)은 min-content 가 230px 라, 좁은 폭에서 제목 칸을
     한 글자까지 밀어냈다 (실측: 390px 에서 제목이 세로 한 줄이 됐다). 쌓는다. */
  .st-head{grid-template-columns:minmax(0,1fr)}
  .st-src{justify-items:start;min-width:0}
  .st-src-meta{text-align:left}
}

.lay-badge{display:inline-block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:2px;padding:1px 5px}
.lay-badge.on{color:var(--hot);border-color:var(--hot-dim)}

/* ── 편집기 · 화면 구성 패널 (editor.html) ───────────────────
 * 값은 doc.layout 에서 읽어 그리고, 바꾸면 서버에 다시 조판을 묻는다. */
.layout-mini{position:relative;container-type:size;aspect-ratio:9/16;height:250px;margin:0 auto 8px;
  background:#000;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
.layout-studio-link{display:block;text-align:center;font-size:var(--t-sm);color:var(--hot);margin-bottom:4px}
.preset-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}/* 원본 자막 넷 — 한 줄에 넷이면 '겹칠 때만' 이 잘린다 (패널 폭 ~250px) · 2×2 */.lay-stage-guides{container-type:size}   /* .lay-ui 의 cqh 단위가 스테이지 크기를 따르게 */

/* ── 프로젝트 상세 3탭 (docs/result-page-ia-plan.md §5) ────────
 * 입력(최초 영상 선택) · 판단(컷 결과) · 산출물(쇼츠 결과)을 나눈다.
 * 공통 헤더와 탭은 세 화면에서 같고, 주 행동만 현재 탭을 따른다.
 */
.proj-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:56px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.proj-cover{position:relative;flex:none;width:112px;aspect-ratio:16/9;border-radius:8px;
  overflow:hidden;background:linear-gradient(135deg,#1D1D21,#0F0F11)}
.proj-cover img{width:100%;height:100%;object-fit:cover;display:block}
.proj-cover i{position:absolute;inset:0;display:grid;place-items:center;font:var(--t-xs) var(--mono);
  font-style:normal;color:#5A5A60}
.proj-id{flex:1 1 240px;min-width:0}
/* 제목이 안 꺾이면 그 한 줄이 헤더 폭을 정해 좁은 화면에서 요약·버튼까지 밀어낸다 */
.proj-id h2{font-size:var(--t-4xl);font-weight:700;letter-spacing:-.028em;margin-bottom:8px;
  overflow-wrap:anywhere;word-break:keep-all}
.proj-sum{display:flex;gap:12px;flex-wrap:wrap;align-items:center;min-width:0;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.proj-sum>span{overflow-wrap:anywhere}
.proj-sum b{color:var(--ink-2);font-weight:600}
/* 채널 이름은 한 줄 (R4-19) — 긴 이름이 세 줄로 머리를 다 차지했다. 전문은 title */
.proj-sum>span.p-ch{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.proj-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.proj-tabs{display:flex;gap:4px;margin:20px 0 0;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.proj-tabs::-webkit-scrollbar{display:none}
/* 탭도 조작이다 — 높이는 계단이 정한다 (L01/R3). 밑줄이 밑변에 붙어야 하므로
   세로 padding 대신 높이 + 가운데 정렬이다. */
/* 앱의 **탭 줄 하나**다 — 프로젝트 상세(button)도 보관함 중메뉴(a)도 이것을 쓴다.
   고른 것은 `.on` · `aria-selected="true"`(탭 패턴) · `aria-current="page"`(링크 줄 — 보관함 중메뉴 · R7-20)
   셋 중 하나로 표시한다 (링크 탭은 주소가 상태라 클래스를 JS 가 따로 안 붙여도 된다). */
.proj-tabs>button,.proj-tabs>a{position:relative;flex:none;background:none;border:0;cursor:pointer;
  height:var(--ctl-xl);display:inline-flex;align-items:center;gap:8px;
  padding:0 16px;font-size:var(--t-md);font-weight:600;color:var(--ink-3);white-space:nowrap}
/* 첫 탭은 기둥 왼쪽 끝에 붙는다 — 안쪽 여백 때문에 16px 들어가 있으면 그 아래 목록과
   위의 제목이 한 선에 안 선다. 밑줄도 같이 당긴다. */
.proj-tabs>:first-child{padding-left:0}
.proj-tabs>:first-child.on:after,.proj-tabs>:first-child[aria-selected="true"]:after,.proj-tabs>:first-child[aria-current="page"]:after{left:0}
/* 내비와 같은 어휘다 — 짚은 것·고른 것이 시그니처 색이다. 밑줄만 --hot 이고 글자가
   --ink 이면 탭 이름과 밑줄이 서로 다른 것을 가리키는 것처럼 읽힌다. */
.proj-tabs>button:hover,.proj-tabs>a:hover{color:var(--hot)}
.proj-tabs>button.on,.proj-tabs>a[aria-selected="true"],.proj-tabs>a[aria-current="page"]{color:var(--hot)}
.proj-tabs>button.on:after,.proj-tabs>a[aria-selected="true"]:after,.proj-tabs>a[aria-current="page"]:after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;
  height:2px;background:var(--hot);border-radius:2px 2px 0 0}
.proj-tabs em{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);color:var(--hot);
  margin-left:4px;vertical-align:1px}
.tabpane{padding-top:22px}
.tabpane[hidden]{display:none}

/* 탭 안의 머리 — **한 줄에 셋을 욱여넣지 않는다** (L01/R2). 예전엔 요약 줄 · 리뷰 안내 ·
   필터가 한 flex 에서 `space-between` 으로 밀려, 요약 줄이 두 줄짜리 안내 상자에 맞춰
   가운데로 내려가고 그 위에 70px 짜리 빈 띠가 남았다. 안내는 위의 주의 배너와 같은
   전체 폭 바이고, 필터는 자기 줄의 조작 줄이다. */
.pane-head{display:grid;gap:12px;margin:20px 0 14px}
.pane-head .sec-h{margin:0}
.pane-head .chipbar{min-height:var(--ctl-md)}
/* 이름이 .chip 이면 landing.css 의 히어로 칩(position:absolute)과 충돌한다 */
.chipbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ① 최초 영상 선택 — 분석 옵션(요청)과 렌더 틀(look), 현재 적용값을 각각 다른 상자에.
 * 한 상자에 섞으면 "요청한 값" 과 "지금 값" 을 구분할 수 없다 (기획서 §6.1). */
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  align-items:start;gap:14px}
.spanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px}
.spanel h3{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;margin-bottom:12px;
  display:flex;align-items:baseline;gap:8px}
.spanel h3 em{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase}
.spanel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.spanel dt{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.spanel dd{margin:0;font-size:var(--t-base);color:var(--ink-2);line-height:1.5;min-width:0;overflow-wrap:anywhere}
.spanel dd b{color:var(--ink);font-weight:600}
.spanel .unset{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3);opacity:.7}
.spanel .pnote{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-3)}
.spanel .source-frames{grid-template-columns:repeat(4,1fr);margin:14px 0 0}
.genre-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.genre-wrap em{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}

/* ② 컷 결과 — 무료 경로(측정 순간 → 컷)를 1급 행동으로 (기획서 §16) */
.addcut{margin-top:16px;padding:12px 16px 16px;border:1px solid var(--hot-dim);
  border-radius:16px;background:var(--hot-ghost)}
.addcut-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.addcut-head b{font-size:var(--t-md);display:block}
.addcut-head span{font-size:var(--t-sm);color:var(--ink-3)}
.addcut-head .free{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--hot);white-space:nowrap}
.addcut .moments{margin-top:12px}
.addcut .moment{background:var(--panel)}

/* ③ 쇼츠 결과 — 실제 출력 비율로 보여준다 */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:18px}
.scard{background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:transform var(--dur-3) var(--ease-inout),box-shadow var(--dur-3) var(--ease-inout),border-color var(--dur-2) var(--ease)}
.scard:hover{border-color:var(--hair-2)}
/* 만드는 것이 9:16 이라 상자도 9:16 (design-plan V03) — 1:1·16:9 결과물은 contain 이 지킨다 */
.scard .spv{position:relative;aspect-ratio:9/16;background:radial-gradient(circle at 50% 35%,#232329,#080809 70%);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.scard .spv video{width:100%;height:100%;object-fit:contain;background:#000}
.scard .spv .none{font-size:var(--t-base);color:var(--ink-3);text-align:center;padding:20px;line-height:1.65}
/* 렌더 전 표지 — 파일은 없지만 컷이 어떤 그림인지는 보여 준다. 재생 버튼은 없다 (틀 확인이지 재생이 아니다) */
.scard .spv .still{position:absolute;inset:0;display:block;text-decoration:none}
.scard .spv .still img{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.scard .spv .still .hint{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-24) var(--sp-10) var(--sp-10);font-size:var(--t-sm);
  line-height:1.5;color:var(--ink-2);text-align:center;background:linear-gradient(180deg,transparent,rgba(8,8,9,.88) 55%)}
.scard .spv .still:hover .hint{color:var(--ink)}
.scard .spv .playbtn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.scard .spv .playbtn img{width:100%;height:100%;object-fit:contain;display:block}
.scard .spv .playbtn i{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:1000px;background:rgba(15,17,19,.62);border:1px solid rgba(255,255,255,.35)}
.scard .spv .playbtn i:after{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;transform:translateX(2px)}
.scard .spv .playbtn:hover i{background:rgba(15,17,19,.8);border-color:var(--hot)}
.scard .slook{font-size:var(--t-sm);color:var(--ink-3);margin-top:-2px}
.scard .spv .state{position:absolute;top:9px;left:9px;background:rgba(24,25,28,.85);
  backdrop-filter:blur(10px);border:1px solid var(--hair-2);border-radius:1000px;
  padding:2px 10px;font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}
.scard .sbody{padding:12px;display:flex;flex:1;flex-direction:column;gap:7px}
.scard h3{font-size:var(--t-lg);margin:0;line-height:1.4;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .smeta{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  display:flex;gap:6px 10px;flex-wrap:wrap}
.scard .smeta b{color:var(--ink-2);font-weight:500}
/* 행동 줄 (R5-05) — 왼쪽은 상태가 정한 글자 단추 하나(다운로드 · 만들기), 오른쪽은 같은 크기의 회색 아이콘.
   카드 안이라 노랑이 없다 (R5-06 — 노랑은 화면 머리의 주 조작 하나) */
.scard .sact{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.scard .sact>.btn{gap:6px}
.scard .sact>.btn .ic{width:var(--ic-sm);height:var(--ic-sm)}
.scard .sact-ic{display:flex;align-items:center;gap:4px;margin-left:auto}
.card-ic.icon-btn{width:var(--ctl-md);height:var(--ctl-md);padding:0;border-radius:var(--r-full);display:grid;place-items:center;
  background:transparent;border-color:transparent;color:var(--ink-3);flex:none}
.card-ic.icon-btn .ic{width:var(--ic-md);height:var(--ic-md)}
.card-ic.icon-btn:hover{background:var(--fill);color:var(--ink);border-color:var(--line-2)}
.card-ic.icon-btn.danger:hover{color:#FF8A80;border-color:rgba(255,69,58,.45);background:rgba(255,69,58,.1)}
.card-ic.icon-btn:disabled{opacity:var(--o-off);cursor:default}
/* 원본 구간 조절 — 다운로드 아래 늘 같은 자리의 글자 링크 (카드 규칙 · 주 행동과 같은 상자로 만들지 않는다) */
.scard .srange,.project-preview-grid .srange{margin:6px 0 0;font-size:var(--t-sm)}
.srange .linky{color:var(--ink-2);min-height:var(--ctl-sm);display:inline-flex;align-items:center}
.srange .linky:hover{color:var(--hot);text-decoration:underline}

/* 탭을 건너뛴 뒤 그 카드가 어디인지 보여준다 */
.flash{animation:flashcard var(--dur-loop-slow) var(--ease)}
@keyframes flashcard{
  0%{box-shadow:0 0 0 2px var(--hot),0 0 26px rgba(255,158,44,.34)}
  70%{box-shadow:0 0 0 2px var(--hot-dim),0 0 12px rgba(255,158,44,.12)}
  100%{box-shadow:none}}

@media (max-width:720px){
  .proj-head{gap:12px}
  .proj-cover{width:84px}
  /* 좁은 폭에서 아주 긴 제목은 세 줄까지 (R4-19) — 7줄이 탭·주 행동을 화면 밖으로 밀었다. 전문은 title */
  .proj-id h2{font-size:var(--t-2xl);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .proj-act{width:100%}
  .proj-act .btn{flex:1}
  /* A19 — 더보기(···)만 있는 탭에서 그 단추가 한 줄을 혼자 차지하지 않게 제목 오른쪽 위에 둔다 */
  .proj-head{position:relative}
  .proj-head:has(.project-menu) .proj-id{padding-right:52px}
  .proj-act .project-menu{position:absolute;top:24px;right:0}
  .proj-act:not(:has(>.btn)){width:auto}
  .proj-act .project-menu summary{padding:4px 12px;font-size:var(--t-xl)}
  /* 펼친 삭제 단추는 기둥 안에서 접힌다 (R7-05 · 320 폭·큰 글자에서 #d-del 이 화면 밖으로 나갔다) — 높이는 계단이 바닥이다 */
  .proj-act .project-menu[open] .btn{white-space:normal;height:auto;min-height:var(--ctl-xl);padding-block:6px;width:max-content;max-width:calc(100vw - 2*var(--gut));text-align:center}
  .proj-tabs>button,.proj-tabs>a{padding:0 10px}
  .proj-tabs>button.on:after,.proj-tabs>a[aria-selected="true"]:after,.proj-tabs>a[aria-current="page"]:after{left:6px;right:6px}
  .src-grid{grid-template-columns:1fr}
  .scards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .spanel dl{grid-template-columns:1fr;gap:2px 0}
  .spanel dt{margin-top:8px}
}

/* 요청 스냅샷 — 원장 몇 줄. 잔액은 계산하지 않는다, 원장이 진실이다 */
.spanel .ledger{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:grid;gap:5px}
.spanel .ledger div{display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.spanel .ledger b{font-weight:600}
.spanel .ledger .minus{color:var(--hot)}
.spanel .ledger .plus{color:var(--cool)}
.spanel .changed{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);
  color:var(--hot);margin-left:5px}

/* ── 컷 더 찾기 (유료) · 컷 상세 서랍 ─────────────────────────
 * 무료 경로(.addcut)와 같은 상자지만 색을 달리해 과금 여부를 눈으로 가른다.
 */
.addcut.paid{margin-top:12px;border-color:var(--line-2);background:var(--panel)}
.addcut.paid.busy{border-color:var(--hot-dim)}
.rescore-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.rescore-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm);color:var(--ink-3)}
.rescore-form label.grow{flex:1;min-width:200px}
.rescore-form input{padding:6px 8px;font-size:var(--t-base)}
.rescore-form input[type=number]{width:76px}
.rescore-cost{flex:1 1 100%;order:5;font-size:var(--t-base);line-height:1.6;color:var(--ink-2);
  padding:8px 12px;border-radius:8px;background:var(--fill)}
.rescore-cost b{color:var(--hot)}
.rescore-act{order:6;display:flex;gap:6px;margin-left:auto}
.cd-spans{margin:var(--sp-6) 0 0;padding:0 0 0 var(--sp-16);font-size:var(--t-sm);color:var(--ink-2);line-height:1.7}
.cd-spans em{font-style:normal;color:var(--ink-3);margin-left:6px}
/* 채널 성향 네 축 (§3.3) — 계정 폼의 다른 label 과 같은 줄에 서야 한다.
   `display:contents` 라 감싼 span 이 배치에 끼어들지 않는다 (JS 는 한 자리에만 쓴다). */
.prefaxes{display:contents}

/* 이야기 제안 (§3.2) — 컷을 고르기 **전**의 질문이라 컷 목록 위에 온다.
   유료 재선별(.addcut.paid)과 같은 상자를 쓰되 카드가 여러 장 서므로 격자로 깐다. */
.idea-box{margin-top:var(--sp-12);border-color:var(--line-2);background:var(--panel)}
.idea-box.busy{border-color:var(--hot-dim)}
.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-10);margin-top:var(--sp-12)}
.ideas:empty{display:none}
.idea{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-10) var(--sp-12);background:var(--panel-2)}
.idea.used{opacity:.62}
.idea-h{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.idea-h b{font-size:var(--t-md)}
.idea p{margin:0 0 var(--sp-6);font-size:var(--t-base);line-height:1.6;color:var(--ink-2)}
.idea-focus{color:var(--ink-3)}
.idea-arc{margin:0 0 var(--sp-8);padding-left:var(--sp-16);font-size:var(--t-sm);line-height:1.7;color:var(--ink-3)}
.idea-evs{font-size:var(--t-sm);color:var(--ink-3);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.idea-ev.play{display:inline-flex;align-items:center;gap:var(--sp-4);cursor:pointer;background:none;padding:2px 6px 2px 2px}
.idea-ev.play img{width:36px;height:20px;object-fit:cover;border-radius:var(--r-xs);display:block}
.idea-ev.play:hover{border-color:var(--cool);color:var(--cool)}
.idea-player{margin-top:var(--sp-8)}
.idea-player video{width:100%;max-height:220px;border-radius:var(--r);background:#000}
.newtag.warn{color:var(--bad);border-color:currentColor}
.idea-ev{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-4);cursor:help}
.idea-act{margin-top:var(--sp-10)}
.newtag.done{color:var(--ink-3);border-color:var(--line-2)}
.mode-note{margin:-4px 0 6px;font-size:var(--t-base);line-height:1.6;color:var(--ink-3)}
.mode-note:empty{display:none}
.rescore-form select{padding:6px 8px;font-size:var(--t-base)}

.drawer-open{overflow:hidden}
.cutdrawer{position:fixed;inset:0 0 0 auto;width:min(460px,100vw);z-index:var(--z-pop);
  background:var(--panel);border-left:1px solid var(--hair-2);box-shadow:var(--lift);
  overflow-y:auto;animation:ui-slide-in var(--dur-2) var(--ease)}
.cutdrawer[hidden]{display:none}
.cutdrawer-in{padding:16px 16px 40px;display:grid;gap:16px}
.cutdrawer header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cutdrawer header>div{display:flex;align-items:center;gap:8px;min-width:0}
.cutdrawer header b{font-size:var(--t-lg);line-height:1.4;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cutdrawer section{display:grid;gap:8px}
.cutdrawer h4{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.cutdrawer .why{margin:0;font-size:var(--t-base);line-height:1.6;color:var(--ink-2)}
.cutdrawer .why.evidence{font-family:var(--mono);font-size:var(--t-sm);color:var(--hot);opacity:.85}
.cutdrawer .cut-context{margin-top:0}
.cd-pv video{width:100%;border-radius:8px;background:#000;display:block}
.cd-pv .none{padding:32px;text-align:center;font-size:var(--t-base);color:var(--ink-3);
  border:1px dashed var(--line-2);border-radius:10px}
.cd-tc{margin-top:6px;font-size:var(--t-sm);color:var(--ink-3)}
.cd-sigs{display:grid;gap:4px;margin-top:4px}
.cd-sigs div{display:grid;grid-template-columns:76px 1fr 30px;align-items:center;gap:8px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.cd-sigs i{height:4px;border-radius:4px;background:var(--panel-3);display:block;overflow:hidden}
.cd-sigs u{display:block;height:100%;background:var(--hot)}
.cd-row{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-3)}
.cd-row input{flex:1;min-width:0;padding:6px 8px;font-size:var(--t-base)}
.cd-row input[type=number]{flex:0 0 92px}
.cd-note{margin:2px 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-3)}
.cd-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cd-msg{font-size:var(--t-sm);line-height:1.6;padding:8px 10px;border-radius:9px}
.cd-msg.ok{background:var(--hot-ghost);border:1px solid var(--hot-dim);color:var(--ink-2)}
.cd-msg.bad{background:rgba(255,69,58,.09);border:1px solid rgba(255,69,58,.3);color:#FF9E96}
@media (max-width:720px){
  .cutdrawer{inset:auto 0 0 0;width:100%;height:86vh;border-left:0;
    border-top:1px solid var(--hair-2);border-radius:18px 18px 0 0}
  .rescore-act{margin-left:0;width:100%}
  .rescore-act .btn{flex:1}
}

/* 컷 하나에 여러 쇼츠 — 파생 버전 (기획서 §6.3) */
.cd-shorts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cd-shorts li{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.cd-shorts li>div{flex:1;min-width:0;display:grid;gap:2px}
.cd-shorts b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.cd-shorts .mono{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.cd-derive{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.cd-derive label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm);color:var(--ink-3)}
.cd-derive select{padding:6px 8px;font-size:var(--t-base)}
.cd-derive .cd-note{flex:1 1 100%;margin:0}
.vtag{font-family:var(--mono);font-style:normal;font-size:var(--t-xs);color:var(--cool)}

/* 운영 — 추천 발행 이유 · 학습 루프 안내 · 작업 감사 이력 */
.scard .swhy{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#learnstrip{margin:0 0 14px}
.joblog{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.joblog summary{font-size:var(--t-sm);color:var(--ink-3);cursor:pointer;list-style:none}
.joblog summary::-webkit-details-marker{display:none}
.joblog summary:before{content:'▸ ';color:var(--hot)}
.joblog[open] summary:before{content:'▾ '}
.joblog .ledger{margin-top:8px;padding-top:0;border-top:0}

/* ── 장면 고르기 (편집기 '장면' 패널) ─────────────────────────
   컷 **안**의 구간을 넣고 뺀다. 축은 컷 전체(0..full_ms)이며 자막 트랙(점프컷 뒤 축)과
   다른 축이라 타임라인에 섞지 않는다. 남긴 것은 채워진 상자, 뺀 것은 점선 빈 상자다 —
   투명도만으로 구분하면 '뺐다'가 '희미하다'로 읽힌다. */
.scene-strip{position:relative;height:38px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-4);overflow:hidden}
.sc-blk{position:absolute;top:3px;bottom:3px;border-radius:4px;border:1px solid var(--hot-dim);background:var(--hot-ghost);padding:0}
.sc-blk+.sc-blk{border-left-width:1px}
.sc-blk.on.k-quiet{border-color:#2f4f4b;background:#12211f}
.sc-blk.off{border-style:dashed;border-color:var(--line);background:repeating-linear-gradient(135deg,transparent,transparent 3px,#232326 3px,#232326 6px)}
.scene-sum{margin-bottom:10px}
.sc-sum-row{display:flex;align-items:baseline;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-4)}
.sc-sum-row span{font:var(--t-xs) var(--mono);color:var(--ink-3)}
.sc-sum-row b{font:var(--t-lg) var(--mono);color:var(--hot);font-variant-numeric:tabular-nums}
.sc-sum-row b.bad{color:var(--bad)}
.sc-sum-row em{margin-left:auto;font:var(--t-sm) var(--mono);font-style:normal;color:var(--ink-3)}
.sc-rec-all{width:100%;height:var(--ctl-md);margin-top:6px;border:1px solid var(--cool-dim);background:#131d1c;color:var(--cool);border-radius:6px;padding:0 8px;font-size:var(--t-sm)}
.sc-split{width:100%;margin-top:6px;border:1px solid var(--line);background:var(--surface-4);color:var(--ink-1);border-radius:6px;height:var(--ctl-md);padding:0 6px;font-size:var(--t-sm)}
.sc-split:hover{border-color:var(--hot);color:var(--hot)}
.scene-note{margin:6px 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-3)}
.scene-none{margin:0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.55}
.scene-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 420px);overflow:auto;padding-right:2px}
.sc-row{border:1px solid var(--line);background:var(--surface-4);border-radius:8px;padding:6px 8px 6px}
.sc-row.off{background:transparent;border-style:dashed}
.sc-row.off p{color:var(--ink-3);text-decoration:line-through}
.sc-meta{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.sc-meta b{font:var(--t-sm) var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sc-meta span{font:var(--t-sm) var(--mono);color:var(--ink-3)}
.sc-kind{font:var(--t-xs) var(--mono);font-style:normal;padding:0px 4px;border-radius:1000px;border:1px solid var(--line);color:var(--ink-3)}
.sc-kind.k-speech{color:#e0d789;border-color:var(--hot-dim)}
.sc-kind.k-quiet{color:var(--ink-2)}
.sc-rec{margin-left:auto;font:var(--t-xs) var(--mono);font-style:normal;color:var(--cool);border:1px solid var(--cool-dim);border-radius:1000px;padding:1px 5px}
.sc-row p{margin:0;font:var(--t-base)/1.5 var(--body);color:var(--ink);word-break:break-word}
.sc-row p em{color:var(--ink-3);font-style:normal}

/* ── 첫 몇 초 판정 (C03) — 판정은 파이썬(hook.py)이 하고 화면은 그린다.
   빨강을 쓰지 않는 이유: 약한 훅은 **고칠 수 있는 것**이지 오류가 아니다. */
.hook-card{margin-top:12px;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface-4)}
.hook-card.weak,.hook-card.bad{border-color:var(--hot-dim);background:var(--hot-ghost)}
.hook-card header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hook-card header b{font-size:var(--t-base)}
.hook-card header em{margin-left:auto;font:var(--t-xs)/1 var(--mono);color:var(--ink-3);font-style:normal}
.hook-card>p{margin:0 0 8px;font-size:var(--t-sm);color:var(--ink-1);line-height:var(--lh-body)}
.hook-list div{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:6px;margin:4px 0}
.hook-list i{width:6px;height:6px;border-radius:var(--r-full);background:var(--line-2)}
.hook-list .on i{background:var(--cool)}
.hook-list span{font-size:var(--t-sm);color:var(--ink-3)}
.hook-list .on span{color:var(--ink)}
.hook-list small{font:var(--t-xs)/1 var(--mono);color:var(--ink-3)}
.hook-note{display:block;margin-top:8px;font-size:var(--t-sm);color:var(--ink-3);line-height:var(--lh-body)}
/* 첫 3초 편집안 (CA-3) — 안마다 카드 하나. 만들 수 없는 안(.off)도 이유와 함께 남는다 */
.hook-opts{margin-top:12px}
.hook-opts>header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hook-opts>header b{font-size:var(--t-base)}
.hook-opts>header em{margin-left:auto;font-size:var(--t-xs);font-style:normal;color:var(--hot)}
.hook-opt{padding:8px 10px;margin:6px 0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-4)}
.hook-opt.cur{border-color:var(--hot-dim);background:var(--hot-ghost)}
.hook-opt.off{opacity:.62}
.hook-opt-head{display:flex;align-items:center;gap:6px}
.hook-opt-head b{font-size:var(--t-sm)}
.hook-opt-head small{font:var(--t-xs)/1 var(--mono);color:var(--ink-3)}
.hook-opt-tag{font-size:var(--t-xs);padding:0 6px;line-height:16px;border-radius:var(--r-full);background:var(--hot-ghost);color:var(--hot);border:1px solid var(--hot-dim)}
.hook-opt-lv{margin-left:auto;width:8px;height:8px;border-radius:var(--r-full);background:var(--line-2)}
.hook-opt-lv.good{background:var(--cool)}.hook-opt-lv.weak{background:var(--hot-dim)}.hook-opt-lv.bad{background:var(--hot)}
.hook-opt-why{display:block;margin-top:2px;font-size:var(--t-sm);color:var(--ink-3);line-height:var(--lh-body)}
.hook-opt-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.hook-opt-foot small{font:var(--t-xs)/1 var(--mono);color:var(--ink-3)}
.hook-opt-foot button{margin-left:auto;height:26px;padding:0 10px;font-size:var(--t-xs)}
/* 되감기 전환 (docs/loop-hook-plan.md) — 처음으로 돌아가는 이음매의 결 */
.hook-seam{display:flex;align-items:center;gap:10px;margin:8px 0 6px;padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--r)}
.hook-seam>div:first-child{flex:1;min-width:0}
.hook-seam b{display:block;font-size:var(--t-sm)}
.hook-seam small{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:var(--lh-body)}
.hook-seam .seg-mini small{display:inline;color:inherit;opacity:.7}

/* 자동 판별이 확실하지 않을 때 — 오류가 아니라 **바꿀 수 있다**는 뜻이라 액센트를 쓴다 */
.unsure{color:var(--hot);font-weight:500}

/* ── 오류 배너 (A02) — **막다른 길을 만들지 않는다.** 알림만 있고 할 수 있는 일이
   없으면 그건 벽이다. 편집기(E17)에만 있던 규칙을 화면 전체로 옮겼다. */
.err-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.err-banner b{margin-right:4px}
.err-banner nav{margin-left:auto;display:flex;gap:6px}
.err-banner nav button{border:1px solid var(--hair-2);background:var(--panel-2);color:var(--ink);
  border-radius:var(--r);height:var(--ctl-md);padding:0 12px;font-size:var(--t-base)}   /* 높이는 계단 — 세로 padding 으로 만들면 글꼴마다 23px 같은 값이 섰다 (점검 · uiqa align) */
.err-banner nav button:hover{border-color:var(--hot);color:var(--hot)}
/* 오류 상태 한 장 (R4-05) — 빈 상태와 같은 모양, 그 자리를 대신한다. 스켈레톤을 갈아 끼운다. */
.err-state-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.err-state-act:empty{display:none}
.err-state .empty-art{max-width:180px;opacity:.6}
.pgrid > .err-state, .grid > .err-state, .tgrid > .err-state, .agrid > .err-state, .rgrid > .err-state{grid-column:1/-1}
.pane.failed > :not(.pane-err){display:none !important}

/* 확인 시트 안의 입력칸 (A03) — `prompt()` 를 대신한다. 일부 브라우저는 prompt 를 아예
   막고, 그때 사용자는 **아무 일도 안 일어나는 버튼**을 본다. */
.sheet-back .sheet-field{display:grid;gap:4px;margin:10px 0 2px;font-size:var(--t-base);
  color:var(--ink-1)}
.sheet-back .sheet-field input{background:var(--surface-4);border:1px solid var(--line-2);
  color:var(--ink);border-radius:var(--r);padding:8px 10px;font-size:var(--t-md);width:100%;
  box-sizing:border-box}
.sheet-back .sheet-field input:focus{outline:none;border-color:var(--hot)}
.cd-review{margin:6px 0 10px;font-size:var(--t-sm);color:var(--ink-3)}
.cd-review summary{cursor:pointer;color:var(--ink-2)}
.cd-review p{margin:6px 0 0;line-height:1.5}
.scard .spv .none.has-cover{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.scard .spv .none.has-cover span{background:rgba(8,8,9,.72);border-radius:8px;padding:8px 12px;color:var(--ink)}

/* ── 오디오 트랙 행 (영상/자막/오디오/오디오1/오디오2 …) — docs/media-tools-plan.md M2 ── */
.audio-track .track-label span{color:#3b8e80}.audio-track.voice-track .track-label span{color:#c48a2b}
.aud-clip{position:absolute;top:8px;bottom:8px;border:1px solid #3b8e80;background:#3b8e8033;border-radius:4px;color:#8fd3c7;padding:0 6px;overflow:hidden;text-align:left;cursor:grab;touch-action:none}
.aud-clip.voice{border-color:#c48a2b;background:#c48a2b33;color:#f0c980}
.aud-clip.on{border-color:var(--hot);color:var(--hot);box-shadow:0 0 0 1px #f2e55c55}
.aud-clip span{font-size:var(--t-xs);white-space:nowrap;pointer-events:none}
.aud-clip .clip-edge{background:#3b8e80}.aud-clip.voice .clip-edge{background:#c48a2b}.aud-clip:hover .clip-edge{opacity:.7}
.sheet textarea{width:100%;box-sizing:border-box;min-height:88px;margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-4);color:inherit;font:inherit;resize:vertical}
.sheet .sheet-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:var(--t-base)}
.sheet .sheet-row.sheet-row-top{flex-direction:column;align-items:stretch}
.set-voicepick{min-width:0}
.sheet .sheet-row select{max-width:60%}
.sheet .sheet-note{font-size:var(--t-base);color:var(--ink-3);margin:0}
.layer-props .prop-note{font-size:var(--t-sm);color:var(--ink-3);margin:6px 0 12px;line-height:1.5}
.layer-props label b{float:right;font-size:var(--t-sm);color:var(--ink-3)}
.sheet .sheet-img{display:block;max-width:100%;max-height:60vh;margin:10px auto 0;border-radius:8px;border:1px solid var(--line)}
.link-btn{background:none;border:0;color:var(--hot);font-size:var(--t-sm);padding:2px 0 6px;cursor:pointer;text-align:left}
.audio-add{display:flex;flex-direction:column;gap:8px}
.audio-add button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-4);color:var(--ink)}
.audio-add button:hover{border-color:var(--hot);background:var(--hot-ghost)}
.audio-add button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--surface-4);color:var(--hot)}
.audio-add .ic{width:17px;height:17px}
.audio-add b{font-size:var(--t-base)}
.audio-add small{font-size:var(--t-xs);line-height:1.5;color:var(--ink-3);margin-top:2px}
/* 삽입 컷(짤) — 크롭 창(.lay-video)을 통째로 채운다. 렌더가 창 안에 패딩해 넣는 것과 같은 자리·비율 */
.pv .lay-video video.lay-insert{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:2;transform:none}
/* 끼운 컷 — 본편과 같은 크롭(paintCrop 이 자리·크기를 준다). 렌더의 fill(원본 프레임 채우기)과 같은 그림 */
.pv .lay-video video.lay-insert.lay-insert-cut{inset:auto;object-fit:cover}
/* 컷 사이 겹쳐 넘기기 — 앞 조각의 마지막 그림을 떠서 뒤 조각 위에 얹는다 (render.js syncXfade) */
.pv .lay-video canvas.lay-xfade{position:absolute;z-index:3;pointer-events:none;transform:none}
/* `.pv video`(본 영상 · absolute · height 100%)가 오버레이 안의 <video> 에도 걸려 그림-속-그림이 납작해졌다 — 흐름 안에 두고 비율은 파일을 따른다 (렌더도 폭 기준 비례) */
.pv .ovl.ovl-video video{position:static;inset:auto;width:100%;height:auto;object-fit:contain;display:block;pointer-events:none;background:#000}.pv .ovl.ovl-cta{border-radius:.32em;text-shadow:none;border:.06em solid transparent;animation:cta-pop 220ms var(--ease-back) both}.pv .ovl.ovl-cta.cta-outline{background:transparent}.pv .ovl.ovl-cta.cta-bubble{border-color:#FFFFFF} /* motion:video — 영상 안 연출의 시각은 렌더(subtitles.CTA_STYLE·cc)와 같은 값이다 */
/* 댓글 입력창 CTA (SV5) — 크기는 render.js 가 doc 의 cbox 를 px 로 옮겨 박는다. 여기는 모양만 */
.pv .ovl.ovl-cta.cta-comment{display:flex;align-items:center;box-sizing:border-box;border-radius:999px;border:0;white-space:nowrap;box-shadow:0 .25em .9em rgba(0,0,0,.35);animation:cc-in 150ms var(--ease) both}.pv .ovl.ovl-cta.cta-comment .cc-av{flex:none;border-radius:50%}.pv .ovl.ovl-cta.cta-comment .cc-tx{flex:1;min-width:0;overflow:hidden;line-height:1.2}.pv .ovl.ovl-cta.cta-comment .cc-ch{opacity:0;animation:cc-type 1ms linear forwards}.pv .ovl.ovl-cta.cta-comment .cc-post{flex:none;line-height:1.2}@keyframes cc-in{from{opacity:0}to{opacity:1}}@keyframes cc-type{to{opacity:1}}@keyframes cta-pop{from{transform:translate(-50%,-50%) scale(.72)}to{transform:translate(-50%,-50%) scale(1)}} /* motion:video — 영상 안 연출의 시각은 렌더(subtitles.CTA_STYLE·cc)와 같은 값이다 */
.lib-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}.lib-chips button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);border-radius:1000px;padding:4px 8px;font-size:var(--t-xs)}.lib-chips button.on{border-color:var(--hot);color:var(--hot);background:var(--hot-ghost)}.lib-head{display:flex;align-items:center;gap:6px}.lib-head .link-btn{margin-left:auto}.lib-count{font:var(--t-xs) var(--mono);color:var(--hot)}.lib-sub{font-size:var(--t-xs);color:var(--ink-3);font-weight:400;margin-left:6px}.lib-note{font-size:var(--t-xs);line-height:1.55;color:var(--ink-3);margin:4px 0 6px}.lib-note.warn{color:var(--hot)}.lib-note code{font:var(--t-xs) var(--mono);word-break:break-all}.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.lib-item{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface-4);border-radius:8px;padding:4px 8px;cursor:pointer;text-align:left;min-width:0}.lib-item:hover{border-color:var(--hot)}.lib-item b{font-size:var(--t-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-item small{font:var(--t-xs) var(--mono);color:var(--ink-3)}.lib-play{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink-1);cursor:pointer;flex:none}.lib-play .ic{width:11px;height:11px}.lib-play:hover,.lib-play.playing{border-color:var(--hot);color:var(--hot);background:var(--hot-ghost)}.lib-list,.lib-results{display:flex;flex-direction:column;gap:4px}.lib-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface-4);border-radius:8px;padding:4px 8px;min-width:0}.lib-row.broll{grid-template-columns:44px 1fr auto}.lib-row img{width:44px;height:58px;object-fit:cover;border-radius:4px;background:#000}.lib-row-main{min-width:0;display:flex;flex-direction:column}.lib-row-main b{font-size:var(--t-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-row-main small{font-size:var(--t-sm);color:var(--ink-3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} /* 두 줄까지 — 한 줄이면 저작자 이름(표시 의무)이 늘 잘렸다 */.lib-row button,.sug-row button,.cta-row .cta-add{border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot);border-radius:6px;padding:4px 8px;font-size:var(--t-xs);white-space:nowrap}.lib-search{display:flex;gap:4px;margin:4px 0 6px}.lib-search input{flex:1;min-width:0;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;padding:6px 8px;font-size:var(--t-sm)}.lib-search button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink);border-radius:6px;padding:4px 10px;font-size:var(--t-sm)}.lib-suggest{display:flex;flex-direction:column;gap:4px}.sug-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;border:1px dashed var(--hot-dim);border-radius:8px;padding:4px 8px;background:var(--hot-ghost);cursor:pointer}.sug-row b{font-size:var(--t-sm);color:var(--hot);white-space:nowrap}.sug-row small{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}.sug-row em{font:var(--t-xs) var(--mono);color:var(--ink-3);font-style:normal}.sug-row.done{border-style:solid;border-color:var(--line-2);background:var(--surface-4)}.sug-row.done b{color:var(--ink-3)}.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.sticker-grid button{aspect-ratio:1;border:1px solid transparent;background:var(--surface-4);border-radius:8px;padding:6px;cursor:pointer}.sticker-grid button:hover{border-color:var(--hot);background:var(--hot-ghost)}.sticker-grid img{width:100%;display:block}.mini-toggle{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);color:var(--ink-3);font-weight:400;text-transform:none;letter-spacing:0;margin-left:auto;cursor:pointer}.mini-toggle input{accent-color:var(--hot);margin:0}.cta-list{display:flex;flex-direction:column;gap:4px}.cta-row{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:center}.cta-row .cta-add{text-align:left;font-size:var(--t-sm);padding:6px 10px;border-radius:8px}.cta-row .cta-add i{font-style:normal;margin-right:6px}.cta-row select{background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink-1);border-radius:6px;font-size:var(--t-xs);padding:4px 6px}.layers-list{display:flex;flex-direction:column;gap:4px}.layer-row{display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface-4);border-radius:6px;padding:4px 6px;cursor:pointer;min-width:0}.layer-row.on{border-color:var(--hot)}.layer-row .ic{width:13px;height:13px;margin:auto;color:var(--ink-2)}.layer-row.on .ic{color:var(--hot)}.layer-row b{font-size:var(--t-xs);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row small{font:var(--t-xs) var(--mono);color:var(--ink-3)}.layer-row button{border:0;background:none;color:var(--ink-3);font-size:var(--t-md);padding:0 4px;line-height:1}.layer-row button:hover{color:var(--bad)}.sfx-track .track-label span{color:#c9a227}.aud-clip.sfx{background:#c9a22733;border-color:#c9a227;color:#e8c95a;min-width:14px;padding:0 4px;border-radius:999px}.aud-clip.sfx span{font-size:var(--t-xs)}.aud-clip.sfx .clip-edge{background:#c9a227}

/* ── 효과음 검색 자동완성 (M7-c) — 130개를 나열하지 않는다. 치면 목록이 열리고 Enter 로 놓는다.
   목록은 검색창 아래에 겹쳐 뜨고(패널 스크롤 안), 활성 항목은 키보드와 마우스가 같은 상태를 쓴다. */
.ac-wrap{position:relative;z-index:3}.ac-wrap .searchbox{margin-bottom:0;position:relative}
.ac-wrap .searchbox:focus-within{border-color:var(--hot-dim);box-shadow:0 0 0 2px var(--hot-ghost)}
.ac-clear{border:0;background:transparent;color:var(--ink-3);font-size:var(--t-xl);line-height:1;padding:0 2px;cursor:pointer}.ac-clear:hover{color:var(--ink)}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:336px;overflow:auto;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 32px #0009;padding:4px;display:flex;flex-direction:column;gap:2px}
.ac-list[hidden]{display:none}
.ac-list .lib-item{grid-template-columns:24px 1fr auto auto;border-color:transparent;background:transparent;padding:4px 8px}
.ac-list .lib-item.active,.ac-list .lib-item:hover{background:var(--surface-4);border-color:var(--hot-dim)}
.ac-list .lib-item em{font:var(--t-xs) var(--mono);font-style:normal;color:var(--ink-3);border:1px solid var(--line);border-radius:1000px;padding:0 4px;white-space:nowrap}
.ac-list .lib-item b mark{background:transparent;color:var(--hot)}
.ac-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 4px;font-size:var(--t-xs);color:var(--ink-3)}
.ac-foot button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);border-radius:6px;padding:2px 8px;font-size:var(--t-xs)}
.ac-empty{padding:10px 8px;font-size:var(--t-sm);line-height:1.55;color:var(--ink-3)}
.ac-empty button{border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot);border-radius:6px;padding:2px 8px;font-size:var(--t-xs);margin-left:4px}
.lib-chips{margin-top:8px}
#snd-recent .lib-item{grid-template-columns:22px 1fr auto}

/* ── 텍스트 박스 (M7-d) — CTA 와 같은 상자. 줄바꿈은 doc 의 \n 이고 여기서 접지 않는다 */
.pv .ovl.ovl-text{border-radius:.32em;text-shadow:none;border:.06em solid transparent;white-space:pre-line;text-align:center;line-height:1.25;animation:cta-pop 220ms var(--ease-back) both} /* motion:video — 영상 안 연출의 시각은 렌더(subtitles.CTA_STYLE·cc)와 같은 값이다 */
.pv .ovl.ovl-text.text-plain,.pv .ovl.ovl-text.text-outline{padding-left:.1em!important;padding-right:.1em!important}
.pv .ovl[data-derived]{pointer-events:none}
.tb-form{border:1px solid var(--line-2);background:var(--surface-4);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.tb-emoji{width:34px;height:34px;flex:none;border:1px solid var(--line-2);background:var(--surface-4);border-radius:8px;font-size:var(--t-2xl);line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tb-emoji.on{border-color:var(--hot);box-shadow:0 0 0 2px var(--hot-ghost)}.tb-emoji img{width:22px;height:22px;display:block}
.tb-emoji.empty{color:var(--ink-3);font-size:var(--t-lg)}
.tb-form input[type=text]{flex:1;min-width:0;height:34px;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:8px;padding:0 10px;font:var(--t-base) var(--body)}
.tb-form input[type=text]:focus{outline:0;border-color:var(--hot-dim)}
.seg-mini{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--surface-4)}
.seg-mini button{border:0;background:transparent;color:var(--ink-3);padding:4px 8px;font-size:var(--t-xs);line-height:1.2;white-space:nowrap}.seg-mini button+button{border-left:1px solid var(--line-2)}
.seg-mini button.on{background:var(--hot-ghost);color:var(--hot)}
.tb-colors{display:inline-flex;gap:4px;align-items:center;flex:1}
.tb-colors button{width:18px;height:18px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px #0006}
.tb-colors button.on{border-color:var(--hot)}.tb-colors button.accent{background:conic-gradient(var(--hot),#fff,var(--hot))}
.tb-add{border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot);border-radius:6px;padding:6px 10px;font-size:var(--t-sm);white-space:nowrap}
.tb-add:disabled{opacity:var(--o-off)}
.ac-list.ac-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-height:260px}
.ac-list.ac-grid[hidden]{display:none}
.ac-list.ac-grid button{aspect-ratio:1;border:1px solid transparent;background:var(--surface-4);border-radius:8px;padding:4px;cursor:pointer}
.ac-list.ac-grid button:hover,.ac-list.ac-grid button.active{border-color:var(--hot);background:var(--hot-ghost)}
.ac-list.ac-grid button img{width:100%;display:block}
.ac-list.ac-grid .ac-empty,.ac-list.ac-grid .ac-foot{grid-column:1/-1}
.stk-target{border-color:var(--hot)!important}
.layer-props .tb-colors{margin:2px 0 8px}.layer-props .seg-mini{margin:2px 0 8px}

/* ── CTA 아이콘 (M7-e) — 파생 image. 렌더는 -loop 1 + fade alpha 250ms 이고 프리뷰는 같은 길이의 CSS 페이드 */
.pv .ovl.derived-cta{animation:ovl-fade 250ms var(--ease) both} /* motion:video — 영상 안 연출의 시각은 렌더(subtitles.CTA_STYLE·cc)와 같은 값이다 */
@keyframes ovl-fade{from{opacity:0}to{opacity:1}}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cta-card{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface-4);border-radius:8px;padding:6px 8px;text-align:left;cursor:pointer;min-width:0}
.cta-card:hover{border-color:var(--hot);background:var(--hot-ghost)}
.cta-card img{width:36px;height:36px;object-fit:contain;display:block}
.cta-card span{display:flex;flex-direction:column;min-width:0}
/* 이름은 두 줄까지 — 한 줄 말줄임이면 영어에서 'Tap the he…' 가 된다 (type-scale T4) */
.cta-card b{font-size:var(--t-sm);color:var(--ink);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.cta-card small{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px}.cta-opts .lib-sub{margin:0}

/* 장면 썸네일과 클릭해서 펼치는 컷 정보 */
.sc-details summary{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:8px;align-items:start;list-style:none;cursor:pointer;border-radius:4px}
.sc-details summary>.sc-meta,.sc-details summary>p,.sc-details summary>.sc-detail-hint{grid-column:2;min-width:0}
.sc-details summary>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-sm)}
.sc-details summary::-webkit-details-marker{display:none}
.sc-details summary:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.sc-thumbnail{grid-column:1;grid-row:1 / 4;width:72px;height:48px;position:relative;overflow:hidden;border-radius:4px;background:var(--surface-4);margin-bottom:0;display:grid;place-items:center;color:var(--ink-3);font-size:var(--t-xs)}
.sc-thumbnail img{width:100%;height:100%;object-fit:cover;position:absolute}
.sc-thumbnail b{position:absolute;bottom:2px;left:2px;background:#000b;color:#fff;border-radius:2px;padding:2px 4px;font-size:var(--t-xs)}
.sc-row.off .sc-thumbnail{opacity:.5}
.sc-detail-hint{display:flex;justify-content:space-between;color:var(--ink-3);font-size:var(--t-sm);padding:2px 0 0}
.sc-details[open] .sc-detail-hint{color:var(--hot)}
.sc-details[open] .sc-detail-hint span{transform:rotate(180deg)}
.sc-detail-body{border-top:1px solid var(--line);padding:8px 0}
.sc-detail-body dl{display:grid;grid-template-columns:auto 1fr;gap:6px;font-size:var(--t-sm);margin:0 0 8px}
.sc-detail-body dt{color:var(--ink-3)}
.sc-detail-body dd{margin:0;text-align:right;color:var(--ink)}
.sc-row.off .sc-detail-body p{text-decoration:none}
/* 짤 샘플 (M8) — 라이선스 라이브러리와 다른 상자. 칩은 .lib-chips 그대로(스티커 범주와 같은 모양), 색은 스튜디오 토큰만 */
.sample-library{margin-bottom:24px}
.sample-search{width:100%;box-sizing:border-box;margin:8px 0;padding:8px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-4);color:var(--ink);font:inherit;font-size:var(--t-md)}
.sample-search::placeholder{color:var(--ink-3)}
.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:480px;overflow:auto;padding:2px}
.sample-card{min-width:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface-4)}
.sample-add{display:block;width:100%;border:0;padding:0 0 4px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.sample-add video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--surface-1);pointer-events:none} /* 90px 띠에 contain 이면 세로 짤이 회색 여백 사이 작은 그림이었다 */
.sample-add small i{font-style:normal;white-space:nowrap}
.sample-add span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:6px 8px 2px;font-size:var(--t-base);font-weight:700;line-height:1.3;min-height:calc(2.6em + 8px);overflow:hidden;overflow-wrap:anywhere} /* 한 줄 말줄임이면 영어·스페인어 이름이 '· 3D ca…' 로 잘렸다 · 두 줄 자리를 늘 잡아 카드 높이가 같다 */
.sample-add small{display:block;padding:0 8px;font-size:var(--t-sm);color:var(--ink-3)}
.sample-card>a{display:block;padding:2px 8px 6px;font-size:var(--t-xs);color:var(--ink-3);text-decoration:none}
.sample-card>a:hover{color:var(--hot)}
.sample-add:hover{background:var(--surface-4)}
.sample-add:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.sample-foot{display:flex;justify-content:space-between;align-items:center;padding:0 8px 6px}
.sample-foot .link-btn{font-size:var(--t-xs);padding:0;color:var(--ink-3)}
/* 내 컷 — 다른 프로젝트의 컷을 끼우는 카드 (docs/library-plan.md L6) */
.cut-grid{display:grid;gap:var(--sp-8);max-height:520px;overflow:auto;padding:var(--sp-2);margin-top:var(--sp-8)}
.cut-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 var(--sp-10);align-items:stretch;min-width:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface-4)}
.cut-card .cut-th{position:relative;aspect-ratio:16/10;background:var(--surface-1);overflow:hidden}
.cut-card .cut-th img{width:100%;height:100%;object-fit:cover;display:block}
.cut-card .cut-th i{position:absolute;left:var(--sp-4);top:var(--sp-4);font:700 var(--t-xs) var(--mono);color:var(--surface-0);background:var(--hot);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-4);font-style:normal}
.cut-card .cut-th em{position:absolute;right:var(--sp-4);bottom:var(--sp-4);font:600 var(--t-xs) var(--mono);color:var(--ink);background:rgba(15,17,19,.7);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-4);font-style:normal}
.cut-card .cut-body{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-6) var(--sp-8) var(--sp-6) 0}
.cut-card .cut-body b{font-size:var(--t-base);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut-card .cut-body small{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut-card .cut-body small.other{color:var(--hot)}
.cut-card .cut-add{align-self:flex-start;margin-top:auto;border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink);border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-8);font-size:var(--t-sm);cursor:pointer}
.cut-card .cut-add:hover{border-color:var(--hot);color:var(--hot)}
.cut-card .cut-add:disabled{opacity:var(--o-off);cursor:default}
.sc-insert.sc-cut .sc-thumbnail b{background:var(--hot);color:var(--surface-0)}
/* 미디어 탭 2단계 — 1단계 종류 목록 (M9-b) */
/* 원격의 이름 바꾸기(.med-index → .pane-index, 화면 구성 2단계)를 살리고,
   R6 이 없앤 스튜디오 램프(--s-*)를 본 계단으로 바꿔 얹었다 — 그대로 두면
   값이 안 잡혀 **조용히 깨진다** (병합 충돌 해소). */
.pane-index{display:grid;gap:6px;margin-top:8px}
.pane-index button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink);border-radius:8px;padding:8px 12px;cursor:pointer;font:inherit}
.pane-index button:hover{background:var(--surface-4)}
.pane-index button b{font-size:var(--t-md);font-weight:700}
.pane-index button small{grid-column:1;font-size:var(--t-sm);color:var(--ink-3)}
.pane-index button em{grid-column:2;grid-row:1/3;font-style:normal;font-size:var(--t-base);color:var(--ink-3)}
.pane-index button em:empty{display:none}
.pane-back{display:inline-block;border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:var(--t-base);padding:6px 0;cursor:pointer}
.pane-back:hover{color:var(--hot)}
.pane-title{margin:0 0 8px;font-size:var(--t-lg);font-weight:700}
/* 레이아웃 패널의 1단계는 **화면 영역 지도**다 — 틀 하나 · 화면 위에서 아래로 영역 다섯(채널 띠·제목·영상·자막·하단 정보) · 보기.
   영역 줄은 왼쪽에 세로 선을 공유해서 한 화면의 위아래로 읽히고, 고른 영역(캔버스 선택과 같은 값)만 선이 포인트 색이다 */
.lay-map .lay-map-label{font:var(--t-xs) var(--mono);letter-spacing:.12em;color:var(--ink-3);margin:10px 0 -2px;padding-left:2px}
.lay-map .lay-region{position:relative;border-left:3px solid var(--line-2);border-radius:0 8px 8px 0;margin-left:6px}
.lay-map .lay-region[aria-pressed=true]{border-left-color:var(--hot)}
.lay-map .lay-region[aria-pressed=true] b{color:var(--hot)}
.lay-map .lay-region-video{min-height:calc(var(--ctl-hero) + 10px)}
.lay-map .lay-region-link b::after{content:" ↗";color:var(--ink-3);font-weight:400}
/* 값 열(em)이 설명 줄(small)에 밀려 두 글자로 잘렸다 — 첫 열이 minmax(0,1fr) 이라야 nowrap 설명이 열을 늘리지 않는다 */
/* 줄은 한 줄이다 — 이름 · 값 · › (설명은 title). 두 줄짜리 카드는 목록이 아니라 글이었다 (경쟁 제품 대조 2026-10-14) */
.lay-map button{grid-template-columns:minmax(0,1fr) auto 10px;grid-template-rows:auto;min-height:var(--ctl-xl);padding:0 10px 0 12px}
.lay-map button b{font-size:var(--t-base);font-weight:600}
.lay-map button em{grid-row:1;grid-column:2;max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:var(--t-sm)}   /* % 는 자기 auto 열 기준이라 순환해서 두 글자가 됐다 */
.lay-map button .chev{grid-column:3;grid-row:1;color:var(--ink-3);font-style:normal;text-align:right}
.lay-map button .chev::after{content:"›";font-size:var(--t-lg);line-height:1}
.lay-map .lay-region-link .chev::after{content:"↗";font-size:var(--t-sm)}
.lay-map .lay-region-link b::after{content:none}
/* 영역 묶음 안의 밴드 카드 — 머리는 '내용' 이름표 + 고르는 목록 (설정 창에서 이름표 없이 선 select 가 입력칸처럼 읽혔다) */
.band-content{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;width:100%}
.band-content>span{font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}
.band-content select{min-width:0;width:100%;height:var(--ctl-md);border:1px solid var(--line-2);border-radius:6px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:var(--t-sm);padding:0 8px}
.band-strip-row{width:100%;margin:0}
/* 짤 행 (장면 목록의 삽입 컷) */
.sc-row.sc-insert{border-left:3px solid var(--hot)}
.sc-kind.k-insert{background:var(--hot);color:#111}

/* 밴드 카드 (편집기 레이아웃 패널 · docs/band-plan.md B10) */
.band-cards{display:flex;flex-direction:column;gap:8px}.band-card{border:1px solid var(--line);border-radius:8px;background:var(--surface-4);padding:8px}.band-card.on{border-color:var(--hot-dim)}.band-head{display:flex;align-items:center;gap:8px}.band-head b{font-size:var(--t-sm);white-space:nowrap}.band-head select{flex:1;min-width:0;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;font-size:var(--t-sm);padding:5px 6px}.band-head .mini-toggle{margin-left:auto}.band-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:6px;margin-top:6px;min-width:0}.band-row small{font:var(--t-xs) var(--body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.band-row input[type=text]{min-width:0;background:var(--surface-4);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;font-size:var(--t-sm);padding:5px 6px}.band-row input[type=text]::placeholder{color:var(--ink-3)}.band-row.off input[type=text]{opacity:var(--o-off);text-decoration:line-through}.band-row .band-ro{font-size:var(--t-sm);color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.band-row button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--hot);border-radius:6px;padding:4px 6px;font-size:var(--t-xs);white-space:nowrap}.band-pos{display:flex;align-items:center;gap:6px;margin-top:8px}.band-pos small{font:var(--t-xs) var(--mono);color:var(--ink-3);width:56px}.band-pos button{border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);border-radius:6px;padding:var(--sp-2) var(--sp-8);font-size:var(--t-sm)}.band-pos button:disabled{opacity:var(--o-off)}.band-pos b{font:var(--t-xs) var(--mono);color:var(--hot);min-width:40px;text-align:center}.band-card .switch-row{height:46px;border-bottom:0}.band-card .switch-row:last-child{height:40px}.band-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin:6px 0 0}.lay-band[data-band]{cursor:ns-resize}.pv.ro .lay-band[data-band]{cursor:default}
.brand-avatar{display:flex;align-items:center;gap:var(--sp-16);margin-top:12px}.brand-avatar img{width:64px;height:64px;border-radius:50%;background:var(--panel-2);object-fit:cover}.brand-avatar>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.brand-avatar small{flex:1 0 100%;font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}

/* 모션을 줄여 달라고 한 사람에게는 화면 전환도 없다 (M03a 와 같은 규칙). */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .chrome{view-transition-name:none}
}

/* 프로젝트: 작업 요약 → 결과 → 다음 행동 (docs/project-page-plan.md). */
.project-home [hidden]{display:none!important}
/* 머리 줄 — **주 조작은 기둥 오른쪽 끝에 붙는다** (L01/R4). 예전엔 `+ 새 프로젝트`
   오른쪽에 개수(`#vcount`)가 매달려 주 조작이 끝에서 36px 안쪽으로 밀려 있었고, 폰에서는
   그 개수가 자기 줄을 차지한 채 오른쪽에 홀로 떴다. 개수는 제목의 속성이므로 h1 옆이 자리다.
   밑변을 맞춘다(`end`) — 가운데 정렬이면 버튼이 세 줄짜리 제목 블록의 어느 줄에도 안 맞는다. */
.project-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 16px}
.project-section-head p{grid-column:1/-1;font:var(--t-lg) var(--body);color:var(--ink-2);margin:8px 0 0}
.project-section-head h1 #vcount{font:var(--t-md)/1 var(--mono);color:var(--ink-3);letter-spacing:0;margin-left:6px;vertical-align:middle}
.project-filters b{margin-left:6px}
/* 0 인 칩은 고를 것이 없다 (R4-20) — 흐리게, 누를 수 없게 */
.project-filters button.zero{opacity:var(--o-off,.45);cursor:default;border-style:dashed}
.project-request{font-size:var(--t-md);color:var(--ink-2);line-height:1.7;margin:9px 0}
.project-counts{font-size:var(--t-lg);font-weight:600;margin:8px 0;color:var(--ink)}
/* 예상 시간 — 상태 문장 아래. 약속이 아니라 짐작이라 본문보다 한 단계 낮다 (eta.phrase) */
.project-eta{font-size:var(--t-sm);margin:6px 0 0;color:var(--ink-2)}
/* 진행 패널 — 분석 중인 프로젝트의 첫 화면 (docs/progress-ux-plan-2026-10-12.md §5.2). 상태(state)가 모양을 고르고 값은 서버가 준다.
   흐르는 띠는 '일하는 중' 의 기호라 running 에만 — 대기·멈춤에 쓰면 거짓말이다. 움직임은 prefers-reduced-motion 에서 전부 꺼진다. */
.progress-panel{background:var(--panel);border:1px solid var(--hair-2);border-radius:24px;padding:var(--sp-24);margin:0 0 var(--sp-16)}
.progress-panel .pg-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12)}
.progress-panel h2{font-size:var(--t-4xl);line-height:1.4;margin:0}
.pg-bar{position:relative;height:10px;border-radius:999px;background:var(--surface-4);overflow:hidden;margin:var(--sp-16) 0 var(--sp-10)}
/* 막대는 폭이 아니라 scaleX(--p · 0~1) 로 움직인다 — 폭 전환은 매 프레임 배치를 다시 잰다 */
.pg-bar i{display:block;width:100%;height:100%;border-radius:999px;background:var(--hot);position:relative;transform:scaleX(var(--p,0));transform-origin:left center;transition:transform var(--dur-4) var(--ease-inout)}
.progress-panel.running .pg-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:200% 100%;animation:pg-scan var(--dur-loop-slow) linear infinite}
.progress-panel.queued .pg-bar::before,.progress-panel.waiting .pg-bar::before{content:"";position:absolute;left:0;top:0;width:var(--sp-20);height:100%;border-radius:999px;background:var(--hot-dim);animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}
.progress-panel.stalled .pg-bar i{background:var(--bad)}
.progress-panel.stalled h2{color:var(--bad)}
@keyframes pg-scan{from{background-position:120% 0}to{background-position:-20% 0}}
.pg-line{display:flex;gap:var(--sp-12);align-items:baseline;flex-wrap:wrap;font-size:var(--t-lg);color:var(--ink-2);margin:0}
.pg-line b{font-size:var(--t-3xl);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pg-eta{color:var(--ink-3)}
.pg-slow{font-size:var(--t-sm);color:var(--hot);margin:var(--sp-8) 0 0;line-height:1.6}
.pg-steps{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);padding:0;margin:var(--sp-16) 0 0;font-size:var(--t-sm);color:var(--ink-3)}
.pg-steps li{display:flex;align-items:center;gap:var(--sp-6)}
.pg-steps li i{width:var(--sp-8);height:var(--sp-8);border-radius:50%;background:var(--hair-2);flex:none}
.pg-steps li.done{color:var(--ink-2)}.pg-steps li.done i{background:var(--hot-dim)}
.pg-steps li.on{color:var(--ink)}.pg-steps li.on i{background:var(--hot);animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}
.pg-steps li em{font:var(--t-xs) var(--mono);color:var(--hot);font-style:normal}
.pg-note{font-size:var(--t-sm);color:var(--ink-3);margin:var(--sp-12) 0 0;line-height:1.6}
.pg-act{margin-top:var(--sp-12);display:flex;gap:var(--sp-8);flex-wrap:wrap}
.progress-panel.finishing{animation:pg-out var(--dur-4) var(--ease-exit) forwards}
@keyframes pg-out{to{opacity:0;transform:translateY(-6px)}}
#pane-overview.pg-in>*{animation:pg-in var(--dur-4) var(--ease) both}
@keyframes pg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 목록·카드·내비의 진행 표식 — 활성일 때만 DOM 에 있다 (P7). 값은 서버 요약(PG.brief)이고 화면은 폭만 그린다 */
.vlist-group{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin:var(--sp-8) 0 0;display:flex;gap:var(--sp-6);align-items:center}.vlist-group b{color:var(--hot);font-weight:600}
.card-progress{position:relative;height:var(--sp-2);border-radius:999px;background:var(--surface-4);margin:var(--sp-10) 0 var(--sp-16);overflow:visible}
.card-progress i{display:block;width:100%;height:100%;border-radius:999px;background:var(--hot);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform var(--dur-4) var(--ease-inout)}
.card-progress.running i{background:linear-gradient(90deg,var(--hot),var(--hot-dim),var(--hot));background-size:220% 100%;animation:rb-scan var(--dur-loop-slow) var(--ease-inout) infinite}
.card-progress.stalled i{background:var(--bad)}.card-progress.stalled span{color:var(--bad)}
.card-progress span{position:absolute;left:0;top:var(--sp-6);font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scard .spv .card-progress{position:absolute;left:var(--sp-8);right:var(--sp-8);bottom:var(--sp-8);margin:0}.scard .spv .card-progress span{top:auto;bottom:var(--sp-6);color:var(--ink-1)}
.nav-active{display:inline-flex;align-items:center;gap:var(--sp-6);height:var(--ctl-sm);padding:0 var(--sp-10);border-radius:999px;border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot);font-size:var(--t-xs);text-decoration:none;margin-left:var(--sp-4);white-space:nowrap}
.nav-active i{width:var(--sp-6);height:var(--sp-6);border-radius:50%;background:var(--hot);animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}.nav-active b{font-variant-numeric:tabular-nums;font-weight:600}
/* 멈춘 요청이 있으면 알약이 말한다 (R4-13) — 노란 진행색으로 두면 정상 진행으로 읽힌다 */
.nav-active.stalled{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.nav-active.stalled i{background:var(--bad);animation:none}
@media (max-width:720px){.nav-active.stalled b{display:inline}}
.top-actions .nav-active span{display:none}  /* 편집기 상단은 좁다 — 점과 퍼센트만 (문구는 title 로) */
/* 태블릿 폭(≈834px)에서 알약이 붙으면 상단 조작줄이 36px 넘쳐 가로 스크롤이 생겼다 (점검 A31 · uiqa PG3) — 보관함 글자 링크와
   판 번호를 접는다 (보관함은 내비·계정 메뉴에도 있고 판 번호는 저장 상태 줄이 말한다) */
@media (max-width:900px){.top-actions a.version[href^="/library.html"],.top-actions #ver{display:none}}
@media (max-width:720px){.nav-active{margin-left:0}.nav-active b{display:none}}
@media (max-width:720px){.progress-panel{padding:var(--sp-16);border-radius:18px}.progress-panel h2{font-size:var(--t-2xl)}.pg-steps li.done{display:none}}

.project-recent{font-size:var(--t-base);line-height:1.7;color:var(--ink-3);margin:8px 0}.project-recent time{margin-left:8px;white-space:nowrap}
/* 카드의 사실은 **한 줄**이다 — 칩이 상태를 말하고, 여기는 칩이 못 말한 나머지와 요청 조건과
   마지막 움직임뿐이다 (예전엔 요청·개수·최근 작업이 세 줄이었고 둘은 칩과 같은 말이었다). */
#project-samples{margin-top:32px;border-top:1px solid var(--hair);padding:24px 0}#project-samples>summary{cursor:pointer;color:var(--ink-2);font-size:var(--t-lg);margin-bottom:20px}
.project-empty{text-align:center;border:1px dashed var(--hair-2);border-radius:18px}.project-empty p{color:var(--ink-2);margin:12px 0 20px}
.project-back{margin-bottom:24px}.project-back-cat{margin-left:var(--sp-12);font-size:var(--t-sm);vertical-align:middle}.project-home .proj-head{margin-top:0}
.project-next{display:flex;justify-content:space-between;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--hair-2);border-radius:24px;padding:28px}
.project-next h2{font-size:var(--t-4xl);line-height:1.4;margin:14px 0 8px}.project-next p{color:var(--ink-2);font-size:var(--t-lg);line-height:1.7}.project-next>.btn{flex-shrink:0}
.project-next-act{display:flex;flex-wrap:wrap;gap:var(--sp-8);flex-shrink:0}
.project-block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:32px 0 20px;gap:12px}.project-block-head h3{font-size:var(--t-2xl)}.project-block-head h3 span{color:var(--ink-3);margin-left:8px}
/* 개요의 '완성된 쇼츠' 는 완성본 탭과 같은 카드(.scard compact)다 (점검 A15) — 여기서는 칸 수만 정한다 */
/* 개요는 **미리보기 자리**다 (W8) — 기둥을 3등분한 9:16 카드는 1440 에서 한 장이 650px 넘게 서서 첫 화면을 다 먹었다.
   칸 폭에 상한(240px)을 두고 왼쪽에 붙인다. 완성본 탭(.scards)의 카드 폭은 그대로다 */
.project-preview-grid{grid-template-columns:repeat(3,minmax(0,240px));justify-content:start;gap:16px;margin-top:0}
.scard.compact .smeta{margin:0}
.project-history{list-style:none;padding:0;margin:12px 0 30px}.project-history li{display:grid;grid-template-columns:170px 1fr;align-items:start;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.project-history time{font-size:var(--t-base);color:var(--ink-3);line-height:1.8}.project-history button{text-align:left;background:none;border:0;color:var(--ink);font:var(--t-lg) var(--body);line-height:1.6;cursor:pointer}.project-history button span{color:var(--ink-3);margin-left:8px}
.project-more{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--hair-2);padding:32px 0;margin-top:32px}.project-more p{color:var(--ink-2);font-size:var(--t-md);margin-top:8px}
.first-pick{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:24px;align-items:start;margin:0 0 16px;
  background:var(--panel);border:1px solid var(--hot-dim);border-radius:24px;padding:20px}
.first-pick .fp-still{aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center}
.first-pick .fp-still img{width:100%;height:100%;object-fit:cover;display:block}
.first-pick .fp-still span{font-size:var(--t-xs);color:var(--ink-3);padding:12px;text-align:center}
.first-pick .fp-kicker{font:var(--t-xs) var(--mono);color:var(--hot);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.first-pick h3{font-size:var(--t-3xl);line-height:1.35;margin:10px 0 6px}
.first-pick .fp-meta{font-size:var(--t-sm);color:var(--ink-3)}
.first-pick .fp-why{font-size:var(--t-lg);line-height:1.7;color:var(--ink-2);margin-top:12px}
.first-pick .fp-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.first-pick .fp-note{font-size:var(--t-xs);color:var(--ink-3);margin-top:12px;line-height:1.6}
@media (max-width:720px){.first-pick{grid-template-columns:110px 1fr;gap:12px;padding:12px}.first-pick h3{font-size:var(--t-2xl)}}
.project-wait{text-align:center;padding:48px 20px;border:1px dashed var(--hair-2);border-radius:16px;margin-top:24px}.project-wait p{font-size:var(--t-lg);color:var(--ink-2);margin-top:12px}
.project-analysis{border:1px solid var(--hair);border-radius:12px;padding:16px;margin-bottom:20px}.project-analysis>summary{cursor:pointer;font-size:var(--t-lg);color:var(--ink-2)}.project-analysis[open]>summary{margin-bottom:20px}.project-analysis p{font-size:var(--t-md);color:var(--ink-2);margin:10px 0 24px;line-height:1.7}
.project-time{display:flex;justify-content:space-between;color:var(--ink-3);font-size:var(--t-sm);margin:8px 0 16px}.project-position-buttons{display:flex;gap:8px;flex-wrap:wrap}.project-position-buttons button{white-space:normal;text-align:left}
#project-history>h2{margin:12px 0 16px}
/* 프로젝트 카드는 **자기가 놓인 기둥**을 본다 (@container) — 뷰포트 질의를 하나 줄였다.
   기둥은 `.wrap`(container-type:inline-size)이고 뷰포트 700px 일 때 그 안쪽이 660px 다. */
@container (max-width:660px){
 .project-next{padding:20px;display:block}.project-next>.btn,.project-next-act{margin-top:14px}.project-next h2{font-size:var(--t-3xl)}.project-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-preview-grid .scard:last-child:nth-child(3){display:none}
 .project-history li{grid-template-columns:1fr;gap:5px}.project-more{align-items:start;flex-direction:column}.project-home .proj-tabs{overflow:auto;white-space:nowrap}.project-home .proj-tabs button{flex-shrink:0}
}
.project-home .project-section-head{margin-bottom:16px}
/* ── 프로젝트 목록 — 결과물 갤러리 (2026-10-21) ──
   머리 한 줄(제목 | 시작 상자) · 도구 한 줄(칩 | 검색·정렬) · 진행 띠 · 카드 격자 · 보관됨 서랍.
   예전 목록은 카드 하나가 기둥 전체 폭 × 180px 라 1440×900 첫 화면에 프로젝트가 1.5개였다. */
.project-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-12) var(--sp-32);align-items:end;margin-bottom:var(--sp-20)}
.project-top .project-section-head{margin:0}.project-top .project-urlbox{margin:0}
@container (max-width:940px){.project-top{grid-template-columns:1fr}}
.project-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);flex-wrap:wrap;margin:0 0 var(--sp-16)}
.project-tools .project-filters{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin:0}
.project-tools .ctl-row{display:flex;gap:var(--sp-8);flex:0 1 420px;min-width:0}
.project-tools input,.project-tools select{height:var(--ctl-lg);background:var(--panel);color:var(--ink);border:1px solid var(--hair-2);border-radius:999px;padding:0 var(--sp-16);font:var(--t-base) var(--body)}
.project-tools input{flex:1;min-width:0}.project-tools select{width:132px;flex:none}
/* 좁은 폭에서는 카드 밖 조작이라 손가락 크기(--ctl-xl)다 — 34px 는 터치 하한 아래 (uiqa align ④) */
@container (max-width:660px){.project-tools .ctl-row{flex:1 1 100%}.project-tools input,.project-tools select{height:var(--ctl-xl)}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-16)}
.pgrid>.skel{aspect-ratio:16/13;border-radius:16px}
/* 카드 — 제목의 링크가 ::after 로 카드를 덮는다. 쇼츠 표지·⋯ 는 그 위층이다 */
.pcard{position:relative;cursor:pointer;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:border-color var(--dur-2) var(--ease),transform var(--dur-3) var(--ease-inout),box-shadow var(--dur-3) var(--ease-inout),filter var(--dur-1) var(--ease)}
.pcard:hover,.pcard:focus-within{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--lift)}
.pcard.bad{border-color:#6c3c31}
.pcard-media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1D1D21,#0F0F11);overflow:hidden}
.pcard-media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease)}
.pcard:hover .pcard-media>img{transform:scale(1.03)}
.thumb-tile.thumb-tile{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--tile-h) 28% 22%),hsl(calc(var(--tile-h) + 40) 30% 14%));color:hsl(var(--tile-h) 40% 78%);font-family:var(--disp,inherit);font-weight:900;font-size:32px;line-height:1;user-select:none}
.thumb-tile.thumb-tile.flow{position:relative;inset:auto;width:100%;display:grid;background:linear-gradient(135deg,hsl(var(--tile-h) 28% 22%),hsl(calc(var(--tile-h) + 40) 30% 14%))}
.pstate.sample{color:var(--ink-2);border:1px solid var(--hair-2);border-radius:999px;padding:0 8px}
.pcard-media>i{position:absolute;inset:0;display:grid;place-items:center;font:var(--t-xs) var(--mono);font-style:normal;color:#5A5A60}
.pcard-media>em{position:absolute;left:var(--sp-8);bottom:var(--sp-8);background:#08090add;color:#fff;padding:2px 6px;border-radius:4px;font:var(--t-xs) var(--mono);font-style:normal}
/* 완성본 표지 — 오른쪽 아래에 세로로 겹쳐 선다. 누르면 그 자리에서 빠른 보기 */
/* 여러 영상 묶음 카드 — 원본 표지 셋이 겹쳐 선다 (프로젝트 목록 D4 · 그림이 '여러 편' 을 말한다) */
.pcard-fan{position:absolute;inset:0;display:block}
.pcard-fan img{position:absolute;left:8%;top:22%;width:58%;height:58%;object-fit:cover;border-radius:var(--r);border:1px solid #ffffff22;box-shadow:0 6px 18px #0009;transform:translate(calc(var(--i) * 22%),calc(var(--i) * -14%)) rotate(calc(var(--i) * 3deg));z-index:calc(3 - var(--i))}
.pcard.mix .pcard-media{background:linear-gradient(135deg,#1a1a1f,#0d0d10)}
.pcard-stack{position:absolute;right:var(--sp-8);bottom:var(--sp-8);display:flex;z-index:2}
.pcard-stack button{width:44px;aspect-ratio:9/16;padding:0;border:2px solid var(--panel);border-radius:6px;overflow:hidden;background:var(--surface-4);color:var(--ink);margin-left:calc(-1 * var(--sp-16));box-shadow:0 4px 14px #0009;transform:rotate(calc((var(--i) - 1) * 4deg));transition:transform var(--dur-2) var(--ease),margin var(--dur-2) var(--ease);cursor:pointer;display:grid;place-items:center}
.pcard-stack button:first-child{margin-left:0}
.pcard-stack img{width:100%;height:100%;object-fit:cover;display:block}
.pcard:hover .pcard-stack button,.pcard-stack:focus-within button{margin-left:-4px;transform:none}
.pcard-stack button:hover,.pcard-stack button:focus-visible{border-color:var(--hot);transform:translateY(-4px)!important;outline:2px solid transparent;outline-offset:2px}
.pcard-body{padding:var(--sp-12) var(--sp-16) var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-6);flex:1}
.pcard-body h2{font-size:var(--t-lg);font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-body h2 a{color:inherit;text-decoration:none}
.pcard-body h2 a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard-body h2 a:focus-visible{outline:none}.pcard:has(h2 a:focus-visible){outline:2px solid var(--hot);outline-offset:2px}
.pcard-meta{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-3);margin-top:auto}
.pcard-meta time{margin-left:auto;white-space:nowrap}
.pstate{display:inline-flex;align-items:center;gap:var(--sp-6);color:var(--ink-2)}
.pstate i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pstate.ok i{background:#5fd39a}.pstate.bad{color:#ffb4a4}.pstate.bad i{background:var(--bad)}
.pstate.progress i{background:var(--hot);animation:busy-pulse var(--dur-loop) var(--ease-inout) infinite}
.pcard>.card-progress{margin:0 var(--sp-16) var(--sp-24)}
.pcard-more{position:absolute;right:var(--sp-8);top:var(--sp-8);z-index:2;width:var(--ctl-md);height:var(--ctl-md);border-radius:999px;border:0;background:#08090acc;color:#fff;font:700 var(--t-lg)/1 var(--body);letter-spacing:.05em;cursor:pointer;opacity:0;transition:opacity var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.pcard:hover .pcard-more,.pcard:focus-within .pcard-more,.pcard-more[aria-expanded=true]{opacity:1}
.pcard-more:hover,.pcard-more[aria-expanded=true]{background:var(--surface-5)}
@media (hover:none){.pcard-more{opacity:1}}
/* 보관됨 — 원본이 정리된 것. 흑백·옅게, 그래도 남은 완성본은 받을 수 있다 */
.pcard.archived .pcard-media>img{filter:grayscale(1);opacity:.5}
.pcard-media>img.from-short{object-fit:contain}
.pcard.archived .pcard-body h2{color:var(--ink-2)}
.pdrawer{margin-top:var(--sp-32);border-top:1px solid var(--hair);padding-top:var(--sp-16)}
.pdrawer>summary{cursor:pointer;font-size:var(--t-md);color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:var(--sp-8)}
.pdrawer>summary::before{content:'›';display:inline-block;transition:transform var(--dur-2) var(--ease);color:var(--ink-3)}
.pdrawer[open]>summary::before{transform:rotate(90deg)}
.pdrawer>summary b{font:var(--t-sm) var(--mono);color:var(--ink-3)}
.pdrawer[open]>summary{margin-bottom:var(--sp-12)}
.pdrawer-note{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--sp-16);line-height:1.6}
/* 진행 중 — 낮은 줄 */
.prows{display:flex;flex-direction:column;gap:var(--sp-8);margin-bottom:var(--sp-8)}
.prow{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(160px,2fr) auto;align-items:center;gap:var(--sp-16);padding:var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-8);background:var(--panel);border:1px solid var(--hot-dim);border-radius:12px}
.prow:hover{background:var(--panel-2)}
.prow-thumb{width:72px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface-4)}.prow-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prow h3{font-size:var(--t-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow h3 a{color:inherit;text-decoration:none}.prow h3 a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.prow .card-progress{margin:0 0 var(--sp-12)}
.prow-go{font-size:var(--t-sm);color:var(--hot);white-space:nowrap}
@container (max-width:660px){.prow{grid-template-columns:56px minmax(0,1fr);gap:var(--sp-4) var(--sp-12)}.prow-thumb{width:56px;grid-row:span 2}.prow .card-progress{grid-column:2}.prow-go{display:none}}
/* ⋯ 메뉴 — 한 벌을 카드 옆으로 옮겨 쓴다 */
.pmenu{position:absolute;z-index:var(--z-pop);min-width:210px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--e-3);padding:var(--sp-4);display:flex;flex-direction:column}
.pmenu[hidden]{display:none}
.pmenu a,.pmenu button{display:flex;align-items:center;gap:var(--sp-8);height:var(--ctl-lg);padding:0 var(--sp-12);border:0;border-radius:6px;background:none;color:var(--ink);font:var(--t-base) var(--body);text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap}
.pmenu a:hover,.pmenu button:hover,.pmenu a:focus-visible,.pmenu button:focus-visible{background:var(--surface-4);outline:2px solid transparent;outline-offset:-2px}
.pmenu .danger{color:var(--bad);border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:var(--sp-4)}
.pmenu .ic{width:var(--ic-md);height:var(--ic-md)}
/* 빠른 보기 — 세로 영상 | 제목·행동 */
.quickview{border:1px solid var(--line-2);border-radius:16px;background:var(--surface-2);color:var(--ink);padding:0;box-shadow:var(--e-3);max-width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:hidden}
.quickview[open]{display:grid;grid-template-columns:auto minmax(240px,1fr)}
.quickview::backdrop{background:#000c;backdrop-filter:blur(4px)}
.qv-video{background:#000;display:grid;place-items:center}
.qv-video video{display:block;height:min(78vh,720px);aspect-ratio:9/16;max-width:100%;object-fit:contain;background:#000}
.qv-side{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16) var(--sp-20) var(--sp-20);min-width:0}
.qv-head{display:flex;align-items:center;justify-content:space-between}
.qv-count{font:var(--t-sm) var(--mono);color:var(--ink-3)}
.qv-x{width:var(--ctl-md);height:var(--ctl-md);border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:var(--t-lg);cursor:pointer}.qv-x:hover{background:var(--surface-4)}
.qv-title{font-size:var(--t-2xl);line-height:1.4}
.qv-src{font-size:var(--t-sm);color:var(--ink-3);margin:0}
.qv-actions{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-12)}
.qv-actions .btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);height:var(--ctl-xl)}
.qv-actions .ic{width:var(--ic-md);height:var(--ic-md)}
.qv-nav{display:flex;gap:var(--sp-8);margin-top:auto}.qv-nav .btn{flex:1;height:var(--ctl-lg);font-size:var(--t-xl)}
@media (max-width:620px){.quickview[open]{grid-template-columns:1fr;overflow:auto}.qv-video video{height:min(62vh,560px)}}
.project-menu{position:relative}.project-menu:not([open])>:not(summary){display:none}.project-menu summary{cursor:pointer;list-style:none;border:1px solid var(--hair-2);border-radius:999px;padding:6px 16px;color:var(--ink-2);font-size:var(--t-3xl)}.project-menu[open] .btn{position:absolute;right:0;top:42px;z-index:var(--z-sticky);white-space:nowrap;border:1px solid var(--hair-2);background:var(--panel)}

/* 무대 위 직접 조작 — 편집기(#pv)와 레이아웃 화면(#stage)이 같은 부품(bandgeom.js)을 쓰므로 선택·손잡이 규칙은 `.geom-stage` 다.
   손잡이는 잘리는 미리보기 안에 둔다. */
.geom-stage .lay-video,.geom-stage [data-band]{touch-action:none}
/* 캔버스 선택 — 눌러 볼 수 있는 것은 hover 에 얇은 점선, 고른 것은 강조색 실선 + 손잡이.
   손잡이는 흰 바탕·강조색 테두리의 작은 사각형(모서리)과 알약(위아래 경계)이다 — 채운 큰 사각형은 내용을 가렸다. */
.geom-stage .lay-video:hover:not(.canvas-selected),.geom-stage [data-band]:hover:not(.canvas-selected){outline:1px dashed #ffffffa6;outline-offset:-1px}
.geom-stage .canvas-selected{outline:2px solid var(--hot);outline-offset:-2px;box-shadow:inset 0 0 0 3px #0000004d}
.geom-stage .canvas-handle{position:absolute;z-index:var(--z-nav);display:none;width:12px;height:12px;min-width:0;padding:0;border:2px solid var(--hot);border-radius:var(--r-sm);background:#fff;box-shadow:0 1px 3px #0009;pointer-events:auto;touch-action:none;transition:transform var(--dur-1) var(--ease)}
.geom-stage .canvas-handle:hover{transform:scale(1.25)}
.geom-stage .canvas-selected>.canvas-handle{display:block}
#pv.canvas-moving .canvas-bar{visibility:hidden}
.geom-stage .canvas-handle-nw{left:-1px;top:-1px;cursor:nwse-resize}
.geom-stage .canvas-handle-ne{right:-1px;top:-1px;cursor:nesw-resize}
.geom-stage .canvas-handle-sw{left:-1px;bottom:-1px;cursor:nesw-resize}
.geom-stage .canvas-handle-se{right:-1px;bottom:-1px;cursor:nwse-resize}
.geom-stage .canvas-handle-n,.geom-stage .canvas-handle-s{left:calc(50% - 16px);width:32px;height:8px;cursor:ns-resize}
.geom-stage .canvas-handle-n{top:-1px}.geom-stage .canvas-handle-s{bottom:-1px}
/* 고른 밴드의 도구 줄 — 이름 + 가리기 */
#pv .canvas-bar{position:absolute;z-index:var(--z-pop);display:flex;align-items:center;gap:2px;height:30px;padding:0 var(--sp-4) 0 var(--sp-10);box-sizing:border-box;border:1px solid #ffffff26;border-radius:8px;background:#15191fe8;box-shadow:0 6px 18px #0008;color:#fff;pointer-events:auto;touch-action:auto;backdrop-filter:blur(6px)}
#pv .canvas-bar[hidden]{display:none}
#pv .canvas-bar.tight{padding-left:var(--sp-4)}#pv .canvas-bar.tight>b{display:none}
#pv .canvas-bar b{font-size:var(--t-xs);font-weight:600;white-space:nowrap;padding-right:6px;border-right:1px solid #ffffff2e;margin-right:2px}
#pv .canvas-bar-btn{display:grid;place-items:center;width:var(--ctl-sm);height:var(--ctl-sm);min-width:0;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer}
#pv .canvas-bar-btn:hover{background:#ffffff1f;color:var(--hot)}
#pv .canvas-bar-btn:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
/* 제목 띠의 후보 넘기기 — 도구 줄 안의 ‹ k/N › + '이 제목으로' (docs/title-picker-placement-plan-2026-10-23.md) */
#pv .canvas-tpick{display:inline-flex;align-items:center;gap:2px;padding-right:6px;margin-right:2px;border-right:1px solid #ffffff2e}
#pv .canvas-tpick[hidden]{display:none}
#pv .canvas-tpick i{font-style:normal;font-size:var(--t-xs);font-variant-numeric:tabular-nums;color:#fff;min-width:28px;text-align:center}
#pv .canvas-tpick .canvas-bar-btn{font-size:16px;line-height:1}
#pv .canvas-bar-use{height:22px;padding:0 8px;margin-left:4px;border:0;border-radius:var(--r-sm);background:var(--hot);color:#111;font-size:var(--t-xs);font-weight:600;cursor:pointer}
#pv .canvas-bar-use{white-space:nowrap;flex:none}
#pv .canvas-bar-use:disabled{background:transparent;color:#ffffff59;box-shadow:inset 0 0 0 1px #ffffff2e;cursor:default}
#pv .canvas-bar-btn .ic{width:16px;height:16px}
#pv .canvas-bar-del:hover{background:#ff4d4f2e;color:#ff6b6b}
/* 서식 칸에서 고른 글자 — 영상 위의 같은 글자에 두르는 표시. 화면의 표시일 뿐 렌더에는 없다 */
#pv .canvas-sel-mark{position:absolute;z-index:var(--z-pop);pointer-events:none;box-sizing:border-box;border:2px solid var(--hot);border-radius:4px;background:color-mix(in srgb,var(--hot) 22%,transparent);box-shadow:0 0 0 1px #0006}
#pv.canvas-moving .canvas-sel-mark{visibility:hidden}
/* 캔버스에서 고른 자막 — 자막 상자(.sub)는 줄 폭 전체라 글자 둘레에 따로 그린다 (editor-app markCaption) */
#pv .cap-sel,#stage .cap-sel{position:absolute;z-index:var(--z-pop);pointer-events:none;box-sizing:border-box;border:2px solid var(--hot);border-radius:6px;box-shadow:0 0 0 1px #0006}
#pv.cap-moving{cursor:grabbing}
#pv.cap-hover,#stage.cap-hover{cursor:move}
#stage.cap-moving{cursor:grabbing}
#stage .lay-sub{pointer-events:none}   /* 자막 줄은 화면 폭이라 그 아래 띠·영상의 클릭을 가렸다 — 글자 자리로 가린다(templates.js captionHit) */
.caption-props .cap-pos-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--t-xs);color:var(--ink-3)}
.caption-props .cap-pos-row b{color:var(--ink);font-weight:600;margin-right:auto}
.caption-props .cap-pos-help{margin:6px 0 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.5}

/* ── 계정 상자 · 알림 · 지나가는 메시지 (app.js `mountAccount`/`toast`) ──────
   크롬 오른쪽은 조각 다섯(종·프로바이더·잔액·이름·로그아웃)이었다. 전부 같은 것 하나에
   대한 이야기인데 자리를 다섯 개 먹었고 화면마다 폭이 달라졌다 — 지금은 **단추 하나**다.
   크기는 조작 계단(--ctl-lg)을 그대로 쓴다 (크롬의 다른 조작과 1px 도 어긋나면 안 된다). */
.accountbox{position:relative;display:flex;align-items:center}
.acct{width:var(--ctl-lg);height:var(--ctl-lg);padding:0;border:0;background:none;position:relative;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-full)}
.acct:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.acct-ring{position:relative;width:var(--ctl-lg);height:var(--ctl-lg);display:block}
.acct-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.acct-ring circle{fill:none;stroke-width:2.5}
.ring-bg{stroke:var(--fill-2, rgba(255,255,255,.12))}
/* 남은 만큼만 그린다 — 반쯤 썼으면 테두리도 반이다 (값은 billing.gauge 가 정한다) */
.ring-on{stroke:var(--cool);stroke-linecap:round;transition:stroke-dashoffset var(--dur-3) var(--ease)}
.acct.low .ring-on{stroke:var(--hot)}
.acct.empty .ring-on{stroke:var(--bad)}
.acct-face{position:absolute;inset:4px;border-radius:var(--r-full);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-4);
  color:var(--ink-1);font:600 var(--t-sm)/1 var(--body)}
.acct-face img{width:100%;height:100%;object-fit:cover}
.acct:hover .acct-face{background:var(--surface-5)}
.bell-count{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);
  background:var(--hot);color:#1A1200;font:700 var(--t-xs)/1 var(--body);
  border:2px solid var(--surface-1)}
.studio-top .bell-count{border-color:var(--surface-2)}

/* 아래쪽 200px 은 **비워 둔다** — 지나가는 메시지가 사는 자리다. 메뉴가 거기까지 내려오면
   로그아웃이 토스트에 가린다 (실측). 목록이 길면 메뉴가 아니라 목록이 스크롤한다. */
.usermenu{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,92vw);
  max-height:calc(100vh - 200px);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--e-2);z-index:var(--z-pop);overflow:auto}
.usermenu>header{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-12);
  border-bottom:1px solid var(--line)}
.um-face{width:34px;height:34px;flex:none;border-radius:var(--r-full);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-4);
  color:var(--ink-1);font:600 var(--t-md)/1 var(--body)}
.um-face img{width:100%;height:100%;object-fit:cover}
/* 얼굴도 <span> 이라 `header span` 으로 쓰면 그 규칙이 얼굴을 덮는다 (글자가 11px 회색이 됐다) */
.usermenu>header b{display:block;font-size:var(--t-md)}
.usermenu>header>div span{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.um-credit{padding:var(--sp-12);border-bottom:1px solid var(--line)}
.um-bal{display:flex;align-items:baseline;gap:var(--sp-6)}
.um-bal b{font:700 var(--t-3xl)/1 var(--disp);color:var(--ink)}
.um-bal span{font-size:var(--t-sm);color:var(--ink-3)}
.um-bal .btn{margin-left:auto;align-self:center}
.um-bar{height:4px;border-radius:var(--r-full);background:var(--fill-2);margin:var(--sp-10) 0 var(--sp-6);
  overflow:hidden}
.um-bar i{display:block;height:100%;background:var(--cool);border-radius:var(--r-full);
  transition:width var(--dur-3) var(--ease)}
.acct-low .um-bar i{background:var(--hot)}
.um-credit small{font-size:var(--t-xs);color:var(--ink-3)}
.um-notes{border-bottom:1px solid var(--line)}
.um-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-10) var(--sp-12) var(--sp-6)}
.um-head b{font-size:var(--t-base);color:var(--ink-2)}
.bell-list{list-style:none;margin:0;padding:0;max-height:24vh;overflow:auto}
.bell-list li{border-top:1px solid var(--line)}
.bell-list a,.bell-list .bell-item{display:flex;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);
  color:var(--ink-1);align-items:flex-start}
.bell-list a:hover{background:var(--fill);color:var(--ink)}
.bell-list li.unread{background:var(--hot-ghost)}
.bell-list b{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink)}
.bell-list span{display:block;font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug);
  margin-top:2px}
.bell-list time{display:block;font:var(--t-xs)/1 var(--mono);color:var(--ink-3);margin-top:var(--sp-4)}
.bell-list .dot{width:7px;height:7px;border-radius:var(--r-full);flex:none;margin-top:var(--sp-6);
  background:var(--ink-3)}
.dot-good{background:var(--cool)}.dot-bad{background:var(--bad)}.dot-info{background:var(--hot-dim)}
.bell-empty{margin:0;padding:var(--sp-8) var(--sp-12) var(--sp-12);font-size:var(--t-sm);
  color:var(--ink-3);line-height:var(--lh-body)}
.um-links{display:flex;flex-direction:column;padding:var(--sp-6) 0;border-bottom:1px solid var(--line)}
.um-links a{padding:var(--sp-6) var(--sp-12);font-size:var(--t-base);color:var(--ink-1)}
.um-links a:hover{background:var(--fill);color:var(--ink)}
/* 운영 화면도 같은 링크 줄이다 — 글자 크기·색은 형제와 같고, 새 창으로 나간다는 것만 선 아이콘이 말한다 */
.um-links .um-admin{display:flex;align-items:center;gap:var(--sp-6)}.um-links .um-admin .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--ink-3)}
/* 화면 언어 — 메뉴 안에서는 한 줄(지금 언어 + ›)이고 누르면 그 자리에 세로 목록이 펼쳐진다 */
.um-lang{border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
.um-row{display:flex;align-items:center;gap:var(--sp-8);width:100%;height:var(--ctl-md);padding:0 var(--sp-12);
  background:none;border:0;color:var(--ink-1);font:inherit;font-size:var(--t-base);cursor:pointer;text-align:left}
.um-row:hover,.um-row:focus-visible{background:var(--fill);color:var(--ink);outline:2px solid transparent;outline-offset:-2px}
.um-row .ic{width:var(--ic-md);height:var(--ic-md);color:var(--ink-3)}
.um-row b{margin-left:auto;font-weight:500;font-size:var(--t-sm);color:var(--ink-3)}
.um-row .um-chev{width:13px;height:13px;transition:transform var(--dur-1) var(--ease)}
.um-row[aria-expanded="true"] .um-chev{transform:rotate(90deg)}
.um-lang .lang-row-h{display:none}
.um-lang .lang-opts{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0 var(--sp-6) var(--sp-4) var(--sp-30, 30px)}
.um-lang .lang-opts .lang-opt{border-color:transparent;background:none;height:var(--ctl-sm);font-size:var(--t-base)}
.um-lang .lang-opts .lang-opt.on{background:var(--fill);border-color:transparent}
.usermenu>#logout{margin:var(--sp-10) var(--sp-12) var(--sp-12);width:calc(100% - var(--sp-24))}
/* 화면 언어 고르기 (web/i18n.js langPicker) — 헤더에서는 지구본 단추 하나(누르면 목록), 계정 메뉴 안에서는
   펼쳐진 한 줄. 국기 대신 코드 배지(KO·EN…)다 — 언어는 나라가 아니고 화면의 표식은 선 아이콘이다 (U03).
   높이는 조작 계단이 정한다 */
.lang-box{position:relative;display:inline-flex}
.lang-btn{gap:var(--sp-6);padding-inline:var(--sp-8) var(--sp-10)}
.lang-btn b{font-weight:500;font-size:var(--t-sm)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-pop);min-width:172px;padding:var(--sp-4);
  display:flex;flex-direction:column;background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--e-2)}
.lang-menu[hidden]{display:none}
/* 언어 목록이 뚝 나타나지 않게 (P21) — 열릴 때만 짧게 내려온다. 닫힘은 hidden 이라 즉시다 */
.lang-menu:not([hidden]){animation:lang-in var(--dur-2) var(--ease);transform-origin:100% 0}
@keyframes lang-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.lang-opt{display:flex;align-items:center;gap:var(--sp-8);height:var(--ctl-md);padding:0 var(--sp-8);
  border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--ink-1);font:inherit;
  font-size:var(--t-base);text-align:left;cursor:pointer;white-space:nowrap}
.lang-opt:hover,.lang-opt:focus-visible{background:var(--fill);color:var(--ink);outline:2px solid transparent;outline-offset:-2px}
.lang-opt.on{color:var(--ink)}
.lang-opt.on .lang-code{background:var(--hot);color:var(--void);border-color:var(--hot)}
.lang-code{flex:none;min-width:26px;padding:0 var(--sp-4);line-height:16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:600 var(--t-xs)/16px var(--mono);letter-spacing:.02em;text-align:center;color:var(--ink-3);font-style:normal}
.lang-row-h{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--sp-6)}
.lang-row-h .ic{width:var(--ic-sm);height:var(--ic-sm)}
.lang-opts{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.lang-opts .lang-opt{height:var(--ctl-sm);font-size:var(--t-sm);gap:var(--sp-6);padding:0 var(--sp-8) 0 var(--sp-4);
  border-color:var(--line)}
.lang-opts .lang-opt.on{border-color:var(--hot-dim);background:var(--hot-ghost)}

/* 지나가는 메시지 — **오른쪽 아래**다. 오른쪽 위는 기둥의 주 조작 자리라(L02 의 머리 규칙)
   거기 띄우면 '새 프로젝트' 같은 그 화면의 주 버튼을 5초씩 덮는다 (실측). 종의 배지는
   남아 있으므로 '어디서 왔나' 는 그쪽이 말한다. */
.toast-stack{position:fixed;bottom:var(--sp-16);right:var(--gut);z-index:var(--z-toast);
  display:flex;flex-direction:column-reverse;gap:var(--sp-8);pointer-events:none;max-width:min(360px,92vw)}
/* 새 것은 위에 선다(column-reverse) — 아래에 붙이면 있던 것들이 전환 없이 밀려 올라갔다 (R6-03).
   빠질 때는 app.toastFlip 이 남은 것을 미끄러뜨린다 */
.toast{pointer-events:auto;position:relative;display:block;padding:var(--sp-10) var(--sp-32) var(--sp-10) var(--sp-12);
  background:var(--surface-4);border:1px solid var(--line-2);border-left:3px solid var(--hot);
  border-radius:var(--r);box-shadow:var(--e-2);color:var(--ink-1);
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(8px);transition-timing-function:var(--ease-exit)}
/* 주 조작 옆의 값 배지 — 소재 시트의 '편집 시작'. 누르기 전에 가장 크게 보여야 하는 것은
   '무엇을 쓰는가' 이고, 회색 설명 줄에만 있으면 읽히지 않는다 (실측). 높이는 단추와 같은
   계단을 타고(--ctl-hero) 배치만 여기서 한다. */
/* 크레딧이 나가는 단추는 **값을 안에 달고 있다** (시작 · 42). 소재 시트의
   '편집 시작' 과 URL 붙여넣기의 '시작' 이 같은 조각을 쓴다 — 한쪽에만 두면 반드시 갈라진다.
   단추의 색·높이는 각자의 계보가 정하고(.btn / 시트 nav), 여기서는 **배치만** 한다. */
.go-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-10)}
/* 값은 단추 **안**에 있되 배지가 아니라 라벨 옆의 **한 조각**이다. 어두운 알약에 반짝임을
   넣으면 게임 재화 배지처럼 읽힌다 — 라벨과는 머리카락 선 하나로만 가른다 (그 선은
   currentColor 라 주황 단추에서도 시트 단추에서도 같은 농도로 보인다). */
.go-cost{position:relative;display:inline-flex;align-items:center;gap:var(--sp-6);
  padding-left:var(--sp-10);font-variant-numeric:tabular-nums}
.go-cost::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:currentColor;opacity:.32}
.go-cost b{font-size:var(--t-md);font-weight:700}
.go-cost-ic{width:12px;height:12px;opacity:.7}

/* 예상 값의 환산 금액 — 크레딧 옆에 붙는다. 사람은 크레딧이 아니라 돈으로 판단한다.
   눈에 띄되 크레딧(정본)보다 세지 않게: 같은 크기, 한 단계 옅은 색. */
.cost-usd{color:var(--ink-2);font-variant-numeric:tabular-nums}
/* 업로드 블록의 값 줄 — 파일을 고르기 전에도 무엇이 값을 정하는지 말한다 */

/* 충전 팩 단추 줄 — 계정 크레딧 탭. 조작 높이는 계단(`--ctl-sm`)이 정하고 여기선 배치만 한다. */
.topup-packs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.toast-good{border-left-color:var(--cool)}
.toast-bad{border-left-color:var(--bad)}
.toast b{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink)}
.toast span{display:block;font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug);margin-top:2px}
.toast-x{position:absolute;top:4px;right:4px;width:var(--ctl-sm);height:var(--ctl-sm);
  border:0;background:none;color:var(--ink-3);font-size:var(--t-lg);line-height:1;border-radius:var(--r-sm)}
.toast-x:hover{color:var(--ink);background:var(--fill)}
a.toast{text-decoration:none}
/* 모션 축소 규칙을 여기 또 쓰지 않는다 — 위의 전역 규칙(`*{transition:none!important}`)이
   이미 전부 끄고, 그 질의의 **마지막** 등장으로 화면 전환 규칙을 읽는 검사(uiqa R7)가
   있어서 뒤에 하나 더 두면 엉뚱한 곳을 본다. */

#pv .canvas-title-editing>:not(.canvas-title-input){visibility:hidden}
#pv .canvas-title-input{position:absolute;inset:0;z-index:var(--z-pop);box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:4px 8px;resize:none;border:2px solid var(--hot);border-radius:2px;background:#15191f;color:#fff;font-family:inherit;font-weight:700;text-align:center;line-height:1.25;white-space:pre-wrap;pointer-events:auto;touch-action:auto;user-select:text}

/* Wide vertical resize hit areas; a small central grip distinguishes them from movement. */
.geom-stage .canvas-handle-n,.geom-stage .canvas-handle-s{left:20px;right:20px;width:calc(100% - 40px);height:14px;border:0;background:transparent;border-radius:0;box-shadow:none}
.geom-stage .canvas-handle-n{top:-3px}.geom-stage .canvas-handle-s{bottom:-3px}
.geom-stage .canvas-handle-n:hover,.geom-stage .canvas-handle-s:hover{transform:none}
.geom-stage .canvas-handle-n::after,.geom-stage .canvas-handle-s::after{content:"";position:absolute;left:calc(50% - 20px);top:4px;width:40px;height:6px;box-sizing:border-box;border:2px solid var(--hot);border-radius:4px;background:#fff;box-shadow:0 1px 3px #0009;transform:scaleX(.7);transition:transform var(--dur-1) var(--ease)}
.geom-stage .canvas-handle-n:hover::after,.geom-stage .canvas-handle-s:hover::after{transform:none} /* 폭 대신 scaleX (R6-18) */

/* 자막 표시: mode(자동/직접)와 enabled(ON/OFF)를 분리한다. 이유는 스위치 밖에서 줄바꿈한다. */
.caption-display{border:1px solid var(--line-2);border-radius:12px;background:var(--surface-4);padding:12px;margin-bottom:12px}
.caption-display-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
.caption-mode-badge{font-size:var(--t-xs);border:1px solid var(--line-2);border-radius:6px;padding:4px 6px;color:var(--ink-2)}
.caption-display[data-mode="auto"] .caption-mode-badge{color:var(--cool);border-color:var(--cool-dim);background:var(--surface-3)}
.caption-display .caption-display-switch{height:auto;min-height:60px;gap:10px;border:0;cursor:pointer}
.caption-display-switch>span{flex:1;min-width:0;gap:4px}
.caption-display-switch b{font-size:var(--t-md);color:var(--ink)}
.caption-display-switch small{font-size:var(--t-sm)}
.caption-display-switch>em{font:var(--t-sm) var(--mono);color:var(--ink-3)}
.caption-display[data-enabled="true"] .caption-display-switch>em{color:var(--hot)}
.caption-display .caption-display-switch>i{flex:0 0 34px;width:34px;margin-left:0}
.caption-display-switch input:focus-visible+i{outline:2px solid var(--hot);outline-offset:4px}
.caption-display-reason{font-size:var(--t-sm);line-height:1.65;color:var(--ink-2);margin:0 0 12px;overflow-wrap:anywhere}
.caption-display-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.caption-display-footer>span{font-size:var(--t-xs);color:var(--ink-3)}
.caption-display-footer button{border:0;padding:4px 0;background:transparent;color:var(--hot);font-size:var(--t-sm);cursor:pointer}
.caption-display-footer button:disabled{color:var(--ink-3);cursor:default}
.caption-display-footer button:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.caption-off-note{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);padding:0 2px;margin:0 0 12px}


/* Bundled OFL fonts: identical families in preview and libass. */
/* 자막·제목의 번들 폰트 — spec/fonts.json 과 같은 목록이다 (렌더의 fontsdir 과 같은 파일 · test_font_bundle_contract) */
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('/assets/fonts/Paperlogy-8ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Black Han Sans';src:url('/assets/fonts/BlackHanSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Bagel Fat One';src:url('/assets/fonts/BagelFatOne-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
.lay-pill{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;box-shadow:0 .5cqh 1.6cqh rgba(0,0,0,.28)}
.lay-pill .lay-band-row{line-height:inherit;font-weight:inherit;text-wrap:nowrap;white-space:nowrap;display:block;-webkit-line-clamp:unset;overflow:visible}
.lay-pill .lay-band-row span{font-weight:inherit;line-height:inherit;color:inherit;display:inline;overflow:visible;-webkit-line-clamp:unset}
@font-face{font-family:'NanumGothic';src:url('/assets/fonts/NanumGothic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'NanumGothic';src:url('/assets/fonts/NanumGothic-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'NanumMyeongjo';src:url('/assets/fonts/NanumMyeongjo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'NanumMyeongjo';src:url('/assets/fonts/NanumMyeongjo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Nanum Pen';src:url('/assets/fonts/NanumPenScript-Regular.ttf') format('truetype');font-weight:400 700;font-display:swap}
/* 자막·제목 글꼴 묶음 (spec/fonts.json · 2026-10-24) — 손글씨·붓글씨·명조·영문 필기체. 브라우저는 쓰는 글꼴만 받는다 */
@font-face{font-family:'Jua';src:url('/assets/fonts/Jua-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Do Hyeon';src:url('/assets/fonts/DoHyeon-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Gaegu';src:url('/assets/fonts/Gaegu-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Poor Story';src:url('/assets/fonts/PoorStory-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Cute Font';src:url('/assets/fonts/CuteFont-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Single Day';src:url('/assets/fonts/SingleDay-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Dokdo';src:url('/assets/fonts/Dokdo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Nanum Brush Script';src:url('/assets/fonts/NanumBrushScript-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'East Sea Dokdo';src:url('/assets/fonts/EastSeaDokdo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Yeon Sung';src:url('/assets/fonts/YeonSung-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Song Myung';src:url('/assets/fonts/SongMyung-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Ma Shan Zheng';src:url('/assets/fonts/MaShanZheng-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Zhi Mang Xing';src:url('/assets/fonts/ZhiMangXing-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Yuji Syuku';src:url('/assets/fonts/YujiSyuku-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('/assets/fonts/GreatVibes-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Allura';src:url('/assets/fonts/Allura-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Parisienne';src:url('/assets/fonts/Parisienne-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Dancing Script';src:url('/assets/fonts/DancingScript-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Pacifico';src:url('/assets/fonts/Pacifico-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url('/assets/fonts/Caveat-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
.band-artwork{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.lay-band>.lay-band-row,.lay-band>.formatted-text{position:relative;z-index:1}.format-tools .format-family{grid-column:1/-1}
.format-tools .format-family select{width:100%;max-width:100%}

/* ── 설명 점 · 접기 · 단계 표시 (U01 · app.js 의 tip/fold/flowSteps) ──────────
   회색 문장 네 줄을 지우는 대신 세 자리로 나눈 것이다. 자세한 근거는 app.js 주석. */

/* 설명 점 — 글자 줄 안에 서므로 높이를 글줄에 맞춘다 (조작 높이 계단의 대상이 아니다:
   상자가 아니라 글 옆의 표식이다 — `.linky` 와 같은 예외). */
.tipdot{display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
  width:17px;height:17px;padding:0;margin-inline-start:4px;border:0;border-radius:var(--r-full);
  background:var(--fill);color:var(--ink-2);cursor:help;flex:0 0 auto;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.tipdot .ic{width:var(--ic-sm);height:var(--ic-sm)}
.tipdot:hover,.tipdot[aria-expanded=true]{background:var(--fill-2);color:var(--ink)}
.tipdot:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
/* 주의 점(!) — 돈이 들거나 · 되돌리기 어렵거나 · 이름과 다르게 동작하는 자리. 색이 (i) 와 달라야 가른 뜻이 산다 */
.tipdot[data-kind=warn]{background:color-mix(in srgb,var(--hot) 18%,transparent);color:var(--hot)}
.tipdot[data-kind=warn]:hover,.tipdot[data-kind=warn][aria-expanded=true]{background:color-mix(in srgb,var(--hot) 30%,transparent);color:var(--hot)}
.tipop.warn{border-color:color-mix(in srgb,var(--hot) 45%,var(--line-2))}

.tipop{position:fixed;z-index:calc(var(--z-toast) + 1);box-sizing:border-box;
  padding:var(--sp-10) var(--sp-12);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-4);color:var(--ink-1);box-shadow:var(--e-2);
  font:var(--t-sm)/var(--lh-body) var(--body);text-align:left;
  animation:tip-in var(--dur-2) var(--ease)}
.tipop.above{animation-name:tip-in-up}
.tipop b{color:var(--ink);font-weight:600}
.tipop a{color:var(--hot)}
.tipop p{margin:0 0 var(--sp-6)}
.tipop p:last-child{margin-bottom:0}
.tipop dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-10);margin:0}
.tipop dt{color:var(--ink-3)}
.tipop dd{margin:0;color:var(--ink-1)}
@keyframes tip-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes tip-in-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 접기 — 요약 줄 하나가 서 있고 누르면 펼쳐진다 */
.fold{border-top:1px solid var(--line);margin-top:var(--sp-10)}
.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
  min-height:var(--ctl-md);padding:var(--sp-4) 0;cursor:pointer;list-style:none;
  font-size:var(--t-base);color:var(--ink-2)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:hover{color:var(--ink)}
.fold>summary:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:var(--r-sm)}
.fold .fold-ar{width:14px;height:14px;color:var(--ink-3);transition:transform var(--dur-2) var(--ease)}
.fold[open] .fold-ar{transform:rotate(90deg)}
.fold-in{padding-bottom:var(--sp-10);font-size:var(--t-base);color:var(--ink-2);line-height:var(--lh-body)}

/* 제목 후보 넘겨 보기 (app.js titlePicker · docs/title-carousel-plan-2026-10-21.md) — 편집기·컷 화면·컷 카드 한 벌.
   넘기는 것은 보기라 노랑은 '이 제목으로' 하나뿐이다. */
.tpick{display:flex;align-items:center;gap:var(--sp-6);min-width:0;border-radius:var(--r-sm);outline:none}
.tpick:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.tpick-nav{flex:none;display:inline-grid;place-items:center;width:var(--ctl-sm);height:var(--ctl-sm);padding:0;
  border:0;border-radius:var(--r-full);background:var(--hot);color:#140C02;cursor:pointer;transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
.tpick-nav:hover{filter:brightness(1.08);transform:scale(1.08)}
.tpick-nav:active{transform:scale(.94)}
.tpick-nav .ic{width:14px;height:14px;stroke-width:2.6}
.tpick-nav.prev .ic{transform:rotate(180deg)}
.tpick-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2);touch-action:pan-y;user-select:none;cursor:grab}
.tpick-text{font-size:var(--t-md);font-weight:600;color:var(--ink);line-height:var(--lh-snug);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpick-body small{font-size:var(--t-xs);color:var(--ink-3)}
.tpick-body small b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tpick-use{flex:none;display:inline-flex;align-items:center;gap:4px;height:var(--ctl-sm);padding:0 10px;border:1px solid var(--hot-dim);
  border-radius:var(--r-full);background:var(--hot-ghost);color:var(--hot);font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer}
.tpick-use:hover{background:var(--hot);border-color:var(--hot);color:#140C02}
.tpick-use .ic{width:13px;height:13px;stroke-width:2.6}
.tpick-use:disabled{border-color:var(--line-2);background:transparent;color:var(--ink-3);cursor:default}
.tpick-use:disabled:hover{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.tpick.compact .tpick-text{font-size:var(--t-base)}
/* 넘긴 쪽에서 들어온다 (R6-17 · app.titlePicker 가 tp-in next/prev 를 단다) */
@keyframes tpick-in{from{opacity:0;transform:translateX(var(--tp-dx,12px))}}
.tpick-text.tp-in{animation:tpick-in var(--dur-2) var(--ease)}
.tpick-text.tp-in.prev{--tp-dx:-12px}
.tpick.compact{gap:var(--sp-4)}
.card-title .tpick-text{font-size:var(--t-md);font-weight:700}
/* big — 제목 글자가 곧 부품이다 (docs/title-picker-placement-plan-2026-10-23.md). h3.tpick-text 는 카드의 h3 규칙을 그대로 받는다 */
.tpick.big{flex-wrap:wrap;align-items:flex-start;row-gap:var(--sp-2)}
.tpick.big .tpick-nav{margin-top:4px}
.tpick.big .tpick-body{flex:1 1 0;max-width:calc(100% - 2*var(--ctl-sm) - 2*var(--sp-6))}
.tpick.big .tpick-text{margin:0;display:block}
.tpick.big .tpick-body small{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.tpick-dots{display:inline-flex;gap:4px;align-items:center;margin-right:var(--sp-2)}
.tpick-dots i{width:6px;height:6px;border-radius:var(--r-full);background:var(--line-2);cursor:pointer;transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
/* 고른 점은 폭이 아니라 크기로 (R6-17·R6-18) — width 전환은 매 프레임 줄을 다시 배치했다 */
.tpick-dots i.on{background:var(--hot);transform:scale(1.5)}
.tpick-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);width:100%;min-width:0}
.tpick-row:empty{display:none}
.tpick-hint{font-size:var(--t-xs);color:var(--ink-3)}
.first-pick .tpick-row,.first-pick .tpick-body small{margin-bottom:4px}
@media (max-width:720px){.tpick{flex-wrap:wrap}.tpick-body{flex-basis:calc(100% - 2*var(--ctl-sm) - 2*var(--sp-6))}
  .tpick-use{margin-left:auto}
  /* 좁은 폭의 big (R5-17) — ‹ › 가 제목 양옆에서 폭을 먹으면 두 칸 카드의 제목이 한 줄에 다섯 자다.
     제목은 카드 폭 전체를 쓰고, 넘기기는 아래 점 줄의 양끝으로 간다 */
  .tpick.big{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--sp-6);row-gap:var(--sp-4)}
  .tpick.big .tpick-body{display:contents}
  .tpick.big .tpick-text{grid-column:1/-1;grid-row:1;touch-action:pan-y}
  .tpick.big .tpick-nav{margin-top:0;align-self:center}
  .tpick.big .tpick-nav.prev{grid-column:1;grid-row:2}
  .tpick.big .tpick-body small{grid-column:2;grid-row:2;justify-content:center;touch-action:pan-y}
  .tpick.big .tpick-nav.next{grid-column:3;grid-row:2}
  .tpick.big .tpick-row{grid-column:1/-1;grid-row:3}}

/* 단계 표시 — 한 줄, 글 없음. 지금 자리만 밝다. */
.flowbar{display:flex;align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-16)}
.flowbar-step{display:inline-flex;align-items:center;gap:var(--sp-6);height:var(--ctl-md);
  padding:0 var(--sp-10);border-radius:var(--r-full);border:1px solid transparent;
  color:var(--ink-3);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.flowbar-step .ic{width:var(--ic-md);height:var(--ic-md)}
.flowbar-step b{font:500 var(--t-sm)/1 var(--body)}
.flowbar-step:hover{color:var(--ink-1)}
.flowbar-step.done{color:var(--ink-2)}
.flowbar-step.on{color:var(--hot);border-color:var(--hot-dim);background:var(--hot-ghost)}
.flowbar-step:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.flowbar-line{flex:0 0 18px;height:1px;background:var(--line-2)}
@media (max-width:520px){.flowbar-step b{display:none}.flowbar-step{padding:0 var(--sp-8)}.flowbar-line{flex-basis:10px}}

/* 사실 칩 — 표 한 줄 한 줄 대신 눈으로 훑는 자리 (아이콘 + 값) */
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin:0 0 var(--sp-10)}
.fact{display:inline-flex;align-items:center;gap:var(--sp-6);height:var(--ctl-sm);
  padding:0 var(--sp-10);border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-1);font-size:var(--t-sm);white-space:nowrap}
.fact .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--ink-3);flex:0 0 auto}
.fact b{font-weight:600;color:var(--ink)}
.fact.ok{border-color:var(--cool-dim);color:var(--cool)}
.fact.ok .ic{color:var(--cool)}
.fact.warn{border-color:var(--hot-dim);color:var(--hot)}
.fact.warn .ic{color:var(--hot)}

/* 요청 폼의 '틀' 한 줄 — 예전엔 점선 상자 안의 넉 줄짜리 회색 문단이었다 (U01).
   상자를 없앤 이유는 이것이 경고도 입력도 아니라 **사실 한 줄**이기 때문이다. */
.look-note{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-6);
  padding:0;border:0;font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--ink-2)}
.look-note .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--ink-3);flex:0 0 auto}
.look-note b{color:var(--ink-1);font-weight:600}
.mode-note .ic{width:var(--ic-sm);height:var(--ic-sm);vertical-align:-2px;color:var(--hot)}

/* 요청 폼 안의 접기 — 폼 간격 안에 들어앉는다 */
.setform-more>.fold-in{display:flex;flex-direction:column;gap:var(--sp-10);padding-bottom:var(--sp-12)}
.setform-more>.fold-in>label{display:flex;flex-direction:column;gap:var(--sp-4)}

/* 컷 카드의 근거 한 줄 — 아이콘 + 짧은 말 (U01).
   심판이 쓴 문단은 서랍('자세히')이 맡는다: 카드는 훑는 자리다. */
.ccard .reason{display:flex;align-items:flex-start;gap:var(--sp-6);margin:0;
  font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--ink-2)}
.ccard .reason .ic{width:var(--ic-sm);height:var(--ic-sm);margin-top:var(--sp-2);color:var(--hot);flex:0 0 auto}
.ccard .reason span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 근거가 없어 심판의 문단을 빌려 쓰는 카드는 **한 줄**이다 — 두 줄로 자르면 문장이 말줄임에서
   끊겨 읽을 수도 없고, 옆 카드의 한 줄짜리 근거와 높이도 어긋난다 (잘린 글은 못 읽는 글이다). */
.ccard .reason.one span{-webkit-line-clamp:1}
.ccard .reason.one .ic{color:var(--ink-3)}
/* 한도는 **틀 줄 아래 한 줄**이다. 가운뎃점으로 이으면 좁은 폭에서 접히며 구분선이 허공에 뜬다. */
/* 묶음 제목 옆의 설명 점 — 표가 없을 때도 제목 줄에 머문다 (U01) */
.spanel h3 .tipdot{align-self:center;margin-inline-start:auto}
.spanel .pnote{display:flex;align-items:center;gap:var(--sp-6);margin:0}
.spanel .pnote .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--ink-3);flex:0 0 auto}
/* 첫 갈림길 셋 — 아이콘이 글보다 먼저 읽힌다 (U01) */
.catalog-starts .btn{display:inline-flex;align-items:center;gap:var(--sp-8)}
.catalog-starts .btn .ic{width:var(--ic-md);height:var(--ic-md)}

/* 사이트 상태 띠 (app.siteBanner · runtime.site_info) — 읽기 전용은 모두에게, 점검 중은 운영자에게만.
   주 조작 자리를 덮지 않게 문서 흐름 맨 위에 선다 (떠 있는 층이 아니다). */
.site-banner{padding:var(--sp-8) var(--gut);font-size:var(--t-md);line-height:1.5;text-align:center;
  background:var(--hot-ghost);border-bottom:1px solid var(--hot-dim);color:var(--ink)}
.site-banner.maintenance{background:var(--panel);color:var(--ink-2)}

/* ── 요청 폼의 바 (app.js requestBars) — 컷 수 · 컷 길이 · 원본 구간 ───────────────────────── */
.rbars{display:flex;flex-direction:column;gap:var(--sp-16);margin:var(--sp-4) 0 var(--sp-12)}
.rb-row{display:flex;flex-direction:column;gap:6px}
.rb-head{display:flex;align-items:baseline;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
.rb-head b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rb-row[data-auto="1"] .rb-head b{color:var(--ink-3);font-weight:500}
.rb-reset{margin-left:auto;font-size:var(--t-sm)}
.rb-note{margin:0;font-size:var(--t-sm);color:var(--ink-3);min-height:0}
.rb-note:empty{display:none}
.rb-note.rb-warn{color:var(--hot)}
.rb-single{width:100%;accent-color:var(--hot);margin:0}
.rb-row[data-auto="1"] .rb-single{accent-color:var(--ink-3)}
.rb-ends{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ink-3);margin-top:-2px}
.rb-dual{position:relative;height:20px}
.rb-track{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:var(--line-2)}
.rb-fill{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--hot)}
.rb-row[data-auto="1"] .rb-fill{background:var(--ink-3)}
.rb-dual input[type=range]{position:absolute;left:0;top:0;width:100%;height:20px;margin:0;background:none;
  -webkit-appearance:none;appearance:none;pointer-events:none}
.rb-dual input[type=range]::-webkit-slider-runnable-track{background:none;border:0;height:20px}
.rb-dual input[type=range]::-moz-range-track{background:none;border:0}
.rb-dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;
  margin-top:var(--sp-2);border-radius:50%;background:var(--ink);border:2px solid var(--hot);cursor:grab}
.rb-dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:2px solid var(--hot);cursor:grab}
.rb-row[data-auto="1"] .rb-dual input[type=range]::-webkit-slider-thumb{border-color:var(--ink-3)}
.rb-row[data-auto="1"] .rb-dual input[type=range]::-moz-range-thumb{border-color:var(--ink-3)}
.rb-dual input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--hot);outline-offset:2px}
.rb-inline{flex-direction:row;align-items:center;justify-content:space-between}
.rb-label{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:var(--t-sm);color:var(--ink-2)}
.rb-choices{display:flex;flex-wrap:wrap;gap:6px}
.rb-choices button{min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-3);color:var(--ink-2);font:inherit;font-size:var(--t-sm);cursor:pointer}
.rb-choices button:hover:not(:disabled){border-color:var(--hot);color:var(--ink)}
.rb-choices button[aria-pressed="true"]{border-color:var(--hot);background:var(--hot-ghost);color:var(--ink);font-weight:600}
.rb-choices button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.rb-choices button:disabled{opacity:var(--o-off);cursor:not-allowed}
.rb-count-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rb-inline{flex-wrap:wrap;gap:8px}
.rb-want-note{flex-basis:100%}
.rb-source{font-size:var(--t-sm);color:var(--ink-2)}
.rb-source summary{cursor:pointer;padding:8px 0;display:list-item}
.rb-source summary b{font-weight:500;color:var(--ink-3);margin-left:8px}
.rb-source .rb-row{padding:8px 0}
.rb-row [hidden]{display:none}
.fs-source-head{display:flex;align-items:center;gap:12px}
.fs-source-head .ub-cover{width:88px;height:60px;flex:none;object-fit:cover;margin:0}
.fs-source-head .ub-meta{margin:0;min-width:0}
.stepper{display:inline-flex;align-items:stretch;height:var(--ctl-md);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;background:var(--surface-3)}
.stepper button{width:var(--ctl-md);display:grid;place-items:center;background:none;border:0;border-radius:0;padding:0;color:var(--ink-1);cursor:pointer}
.stepper button:hover:not(:disabled){background:var(--surface-5);color:var(--ink)}
.stepper button:disabled{color:var(--ink-3);opacity:var(--o-off);cursor:default}
.stepper .ic{width:var(--ic-sm);height:var(--ic-sm)}
.stepper input{width:44px;border:0;border-inline:1px solid var(--line-2);border-radius:0;background:none;color:var(--ink);
  text-align:center;font:600 var(--t-md)/1 inherit;font-variant-numeric:tabular-nums;padding:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 예상 비용 — 바 바로 아래, 크게. 무엇을 바꾸든 여기가 따라 바뀐다 */
.rb-price{display:block;padding:var(--sp-10) var(--sp-12);border-radius:var(--r);background:var(--surface-3);
  border:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.rb-price b{font-size:var(--t-xl);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rb-price .cost-usd{color:var(--ink-1)}
.rb-price[hidden]{display:none}
@keyframes rb-bump{0%{border-color:var(--hot);background:var(--hot-ghost)}100%{border-color:var(--line);background:var(--surface-3)}}
.rb-price.bump{animation:rb-bump var(--dur-5) var(--ease)}
.go-cost.bump b{animation:rb-num var(--dur-4) var(--ease)}
@keyframes rb-num{0%{opacity:.3}100%{opacity:1}}

/* 상세 설정 — 접힌 줄이 **줄처럼** 안 보이게 (사용자: '눈에 확 안 들어온다'). 카드 한 장: 아이콘 · 이름 · 무엇이
   들어 있나 · 바꾼 개수 · 화살표. 소재 시트(.setform-more)와 링크·파일 시트(.sheet-more)가 같은 모양이다 */
.setform-more,.sheet-more{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);margin:var(--sp-4) 0 var(--sp-8)}
.setform-more>summary,.sheet-more>summary{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-10) var(--sp-12);
  cursor:pointer;list-style:none;color:var(--ink);font-size:var(--t-md);font-weight:600}
.setform-more>summary::-webkit-details-marker,.sheet-more>summary::-webkit-details-marker{display:none}
.setform-more>summary:hover,.sheet-more>summary:hover{background:var(--surface-3)}
.more-ic{width:16px;height:16px;color:var(--hot);flex:none}
.more-t{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}
.more-t small{font-size:var(--t-sm);font-weight:400;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more-n{font-size:var(--t-xs);font-weight:600;color:var(--surface-0);background:var(--hot);border-radius:var(--r-full);padding:var(--sp-2) var(--sp-8)}
.more-n[hidden]{display:none}
.setform-more .fold-ar,.sheet-more .fold-ar{width:14px;height:14px;color:var(--ink-3);transition:transform var(--dur-2) var(--ease);flex:none}
.setform-more[open] .fold-ar,.sheet-more[open] .fold-ar{transform:rotate(90deg)}
.setform-more[open]>summary,.sheet-more[open]>summary{border-bottom:1px solid var(--line)}
.setform-more>.fold-in,.sheet-more>.ub-opts{padding:var(--sp-12)}
.sheet-more>.mode-pick+.ub-opts{padding-top:var(--sp-10)}

/* 새 작업의 템플릿 고르기 (app.js tplPickHTML) */
.tpl-pick-row{display:flex;gap:8px;align-items:center}
.tpl-pick-row select{flex:1 1 auto;min-width:0}

/* 'AI가 고르기' 의 편성안 — 방식마다 몇 개·왜 (프로젝트 요청 상자) */
.mode-plan { margin: 4px 0 0; padding-left: 16px; }
.mode-plan li { margin: 2px 0; }

/* 번들 배경 그림 고르기 (app.js backdropPicker) — 레이아웃 화면·편집기 */
.bglib{display:grid;gap:8px;container-type:inline-size}
.bglib-cats{display:flex;flex-wrap:wrap;gap:4px}
.bglib-cats button{height:var(--ctl-sm);padding:0 10px;border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--ink-2);font-size:var(--t-sm);cursor:pointer;white-space:nowrap}
.bglib-cats button:hover{color:var(--ink);background:var(--fill)}
.bglib-cats .bglib-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--line-2)}
.bglib-cats button.on{background:var(--surface-5);color:var(--ink);border-color:transparent;font-weight:600}
/* 한 줄에 4장 · 3줄까지만 보이고 나머지는 스크롤. 칸 폭이 패널 폭을 따르므로 줄 높이를 같은 폭(cqw)에서 9:16 으로 낸다
   (고정 72px 이면 넓은 패널에서 3장 + 큰 빈칸이 됐다 — 2026-10-19 사용자 지적) */
.bglib-grid{--bgrow:calc((100cqw - 22px) / 4 * 16 / 9);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:var(--bgrow);gap:6px;max-height:calc(var(--bgrow) * 3 + 12px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:2px}
.bglib-card{position:relative;width:100%;height:100%;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer}
.bglib-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bglib-card span{position:absolute;left:0;right:0;bottom:0;padding:10px 4px 4px;font-size:var(--t-xs);color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.62));line-height:1.25;word-break:keep-all;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* 칸이 세로로 길어 두 줄이 들어간다 — 한 줄 말줄임이면 좁은 패널에서 '크래프…' 가 됐다 */
.bglib-card:hover{border-color:var(--line-2)}
.bglib-card.on{border-color:var(--hot)}
.bglib-card:focus-visible,.bglib-cats button:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.bg-lib-ed:not(:empty){margin-top:10px}

/* ── 고르기 부품 (web/lookpick.js) — 레이아웃 화면·편집기가 같은 값을 같은 모양으로 만진다 (docs/look-pick-shared-plan-2026-10-22.md) ──
   카드는 서버 doc 을 render.js 가 그린 것이고 여기는 테두리·간격뿐이다. 높이는 조작 계단(--ctl-*) · 글자는 토큰(--t-*). */
.lk-cards{display:grid;grid-template-columns:repeat(var(--lk-cols,3),minmax(0,1fr));gap:8px}
/* 띠가 없는 틀: 카드는 끈 채 자리를 지키고 안내는 그 위에 뜬다 — 흐름에 넣으면 컷을 넘길 때 아래 칸이 두 줄만큼 오르내린다 */
.lk-cards:has(>.lk-off-note){position:relative}
.lk-cards>.lk-off-note{position:absolute;top:var(--sp-8);left:var(--sp-8);right:var(--sp-8);z-index:1;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-1);box-shadow:var(--e-2)}
.lk-card{display:grid;gap:4px;padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--ink-2);
  text-align:left;cursor:pointer;min-width:0}
.lk-card:hover{border-color:var(--line-2)}
.lk-decos{--lk-cols:3}
.lk-deco-thumb{display:grid;place-items:center;aspect-ratio:16/10;border-radius:4px;background:var(--surface-3);overflow:hidden}
.lk-deco-thumb img{max-width:86%;max-height:80%;object-fit:contain}
/* 크레딧 스타일 견본 (채널 띠·출처 띠) — 스펙의 색·글꼴로 그린 작은 띠 + 칩 하나 */
.lk-cstyles{--lk-cols:3}
.lk-cst-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:16/10;border-radius:4px;
  background:linear-gradient(160deg,#3a4150,#1b1f27);overflow:hidden;padding:var(--sp-4)}
.lk-cst-thumb.clear{background:linear-gradient(160deg,#59606c,#23272f)}
.lk-cst-bar,.lk-cst-pill{font-style:normal;font-size:var(--t-sm);line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lk-cst-bar{align-self:stretch;text-align:center;padding:var(--sp-2) var(--sp-4)}
.lk-cst-pill{padding:var(--sp-2) var(--sp-8);border-radius:999px}
.lk-cst-thumb em{display:flex;align-items:center;gap:var(--sp-4);font-style:normal;font-size:var(--t-xs);color:#fff;font-weight:700}
.lk-cst-thumb em img{width:12px;height:12px}
/* SNS 칩 토글 — 로고 + 이름. 계정에 핸들이 없으면 흐리게 (누를 수 없다) */
.lk-social-row{display:flex;flex-wrap:wrap;gap:6px}
.lk-social{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-md);padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--ink-2);font-size:var(--t-sm);cursor:pointer}
.lk-social img{width:16px;height:16px}
.lk-social.on{border-color:var(--ink-1);color:var(--ink-1);background:var(--panel-2);font-weight:600}
.lk-social.empty{opacity:.45;cursor:not-allowed}
/* 계정 채널 설정의 SNS 핸들 칸 다섯 */
.brand-socials{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;flex:1}
.brand-socials label{display:flex;align-items:center;gap:8px}
.brand-socials img{width:22px;height:22px;flex:none}
.brand-socials input{flex:1;min-width:0}
.lk-card.on{border-color:var(--hot);background:var(--hot-ghost)}
.lk-card.on>b{color:var(--hot)}
.lk-card:disabled{opacity:var(--o-off);cursor:default}
.lk-card>b{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--t-xs);font-weight:500;color:var(--ink-2);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-card:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.lk-preset{grid-template-columns:64px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;padding:6px}
.lk-preset>b{align-self:end;font-size:var(--t-sm);color:var(--ink)}
.lk-stage{grid-row:1/3;display:block;width:64px}
.lk-desc{font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;align-self:start;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere}
.lk-cards.lk-narrow .lk-preset{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;text-align:center}
.lk-cards.lk-narrow .lk-stage{grid-row:auto;width:100%;max-width:64px}
.lk-cards.lk-narrow .lk-desc{display:none}
.lk-cards.lk-narrow .lk-preset>b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;justify-self:stretch;white-space:normal;overflow-wrap:anywhere;min-height:2.4em} /* 가운데 맞춤이면 이름 상자가 글자만큼 늘어나 'Márgenes difuminados' 가 옆 카드로 넘어갔다 · 두 줄 자리를 늘 잡아 카드 높이가 같다 */
.st-zoom{position:relative;display:block;width:100%;aspect-ratio:2.1;overflow:hidden;border-radius:4px;background:#000}
.st-zoom-in{position:absolute;display:block}
.lk-cols-2{--lk-cols:2}
.lk-badge{display:inline-block;font-family:var(--mono);font-style:normal;font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:2px;padding:2px var(--sp-4);line-height:1;vertical-align:text-top;margin-block:-2px}
.lk-badge.on{color:var(--hot);border-color:var(--hot-dim)}
.lk-palette{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.lk-palette .lk-swatch{display:grid;place-items:center;width:var(--ctl-md);height:var(--ctl-md);border-radius:6px}
.lk-palette .lk-swatch i{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--fg,#fff)}
.lk-palette .lk-label{flex-basis:100%}
.lk-palette .lk-note{flex-basis:100%}
/* 짧은 선택 — 칩·세그먼트·색 점 */
.lk-chips{display:flex;gap:6px;flex-wrap:wrap}
.lk-chip{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-md);padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-4);font:var(--t-sm) var(--mono);color:var(--ink-1);cursor:pointer}
.lk-chip.on{border-color:var(--hot-dim);background:var(--hot-ghost);color:var(--hot)}
.lk-ratio{display:block;height:14px;border:1.5px solid currentColor;border-radius:2px;opacity:.8}
/* 세그먼트는 고르는 그림이 아니라 값이다 — 노랑은 고른 그림 카드와 주 단추만 (S11 · 중립 선택).
   칸은 같은 폭으로 한 줄에, 모자라면 두 칸씩 접혀 줄이 맞는다 (S12 — 넷 중 하나만 다음 줄로 떨어지지 않게) */
.lk-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:4px}
.lk-seg button{font:var(--t-sm) var(--body);color:var(--ink-2);background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r);
  box-sizing:border-box;height:var(--ctl-sm);min-width:0;padding:0 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-seg button:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.lk-seg button.on{color:var(--ink);border-color:var(--ink-2);background:var(--fill-2);font-weight:600}
.lk-seg button:disabled{color:var(--ink-2);background:transparent;border-style:dashed;cursor:not-allowed}
.lk-seg button.on:disabled{color:var(--ink-2)}
.lk-ss{display:grid;grid-template-columns:1fr 1fr}
.lk-swatches{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lk-label{font-size:var(--t-xs);color:var(--ink-3);margin-right:4px}
.lk-swatch{width:22px;height:22px;border-radius:50%;background:var(--sw);border:2px solid transparent;box-shadow:0 0 0 1px var(--line-2);cursor:pointer;padding:0}
.lk-swatch.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--hot)}
.lk-swatch-custom{display:grid;place-items:center}
.lk-swatch-custom input{width:24px;height:24px;padding:0;border:1px dashed var(--ink-3);border-radius:50%;background:none;cursor:pointer}
.lk-swatch-custom input::-webkit-color-swatch-wrapper{padding:2px}
.lk-swatch-custom input::-webkit-color-swatch{border:0;border-radius:50%}
.btn.sm.lk-reset{height:var(--ctl-sm);padding:0 8px;margin-left:auto;background:none;border-color:transparent;color:var(--ink-3);
  font-size:var(--t-sm);font-weight:500}
.btn.sm.lk-reset:hover{background:var(--fill);color:var(--ink)}
.btn.sm.lk-reset:disabled{visibility:hidden}
/* 슬라이더·줄·체크 */
.lk-geom{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.lk-slider{display:flex;align-items:center;gap:8px;min-height:var(--ctl-md);min-width:0}
.lk-slider label{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;font-size:var(--t-sm);color:var(--ink-2)}
.lk-slider label>span{flex:none;min-width:36px}
.lk-slider input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--hot)}
.lk-slider output{min-width:6ch;flex:none;text-align:right;font:var(--t-sm) var(--mono);color:var(--ink)}
.lk-slider .lk-reset{margin-left:0}
.lk-vid>.lk-slider .lk-reset[hidden]{display:none}
/* 좁은 칸(편집기 띠 카드 ≈230px)에서는 슬라이더가 82px 로 눌렸다 — 이름·값·되돌리기를 한 줄, 슬라이더를 다음 줄 전체 폭으로 */
.lk-geom{container-type:inline-size}
@container (max-width:320px){
  .lk-slider{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n o r" "s s s";column-gap:var(--sp-8);row-gap:var(--sp-2)}
  .lk-slider label{display:contents}
  .lk-slider label>span{grid-area:n;align-self:center}
  .lk-slider input[type=range]{grid-area:s;width:100%}
  .lk-slider output{grid-area:o;align-self:center}
  .lk-slider .lk-reset{grid-area:r}
}
.lk-row{display:flex;align-items:center;gap:10px;min-height:var(--ctl-md);font-size:var(--t-sm);color:var(--ink-2)}
.lk-row>span:first-child{flex:none;width:84px;min-width:84px;color:var(--ink-2)}
.lk-row>select{flex:1 1 auto;min-width:0;height:var(--ctl-md)}
.lk-row>input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--hot)}
.lk-row>output{min-width:6ch;flex:none;text-align:right;font:var(--t-sm) var(--mono);color:var(--ink)}
.lk-row>.lk-seg{flex:1 1 auto;min-width:0}
.lk-row input[type=color]{appearance:none;-webkit-appearance:none;flex:none;width:var(--ctl-md);height:var(--ctl-md);padding:2px;
  border:1px solid var(--line-2);border-radius:6px;background:none;cursor:pointer}
.lk-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.lk-row input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.lk-check{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;min-height:var(--ctl-md);
  font-size:var(--t-base);color:var(--ink);cursor:pointer}
.lk-check>span{display:grid;gap:2px}
.lk-check small{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
.lk-check input:not(.ui-switch){accent-color:var(--hot);width:16px;height:16px;flex:none}
.lk-note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;margin:0}
.lk-cards>.lk-note{grid-column:1/-1} /* 카드 격자 안의 안내는 한 칸이 아니라 줄 전체 — 두 칸 격자에서 120px 로 접혔다 */
.lk-head{display:flex;align-items:center;gap:8px;min-height:var(--ctl-md)}
.lk-head>b{font-size:var(--t-base);color:var(--ink)}
.lk-capfmt{display:grid;grid-template-columns:minmax(0,1fr);gap:0;container:lkfmt/inline-size}
/* 좁은 칸(편집기 왼쪽 패널 ≈270px)에서는 이름표를 위로 올리고 조작이 줄 전체 폭을 쓴다 — 옆에 두면 84px 이름표가 폭의 3분의 1을
   먹어 '없음/노래방/한 글자씩/단어씩 쌓기' 가 2×2 로, 테두리 두께 여섯이 3줄로 꺾였다 (2026-10-25 사용자 지적 '너무 좁다') */
@container lkfmt (max-width:360px){
  .lk-row:has(>.lk-seg),.lk-row:has(>select),.lk-row:has(>.fp-wrap),.lk-row:has(>input[type=range]){flex-wrap:wrap;row-gap:6px}
  .lk-row:has(>.lk-seg)>span:first-child,.lk-row:has(>select)>span:first-child,.lk-row:has(>.fp-wrap)>span:first-child,.lk-row:has(>input[type=range])>span:first-child{width:100%;min-width:0} /* 슬라이더 줄도 — 84px 이름 칸에서 일본어 'ボックスの濃さ' 가 '濃 / さ' 로 갈라졌다 */
  .lk-row>.lk-seg{flex-basis:100%}
  .lk-seg{display:flex;flex-wrap:wrap}
  .lk-seg button{flex:1 1 auto;min-width:0;padding-inline:var(--sp-8);white-space:nowrap}
  .lk-row>input[type=range]{min-width:80px}
  .lk-capsub{margin-left:0;padding-left:var(--sp-10)}
  .lk-capsub .lk-row>span:first-child{width:72px;min-width:72px}
  .lk-capsub .lk-row:has(>input[type=range])>span:first-child{width:100%;min-width:0}
}
.lk-capfmt>.lk-row,.lk-capfmt>.lk-check,.lk-capfmt>.lk-capsub{padding:8px 0;border-bottom:1px solid var(--line)}
.lk-capfmt>.lk-note{padding-top:8px}
.lk-capsub{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 0 4px;padding-left:12px;border-left:2px solid var(--line)}
.lk-capsub .lk-row>input[type=range]{min-width:48px} /* 들여 쓴 칸이 좁을 때 줄이 3px 밖으로 나갔다 (편집기 900 폭) */
.lk-capsub[hidden]{display:none}
/* 띠 색 · 띠 부가 설정 */
.lk-band{display:grid;gap:6px}
.lk-band-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.lk-band-row>label{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--ink-2)}
.lk-band-row input[type=color]{appearance:none;-webkit-appearance:none;width:var(--ctl-md);height:var(--ctl-md);padding:2px;border:1px solid var(--line-2);
  border-radius:6px;background:none}
.lk-band-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.lk-band-row input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.lk-band-a{grid-column:1/-1}
.lk-band-a input[type=range]{flex:1 1 auto;min-width:56px;accent-color:var(--hot)}
.lk-band-a output{font:var(--t-sm) var(--mono);color:var(--ink);min-width:6ch;text-align:right}
.lk-band-sw{grid-column:1/-1;display:grid;place-items:center;height:var(--ctl-sm);border-radius:8px;font-size:var(--t-sm);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.lk-extras{display:grid;gap:8px}
.lk-pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.lk-pattern-grid button{min-width:0;padding:4px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--ink-2);
  font-size:var(--t-sm);text-align:center;cursor:pointer}
.lk-pattern-grid button.on{border-color:var(--hot);color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
.lk-pattern-grid button:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.lk-pattern-grid i{display:block;position:relative;height:32px;border-radius:4px;overflow:hidden;margin-bottom:4px}
.lk-horizontal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.lk-horizontal label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-xs);color:var(--ink-3);min-width:0}
.lk-horizontal input,.lk-horizontal select{box-sizing:border-box;width:100%;min-width:0;height:var(--ctl-md);padding:0 6px;background:var(--surface-4);
  border:1px solid var(--line-2);border-radius:4px;color:var(--ink);font-size:var(--t-sm)}
/* 편집기 머리는 어느 폭에서도 한 줄이다 (UI 다듬기 E02) — 768 에서 제목 열이 30px 로 눌려 제목이 사라지고
   '제목 다시 쓰기' 가 한 글자씩 세로로 섰다. 제목 열이 남는 폭을 먼저 받고 넘치는 글자는 말줄임으로 접는다 */
.studio-top .studio-title{flex:1 1 120px}
/* 머리는 두 줄이다 — 제목 | 다른 제목 n · 그 아래 한 줄(컷 제목 안내가 있으면 그것, 없으면 SHORT VIDEO).
   넷을 세로로 쌓으면 58px 머리 위아래로 넘쳐 제목이 화면 밖으로 잘렸다 (2026-10-25) */
.studio-top .studio-title{display:grid;grid-template-columns:minmax(0,max-content) auto;align-items:baseline;column-gap:var(--sp-8);row-gap:0;align-content:center}
.studio-title>b{grid-area:1/1}
.studio-title>.title-alts{grid-area:1/2;overflow:visible}
.studio-title>#project-meta,.studio-title>#cut-title-note{grid-column:1/-1}
.studio-title:has(>#cut-title-note:not([hidden]))>#project-meta{display:none}
.studio-title>*{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-title>b{display:block}
.title-alts .ta-open{white-space:nowrap}
/* 좁은 머리(1100 폭 스페인어 + 진행 알약)에서 제목이 '맥북 ...' 두 글자였다 — 그때는 제목이 첫 줄 전체를 갖고 '다른 제목' 은 아랫줄 끝으로 */
.studio-top .studio-title{container:ttl/inline-size}
@container ttl (max-width:240px){
  .studio-title>b{grid-area:1/1/2/3}
  .studio-title>.title-alts{grid-area:2/2}
  .studio-title>#project-meta,.studio-title>#cut-title-note{grid-area:2/1}
  /* 'SHORT VIDEO' 는 이름표라 '제목 다시 쓰기' 와 한 줄을 나누면 'SHOR…' 로 잘렸다 (1024 일본어) — 좁으면 뺀다 */
  .studio-title>#project-meta{display:none}
}
.studio-top .top-actions{flex-wrap:nowrap}
@media (max-width:980px){.studio-top{gap:6px}.studio-top .brand-mark{display:none}.cut-switch{margin-right:0}.cut-switch select{max-width:120px}.studio-top .top-actions{gap:6px;margin-left:4px}}
.studio-top .top-center{flex-shrink:4}
@media (max-width:900px){.studio-top #keys-btn{display:none}.cut-switch select{max-width:96px}}

/* ── 공통 크롬 다듬기 (UI 다듬기 W3 · 2026-10-24) ──────────────────────────────────────────────── */

/* 스위치 — 켜고 끄는 값은 체크 상자가 아니라 스위치다 (점검 A10). 진짜 checkbox 위에 그려서 값·키보드·폼은 그대로다.
   쓰는 법: `<input type="checkbox" class="ui-switch" role="switch">` 을 이름표와 함께 `<label>` 에 넣는다.
   켬은 노랑 손잡이 — 바탕을 노랗게 칠하지 않는다 (레이아웃 화면 `.lt-edit` 스위치와 같은 그림). */
input.ui-switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;margin:0;vertical-align:middle;
  width:32px;height:18px;border-radius:var(--r-full);background:var(--surface-5);border:1px solid var(--line-2);
  cursor:pointer;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
input.ui-switch::before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink-3);transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
input.ui-switch:checked{background:var(--hot-dim);border-color:var(--hot-dim)}
input.ui-switch:checked::before{transform:translateX(14px);background:var(--hot)}
input.ui-switch:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
input.ui-switch:disabled{opacity:var(--o-off);cursor:not-allowed}

/* 체크 상자 — 여럿 중 고르는 값(이어 붙일 컷 · 권리 확인 · 적용할 쇼츠)은 앱의 모양이다 (점검 A10 · W8).
   브라우저 기본 상자는 OS·브라우저마다 다르게 생겨 그 한 자리만 다른 앱처럼 보였다. 켜고 끄는 값은 위 스위치다.
   **편집기(.studio-body)는 뺀다** — 편집기는 자기 부품이 따로 있다 (다른 세션 작업 영역). 스위치 모양으로 그리는
   role=switch 상자도 뺀다 (요금 계산기 등). 보관함이 따로 그리던 체크 모양(W4)은 이것으로 합쳤다. */
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]){
  appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;vertical-align:middle;
  display:inline-grid;place-items:center;cursor:pointer;border:1.5px solid var(--ink-3);border-radius:4px;background:transparent;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):hover{border-color:var(--ink-1)}
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):checked{background:var(--hot);border-color:var(--hot)}
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):checked::after{
  content:"";width:8px;height:4px;border:2px solid #111;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):focus-visible{outline:2px solid var(--hot);outline-offset:2px}
:where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):disabled{opacity:var(--o-off);cursor:not-allowed}

/* 닫기 단추 — 시트·서랍·모달은 같은 × 하나다 (점검 A12 · 컷 화면 `.cutx-x` 와 같은 그림). 이름은 aria-label 이 말한다 */
.x-btn{width:var(--ctl-lg);height:var(--ctl-lg);flex:none;padding:0;border:1px solid var(--line-2);border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-1);display:inline-grid;place-items:center;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.x-btn .ic,.x-btn svg{width:16px;height:16px}
.x-btn:hover{background:var(--surface-4);color:var(--ink)}
.x-btn:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

/* 열림·닫힘 전환 (점검 A11) — 열릴 때는 뒤가 어두워지고 상자가 살짝 떠오른다. 닫힐 때는 `app.leaveHidden` 이
   `hidden` 을 즉시 세운 뒤 `is-leaving` 동안만 화면에 둔다 (그 사이 inert). 모션 줄이기는 위 전역 규칙이 끈다 */
@keyframes ui-fade-in{from{opacity:0}}
@keyframes ui-fade-out{to{opacity:0}}
@keyframes ui-pop-in{from{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes ui-pop-out{to{opacity:0;transform:translateY(4px) scale(.985)}}
@keyframes ui-drop-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes ui-drop-out{to{opacity:0;transform:translateY(-4px)}}
/* 옆에서 들어오는 판(컷 서랍) — 넓은 화면은 오른쪽에서, 폰은 아래에서 (R3-12 · 시트·메뉴와 같은 이름·같은 길이) */
@keyframes ui-slide-in{from{opacity:0;transform:translateX(24px)}}
@keyframes ui-slide-out{to{opacity:0;transform:translateX(24px)}}
@keyframes ui-rise-in{from{opacity:0;transform:translateY(32px)}}
@keyframes ui-rise-out{to{opacity:0;transform:translateY(32px)}}
.sheet-back{animation:ui-fade-in var(--dur-2) var(--ease)}
.sheet-back>.sheet{animation:ui-pop-in var(--dur-2) var(--ease)}
.sheet-back[hidden].is-leaving{display:flex!important;pointer-events:none;animation:ui-fade-out var(--dur-2) var(--ease) forwards}
.sheet-back.is-leaving>.sheet{animation:ui-pop-out var(--dur-2) var(--ease) forwards}
.sheet{animation:ui-fade-in var(--dur-2) var(--ease)}
/* 탭 판 교체 (R6-13) — 프로젝트·계정·보관함이 같은 한 줄 (예전엔 세 화면이 같은 규칙을 각자 들고 있었다) */
.tab-in{animation:ui-fade-in var(--dur-2) var(--ease)}
.sheet>.sheet-box{animation:ui-pop-in var(--dur-3) var(--ease)}
.sheet[hidden].is-leaving{display:flex!important;pointer-events:none;animation:ui-fade-out var(--dur-2) var(--ease) forwards}
.sheet.is-leaving>.sheet-box{animation:ui-pop-out var(--dur-2) var(--ease) forwards}
.usermenu{transform-origin:top right;animation:ui-drop-in var(--dur-2) var(--ease)}
.usermenu[hidden].is-leaving{display:block!important;pointer-events:none;animation:ui-drop-out var(--dur-1) var(--ease) forwards}

/* 컷 서랍의 딤 — 서랍 뒤 화면이 그대로 밝으면 서랍이 화면의 일부처럼 읽혔다 (점검 A12). 딤은 서랍 **다음** 형제라
   서랍이 보일 때만 선다 (서랍을 닫는 자리가 여럿이어도 따라온다). 누르면 닫힌다 */
.cutdrawer-back{position:fixed;inset:0;z-index:calc(var(--z-pop) - 1);background:#0008;display:none;
  animation:ui-fade-in var(--dur-2) var(--ease)}
.cutdrawer:not([hidden])+.cutdrawer-back{display:block}
.cutdrawer[hidden].is-leaving{display:block!important;pointer-events:none;animation:ui-slide-out var(--dur-2) var(--ease) forwards}
.cutdrawer.is-leaving+.cutdrawer-back{display:block;pointer-events:none;animation:ui-fade-out var(--dur-2) var(--ease) forwards}
@media (max-width:720px){
  .cutdrawer{animation-name:ui-rise-in}
  .cutdrawer[hidden].is-leaving{animation-name:ui-rise-out}
}

/* 터치 영역 — 설명 점(17px)과 글자 단추는 보이는 크기를 지키고 누르는 자리만 넓힌다 (점검 A36 · 터치 기기만) */
@media (pointer:coarse){
  .tipdot,.linky{position:relative}
  .tipdot::before{content:"";position:absolute;inset:-12px}
  .linky::before{content:"";position:absolute;inset:-12px -4px}
}

/* ── 시트·키보드 다듬기 (UI 다듬기 W7 · 2026-10-24) ─────────────────────────────────────────────── */

/* 시트의 행동 줄은 바닥에 붙는다 (R2-07) — 파일 시트에서 '상세 설정' 을 열면 주 단추가 스크롤 아래로 숨었다.
   시트 상자가 스크롤 상자라 sticky 로 바닥에 세우고, 시트 여백(16·20)만큼 끌어내 바탕이 끝까지 덮게 한다.
   짧은 확인 시트에서는 스크롤할 것이 없어 자리가 그대로다. 긴 시트(파일·링크)만 위에 선을 긋는다. */
.sheet-back .sheet>nav{position:sticky;bottom:-16px;z-index:1;align-items:center;flex-wrap:wrap;
  margin:var(--sp-12) -20px -16px;padding:12px 20px 16px;background:var(--surface-3)}
.sheet-back .sheet:has(.ub-card)>nav{border-top:1px solid var(--line)}
/* 행동 줄의 단추는 조작 계단 위에 · 주 조작은 페이지와 같은 노랑 (R2-08) — 흰 단추는 이 앱에서 주 조작의 색이 아니다.
   지우는 일(danger)은 그대로 빨강이다. */
.sheet-back .sheet nav button:not(.tipdot),.sheet-back .sheet nav .btn{height:var(--ctl-md);padding:0 var(--sp-12);
  display:inline-flex;align-items:center;justify-content:center}
.sheet-back .sheet nav button.primary,.sheet-back .sheet nav .btn.primary{background:var(--hot);border-color:var(--hot);color:#140C02;font-weight:600}
.sheet-back .sheet nav button.primary:hover:not(:disabled){filter:brightness(1.08)}
.sheet-back .sheet nav button.primary:disabled{opacity:var(--o-off);cursor:not-allowed}
/* 행동 줄 안의 (!) 점은 단추가 아니다 — 위 단추 규칙(테두리·여백·바탕)을 걷고 글 옆 표식 그대로 둔다 */
.sheet-back .sheet nav .tipdot{width:17px;height:17px;padding:0;border:0;border-radius:var(--r-full);margin:0;
  background:var(--fill);color:var(--ink-2)}
.sheet-back .sheet nav .tipdot[data-kind=warn]{background:color-mix(in srgb,var(--hot) 18%,transparent);color:var(--hot)}

/* 링크·파일을 끝내 못 받았을 때 (R2-11) — 견적 폼(컷 수·길이·상세 설정·템플릿·지시)을 접고 오류 상자를 주인공으로 */
.sheet-back .sheet.fs-failed #sheet-body>:not(.ub-card),
.sheet-back .sheet.fs-failed .ub-card>:not(#fs-up){display:none}
.sheet-back .sheet.fs-failed #fs-up{display:grid;gap:var(--sp-4);margin:var(--sp-4) 0 0;padding:var(--sp-12) var(--sp-16);
  font-size:var(--t-base);line-height:1.6;color:var(--ink-1)}
.sheet-back .sheet.fs-failed #fs-up b{margin:0;font-size:var(--t-md)}
/* 확정하지 않은 업로드 목록 (R4-04) — 한도에 걸렸을 때 그 자리에서 이어서 확정하거나 버린다 */
.sheet-back .sheet.fs-failed .ub-card>ul#fs-open{display:grid;gap:var(--sp-8);margin:var(--sp-8) 0 0;padding:0;list-style:none}
#fs-open li{display:flex;align-items:center;gap:var(--sp-8);min-width:0;font-size:var(--t-base)}
#fs-open .fs-open-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fs-open .muted{flex:none;font-size:var(--t-sm)}
#fs-open .btn{flex:none}

/* 숫자 칸(스테퍼)의 포커스는 칸 전체 둘레 하나 (R2-12) — 상자가 overflow:hidden 이라 입력의 outline 이 위아래가 잘려
   숫자 양옆 노란 세로 막대 둘로 보였다 */
.stepper input:focus,.stepper input:focus-visible{outline:none}
.stepper:has(input:focus-visible){outline:2px solid var(--hot);outline-offset:2px}

/* 본문으로 건너뛰기 (R2-13) — 포커스될 때만 보인다. 내비를 Tab 으로 다 지나지 않고 본문에 닿는 첫 자리 */
.skip-link{position:fixed;left:var(--gut);top:var(--sp-8);z-index:calc(var(--z-toast) + 1);height:var(--ctl-lg);
  display:inline-flex;align-items:center;padding:0 var(--sp-16);border-radius:var(--r-full);background:var(--hot);color:#140C02;
  font-size:var(--t-base);font-weight:600;transform:translateY(-200%);transition:transform var(--dur-2) var(--ease)}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:2px solid var(--ink);outline-offset:2px}
/* 건너뛴 자리(본문 래퍼)는 프로그램이 포커스할 뿐이라 테두리를 그리지 않는다 */
[data-skip-target]:focus{outline:none}
/* 내비 링크 키보드 표식 (R2-13 ③) — 메뉴 없는 알약도 */
.chrome .nav a:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
/* 소재 시트의 정밀 검수·컷 확인 스위치 (R2-09) — 폼 입력 규칙(.setform input)의 바탕·여백·모서리가 스위치를 덮지 않게 */
.setform input.ui-switch{padding:0;border-radius:var(--r-full);background:var(--surface-5)}
.setform input.ui-switch:checked{background:var(--hot-dim)}
.empty.has-art h1{font-size:24px;color:var(--ink);margin:0;letter-spacing:-.01em}

/* ══ 공통 부품 — 역할마다 한 벌 (W14 · docs/ui-r5-findings.md R5-07~23) ══════════════════════
   화면마다 따로 자란 변형을 역할마다 하나로 모았다. 화면의 <style> 에 같은 역할을 다시 정의하지 않는다.
   · 화면 제목  .page-title — 700 · --t-5xl(30) · 720px 아래 --t-4xl(25). 랜딩·요금·소재 히어로만 마케팅 예외다.
   · 절 제목    .sec-h — 700 · --t-2xl(18) · --ink. 뒤의 개수는 --ink-3 보통 굵기. (보관함 h2 · 개요 h3 도 같은 값)
   · 눈썹       .eyebrow · .kicker — 600 · --t-sm · 본문 글꼴 · 자간 .02em · --hot. 대문자·넓은 자간은 한글을 흩뜨린다.
   · 상태 배지  .badge(.state · .pill · .pchip · .newtag · .fmt) — 높이 20 · 알약 · 600 --t-xs · 테두리 색이 뜻이다
               (ok·live·mode = 청록 · hot·warn = 노랑 · bad = 빨강 · off·done = 회색). 영상 위에서는 어두운 판을 깐다.
   · 거르기 칩  .fchip — 높이 --ctl-md · --t-base · 고른 것 = 흰 바탕. 노랑은 '지금 내비' 와 주 행동의 몫이다.
   · 지우기     .danger — 글자 단추는 빨간 글자 + 옅은 빨간 테두리, 아이콘 단추는 회색이다가 hover 에서 빨강.
   · 모서리     글자 단추는 알약 하나, 정사각 아이콘 단추만 --r.
   · 아이콘     --ic-sm 14 · --ic-md 16 · --ic-lg 20 · 획 1.8.
   · 카드       바탕은 --panel 하나 · 테두리로 강조. 누르면 열리는 카드만 hover 에서 뜨고 손가락 커서다.
   · 누름       단추·칩·탭·누르는 카드는 :active 에서 살짝 어두워지고 줄어든다 (모션 줄이기면 어두워지기만). */

.page-title{font:700 var(--t-5xl)/1.15 var(--disp);letter-spacing:-.03em;margin:0}
@media (max-width:720px){.page-title{font-size:var(--t-4xl)}}

.sec-h{font:700 var(--t-2xl)/1.3 var(--disp);letter-spacing:-.02em;color:var(--ink);text-transform:none}
.sec-h span{font:500 var(--t-md) var(--body);letter-spacing:0;color:var(--ink-3)}

.eyebrow,.kicker{display:block;margin:0 0 6px;font:600 var(--t-sm)/1.4 var(--body);letter-spacing:.02em;
  color:var(--hot);text-transform:none}

.badge,.state,.pill,.pchip,.newtag,.fmt{display:inline-flex;align-items:center;gap:var(--sp-4);height:max(20px,1.25rem);padding:0 8px;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:transparent;color:var(--ink-2);
  font:600 var(--t-xs)/max(18px,1.125rem) var(--body);font-style:normal;letter-spacing:0;white-space:nowrap;vertical-align:middle}
.badge .ic,.pchip .ic{width:var(--ic-sm);height:var(--ic-sm)}
:is(.badge,.state,.pill,.pchip,.newtag):is(.ok,.live,.mode,.info){border-color:var(--cool-dim);color:var(--cool)}
:is(.badge,.state,.pill,.pchip,.newtag):is(.hot,.warn,.progress,.busy){border-color:var(--hot-dim);color:var(--hot)}
:is(.badge,.state,.pill,.pchip,.newtag).bad{border-color:rgba(255,69,58,.55);color:#FF8A80}
:is(.badge,.state,.pill,.pchip,.newtag):is(.off,.done){border-color:var(--line-2);color:var(--ink-3)}
a.pill:hover,a.badge:hover{border-color:var(--hair-2);color:var(--ink)}
:is(.pv,.spv,.th,.pcard-media) :is(.badge,.state,.pill,.pchip){background:rgba(20,20,22,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.fchip,.fchip-sel{display:inline-flex;align-items:center;gap:var(--sp-4);height:var(--ctl-md);padding:0 12px;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:var(--fill);color:var(--ink-2);
  font:500 var(--t-base) var(--body);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.fchip-sel{padding:0 26px 0 12px}
.fchip:hover,.fchip-sel:hover{color:var(--ink);border-color:var(--hair-2);background:var(--fill-2)}
.fchip.on,.fchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.fchip:focus-visible,.fchip-sel:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.btn.danger{background:transparent;border-color:rgba(255,69,58,.45);color:#FF8A80}
.btn.danger:hover{background:rgba(255,69,58,.1);border-color:var(--bad);color:#FFB0A8}
.btn.icon-btn.danger,.icon-btn.danger{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn.icon-btn.danger:hover,.icon-btn.danger:hover{background:rgba(255,69,58,.1);color:#FF8A80}

/* hover 반응이 없던 조작들 (R5-09) */
:where(body:not(.studio-body)) select:hover{border-color:var(--hair-2)}
:where(body:not(.studio-body)) summary:hover{color:var(--ink)}
.tpick-nav:hover,.tpick.big .tpick-nav:hover{color:var(--ink);border-color:var(--hair-2);background:var(--fill)}
.acct:hover{background:var(--fill)}
.acct:hover .ring-bg{stroke:var(--hair-2)}

/* 누름 (R5-07) — 응답이 느릴 때 '눌렸다' 를 말하는 자리다 */
:where(body:not(.studio-body)) :is(.btn,.fchip,.fchip-sel,.cbtn,.cshorts,.icon-btn,.tpick-nav,.proj-tabs>a,.proj-tabs>button,
  .pmenu a,.pmenu button,.flowbar-step,.acct,a.pill,.linky):not(:disabled):active{filter:brightness(.88);scale:.97}
/* 누름도 전환을 지난다 (R6-16) — scale·filter 가 어느 전환 목록에도 없어 누를 때·뗄 때 한 프레임에 튀었다.
   transition 은 목록을 통째로 바꾸므로 이 조작들이 원래 전환하던 속성을 같이 적는다. 누르는 순간은 바로(0s), 뗄 때만 dur-1 */
:where(body:not(.studio-body)) :is(.btn,.fchip,.fchip-sel,.cbtn,.cshorts,.icon-btn,.tpick-nav,.proj-tabs>a,.proj-tabs>button,
  .pmenu a,.pmenu button,.flowbar-step,.acct,a.pill,.linky){
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
    scale var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
:where(body:not(.studio-body)) :is(.btn,.fchip,.fchip-sel,.cbtn,.cshorts,.icon-btn,.tpick-nav,.proj-tabs>a,.proj-tabs>button,
  .pmenu a,.pmenu button,.flowbar-step,.acct,a.pill,.linky,.pcard,.ccard):active{transition-duration:0s}
/* 넓은 면(카드)은 줄이지 않는다 — 3% 축소가 놓을 때 '덜컥' 했다. 밝기만 */
:where(body:not(.studio-body)) :is(.pcard,.ccard):active{filter:brightness(.94)}
@media (prefers-reduced-motion:reduce){
  :where(body:not(.studio-body)) :is(.btn,.fchip,.fchip-sel,.cbtn,.cshorts,.icon-btn,.tpick-nav,.proj-tabs>a,.proj-tabs>button,
    .pmenu a,.pmenu button,.flowbar-step,.acct,a.pill,.linky):active{scale:none}}

/* 이름표의 자간 (R5-14) — 영문 대문자용 넓은 자간이 한글·일본어·중국어에서는 '사 용 가 능' 처럼 글자를 흩뜨린다.
   이름표 역할(순위·묶음·폼 이름·서랍 머리)은 이 세 언어에서 .02em 이고 대문자 변환도 뜻이 없다. 편집기 안쪽은 제외. */
:is(:lang(ko),:lang(ja),:lang(zh)) :is(.rank,.vlist-group,.nav-menu-label,.project-detail-label span,.grp>b,
  .setform label,.spanel h3 em,.addcut-head .free,.cutdrawer h4){letter-spacing:.02em;text-transform:none}
/* ── W15 로딩 (R5) ─────────────────────────────────────────────────────────────
   첫 그림을 늦게 오는 것들에 맞춘다: 화면 선택(detail-route) · 자리 잡기 · 글꼴 대체 치수. 카드 모양은 건드리지 않는다 */
/* R5-25 — 조각이 오기 전의 대체 글꼴을 Pretendard 의 폭·줄 높이에 맞춘다 (실측: 한글 Apple SD Gothic Neo 99.4% · 라틴
   Helvetica Neue 100% · 오름 95 내림 24). 글꼴이 바뀌는 순간 글줄이 밀리지 않는다. 바깥 주소 없음 — local() 만 */
@font-face{font-family:'Pretendard Web Fallback';font-weight:400 500;src:local('Apple SD Gothic Neo'),local('AppleSDGothicNeo-Regular'),local('Malgun Gothic'),local('Noto Sans KR');unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF;size-adjust:99.4%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Pretendard Web Fallback';font-weight:600 900;src:local('Apple SD Gothic Neo Bold'),local('AppleSDGothicNeo-Bold'),local('Malgun Gothic Bold'),local('MalgunGothicBold');unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF;size-adjust:99.4%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Pretendard Web Fallback';font-weight:400 500;src:local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),local('ArialMT');size-adjust:100%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Pretendard Web Fallback';font-weight:600 900;src:local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Arial Bold'),local('Arial-BoldMT');size-adjust:99.8%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
/* R5-01 — 프로젝트 주소로 들어오면 목록 뼈대 대신 상세 뼈대 (head 의 detail-route · JS 가 화면을 세우면 걷힌다) */
.detail-skel{display:none}
.detail-route .detail-skel{display:block}
.detail-route #project-list-view{display:none!important}
.detail-skel .skel{display:block}
.detail-skel .ds-back{width:92px;height:var(--ctl-sm);border-radius:var(--r-sm,6px)}
.detail-skel .ds-flow{width:min(360px,50%);height:var(--ctl-sm);border-radius:var(--r-full)}
.detail-skel .ds-head{display:flex;gap:var(--sp-16);align-items:center;margin:var(--sp-16) 0}
.detail-skel .ds-cover{width:112px;aspect-ratio:16/9;border-radius:8px;flex:none}
.detail-skel .ds-id{flex:1;min-width:0;display:grid;gap:8px}
.detail-skel .ds-title{height:26px;width:min(480px,80%)}
.detail-skel .ds-sum{height:14px;width:min(320px,60%)}
.detail-skel .ds-tabs{display:flex;gap:var(--sp-16);margin:var(--sp-16) 0;border-bottom:1px solid var(--line);padding-bottom:10px}
.detail-skel .ds-tabs .skel{width:64px;height:16px}
.detail-skel .ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-16)}
.detail-skel .ds-cards .skel{aspect-ratio:16/10;border-radius:12px}
@media(max-width:720px){.detail-skel .ds-cover{width:84px}}
/* R5-19 — 상세의 이동 줄은 하나다: '← 프로젝트' · (소재에서 왔으면) 소재로 · 단계 표시 */
.proj-nav{display:flex;align-items:center;gap:var(--sp-8) var(--sp-16);flex-wrap:wrap;margin-bottom:var(--sp-16)}
.proj-nav .project-back{margin:0}
.proj-nav #flow{margin-left:auto}
.proj-nav #flow .flowbar{margin:0}
/* R5-03 — 늦게 차는 자리를 미리 잡는다: 개수(글자 폭이 늘며 옆 상자를 밀었다) · 거르기 줄 */
.project-section-head h1 #vcount{display:inline-block;min-width:3.5ch}
#project-filters{min-height:var(--ctl-lg)}
/* R5-02 — 계정 자리표시. 얼굴 단추(--ctl-lg 원)·로그인 단추와 같은 크기라 답이 와도 아무것도 안 밀린다 */
.acct-ph{display:inline-block;flex:none;background:var(--surface-4);opacity:.6}
.acct-ph.member{width:var(--ctl-lg);height:var(--ctl-lg);border-radius:50%}
.acct-ph.guest{width:96px;height:var(--ctl-sm);border-radius:var(--r-full)}
/* 좁은 폭의 내비 끝 흐림을 넓힌다 — 28px 로는 '서비스 안내' 가 잘린 줄 모르고 그냥 잘려 보였다 (390 · W14 점검). 표식은 app.watchNavMore */
@media(max-width:620px){.chrome .nav[data-more~="r"]{--nav-fr:56px}.chrome .nav[data-more~="l"]{--nav-fl:48px}}
/* 시작 상자는 늦게 달린다 (urlBox) — 달리기 전에도 같은 높이를 잡는다. 상자 폭 420 이하는 두 줄로 쌓인다 (화면 430 — 있는 구간점을 쓴다) */
#proj-urlbox:empty{min-height:93px}
@media(max-width:430px){#proj-urlbox:empty{min-height:170px}}

/* ══ 접근성 바탕 (UI 다듬기 W23 · docs/ui-r7-findings.md K1) ══════════════════════════════════════

   탭 줄이 넘칠 때 (R7-21) — 320 폭에서 '내 파일' 이 반쯤 잘린 채 서 있었고 더 있다는 단서가 없었다. 넘치는지는
   화면이 재서 `.is-scroll` 을 단다 (마크업 몫 · W24). 여기는 오른쪽 끝을 흐리게 하는 한 줄이다. */
.proj-tabs.is-scroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}

/* 스위치는 한 모양이다 (R7-26) — `.ui-switch` 를 안 단 role=switch 상자(요금 계산기)는 같은 그림을 따로 들고 있었다.
   편집기는 자기 부품이라 뺀다. 상태 글자(ON/OFF)는 쓰지 않는다 — 상태는 손잡이의 자리가 말한다 (강제 색에서도 아래 절이 그린다). */
:where(body:not(.studio-body)) input[type=checkbox][role=switch]:not(.ui-switch){appearance:none;-webkit-appearance:none;flex:none;position:relative;margin:0;vertical-align:middle;
  width:32px;height:18px;border-radius:var(--r-full);background:var(--surface-5);border:1px solid var(--line-2);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
:where(body:not(.studio-body)) input[type=checkbox][role=switch]:not(.ui-switch)::before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink-3);transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
:where(body:not(.studio-body)) input[type=checkbox][role=switch]:not(.ui-switch):checked{background:var(--hot-dim);border-color:var(--hot-dim)}
:where(body:not(.studio-body)) input[type=checkbox][role=switch]:not(.ui-switch):checked::before{transform:translateX(14px);background:var(--hot)}

/* 손가락에는 hover 가 없다 (R7-03 · R7-17) — hover 로만 보이던 조작이 손가락에는 투명한 채 눌렸다.
   소재 카드의 '숨기기' 는 유일한 비파괴 조작이라 늘 보이고 크기는 조작 계단이다. */
@media (hover:none){
  .tcard .hidebtn,.tgrid.rows .tcard .hidebtn{opacity:1}
  .hidebtn{width:var(--ctl-sm);height:var(--ctl-sm)}
}

/* 카드 밖 조작의 누르는 자리 (R7-13 · R7-18) — 손가락 기준 44px. **그림은 그대로이고** 누르는 자리만 넓힌다 (A36 과 같은 방법).
   스위치는 ::before 를 손잡이로 쓰므로 자리는 ::after 다. 체크 상자는 바깥 label 이 누르는 자리라 여기서 늘리지 않는다. */
@media (pointer:coarse){
  input.ui-switch::after,:where(body:not(.studio-body)) input[type=checkbox][role=switch]::after{content:"";position:absolute;inset:-13px -6px}
  .fchip,.chrome .nav-main,.help-rel,.quick-row a,.tpick-nav,.acct{position:relative}
  .fchip::before{content:"";position:absolute;inset:-7px 0}
  .chrome .nav-main::before{content:"";position:absolute;inset:-9px 0}
  .help-rel::before,.quick-row a::before{content:"";position:absolute;inset:-12px -4px}
  .tpick-nav::before{content:"";position:absolute;inset:-9px}
  .acct::before{content:"";position:absolute;inset:-5px;border-radius:50%}
}

/* 대비를 더 높여 달라는 사람 (R7-04) — 회색 글자·선을 한 단씩 진하게. 잉크 계단은 이미 4.5:1 위지만 이 설정은 그보다 더를 원한다 */
@media (prefers-contrast:more){
  :root{--ink-1:#E5E5EA;--ink-2:#C7C7CC;--ink-3:#B4B4BA;--line:#3A3E45;--line-2:#4A4F57;--hair:rgba(255,255,255,.16);--hair-2:rgba(255,255,255,.24)}
}

/* 강제 색(윈도우 고대비) (R7-04) — 이 모드는 바탕색과 그림자를 지운다. 상태를 바탕·그림자로만 말하던 곳(스위치 켬/끔 · 고른 칩 ·
   진행 막대 · 상태 점 · 그림자 초점)이 전부 사라졌다. 시스템 색으로 다시 그린다 — 색은 사용자가 고른 테마가 정한다. */
@media (forced-colors:active){
  :focus-visible{outline:2px solid Highlight;outline-offset:2px}
  /* 스위치 — 끔은 빈 테두리 + 왼쪽 손잡이, 켬은 강조색 바탕 + 오른쪽 손잡이 */
  input.ui-switch,:where(body:not(.studio-body)) input[type=checkbox][role=switch]{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  input.ui-switch::before,:where(body:not(.studio-body)) input[type=checkbox][role=switch]::before{background:CanvasText}
  input.ui-switch:checked,:where(body:not(.studio-body)) input[type=checkbox][role=switch]:checked{background:Highlight;border-color:Highlight}
  input.ui-switch:checked::before,:where(body:not(.studio-body)) input[type=checkbox][role=switch]:checked::before{background:HighlightText}
  :where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]){forced-color-adjust:none;border-color:CanvasText;background:Canvas}
  :where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):checked{background:Highlight;border-color:Highlight}
  :where(body:not(.studio-body)) input[type=checkbox]:not(.ui-switch):not([role=switch]):checked::after{border-color:HighlightText}
  /* 고른 칩·탭·내비 — 테두리 색만 같으면 고른 것이 안 보인다 */
  .fchip.on,.fchip[aria-pressed=true],[aria-pressed=true],[aria-selected=true],[aria-current=page],.chrome .nav-main.on,.proj-tabs>.on{
    border-color:Highlight;outline:2px solid Highlight;outline-offset:-2px}
  .proj-tabs>button.on:after,.proj-tabs>a[aria-selected="true"]:after,.proj-tabs>a[aria-current="page"]:after{background:Highlight;forced-color-adjust:none}
  /* 진행 막대 — 채움은 강조색, 바탕은 테두리로 */
  .pg-bar,.card-progress{forced-color-adjust:none;background:Canvas;outline:1px solid CanvasText}
  .pg-bar i,.card-progress i,.card-progress.running i{forced-color-adjust:none;background:Highlight}
  /* 상태 점 — 색이 뜻이라 색을 지킨다(옆 글자가 같은 말을 한다). 회색 점도 보이게 테두리 */
  .pstate i,.bell-list .dot,.prog .dot{forced-color-adjust:none;border:1px solid CanvasText}
  /* 그림자로만 그리던 초점 (R7-12) — 투명 outline 이 이 모드에서 보인다. 카드 묶음은 시스템 강조색으로 */
  .pcard-stack button:focus-visible{outline:2px solid Highlight}
  /* 넘치는 탭 줄의 흐림은 끈다 — 이 모드에서는 흐린 글자가 바탕과 섞인다 */
  .proj-tabs.is-scroll{-webkit-mask-image:none;mask-image:none}
}

/* 글꼴 고르는 칸 (web/fontpick.js) — 견본은 미리 구운 그림을 mask 로 (글자색을 따른다). 값의 정본은 숨은 select 다 */
.fp-wrap{display:block;flex:1 1 auto;min-width:0;position:relative}
.fp-wrap>select.fp-select{position:absolute;inset:0 auto auto 0;width:1px;height:1px;opacity:0;pointer-events:none}
.fp>summary{list-style:none;display:flex;align-items:center;gap:8px;height:var(--ctl-md);padding:0 10px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel-3);color:var(--ink);cursor:pointer;font-size:var(--t-sm)}
.fp>summary::-webkit-details-marker{display:none}
.fp>summary:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.fp[data-disabled]>summary{opacity:var(--o-off);cursor:default}
.fp-sw{display:block;flex:1 1 auto;min-width:0;height:20px;background:currentColor;
  -webkit-mask:var(--sw) left center/contain no-repeat;mask:var(--sw) left center/contain no-repeat}
.fp-def{flex:1 1 auto;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-caret{flex:none;width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-2px) rotate(45deg)}
.fp[open]>summary .fp-caret{transform:translateY(2px) rotate(-135deg)}
.fp-pop{margin-top:6px;max-height:360px;overflow:auto;padding:8px;display:grid;gap:10px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel-2)}
.fp-group>b{display:block;margin:0 0 4px;font-size:var(--t-xs);font-weight:600;color:var(--ink-3)}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
.fp-item{display:grid;gap:2px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-3);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.fp-item .fp-sw{width:100%;height:24px}
.fp-item small{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-item:hover{border-color:var(--ink-3)}
.fp-item.on{border-color:var(--hot);background:var(--hot-ghost)}
.fp-item.on .fp-sw{color:var(--hot)}
/* 목소리 고르기 (web/voicepick.js) — 들어보고 고른다. 숨은 select 가 값의 정본이고 줄은 ▶ · 이름·배지 · 언어·비용 · 고른 점 */
.vp-wrap{display:grid;gap:8px;min-width:0}
.vp-wrap>select.vp-select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vp-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.vp-chips{display:flex;flex-wrap:wrap;gap:4px}
.vp-chip{height:var(--ctl-sm);padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-full);background:var(--panel-3);color:var(--ink-2);
  font:inherit;font-size:var(--t-sm);cursor:pointer;white-space:nowrap}
.vp-chip.on{border-color:var(--ink-1);color:var(--ink);background:var(--panel-2)}
.vp-chip:focus-visible,.vp-play:focus-visible,.vp-pick:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.vp-list{display:grid;gap:4px;max-height:320px;overflow:auto;padding:4px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2)}
.vp-row{display:grid;grid-template-columns:var(--ctl-md) minmax(0,1fr) auto 10px;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r);
  border:1px solid transparent;background:var(--panel-3)}
.vp-row[hidden]{display:none}
.vp-row:hover{border-color:var(--line-2)}
.vp-row.on{border-color:var(--hot);background:var(--hot-ghost)}
.vp-play{display:grid;place-items:center;width:var(--ctl-md);height:var(--ctl-md);border:1px solid var(--line-2);border-radius:50%;background:var(--panel-2);
  color:var(--ink);cursor:pointer;padding:0}
.vp-play svg{width:14px;height:14px}
.vp-play.playing{border-color:var(--hot);color:var(--hot)}
.vp-play.vp-nosample{color:var(--ink-3);border-style:dashed;cursor:default;opacity:var(--o-off)}
.vp-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:baseline;min-width:0;padding:2px 0;border:0;background:none;
  color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.vp-pick b{font-size:var(--t-base);font-weight:600;white-space:nowrap}
.vp-badges{font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-pick small{grid-column:1/-1;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-meta{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}
.vp-cost{display:inline-flex;align-items:center;gap:2px}
.vp-cost.vp-free{color:var(--ink-2)}
.vp-dot{width:8px;height:8px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.vp-row.on .vp-dot{background:var(--hot);box-shadow:none}
.vp-empty,.vp-none{margin:0;padding:12px;font-size:var(--t-sm);color:var(--ink-3);text-align:center}
.vp-disabled .vp-pick,.vp-disabled .vp-chip{cursor:default;opacity:var(--o-off)}
.vp-wrap{container-type:inline-size}
@container (max-width:560px){.vp-row{grid-template-columns:var(--ctl-md) minmax(0,1fr) 10px}.vp-meta{grid-column:2;justify-content:flex-start}}
.fp-item:disabled{opacity:var(--o-off);cursor:default}
.fp-default{min-height:var(--ctl-md);align-items:center;font-size:var(--t-sm)}
.fp-note{margin:0;font-size:var(--t-xs);color:var(--ink-3)}
.format-tools .format-family{display:grid;gap:4px}
.lk-row:has(.fp[open]),.lt-row:has(.fp[open]){align-items:flex-start}
.lk-row:has(.fp[open])>span:first-child,.lt-row:has(.fp[open])>span:first-child{line-height:var(--ctl-md)}
/* 추가한 요소 줄 — 시각이 × 밑으로 들어가 잘렸다 (2026-10-25). 이름만 줄이고 시각·× 는 제 폭을 갖는다 */
.layer-row{grid-template-columns:18px minmax(0,1fr) max-content var(--ctl-sm);min-height:var(--ctl-lg);box-sizing:border-box}
.layer-row b{font-size:var(--t-sm)}
.layer-row small{white-space:nowrap}
.layer-row button{width:var(--ctl-sm);height:var(--ctl-sm);padding:0;display:grid;place-items:center}
/* 영상 칸 위치·자르기·옛 배치 (docs/editor-layout-fix-plan-2026-10-25.md) — 값은 서버(doc.layout.video_move·bottom_trim_pct)가 준다 */
.geom-legacy{border:1px solid var(--hot-dim);background:var(--hot-ghost);border-radius:8px;padding:8px 10px;margin:0 0 8px}.geom-legacy p{font-size:var(--t-sm);color:var(--ink-1);line-height:1.5;margin:0 0 6px}.geom-legacy button{height:var(--ctl-sm);padding:0 10px;border:1px solid var(--hot-dim);background:var(--surface-4);color:var(--hot);border-radius:6px;font-size:var(--t-sm)}.geom-legacy[hidden]{display:none}
.geom-row{display:flex;align-items:center;gap:6px;margin:0 0 6px}.zoom-row .geom-reset{padding:0;white-space:nowrap;font-size:var(--t-xs)}.zoom-row .geom-reset[hidden]{display:none}#vfit-row[hidden]{display:none}
/* 영상 칸 — 배치(평소 끌기) ↔ 보이는 부분 조정(구도 · 명시적 상태). 두 상태를 색만이 아니라 글자·테두리 모양으로도 가른다 (docs/editor-playback-title-position-investigation-2026-10-25.md §5) */
.compose-btn{height:var(--ctl-md);padding:0 12px;border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink);border-radius:6px;font-size:var(--t-sm);margin:0 0 4px}.compose-btn[hidden],#compose-desc[hidden]{display:none}
.compose-box{border:1px dashed var(--cool);background:color-mix(in oklab,var(--cool) 6%,transparent);border-radius:8px;padding:10px;margin:0 0 10px}.compose-box[hidden]{display:none}
.compose-state{margin:0 0 6px;display:flex;flex-direction:column;gap:2px}.compose-state b{font-size:var(--t-sm);color:var(--cool)}.compose-state small{font-size:var(--t-xs);color:var(--ink-3)}
.compose-acts,.compose-end{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.compose-end{justify-content:flex-end;margin:0 0 6px}
.compose-acts button,.compose-end button{height:var(--ctl-sm);padding:0 10px;border:1px solid var(--line-2);background:var(--surface-4);color:var(--ink-1);border-radius:6px;font-size:var(--t-sm);white-space:nowrap}
.compose-acts button:disabled{opacity:var(--o-off)}.compose-end .primary{border-color:var(--cool);color:var(--cool)}
.compose-box .source-map{margin:8px 0}
body.composing #pv{outline:2px dashed var(--cool);outline-offset:2px;cursor:grab}.compose-tag{font-size:var(--t-xs);color:var(--cool);border:1px dashed var(--cool);border-radius:999px;padding:2px 8px;white-space:nowrap}.compose-tag[hidden]{display:none}
.geom-adv{margin:6px 0 10px;border-top:1px solid var(--line);padding-top:6px}.geom-adv>summary{cursor:pointer;font-size:var(--t-sm);color:var(--ink-2);padding:4px 0}