/*
 * クーポン（coupon.php + js/coupon.js）。1 枚ずつ券の形（店ページのクーポン欄 .shop-coupon と同じ語彙）。
 *   左の本体: 写真・店名・特典・期限。店頭の QR から来た人は店名で自分の店を探すので、店名を特典の上に置く。
 *   右の半券: 切り取り線と切り欠きの向こう。色で種類を分ける（1回限り = 黄、何度でも = 桃）。種類は縦書き。
 * 券全体が 1 つのボタン（中にリンクやボタンを置かない。店ページへのリンクはダイアログの下）。半券の「使う」「見せる」は押せると分かるよう塗りの札にする（2026-11-08）。
 * 使用済みは .is_used（判子を押す）、押した直後は .just_used（判子の動き）。
 */

/* 半券の色（--stub）: 1回限り = 黄、何度でも = 淡い桃。券・下の見分け方・ダイアログの上端の帯で同じ色を使う */
.coupon_card, .coupon-guide, .coupon_modal { --stub: var(--c-ticket-yellow); }
.is_multi, .coupon_modal.is_show { --stub: var(--c-ticket-pink-pale); }   /* ダイアログは「何度でも」のとき .is_show */

/* ===== 見出し =====
   1 枚の大きな券。本体は濃いローズの地に白抜きの「クーポン」と、小さく COUPON。点線の切り取り線の向こうの半券（券の黄色）に枚数。
   切り取り線の上下には、下の券と同じくページの地色の切り欠き。本体には細い白の点線の枠を内側に引いて、印刷物の券らしく */
.coupon-hero {
  position: relative;
  display: flex;
  max-width: 34rem;
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--c-paper);
  font-weight: 500;
  line-height: 1.1;
  filter: drop-shadow(0 2px 0 rgb(142 92 88 / 0.18));
}
.coupon-hero__main {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-rose-deep);
  border-radius: 0.5rem 0 0 0.5rem;
}
/* 内側の点線の枠 */
.coupon-hero__main::before {
  content: "";
  position: absolute; inset: 0.375rem 0.5rem 0.375rem 0.375rem;
  border: 1px dashed rgb(255 255 255 / 0.45);
  border-radius: 0.3rem;
  pointer-events: none;
}
.coupon-hero__en { font-size: var(--fs-xs); letter-spacing: 0.4em; color: var(--c-rose-pale); }
.coupon-hero__ja { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); letter-spacing: 0.14em; white-space: nowrap; }
/* 幅の狭いスマホ（〜360px）では「クーポン」が折り返していたので、余白と字間を詰める */
@media (max-width: 360px) {
  .coupon-hero__main { padding-inline: var(--sp-4); }
  .coupon-hero__ja { font-size: 1.875rem; letter-spacing: 0.06em; }
  .coupon-hero__stub { width: 4.25rem; }
}
.coupon-hero__stub {
  position: relative;
  flex: none;
  width: clamp(5rem, 4rem + 4vw, 6.5rem);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-ticket-yellow);
  border-left: 2px dashed var(--c-rose);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--c-rose-deep);
}
.coupon-hero__num { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1; }
.coupon-hero__unit { margin-left: 0.1em; font-size: var(--fs-md); }
/* 切り取り線の上下の切り欠き。地色の半円を重ねるのではなく mask で本当にくり抜く。重ねる方法だと、
   h1 の drop-shadow が切り欠きの下にもまっすぐ付き、切れ目で影が途切れず変に見えた（2026-11-07、担当）。
   左右の 2 枚それぞれを、境目の上下で半円ずつくり抜く（上半分・下半分に 1 つずつ円の穴の絵を置く） */
.coupon-hero__main, .coupon-hero__stub {
  --notch: 0.625rem;
  -webkit-mask: var(--notch-top) top / 100% 51% no-repeat, var(--notch-bottom) bottom / 100% 51% no-repeat;
  mask: var(--notch-top) top / 100% 51% no-repeat, var(--notch-bottom) bottom / 100% 51% no-repeat;
}
.coupon-hero__main {
  --notch-top: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  --notch-bottom: radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
}
.coupon-hero__stub {
  --notch-top: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  --notch-bottom: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
}

.coupon-lead { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

/* ===== 券の組（?shop= で開いたとき: 「◯◯のクーポン」→「ほかのお店のクーポン」） ===== */
.coupon-group__title { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-md); color: var(--c-rose-deep); }
.coupon-lead + .coupon-group__title { margin-top: 0; }

/* ===== 種類の見分け方（一覧の下。2026-11-10 に上から移した） ===== */
.coupon-guide { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); font-size: var(--fs-sm); }
.coupon-guide > div { display: flex; align-items: baseline; gap: var(--sp-3); }
.coupon-guide dt {
  flex: none;
  /* 「1回限り」と「何度でも」で幅をそろえる（「1」が全角より細く、前者が短かった。2026-11-07） */
  min-width: 6.5em;   /* 枠線・余白込み（border-box）。「何度でも」がちょうど収まる幅 */
  text-align: center;
  padding: 0 0.6rem 0 0.7rem;
  background: var(--stub);
  border-left: 2px dashed var(--c-rose-pale);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--c-ink);
}
.coupon-guide dd { margin: 0; }

/* PC で本文を全幅にすると、券 1 枚が 540px ほどになり中身の右が大きく空く。券 2 列（1 枚 414px ほど）に収まる幅に絞る */
.page.coupon-page { max-width: 56rem; }

/* ===== 券 ===== */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--sp-4) var(--sp-5); }

.coupon_card {
  position: relative;
  display: flex;
  background: var(--c-paper);
  border: var(--rule);
  border-radius: 0.375rem;
  cursor: pointer;
  scroll-margin-top: var(--sp-4);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
@media (prefers-reduced-motion: reduce) { .coupon_card { transition: none; } .coupon_card.coupon_card:not(.is_used):hover { transform: none; } }
.coupon_card:target { outline: 3px solid var(--c-rose); outline-offset: 3px; }
.coupon_card:focus-visible { outline: 3px solid var(--c-rose-deep); outline-offset: 3px; }

.ticket__main { flex: 1; min-width: 0; display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: 0.375rem 0 0 0.375rem; transition: background-color .15s; }
.ticket__photo { flex: none; width: 5rem; height: 5rem; object-fit: cover; border-radius: 0.25rem; background: var(--c-sakura-deep); }
.ticket__text { min-width: 0; display: flex; flex-direction: column; }
.shop_name { font-size: var(--fs-sm); font-weight: 400; color: var(--c-rose-deep); }
.benefit { margin-top: 0.1rem; font-size: clamp(1rem, 0.4rem + 2.4vw, var(--fs-lg)); /* 幅 360px のスマホで 1 行に 10 文字ほど入るように（19px だと 8 文字で、カタカナ語の途中で折れた）。長い文面はデータに改行を入れる（sql/coupons_2026.sql） */ line-height: 1.45; color: var(--c-ink); word-break: keep-all; overflow-wrap: anywhere; } /* データの改行は <wbr>（lib/coupons.php の coupon_benefit_html）。keep-all で字の間では折らず、1 行に入らないときだけ <wbr> の所で折る。それでも入らない長い語は端で折る（anywhere） */
.ticket__comment { margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--c-ink); }
.ticket__foot { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.coupon_used_date { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.coupon_used_date:empty { display: none; }

/* 半券: 切り取り線（点線）と、上下の切り欠き（ページの地色の半円） */
.ticket__stub {
  position: relative;
  flex: none;
  width: 3.625rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  background: var(--stub);
  border-left: 2px dashed var(--c-rose-pale);
  border-radius: 0 0.3rem 0.3rem 0;
  color: var(--c-ink);
}
.ticket__stub::before, .ticket__stub::after {
  content: "";
  position: absolute; left: -0.5rem;
  width: 0.875rem; height: 0.4375rem;
  background: var(--c-sakura);
  border: var(--rule);
}
.ticket__stub::before { top: -1px; border-top: 0; border-radius: 0 0 0.5rem 0.5rem; }
.ticket__stub::after { bottom: -1px; border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; }
.ticket__kind { writing-mode: vertical-rl; text-orientation: upright; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.08em; }
/* 押せると分かるように、下線の文字ではなく塗りの札（ボタンの .btn--solid と同じ色）。券全体が押せるので、これ自体は飾り */
.ticket__act {
  padding: 0.3rem 0.4rem;
  background: var(--c-rose-deep);
  color: var(--c-paper);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;   /* 本文の字間のままだと「見せる」が半券からはみ出した */
  white-space: nowrap;
  box-shadow: 0 2px 0 rgb(90 70 69 / 0.25);
}
@media (hover: hover) and (pointer: fine) {
  /* 券は白いまま縁が濃くなり（切り欠きの線も）、「使う」の札が反転する */
  .coupon_card:not(.is_used):hover,
  .coupon_card:not(.is_used):hover .ticket__stub::before,
  .coupon_card:not(.is_used):hover .ticket__stub::after { border-color: var(--c-rose-deep); }
  /* 店カードと同じに 3px 持ち上げて影を付ける（縁の色だけでは変化が小さすぎた。ユーザー 2026-11-11）。::before は下の端でカーソルが外れないための当たり判定 */
  .coupon_card:not(.is_used):hover { transform: translateY(-3px); box-shadow: 0 5px 0 rgb(142 92 88 / 0.25); }
  /* ::before は当たり判定と、下の切り欠きの真下の影を消す面（css/components.css の .shop-coupon と同じ） */
  .coupon_card:not(.is_used):hover::before { content: ""; position: absolute; inset: 0 0 -6px; background: linear-gradient(var(--c-sakura), var(--c-sakura)) right calc(3.25rem - 2px) bottom 0 / 0.875rem 5px no-repeat; }
  .coupon_card:not(.is_used):hover .ticket__act { background: var(--c-paper); color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 2px 0 rgb(90 70 69 / 0.25); }
}

/* ===== 使用済み ===== */
.coupon_card.is_used { cursor: default; }
.coupon_card.is_used .ticket__photo,
.coupon_card.is_used .benefit,
.coupon_card.is_used .ticket__stub { filter: grayscale(1); opacity: 0.5; }
.coupon_card.is_used .ticket__act { visibility: hidden; }

.coupon-stamp {
  position: absolute; top: 50%; right: 4.625rem;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  width: 6.5rem; height: 6.5rem;
  margin-top: -3.25rem;
  border: 4px double #b8403a;
  border-radius: 50%;
  color: #b8403a;
  background: rgb(255 255 255 / 0.85);
  transform: rotate(-14deg);
  line-height: 1.2;
  pointer-events: none;
}
.coupon_card.is_used .coupon-stamp { display: flex; }
.coupon-stamp__top, .stamp_date { font-size: var(--fs-xs); }
.coupon-stamp__main { font-size: 1.25rem; margin: 0.15rem 0; letter-spacing: 0.1em; }
.coupon_card.just_used .coupon-stamp { animation: coupon-stamp .35s cubic-bezier(.3, 1.6, .6, 1) both; }
@keyframes coupon-stamp {
  from { transform: rotate(-14deg) scale(1.8); opacity: 0; }
  to { transform: rotate(-14deg) scale(1); opacity: 1; }
}

/* ===== 使用確認 / 拡大表示のダイアログ ===== */
.coupon_modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgb(90 70 69 / 0.55);
}
.coupon_modal[hidden] { display: none; }
/* 上端に券の半券と同じ色の帯（--stub。このファイルの先頭） */
.coupon-modal__box { width: 100%; max-width: 24rem; background: var(--c-paper); border: var(--rule); border-top: 0.5rem solid var(--stub); padding: var(--sp-5); text-align: center; }
.coupon-modal__title { font-size: var(--fs-lg); color: var(--c-rose-deep); }
.coupon-modal__shop { margin-top: var(--sp-3); }
/* 特典は行ごとにマーカーを引く（折り返しても塊にならない） */
.coupon-modal__benefit { white-space: pre-line; margin-top: var(--sp-1); font-size: var(--fs-lg); line-height: 1.5; }
.coupon-modal__benefit span { background: linear-gradient(transparent 60%, var(--stub) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.coupon-modal__period { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.coupon-modal__text { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.coupon-modal__btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.coupon-modal__btns .btn { flex: 1; }
.coupon-modal__btns .btn[hidden] { display: none; }
/* お店のページへ（券の中から移した。主な操作ではないので小さく） */
.coupon-modal__more { margin-top: var(--sp-4); font-size: var(--fs-sm); }

/* 「何度でも」の拡大表示: お店の方に見せるので、店名と特典を大きく */
.coupon_modal.is_show .coupon-modal__shop { font-size: var(--fs-xl); }
.coupon_modal.is_show .coupon-modal__benefit { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
.coupon_modal.is_show .coupon-modal__period { font-size: var(--fs-sm); }