/* ─────────────────────────────────────────────────────────────────────────────
   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; }

/* ── 구분선 — 고정한 앱 | 떠 있는 앱 | [더보기]. 잡고 끌면 **크기**가 바뀐다(macOS 독의 구분선 · 원준 10-20 «사이즈 조절»).
   선은 1px 이고 상자는 5px(종전 선 1 + 양옆 여백 2 — 알약 길이 셈 SEP 9 그대로), 잡는 자리는 ::before 로 간격(4)까지 넓힌다.
   곁칸 아래는 위아래로(↕), 이음매는 경계선에서 멀어지는 쪽으로(↔) 끈다. 올리면 선이 진해진다. ── */
.pn-dock-sep { position: relative; flex: none; align-self: stretch; --sl: color-mix(in srgb, var(--ink) 16%, transparent); }
.pn-dock-sep::before { content: ''; position: absolute; inset: 0; }
.pn-dock-sep:hover, .pn-dock.sizing .pn-dock-sep { --sl: color-mix(in srgb, var(--ink) 42%, transparent); }
.pn-dock[data-home="float"] .pn-dock-sep { width: 5px; margin: 5px 0 9px; cursor: ns-resize;
  background: linear-gradient(to right, transparent 2px, var(--sl) 2px 3px, transparent 3px); }
.pn-dock[data-home="float"] .pn-dock-sep::before { inset: -5px -4px -9px; }
.pn-dock[data-home="seam"] .pn-dock-sep { height: 5px; margin: 0 5px; cursor: ew-resize;
  background: linear-gradient(to bottom, transparent 2px, var(--sl) 2px 3px, transparent 3px); }
.pn-dock[data-home="seam"] .pn-dock-sep::before { inset: -4px -5px; }
.pn-dock.narrow .pn-dock-sep { cursor: default; }
html.pn-dock-sizing, html.pn-dock-sizing * { user-select: none; }
html.pn-dock-sizing iframe, html.pn-dock-sizing webview { pointer-events: none !important; }
html.pn-dock-sizing:has(.pn-dock.sizing[data-home="float"]) * { cursor: ns-resize !important; }
html.pn-dock-sizing:has(.pn-dock.sizing[data-home="seam"]) * { cursor: ew-resize !important; }

/* ── 접힌 독(최소화 — 원준 10-20 «핸들 부분 더블클릭해서 최소화») — 손잡이 하나만 남은 작은 유리 알약.
   이음매는 경계선 위의 세로 알약(14×44), 곁칸 아래는 바닥의 가로 알약(44×14). 막대는 알약 길이 방향으로 눕는다.
   누르면 펼치고 끌면 옮긴다(손 모양은 잡는 손). 수치는 lib/pane-dock.ts DOCK_MIN 과 짝. ── */
.pn-dock.min .pn-dock-shelf { padding: 0; gap: 0; align-items: stretch; justify-content: center; }
.pn-dock.min[data-home="seam"] .pn-dock-shelf { width: 14px; height: 44px; }
.pn-dock.min[data-home="float"] .pn-dock-shelf { width: 44px; height: 14px; padding: 0; border-radius: 999px; }
.pn-dock.min .pn-dock-handle { flex: 1; width: auto; height: auto; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit;
  border-radius: 999px; cursor: grab; }
.pn-dock.min .pn-dock-handle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-dock.min[data-home="seam"] .pn-dock-handle i { width: 4px; height: 20px; }
.pn-dock.min[data-home="seam"] .pn-dock-handle:hover i { width: 4px; height: 26px; }
.pn-dock.min[data-home="float"] .pn-dock-handle i { width: 20px; height: 4px; }
.pn-dock.min[data-home="float"] .pn-dock-handle:hover i { width: 26px; height: 4px; }
.pn-dock.min.moving .pn-dock-handle i { background: var(--mint); }

/* ── 이름표 — 꼬리 달린 말풍선(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)을 뒤집어 아래 막대 */

/* ── #5319 머리 줄 독(넓은 화면) — 곁칸 맨 위 줄에 가로로 선 앱 줄(원준 2026-11-04 «독이랑 위에 하나로 합치자»).
   4차(원준 2026-11-05): ① 줄 높이 = 세션 머리줄 높이(--pn-bighead-h, 36-chat.css 큰 머리) — 두 열의 아랫선이 한 줄로 잇는다.
   ② 아이콘은 지금의 유리 타일 그대로 키우고(40~56, pane-dock.ts SIZE.top) 이름표를 아래에 단다(15px/500 · 켜진 앱 = 굵게 + 밑줄 3px —
      색만으로 말하지 않는다, KRDS 탭). ③ 아이콘 둘레의 선반(유리 알약)은 없다(«독 상자가 또 있을 필요 없음. 정신 사납잖아»).
   줄 = [앱 칸들] … [열린 탭 ∨(한 앱이 둘 넘게 떴을 때만)] [＋]. 탭 띠 · 접기는 감춘다 — 독의 아이콘 · 문패의 접기(⌘⌥B)가 같은 일을 한다.
   줄 안의 붙박이라 손잡이 · 끌어 옮기기 · 확대 · 접기 · 크기 끌기가 없다(아이콘 순서 끌기 · 끌어내 빼기는 된다).
   좁은 폭(서랍)은 종전대로 탭 줄 + 바닥 독. ── */
.pn-dock-slot { display: none; }
.pn-dock-lb { display: none; }
.pn-pane.dock-top > .pn-tabbar { height: var(--pn-bighead-h, 113px); min-height: 0; align-items: flex-end; gap: 4px; padding: 0 8px; }
.pn-pane.dock-top > .pn-tabbar > .pn-tabs { display: none; }
.pn-pane.dock-top > .pn-tabbar > .pn-dock-slot { display: flex; align-self: stretch; align-items: flex-end; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pn-pane.dock-top > .pn-tabbar > .pn-tabtail { flex: 0 0 auto; align-self: stretch; align-items: center; justify-content: flex-end; gap: 2px;
  margin-left: auto; padding: 16px 0 41px; }   /* 아래 41 = 이름표 줄(12 + 23 + 6) — [＋] 가 아이콘 줄 가운데에 선다 */
.pn-pane.dock-top .pn-tab-more { display: inline-flex; width: 40px; height: 40px; border-radius: 8px; }
.pn-pane.dock-top .pn-tab-add { width: 40px; height: 40px; border-radius: 8px; }
.pn-pane.dock-top .pn-tab-more svg, .pn-pane.dock-top .pn-tab-add svg { width: 20px; height: 20px; }
/* ── #5319 독 아래 탭 줄 — 둘 이상 떠 있는 앱의 탭만(panes.ts paintPane dock-sub) ──────────────────────────────
   2026-11-05: 뷰어를 여럿 띄우면 독의 [뷰어] 한 칸이 돌아가며 보여 줄 뿐 그 파일을 골라 갈 수 없었다 · «가시성 감안해서 탭 사이즈가 충분히 크게».
   독 줄 높이(--pn-bighead-h)는 그대로 — 이 줄의 윗선이 세션 머리줄 아랫선과 한 줄로 잇는다. 격자로 세운다(flex-wrap 이면 독 아이콘이
   많을 때 [＋] 가 둘째 줄로 떨어진다). 탭은 KRDS 크기: 높이 40 · 글자 15/500 · 아이콘 18. 쉴 때는 글자만, 켜진 탭 = 굵게 + 밑줄 3px
   (독 이름표와 같은 말 — 색만으로 말하지 않는다). 아이콘으로 접지 않고 이름을 남긴 채 미끄러진다(lib/pane-tabs SUB_TAB_METRICS). */
.pn-pane.dock-top.dock-sub > .pn-tabbar { display: flex; flex-wrap: wrap; align-items: stretch; align-content: flex-start;
  height: auto; column-gap: 4px;
  background: linear-gradient(var(--line), var(--line)) 0 calc(var(--pn-bighead-h, 113px) - 1px) / 100% 1px no-repeat, var(--bg); }   /* 두 줄 사이 선 — 줄 끝 흐림(mask)에 같이 흐려지지 않게 바탕에 긋는다 */
/* 두 줄은 서로의 폭을 나눠 갖지 않는다(격자였을 땐 아래 줄 단추 폭만큼 위 독이 좁아져 아이콘이 잘렸다) — 줄을 바꾸는 flex 에 빈 칸 하나로 줄을 끊는다. */
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-dock-slot { order: 0; flex: 1 1 0; min-width: 0; height: calc(var(--pn-bighead-h, 113px) - 1px); }
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabtail { order: 0; flex: none; height: calc(var(--pn-bighead-h, 113px) - 1px); }
.pn-pane.dock-top.dock-sub > .pn-tabbar::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs { display: flex; order: 2; flex: 1 1 0; min-width: 0; height: 53px; margin: 0 0 0 -8px; padding: 1px 4px 0 8px; gap: 4px;
  align-items: stretch; }
/* 3안(원준 2026-11-06 — 1안 «줄 바꿈» 은 파일이 늘수록 세로를 먹었다): 한 줄 52 = 탭 40 + 위아래 6. 넘치면 옆으로 미끄러지고(끝은 흐림)
   [n ▾] 목록이 전부를 말한다. 뷰어의 이름 줄은 걷혀 이 줄이 그 자리를 대신한다(panes.ts dockViewerBar). */
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs { flex-wrap: nowrap; align-content: normal; row-gap: 0; overflow-x: auto; overflow-y: hidden;
  max-height: none; }
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs > .pn-tabwrap { height: 40px; max-width: none; }
/* 줄 오른쪽 끝 — [n ▾] · 켜진 뷰어의 단추들 · [⋯](좁을 때). 폭은 곁칸 머리 줄 폭으로 잰다(pnsidebar). */
.pn-pane.dock-top > .pn-tabbar { container: pnsidebar / inline-size; }
.pn-sub-acts { display: none; }
.pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-sub-acts { display: flex; order: 3; flex: none; height: 53px; align-items: center; gap: 4px; min-width: 0; padding: 1px 0 0 4px; }
.pn-sub-listslot, .pn-sub-barslot { display: contents; }
.pn-sub-acts .pn-ed-bar { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; min-width: 0; }
.pn-sub-acts .pn-ed-name { display: none; }   /* 이름은 탭이 말한다 */
.pn-sub-acts .pn-web-btn.ic, .pn-sub-acts .pn-sub-more { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.pn-sub-acts .pn-web-btn.ic, .pn-sub-acts .pn-sub-fold, .pn-sub-acts .pn-sub-more { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.pn-sub-acts .pn-web-btn.ic .pn-i, .pn-sub-acts .pn-sub-more .pn-i { width: 16px; height: 16px; }
.pn-sub-acts .pn-web-btn.ic .pn-i, .pn-sub-acts .pn-sub-fold .pn-i, .pn-sub-acts .pn-sub-more .pn-i { width: 16px; height: 16px; }
.pn-sub-acts .pn-sub-more[hidden] { display: none; }
.pn-pane.dock-top .pn-sub-acts .pn-tab-more.pn-sub-list { display: inline-flex; align-items: center; gap: 2px; width: auto; height: 34px; padding: 0 6px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.pn-pane.dock-top .pn-sub-acts .pn-tab-more.pn-sub-list svg { width: 14px; height: 14px; }
/* 넓으면 단추가 늘어서고 [⋯] 는 없다 · 좁으면(머리 줄 520 미만) 아이콘 단추를 [⋯] 하나로 접는다. 고치는 중의 [← 보기] · [저장](글자 단추)은 늘 선다. */
.pn-sub-acts .pn-sub-more { display: none; }
/* [⋯] 도 아이콘 단추(.pn-web-btn.ic)라 위 크기 규칙(0,3,0)이 «넓을 땐 숨김» 을 이겼다(실측 600px 에서 [⋯] 가 단추들과 같이 섰다) — 한 단 높여 숨긴다. */
.pn-sub-acts .pn-web-btn.ic.pn-sub-more { display: none; color: var(--ink-sub); }
@container pnsidebar (max-width: 519px) {
  .pn-sub-acts .pn-web-btn.ic.pn-sub-more:not([hidden]) { display: inline-flex; }
}
@container pnsidebar (max-width: 519px) {
  .pn-sub-acts .pn-ed-bar .pn-web-btn.ic { display: none; }
  .pn-sub-acts .pn-ed-bar .pn-sub-fold { display: none; }
  .pn-sub-acts .pn-ed-bar .pn-fine { display: none; }
  .pn-sub-acts .pn-sub-more:not([hidden]) { display: inline-flex; }
}
/* 자리를 비워 두는 것은 켜진 탭뿐 — 다른 탭은 이름만큼(좁은 곁칸에서 한 개라도 더 보이게). 올리면 × 가 이름 끝 위에 바탕색 조각을 깔고 선다. */
.pn-pane.dock-top.dock-sub .pn-tabwrap:not(.on) .pn-tab { padding-right: 14px; }
.pn-pane.dock-top.dock-sub .pn-tabwrap:not(.on) .pn-tab-x { background: var(--bg-punch); box-shadow: -8px 0 8px var(--bg-punch); }
/* 파일 탭의 × — 탭 **오른쪽 끝**(크롬 · VS Code). 왼쪽 아이콘 자리에 두니 켜진 탭의 × 가 앞 탭 이름 바로 뒤에 붙어 «앞 탭의 ×» 로
   읽혔다(실측). 켜진 탭은 늘 보이고(지금 보는 것을 어디서 닫는지) 다른 탭은 올리면 — 자리는 늘 비워 둬 올려도 이름이 밀리지 않는다.
   마우스로 닫으면 오른쪽 탭이 닫힌 탭의 폭을 물려받아 그 × 가 바로 커서 밑에 온다(panes.ts closeTab — 연달아 닫기). 아이콘은 늘 선다. */
.pn-pane.dock-top.dock-sub .pn-tabwrap.on .pn-tab-x { opacity: 1; pointer-events: auto; }
.pn-pane.dock-top.dock-sub .pn-tabwrap.on:has(.pn-tab-x) .pn-tab-lead { visibility: visible; }
.pn-pane.dock-top.dock-sub .pn-tabwrap:hover:has(.pn-tab-x) .pn-tab-lead, .pn-pane.dock-top.dock-sub .pn-tabwrap:has(.pn-tab:focus-visible):has(.pn-tab-x) .pn-tab-lead { visibility: visible; }
.pn-pane.dock-top.dock-sub .pn-tab-x:hover { background: var(--bg-punch); color: var(--ink); }
/* 옆으로 미는 줄의 잘린 쪽 끝 = 흐림(panes.ts edgeFade) — 반쯤 잘린 이름표가 깨진 것이 아니라 «더 있다» 로 읽힌다. */
.pn-pane.dock-top > .pn-tabbar > .pn-dock-slot.fade-r, .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.pn-pane.dock-top > .pn-tabbar > .pn-dock-slot.fade-l, .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs.fade-l {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.pn-pane.dock-top > .pn-tabbar > .pn-dock-slot.fade-l.fade-r, .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.pn-pane.dock-top > .pn-tabbar > .pn-tabs > .pn-tabwrap.pn-sub-off { display: none; }
.pn-pane.dock-top.dock-sub > .pn-tabbar:not(.shrunk):not(.has-more) .pn-tab-more { display: none; }
.pn-pane.dock-top > .pn-tabbar.has-more > .pn-tabtail { box-shadow: none; }
.pn-pane.dock-top.dock-sub .pn-tabwrap { height: auto; margin: 6px 0; border-radius: 6px; background: none; box-shadow: none; }
.pn-pane.dock-top.dock-sub .pn-tabwrap:hover { background: var(--bg-punch); }
.pn-pane.dock-top.dock-sub .pn-tabwrap.on { background: none; box-shadow: none; }
.pn-pane.dock-top.dock-sub .pn-tabwrap.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -6px; height: 3px;
  border-radius: 2px 2px 0 0; background: var(--ink); pointer-events: none; }
.pn-pane.dock-top.dock-sub .pn-tab { gap: 8px; padding: 0 40px 0 10px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-sub); }
.pn-pane.dock-top.dock-sub .pn-tabwrap:hover .pn-tab { color: var(--ink); }
.pn-pane.dock-top.dock-sub .pn-tabwrap.on .pn-tab { font-weight: 700; color: var(--ink); }
.pn-pane.dock-top.dock-sub .pn-tabwrap.pinned .pn-tab { gap: 8px; padding: 0 12px 0 10px; justify-content: flex-start; }
.pn-pane.dock-top.dock-sub .pn-tabwrap.pinned .pn-tab-t { display: block; }
.pn-pane.dock-top.dock-sub .pn-tab-lead { width: 26px; height: 26px; border-radius: 8px; }
.pn-pane.dock-top.dock-sub .pn-tab-lead .pn-i.sm { width: 18px; height: 18px; }
.pn-pane.dock-top.dock-sub .pn-tab-x { left: auto; right: 8px; margin-top: -13px; width: 26px; height: 26px; border-radius: 7px; }
.pn-pane.dock-top.dock-sub .pn-tab-x .pn-i { width: 14px; height: 14px; }
.pn-dock[data-home="top"] .pn-dock-shelf:empty { display: none; }
.pn-dock[data-home="top"] { position: relative; width: auto; height: 100%; pointer-events: auto; }
.pn-dock[data-home="top"] .pn-dock-shelf { position: relative; left: auto; height: 100%; flex-direction: row; align-items: flex-end; gap: 0; cursor: default;
  padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.pn-dock[data-home="top"] .pn-dock-it { width: calc(var(--dk-s, 56px) + 8px); gap: 6px; padding: 0 0 12px; cursor: pointer; }
.pn-dock[data-home="top"] .pn-dock-dots { display: none; }
.pn-dock[data-home="top"] .pn-dock-lb { display: block; max-width: none; white-space: nowrap;
  font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--ink-sub); }
.pn-dock[data-home="top"] .pn-dock-it:hover .pn-dock-lb { color: var(--ink); }
.pn-dock[data-home="top"] .pn-dock-it.on .pn-dock-lb { font-weight: 700; color: var(--ink); }
.pn-dock[data-home="top"] .pn-dock-it.on::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px;
  border-radius: 2px 2px 0 0; background: var(--ink); }
.pn-dock[data-home="top"] .pn-dock-it:focus-visible .pn-dock-ic { border-radius: 12px; }
.pn-dock[data-home="top"] .pn-dock-sep { align-self: center; width: 9px; height: 40px; margin: 0 0 40px; cursor: default;
  background: linear-gradient(to right, transparent 4px, var(--line-net) 4px 5px, transparent 5px); }
/* 새로 열 때 — 줄 밖으로 튀지 않고 제자리에서 살짝 부푼다(알약 안 여백 안에서). */
@keyframes pn-dock-pop { 0%, 100% { transform: none; } 35% { transform: scale(1.14); } 70% { transform: scale(.97); } }
.pn-dock[data-home="top"] .pn-dock-it.bounce .pn-dock-ic { animation: pn-dock-pop .5s cubic-bezier(.3, .6, .35, 1); }
.pn-dock-tip[data-side="bottom"] { translate: -50% 0; }
.pn-dock-tip[data-side="bottom"]::after { left: calc(50% + var(--ax, 0px)); top: -4px; margin-left: -4.5px; }

/* ── 좁은 폭(서랍) — 끌기·확대 없음 ── */
.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[data-home="top"] .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; }
}

/* ── #5319 A안(원준 2026-11-06 «독 자체의 아이콘은 이쁜거같음. 근데 사이즈가 너무 커지니까 어색» · «평상시에는 이름 안 써 있다가 호버하면 드러나게») ──
   머리 줄 독을 반으로: 타일 56 → 44(안 아이콘 22, pane-dock.ts SIZE.top) · 이름표는 평소 없음 — 올리면(키보드 초점도) 아래로 말풍선(.pn-dock-tip,
   data-side=bottom) · 켜진 앱은 타일 아래 밑줄(색만으로 말하지 않는다). 독 줄 = 8 + 44 + 8 = 60. 파일 줄(53)이 있으면 60 + 53 = 113 —
   세션 머리줄(--pn-bighead-h)과 두 열의 아랫선이 다시 한 줄이다. 파일 줄이 없으면 줄은 113 그대로 두고 타일을 세로 가운데에 — 아랫선을 지킨다.
   ⚠ 위 [data-home="top"] 규칙(타일 56 · 이름표 15px)은 그대로 두고 여기서 덮는다(check-css-drops — 셀렉터 목록을 고치지 않는다). */
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-lb { display: none; }
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it { width: calc(var(--dk-s, 44px) + 8px); gap: 0; padding: 0 0 8px; }
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it .pn-dock-ic { transition: width .2s cubic-bezier(.2, .8, .3, 1), height .2s cubic-bezier(.2, .8, .3, 1), filter .12s, translate .12s; }
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it:hover .pn-dock-ic { translate: 0 -1px; filter: brightness(1.05); }   /* 이름이 없으니 손이 닿았다는 표시를 조금 더 */
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it.on::after { left: 8px; right: 8px; }
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-sep { align-self: flex-end; height: 24px; margin: 0 0 18px; }   /* 타일(아래 8 ~ 52) 가운데 30 에 맞춘다 */
/* 파일 줄이 없는 때 — 줄 113 안에서 타일 · [＋] 세로 가운데 */
.pn-wrap .pn-pane.dock-top:not(.dock-sub) > .pn-tabbar { align-items: center; }
.pn-wrap .pn-pane.dock-top:not(.dock-sub) > .pn-tabbar > .pn-dock-slot { align-items: center; }
.pn-wrap .pn-pane.dock-top:not(.dock-sub) .pn-dock[data-home="top"] .pn-dock-shelf { align-items: center; }
/* 파일 줄이 있는 때 — 독 줄 60(선 1 포함) + 파일 줄 53 = 113 */
/* 높이(#5319 손잡이, 42-v2-panes.css 머리말) — 독 줄 --pn-dock-row = H - 1(선) 로 **세션 머리줄과 같은 높이**, 타일은 그 안 세로 가운데.
     탭 줄(53 · 탭 40)은 그 **선 아래로 늘어진다**(원준 2026-11-06 «탭 라인 하단을 옆 가로선에 맞추지 말고 탭 라인 상단을 맞추고 탭은 더 밑으로 늘어져도 돼»)
     — 처음(A안)엔 독 60 + 탭 53 = 113 으로 탭 줄 아랫선을 세션 머리줄 아랫선에 맞췄는데, 그러면 독 줄이 머리줄보다 낮아 선이 어긋나 보였다.
     타일 = min(폭이 정한 --pn-dk-s, 독 줄 - 15) — 80~150 어디서나 44. */
.pn-wrap .pn-pane.dock-top { --pn-dock-row: calc(var(--pn-bighead-h, 113px) - 1px); --pn-dk-cap: calc(var(--pn-dock-row) - 15px); --pn-dk-t: min(var(--pn-dk-s, 44px), var(--pn-dk-cap)); --pn-file-row: 53px; --pn-tab-h: 40px; }
.pn-wrap .pn-pane.dock-top.dock-sub { --pn-dock-row: calc(var(--pn-bighead-h, 113px) - 1px); --pn-file-row: 53px; --pn-dk-cap: calc(var(--pn-dock-row) - 15px); --pn-tab-h: 40px; }
.pn-wrap .pn-pane.dock-top > .pn-tabbar { position: relative; }   /* 손잡이(.pn-head-grip) 자리 */
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it .pn-dock-ic { width: calc(var(--pn-dk-t) * var(--m)); height: calc(var(--pn-dk-t) * var(--m)); }
.pn-wrap .pn-pane.dock-top .pn-dock[data-home="top"] .pn-dock-it { width: calc(var(--pn-dk-t) + 8px); }
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar { background-position: 0 var(--pn-dock-row), 0 0; row-gap: 0; }   /* 두 줄 사이 선 · 줄 사이 틈 없음(실측: gap 4 가 줄끊기 ::after 앞뒤로 두 번 들어가 67 이었다) */
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-dock-slot { height: var(--pn-dock-row); align-items: center; }   /* 탭 줄이 있어도 타일은 독 줄 세로 가운데 */
.pn-wrap .pn-pane.dock-top.dock-sub .pn-dock[data-home="top"] .pn-dock-shelf { align-items: center; }
/* [＋] 꼬리 — 단추(40) 가운데를 타일 가운데에: 타일(아래 여백 8)이 줄 가운데보다 4 위 → 꼬리도 아래 8. 두 상태 같다. */
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabtail { box-sizing: border-box; height: var(--pn-dock-row); align-items: center; padding: 0 0 8px; }
.pn-wrap .pn-pane.dock-top:not(.dock-sub) > .pn-tabbar > .pn-tabtail { box-sizing: border-box; align-items: center; padding: 0 0 8px; }   /* 옛 규칙의 위 16 도 걷는다 */
/* 손잡이 — 탭 줄이 있으면 독 줄 아랫선(= 세션 머리줄 아랫선) 위에 눕는다(탭 줄 바닥이 아니라). */
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-head-grip { bottom: auto; top: calc(var(--pn-dock-row) - 5px); }
/* 파일 줄 — 높이 · 탭 높이가 사다리를 따른다(기본 53 · 40 은 위 3안 규칙 그대로) */
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs { height: var(--pn-file-row); }
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-sub-acts { height: var(--pn-file-row); }
.pn-wrap .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs > .pn-tabwrap { height: var(--pn-tab-h); margin-block: calc((var(--pn-file-row) - 1px - var(--pn-tab-h)) / 2); }


/* ── #5319 ② 탭 줄을 머리 높이 안으로(원준 2026-11-06 «세로로 공간 차지가 너무 길다 · 위쪽에 넣으면 앱 아이콘이 너무 작아질 텐데» → «추천으로») ──
   독 줄 112 안에서 타일(52 + 밑줄 8 = 60)은 60 만 쓰고 위아래 30 씩 비어 있었다 — 그 여백을 탭 줄에 준다. 기본 113 에서:
   독 줄 68(위 여백 8 + 타일 52 + 밑줄 8) + 탭 줄 44(탭 34 · 위 3 아래 7 — 켜진 탭 밑줄 3 이 줄 바닥에 닿는다) = 112 + 선 1 = 113.
   타일은 그대로 52(--pn-dk-cap 은 독 줄 - 8 — 위 여백은 슬롯이 맡는다). 두 줄 사이 선은 긋지 않는다 — 오른쪽 가로선은 세션 머리 아랫선
   하나뿐이라 선이 어긋날 데가 없다(처음 A안은 60 에 선이 하나 더 있어 «선이 어긋나 보였다»). 손잡이는 다시 그 아랫선 위(bottom 0).
   머리를 키우면(~150) 슬롯 안에서 타일이 가운데로 — 왼쪽 제목 줄 가운데(두 줄을 가운데 맞춘 큰 머리)와 같이 내려간다(150: 둘 다 52.5).
   105 아래로 줄이면 두 줄이 못 들어가므로 .pn-wrap.hd-hang(head-grip.ts HANG_BELOW) — 위 규칙 그대로(독 줄 = H-1 · 탭 줄 53 은 선 아래).
   105~112 는 위 여백이 8 → 0 으로 줄어 맞춘다. */
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub { --pn-file-row: 44px; --pn-tab-h: 34px; --pn-dock-row: calc(var(--pn-bighead-h, 113px) - 1px - var(--pn-file-row)); --pn-dk-cap: calc(var(--pn-dock-row) - 8px); }
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub > .pn-tabbar { background-image: none; }
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-dock-slot { box-sizing: border-box; padding-top: clamp(0px, calc(var(--pn-bighead-h, 113px) - 105px), 8px); }
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabtail { padding-top: clamp(0px, calc(var(--pn-bighead-h, 113px) - 105px), 8px); }
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-tabs > .pn-tabwrap { margin-block: 3px 7px; }
.pn-wrap:not(.hd-hang) .pn-pane.dock-top.dock-sub > .pn-tabbar > .pn-head-grip { top: auto; bottom: 0; }