/* ===== MANGA VIEWER =====
   /manga.html, /en/manga.html, /es/manga.html で共有。
   色は各ページの :root（--yellow 等）を継承する。 */

.mv{padding-top:72px}

/* ---------- HERO ---------- */
.mv-hero{position:relative;overflow:hidden;padding:3.5rem 2rem 3rem;display:flex;align-items:center;justify-content:center;min-height:min(78vh,760px)}
.mv-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(38px) saturate(1.15);transform:scale(1.18);opacity:.5}
.mv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.5) 45%,var(--black) 100%)}
html[data-theme="light"] .mv-hero::after{background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.55) 45%,var(--black) 100%)}
.mv-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem;align-items:center;max-width:1000px;width:100%}
.mv-eyebrow{font-family:var(--font-en);font-size:.8rem;font-weight:700;letter-spacing:.22em;color:var(--yellow);margin-bottom:1rem}
html[data-theme="light"] .mv-eyebrow{color:#9C7C00}
.mv-hero h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:900;line-height:1.25;letter-spacing:.01em;margin-bottom:.9rem}
.mv-hero .mv-tagline{font-size:1.02rem;color:var(--gray-300);margin-bottom:1.6rem;line-height:1.8}
.mv-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.9rem}
.mv-fact{font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:.35rem .85rem;border-radius:100px;border:1px solid var(--gray-700);color:var(--gray-400)}
.mv-cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.mv-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.9rem;border-radius:100px;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s,border-color .25s;font-family:inherit}
.mv-btn-primary{background:var(--yellow);color:#0A0A0A}
.mv-btn-primary:hover{transform:translateY(-2px)}
.mv-btn-ghost{border-color:var(--gray-700);color:var(--gray-300);background:none}
.mv-btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.mv-cover-wrap{position:relative;justify-self:center}
.mv-cover{display:block;width:300px;max-width:100%;height:auto;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
html[data-theme="light"] .mv-cover{box-shadow:0 24px 60px rgba(0,0,0,.25);border-color:rgba(0,0,0,.08)}

/* ---------- TOOLBAR ---------- */
.mv-bar{position:sticky;top:72px;z-index:900;background:rgba(10,10,10,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,229,0,.14)}
html[data-theme="light"] .mv-bar{background:rgba(255,255,255,.92);border-bottom-color:rgba(0,0,0,.09)}
.mv-track{height:3px;width:100%;background:var(--gray-800);cursor:pointer;position:relative}
.mv-track-fill{display:block;height:100%;width:0;background:var(--yellow);transition:width .18s linear}
.mv-bar-inner{max-width:1000px;margin:0 auto;padding:.55rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mv-count{font-family:var(--font-en);font-size:.85rem;font-weight:600;color:var(--gray-400);letter-spacing:.06em;white-space:nowrap}
.mv-count b{color:var(--yellow);font-weight:800;font-size:1rem}
html[data-theme="light"] .mv-count b{color:#9C7C00}
.mv-modes{display:flex;gap:.25rem;background:var(--gray-900);border:1px solid var(--gray-800);border-radius:100px;padding:.2rem}
.mv-mode{border:none;background:none;color:var(--gray-400);font-size:.78rem;font-weight:700;padding:.38rem 1rem;border-radius:100px;cursor:pointer;font-family:inherit;transition:all .22s;white-space:nowrap}
.mv-mode[aria-pressed="true"]{background:var(--yellow);color:#0A0A0A}
.mv-tools{display:flex;gap:.4rem}
.mv-icon{width:34px;height:34px;border-radius:50%;border:1px solid var(--gray-700);background:none;color:var(--gray-400);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s}
.mv-icon:hover{border-color:var(--yellow);color:var(--yellow)}
.mv-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- READER ---------- */
.mv-reader{max-width:720px;margin:0 auto;padding:1.5rem 1rem 2rem}
.mv-page{position:relative;margin:0 auto 1rem;width:100%;background:var(--gray-900);border-radius:6px;overflow:hidden}
.mv-page img{display:block;width:100%;height:auto;border-radius:6px}
.mv-page-no{position:absolute;right:.6rem;bottom:.5rem;font-family:var(--font-en);font-size:.7rem;font-weight:700;color:rgba(255,255,255,.65);background:rgba(0,0,0,.45);padding:.12rem .5rem;border-radius:100px;pointer-events:none;opacity:0;transition:opacity .3s}
.mv-page:hover .mv-page-no{opacity:1}

/* ページめくりモード：1ページが画面内に必ず収まるよう高さから幅を決める
   （848 / 1264 = 0.671。ヘッダー・ツールバー・めくりナビの分を差し引く） */
.mv-reader[data-mode="page"]{max-width:min(720px,max(420px,calc((100vh - 215px) * 0.671)));padding:1rem .5rem 1rem}
.mv-reader[data-mode="page"] .mv-page{display:none;margin-bottom:0}
.mv-reader[data-mode="page"] .mv-page.is-current{display:block}
.mv-reader[data-mode="page"] .mv-page-no{opacity:1}

/* めくりナビ（ページモードのみ） */
.mv-pager{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:950;align-items:center;gap:.4rem;background:rgba(10,10,10,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--gray-800);border-radius:100px;padding:.35rem}
html[data-theme="light"] .mv-pager{background:rgba(255,255,255,.95)}
.mv-reader[data-mode="page"] ~ .mv-pager{display:flex}
.mv-pager button{border:none;background:none;color:var(--gray-300);font-family:inherit;font-size:.8rem;font-weight:700;padding:.5rem 1.1rem;border-radius:100px;cursor:pointer;transition:all .22s;white-space:nowrap}
.mv-pager button:hover:not(:disabled){background:var(--yellow);color:#0A0A0A}
.mv-pager button:disabled{opacity:.3;cursor:default}
.mv-jump{font-family:var(--font-en);font-size:.8rem;font-weight:700;color:var(--gray-400);padding:0 .3rem;white-space:nowrap}
.mv-jump input{width:2.6rem;text-align:center;background:var(--gray-900)!important;border:1px solid var(--gray-700)!important;color:var(--white)!important;border-radius:8px;padding:.28rem .2rem;font-family:inherit;font-weight:700;font-size:.8rem;-moz-appearance:textfield}
.mv-jump input::-webkit-outer-spin-button,.mv-jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 没入モード（フルスクリーン時） */
body.mv-immersive header,body.mv-immersive #theme-toggle,body.mv-immersive .saqt-chat-btn,body.mv-immersive .saqt-chat-window,body.mv-immersive .mv-hero,body.mv-immersive .mv-end,body.mv-immersive footer{display:none!important}
body.mv-immersive .mv{padding-top:0}
body.mv-immersive .mv-bar{top:0}
body.mv-immersive .mv-reader{max-width:min(720px,calc((100vh - 60px) * 0.671))}
body.mv-immersive .mv-reader[data-mode="page"]{max-width:min(720px,calc((100vh - 145px) * 0.671))}

/* ---------- 読了 CTA ---------- */
.mv-end{max-width:760px;margin:0 auto;padding:0 1.5rem 5rem;text-align:center}
.mv-end-card{border:1px solid var(--gray-800);border-radius:20px;padding:3rem 2rem;background:linear-gradient(180deg,rgba(255,229,0,.05),rgba(255,229,0,0))}
.mv-end .mv-eyebrow{margin-bottom:.7rem}
.mv-end h2{font-size:clamp(1.35rem,3.4vw,1.85rem);font-weight:800;margin-bottom:.9rem;line-height:1.5}
.mv-end p{color:var(--gray-400);font-size:.95rem;margin-bottom:2rem;line-height:1.9}
.mv-end-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.mv-end-btns .mv-btn{padding:.8rem 1.6rem;font-size:.9rem}

/* ---------- 言語カード（英語版プレースホルダ用） ---------- */
.mv-langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;max-width:820px;margin:0 auto;padding:0 1.5rem 5rem}
.mv-langcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--gray-800);border-radius:18px;overflow:hidden;background:var(--gray-900);transition:transform .28s,border-color .28s}
.mv-langcard:hover{transform:translateY(-4px);border-color:var(--yellow)}
.mv-langcard img{display:block;width:100%;height:auto}
.mv-langcard-body{padding:1.1rem 1.25rem}
.mv-langcard-body strong{display:block;font-size:1.02rem;font-weight:800;margin-bottom:.2rem}
.mv-langcard-body span{font-size:.82rem;color:var(--gray-400)}

/* ---------- レスポンシブ ---------- */
@media(max-width:860px){
  .mv-hero{min-height:auto;padding:2.5rem 1.25rem 2.5rem}
  .mv-hero-inner{grid-template-columns:1fr;gap:2rem;text-align:center;justify-items:center}
  .mv-facts,.mv-cta-row{justify-content:center}
  .mv-cover{width:225px}
  .mv-cover-wrap{order:-1}
}
@media(max-width:600px){
  .mv-bar-inner{padding:.5rem .75rem;gap:.5rem}
  .mv-mode{padding:.36rem .7rem;font-size:.72rem}
  .mv-count{font-size:.78rem}
  .mv-tools .mv-icon:not(.mv-icon-keep){display:none}
  .mv-reader{padding:1rem .5rem 1.5rem}
  .mv-page{margin-bottom:.6rem}
  .mv-end-card{padding:2.2rem 1.25rem}
  .mv-end-btns .mv-btn{width:100%;justify-content:center}
  /* スマホでは1ページを画面幅いっぱいに使い、めくりナビは固定せず本文の下に置く
     （固定するとテーマ切替ボタン・チャットボタンと重なるため） */
  .mv-reader[data-mode="page"]{max-width:100%;padding:1rem .5rem 0}
  .mv-reader[data-mode="page"] ~ .mv-pager{position:static;transform:none;margin:1rem auto 2.5rem}
}
@media(prefers-reduced-motion:reduce){
  .mv-btn:hover,.mv-langcard:hover{transform:none}
  .mv-track-fill{transition:none}
}