/* modal.css - FANZAサブスクナビ 共通モーダル */

/* ===== オーバーレイ ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:flex-end; justify-content:center; }
.modal-overlay.show, .modal-overlay.open { display:flex; }

/* ===== シート ===== */
.modal-sheet { background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:480px; padding:16px 16px 32px; animation:modalSlideUp 0.25s ease; max-height:90vh; overflow-y:auto; }
@keyframes modalSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ===== ハンドル ===== */
.modal-handle { width:36px; height:4px; background:#E8E8E5; border-radius:2px; margin:0 auto 14px; }

/* ===== ヘッド行（パッケージ＋タイトル/発売日/レビュー横並び） ===== */
.modal-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; }
.modal-head .modal-pkg { width:38%; flex-shrink:0; aspect-ratio:3/4; object-fit:cover; border-radius:6px; background:#F4F4F2; display:block; }
.modal-head-info { flex:1; min-width:0; }

/* サンプルあり時：パッケージを小さくする */
.modal-head.has-sample .modal-pkg { width:56px; height:75px; aspect-ratio:unset; border-radius:4px; }

/* ===== サンプル動画（iframe直接配置・元の方式と同じ） ===== */
.modal-video { display:none; width:100%; aspect-ratio:476/360; background:#000; border-radius:8px; margin-bottom:12px; }

/* ===== 作品情報 ===== */
.modal-info { margin-bottom:12px; }
.modal-title { font-size:13px; font-weight:500; color:#1A1A18; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:5px; }
.modal-date { font-size:11px; color:#A0A09C; margin-bottom:5px; }

/* レビュー */
.modal-review { font-size:12px; color:#6B6B67; margin-bottom:6px; }
.modal-review-star { color:#F5A623; margin-right:2px; }
.modal-review-avg  { font-weight:500; color:#1A1A18; }
.modal-review-count { color:#A0A09C; font-size:11px; }

/* シリーズチップ */
.modal-series-wrap { margin-bottom:6px; }
.modal-series-chip { display:inline-block; font-size:11px; padding:3px 9px; border-radius:4px; background:#EAF3DE; color:#27500A; text-decoration:none; border:0.5px solid #C5DFA8; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-series-chip:hover { background:#D5EAC0; }

/* ジャンルチップ */
.modal-genre-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.modal-genre-chip { font-size:11px; padding:3px 8px; border-radius:4px; background:#F4F4F2; color:#6B6B67; border:0.5px solid #E8E8E5; }

/* 出演者チップ */
.modal-actress-label { font-size:10px; color:#A0A09C; margin-bottom:4px; }
.modal-actress-chips { display:flex; flex-wrap:wrap; gap:4px; }
.modal-actress-chip { font-size:12px; padding:4px 10px; border-radius:20px; background:#FDE8EF; color:#C0185A; border:0.5px solid #F5B8CB; text-decoration:none; }
.modal-actress-chip:hover { background:#FAD0DE; }
.modal-actress-chip--no-link { background:#F4F4F2; color:#6B6B67; border-color:#E8E8E5; }

/* ===== セール情報 ===== */
.modal-sale-area { margin-bottom:12px; padding-bottom:12px; border-bottom:0.5px solid #E8E8E5; }
.modal-price-row { display:flex; align-items:baseline; gap:5px; margin-bottom:3px; }
.modal-price-list  { font-size:11px; color:#A0A09C; text-decoration:line-through; }
.modal-price-sale  { font-size:18px; color:#E83E6C; font-weight:500; }
.modal-price-tilde { font-size:11px; color:#E83E6C; }
.modal-countdown   { font-size:11px; color:#A0A09C; margin-bottom:8px; }
.modal-countdown .cd-time { color:#E83E6C; font-weight:500; }
.modal-subsc-label  { font-size:10px; color:#A0A09C; margin-bottom:5px; }
.modal-subsc-badges { display:flex; gap:5px; flex-wrap:wrap; }
.sb { font-size:11px; padding:3px 9px; border-radius:4px; }
.sb-fanzatv     { background:#E6F1FB; color:#0C447C; }
.sb-fanzatvplus { background:#EAF3DE; color:#27500A; }
.sb-miratch     { background:#FAEEDA; color:#633806; }
.sb-miratchdx   { background:#FAECE7; color:#712B13; }
.sb-vrch        { background:#EEEDFE; color:#3C3489; }
.sb-none        { font-size:11px; color:#A0A09C; }

/* ===== ボタン ===== */
.modal-btns { margin-top:12px; }
.modal-btn-row { display:flex; gap:8px; margin-bottom:8px; }
.modal-btn-row .modal-btn { margin-bottom:0; flex:1; }
.modal-btn { display:block; width:100%; padding:12px 0; border-radius:8px; font-size:14px; font-weight:500; text-align:center; text-decoration:none; border:none; cursor:pointer; margin-bottom:8px; }
.modal-btn-subsc { background:#E83E6C; color:#fff; }
.modal-btn-subsc:hover { background:#C0185A; }
.modal-btn-reg { background:#fff; color:#E83E6C; border:1px solid #E83E6C; font-size:13px; }
.modal-btn-reg:hover { background:#FDE8EF; }
.modal-btn-buy { background:#fff; color:#1A1A18; border:0.5px solid #C8C8C4; font-size:13px; }
.modal-btn-buy:hover { background:#F4F4F2; }
.modal-btn-close { background:transparent; color:#A0A09C; font-size:13px; width:100%; padding:8px; text-align:center; border:none; cursor:pointer; display:block; margin-bottom:0; }
.modal-sale-notice { background:#FFF0EB; border:0.5px solid #FF4400; color:#CC2200; font-size:12px; font-weight:500; text-align:center; padding:8px 12px; border-radius:6px; }
.modal-no-subsc { font-size:12px; color:#A0A09C; text-align:center; padding:8px 0; }

/* ===== PC ===== */
@media (min-width:768px) {
  .modal-overlay { align-items:center; }
  .modal-sheet { border-radius:12px; max-width:420px; }
}