/* リールの全画面ビューア（shared/reel-viewer.js）。要件 drafts/home-reel-viewer-requirements.md */
.kr-reel-viewer {
  position: fixed; inset: 0; z-index: 200;
  background: #000; color: var(--kr-accent-ink);
  font-family: var(--kr-font-jp);
}
.kr-reel-viewer__scroller {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.kr-reel-viewer__scroller::-webkit-scrollbar { display: none; }
.kr-reel-viewer__slot {
  position: relative; height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* PC では 9:16 の列を中央に置き、左右は黒 */
.kr-reel-viewer__poster,
.kr-reel-viewer__media {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: min(100%, calc(100dvh * 9 / 16));
  object-fit: cover; background: #000;
}
.kr-reel-viewer__error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16,18,21,.72); font-size: 0.9rem; font-weight: 700;
}

/* 画面の上下に固定した 1 組の文字とボタン。表示中のリールに合わせて差し替える */
.kr-reel-viewer__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
  pointer-events: none;
}
.kr-reel-viewer__top > * { pointer-events: auto; }
.kr-reel-viewer__count {
  font-family: var(--kr-font-mono); letter-spacing: 0.12em; font-size: 0.72rem;
  background: rgba(16,18,21,.45); border-radius: 999px; padding: 4px 10px;
}
.kr-reel-viewer__btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16,18,21,.45); color: inherit;
}
.kr-reel-viewer__btn[hidden] { display: none !important; }
.kr-reel-viewer__btn:focus-visible { outline: 2px solid var(--kr-accent-ink); outline-offset: 2px; }
.kr-reel-viewer__rail {
  position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 120px);
  display: flex; flex-direction: column; gap: 14px;
}
/* 文字は下端に 2 行まで。焼き込みテロップを隠し続けないよう、背景は薄い影だけ（R9） */
.kr-reel-viewer__info {
  position: absolute; left: 16px; right: 72px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  pointer-events: none;
}
.kr-reel-viewer__video {
  display: flex; align-items: center; font-size: 0.74rem; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kr-reel-viewer__video[hidden] { display: none !important; }
.kr-reel-viewer__video-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kr-reel-viewer__title {
  display: block; color: inherit; text-decoration: none;
  font-size: 0.95rem; font-weight: 700; line-height: 1.4; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* タイトルはリール詳細へのリンク（文字の帯は pointer-events: none なので、ここだけ戻す） */
.kr-reel-viewer__title[href] { pointer-events: auto; cursor: pointer; }
.kr-reel-viewer__title[href]:hover { text-decoration: underline; }
.kr-reel-viewer__meta { font-size: 0.74rem; opacity: .85; margin-top: 2px; }

/* 別の動画に入った瞬間だけ出す案内（R11）。上下のテロップを避けて中央 */
.kr-reel-viewer__boundary {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 48px);
  display: flex; align-items: center;
  padding: 10px 16px; border-radius: 999px;
  background: var(--kr-bg); color: var(--kr-ink);
  font-size: 0.82rem; font-weight: 700; box-shadow: var(--kr-shadow-pop);
  pointer-events: none;
}
.kr-reel-viewer__boundary[hidden] { display: none !important; }
.kr-reel-viewer__boundary-label { font-weight: 400; color: var(--kr-ink-dim); flex: none; }
.kr-reel-viewer__boundary-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }