/* 비전체화면 전용 왼쪽 썸네일 탐색. */
.ns-thumbnails {
  position: fixed; inset: 0 auto 0 0; z-index: var(--ns-z-floating);
  width: 176px; padding: 20px 14px;
  overflow: hidden auto; overscroll-behavior: contain;
  background: var(--ns-color-bg-layer-default);
  box-shadow: var(--ns-shadow-s2);
  scrollbar-width: thin;
}
.ns-thumbnails__list { display: grid; gap: var(--ns-dimension-x4); }
.ns-thumbnail { display: grid; width: 100%; gap: var(--ns-dimension-x2); text-align: left; color: var(--ns-color-fg-neutral-muted); }
.ns-thumbnail__preview {
  position: relative; display: grid; place-items: center;
  width: 148px; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  border-radius: var(--ns-radius-r2);
  background: var(--ns-color-bg-layer-basement);
  transition: border-color var(--ns-duration-color-transition) var(--ns-timing-function-easing), box-shadow var(--ns-duration-color-transition) var(--ns-timing-function-easing), transform 180ms var(--ns-timing-function-easing);
}
.ns-thumbnail[data-tone="night"] .ns-thumbnail__preview { background: var(--ns-color-bg-night); color: var(--ns-color-fg-neutral-inverted); }
.ns-thumbnail__preview b { position: relative; z-index: 1; font-size: var(--ns-font-size-t9); letter-spacing: -0.04em; }
.ns-thumbnail__preview i { position: absolute; left: 18px; right: 18px; bottom: 15px; height: 3px; border-radius: var(--ns-radius-full); background: var(--ns-color-bg-neutral-solid-muted); opacity: 0.55; }
.ns-thumbnail[data-tone="night"] .ns-thumbnail__preview i { background: var(--ns-color-fg-informative-on-night); }
.ns-thumbnail__title { overflow: hidden; font-size: var(--ns-font-size-t3); line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ns-thumbnail:hover .ns-thumbnail__preview { transform: translateY(-1px); border-color: var(--ns-color-stroke-neutral-solid); }
.ns-thumbnail[data-active="true"] { color: var(--ns-color-fg-neutral); }
.ns-thumbnail[data-active="true"] .ns-thumbnail__preview { border: 2px solid var(--ns-color-stroke-focus-ring); box-shadow: var(--ns-shadow-s2); }
.ns-thumbnail[data-active="true"] .ns-thumbnail__title { font-weight: var(--ns-font-weight-bold); }
:fullscreen .ns-thumbnails,
:-webkit-full-screen .ns-thumbnails { display: none; }
