/* 화면 가장자리에 붙은 서랍 — 트레이(아래) · 라이브러리 시트(오른쪽). 2026-09-18 오너 시안:
 *   "화면 밖에서 나오니 화면과 연결된 것처럼 — r 값 든 직사각형이 아니라 바깥 테두리에 연결되어 튀어나온 모양".
 *   → 붙는 변을 화면 끝에 딱 붙이고(틈 0 · 그 변의 모서리 반경 0), 양 끝에 **오목한 필렛**을 덧대 화면 테두리로 잇는다.
 *
 *   🔴 패널 자체는 **한 줄도 안 바꾼다** — 배경·블러·광연(rim)·그림자가 예전 그대로여야 한다(오너: "테두리·배경·리퀴드 글라스 느낌은 유지").
 *      첫 판은 패널을 clip-path: shape() 로 깎았다. 블러는 살아 있었지만 clip-path 가 광연과 그림자를 함께 잘라
 *      유리가 평평한 판으로 보였다("리퀴드 글라스 느낌이 없어졌다"). 그래서 깎지 않고 **덧댄다**.
 *   필렛 = 패널의 ::before/::after(필렛 폭 정사각형). mask 로 오목한 사분원을 비우고, 경계에 패널과 같은 광연 1px,
 *     칠은 패널과 같은 층(광택·틴트). ⚠️ 필렛엔 블러가 없다 — 부모가 backdrop-filter 라 자식의 블러는 배경을 못 본다(backdrop root).
 *     28px 조각이고 뒤는 어두운 스크림이라 틴트만으로 이어져 보인다.
 *   ⚠️ 필렛이 패널 상자 밖에 있으므로 overflow: hidden 을 푼다 — 스크롤은 안쪽 본문(.tray-body · .lib-ins-body)이 따로 한다.
 *   적용 범위: 넓은 화면(811px~)만. ≤810 은 둘 다 화면 폭 바텀시트라 튀어나올 옆 공간이 없다. */

@media (min-width: 811px) {
  body.shell-v2 {
    --edge-fillet: 28px;
    --edge-fill: var(--lg-tint-overlay, var(--surface-1));   /* 패널 배경 틴트와 같게 */
    --edge-rim: var(--lg-edge-overlay, var(--hairline));        /* 패널 윤곽(--lg-edge-overlay)과 같게 */
    /* 겹친 1px 에서 패널 광연을 지우는 불투명 칠 — 반투명 틴트로 덮으면 광연이 반만 죽어 붙는 자리에 흐린 선이 남는다(실측).
     * 값은 그 자리 패널의 실측 색(아래쪽 #050505 · 광택이 있는 윗변 #0f0f0f). 투명도 감소·대비 증가에선 패널이 불투명이라 그대로 맞는다. */
    --edge-seam-color: #050505;
  }

  /* 사분원 필렛 공통 — 모양은 mask(중심 --c 에서 반지름 필렛폭까지 비움), 칠은 패널과 같은 층(광택 → 틴트) + 경계 1px 광연.
   *   ⚠️ 1px 겹침: 필렛 상자를 패널 쪽으로 1px 더 들여 패널 광연(inset 1px)의 그 구간을 덮는다 — 안 덮으면 붙는 자리에 세로/가로 선이 남는다.
   *   ⚠️ 광택(--edge-sheen): 패널 광택은 위 42% 에만 있다(--lg-sheen). 패널 윗변에 붙는 필렛(라이브러리 위)만 같은 6% 흰빛을 얹어야
   *      색이 이어진다(실측: 패널 윗부분 #0f0f0f · 아래 #020202). 아래쪽 필렛은 틴트만. */
  body.shell-v2 dialog.tray::before, body.shell-v2 dialog.tray::after,
  body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector::before, body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector::after {
    content: ''; position: absolute; pointer-events: none;
    width: var(--w, var(--edge-fillet)); height: var(--h, var(--edge-fillet));
    background:
      radial-gradient(circle calc(var(--edge-fillet) + 1.5px) at var(--c),
        transparent calc(var(--edge-fillet) - 0.5px), var(--edge-rim) var(--edge-fillet),
        var(--edge-rim) calc(var(--edge-fillet) + 1px), transparent calc(var(--edge-fillet) + 1.5px)),
      var(--edge-seam, none), var(--edge-sheen, none), var(--edge-fill);
    -webkit-mask: radial-gradient(circle var(--edge-fillet) at var(--c), transparent calc(var(--edge-fillet) - 0.5px), #000 var(--edge-fillet));
    mask: radial-gradient(circle var(--edge-fillet) at var(--c), transparent calc(var(--edge-fillet) - 0.5px), #000 var(--edge-fillet));
  }

  /* ── 트레이: 아래 변에 붙는다 · 필렛은 좌하·우하 바깥 ──
   *   bottom -1px: 붙는 변의 광연(패널 아랫변 1px)을 화면 밖으로 — 화면 끝에 선이 남지 않게. */
  body.shell-v2 dialog.tray { bottom: -1px; overflow: visible; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  /* 좌우 자리 — 왼쪽 레일(로고·도크, --sidebar-w 88px = 16 여백 + 56 레일 + 16)을 덮지 않는다(2026-09-18 오너 "로고에 침범 없게").
   *   트레이를 레일 오른쪽 영역 안에서 가운데로 두고(left = 레일 폭), 양옆에 필렛폭 + 8px 를 남겨 필렛이 레일·화면 끝에 닿지 않게 한다.
   *   --sidebar-w 가 없는 셸(작업실 등)에선 0 — 그땐 화면 전체 기준 가운데. */
  body.shell-v2 dialog.tray { left: var(--sidebar-w, 0px); right: 0; width: min(640px, 100% - var(--sidebar-w, 0px) - 2 * (var(--edge-fillet) + var(--sp-sm))); }
  body.shell-v2 dialog.tray.tray--wide { width: min(1440px, 100% - var(--sidebar-w, 0px) - 2 * (var(--edge-fillet) + var(--sp-sm))); height: calc(100dvh - var(--tray-top-gap) + 1px); }
  body.shell-v2 dialog.tray::before { left: calc(-1 * var(--edge-fillet)); bottom: 1px; --w: calc(var(--edge-fillet) + 1px); --c: 0 0;
    --edge-seam: linear-gradient(to left, var(--edge-seam-color) 1px, transparent 1px); }
  body.shell-v2 dialog.tray::after { right: calc(-1 * var(--edge-fillet)); bottom: 1px; --w: calc(var(--edge-fillet) + 1px); --c: 100% 0;
    --edge-seam: linear-gradient(to right, var(--edge-seam-color) 1px, transparent 1px); }
  body.shell-v2 dialog.tray.is-leaving { transform: translate3d(0, 100%, 0); }

  /* ── 라이브러리 시트: 오른쪽 변에 붙는다 · 필렛은 우상 위·우하 아래 ── */
  body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector {
    right: -1px; top: calc(var(--sp-sm) + var(--edge-fillet)); bottom: calc(var(--sp-sm) + var(--edge-fillet));
    max-width: calc(100% - var(--sp-sm)); overflow: visible; border-radius: var(--r-xl) 0 0 var(--r-xl);
  }
  body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector::before {
    right: 1px; top: calc(-1 * var(--edge-fillet)); --h: calc(var(--edge-fillet) + 1px); --c: 0 0;
    --edge-sheen: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
    --edge-seam: linear-gradient(to top, #0f0f0f 1px, transparent 1px);
  }
  body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector::after { right: 1px; bottom: calc(-1 * var(--edge-fillet)); --h: calc(var(--edge-fillet) + 1px); --c: 0 100%;
    --edge-seam: linear-gradient(to bottom, var(--edge-seam-color) 1px, transparent 1px); }
}