/* ─────────────────────────────────────────────────────────────────────────────
   42-v2-dock.css — 곁칸 **독**(web/v2/pane-dock.ts, #4443 원준 2026-09-30 → 10-01).
   서는 곳 둘: ④ 이음매(기본) — 세션과 곁칸 사이 경계선 위에 걸친 짧은 세로 유리 알약 · ③ 곁칸 아래 — 바닥에 떠 있는 유리 알약.
   macOS 독의 문법: 흐린 유리(blur + saturate) · 머리카락 테두리와 안쪽 빛 · 아이콘 그늘 · 작은 실행 점 · 꼬리 달린 이름표 · 확대 · 튀어 오르기.
   수치는 lib/pane-dock.ts DOCK_METRICS 와 짝이다 — 안 여백 6 · 바깥 여백 8 · 점 줄 6(점 4 + 사이 2) · 간격 4.
   (부품이 비키는 폭 · 알약 길이는 스크립트가 그 값으로 잰다 — 여기 숫자를 바꾸면 거기도 바꾼다.)
   토큰은 01-base · 90-dark 것만 쓴다(다크는 토큰이 알아서 따라온다).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 뿌리 = 크기 없는 «자리 점». 선반(알약)이 이 점에 매달린다 —
   이음매: 점이 알약 한가운데(경계선 위) · 곁칸 아래: 점이 알약 바닥 가운데.
   그래서 확대로 불어나도 양쪽으로 똑같이 번지고(가운데가 안 흔들린다) 스크립트는 점 하나만 박는다. ── */
.pn-dock { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; user-select: none; -webkit-user-select: none;
  --bx: 0; --by: -1; }
.pn-dock[hidden] { display: none; }
.pn-dock[data-home="seam"] { z-index: 8; --by: 0; --bx: 1; }   /* 세션 열(액자) · 분할선 위. 튀어 오르기는 곁칸 쪽으로(앱이 열리는 자리) */
.pn-dock[data-home="seam"][data-side="left"] { --bx: -1; }

/* ── 선반(알약) — 흐린 유리. ── */
.pn-dock-shelf { pointer-events: auto; position: absolute; left: 0; display: flex; gap: 4px; overflow: visible; cursor: grab;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  border: .5px solid color-mix(in srgb, var(--ink) 15%, transparent);
  box-shadow:
    inset 0 0 0 .5px color-mix(in srgb, var(--surface) 70%, transparent),   /* 안쪽 빛(유리 가장자리) */
    inset 0 1px 0 var(--gi-tile-line),
    0 14px 34px -10px rgba(var(--shadow-ink), .32),
    0 2px 6px rgba(var(--shadow-ink), .08);
  transition: box-shadow .2s, border-color .2s, scale .2s; }
/* 곁칸 아래 — 바닥 가운데에 매달려 위로 자란다. 모서리는 아이콘 크기를 따른다(아이콘이 커지면 둥근 정도도). */
/* 높이는 아이콘 한 줄로 고정(안 여백 6×2 + 아이콘 + 점 줄 6) — 확대한 아이콘은 선반 **위로 솟는다**(macOS: 독 바탕은 그대로, 아이콘만 커진다). */
.pn-dock[data-home="float"] .pn-dock-shelf { bottom: 0; translate: -50% 0; flex-direction: row; align-items: flex-end;
  box-sizing: border-box; height: calc(var(--dk-s, 40px) + 18px); padding: 6px 8px; border-radius: calc((var(--dk-s, 40px) + 12px) * .36); }
/* 이음매 — 경계선 위 한가운데, 세로 캡슐. 위아래 끝 여백이 손잡이(10px). */
/* 폭은 아이콘 한 줄로 고정 — 확대한 아이콘은 양옆(세션 쪽 · 곁칸 쪽)으로 똑같이 솟는다. */
.pn-dock[data-home="seam"] .pn-dock-shelf { top: 0; translate: -50% -50%; flex-direction: column; align-items: center;
  box-sizing: border-box; width: calc(var(--dk-s, 32px) + 12px); padding: 3px 6px 10px; border-radius: 999px; }
.pn-dock[data-home="seam"]:hover .pn-dock-shelf { border-color: color-mix(in srgb, var(--mint) 38%, var(--line-net)); }

/* ── 아이콘 하나 — 타일 + 점(떠 있는 탭 수, 최대 셋). ── */
.pn-dock-it { --m: 1; position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: default; }
.pn-dock-ic { display: block; flex: none; width: calc(var(--dk-s, 32px) * var(--m)); height: calc(var(--dk-s, 32px) * var(--m));
  transition: width .2s cubic-bezier(.2, .8, .3, 1), height .2s cubic-bezier(.2, .8, .3, 1), filter .12s; }
/* 확대 중엔 손을 따라 바로바로(짧게) — 손을 떼면 위 .2s 로 천천히 가라앉는다. */
.pn-dock.magging .pn-dock-ic { transition-duration: .06s; }
.pn-dock-ic .v2-gi { width: 100%; height: 100%;
  filter: drop-shadow(0 1px 1px rgba(var(--shadow-ink), .14)) drop-shadow(0 3px 6px rgba(var(--shadow-ink), .10)); }
.pn-dock .v2-gi-tile, .pn-dock-ghost .v2-gi-tile, .pn-dock-more .v2-gi-tile { fill: var(--gi-tile); stroke: var(--gi-tile-line); }
.pn-dock-it:hover .pn-dock-ic { filter: brightness(1.03); }
.pn-dock-it:active .pn-dock-ic { filter: brightness(.86); }   /* 누르는 동안 어두워진다(macOS) */
.pn-dock-it:focus-visible { outline: none; }
.pn-dock-it:focus-visible .pn-dock-ic { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 30%; }
/* 실행 점 — macOS 의 작은 점. 켜진 앱(곁칸에 지금 보이는 것)은 민트. */
.pn-dock-dots { display: flex; align-items: center; justify-content: center; gap: 3px; height: 4px; flex: none; }
.pn-dock-dots i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 48%, transparent); }
.pn-dock-it.on .pn-dock-dots i { background: var(--mint); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--mint-deep) 40%, transparent); }
.pn-dock-it.lifted { opacity: .22; }

/* 튀어 오르기 — 새로 열 때 두 번(크게 · 작게). 곁칸 아래는 위로, 이음매는 곁칸 쪽으로. */
@keyframes pn-dock-bounce {
  0%, 52%, 100% { transform: none; }
  22% { transform: translate(calc(var(--bx) * var(--dk-s, 32px) * .42), calc(var(--by) * var(--dk-s, 32px) * .42)); }
  74% { transform: translate(calc(var(--bx) * var(--dk-s, 32px) * .16), calc(var(--by) * var(--dk-s, 32px) * .16)); }
}
.pn-dock-it.bounce .pn-dock-ic { animation: pn-dock-bounce .82s cubic-bezier(.3, .6, .35, 1); }

/* ── 손잡이 — 이음매 독 맨 위의 짧은 가로 막대(macOS · iOS 시트의 손잡이). 잡고 끌면 독이 옮겨 간다(원준 10-01).
   잡는 자리는 알약 폭 전체 × 14px(막대보다 넉넉하게), 마우스를 올리면 막대가 진해지고 조금 길어진다, 끄는 동안 민트. ── */
.pn-dock-handle { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; height: 14px; cursor: grab;
  border-radius: 999px 999px 4px 4px; }
.pn-dock-handle i { display: block; width: 16px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 24%, transparent);
  transition: background .15s, width .15s cubic-bezier(.2, .8, .3, 1); }
.pn-dock-handle:hover i { width: 22px; background: color-mix(in srgb, var(--ink) 46%, transparent); }
.pn-dock.moving .pn-dock-handle i { width: 22px; background: var(--mint); }
.pn-dock-handle:active { cursor: grabbing; }
/* 곁칸 아래 독 — 알약 왼쪽 끝(알약이 시작하는 자리)에 같은 막대를 **세워** 단다(원준 10-02 «이음새 있을 때랑 똑같이»).
   잡는 자리는 14px × 알약 높이, 막대는 아이콘 높이의 가운데(아래 점 줄 6px 은 뺀다). 왼쪽 안 여백은 8 → 3 —
   이음매가 위 여백을 10 → 3 으로 줄인 것과 같다(v2/pane-dock HANDLE_FLOAT 과 짝). 서랍(.narrow)엔 손잡이가 없다. */
.pn-dock[data-home="float"]:not(.narrow) .pn-dock-shelf { padding-left: 3px; }
.pn-dock[data-home="float"] .pn-dock-handle { width: 14px; height: auto; padding-bottom: 6px; border-radius: 999px 4px 4px 999px; }
.pn-dock[data-home="float"] .pn-dock-handle i { width: 4px; height: 16px; transition: background .15s, height .15s cubic-bezier(.2, .8, .3, 1); }
.pn-dock[data-home="float"] .pn-dock-handle:hover i, .pn-dock[data-home="float"].moving .pn-dock-handle i { width: 4px; height: 22px; }

/* ── 구분선 — 고정한 앱 | 떠 있는 앱 | [더보기]. 손잡이이기도 하다(잡고 끌면 독이 옮겨 간다). ── */
.pn-dock-sep { flex: none; align-self: stretch; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.pn-dock[data-home="float"] .pn-dock-sep { width: 1px; margin: 5px 2px 9px; }
.pn-dock[data-home="seam"] .pn-dock-sep { height: 1px; margin: 2px 5px; }

/* ── 이름표 — 꼬리 달린 말풍선(macOS 독). 곁칸 아래는 아이콘 위, 이음매는 세션 쪽. --ax = 꼬리를 아이콘에 맞추는 어긋남. ── */
.pn-dock-tip { position: absolute; z-index: 40; pointer-events: none; padding: 5px 10px; border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(var(--shadow-ink), .22); animation: pn-dock-tip-in .14s ease-out; }
.pn-dock-tip[hidden] { display: none; }
.pn-dock-tip::after { content: ''; position: absolute; width: 9px; height: 9px; background: inherit; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 1.5px; rotate: 45deg; }
.pn-dock-tip[data-side="top"] { translate: -50% -100%; }
.pn-dock-tip[data-side="top"]::after { left: calc(50% + var(--ax, 0px)); bottom: -4px; margin-left: -4.5px; }
.pn-dock-tip[data-side="left"] { translate: -100% -50%; }
.pn-dock-tip[data-side="left"]::after { right: -4px; top: calc(50% + var(--ax, 0px)); margin-top: -4.5px; }
.pn-dock-tip[data-side="right"] { translate: 0 -50%; }
.pn-dock-tip[data-side="right"]::after { left: -4px; top: calc(50% + var(--ax, 0px)); margin-top: -4.5px; }
@keyframes pn-dock-tip-in { from { opacity: 0; transform: scale(.94); } }

/* ── 끌기 — 아이콘 조각 · 끼울 자리 · 독이 놓일 자리 ── */
html.pn-dock-dragging, html.pn-dock-dragging * { cursor: grabbing !important; user-select: none; }
html.pn-dock-dragging iframe, html.pn-dock-dragging webview { pointer-events: none !important; }   /* 액자 위에서 놓아도 끌기가 끝나게(탭 끌기와 같은 방어) */
.pn-dock-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(var(--shadow-ink), .3)); transition: opacity .15s; }
.pn-dock-ghost .v2-gi { display: block; width: 100%; height: 100%; }
.pn-dock-ghost.away { opacity: .5; }
.pn-dock-ghost.out { opacity: .6; }
.pn-dock-ghost.out::after { content: '−'; position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--muted-2); color: var(--bg); font-size: 14px; font-weight: 700; line-height: 1; }
@keyframes pn-dock-poof { to { scale: 1.8; opacity: 0; filter: blur(3px); } }
.pn-dock-ghost.poof { animation: pn-dock-poof .36s ease-out forwards; }
.pn-dock-caret { position: absolute; z-index: 3; border-radius: 1px; background: var(--blue); pointer-events: none; }
.pn-dock-caret[hidden] { display: none; }
.pn-dock-caret[data-v="0"] { top: 8px; bottom: 8px; width: 2px; margin-left: -1px; }
.pn-dock-caret[data-v="1"] { left: 8px; right: 8px; height: 2px; margin-top: -1px; }
.pn-dock.moving { z-index: 30; }
.pn-dock.moving .pn-dock-shelf { scale: 1.04; box-shadow: inset 0 1px 0 var(--gi-tile-line), 0 22px 50px -10px rgba(var(--shadow-ink), .36); }
.pn-dock.glide { transition: transform .4s cubic-bezier(.2, .9, .25, 1.04); }
.pn-dock-drop { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.pn-dock-preview { position: absolute; display: grid; place-items: center; border-radius: 18px;
  border: 2px dashed color-mix(in srgb, var(--mint) 70%, transparent); background: color-mix(in srgb, var(--mint) 9%, transparent);
  transition: left .14s ease, top .14s ease, width .14s ease, height .14s ease, border-radius .14s; }
.pn-dock-preview[data-home="seam"] { border-radius: 999px; }
/* 이음매 윤곽은 좁다(아이콘 한 줄) — 글은 윤곽 옆(세션 쪽)에 둔다. */
.pn-dock-preview[data-home="seam"] .pn-dock-preview-t { position: absolute; right: calc(100% + 10px); }
.pn-dock-preview-t { padding: 3px 9px; border-radius: 7px; background: var(--surface); color: var(--mint-deep); box-shadow: 0 2px 10px rgba(var(--shadow-ink), .14);
  font-size: 11.5px; font-weight: 650; white-space: nowrap; }

/* ── 더보기 — 모든 앱. 독 아이콘에서 부풀어 나온다(transform-origin = 그 아이콘 · 런치패드의 축소판). ── */
.pn-dock-more { position: absolute; z-index: 35; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  border: .5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 1px 0 var(--gi-tile-line), 0 26px 64px -12px rgba(var(--shadow-ink), .30), 0 4px 14px rgba(var(--shadow-ink), .10);
  transform-origin: var(--ox, 50%) var(--oy, 100%); opacity: 0; transform: scale(.86);
  transition: opacity .16s ease, transform .26s cubic-bezier(.2, .9, .25, 1.1); }
.pn-dock-more.open { opacity: 1; transform: none; }
.pn-dock-more.closing { opacity: 0; transform: scale(.92); transition-duration: .14s; }
.pn-dock-more-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; color: var(--muted-2); }
.pn-dock-more-q { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: .5px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink); font: inherit; font-size: 13px; }
.pn-dock-more-q:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.pn-dock-more-b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 12px; }
.pn-dock-more-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 2px 6px; }
.pn-dock-more-sh b { font-size: 12px; color: var(--ink); }
.pn-dock-more-sh .pn-fine { font-size: 11px; }
.pn-dock-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 4px; }
.pn-dock-tile { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px;
  border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.pn-dock-tile:hover, .pn-dock-tile:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.pn-dock-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.pn-dock-tile[disabled] { opacity: .45; cursor: not-allowed; }
.pn-dock-tile-ic { width: 44px; height: 44px; flex: none; transition: transform .14s cubic-bezier(.2, .8, .3, 1); }
.pn-dock-tile:hover .pn-dock-tile-ic { transform: translateY(-1px); }
.pn-dock-tile:active .pn-dock-tile-ic { transform: scale(.94); }
.pn-dock-tile-ic .v2-gi { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(var(--shadow-ink), .12)) drop-shadow(0 3px 6px rgba(var(--shadow-ink), .08)); }
.pn-dock-tile-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.25; text-align: center; }
.pn-dock-tile-dot { width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: transparent; }
.pn-dock-tile.run .pn-dock-tile-dot { background: color-mix(in srgb, var(--ink) 48%, transparent); }
/* 독에 고정한 앱 — 아이콘 어깨의 민트 점. */
.pn-dock-tile.pin::after { content: ''; position: absolute; top: 6px; left: calc(50% + 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--surface); }
.pn-dock-more-none { padding: 18px 4px; text-align: center; }
.pn-dock-more-f { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: .5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
/* 열릴 때 타일이 살짝 떠오른다(런치패드). */
@keyframes pn-dock-tile-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.pn-dock-more.open .pn-dock-more-grid { animation: pn-dock-tile-in .26s cubic-bezier(.2, .8, .3, 1) both; }

/* ── 앱 서랍 — 곁칸 탭 줄 [＋](v2/pane-drawer · 원준 10-05 «① 앱 서랍 + ② 의 키보드»). ⊞ 와 같은 유리 · 머리 · 타일을 그대로 쓴다.
   떠 있는 자리는 anchoredPopover(.dash-pop = position: fixed)가 정하고, 여기선 판 모양만. ⊞ 의 판(.pn-dock-more)은 독에 매달린
   absolute 라 그대로 못 쓴다 — 같은 값을 쓴다. ── */
.pn-adraw { width: min(316px, calc(100vw - 16px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  border: .5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 1px 0 var(--gi-tile-line), 0 26px 64px -12px rgba(var(--shadow-ink), .30), 0 4px 14px rgba(var(--shadow-ink), .10);
  transform-origin: 100% 0; animation: pn-adraw-in .22s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes pn-adraw-in { from { opacity: 0; transform: scale(.94); } }
.pn-adraw-b { padding: 2px 10px 8px; }
/* 고른 타일(설명이 가리키는 것 · 검색칸 Enter 의 과녁) — ⊞ 의 올림과 같은 바탕 */
.pn-adraw .pn-dock-tile[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* 이미 열린 앱 — 고르면 하나 더(⊞ 의 고정 점 자리에 ＋) */
.pn-adraw-plus { position: absolute; top: 4px; left: calc(50% + 13px); width: 17px; height: 17px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
/* 고른 앱 하나의 설명 — 발치 위 한 줄(종전엔 열 줄 모두 펼쳐 스크롤했다) */
.pn-adraw-desc { display: flex; align-items: flex-start; gap: 8px; margin: 0 10px 8px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 11.5px; line-height: 1.45; color: var(--ink-sub); }
.pn-adraw-desc b { color: var(--ink); white-space: nowrap; }
.pn-adraw-desc b:empty { display: none; }
.pn-adraw-f .btn-text { display: inline-flex; align-items: center; gap: 6px; }
.pn-adraw-flip { transform: scaleY(-1); }   /* «아래 칸» — 위 막대 창(window)을 뒤집어 아래 막대 */

/* ── 좁은 폭(서랍) — 끌기·확대 없음 ── */
.pn-dock.narrow .pn-dock-shelf { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .pn-dock, .pn-dock-ic, .pn-dock-shelf, .pn-dock-more, .pn-dock-preview, .pn-dock-tile-ic { transition: none !important; }
  .pn-dock-it.bounce .pn-dock-ic, .pn-dock-ghost.poof, .pn-dock-more.open .pn-dock-more-grid, .pn-dock-tip, .pn-adraw { animation: none !important; }
}