/* 리퀴드 글래스 도크: 소재만 변경하고 기존 탐색·제스처 구조는 유지한다. */
:root { --sidebar-width: 128px; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }
.site-dock { --dock-surface: rgb(28 28 30 / .78); --dock-reflection: linear-gradient(145deg, rgb(255 255 255 / .085), rgb(255 255 255 / .015) 48%, rgb(255 255 255 / .04)); --dock-selection: linear-gradient(145deg, rgb(255 255 255 / .19), rgb(255 255 255 / .10)); --dock-selection-edge: inset 0 0 0 1px rgb(255 255 255 / .15), inset 0 1px 0 rgb(255 255 255 / .1); position: fixed; top: 50%; left: max(24px, env(safe-area-inset-left)); z-index: 20; width: 86px; margin: 0; padding: 12px 11px; border: 0; border-radius: 48px; background-color: var(--dock-surface); background-image: var(--dock-reflection); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), inset 0 1px 0 rgb(255 255 255 / .1), 0 12px 36px rgb(0 0 0 / .32); transform: translateY(-50%); user-select: none; -webkit-user-select: none; }
.site-dock { opacity: 1; }
.site-dock[data-motion-ready] { transition: transform 180ms var(--ease-out), opacity 125ms var(--ease-out); }
.site-dock[data-scroll-hidden] { opacity: 0; pointer-events: none; transform: translate(calc(-100% - max(24px, env(safe-area-inset-left))), -50%); }
.site-dock[data-keyboard-reveal] { transition: none; }
.dock-tabs[data-scrubbing], .dock-tabs[data-scrubbing] * { cursor: grabbing; }
.dock-tabs[data-scrubbing] .dock-tab, .dock-tabs[data-scrubbing] .dock-indicator { transform-origin: center; transition: none; }
.dock-tabs[data-scrubbing] .dock-tab { transform: none; }
.dock-tabs[data-scrubbing] .dock-tab-label { opacity: 0; }
.dock-tabs[data-scrubbing] .dock-tab > svg { stroke-width: 1.8; }
.dock-tabs[data-scrubbing] .dock-tab[data-drag-preview] > svg { stroke-width: 2; }
.dock-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dock-tabs { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; touch-action: none; }
.dock-tab, .dock-profile { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 28px; background: transparent; color: #f5f5f5; font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.dock-tab > svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.dock-tab[aria-selected="true"] { color: #fff; background: var(--dock-selection); box-shadow: var(--dock-selection-edge); }
.dock-tab[aria-selected="true"] > svg { stroke-width: 2; }
.dock-tab:focus-visible, .dock-profile:focus-visible { outline: 2px solid #d9dde1; outline-offset: 2px; }
/* 터치·마우스로 만든 포커스에는 원을 그리지 않고 키보드 포커스는 유지한다. */
.site-dock[data-pointer-input] :is(.dock-tab, .dock-profile):focus-visible { outline: none; }
.dock-tab:active, .dock-profile:active { transform: scale(.94); }
.dock-tab-label, .dock-tip { position: absolute; left: calc(100% + 22px); top: 50%; display: flex; align-items: center; gap: 12px; width: max-content; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 10px; background: #171717; color: #f1f1f1; font-size: .75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity 125ms var(--ease-out); }
.dock-tab-label small { color: #aaa; font-size: .65rem; font-variant-numeric: tabular-nums; }
.dock-tab:focus-visible .dock-tab-label, .dock-profile:focus-visible .dock-tip { opacity: 1; transition: none; }
.site-dock[data-pointer-input] :focus-visible :is(.dock-tab-label, .dock-tip) { opacity: 0; }
.dock-tab-label[data-instant], .dock-tip[data-instant] { transition: none; }
.dock-footer { position: relative; margin-top: 10px; padding-top: 10px; border: 0; }
.dock-profile img { display: block; width: 34px; height: 34px; padding: 0; object-fit: cover; border: 0; border-radius: 50%; background: #111; pointer-events: none; }
.dock-profile[aria-selected="true"] { background: var(--dock-selection); box-shadow: var(--dock-selection-edge); color: #fff; }
.dock-tabs.has-indicator .dock-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.dock-indicator { position: absolute; top: 0; left: 0; width: 64px; height: 52px; border: 0; border-radius: 28px; background: var(--dock-selection); box-shadow: var(--dock-selection-edge); pointer-events: none; will-change: transform; }
.dock-indicator[hidden] { display: none; }
.dock-indicator.is-animated { transition: transform 200ms var(--ease-in-out); }
.dock-rail-cues, .dock-rail-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dock-tab:not([aria-selected="true"]):hover { background: rgb(255 255 255 / .07); }
  .dock-tab:hover .dock-tab-label, .dock-profile:hover .dock-tip { opacity: 1; }
  .dock-profile:not([aria-selected="true"]):hover { background: rgb(255 255 255 / .07); }
}
@media (max-width: 900px) {
  body { padding-left: 0; }
  main, main:has(.writeup:not([hidden])) { padding-top: calc(2.5rem + env(safe-area-inset-top)); padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
  /* 참고 이미지의 5칸·가로형 선택 배경 비율을 화면 너비에 맞춘다. */
  .site-dock { --dock-width: min(460px, calc(100vw - 24px)); --dock-height: clamp(56px, calc((100vw - 24px) / 6.7), 68px); --dock-slot: calc((var(--dock-width) - 12px) / 5); --dock-control: calc(var(--dock-height) - 12px); display: flex; align-items: center; gap: 0; top: auto; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: var(--dock-width); height: var(--dock-height); padding: 6px; border-radius: 999px; transform: translateX(-50%); }
  .site-dock[data-scroll-hidden] { transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom))); }
  .dock-tabs { flex: 0 0 calc(var(--dock-slot) * 4); width: calc(var(--dock-slot) * 4); min-width: 0; height: var(--dock-control); flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: 999px; }
  .dock-tab, .dock-profile { width: var(--dock-slot); height: var(--dock-control); border-radius: 999px; }
  .dock-tab > svg { width: clamp(24px, calc(var(--dock-height) * .42), 28px); height: clamp(24px, calc(var(--dock-height) * .42), 28px); }
  .dock-tabs .dock-tab-label { display: none; }
  .dock-tabs .dock-tab:focus-visible { outline-offset: -3px; }
  .dock-footer { display: flex; gap: 0; margin: 0; padding: 0; border: 0; }
  .dock-indicator { background: transparent; border-radius: 999px; box-shadow: none; }
  .dock-indicator::before { content: ""; position: absolute; inset: 0 clamp(0px, calc((100vw - 320px) / 17.5), 4px); border-radius: inherit; background: var(--dock-selection); box-shadow: var(--dock-selection-edge); }
  .dock-profile[aria-selected="true"] { background: transparent; box-shadow: none; }
  .dock-profile[aria-selected="true"]::before { content: ""; position: absolute; inset: 0 clamp(0px, calc((100vw - 320px) / 17.5), 4px); border-radius: inherit; background: var(--dock-selection); box-shadow: var(--dock-selection-edge); }
  .dock-tab-label, .dock-tip { left: 50%; top: auto; bottom: calc(100% + 20px); transform: translateX(-50%); }
  .dock-profile img { position: relative; width: clamp(26px, calc(var(--dock-height) * .42), 30px); height: clamp(26px, calc(var(--dock-height) * .42), 30px); }
  .dock-rail-cues { position: absolute; z-index: 2; top: 6px; left: 6px; right: calc(var(--dock-slot) + 6px); display: block; height: var(--dock-control); pointer-events: none; }
  .dock-rail-cues svg { position: absolute; top: calc(50% - 5px); width: 7px; height: 10px; fill: none; stroke: #888; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  .dock-rail-cue-left { left: 1px; }
  .dock-rail-cue-right { right: 1px; }
  .site-dock[data-rail-left] .dock-rail-cue-left, .site-dock[data-rail-right] .dock-rail-cue-right { opacity: 1; }
  .site-dock:has(.dock-tabs[data-scrubbing]) .dock-rail-cues { visibility: hidden; }
  .site-dock[data-show-rail-hint] .dock-rail-hint { position: absolute; bottom: calc(100% + 8px); left: 6px; display: block; width: calc(var(--dock-slot) * 4); margin: 0; color: #888; font-size: .64rem; font-weight: 400; line-height: 1.5; letter-spacing: .01em; text-align: center; pointer-events: none; }
}
@media (min-width: 901px) and (max-height: 620px) {
  .site-dock { top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; transform: none; }
  .site-dock[data-scroll-hidden] { transform: translateX(calc(-100% - max(24px, env(safe-area-inset-left)))); }
  .dock-tabs { gap: 2px; }
  .dock-tab, .dock-profile { height: 44px; }
  .dock-footer { margin-top: 6px; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-dock[data-motion-ready], .dock-tab, .dock-profile, .dock-indicator.is-animated, .dock-tab-label, .dock-tip { transition: none; }
  .dock-tab:active, .dock-profile:active { transform: none; }
}
/* 블러 미지원 환경과 접근성 설정에서는 불투명 소재로 가독성을 보장한다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-dock { --dock-surface: #1c1c1e; --dock-reflection: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-dock { --dock-surface: #161618; --dock-reflection: none; --dock-selection: #3a3a3c; --dock-selection-edge: inset 0 0 0 1px #8a8a8e; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px #8a8a8e; }
}
@media (forced-colors: active) {
  .site-dock { --dock-surface: Canvas; --dock-reflection: none; --dock-selection: Highlight; --dock-selection-edge: none; color: CanvasText; outline: 1px solid CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock-tab, .dock-profile { color: ButtonText; }
  .dock-tab[aria-selected="true"], .dock-profile[aria-selected="true"] { color: HighlightText; }
  .dock-indicator, .dock-indicator::before, .dock-profile[aria-selected="true"]::before { forced-color-adjust: none; }
  .dock-tab:focus-visible, .dock-profile:focus-visible { outline-color: Highlight; }
}