/* =============================================================
   Beril Reward マイページ フッターバナー カルーセル
   canonical(暫定): public/reward/reward-footer-banner.css

   ★このファイルは複製である。統合の予定があることを必ず読むこと。

   ── 複製元 ────────────────────────────────────────────────
     ・.fbc-*  … public/footer-banner-carousel.css
     ・.kkb-*  … public/keisan-banner.css
     ・.evb-*  … 新規（design/reward-footer-banner-mock.html が寸法・配色の正）

   ── なぜ複製したか ────────────────────────────────────────
     src/middleware.ts の matcher が除外しているのは
       _next/static / _next/image / favicon.ico / svg png jpg jpeg gif webp
     だけで、css 拡張子の除外が無い。そのため public/ 直下の .css は
     未認証アクセスで middleware に捕まり 307 → /login になる。
     実測: /keisan-banner.css と /footer-banner-carousel.css は 307、
           /reward/reward-banner.css は 200。
     パス側の除外 startsWith('/reward') に入るのは「reward」で始まるパスだけなので、
     マイページ（未認証でも初期表示される）から確実に読めるのは /reward/ 配下に限られる。
     よって .fbc-* / .kkb-* / .evb-* を1ファイルにまとめてここへ置いた。

   ── 統合の条件 ────────────────────────────────────────────
     middleware の matcher に css を除外（例: 拡張子リストへ css を追加）すれば、
     このファイルは不要になる。マイページ側の <link> を
       /footer-banner-carousel.css + /keisan-banner.css
     の2本に戻し、.evb-* だけを keisan-banner.css と同じ流儀で新ファイルに切り出すこと。
     それまでは .kkb-* の変更を「複製元と当ファイルの2箇所」で行う必要がある。

   ── 書き方の約束（複製元と同じ） ──────────────────────────
     ・全セレクタに .fbc / .kkb-shell / .evb-shell を前置する。
     ・!important は padding / margin にのみ付ける。
       設置先に `*{margin:0;padding:0}` のリセットがあると詳細度で負けて余白が潰れるため
       （マイページ index.html の 40行目に実際にある）。余白以外には付けない。
     ・Google Fonts は読み込まない。字面は設置先の body から継承する。
     ・高さは中身で決める（aspect-ratio 固定はしない）。カルーセル内で縦に伸びるため。
   ============================================================= */

/* ===== カルーセル本体 =====
   ★ .fbc--mini について
     複製元（footer-banner-carousel.css）では .fbc--mini が「低背版」の修飾子で、
     .kkb-* の基本値を上書きしていた。マイページの本文コンテナ .app は
     width:min(100%,27rem) 固定＝コンテナ幅が常に狭い側にしか倒れないため、
     ここでは mini 相当の実測値を .kkb-* の基本値として直接書いている。
     markup 側の .fbc--mini はモック（クラス名の正）に合わせて残してあるが、
     このファイル内に対応する上書きルールは無い。統合時に元の修飾子構造へ戻すこと。 */
.fbc{container-type:inline-size;position:relative;width:100%;margin:0!important;padding:0!important}
.fbc .fbc-viewport{overflow:hidden;margin:0!important;padding:0!important}
.fbc .fbc-track{display:flex;align-items:stretch;touch-action:pan-y;
  transition:transform .5s cubic-bezier(.4,0,.2,1);margin:0!important;padding:0!important}
.fbc .fbc-slide{min-width:100%;display:flex;margin:0!important;padding:0!important}
.fbc .fbc-slide > *{width:100%;display:flex}
/* 各バナーは自前の左右 auto マージンを持つので、カルーセル内では上下だけ残す */
.fbc .fbc-slide .kkb-shell .kkb-banner,
.fbc .fbc-slide .evb-shell .evb-banner{margin:1.5rem 0!important}

.fbc .fbc-dots{display:flex;justify-content:center;gap:.55rem;margin:0 0 .4rem!important;padding:0!important}
.fbc .fbc-dot{width:.55rem;height:.55rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(82,74,99,.24);margin:0!important;padding:0!important;
  transition:background .2s ease, transform .2s ease}
.fbc .fbc-dot.on{background:#7c4fd0;transform:scale(1.2)}
.fbc .fbc-dot:focus-visible{outline:.1875rem solid #c2187e;outline-offset:.1875rem}

/* ===== 1枚目：ランクポイント計算くん ===== */
.kkb-shell{container-type:inline-size;width:100%;word-break:auto-phrase;line-break:strict}
.kkb-shell .kkb-ph{display:inline-block}
.kkb-shell .kkb-banner{
  box-sizing:border-box;position:relative;display:block;width:100%;max-width:75rem;
  margin:1.5rem auto!important;padding:0!important;overflow:hidden;border-radius:1rem;
  text-decoration:none;color:#3c3550;
  border:1.5px solid rgba(124,79,208,.28);
  background:linear-gradient(135deg,#fbf8ff,#f4eeff);
}
.kkb-shell .kkb-banner *,
.kkb-shell .kkb-banner *::before,
.kkb-shell .kkb-banner *::after{box-sizing:border-box}

/* 署名要素：計算くんが実際に出力する「週の配信プラン」の棒グラフ */
.kkb-shell .kkb-bars{position:absolute;inset:auto 0 0 0;height:50%;display:flex;align-items:flex-end;
  gap:1.2%;padding:0 2.6%!important;margin:0!important;pointer-events:none}
.kkb-shell .kkb-bars i{display:block;flex:1 1 0;height:var(--h);border-radius:.3rem .3rem 0 0;
  background:#e8dff8;transform-origin:50% 100%;
  animation:kkbRise .62s cubic-bezier(.22,.9,.3,1) both;animation-delay:var(--d,0s)}
.kkb-shell .kkb-bars i[data-on]{background:rgba(124,79,208,.3)}
@keyframes kkbRise{from{transform:scaleY(.04)}to{transform:scaleY(1)}}

.kkb-shell .kkb-inner{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:.42rem;width:60%;
  padding:1.05rem 1.15rem!important;margin:0!important}
.kkb-shell .kkb-mark{margin:0!important;padding:0!important;color:#6a3dbe;
  font-size:.95rem;font-weight:900;line-height:1.3}
.kkb-shell .kkb-head{margin:0!important;padding:0!important;color:#3c3550;
  font-size:1.15rem;font-weight:900;line-height:1.38}
.kkb-shell .kkb-cta{margin:.3rem 0 0!important;padding:0 1.2rem!important;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;
  border-radius:999px;background:linear-gradient(135deg,#8b5ce0,#7c4fd0 58%,#6a3dbe);
  color:#fff;font-size:.86rem;font-weight:700;line-height:1;
  transition:transform 100ms ease-out}
.kkb-shell .kkb-banner:active .kkb-cta{transform:scale(.972)}
.kkb-shell .kkb-mascot{position:absolute;z-index:3;right:1.5%;bottom:0;height:92%;width:36%;
  object-fit:contain;object-position:right bottom;margin:0!important;padding:0!important;
  pointer-events:none;filter:drop-shadow(0 .3rem .6rem rgba(82,74,99,.16))}

/* ===== 2枚目：イベントまとめ（1枚目と同じ骨格・配色だけ Beril マゼンタ） ===== */
.evb-shell{container-type:inline-size;width:100%;word-break:auto-phrase;line-break:strict}
.evb-shell .evb-ph{display:inline-block}
.evb-shell .evb-banner{
  box-sizing:border-box;position:relative;display:block;width:100%;max-width:75rem;
  margin:1.5rem auto!important;padding:0!important;overflow:hidden;border-radius:1rem;
  text-decoration:none;color:#3c3550;
  border:1.5px solid rgba(216,12,139,.28);
  background:linear-gradient(135deg,#fffaf2,#fdf1e2);
}
.evb-shell .evb-banner *,
.evb-shell .evb-banner *::before,
.evb-shell .evb-banner *::after{box-sizing:border-box}

/* 署名要素：背景＝カレンダーの月表示。7列で1週間、両端（data-w）が日曜と土曜。 */
.evb-shell .evb-cal{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;
  gap:.22rem;padding:.7rem .7rem .7rem 1rem!important;margin:0!important;opacity:.5}
.evb-shell .evb-cal i{display:block;border-radius:.2rem;background:#f2e4d2}
.evb-shell .evb-cal i[data-w]{background:rgba(216,12,139,.10)}
.evb-shell .evb-cal i[data-on]{background:rgba(216,12,139,.30)}

.evb-shell .evb-inner{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:.42rem;width:62%;
  padding:1.05rem 1.15rem!important;margin:0!important}
.evb-shell .evb-mark{margin:0!important;padding:0!important;color:#b0186f;
  font-size:.95rem;font-weight:900;line-height:1.3}
.evb-shell .evb-head{margin:0!important;padding:0!important;color:#3c3550;
  font-size:1.15rem;font-weight:900;line-height:1.38}
.evb-shell .evb-cta{margin:.3rem 0 0!important;padding:0 1.2rem!important;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;
  border-radius:999px;background:linear-gradient(135deg,#e8479f,#d80c8b 58%,#a90a6d);
  color:#fff;font-size:.86rem;font-weight:700;line-height:1;
  transition:transform 100ms ease-out}
.evb-shell .evb-banner:active .evb-cta{transform:scale(.972)}
.evb-shell .evb-mascot{position:absolute;z-index:3;right:1.5%;bottom:0;height:94%;width:33%;
  object-fit:contain;object-position:right bottom;margin:0!important;padding:0!important;
  pointer-events:none;filter:drop-shadow(0 .3rem .6rem rgba(82,74,99,.16))}

/* ===== 動きを減らす設定 =====
   自動送り自体を止めるのは JS 側（index.html のカルーセル初期化）。ここでは見た目だけ。 */
@media(prefers-reduced-motion:reduce){
  .fbc .fbc-track{transition:none}
  .fbc .fbc-dot{transition:none}
  .kkb-shell .kkb-bars i{animation:none}
  .kkb-shell .kkb-cta,
  .evb-shell .evb-cta{transition:none}
  .kkb-shell .kkb-banner:active .kkb-cta,
  .evb-shell .evb-banner:active .evb-cta{transform:none;opacity:.84}
}