/* 女優ザッピング（zap.html / js/zap.js）。feed.css の is-reel（ヘッダー非表示・下部ナビ）を前提に、こちらは画面の中身だけ */
.zap { position: fixed; inset: 0; background: #000; }
.zap__top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0)); }
.zap__filters { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zap__filters::-webkit-scrollbar { display: none; }
.zap__filters .chip { flex: none; font-size: .74rem; padding: 4px 10px; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.25); color: #fff; cursor: pointer; }
.zap__filters .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.zap__sep { flex: none; width: 1px; height: 18px; background: rgba(255,255,255,.3); margin: 0 2px; }
.zap__shuffle { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; font-size: 1.1rem; cursor: pointer; }
.zap__scroller { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.zap__scroller::-webkit-scrollbar { display: none; }
.zap__empty { position: absolute; inset: 40% 24px auto; text-align: center; color: var(--text-muted); }
.zslide { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.zslide__bg { position: absolute; inset: 0; }
.zslide__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.04); }
.zslide__bg img.is-on { opacity: 1; animation: zap-drift 9s ease-in-out infinite alternate; }
body.orient-landscape .zslide__bg img { object-fit: contain; object-position: center 45%; transform: none; animation: none; }   /* 横型: 全体を見せる */
.zslide__bg img.is-cover { object-fit: contain; object-position: center 45%; animation: none; transform: none; }   /* パッケージは横長。切らずに全体（規約: 拡大縮小のみ） */
.zslide__bg:has(img.is-cover.is-on) { background: radial-gradient(ellipse at 50% 40%, rgba(167, 139, 250, .22), rgba(0, 0, 0, 0) 60%), #0b0b0f; }
.zslide__bg img.is-portrait { inset: auto; left: 50%; top: 50%; width: min(72vw, 380px); height: auto; aspect-ratio: 1; object-fit: cover; transform: translate(-50%, -58%); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: none; }   /* 宣材写真は 125px しか無い。引き伸ばしすぎず、カードとして中央に */
.zslide__bg:has(img.is-portrait.is-on) { background: radial-gradient(ellipse at 50% 35%, rgba(167, 139, 250, .28), rgba(0, 0, 0, 0) 60%), #0b0b0f; }
.zslide__tap { position: absolute; top: 18%; bottom: 34%; width: 28%; border: 0; background: transparent; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zslide__tap--l { left: 0; } .zslide__tap--r { right: 0; }
@keyframes zap-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -2%); } }
.zslide__frame { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; aspect-ratio: 3 / 2; border: 0; background: #000; }
.zslide__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%); pointer-events: none; }
.zslide__info { position: absolute; left: 14px; right: 76px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.zslide__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.zslide__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); flex: none; }
.zslide__name { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.zslide__name a { color: #fff; text-decoration: none; }
.zslide__ruby { margin: 0; font-size: .75rem; opacity: .8; }
.zslide__spec { margin: 0 0 2px; font-size: .88rem; }
.zslide__stats { margin: 0 0 6px; font-size: .78rem; opacity: .85; }
.zslide__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 6px; }
.zslide__tags .chip { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.3); color: #fff; text-decoration: none; text-shadow: none; }
.zslide__cap { margin: 0; font-size: .72rem; opacity: .75; }
.zslide__cap a { color: #fff; text-decoration: none; }
.zslide__rail { position: absolute; right: 10px; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 3; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.zslide__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 52px; padding: 6px 0; border: 0; border-radius: 14px; background: rgba(0,0,0,.45); color: #fff; text-decoration: none; font: inherit; cursor: pointer; text-shadow: none; margin: 0; }
.zslide__btn span, .zslide__btn .fav-person__icon { font-size: 1.35rem; line-height: 1; }
.zslide__btn small { font-size: .62rem; opacity: .9; }
.zslide__btn.fav-person { border: 0; }
.zslide__btn.fav-person.is-on { color: var(--accent-warm); }
.zslide__btn.fav-person .visually-hidden { position: absolute; }
.zslide__btn.fav-person::after { content: "登録"; font-size: .62rem; opacity: .9; }
.zslide__btn.fav-person.is-on::after { content: "登録済み"; }
.zslide__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 4px; z-index: 2; }
.zslide__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); }
.zslide__dots i.is-on { background: #fff; }
.zap__hint { z-index: 3; }
.zap__hint[hidden] { display: none; }
@media (max-width: 600px) { .zslide__info { bottom: calc(80px + env(safe-area-inset-bottom)); } .zslide__rail { bottom: calc(190px + env(safe-area-inset-bottom)); } .zslide__dots { bottom: calc(70px + env(safe-area-inset-bottom)); } }
@media (min-width: 901px) { .zslide { max-width: 640px; margin: 0 auto; } .zap__top { max-width: 640px; margin: 0 auto; } }
.hide-images .zslide__bg img, .hide-images .zslide__face { display: none; }
@media (prefers-reduced-motion: reduce) { .zslide__bg img.is-on { animation: none; } }