/* 새 셸 데스크톱 사이드바 = 좌측에 떠 있는 글라스 독(iOS 27 Tab Bar · 오너 지시 2026-09-16).
 *   *"아이콘만 있다가 호버하면 메뉴명이 뜨는 형태 · 좌측에 사이드로"* + Figma iOS and iPadOS 27 Tab Bar(5538:24452 등).
 *   구성: 브랜드 원 → 메뉴 캡슐 → (아래로 밀려) 액션 캡슐(검색·알림·피드백) → 로그아웃 캡슐. 라벨 여는 모션은 motion 의
 *   `layout` + AnimatePresence 예시를 CSS 로 옮겼다 — 폭 auto 는 트랜지션이 안 되지만 grid 트랙 0fr → 1fr 은 된다(hubNav.js dockLabel).
 *
 *   ★ 모바일(≤810)은 이 파일을 타지 않는다 — 56px 상단 바 + 전체 높이 시트(chrome-shell.css ②) 그대로다.
 *   ★ 선택자는 `body.shell-v2.shell-chrome:not(.pshell-open)` 로 시작해 (0,4,1) 이다 — liquid-glass-chrome.css 의
 *     `body.shell-v2 .shell-sidebar`(0,2,1)는 이 파일보다 **뒤에** 실리므로 순서가 아니라 특이도로 이겨야 한다.
 *     v1 의 `body.shell-chrome.rail-collapsed .shell-sidebar { display: none }`(0,3,1)도 같은 이유로 이긴다.
 *   🔴 글라스는 캡슐에만 건다 — 감싸는 <aside> 에 블러가 남으면 backdrop root 가 되어 캡슐 블러가 에러 없이 죽는다
 *      ("glass can not sample other glass"). 그래서 aside 의 재질을 명시적으로 끈다.
 *   🔴 animation 을 쓰지 않는다(transition 만) — fill both 가 transform 을 붙잡으면 같은 함정이다. */

.dock-ind, .dock-bump, .dock-fab-goo, .dock-fab-trigger { display: none; } /* 독 밖(모바일 시트·옛 셸)에서는 없다 — 아래 미디어 안에서만 켠다 */

@media (min-width: 811px) {
  body.shell-v2.shell-chrome:not(.pshell-open) { --sidebar-w: 88px; --dock-spring: cubic-bezier(0.32, 0.72, 0, 1); padding-left: var(--sidebar-w); }
  body.shell-v2.shell-chrome:not(.pshell-open) .rail-mini,
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-head-actions,
  body.shell-v2.shell-chrome:not(.pshell-open) #who { display: none; }

  /* ★ 메뉴는 화면 세로 중앙(오너 지시 2026-09-16). 위(로고)·아래(하단 묶음) 칸을 **같은 1fr** 로 나누고 각 칸의 최소를 내용 높이로 둔다 —
   *   공간이 넉넉하면 두 칸이 같아 메뉴가 정확히 가운데, 좁아지면 아래 칸이 자기 높이를 지키고 위 칸이 줄어 메뉴가 **위로 밀린다**(겹치지 않는다).
   *   하단 묶음이 로고보다 훨씬 커서(≈224 vs 56) flex 의 auto 여백으로는 가운데가 안 맞는다. */
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-sidebar {
    display: grid; position: fixed; left: 16px; top: 16px; bottom: 16px; z-index: 70;
    grid-template-rows: minmax(max-content, 1fr) max-content minmax(max-content, 1fr); justify-items: start;
    width: auto; height: auto; gap: 12px; padding: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none; animation: none; overflow: visible;
    pointer-events: none; /* 캡슐 사이 빈 곳은 뒤 콘텐츠가 받는다 */
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-sidebar > * { pointer-events: auto; }

  /* ── 캡슐 공통 재질(Tab Bar BG) ──
   *   🔴 재질은 캡슐 자신이 아니라 ::before 층에 건다(로컬 실측 2026-09-16). 캡슐에 backdrop-filter 를 걸면 캡슐이 backdrop root 가
   *      되어, 그 안에서 여는 알림 패널(.feed-notif-panel · 자식)의 블러가 에러 없이 죽고 글이 뒤 콘텐츠와 겹쳐 읽히지 않았다.
   *      z-index 0 은 쌓임 맥락만 만들고 backdrop root 는 만들지 않는다 — ::before(-1)가 캡슐 안 내용 뒤에 깔린다. */
  /* 캡슐(버블)은 메뉴에만 둔다 — 브랜드·하단 액션·로그아웃은 버블 없이 아이콘만(오너 피드백 2026-09-16) */
  body.shell-v2.shell-chrome:not(.pshell-open) :is(.brand, .shell-nav, .sidebar-actions, .auth-area) {
    position: relative; z-index: 0; border-radius: 28px; background: none;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: var(--lg-sheen), var(--lg-tint-regular);
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
    box-shadow: var(--lg-shadow-float);
  }

  /* 브랜드 — 버블 없이 심볼만, 메뉴 아이콘 열(56px)의 정중앙에.
   *   🔴 grid 로 가운데 두면 안 된다 — 숨긴 워드마크 텍스트 노드("AIDRA")가 font-size 0 이어도 grid 칸을 하나 차지해
   *      심볼이 8px 위로 밀렸다(로컬 실측: 상자 중심 44 · 심볼 중심 36). 심볼을 절대 위치로 상자 정중앙에 박는다.
   *   크기 36px — 메뉴 아이콘(20px)보다 한 단 크게, 앱 마크로 읽히게(오너: "크기 비율도 작아 보여"). */
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-head { min-height: 0; align-self: start; }
  body.shell-v2.shell-chrome:not(.pshell-open) .brand { width: 56px; height: 56px; padding: 0; font-size: 0; }
  body.shell-v2.shell-chrome:not(.pshell-open) .brand .brand-mark { position: absolute; inset: 0; width: 36px; height: 36px; margin: auto; }

  /* ── 메뉴·로그아웃 캡슐 ──
   *   🔴 항목은 전용 클래스 .dock-item 으로 고른다 — `:is(.shell-nav .nav-btn, .auth-area #signout)` 로 썼더니 :is() 가 가장 높은 인자
   *      (#signout 의 ID)의 특이도를 **모든 일치 요소에** 줘서, 투명 배경 규칙이 선택 탭 규칙(.nav-btn--active)을 이겼다
   *      (FCV 독립 검증이 잡음 · 선택 탭에 채움이 안 보이고 아이콘 색만 남았다).
   *   메뉴 캡슐은 56px 고정이다 — 라벨은 캡슐을 넓히지 않고 오른쪽에 붙는 별도 버블로 연다(아래 ‘메뉴 라벨 버블’). */
  body.shell-v2.shell-chrome:not(.pshell-open) :is(.shell-nav, .auth-area) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: max-content; min-width: 56px; padding: 4px; margin: 0; overflow: visible; flex: 0 0 auto;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-item,
  body.shell-v2.shell-chrome:not(.pshell-open) .auth-area #signout.dock-item { /* 쉼표 목록은 선택자마다 특이도를 따로 센다 — chrome-shell.css 의 .auth-area #signout 을 이 줄이 이긴다 */
    display: flex; align-items: center; gap: 0;
    width: auto; height: 48px; min-height: 48px; padding: 0 14px; margin: 0;
    border: 0; border-radius: 24px; background: transparent; box-shadow: none;
    color: var(--ink-48); font-size: 14px; font-weight: 500; letter-spacing: var(--ls-caption); white-space: nowrap;
    transition: gap 420ms var(--dock-spring), background 200ms ease, color 200ms ease;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) :is(.shell-nav, .auth-area) .nav-btn-icon { display: block; flex: 0 0 20px; }

  /* 라벨 — 닫힘: 폭 0 · 투명 · 살짝 왼쪽 · 흐림 / 열림(호버·키보드 포커스): 내용 폭 · 선명 */
  body.shell-v2.shell-chrome:not(.pshell-open) .nav-btn-label {
    display: grid; grid-template-columns: 0fr;
    opacity: 0; transform: translateX(-4px); filter: blur(4px);
    transition: grid-template-columns 420ms var(--dock-spring), transform 420ms var(--dock-spring), opacity 200ms ease, filter 200ms ease;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .nav-btn-label > span { min-width: 0; overflow: hidden; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-item:is(:hover, :focus-visible),
  body.shell-v2.shell-chrome:not(.pshell-open) .auth-area #signout.dock-item:is(:hover, :focus-visible) { gap: 10px; color: var(--ink); background: var(--lg-control); }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-item:is(:hover, :focus-visible) .nav-btn-label {
    grid-template-columns: 1fr; opacity: 1; transform: none; filter: none;
  }

  /* ── 메뉴 라벨 '혹' — 호버·포커스한 항목 옆으로 캡슐 테두리가 이어져 튀어나온다(오너 피드백 2026-09-16 · web/shell/dockBump.js) ──
   *   모양은 SVG 경로 한 줄(dockBumpPath.js)이라 테두리가 캡슐에서 끊김 없이 흘러나온다. 두 버블 + 목(neck) 판은 윤곽이 끊겨 걷었다.
   *   버블이 먼저 스프링으로 튀어나오고, 폭이 거의 찬 뒤에 글자가 뜬다(.dock-bump--text).
   *   각 버튼의 .nav-btn-label 은 접근 이름으로 DOM 에 남기고 화면에서만 숨긴다. 메뉴 캡슐은 56px 고정. */
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav { width: 56px; }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump {
    display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; /* 경로가 캡슐 좌표 그대로다(dockBumpPath) */
    visibility: hidden; pointer-events: none;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump.dock-bump--on { visibility: visible; }
  /* 닫힘 — 스프링으로 접지 않고 120ms 페이드 뒤 치운다(dockBump.js OUT_MS) */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump.dock-bump--out { opacity: 0; transition: opacity 120ms ease; }
  /* 글라스 — 캡슐 ::before 와 같은 재질. clip-path 는 이 요소 자신에만 걸려 블러가 산다(자식 블러를 가두지 않는다) */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-glass {
    position: absolute; inset: 0;
    background: var(--lg-sheen), var(--lg-tint-regular);
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-edge { position: absolute; left: 0; top: 0; overflow: visible; }
  /* 이음매 — 목이 붙는 구간의 캡슐 테두리(광연)를 테두리 곡선을 따라 굵은 어둠으로 덮는다. 안 덮으면 캡슐 테두리가 혹을 가로질러 보인다 */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-seam { fill: none; stroke: rgba(10, 10, 12, 0.7); stroke-width: 2; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-line { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-text {
    /* 가로 시작(목 끝)·폭(허리+몸통)·세로(알약 중심)는 JS 가 준다(dockBumpPath textLeft·pillCenter) → 가운데 정렬 */
    position: absolute; left: 0; top: 50%; transform: translate(-4px, -50%); text-align: center;
    font-size: 14px; font-weight: 500; letter-spacing: var(--ls-caption); line-height: 20px; color: var(--ink); white-space: nowrap;
    opacity: 0; transition: opacity 160ms ease, transform 240ms var(--dock-spring);
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump--active .dock-bump-text { font-weight: 700; color: #ffffff; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump--text .dock-bump-text { opacity: 1; transform: translate(0, -50%); }

  /* 선택 탭 — 한 단 밝은 채움(Tab Bar Selection) + 흰색·굵은 아이콘(오너 피드백 2026-09-16 — 파랑 강조 대신) */
  /* 칸 자신은 채우지 않는다 — 채움은 칸 사이를 움직이는 인디케이터(.dock-ind) 하나가 맡는다 */
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .dock-item,
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .dock-item:is(:hover, :focus-visible),
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active,
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active:hover { position: relative; z-index: 1; background: transparent; box-shadow: none; }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active { color: var(--ink); }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .dock-item:focus-visible { box-shadow: var(--ring-focus); }

  /* ── 선택 인디케이터 — Bencho GlassIconBar 의 두 단계 전환(web/shell/dockIndicator.js) ──
   *   stretch: 앞쪽 끝이 뛰고 두 칸을 잇도록 늘어난다 · settle: 뒤쪽 끝이 따라와 목표 칸으로 줄며 살짝 넘친다(3번째 제어점 > 1). */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-ind {
    display: block; position: absolute; left: 4px; top: 0; width: 48px; height: 48px; border-radius: 24px; z-index: 0; pointer-events: none;
    background: var(--lg-sheen), var(--lg-control-on); box-shadow: var(--lg-specular-pill), var(--lg-rim);
    will-change: transform, height;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-ind[data-phase="stretch"] {
    transition: transform 190ms cubic-bezier(0.32, 0.72, 0.24, 1), height 190ms cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-ind[data-phase="settle"] {
    transition: transform 420ms cubic-bezier(0.28, 1.28, 0.36, 1), height 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active { color: #ffffff; }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active .nav-btn-icon { color: #ffffff; stroke-width: 2.4; }
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .nav-btn--active .nav-btn-label { font-weight: 700; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-item:focus-visible,
  body.shell-v2.shell-chrome:not(.pshell-open) .auth-area #signout.dock-item:focus-visible { box-shadow: var(--lg-rim), var(--ring-focus); }

  /* ── 하단 도구 FAB — 왼쪽 아래 트리거 원을 누르면 모서리에서 검색·알림·피드백·로그아웃 버블이 방울처럼 나온다(web/shell/dockFab.js) ──
   *   liquid-gooey 방식: 실루엣(SVG 원 + goo 필터)이 액체 모양·광연을 맡고, 실제 버튼은 그 위에 필터 없이 선명하게 얹힌다.
   *   버튼은 제자리 DOM 그대로 — 감싸는 .sidebar-actions·.auth-area·.feed-notif 를 display: contents 로 풀어 foot 기준 absolute 로 둔다.
   *   ⚠️ 트리거 원 안에서 버튼이 겹쳐 있을 땐 visibility: hidden(탭 순서에서도 빠진다) — .dock-fab--shown 일 때만 보인다. */
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot { display: block; position: relative; width: 56px; height: 56px; gap: 0; align-self: end; }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot > :is(.sidebar-actions, .auth-area),
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .feed-notif { display: contents; }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .auth-area > :not(#signout) { display: none; } /* 자동저장 표시 등 — 허브에선 저장할 문서가 없다(프로젝트 셸 상단바가 맡는다) */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-goo { display: block; position: absolute; left: -120px; bottom: -120px; z-index: 0; overflow: visible; pointer-events: none; }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-goo circle { fill: #000; } /* 색은 필터가 입힌다(캡슐 글라스 토큰 값) — 여긴 모양만 */
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-trigger {
    display: grid; place-items: center; position: absolute; inset: 0; z-index: 3;
    width: 56px; height: 56px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-48); cursor: pointer; /* 배경 없는 + 만 — 메뉴 아이콘과 같은 결 */
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-trigger svg { transition: transform 420ms cubic-bezier(0.28, 1.28, 0.36, 1); }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab--open .dock-fab-trigger svg { transform: rotate(45deg); }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-trigger:hover, body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab--open .dock-fab-trigger { color: var(--ink); }
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-fab-trigger:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  /* 닫혀 있어도 읽지 않은 알림·답변이 있으면 트리거에 점 — 버블 속에 숨은 배지를 놓치지 않게 */
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot:not(.dock-fab--open):has(.feed-notif-badge:not([hidden]), .fb-rail-badge:not([hidden])) .dock-fab-trigger::after {
    content: ''; position: absolute; top: 14px; right: 14px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink);
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot :is(.sidebar-action-btn, .feed-notif-bell),
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .auth-area #signout.dock-item,
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .auth-area #signout.dock-item:is(:hover, :focus-visible) {
    display: grid; place-items: center; position: absolute; left: 6px; bottom: 6px; z-index: 2;
    width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; margin: 0; gap: 0;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--ink-80);
    /* 뒤 블러를 버튼마다 걸면 액체 모양 안에 원 경계가 이중 윤곽으로 보였다(로컬 실측) — 재질은 실루엣 필터(틴트·광연·반사광·그림자)만 맡는다 */
    visibility: hidden; transition: color 150ms ease;
  }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot.dock-fab--shown :is(.sidebar-action-btn, .feed-notif-bell),
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot.dock-fab--shown .auth-area #signout.dock-item { visibility: visible; }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot :is(.sidebar-action-btn, .feed-notif-bell)::after { content: none; }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .auth-area #signout.dock-item .nav-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot :is(.sidebar-action-btn, .feed-notif-bell, #signout):hover { color: #ffffff; }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot :is(.sidebar-action-btn, .feed-notif-bell, #signout):focus-visible { outline: none; box-shadow: var(--ring-focus); }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot :is(.feed-notif-badge, .fb-rail-badge) { top: 2px; right: 0; left: auto; }
  /* 알림 패널은 트리거 오른쪽으로 연다(바닥을 맞춘다) */
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-foot .feed-notif-panel { top: auto; bottom: 0; left: calc(100% + 120px); right: auto; }
  /* 알림 패널은 독 오른쪽으로 연다 — 위로 열면(기존) 독의 검색 버튼을 덮는다. 벨 바닥에 맞춘다 */

  /* 옛 사이드바에선 블러 사이드바 안이라 틴트만 줬다(liquid-glass-overlays.css). 독은 캡슐 재질이 ::before 층이라 패널이 배경을 샘플할 수 있다 — 블러를 켠다 */
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-actions .feed-notif-panel { -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); }

  /* 자동저장 상태가 계정 캡슐 안에 들어오면 아이콘 폭에 갇혀 글이 잘린다 — 독에서는 숨기지 않고 글자만 작게 */
}

/* 낮은 화면 — 세 칸의 내용 합(로고 56 + 메뉴 356 + 하단 ≈224 + 간격)이 창보다 크면 겹친다. 항목 높이를 줄여 더 버틴다(≈600px 까지) */
@media (min-width: 811px) and (max-height: 720px) {
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-nav .dock-item { height: 40px; min-height: 40px; }
}
/* 그보다 낮으면 로고를 걷는다 — 메뉴·하단 버튼(기능)을 지키는 쪽을 택한다 */
@media (min-width: 811px) and (max-height: 600px) {
  body.shell-v2.shell-chrome:not(.pshell-open) .shell-sidebar { grid-template-rows: 0 max-content minmax(max-content, 1fr); }
  body.shell-v2.shell-chrome:not(.pshell-open) .sidebar-head { display: none; }
}

@media (min-width: 811px) and (prefers-reduced-motion: reduce) {
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-item,
  body.shell-v2.shell-chrome:not(.pshell-open) .nav-btn-label,
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-bump-text,
  body.shell-v2.shell-chrome:not(.pshell-open) .dock-ind { transition: none !important; }
}