/* 새 셸 화면별 완성도 층 — chrome-overlays. DESIGN.md(Framer) 준수 · body.shell-v2 스코프 */

/* ── 전역 오버레이 — ⌘K 검색 · 알림 패널 · 피드백 모달 · 확인 모달(#cm-overlay) · 토스트 · 호버 툴팁 ──
 *   표면 단(surface-1 패널 · surface-2 입력/칩)으로 구분하고 테두리는 쓰지 않는다. 390 은 시트(아래에서 올라오는 전폭)·전체 화면.
 *   ⚠️ .sm-overlay/.sm-panel 은 19개 모달이 공유한다 — 확인 모달 전용 규칙은 #cm-overlay 로만 건다. */
/* 스크림 — 모든 모달이 한 값(= 트레이 ::backdrop · .lib-scrim, canvas #090909 48% · ≤810 72%). 전엔 .6/.42/.32 로 모달마다 달랐다. */
body.shell-v2 .gs-overlay, body.shell-v2 .fb-overlay, body.shell-v2 .gd-overlay, body.shell-v2 #cm-overlay, body.shell-v2 .sm-overlay, body.shell-v2 .kp-overlay, body.shell-v2 .ep-drawer-backdrop, body.shell-v2 .podcast-modal-backdrop { background: rgba(9, 9, 9, 0.48); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media (max-width: 810px) { body.shell-v2 .gs-overlay, body.shell-v2 .fb-overlay, body.shell-v2 .gd-overlay, body.shell-v2 #cm-overlay, body.shell-v2 .sm-overlay, body.shell-v2 .kp-overlay, body.shell-v2 .ep-drawer-backdrop, body.shell-v2 .podcast-modal-backdrop { background: rgba(9, 9, 9, 0.72); } }
/* 믹스다운 모달은 .podcast-player 카드 자체가 패널이다(모달 셸은 배경 없음) — 모달 안에서만 카드를 패널로 올린다. 인라인 플레이어는 그대로. */
body.shell-v2 .gs-panel, body.shell-v2 .fb-panel, body.shell-v2 .gd-panel, body.shell-v2 .audio-gen-modal, body.shell-v2 #cm-overlay .sm-panel, body.shell-v2 .podcast-modal .podcast-player { background: var(--surface-1); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-float); }

/* ⌘K 검색 */
body.shell-v2 .gs-panel { width: min(600px, 100%); max-height: min(70vh, 560px); }
body.shell-v2 .gs-head { display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xxs) var(--sp-xs) var(--sp-xxs) var(--sp-xxs); border-bottom: 1px solid var(--hairline-soft); }
body.shell-v2 .gs-input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 var(--sp-sm); border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; letter-spacing: -0.16px; }
body.shell-v2 .gs-input:focus { border: 0; box-shadow: none; }
body.shell-v2 .gs-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.shell-v2 .gs-close { display: none; }
body.shell-v2 .gs-list { padding: 6px; gap: 2px; }
body.shell-v2 .gs-row { min-height: 44px; padding: 0 var(--sp-sm); gap: var(--sp-sm); border-radius: var(--r-md); color: var(--ink-80); }
body.shell-v2 .gs-row:hover, body.shell-v2 .gs-row-on { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .gs-row-label { font-size: var(--fs-body); letter-spacing: var(--ls-body); }
body.shell-v2 .gs-badge, body.shell-v2 .gs-badge-plan, body.shell-v2 .gs-badge-nav { border: 0; border-radius: var(--r-pill); padding: 2px var(--sp-xs); background: var(--surface-2); color: var(--ink-48); font-size: var(--fs-fine); font-weight: 500; }
body.shell-v2 .gs-row:hover .gs-badge, body.shell-v2 .gs-row-on .gs-badge { background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .gs-empty { padding: var(--sp-xl) var(--sp-lg); font-size: var(--fs-caption); color: var(--ink-48); }
body.shell-v2 .gs-foot { padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--hairline-soft); font-size: 12px; color: var(--ink-48); letter-spacing: var(--ls-footnote); }

/* 알림 패널 — 안읽음은 색 배경이 아니라 작은 흰 점 + 진한 글자 */
body.shell-v2 .feed-notif-panel { width: 340px; max-height: min(60vh, 480px); padding: 6px; }
body.shell-v2 .feed-notif-head { padding: var(--sp-sm) var(--sp-sm) var(--sp-xs); border: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
body.shell-v2 .feed-notif-item { position: relative; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg); border: 0; border-radius: var(--r-md); background: transparent; }
body.shell-v2 .skel-feednotif { --skel-row-pad: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg); }
body.shell-v2 .skel-feednotif .skel-row { border-bottom: 0; border-radius: var(--r-md); }
body.shell-v2 .feed-notif-item.is-unread { background: transparent; }
body.shell-v2 .feed-notif-item.is-unread::before { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
body.shell-v2 .feed-notif-item.is-linkable { cursor: pointer; }
body.shell-v2 .feed-notif-item.is-linkable:hover { background: var(--surface-2); }
body.shell-v2 .feed-notif-text { font-size: 13px; line-height: 1.4; color: var(--ink-80); }
body.shell-v2 .feed-notif-item.is-unread .feed-notif-text { color: var(--ink); }
body.shell-v2 .feed-notif-time { margin-top: 2px; font-size: 12px; color: var(--ink-48); }
body.shell-v2 .feed-notif-empty { padding: var(--sp-xl) var(--sp-md); color: var(--ink-48); }

/* 피드백 모달 — 탭은 밑줄 대신 알약(선택 = 표면 단) · 머리 줄 오른쪽에 닫기 */
body.shell-v2 .fb-panel { padding: var(--sp-xs) var(--modal-pad) var(--modal-pad); gap: 0; }
body.shell-v2 .fb-panel--wide { width: min(92vw, 640px); }
body.shell-v2 .fb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs); min-height: 56px; }
body.shell-v2 .fb-tabs { border: 0; gap: var(--sp-xxs); }
body.shell-v2 .btn.fb-tab { min-height: 36px; padding: 0 var(--sp-sm); border: 0; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 500; color: var(--ink-48); }
body.shell-v2 .btn.fb-tab:hover { color: var(--ink); }
body.shell-v2 .btn.fb-tab.fb-tab--active { background: var(--surface-2); color: var(--ink); font-weight: 500; }
body.shell-v2 .fb-close { width: 40px; min-height: 40px; padding: 0; justify-content: center; color: var(--ink-48); }
body.shell-v2 .fb-body-host { padding-top: var(--sp-xs); }
body.shell-v2 .fb-form { gap: var(--sp-xs); }
body.shell-v2 .fb-label { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ink-80); }
body.shell-v2 .fb-select, body.shell-v2 .fb-textarea { border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-body); }
body.shell-v2 .fb-select { height: 44px; padding: 0 var(--sp-sm); }
body.shell-v2 .fb-textarea { min-height: 140px; padding: var(--sp-sm) var(--sp-sm); }
body.shell-v2 .fb-counter { margin-top: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
body.shell-v2 .fb-actions { margin-top: var(--sp-xs); }
body.shell-v2 .fb-mt-card { background: var(--surface-2); border: 0; border-radius: var(--r-lg); padding: var(--sp-sm) var(--sp-md); }
body.shell-v2 .fb-mt-status, body.shell-v2 .fb-mt-status--open, body.shell-v2 .fb-mt-status--held { background: var(--surface-3); color: var(--ink-80); font-size: 12px; font-weight: 500; }
body.shell-v2 .fb-mt-status--resolved { background: var(--surface-3); color: var(--positive); font-size: 12px; font-weight: 500; }
body.shell-v2 .fb-mt-status--rejected { background: var(--surface-3); color: var(--danger); font-size: 12px; font-weight: 500; }
body.shell-v2 .fb-mt-reply, body.shell-v2 .fb-detail-reply { border-left: 2px solid var(--divider-soft); }
body.shell-v2 .fb-mt-reply-label, body.shell-v2 .fb-detail-reply .fb-detail-label { color: var(--ink-48); }
body.shell-v2 .fb-mt-reply-img { border: 0; border-radius: var(--r-md); background: var(--surface-3); }

/* 상세 모달(.gd-*) — 피드 카드 상세(feedModal)·갤러리 라이트박스(galleryDetail)가 공유한다.
 *   2026-09-17 전까지 v2 층에 없어 components.css 원형(1px 보더 · #14141c · 16px 반경 · 머리 구분선)이 그대로 떴다.
 *   피드백 모달(.fb-*)과 같은 문법 — 보더 없음 · 머리 줄은 구분선 대신 높이 · 닫기는 정사각 40. */
body.shell-v2 .gd-panel { width: min(560px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
body.shell-v2 .gd-panel.feed-modal-panel { width: min(92vw, 760px); max-width: none; }
body.shell-v2 .gd-head { flex: 0 0 auto; align-items: flex-start; gap: var(--sp-sm); min-height: 56px; padding: var(--sp-md) var(--sp-xs) 0 var(--modal-pad); border-bottom: 0; }
body.shell-v2 .gd-title { padding-top: 6px; font-size: var(--fs-title-3); font-weight: 600; line-height: 1.35; letter-spacing: -0.3px; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
body.shell-v2 .btn.gd-close { flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: var(--r-pill); color: var(--ink-48); }
body.shell-v2 .btn.gd-close:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .gd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-sm) var(--modal-pad) var(--modal-pad); }
body.shell-v2 .feed-modal-body { max-height: none; }
body.shell-v2 .feed-modal-summary { margin: 0 0 var(--sp-lg); font-size: var(--fs-body); line-height: 1.6; letter-spacing: var(--ls-body); color: var(--ink-80); word-break: keep-all; overflow-wrap: anywhere; }
body.shell-v2 .feed-modal-doc { color: var(--ink-80); }
body.shell-v2 .feed-modal-metrics { gap: var(--sp-xs); margin-top: 0; }
body.shell-v2 .feed-modal-metric { padding: 4px var(--sp-sm); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-80); font-size: var(--fs-fine); line-height: 1.4; letter-spacing: var(--ls-fine); }
body.shell-v2 .gd-img-btn { border-radius: var(--r-lg); }
body.shell-v2 .gd-mode { color: var(--ink-48); font-size: var(--fs-caption); }
body.shell-v2 .gd-ref-label { font-weight: 600; color: var(--ink-80); }
body.shell-v2 .gd-ref-cell { border: 0; border-radius: var(--r-md); }
body.shell-v2 .gd-ref-cell:hover { box-shadow: var(--ring-focus); }

/* 팟캐스트 AI 생성 모달 — 같은 표면 문법. 탭은 피드백 모달처럼 알약(선택 = 표면 단), 입력은 표면 단 채움 */
body.shell-v2 .audio-gen-modal { padding: var(--modal-pad); }
body.shell-v2 .audio-gen-title { font-size: var(--fs-title-3); font-weight: 600; letter-spacing: -0.3px; }
body.shell-v2 .btn.audio-gen-tab { border: 0; border-radius: var(--r-pill); color: var(--ink-48); }
body.shell-v2 .btn.audio-gen-tab:hover { color: var(--ink); }
body.shell-v2 .btn.audio-gen-tab.is-active { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .audio-gen-select, body.shell-v2 .audio-gen-num { border-radius: var(--r-md); padding: var(--sp-xs) var(--sp-sm); }

/* 확인 모달 — 파괴적 확인은 danger(부드러운 붉은 알약 · 올리면 채움) */
body.shell-v2 #cm-overlay .sm-panel { width: min(420px, 100%); padding: var(--modal-pad); gap: var(--sp-sm); }
body.shell-v2 #cm-overlay .sm-title { font-size: var(--fs-title-3); font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; }
body.shell-v2 #cm-overlay .sm-sub { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-80); }
body.shell-v2 #cm-overlay .sm-actions { margin-top: var(--sp-sm); gap: var(--sp-xs); }
body.shell-v2 #cm-overlay .sm-actions .btn { min-height: 40px; padding: 0 var(--sp-lg); }
body.shell-v2 #cm-overlay .btn--secondary { background: var(--surface-2); }
body.shell-v2 #cm-overlay .btn--secondary:hover { background: var(--surface-3); }
body.shell-v2 #cm-overlay .btn--danger { background: var(--danger-soft); color: var(--danger); }
body.shell-v2 #cm-overlay .btn--danger:hover { background: var(--danger); color: var(--canvas); }


/* 호버 툴팁 — 모달(210~3400) 안 버튼의 툴팁이 스크림 뒤에 깔리지 않게 토스트(3600) 위로 */
body.shell-v2 .hovertip { z-index: 3700; gap: var(--sp-xs); padding: 6px var(--sp-sm); border: 0; border-radius: var(--r-sm); background: var(--surface-3); box-shadow: var(--shadow-float); font-size: 12px; letter-spacing: var(--ls-footnote); }
body.shell-v2 .hovertip-label { color: var(--ink); }
body.shell-v2 .hovertip-kbd { padding: 1px 6px; border: 0; border-radius: var(--r-xs); background: var(--surface-1); color: var(--ink-80); font-family: var(--font-sans); font-size: 11px; }
@media (hover: none) { body.shell-v2 .hovertip { display: none; } }

/* 390: 확인·피드백은 아래에서 올라오는 전폭 시트 · 검색은 전체 화면 · 알림은 메뉴 시트 위 바닥 시트 */
@media (max-width: 810px) {
  body.shell-v2 .gs-overlay { padding: 0; align-items: stretch; }
  body.shell-v2 .gs-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  body.shell-v2 .gs-close { display: inline-flex; min-height: 44px; padding: 0 var(--sp-sm); }
  body.shell-v2 .gs-foot { display: none; }
  body.shell-v2 .fb-overlay { align-items: flex-end; }
  body.shell-v2 .fb-panel, body.shell-v2 .fb-panel--wide { width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--sp-xxs) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom)); }
  body.shell-v2 .fb-close { width: 44px; min-height: 44px; }
  body.shell-v2 .fb-actions .btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
  body.shell-v2 .gd-overlay.feed-modal { align-items: flex-end; padding: 0; }
  body.shell-v2 .gd-overlay.feed-modal .gd-panel { width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  body.shell-v2 .gd-overlay.feed-modal .gd-body { padding-bottom: calc(var(--modal-pad) + env(safe-area-inset-bottom)); }
  body.shell-v2 .gd-head { padding-left: var(--sp-md); }
  body.shell-v2 .btn.gd-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  body.shell-v2 #cm-overlay { align-items: flex-end; padding: 0; }
  body.shell-v2 #cm-overlay .sm-panel { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--modal-pad) var(--modal-pad) calc(var(--modal-pad) + env(safe-area-inset-bottom)); }
  body.shell-v2 #cm-overlay .sm-actions { flex-direction: column-reverse; }
  body.shell-v2 #cm-overlay .sm-actions .btn { width: 100%; min-height: 48px; justify-content: center; }
  body.shell-v2.hub-menu-open .sidebar-actions .feed-notif-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 70dvh; z-index: 80;
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 6px 6px calc(var(--sp-sm) + env(safe-area-inset-bottom));
  }
  body.shell-v2.hub-menu-open .sidebar-actions .feed-notif-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.6); }
}

/* 토스트는 v2/toast.css 가 소유한다(2026-09-16 macOS 배너 · 스택으로 교체). */
/* 카드(surface-1) 위 보조 알약은 한 단 위 — 같은 표면이면 [취소]가 글자만 떠 있는 것처럼 보인다(피드백 모달 실측) */
body.shell-v2 .fb-panel .btn--secondary { background: var(--surface-2); }
body.shell-v2 .fb-panel .btn--secondary:hover { background: var(--surface-3); }
/* 알림 스크림은 좁은 화면의 바텀시트 전용 — 넓은 화면의 드롭다운에는 뒤를 가릴 이유가 없다 */
body.shell-v2 .feed-notif-scrim { display: none; }