/* Reference: references/coupon-popup-reference.png. */
body:has(.coupon-dialog[open]) { overflow: hidden; }
.coupon-dialog {
  --coupon-unit: min(1px, calc((100vw - 32px) / 350));
  width: calc(var(--coupon-unit) * 350);
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 38px 0 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-site);
}
.coupon-dialog[open] { display: flex; flex-direction: column; }
.coupon-dialog::backdrop { background: rgb(255 255 255 / 72%); }
.coupon-close {
  position: absolute;
  top: -2px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.coupon-close img { width: 24px; height: 24px; }
.coupon-close:hover { opacity: .65; }
.coupon-card {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: calc(var(--coupon-unit) * 11);
  background: #fff;
  box-shadow: 0 3px 24px rgb(0 0 0 / 45%);
  animation: coupon-appear .22s ease-out;
}
.coupon-content { padding: calc(var(--coupon-unit) * 15) calc(var(--coupon-unit) * 14) 0; text-align: center; }
.coupon-logo { width: calc(var(--coupon-unit) * 70); height: auto; margin: 0 auto; }
.coupon-limited {
  display: table;
  margin: calc(var(--coupon-unit) * 20) auto 0;
  padding: calc(var(--coupon-unit) * 4) calc(var(--coupon-unit) * 13);
  background: #8c8c90;
  color: #fff;
  font-size: calc(var(--coupon-unit) * 16);
  font-weight: 700;
  line-height: 1.3;
}
.coupon-title {
  margin: calc(var(--coupon-unit) * 12) 0 0;
  font-size: calc(var(--coupon-unit) * 30);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .07em;
  white-space: nowrap;
}
.coupon-offer {
  margin-top: calc(var(--coupon-unit) * 8);
  min-height: calc(var(--coupon-unit) * 168);
  padding: calc(var(--coupon-unit) * 13) calc(var(--coupon-unit) * 10) calc(var(--coupon-unit) * 10);
  border: calc(var(--coupon-unit) * 3) solid var(--accent);
  border-radius: calc(var(--coupon-unit) * 10);
  background: var(--accent-surface);
  color: var(--accent);
}
.coupon-amount-row { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.coupon-amount-prefix { display: flex; flex-direction: column; align-items: center; padding-bottom: calc(var(--coupon-unit) * 13); }
.coupon-yen { margin-top: calc(var(--coupon-unit) * 6); font-size: calc(var(--coupon-unit) * 27); font-weight: 700; line-height: 1; }
.coupon-amount {
  font-family: "din-2014", sans-serif;
  font-size: calc(var(--coupon-unit) * 100);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  text-shadow: calc(var(--coupon-unit) * 3) calc(var(--coupon-unit) * 6) 0 rgb(252 18 2 / 23%);
}
.coupon-offer-caption { margin-top: calc(var(--coupon-unit) * 9); text-align: right; font-size: calc(var(--coupon-unit) * 22); font-weight: 900; line-height: 1.2; letter-spacing: -.04em; }
.coupon-benefits-heading { display: flex; align-items: center; gap: calc(var(--coupon-unit) * 5); margin: calc(var(--coupon-unit) * 20) calc(var(--coupon-unit) * 14) 0; color: #777; font-size: calc(var(--coupon-unit) * 10); font-weight: 700; line-height: 1.6; }
.coupon-benefits-heading::before, .coupon-benefits-heading::after { content: ""; flex: 1; height: 1px; background: #9b9b9f; }
.coupon-benefits { position: relative; margin-top: calc(var(--coupon-unit) * 14); padding-bottom: calc(var(--coupon-unit) * 16); }
.coupon-benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--coupon-unit) * 6); padding-right: calc(var(--coupon-unit) * 64); list-style: none; }
.coupon-benefit-icon { display: flex; align-items: center; justify-content: center; width: calc(var(--coupon-unit) * 46); height: calc(var(--coupon-unit) * 46); margin: 0 auto calc(var(--coupon-unit) * 7); border-radius: 50%; background: var(--accent-surface); }
.coupon-benefit-icon img { width: calc(var(--coupon-unit) * 21); height: calc(var(--coupon-unit) * 21); opacity: .57; }
.coupon-benefit-copy { color: #8c8c90; font-size: max(9px, calc(var(--coupon-unit) * 9.5)); font-weight: 700; line-height: 1.5; }
.coupon-benefit-copy strong { display: block; color: var(--ink); font-weight: 700; }
.coupon-person { position: absolute; right: calc(var(--coupon-unit) * -9); bottom: calc(var(--coupon-unit) * -3); width: calc(var(--coupon-unit) * 75); height: calc(var(--coupon-unit) * 75); object-fit: contain; transform: scaleX(-1); pointer-events: none; }
.coupon-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--coupon-unit) * 9);
  min-height: max(48px, calc(var(--coupon-unit) * 52));
  padding: calc(var(--coupon-unit) * 14) calc(var(--coupon-unit) * 12);
  background: #06c755;
  color: #fff;
  font-size: max(14px, calc(var(--coupon-unit) * 17));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.coupon-cta-line-icon { flex: none; width: calc(var(--coupon-unit) * 28); height: calc(var(--coupon-unit) * 28); object-fit: contain; }
.coupon-cta-arrow { flex: none; width: calc(var(--coupon-unit) * 12); height: calc(var(--coupon-unit) * 15); filter: brightness(0) invert(1); }
.coupon-cta:hover { background: #05b34c; }
.coupon-cta:focus-visible { outline: 3px solid #000; outline-offset: -5px; }
@keyframes coupon-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .coupon-card { animation: none; } }