/* Liquid Glass 층 ② G1 크롬 · 컨트롤 — 토큰은 liquid-glass-tokens.css. 분석 정본은 docs/design/DESIGN-apple-liquid-glass-2026-09-16.md.
 *   G1 = 콘텐츠 위에 떠서 내비게이션·컨트롤을 담는 바와 패널. Apple 이 말하는 "navigation layer"가 여기다.
 *     "it is best reserved for the navigation layer that floats above the content of your app" — WWDC25 219
 *   이 파일이 크롬 재질의 유일한 주인이다 — chrome-base/chrome-shell/canvas/project-plan/project-episodes/interview 의
 *   veil·블러 선언과 겹치면 한쪽만 고치는 날이 온다.
 *
 *   🔴 두께는 블러가 아니라 틴트로 만든다 — 전 표면이 같은 --lg-filter 를 쓴다(Apple 재질 5단 실측: `backdrop-blur-[30px]` 고정).
 *   🔴 글라스 안에 글라스를 두지 않는다. 안쪽 칩·보조 버튼은 --lg-fill-*·--lg-control 알파 채움이다.
 *      "When placing elements on top of Liquid Glass, avoid applying the material to both layers." — WWDC25 219
 *   🔴 바에 별도 배경 커스터마이즈를 얹지 않는다 — 글라스가 배경(cosmosBeams)을 그대로 보게 둔다.
 *      "Remove any background customization from your navigation and toolbars." — WWDC25 284 */

/* ── G1 크롬 바 ── */
body.shell-v2 .shell-sidebar,
body.shell-v2 .rail-mini,
body.shell-v2 .pshell-top,
body.shell-v2 .vlab-toolbar-row--main,
body.shell-v2 .ph-toolbar--docked,
body.shell-v2 .finder-sidebar,
body.shell-v2 .finder-toolbar,
body.shell-v2 .finder-pathbar {
  background: var(--lg-sheen), var(--lg-tint-regular);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
}
body.shell-v2 .shell-sidebar { box-shadow: inset -1px 0 0 var(--lg-edge); }
body.shell-v2 .pshell-top,
body.shell-v2 .vlab-toolbar { box-shadow: var(--lg-shadow-chrome); }
/* 프로젝트 Finder 크롬(spec_project_finder §9-1) — 사이드바 · 툴바 · 경로 막대는 .shell-sidebar 와 같은 regular 층이다(위 목록).
 *   세 면이 한 창 안에서 맞닿으므로 경계는 한 줄씩만 — 사이드바 오른쪽 · 툴바 아래 · 경로 막대 위.
 *   콘텐츠(.finder-content)는 불투명이다 — 콘텐츠 층 글라스 금지(HIG). */
body.shell-v2 .finder-sidebar { box-shadow: inset -1px 0 0 var(--lg-edge); }
body.shell-v2 .finder-toolbar { box-shadow: inset 0 -1px 0 var(--lg-edge); }
body.shell-v2 .finder-pathbar { box-shadow: inset 0 1px 0 var(--lg-edge); }
/* ⚠️ 캔버스 툴바는 **바깥 상자가 아니라 머리 행**이 글라스다(2026-09-19). backdrop-filter 는 절대 위치 자손의 기준 상자를 만든다 —
 *    바깥 상자에 걸면 하단에 띄운 메뉴 띠(`canvas.css`)가 툴바 안에 갇혀 위로 올라가고, 그 띠의 블러도 캔버스를 못 본다. */

/* Scroll Edge Effect (Hard) — 스크롤 콘텐츠가 상단바 밑으로 지나갈 때의 경계.
 *   Apple 실측: blur(3px) + rgba(31,31,31,.55) + 하단 보더 0.67px rgba(255,255,255,.1).
 *   블러·틴트는 위 G1 규칙이 이미 갖고 있으므로 여기서는 보더만 맞춘다("avoid glass on glass").
 *   ⚠️ 0.67px 는 Apple 의 Retina 포인트값이다 — 1× 디스플레이에서 0 또는 1 로 갈려 선이 사라질 수 있어 1px 로 쓴다.
 *   ⚠️ 이 선언이 framer.css 의 `.pshell-top { border-bottom: 1px solid var(--hairline-soft) }` 를 덮는다(주인은 여기다). */
body.shell-v2 .pshell-top { border-bottom: 1px solid var(--lg-edge); }

/* "Apply one scroll edge effect per view."(WWDC25 356) — 상단바 하나에만 건다. */

/* 좌·우 패널 — 그리드 열이라 밑으로 지나가는 콘텐츠가 없고 배경만 흐린다. 가장 큰 두 면이라 틴트를 한 단 낮춘다 */
body.shell-v2 .pshell-left,
body.shell-v2 .pshell-right {
  background: var(--lg-tint-thin);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
}

/* 본문 글자 위에 붙는 입력 바 — thick 틴트(라벨이 본문과 겹쳐 읽히던 자리) */
body.shell-v2 .pshell-center .wiz-composer,
body.shell-v2 #episodesView .ep-drawer-foot:not([hidden]) {
  background: var(--lg-sheen), var(--lg-tint-thick);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-specular);
}
body.shell-v2 .pshell-center .wiz-composer,
body.shell-v2 #episodesView .ep-drawer-foot:not([hidden]) {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-inline: var(--sp-sm);
}
/* 🔴 위저드 본문 등장 모션(rise, fill both)이 끝난 뒤에도 transform 을 붙잡으면 그 안의 블러가 에러 없이 죽는다(2026-09-15 실측).
 *    끝나면 풀리게 backwards 로 — 스크림과 같은 함정이고 증상은 "콘솔 0건인데 블러만 안 보임"이다. */
body.shell-v2 .wiz-content { animation-fill-mode: backwards; }

/* 크롬 안 — 보조 글자 대비 보정(HIG: 재질 위 quaternary 금지) + 표면 단을 알파로 */
body.shell-v2 :is(.shell-sidebar, .rail-mini, .pshell-top, .pshell-left, .pshell-right, .vlab-toolbar, .ph-toolbar--docked, .finder-sidebar, .finder-toolbar, .finder-pathbar) {
  --ink-48: var(--lg-ink-48);
}
body.shell-v2 :is(.shell-sidebar, .rail-mini, .pshell-top, .pshell-left, .pshell-right, .vlab-toolbar, .ph-toolbar--docked, .wiz-composer, .ep-drawer-foot, .finder-sidebar, .finder-toolbar, .finder-pathbar) * {
  --surface-1: var(--lg-fill-1);
  --surface-2: var(--lg-fill-2);
  --surface-3: var(--lg-fill-3);
}

/* ── 사이드바 내비 — 활성은 알파 채움 + 반사광 + 광연 ── */
body.shell-v2 .nav-btn:hover { background: var(--lg-control); }
body.shell-v2 .nav-btn--active,
body.shell-v2 .nav-btn--active:hover {
  background: var(--lg-sheen), var(--lg-control-on);
  box-shadow: var(--lg-specular-pill), var(--lg-rim);
}

/* ── 컨트롤 — 보조·칩 알약 ──
 * Apple 은 이것들을 하나의 글라스 컨테이너로 묶는다("glass can not sample other glass" — WWDC25 323).
 * 웹 등가물은 부모 바에만 블러를 걸고 자식은 알파로 두는 것이다 — 그래서 여기엔 backdrop-filter 가 없다. */
body.shell-v2 .btn--secondary,
body.shell-v2 .btn--chip,
body.shell-v2 .home-new {
  background: var(--lg-control);
  box-shadow: var(--lg-specular-pill), var(--lg-rim);
}
body.shell-v2 .btn--secondary:hover,
body.shell-v2 .btn--chip:hover,
body.shell-v2 .home-new:hover {
  background: var(--lg-control-hover);
  box-shadow: var(--lg-specular-pill), var(--lg-rim-hover);
}
/* 고른 칩은 흰 채움·검은 글자 — 회색 한 단(framer.css 의 surface-2)으로는 안 고른 칩과 구분이 안 됐다
 * (2026-10-23 사용자 신고 "선택했을 때 티가 잘 안나요" · 위저드 장르 칩). 이벤트 칩(v2/event.css)과 같은 모양.
 * 위 :hover 가 고른 칩을 안 고른 알약으로 되돌리지 않게 hover 도 함께 적는다.
 * 세그먼트 토글의 .is-active(회차 서랍 epr-toggle)는 트랙 안 선택이라 framer.css 의 한 단 위 모양 그대로 둔다. */
body.shell-v2 .btn--chip.is-on {
  background: #ffffff;
  border-color: transparent;
  color: #000000;
  box-shadow: none; /* 글라스 테두리 광택(rim)이 흰 알약 가장자리에 선을 하나 더 그었다(2026-10-26 오너 "선도 겹쳐서 구린 것 같다") */
}
body.shell-v2 .btn--chip.is-on:hover:not(:disabled) {
  background: #ededed;
  border-color: transparent;
  color: #000000;
}
/* 고른 칩 안 배지(AI추천)는 테두리 없는 옅은 회색 알약 — 흰 알약 안에 선 두른 알약이 겹쳐 보였다(2026-10-26 오너). */
body.shell-v2 .btn--chip.is-on .chip-badge { background: rgba(0, 0, 0, 0.08); border-color: transparent; color: rgba(0, 0, 0, 0.62); }

/* 세그먼트 트랙 — 트랙은 알파, 안쪽 선택은 한 단 위 */
body.shell-v2 .trend-subtabs,
body.shell-v2 .epr-toggle,
body.shell-v2 .vlab-tabs,
body.shell-v2 .pshell-mseg {
  background: var(--lg-control);
  box-shadow: var(--lg-rim);
}
body.shell-v2 :is(.trend-subtabs, .epr-toggle, .vlab-tabs, .pshell-mseg) * {
  --surface-1: var(--lg-fill-1);
  --surface-2: var(--lg-fill-2);
  --surface-3: var(--lg-control-on);
}

/* 주 CTA — 불투명 흰 알약 유지(오너 승인 범위: Framer 정본).
 * Apple 의 틴티드 글라스 CTA(흰 배킹 94% + accent)는 쓰지 않는다. 재질 가족으로 묶는 하단 음영 한 줄만 얹는다. */
body.shell-v2 .btn--primary { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), var(--lg-drop-1); }

/* 🔴 글라스 box-shadow 가 포커스 링을 덮는다(2026-09-15 실측) — 위 규칙들의 :focus-visible 을 여기서 다시 적는다.
 *    hover 규칙이 링을 이기는 순간 키보드 사용자가 자기 위치를 잃는다. */
body.shell-v2 .btn--secondary:focus-visible,
body.shell-v2 .btn--chip:focus-visible,
body.shell-v2 .home-new:focus-visible,
body.shell-v2 .nav-btn:focus-visible,
body.shell-v2 .nav-btn--active:focus-visible {
  outline: none;
  box-shadow: var(--lg-rim), var(--ring-focus);
}

/* 셀렉트 — OS 기본 화살표 대신 앱 셰브런(lucide chevron-down).
 * 여러 규칙이 background 단축형으로 이미지를 지우므로 이미지 속성만 !important. */
body.shell-v2 select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}
body.shell-v2 .pshell-mode { padding-right: 32px; }