/* Flyer Museum v0.4.4 — 2:3モザイク＋反転＋無限ループ＋モーダル安全域（最適化） */

/* 基本 */
.fm{
  position:relative;
  overflow:hidden;
  height:var(--fm-height,80vh);
  touch-action: pan-y;
  z-index:0;
}

/* === Edge fade（上下をうっすら暗く）============================= */
.fm::before,
.fm::after{
  content:"";
  position:absolute; left:0; right:0;
  height: var(--fm-edge, 9vh);
  pointer-events:none;
  z-index:1; /* コンテンツより上、モーダルより下 */
}
.fm::before{
  top:0;    background:linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0));
}
.fm::after{
  bottom:0; background:linear-gradient(to top,    rgba(0,0,0,.26), rgba(0,0,0,0));
}
@media (max-width:640px){
  .fm::before, .fm::after{ height: var(--fm-edge-sm, 6vh); }
}

/* スクロール用キャンバス */
.fm-canvas{position:relative;}
.fm-row{position:relative; will-change:transform; z-index:0;}
.fm-strip{
  display:grid; gap:8px; margin:8px 0;
  grid-auto-flow:dense;
  grid-auto-rows: var(--cell, 60px); /* JSが列幅から算出して注入（2:3維持） */
  align-content:start;
}

/* 列数 */
@media (min-width:1024px){ .fm-strip{ grid-template-columns:repeat(12,1fr) } }
@media (min-width:640px) and (max-width:1023px){ .fm-strip{ grid-template-columns:repeat(6,1fr) } }
@media (max-width:639px){ .fm-strip{ grid-template-columns:repeat(3,1fr) } }

/* カード */
.fm-card{
  position:relative; cursor:pointer;
  grid-column: span 1; grid-row: span 1;
  perspective:800px;
}
.fm-card.size-2{ grid-column: span 2; grid-row: span 2; }
.fm-card.size-3{ grid-column: span 3; grid-row: span 3; }

.fm-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .5s;
}
.fm-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:10px; overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.fm-face img{ width:100%; height:100%; object-fit:cover; }
.fm-back{ transform:rotateY(180deg); }

/* 裏面あり＝ホバーで反転 / 裏面なし＝1回転 */
.fm-card.has-back:hover .fm-inner{ transform:rotateY(180deg); }
.fm-card.no-back:hover  .fm-inner{ animation: fm-spin .8s linear 1; }
@keyframes fm-spin { from{ transform:rotateY(0) } to{ transform:rotateY(360deg) } }

/* === Modal（安全域対応：常に画面内に収める）==================== */
/* 余白の基準 */
:root{
  --fm-modal-pad-x: 40px;
  --fm-modal-pad-y: 80px;
}
@media (max-width:640px){
  :root{ --fm-modal-pad-x: 20px; --fm-modal-pad-y: 60px; }
}

/* オーバーレイ（安全域の内側に画像を収める） */
.fm-overlay{
  position:fixed; inset:0; z-index:2147483646;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  box-sizing:border-box;
  padding:
    calc(var(--fm-modal-pad-y) + env(safe-area-inset-top))
    var(--fm-modal-pad-x)
    calc(var(--fm-modal-pad-y) + env(safe-area-inset-bottom))
    var(--fm-modal-pad-x);
}
.fm-overlay[hidden]{ display:none !important; pointer-events:none !important; }

/* WP管理バー分を加算 */
body.admin-bar .fm-overlay{
  padding-top: calc(var(--fm-modal-pad-y) + env(safe-area-inset-top) + 32px);
}
@media (max-width:782px){
  body.admin-bar .fm-overlay{
    padding-top: calc(var(--fm-modal-pad-y) + env(safe-area-inset-top) + 46px);
  }
}

/* 上下の濃いグラデ（演出） */
.fm-overlay::before,.fm-overlay::after{
  content:""; position:absolute; left:0; right:0; height:10vh; pointer-events:none;
}
.fm-overlay::before{ top:0;    background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent); }
.fm-overlay::after { bottom:0; background:linear-gradient(to top,   rgba(0,0,0,.85),transparent); }

/* モーダル枠＝安全域いっぱい */
.fm-modal{
  position:relative; width:100%; height:100%;
  max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}

/* 画像は常に収める */
.fm-modal img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;                 /* ← 上下見切れ防止の肝 */
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  user-select:none;
}

/* 画像上に重ねるヒットレイヤー（矢印を画像縁に吸着させる） */
.fm-hit{
  position:absolute; pointer-events:none;
}
.fm-hit .fm-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:auto; z-index:6;
}

/* 閉じる/矢印/カウンタは前面。矢印の左右位置は JS が inline で設定 */
.fm-close,
.fm-arrow,
.fm-counter{ position:absolute; z-index:5; }

.fm-close{
  top:16px; right:16px;
  width:44px; height:44px; border:none; border-radius:9999px;
  background:#fff; color:#111; cursor:pointer; font-size:22px;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* 矢印の共通スタイル（左右位置は指定しない！） */
.fm-arrow{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, transform .15s ease;
  backdrop-filter:saturate(120%) blur(2px);
}
.fm-arrow:hover{ background:rgba(0,0,0,.55); }

/* カウンタ */
.fm-counter{
  bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.45); color:#fff; font-size:13px; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px; backdrop-filter:saturate(110%) blur(2px);
}

/* 穴あき（モーダル中に元カードを消す） */
.fm-card.hole .fm-face{ opacity:0 }

/* フォールバック */
.fm-empty{ padding:24px; color:#666 }

/* PCは横を攻める（左右パディングだけ狭く） */
@media (min-width: 1200px){
  .fm-overlay{
    --fm-modal-pad-x: 12px;   /* ← ここを 8–20px で好みに調整 */
    --fm-modal-pad-y: 72px;   /* 上下は少し確保して“見切れ防止” */
  }
}
/* さらに大型ディスプレイ用（お好みで） */
@media (min-width: 1600px){
  .fm-overlay{
    --fm-modal-pad-x: 18px;
    --fm-modal-pad-y: 90px;
  }
}

/* === コメント・バブル（左右レーン＋ふわふわ揺れ） ============== */
.fm-cflow-side{
  position:absolute;
  top:0; height:0;              /* JSで画像の高さに合わせる */
  width:160px;                  /* JSで最終調整 */
  overflow:hidden;
  pointer-events:none;
  z-index:4;                    /* 画像の上, 矢印(5)より下 */
}
.fm-cflow-side.overlap .fm-citem{ opacity:.65; } /* 重なり時は薄く */

.fm-citem{
  position:absolute; left:0; right:0; bottom:-20%;
  opacity:0; will-change:transform,opacity;
  animation: fm-rise var(--dur,9s) linear var(--delay,0s) forwards;
}
.fm-cbody{
  display:inline-block; max-width:94%; margin:0 auto; padding:0;
  color:#fff; font-weight:500; font-size:13px; line-height:1.3;
  background:transparent; border-radius:0;
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.25);
  animation: fm-sway var(--swayDur,2.8s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes fm-rise{
  0%{   transform:translateY(110%); opacity:0; }
  10%{  opacity:.95; }
  90%{  opacity:.95; }
  100%{ transform:translateY(-120%); opacity:0; }
}
@keyframes fm-sway{
  0%{   transform:translateX(calc(var(--amp,10px)*-1)) rotate(-.6deg); }
  50%{  transform:translateX(0) rotate(0); }
  100%{ transform:translateX(var(--amp,10px)) rotate(.6deg); }
}
@media (max-width:640px){
  .fm-cflow-side{ width:120px; }
  .fm-cbody{ font-size:12px; }
}

/* === Ambient bubbles lanes ============================================ */
.fm-float-side{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  z-index: 4;             /* 画像の上、矢印(z=5)より下 */
}
.fm-float-side.overlap{ opacity:.7; }

/* 丸バブル（背景ぼかし＋淡い発光） */
.fm-bubble{
  position:absolute;
  bottom:-12%;            /* 画面外から出現 */
  border-radius:9999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, rgba(255,255,255,0));
  box-shadow: 0 2px 10px rgba(0,0,0,.15), 0 0 12px rgba(255,255,255,.25);
  backdrop-filter: blur(2px) saturate(120%);
  will-change: transform, opacity;
}

/* 上昇＆フェード（テキスト用と共用） */
@keyframes fm-rise{
  0%   { transform: translateY(110%); opacity: 0; }
  10%  { opacity: .95; }
  90%  { opacity: .95; }
  100% { transform: translateY(-120%); opacity: 0; }
}
/* 横揺れ（テキスト／丸共通） */
@keyframes fm-sway{
  0%   { transform: translateX(-10px) rotate(-.6deg); }
  50%  { transform: translateX(0) rotate(0); }
  100% { transform: translateX(10px) rotate(.6deg); }
}

/* === コメント入力バー（画面センター基準） ======================= */
.fm-formbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);    /* ← 水平センターはこれだけ */
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  width:min(900px, calc(100vw - 32px));  /* PC: 最大900px, 画面両端に16px余白 */
  display:flex; gap:8px;
  align-items:center;
  z-index:6;                      /* 矢印(5)より前に */
  pointer-events:auto;
}

.fm-input{
  flex:1; height:44px;            /* 1行の高さ */
  padding:0 14px;
  background:#fff;                /* ご要望どおり白 */
  color:#111; font-size:16px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  outline:none;
}

.fm-send{
  height:44px; padding:0 16px;
  border:none; border-radius:10px;
  background:#111; color:#fff; font-weight:600;
  cursor:pointer;
}
.fm-send:disabled{ opacity:.5; cursor:not-allowed; }

@media (max-width:640px){
  .fm-formbar{ width:min(640px, calc(100vw - 24px)); bottom:calc(env(safe-area-inset-bottom,0px) + 12px); }
  .fm-input{ height:40px; font-size:15px; }
  .fm-send{  height:40px; }
}

/* 送信ボタンを白地・黒文字に */
.fm-send{
  height:44px; padding:0 16px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;           /* ← 白 */
  color:#111;                /* ← 黒文字 */
  font-weight:600;
  cursor:pointer;
}
.fm-send:disabled{ opacity:.55; cursor:not-allowed; }

.fm-formbar.only-detail{
  justify-content:flex-end;
}
.fm-detail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;
  color:#111;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  margin-left:auto;
}