/*
  おすすめポン（index）。数値は本番の実測（measured/index.md）と定義（research/layout/index.txt）。
  色: 濃 rgb(85,25,55) / 黄 rgb(255,232,105) / 青（アイスなし）rgb(101,206,255) / 行の地 rgb(255,255,224)
  BBCode の size: 1=10px 2=13px 3=16px 4=18px（本番 DOM で実測）
*/
:root { --ink: rgb(85, 25, 55); --yellow: rgb(255, 232, 105); --ice: rgb(101, 206, 255); --cream: rgb(255, 255, 224); }

.s1 { font-size: 10px; }
.s2 { font-size: 13px; }
.s3 { font-size: 16px; }
.s4 { font-size: 18px; }

/* 列: 本番 Group Z = 幅 min300 max400 で中央 */
.col { width: 100%; min-width: 300px; max-width: 400px; margin: 0 auto; }

/* 見出し画像: 本番は object-fit:fill で 列幅x96 に引き伸ばし */
.hero { width: 100%; height: 96px; object-fit: fill; }

/* 金額の段: 3つの塊を space-around（375px で 12.5/25/25/12.5、400px で 16/34/33/17 を実測） */
.pick { display: flex; justify-content: space-around; align-items: flex-start; margin-top: 13px; }
.pick-col { display: flex; flex-direction: column; gap: 17px; }
.price {
  width: 105px; height: 36px; border: 2px solid var(--ink); border-radius: 18px; background: #fff;
  font-weight: 700; color: var(--ink); line-height: 1; white-space: pre;
  display: flex; align-items: center; justify-content: center;
}
.price.is-on { background: var(--yellow); }
.price.is-on.is-ice { background: var(--ice); }

.pon-col { width: 90px; display: flex; flex-direction: column; align-items: center; }
.pon-label { width: 90px; height: 19px; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.pon { width: 70px; height: 70px; border-radius: 35px; background: var(--ink); position: relative; }
.pon img { position: absolute; left: 6px; top: 18px; width: 58px; height: 34px; }
.pon.is-bounce { animation: bounce 1s; }
/* Bubble の「callout.bounce」（animate.css 由来）と同じ動き */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  40%, 43% { transform: translate3d(0, -30px, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  70% { transform: translate3d(0, -15px, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  90% { transform: translate3d(0, -4px, 0); }
}

/* 結果（本番 Group H id=pon_result）。上 20 */
.result { margin-top: 20px; }
.thinking { font-size: 25px; font-weight: 500; line-height: 1.5; text-align: center; color: var(--yellow); }
.row { padding-bottom: 10px; }
.row-main {
  margin: 0 10px; display: flex; align-items: center; min-height: 80px;
  background: var(--cream); border: 2px solid var(--ink);
}
.row-photo { width: 76px; height: 76px; object-fit: contain; flex: 0 0 76px; }
.row-name { flex: 1 1 150px; min-width: 150px; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1.5; }
/* 名前と値段は余りを等分（本番 375px: 193/43・400px: 205/55 を実測＝差がいつも150） */
.row-price { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: right; }
.row-tax { font-size: 12px; font-weight: 700; line-height: 1; }
.row-ex { font-size: 8px; font-weight: 300; line-height: 1; }
.row-more {
  flex: 0 0 20px; width: 20px; height: 20px; margin: 0 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.row-more svg { width: 16px; height: 16px; fill: var(--ink); }
.row-detail { margin: 0 10px; background: #fff; border: 2px solid var(--ink); border-top: 0; display: flex; flex-direction: column; align-items: center; }
.row-text { align-self: stretch; padding: 10px; font-size: 12px; font-weight: 700; line-height: 1.8; white-space: pre-wrap; }
.row-close {
  margin: 10px 0; width: 65px; height: 20px; border: 2px solid var(--ink); border-radius: 10px;
  font-size: 10px; font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 2px;
}
.row-close svg { width: 12px; height: 10px; fill: var(--ink); }
/* 画像にするとき（本番 pon_total_cost=はい）は … を消し、合計を中に出す */
.result.is-capture .row-more { visibility: hidden; }

/* 合計（浮きバーと、画像用の段の両方） */
.total {
  display: flex; align-items: center; justify-content: space-between; height: 50px;
  background: var(--yellow); border: 2px solid var(--ink); font-weight: 700; line-height: 1;
}
.total-count { margin-left: 20px; white-space: pre; }   /* flex にすると " 7 " の空白が消える（本番は 19px 幅） */
.total-sum { margin-right: 20px; white-space: pre; text-align: right; }
.total--inline { margin: 10px; }

/* 結果の下（本番 Group M）: 外 0 10 100 10 */
.after { margin: 0 10px 100px; display: flex; flex-direction: column; align-items: center; }
.make-image {
  margin: 20px 0; width: 128px; height: 28px; background: var(--ink); border: 1px solid #fff; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: var(--yellow); letter-spacing: 2px;
}
.post { margin: 20px 0 50px; width: 173px; height: 63px; position: relative; display: block; text-decoration: none; color: var(--ink); }
.post-label { display: block; height: 29px; font-size: 15px; font-weight: 500; line-height: 1.5; text-align: center; }
.post-icon { position: absolute; left: 69px; top: 29px; width: 34px; height: 34px; border-radius: 17px; background: var(--ink); }
.post-icon img { position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; }
.notes { align-self: stretch; font-size: 7px; font-weight: 300; line-height: 1.5; color: rgb(43, 43, 43); }

/* 浮きバー（本番 FloatingGroup A: 下端・∨20px＋白地68px＝その中に合計 50px） */
.float { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.float-arrow { width: 20px; height: 20px; color: var(--ink); }
.float-panel { width: 100%; min-width: 300px; max-width: 400px; height: 68px; padding: 9px 10px; background: #fff; pointer-events: auto; }

/* ---- ポップアップ（本番: greyout rgba(0,0,0,.7)・本体は画面の上から 50・幅375・角10・枠2） ---- */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 20; }
.popup {
  position: absolute; left: 50%; transform: translateX(-50%); width: 375px; max-width: 100vw; z-index: 21;
  background: var(--ink); border: 2px solid var(--ink); border-radius: 10px; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.popup-close { position: absolute; left: 329px; top: 10px; width: 32px; height: 32px; }   /* 本番 331,12（枠の外から） */
.popup-close svg { width: 32px; height: 32px; fill: #fff; }

/* Popup B（実測） */
.popup--list { padding: 42px 0 20px; }
.popup-note { width: 181px; height: 19px; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; }
.popup-make {
  margin-top: 5px; width: 168px; height: 37px; background: var(--ink); border: 1px solid #fff; border-radius: 3px;
  font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 2px;
}
.grid-panel { margin-top: 20px; width: 300px; padding: 10px; background: #fff; }
.grid-panel .total { height: 50px; }
.grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 90px); gap: 5px; }
.cell { width: 90px; height: 44px; display: flex; align-items: center; background: var(--cream); border: 2px solid var(--ink); }
.cell-photo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.cell-name { margin-left: 5px; width: 41px; font-size: 8px; font-weight: 700; line-height: 1; color: var(--ink); overflow: hidden; }

/* Popup A（定義から・未実測） */
.popup--image { padding: 22px 0 20px; min-height: 575px; }
.popup-hint { width: 265px; height: 21px; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; }
.popup-shot { margin-top: 15px; width: 296px; min-height: 331px; display: flex; flex-direction: column; align-items: center; }
.popup-making { margin-top: 57px; font-size: 25px; font-weight: 500; line-height: 1.5; color: var(--yellow); }
.popup-shot img { width: 296px; height: auto; }
.post--popup { margin: 20px 0 10px; color: #fff; }
.post--popup .post-icon { background: #fff; }
.post--popup .post-icon img { left: 9px; top: 9px; width: 15px; height: 16px; }
.popup-howto { width: 327px; font-size: 10px; font-weight: 500; line-height: 1.5; text-align: center; color: var(--yellow); white-space: pre-line; }

/* =================== いちごスイーツでポン（?tab=event） ===================
   上半分（見出し〜金額の段）は本番で実測（2026-10-03, 1199px）:
     列 400 / 地＝模様 グループ15345（69x42 の繰り返し・中央起点）/ 見出し 400x393 fill /
     波 400x11（上は180°回転）/ 白帯 109（ボタンは上 10）/ 色 rgb(253,90,110)
   結果より下は本番に該当商品が無く**定義から起こした・未実測** */
:root { --pink: rgb(253, 90, 110); --brown: rgb(152, 74, 1); }
.col--event { color: var(--pink); }
.ev {
  /* 定義は 内 0 0 150 0 だが、本番の実測（結果なし）は波の下端 522 → 区画の下端 653＝131 */
  padding-bottom: 131px;
  background: url(/static/bubble/f1703228145853x717806316904329900.png) 50% 50% repeat;
}
.ev-hero { width: 100%; aspect-ratio: 1231 / 1210; height: auto; object-fit: fill; }
.ev-wave { width: 100%; height: 11px; object-fit: fill; }
.ev-wave--top { transform: rotate(180deg); }
.ev-wave:not(.ev-wave--top) { margin-top: -1px; }   /* 本番 Image T 外 -1 0 0 0（下の波は 511） */
.ev .result { margin-top: 0; }
.ev-pick { margin-top: -1px; padding: 10px 0; background: #fff; }   /* 白帯 403..512（波と1px重ねる） */
.ev-pick .price { border-color: var(--pink); color: var(--pink); }
.ev-pick .price.is-on { background: rgb(255, 255, 39); }
.ev-pick .pon-label { color: var(--pink); }
.ev-pick .pon { background: var(--pink); }

.ev-head { margin: 20px 20px -40px auto; width: fit-content; background: var(--ink); }
.ev-head img { width: 160px; height: 102px; object-fit: contain; }
.ev-thinking { color: var(--brown); }
.ev-rows { padding: 20px 0; }
.ev-rows:empty { padding: 0; }
.ev-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ev-row:nth-child(even) { flex-direction: row-reverse; }
/* 丸い写真（本番 Group BZ/MZ: 地＝商品写真・角110・枠なし・幅150〜250・高216） */
.ev-blob { flex: 1 1 200px; min-width: 150px; max-width: 250px; height: 216px; margin-left: -30px;
  background: var(--cream) center / cover no-repeat; border-radius: 110px; }
.ev-row:nth-child(even) .ev-blob { margin-left: 0; margin-right: -30px; }
.ev-item { flex: 1 1 0; min-width: 0; margin: 0 5px 0 -20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--brown); }
.ev-row:nth-child(even) .ev-item { margin: 0 -40px 0 5px; align-items: flex-end; text-align: right; }
.ev-line { width: 100%; height: auto; margin-top: -20px; }
.ev-berry { width: 150px; height: auto; }
.ev-price { margin-right: 20px; display: flex; align-items: baseline; }
.ev-row:nth-child(even) .ev-price { margin: 0 0 0 20px; }
.ev-tax { padding-top: 5px; font-size: 16px; font-weight: 700; line-height: 1; }
.ev-ex { font-size: 11px; font-weight: 400; line-height: 1; }
.ev-name { font-size: 12px; font-weight: 700; line-height: 1.5; }
.ev-make { color: #fff; }

.float--event .float-arrow { visibility: hidden; }
.float--event .float-panel { background: rgb(255, 255, 39); }
.float--event .total { background: #fff; border-color: var(--pink); border-radius: 30px; color: var(--pink); }

/* Popup C / D（いちご）。定義から・未実測 */
.popup--event .ev-grid-panel { background: rgb(255, 216, 215); }
.ev-band { width: 100%; height: auto; margin-bottom: 10px; }
.ev-total { background: #fff; border-color: var(--pink); border-radius: 20px; color: var(--pink); }
.popup--event .cell { border-color: var(--ink); }
.popup--detail { width: 355px; padding: 10px 0 20px; background: var(--pink); border-radius: 100px; }
.detail-photo { width: 210px; height: 200px; object-fit: cover; border-radius: 50px; }
.detail-box { margin-top: 10px; width: 340px; padding: 20px 30px; background: var(--ink); color: #fff; }
.detail-name { font-size: 15px; font-weight: 700; line-height: 1.5; }
.detail-price { font-size: 24px; font-weight: 500; line-height: 1.5; }
.detail-text { margin-top: 10px; width: 260px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #fff; }
.detail-close { margin-top: 15px; display: flex; align-items: center; gap: 4px; padding: 6px 16px; background: #fff; border-radius: 20px; color: var(--pink); font-weight: 700; }
.detail-close svg { width: 16px; height: 16px; fill: var(--pink); }