/* Framer 디자인 시스템 — 새 셸(shellV2) 전용 테마 층. 정본은 루트 DESIGN.md(getdesign · framer). 오너 결정 2026-09-10 "완벽하게 프레이머".
 *   ① 토큰 덮어쓰기: `body.shell-v2` 아래에서 tokens.css 의 커스텀 프로퍼티만 갈아 끼운다 — 옮겨 붙은 옛 화면(위저드·회차·오디오)도 같은 팔레트·글꼴을 얻는다.
 *   ② 컴포넌트: 흰 알약 주 CTA · 차콜 알약 보조 · 파랑은 링크·포커스·선택에만 · 카드는 테두리 대신 표면 단(canvas → surface-1 → surface-2)
 *      · 스포트라이트 그라데이션 카드는 페이지당 하나(홈 머리) · 떠 있는 카드는 광연(light-edge)+드롭.
 *   ③ 글꼴: 헤더 SUIT · 본문 Pretendard(2026-09-15 오너 결정 — Inter 대체). @font-face·토큰은 tokens.css 한 곳이고 이 층은 덮지 않는다.
 *   ④ 간격: Framer 5 기반 스케일이 정본(4pt 이관 안 함) — xxs 4 · xs 8 · sm 12 · md 15 · lg 20 · xl 30 · xxl 40 · section 96.
 *      화면은 원시 px 대신 아래 의미 별칭(--page-gutter·--card-pad·--modal-pad 등)을 쓴다. 1~6px 미세값만 원시로 둔다.
 *   ⚠️ 플래그 OFF(v1)는 이 파일이 없는 것과 같다 — 모든 선택자가 body.shell-v2 로 시작한다. 상단바 48→56px 라 shell2.css 의 48 을 여기서 덮는다. */

/* ── ① 토큰 ── */
body.shell-v2 {
  --canvas: #090909; --parchment: #141414; --pearl: #0f0f0f;
  --surface-1: #141414; --surface-2: #1c1c1c; --surface-3: #242424;
  --hairline: #262626; --hairline-soft: #1a1a1a; --divider-soft: #333333;
  --grid-line: #262626; --grid-line-strong: #333333; --table-zebra: #0f0f0f;
  --ink: #ffffff; --ink-80: #cccccc; --ink-48: #999999;
  --accent: #0099ff; --accent-focus: #33adff; --on-accent: #ffffff;
  --accent-soft: rgba(0, 153, 255, 0.15); --accent-ring: rgba(0, 153, 255, 0.15);
  --positive: #22c55e; --danger: #ff5577; --danger-soft: rgba(255, 85, 119, 0.14); --danger-ring: rgba(255, 85, 119, 0.38);
  --g-magenta: #d44df0; --g-violet: #6a4cf5; --g-orange: #ff7a3d; --g-coral: #ff5577;
  --fs-hero: 85px; --fs-display-lg: 62px; --fs-display-md: 32px; --fs-lead: 24px; --fs-tagline: 18px;
  --fs-body: 15px; --fs-caption: 14px; --fs-fine: 13px;
  --lh-display-md: 1.13; --lh-body: 1.3; --lh-caption: 1.4;
  --ls-display-md: -1px; --ls-tagline: -0.18px; --ls-body: -0.15px; --ls-caption: -0.14px;
  --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; /* tokens.css 와 같은 값이지만 우연이 아니라 결정으로 명시한다 */
  --sp-md: 15px; --sp-lg: 20px; --sp-xl: 30px; --sp-xxl: 40px; --sp-section: 96px;
  --page-gutter: var(--sp-xl);    /* 30 — *-wrap 페이지 좌우 여백(홈·라이브러리·목록·보드 공통) */
  --section-gap: var(--sp-xxl);   /* 40 — 페이지 안 큰 섹션 사이 */
  --card-pad: var(--sp-lg);       /* 20 — 표면 카드 안쪽 여백 */
  --card-pad-tight: var(--sp-sm); /* 12 — 촘촘한 카드(썸네일 카드) */
  --grid-gap: var(--sp-sm);       /* 12 — 카드 격자 간격 */
  --toolbar-gap: var(--sp-xs);    /* 8 — 붙어 있는 버튼·칩 사이 */
  --modal-pad: var(--sp-lg);      /* 20 — 모달·패널 안쪽 여백 */
  --row-pad-inline: 16px;         /* 목록 행 좌우 여백 */
  --pane-header-h: 40px;          /* 작업실 좌우 패널 머리 높이 */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 15px; --r-xl: 20px; --r-xxl: 30px; --r-pill: 100px;
  --shadow-float: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), 0 10px 30px rgba(0, 0, 0, 0.25);
  --ring-focus: 0 0 0 1px #0099ff, 0 0 0 4px rgba(0, 153, 255, 0.15);
  --top-h: 56px;
  /* 입력 필드 — 절대 토큰이 아니라 알파다. 근거는 아래 ③. */
  --field-fill: rgba(255, 255, 255, 0.045); --field-fill-hover: rgba(255, 255, 255, 0.07);
  --field-edge: rgba(255, 255, 255, 0.12); --field-edge-hover: rgba(255, 255, 255, 0.22);
  /* 필드 안쪽 여백 — 토큰인 이유는 하나다: ③ 의 껍데기 규칙과 네이티브 위젯 리셋이 **같은 값을 써야** 하고,
     두 벌로 적으면 어긋난 만큼이 range 트랙 폭의 조용한 이동이 된다(근거는 ③ 머리주석). */
  --field-pad: 10px 14px;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
body.shell-v2 h1, body.shell-v2 h2, body.shell-v2 h3 { font-weight: 500; letter-spacing: var(--ls-display-md); }
body.shell-v2 .hub-title { font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: -1px; font-weight: 500; }
body.shell-v2 .hub-section-title, body.shell-v2 .home-section-title, body.shell-v2 .lib-ins-title { font-size: var(--fs-title-2); font-weight: 700; letter-spacing: -0.8px; }
body.shell-v2 .hub-section-sub, body.shell-v2 .hub-muted, body.shell-v2 .hub-card-meta, body.shell-v2 .lib-card-meta, body.shell-v2 .board-line { color: var(--ink-48); }
body.shell-v2 a { color: var(--accent); }

/* ── ② 버튼 — 흰 알약(주) · 차콜 알약(보조) · 선택은 색이 아니라 표면 단 ── */
body.shell-v2 .btn { border-radius: var(--r-pill); font-weight: 500; letter-spacing: var(--ls-caption); border-color: transparent; }
body.shell-v2 .btn--md { --btn-px: 15px; --btn-fs: 14px; }
body.shell-v2 .btn--sm { --btn-px: 12px; --btn-fs: 13px; }
body.shell-v2 .btn--lg { --btn-px: 20px; --btn-fs: 15px; }
body.shell-v2 .btn--primary { background: #ffffff; border-color: #ffffff; color: #000000; font-weight: 500; }
body.shell-v2 .btn--primary:hover { background: #ededed; border-color: #ededed; }
body.shell-v2 .btn--secondary { background: var(--surface-1); border-color: transparent; color: var(--ink); }
body.shell-v2 .btn--secondary:hover { background: var(--surface-2); }
/* 카드(surface-1) 위의 보조·칩·위험 알약은 한 단 위(surface-2)로 — 같은 표면이면 사라진다. */
body.shell-v2 .board-card .btn--secondary, body.shell-v2 .hub-card .btn--secondary, body.shell-v2 .lib-inspector .btn--secondary, body.shell-v2 .lib-inspector .btn--chip, body.shell-v2 .agent-msg .btn--secondary, body.shell-v2 .ep-row .btn--secondary, body.shell-v2 .board-card .btn--danger, body.shell-v2 .lib-inspector .btn--danger { background: var(--surface-2); }
body.shell-v2 .board-card .btn--secondary:hover, body.shell-v2 .hub-card .btn--secondary:hover, body.shell-v2 .lib-inspector .btn--secondary:hover, body.shell-v2 .ep-row .btn--secondary:hover { background: var(--surface-3); }
body.shell-v2 .btn--ghost { background: transparent; color: var(--ink-48); }
body.shell-v2 .btn--ghost:hover { background: var(--surface-1); color: var(--ink); }
body.shell-v2 .btn--chip { background: var(--surface-1); border-color: transparent; color: var(--ink-48); }
body.shell-v2 .btn--chip.is-on, body.shell-v2 .btn--chip.is-active { background: var(--surface-2); border-color: transparent; color: var(--ink); }
body.shell-v2 .btn--danger { background: var(--surface-1); border-color: transparent; color: var(--danger); }
body.shell-v2 .btn--danger:hover { background: var(--danger-soft); }
body.shell-v2 .btn:focus-visible, body.shell-v2 .nav-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .btn:active { transform: scale(0.98); }

/* ── ③ 입력 — 담는 면보다 한 단 위 + 헤어라인 · 포커스는 파란 링 ──
 *   ⚠️ DESIGN.md 의 `text-input` 은 배경을 --surface-1 로 못박지만 그것은 Framer 사이트가 필드를 **캔버스 위에** 두기 때문이다.
 *      이 제품은 모달·카드·시트가 그 자체로 surface-1(#141414)이라 같은 토큰을 쓰면 필드가 담는 면과 **같은 색**이 되어
 *      입력 영역이 사라진다(2026-09-21 오너 "모든 인풋 필드가 이런 디자인이면 영역 인식이 안돼").
 *      ② 의 보조 알약을 카드 위에서 한 단 올리는 것과 같은 문제이고 같은 해법이다 — "같은 표면이면 사라진다".
 *   → 그래서 절대 토큰이 아니라 **알파**로 쓴다. 흰색 4.5% 는 캔버스(#090909) 위에서 #141414(=surface-1),
 *      surface-1 위에서 ≈surface-2, surface-2 위에서 ≈surface-3 이 된다 — 어느 면에 놓여도 정확히 한 단 위다.
 *      글라스 오버레이 안의 --lg-fill-1/2/3 이 이미 쓰는 사다리와 같은 발상이고, 그래서 오버레이 안에서도 그대로 통한다.
 *   → 채움만으로는 얕은 면 위에서 경계가 흐리므로 **테두리도 함께** 준다. 0.12 는 캔버스 위에서 --hairline(#262626)과 같은 값이다.
 *   ⚠️ range·checkbox·radio·file·color 는 **껍데기 규칙에서 제외한다**(:where 라 특이도는 그대로 (0,1,2)) — 트랙·손잡이를
 *      스스로 그리거나 네이티브 위젯이라 채움·테두리·모서리·여백이 군더더기다. 단 **글꼴·자간·색은 그대로 받게** 둔다
 *      (그래서 규칙이 두 벌이다 — 활자 한 벌은 제외 없이 전부, 껍데기 한 벌만 다섯을 뺀다).
 *   🔴 2026-09-22 오너 *"ui가 체크박스같지가 않아"* — 그전에는 껍데기가 **한 규칙에 뭉쳐** 있어 체크박스가
 *      `padding: 10px 14px` + `--r-md` 모서리를 받아 **크고 둥근 파란 알약**이 됐다(포커스가 테두리를 파랑으로 올려 완성).
 *      새 셸의 체크박스가 **전부** 그랬다(초안 팝업 소품·클립 고르기·전체 고르기 · 캐릭터 팝업 · 타임라인 배경음 · 확인 모달).
 *      ⚠️ 고치는 층은 **여기**다. 화면에서 특이도를 올려 이기는 방식은 안 된다 — 다음 체크박스가 또 깨진다.
 *      ⚠️ 그리고 **아래 리셋에서 다시 적어서도** 안 된다. `body.shell-v2 input[type='checkbox']` 는 (0,2,2) 라
 *         화면이 직접 그린 체크박스(`videolab.css` 의 `.vlab-clip-pick`, (0,1,0))를 덮는다 — 껍데기를 벗기는 유일한 길은
 *         **애초에 안 씌우는 것**(제외)이고, 그래서 그 다섯을 껍데기 규칙에서 뺐다.
 *   ⚠️ 옛 경고 — *"제외를 기본 규칙에 넣으면 range 가 glass.css 의 `padding: 11px 20px` 로 떨어져 트랙 폭이 조용히 움직인다"*.
 *      그대로 유효하다. 다뤄진 방식: 아래 네이티브 리셋이 range·file·color 에 `--field-pad`·`--r-md` 를 **명시로 이어준다**
 *      (= 오늘의 픽셀 그대로, glass 로 안 떨어진다). 체크박스·라디오만 여백을 안 이어받는다 —
 *      체크박스는 glass.css 의 `input[type='checkbox']`(18px·padding 0·--r-xs)가 받아 주고, 라디오는 거기 없어 여기서 지운다.
 *      ⚠️ 그 glass 규칙은 (0,1,1) 이라 `.vlab-clip-pick`(0,1,0)의 `border-radius: 5px` 도 이긴다 — 새 셸의 체크박스 모서리는
 *         `--r-xs`(4px)다. 1px 차이이고 새 셸의 모서리 스케일과 오히려 맞아 그대로 둔다(화면에서 특이도를 올려 5px 를
 *         되찾는 것은 이 절이 금지하는 바로 그 땜질이다).
 *   🔴 채움은 **`background-color` 로만** 쓴다 — `background` 단축은 `background-image` 를 none 으로 리셋해,
 *      화살표를 `appearance:none` + `background-image` 로 직접 그리는 셀렉트(`.km-filter-select`·`select.admin-input`·
 *      `.script-cast-row select`)의 화살표를 지운다. 호버 규칙이 특이도로 이기므로 **호버할 때만 사라져** 정적 검사로는 안 잡힌다. */
/* 활자 — 제외 없이 전부. 네이티브 위젯도 글자는 셸과 같아야 한다(파일 버튼 글씨·셀렉트 값·숫자칸). */
body.shell-v2 input, body.shell-v2 textarea, body.shell-v2 select { font-size: var(--fs-body); letter-spacing: var(--ls-body); color: var(--ink); }
/* 껍데기(채움·테두리·모서리·여백) — 네이티브 위젯 다섯은 제외. 제외 목록은 아래 호버·비활성·읽기 전용과 **글자 그대로 같다**. */
body.shell-v2 input:where(:not([type='range'], [type='checkbox'], [type='radio'], [type='file'], [type='color'])), body.shell-v2 textarea, body.shell-v2 select {
  background-color: var(--field-fill); border: 1px solid var(--field-edge); border-radius: var(--r-md);
  padding: var(--field-pad);
}
body.shell-v2 input:where(:not([type='range'], [type='checkbox'], [type='radio'], [type='file'], [type='color'])):hover:not(:disabled, :focus, [readonly]), body.shell-v2 textarea:hover:not(:disabled, :focus, [readonly]), body.shell-v2 select:hover:not(:disabled, :focus) {
  background-color: var(--field-fill-hover); border-color: var(--field-edge-hover);
}
/* 포커스는 링이 주인공이지만 테두리도 파랑으로 올린다 — 링(4px 15%)만으로는 필드 윤곽이 여전히 헤어라인이라 경계가 두 색이 된다. */
body.shell-v2 input:focus, body.shell-v2 textarea:focus, body.shell-v2 select:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
/* 비활성·읽기 전용 — 누를 수 없다는 것을 **모양이** 말한다. 그전에는 비활성 필드가 활성 필드와 색도 테두리도 같아
 *   (읽기 전용 기획안의 보이스 셀렉트 · 생성 중 잠기는 보완 칸 등) 눈으로는 구분이 안 됐다.
 *   🔴 채움을 바꾸는 대신 **`opacity`** 를 쓴다 — 화면별 규칙이 채움을 자기 값으로 덮어도 이 선언은 안 덮인다
 *      (예: `.lib-ins-import .lib-ins-select` 는 (0,3,1) 로 framer 의 채움보다 세다). 이 저장소가 버튼에 이미 쓰던 방식이다
 *      (`.vlab-model:disabled`·`.admin-seg-btn:disabled` 등 20여 곳).
 *   ⚠️ `:read-only` 가 아니라 **`[readonly]`** 로 고른다 — `select`·`range` 는 명세상 **항상** `:read-only` 에 걸려 전부 비가 맞는다.
 *   ⚠️ 읽기 전용은 덜 내린다 — **읽으라고 있는 칸**이라 값이 또렷해야 한다(남의 기획안 열람 · 프롬프트 조립본).
 *   ⚠️ 네이티브 위젯 다섯은 제외 — `.audio-fader-input` 은 `opacity: 0` 으로 덮어 둔 **투명 슬라이더**라 여기 걸리면 보이게 된다. */
body.shell-v2 input:where(:not([type='range'], [type='checkbox'], [type='radio'], [type='file'], [type='color'])):disabled, body.shell-v2 textarea:disabled, body.shell-v2 select:disabled { opacity: 0.5; cursor: default; }
body.shell-v2 input:where(:not([type='range'], [type='checkbox'], [type='radio'], [type='file'], [type='color']))[readonly], body.shell-v2 textarea[readonly] { opacity: 0.75; cursor: default; }
/* 네이티브 위젯 다섯 — 껍데기 규칙을 안 받으므로 여기서 각자 제 모양을 세운다.
   ⚠️ range·file·color 는 여백·모서리를 **명시로 이어받는다**. 안 주면 glass.css 의 `padding: 11px 20px`·알약 모서리로
      떨어져 트랙 폭·파일칸 모서리가 조용히 움직인다(③ 머리주석의 그 함정). 값이 아니라 토큰을 쓰는 이유도 그것이다.
   🔴 체크박스·라디오에는 채움·테두리·모서리를 **다시 적지 않는다** — 이 선택자는 (0,2,2) 라 화면이 직접 그린
      체크박스(`videolab.css` 의 `.vlab-clip-pick` = 18px·radius 5·`::before` 갈고리·`:checked` accent 채움, (0,1,0))를
      통째로 덮는다. 네이티브 값은 glass.css 가 이미 갖고 있다(`input[type='checkbox']` → 18px·padding 0·--r-xs).
      여기서 주는 것은 화면이 안 정하는 것 하나뿐이다: accent 색. */
body.shell-v2 input[type='range'], body.shell-v2 input[type='file'], body.shell-v2 input[type='color'] {
  background: var(--surface-1); border-color: transparent; border-radius: var(--r-md); padding: var(--field-pad);
}
body.shell-v2 input[type='checkbox'], body.shell-v2 input[type='radio'] { accent-color: var(--accent); }
/* 라디오만 glass.css 에 제 규칙이 없어 일반 입력의 알약 여백(11px 20px)이 남는다 — 그것만 지운다.
   ⚠️ `appearance: auto` 인 동안에는 크롬이 여백·테두리를 스스로 0 으로 접으므로 눈에는 안 보인다
      (2026-09-22 실측: 네이티브 체크박스·라디오는 이 신고 전에도 멀쩡했고, 깨진 것은 `appearance: none` 인
       `.vlab-clip-pick` 넷뿐이었다). 즉 이 줄은 **직접 그린 라디오가 생기는 날**을 위한 것이다 — 그날 같은 신고를
      또 받지 않게. 지우지 말 것. */
body.shell-v2 input[type='radio'] { padding: 0; }
/* 알약 필드 — .pshell-mode 만 크롬 컨트롤(모드 내비)이라 테두리를 두지 않는다. 나머지 셋은 입력칸이므로 같은 헤어라인을 받는다. */
body.shell-v2 .pshell-mode, body.shell-v2 .lib-search, body.shell-v2 .lib-ins-select, body.shell-v2 .lib-ins-ep {
  background-color: var(--field-fill); border-radius: var(--r-pill); color: var(--ink); font-weight: 500;
}
body.shell-v2 .pshell-mode { border-color: transparent; padding: 0 30px 0 14px; height: 32px; }

/* ── ④ 허브 크롬 — 캔버스 위 헤어라인 소프트 · 내비는 알약, 활성 = 표면 단 ── */
body.shell-v2 .shell-sidebar { background: var(--canvas); border-right: 1px solid var(--hairline-soft); padding: var(--sp-md); gap: var(--sp-md); }
body.shell-v2 .brand { font-size: 18px; font-weight: 700; letter-spacing: -0.8px; }
body.shell-v2 .nav-btn { border-radius: var(--r-pill); padding: 9px 14px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--ls-caption); color: var(--ink-48); }
body.shell-v2 .nav-btn:hover { background: var(--surface-1); color: var(--ink); }
body.shell-v2 .nav-btn--active, body.shell-v2 .nav-btn--active:hover { background: var(--surface-2); color: var(--ink); font-weight: 500; }
body.shell-v2 .rail-mini { background: var(--canvas); border-color: var(--hairline-soft); }

/* ── ⑤ 프로젝트 셸 — 상단바 56px(top-nav) · 패널은 캔버스에 헤어라인 소프트 ── */
body.shell-v2 .pshell-top { height: var(--top-h); background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); padding: 0 var(--sp-md); }
body.shell-v2 .pshell-title-text { font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--ls-caption); }
body.shell-v2 .pshell-title-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--ink-48); }
body.shell-v2 .pshell-pill { background: var(--surface-2); border-color: transparent; color: var(--ink-48); }
body.shell-v2 .pshell-left, body.shell-v2 .pshell-right { background: var(--canvas); top: var(--top-h); height: calc(100dvh - var(--top-h)); }
body.shell-v2 .pshell-left { border-right-color: var(--hairline-soft); }
body.shell-v2 .pshell-right { border-left-color: var(--hairline-soft); }
body.shell-v2 .pshell-pane-hd { border-bottom-color: var(--hairline-soft); height: var(--pane-header-h); }
body.shell-v2 .pshell-pane-title { font-size: var(--fs-fine); font-weight: 500; letter-spacing: var(--ls-fine); text-transform: none; color: var(--ink-48); }
body.shell-v2 .pshell-tab { border-radius: var(--r-pill); }
body.shell-v2 .pshell-tab.is-active { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .pshell-kv dt { color: var(--ink-48); }
body.shell-v2 .wiz-root.iv-step, body.shell-v2.iv-phase0 .wiz-root.iv-step { min-height: calc(100dvh - var(--top-h)); }
body.shell-v2 .pshell-center .audio-editor { height: calc(100dvh - var(--top-h)); }
body.shell-v2 .lib-inspector { top: calc(var(--top-h) + 8px); }
@media (max-width: 720px) { body.shell-v2 .pshell-left, body.shell-v2 .pshell-right { min-height: calc(100dvh - var(--top-h)); } }

/* ── ⑥ 카드 — 테두리 없이 표면 단으로 · 모서리 15/20 · 선택만 파란 링 ── */
body.shell-v2 .hub-card, body.shell-v2 .lib-card, body.shell-v2 .home-hero, body.shell-v2 .pl-row, body.shell-v2 .home-stat, body.shell-v2 .feed-card {
  background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r-lg);
}
body.shell-v2 .hub-card:hover, body.shell-v2 .lib-card:hover, body.shell-v2 .pl-row:hover, body.shell-v2 .home-hero:hover { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .hub-card--more { background: transparent; border: 1px dashed var(--hairline); color: var(--ink-48); }
body.shell-v2 .hub-card-thumb, body.shell-v2 .lib-card-thumb { background: var(--surface-2); border-radius: var(--r-md); }
body.shell-v2 .lib-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-ring); }
body.shell-v2 .board-card, body.shell-v2 .lib-inspector, body.shell-v2 .pshell-props-static { background: var(--surface-1); border: 0; border-radius: var(--r-xl); }
body.shell-v2 .board-card-hd { background: transparent; border-bottom: 1px solid var(--hairline-soft); padding: 12px 16px; font-weight: 500; }
body.shell-v2 .board-card-bd { padding: 16px; }
body.shell-v2 .board-card--dim { opacity: 0.5; }
body.shell-v2 .board-pill { background: var(--surface-2); border-color: transparent; color: var(--ink-48); }
body.shell-v2 .board-pill.ok { color: var(--positive); }
body.shell-v2 .board-pill.acc { color: var(--ink); }
body.shell-v2 .lib-inspector { box-shadow: var(--shadow-float); padding: var(--sp-lg); }
body.shell-v2 .lib-chip { border-radius: var(--r-pill); }
body.shell-v2 .lib-chip.is-active { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .lib-ins-preview { border-radius: var(--r-md); }
body.shell-v2 .lib-ins-import { border-top-color: var(--hairline-soft); }
body.shell-v2 .ep-row { background: var(--surface-1); border-color: transparent; border-radius: var(--r-lg); }
body.shell-v2 .ep-row:hover { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .ep-row-badge { background: var(--surface-2); border-color: transparent; color: var(--ink-48); }
body.shell-v2 .ep-row-badge--on { color: var(--positive); }
body.shell-v2 .chip, body.shell-v2 .chip-cat-tab { border-radius: var(--r-pill); }
body.shell-v2 .agent-msg--bot { background: var(--surface-1); border-color: transparent; border-radius: var(--r-lg); }
body.shell-v2 .agent-msg--user { background: var(--surface-2); border-radius: var(--r-lg); }
body.shell-v2 .home-free-video-badge { background: var(--surface-2); border-color: transparent; color: var(--ink); }

/* ── ⑦ 떠 있는 것 — 드로어·모달·팝오버는 광연 + 드롭(레벨 2) ── */
body.shell-v2 :where([role='dialog']:not(.ep-drawer)), body.shell-v2 .cm-overlay > * { box-shadow: var(--shadow-float); border-radius: var(--r-xl); }
body.shell-v2 #episodesView .ep-drawer { background: var(--canvas); }
body.shell-v2 .ep-drawer-head, body.shell-v2 .ep-drawer-foot { border-color: var(--hairline-soft); }

/* ── ⑧ 스포트라이트 — 페이지당 하나: 홈 머리(인사 + 새 프로젝트) ── */
body.shell-v2 .hub-head {
  position: relative; overflow: hidden; padding: var(--sp-xl); border-radius: var(--r-xxl);
  background: radial-gradient(120% 140% at 0% 0%, var(--g-violet) 0%, var(--g-magenta) 55%, var(--g-coral) 100%);
  color: #ffffff;
}
body.shell-v2 .hub-head .hub-title { color: #ffffff; text-wrap: balance; max-width: 22ch; }
body.shell-v2 .hub-head .btn--primary { background: #ffffff; color: #000000; }


/* ── ⑩ 프로젝트 목록 4단계 배지(P3) — v2 에서만 그려지므로 여기 산다. 알약 · 켜진 단계는 글자만 밝게(색은 상태색 아님) ── */
body.shell-v2 .pl-stages { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
body.shell-v2 .pl-stage { font-size: var(--fs-fine); line-height: 18px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-48); letter-spacing: var(--ls-fine); white-space: nowrap; }
body.shell-v2 .pl-stage--on { color: var(--ink); }
body.shell-v2 .home-hero .pl-stages { margin: 6px 0 0; }