/* 季節の特集ページ：背景（AI生成画像またはパターン別グラデーション）と、12パターンの商品掲示レイアウト */

/* ---------- 舞台（背景） ---------- */
.feature-stage {
  position: relative;
  min-height: calc(100vh - 64px);
  padding: 28px 0 70px;
  background-color: #fff8f6;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
.feature-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, .22); pointer-events: none; }
.feature-stage.tone-dark::before { background: rgba(12, 8, 32, .42); }
.feature-stage > .container { position: relative; z-index: 1; }

/* 背景画像が無い（生成前・失敗）ときのパターン別グラデーション */
.feature-stage[data-pattern="snow"]      { background-image: linear-gradient(180deg, #cfe6ff, #f6fbff); }
.feature-stage[data-pattern="leaves"]    { background-image: linear-gradient(180deg, #ffd9a8, #f3a76c); }
.feature-stage[data-pattern="sakura"]    { background-image: linear-gradient(180deg, #ffd6e6, #fff5f9); }
.feature-stage[data-pattern="xmas"]      { background-image: linear-gradient(180deg, #c9ecd6, #ffd9d9); }
.feature-stage[data-pattern="halloween"] { background-image: linear-gradient(180deg, #2a1250, #6a3412); }
.feature-stage[data-pattern="summer"]    { background-image: linear-gradient(180deg, #a9e4ff, #e9fcff); }
.feature-stage[data-pattern="party"]     { background-image: linear-gradient(135deg, #ffd6f2, #dcd6ff); }
.feature-stage[data-pattern="valentine"] { background-image: linear-gradient(180deg, #ffc2d6, #fff0f5); }
.feature-stage[data-pattern="night"]     { background-image: linear-gradient(180deg, #0c1240, #2a1b6b); }
.feature-stage[data-pattern="rain"]      { background-image: linear-gradient(180deg, #c6d3e3, #eef2f7); }
.feature-stage[data-pattern="glow"]      { background-image: linear-gradient(180deg, #10122e, #34204f); }
.feature-stage[data-pattern="classic"]   { background-image: linear-gradient(180deg, #fff8f6, #ffffff); }
/* 上のグラデーションより、生成画像（インラインstyle）を優先させるための指定は不要：インラインstyleのほうが強い */

/* タイトル周りは、背景画像の上でも読めるようにガラス風の板に載せる */
.feature-intro {
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(10px);
  border-radius: 24px; padding: 18px 24px 14px; margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(44, 34, 48, .10);
}
.tone-dark .feature-intro { background: rgba(20, 14, 48, .62); }
.tone-dark .feature-intro .page-title,
.tone-dark .feature-intro .feature-theme-title,
.tone-dark .feature-intro .page-desc { color: #fff; }
.tone-dark .feature-tab { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.tone-dark .feature-tab.active { background: #ff9a3c; border-color: #ff9a3c; color: #2a1250; }
.feature-intro .page-title { margin-bottom: 4px; }
.feature-intro .page-desc { margin: 0 0 6px; }
.feature-intro .feature-theme-title { margin-top: 12px; }
.feature-stage .feature-empty { background: rgba(255, 255, 255, .8); border-radius: 18px; padding: 22px; }

@media (max-width: 800px) { .feature-stage { background-attachment: scroll; } }

/* 縦長レイアウト：タイトル枠は固定し、商品の列だけが縦にスクロールする（feature-fx.jsが is-vscroll を付ける） */
.feature-stage.is-vscroll { height: calc(100vh - var(--fx-top, 64px)); height: calc(100dvh - var(--fx-top, 64px)); min-height: 0; padding: 0; overflow: hidden; }
.is-vscroll > .container { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 0; }
.is-vscroll .feature-intro { flex: none; margin-bottom: 12px; }
.is-vscroll .spot-grid { flex: 1; min-height: 0; margin-top: 0; padding: 14px 6px 24px; overflow-y: auto; scrollbar-width: none; }
.lay-ornament.is-vscroll .spot-grid { padding-top: 66px; }
.is-vscroll .spot-grid::-webkit-scrollbar { display: none; }
/* 高さが決まった枠の中でカードが潰れないようにする */
.is-vscroll .spot-grid { grid-auto-rows: max-content; align-content: start; }
.is-vscroll .spot-card { flex-shrink: 0; }
.lay-masonry.is-vscroll .spot-grid { display: flex; flex-direction: column; column-count: auto; gap: 22px; }
.lay-masonry.is-vscroll .spot-card, .lay-masonry.is-vscroll .spot-card:nth-child(n) { margin: 0; }
/* 固定するタイトル枠が画面を占領しすぎないよう、タブは1行の横スクロールにする */
.is-vscroll .feature-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.is-vscroll .feature-tabs::-webkit-scrollbar { display: none; }
.is-vscroll .feature-tab { flex: none; white-space: nowrap; }
.lay-zigzag .spot-grid.is-vscroll::before, .lay-zigzag.is-vscroll .spot-grid::before { display: none; }
.lay-zigzag.is-vscroll .spot-grid { background: repeating-linear-gradient(to bottom, #f7a8c6 0 8px, transparent 8px 16px) center top / 3px 16px repeat-y; background-attachment: local; }
@media (max-height: 760px) { .is-vscroll .feature-intro .page-desc { display: none; } }

/* ---------- 降る・昇る・またたく演出の粒（feature-fx.jsが生成） ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.fx-p { position: absolute; left: var(--x); top: 0; will-change: transform, opacity; user-select: none; line-height: 1; }
.fx-fall   { animation: fx-fall var(--dur) linear var(--delay) infinite; }
.fx-rise   { animation: fx-rise var(--dur) linear var(--delay) infinite; }
.fx-twinkle { top: var(--y); animation: fx-twinkle var(--dur) ease-in-out var(--delay) infinite; }
.fx-float  { animation: fx-float var(--dur) ease-in-out var(--delay) infinite; }
.fx-glyph { font-size: var(--size); }
.fx-dot   { width: var(--size); height: var(--size); border-radius: 50%; background: var(--color, #fff); }
.fx-bubble { width: var(--size); height: var(--size); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08)); }
.fx-confetti { width: var(--size); height: calc(var(--size) * .55); background: var(--color); }
.fx-rain { width: 1.5px; height: var(--size); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(120, 150, 190, .75)); }
.fx-orb { width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 160, .95), rgba(255, 200, 100, 0) 70%); }
.fx-star { width: var(--size); height: var(--size); background: #fff; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.fx-shooting { position: absolute; top: var(--y); left: -10%; width: 140px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); transform: rotate(18deg); opacity: 0; animation: fx-shoot 7s ease-in var(--delay) infinite; }

@keyframes fx-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--op, 1); }
  50%  { transform: translate3d(calc(var(--sway) * 1px), 54vh, 0) rotate(calc(var(--rot) * .5deg)); }
  100% { transform: translate3d(calc(var(--sway) * -.6px), 112vh, 0) rotate(calc(var(--rot) * 1deg)); opacity: var(--op, 1); }
}
@keyframes fx-rise {
  0%   { transform: translate3d(0, 112vh, 0) scale(.8); opacity: 0; }
  10%  { opacity: var(--op, .9); }
  50%  { transform: translate3d(calc(var(--sway) * 1px), 50vh, 0) scale(1); }
  100% { transform: translate3d(calc(var(--sway) * -.6px), -14vh, 0) scale(1.1); opacity: 0; }
}
@keyframes fx-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes fx-float {
  0%   { transform: translate3d(0, 100vh, 0); opacity: 0; }
  15%  { opacity: .9; }
  50%  { transform: translate3d(calc(var(--sway) * 1px), 50vh, 0); opacity: .6; }
  100% { transform: translate3d(calc(var(--sway) * -1px), -10vh, 0); opacity: 0; }
}
@keyframes fx-shoot { 0% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; } 4% { opacity: 1; } 12% { transform: translate3d(70vw, 24vw, 0) rotate(18deg); opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } .spot-card { animation: none !important; } }

/* ---------- 掲示レイアウト12種（.feature-stageに lay-xxx が付く） ---------- */

/* 1. glass（雪）: すりガラス風カードのグリッド */
.lay-glass .spot-card { background: rgba(255, 255, 255, .62); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .8); }
.lay-glass .spot-product { background: rgba(255, 255, 255, .55); }

/* 2. masonry（紅葉）: 段違いの組積み */
.lay-masonry .spot-grid { display: block; column-count: 3; column-gap: 22px; }
.lay-masonry .spot-card { break-inside: avoid; margin-bottom: 22px; background: #fffaf3; border-top: 5px solid #e8742a; }
.lay-masonry .spot-card:nth-child(3n + 2) { margin-top: 28px; }
.lay-masonry .spot-comment { border-left-color: #e8742a; }
.lay-masonry .spot-product { background: linear-gradient(135deg, #fff1de, #ffe3c4); }
.lay-masonry .spot-product-price, .lay-masonry .spot-head-kicker { color: #c4551a; }
@media (max-width: 900px) { .lay-masonry .spot-grid { column-count: 2; } }
@media (max-width: 560px) { .lay-masonry .spot-grid { column-count: 1; } .lay-masonry .spot-card:nth-child(3n + 2) { margin-top: 0; } }

/* 3. zigzag（桜）: 中央の点線を挟んで左右交互の時系列 */
.lay-zigzag .spot-grid { display: flex; flex-direction: column; gap: 30px; position: relative; }
.lay-zigzag .spot-grid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, #f7a8c6 0 8px, transparent 8px 16px); }
.lay-zigzag .spot-card { width: calc(50% - 30px); position: relative; background: rgba(255, 255, 255, .88); border: 2px solid #ffd0e2; }
.lay-zigzag .spot-card:nth-child(odd) { margin-right: auto; }
.lay-zigzag .spot-card:nth-child(even) { margin-left: auto; }
.lay-zigzag .spot-card::after { content: "🌸"; position: absolute; top: 18px; font-size: 22px; }
.lay-zigzag .spot-card:nth-child(odd)::after { right: -45px; }
.lay-zigzag .spot-card:nth-child(even)::after { left: -45px; }
@media (max-width: 800px) {
  .lay-zigzag .spot-grid::before { display: none; }
  .lay-zigzag .spot-card { width: 100%; }
  .lay-zigzag .spot-card::after { display: none; }
}

/* 4. ornament（クリスマス）: ツリーの飾りのように吊るしたカード */
.lay-ornament .spot-grid { padding-top: 44px; row-gap: 56px; }
.lay-ornament .spot-card { overflow: visible; border: 3px solid #d4a017; transform-origin: 50% -44px; animation: fx-swing 5s ease-in-out infinite alternate; background: #fffdf6; }
.lay-ornament .spot-card:nth-child(2n) { animation-duration: 6s; animation-delay: -1.5s; }
.lay-ornament .spot-card:nth-child(3n) { animation-duration: 4.4s; animation-delay: -3s; }
.lay-ornament .spot-card::before { content: ""; position: absolute; left: 50%; top: -44px; width: 2px; height: 44px; background: linear-gradient(#e9c46a, #b8860b); }
.lay-ornament .spot-card::after { content: "🔔"; position: absolute; left: 50%; top: -58px; transform: translateX(-50%); font-size: 18px; }
.lay-ornament .spot-head-kicker, .lay-ornament .spot-product-price { color: #b32d2e; }
.lay-ornament .spot-comment { border-left-color: #2f8f5b; }
.lay-ornament .spot-product { background: linear-gradient(135deg, #ecf8f0, #fdeaea); }
@keyframes fx-swing { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* 5. neon（ハロウィン）: 暗い背景でネオンのように光るカード */
.lay-neon .spot-card { background: rgba(20, 12, 44, .78); border: 1.5px solid #ff9a3c; box-shadow: 0 0 20px rgba(255, 140, 40, .5), inset 0 0 22px rgba(160, 80, 255, .22); }
.lay-neon .spot-card:nth-child(even) { border-color: #b57cff; box-shadow: 0 0 20px rgba(170, 100, 255, .55), inset 0 0 22px rgba(255, 140, 40, .15); }
.lay-neon .spot-head-name { color: #fff; }
.lay-neon .spot-head-kicker { color: #ffb347; }
.lay-neon .spot-comment { color: #f1e8ff; border-left-color: #ff9a3c; }
.lay-neon .spot-product { background: rgba(255, 255, 255, .08); }
.lay-neon .spot-product-name { color: #fff; }
.lay-neon .spot-product-price, .lay-neon .spot-product-arrow { color: #ffb347; }
.lay-neon .spot-product-shop { color: #cdbfe6; }

/* 6. polaroid（夏）: ポラロイド写真のように少し傾けて散らす */
.lay-polaroid .spot-grid { gap: 34px 26px; }
.lay-polaroid .spot-card { border-radius: 6px; background: #fff; padding: 6px 6px 14px; box-shadow: 0 12px 28px rgba(0, 60, 90, .22); transform: rotate(-2.2deg); position: relative; }
.lay-polaroid .spot-card:nth-child(even) { transform: rotate(1.8deg); }
.lay-polaroid .spot-card:nth-child(3n) { transform: rotate(-0.8deg); }
.lay-polaroid .spot-card:hover { transform: rotate(0) translateY(-6px) scale(1.02); }
.lay-polaroid .spot-card::before { content: ""; position: absolute; left: 50%; top: -10px; width: 74px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 224, 130, .7); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.lay-polaroid .spot-product { background: #f1fbff; }
.lay-polaroid .spot-head-kicker, .lay-polaroid .spot-product-price { color: #0a8fb8; }
.lay-polaroid .spot-comment { border-left-color: #35c4e0; }

/* 7. ribbon（パーティー）: 角にリボンが付いたカード */
.lay-ribbon .spot-card { background: #fff; border: 2px solid transparent; background-clip: padding-box; position: relative; box-shadow: 0 0 0 2px #ffb3dd, 0 14px 34px rgba(255, 93, 162, .22); }
.lay-ribbon .spot-card::after { content: "PICK"; position: absolute; top: 20px; right: -38px; width: 150px; text-align: center; transform: rotate(40deg); background: linear-gradient(90deg, #ff5da2, #ff9bc8); color: #fff; padding: 4px 0; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .24em; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.lay-ribbon .spot-product { background: linear-gradient(135deg, #fff0fa, #ece8ff); }

/* 8. tag（バレンタイン）: ハートのタグ付き2列カード */
.lay-tag .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-left: auto; margin-right: auto; }
.lay-tag .spot-card { border-radius: 36px; border: 2.5px dashed #ff7fa8; background: rgba(255, 250, 252, .92); }
.lay-tag .spot-head-name::before { content: "♥ "; color: #ff4d86; }
.lay-tag .spot-comment { border-left-color: #ff7fa8; }
.lay-tag .spot-product { background: linear-gradient(135deg, #ffeaf1, #fff6f9); }
@media (max-width: 640px) { .lay-tag .spot-grid { grid-template-columns: 1fr; } }

/* 9. carousel（星空）: 横にスワイプして見る */
.lay-carousel .spot-grid { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 6px 30px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .5) transparent; }
.lay-carousel .spot-card { flex: 0 0 min(330px, 82vw); scroll-snap-align: center; background: rgba(16, 20, 70, .72); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 0 26px rgba(120, 130, 255, .35); }
.lay-carousel .spot-grid.is-marquee { scroll-snap-type: none; }
.lay-carousel .spot-head-name, .lay-carousel .spot-product-name { color: #fff; }
.lay-carousel .spot-head-kicker { color: #9fb4ff; }
.lay-carousel .spot-comment { color: #e9ecff; border-left-color: #9fb4ff; }
.lay-carousel .spot-product { background: rgba(255, 255, 255, .09); }
.lay-carousel .spot-product-price, .lay-carousel .spot-product-arrow { color: #ffe08a; }
.lay-carousel .spot-product-shop { color: #bfc8f2; }

/* 10. magazine（雨）: 先頭を大きく見せる雑誌風 */
.lay-magazine .spot-card { background: rgba(255, 255, 255, .86); border-left: 6px solid #6f93c4; border-radius: 18px; }
.lay-magazine .spot-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; align-items: center; }
.lay-magazine .spot-card:first-child .spot-head { flex-direction: column; align-items: flex-start; padding: 22px 0 22px 22px; }
.lay-magazine .spot-card:first-child .spot-head-photo { width: 84px; height: 84px; }
.lay-magazine .spot-card:first-child .spot-head-name { font-size: 20px; }
.lay-magazine .spot-card:first-child .spot-comment { font-size: 15px; }
.lay-magazine .spot-card:first-child .spot-product-img { width: 120px; height: 120px; }
.lay-magazine .spot-head-kicker, .lay-magazine .spot-product-price { color: #3f6aa5; }
.lay-magazine .spot-comment { border-left-color: #6f93c4; }
.lay-magazine .spot-product { background: linear-gradient(135deg, #eef3fb, #e5ecf7); }
@media (max-width: 700px) { .lay-magazine .spot-card:first-child { display: flex; } .lay-magazine .spot-card:first-child .spot-head { flex-direction: row; align-items: center; padding: 18px 18px 0; } }

/* 11. spotlight（イルミネーション）: 1件ずつ大きく、光を当てるように */
.lay-spotlight .spot-grid { display: flex; flex-direction: column; gap: 26px; max-width: 780px; margin: 0 auto; }
.lay-spotlight .spot-card { flex-direction: row; align-items: stretch; background: rgba(18, 16, 44, .74); border: 1px solid rgba(255, 224, 160, .5); box-shadow: 0 0 34px rgba(255, 200, 110, .3); }
.lay-spotlight .spot-head { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px 6px 20px 20px; min-width: 120px; }
.lay-spotlight .spot-head-photo { width: 72px; height: 72px; border-color: rgba(255, 224, 160, .8); }
.lay-spotlight .spot-head-name { color: #fff; }
.lay-spotlight .spot-head-kicker { color: #ffd98a; }
.lay-spotlight .spot-body { padding: 20px 20px 20px 10px; justify-content: center; }
.lay-spotlight .spot-comment { color: #fff3da; border-left-color: #ffd98a; }
.lay-spotlight .spot-product { background: rgba(255, 255, 255, .1); }
.lay-spotlight .spot-product-name { color: #fff; }
.lay-spotlight .spot-product-price, .lay-spotlight .spot-product-arrow { color: #ffd98a; }
.lay-spotlight .spot-product-shop { color: #d9cdb4; }
@media (max-width: 640px) { .lay-spotlight .spot-card { flex-direction: column; } .lay-spotlight .spot-head { flex-direction: row; justify-content: flex-start; text-align: left; padding: 18px 18px 0; } .lay-spotlight .spot-body { padding: 14px 18px 20px; } }

/* 12. minimal（シンプル）: 細い枠線だけのすっきりしたカード */
.lay-minimal .spot-card { box-shadow: none; border: 1px solid rgba(44, 34, 48, .14); border-radius: 14px; background: #fff; }
.lay-minimal .spot-card:hover { transform: none; box-shadow: 0 6px 16px rgba(44, 34, 48, .08); }
.lay-minimal .spot-product { background: #faf7f8; border: 1px solid rgba(44, 34, 48, .08); }