/* Issuance-hours notice and server-issued coupon; isolated from the event page. */
#coupon-preview-dialog.coupon-modal {
  width: min(510px, calc(100% - 28px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  margin: auto;
  padding: 26px;
  color: #fbf4f0;
  background: #191518;
  border: 1px solid #b8889a;
  border-radius: 22px;
  box-shadow: 0 28px 100px #000b;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
#coupon-preview-dialog.coupon-modal::backdrop { background: #08070bdb; backdrop-filter: blur(5px); }
#coupon-preview-dialog.coupon-modal.coupon-dialog-fallback { position: fixed; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
#coupon-preview-dialog.coupon-modal [hidden] { display: none !important; }
#coupon-preview-dialog.coupon-modal .coupon-dialog-heading { position: sticky; top: -2px; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 6px; background: #191518; }
#coupon-preview-dialog.coupon-modal .coupon-dialog-eyebrow { margin: 0; font-size: 9px; letter-spacing: .16em; color: #c99aaa; }
#coupon-preview-dialog.coupon-modal #coupon-dialog-title { margin: 5px 0 0; font-size: 24px; line-height: 1.4; letter-spacing: -.045em; }
#coupon-preview-dialog.coupon-modal .coupon-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; display: grid; place-items: center; background: #2c2228; border: 1px solid #ae829666; color: #ecd0dc; border-radius: 50%; cursor: pointer; }
#coupon-preview-dialog.coupon-modal .coupon-close svg { width: 20px; height: 20px; }
#coupon-preview-dialog.coupon-modal .coupon-dialog-description { margin: 11px 0 0; color: #c5b6bf; font-size: 12px; line-height: 1.7; word-break: keep-all; }
#coupon-preview-dialog.coupon-modal .coupon-preview-card { margin: 19px 0 18px; padding: 21px; border: 1px solid #b38b9b; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 88% 45%, #225d3c55, transparent 60%), linear-gradient(135deg, #292027, #15251c 70%, #171519); text-align: left; }
#coupon-preview-dialog.coupon-modal .coupon-card-brand { display: flex; align-items: center; gap: 9px; justify-content: flex-start; padding: 0 0 15px; border-bottom: 1px solid #c194a530; }
#coupon-preview-dialog.coupon-modal .coupon-card-brand > strong { font-size: 22px; line-height: 1; font-weight: 900; letter-spacing: .025em; }
#coupon-preview-dialog.coupon-modal .coupon-card-brand > span { font-size: 6px; letter-spacing: .08em; color: #beabb6; }
#coupon-preview-dialog.coupon-modal .coupon-card-brand .coupon-card-state { margin-left: auto; border: 1px solid #c096a666; border-radius: 20px; padding: 5px 9px; color: #e5bfd0; background: #382831; font-size: 9px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
#coupon-preview-dialog.coupon-modal[data-mode="issued"] .coupon-card-brand .coupon-card-state { background: #17402d; color: #b7e9cd; border-color: #93c5aa80; }
#coupon-preview-dialog.coupon-modal[data-mode="expired"] .coupon-card-brand .coupon-card-state { background: #392b30; color: #dbb5c2; border-color: #99728280; }
#coupon-preview-dialog.coupon-modal .coupon-card-body { position: relative; display: flex; align-items: center; min-height: 198px; padding: 14px 0 12px; }
#coupon-preview-dialog.coupon-modal .coupon-card-copy { position: relative; z-index: 1; flex: 1 1 53%; }
#coupon-preview-dialog.coupon-modal .coupon-card-tag { margin: 0 0 9px; color: #c59aaa; font-size: 9px; letter-spacing: -.015em; white-space: nowrap; }
#coupon-preview-dialog.coupon-modal .coupon-card-name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.055em; line-height: 1.5; color: #faf4ee; }
#coupon-preview-dialog.coupon-modal .coupon-card-name > strong { display: block; color: #ebc4d4; font-size: 34px; font-weight: 900; line-height: 1.15; letter-spacing: -.055em; margin-top: 3px; }
#coupon-preview-dialog.coupon-modal .coupon-modal-mascot { flex: 0 0 45%; display: block; width: 45%; max-width: 180px; height: auto; object-fit: contain; align-self: flex-end; filter: drop-shadow(0 12px 14px #0006); }
#coupon-preview-dialog.coupon-modal .coupon-card-hours { margin: 0; padding: 8px 9px; color: #d8f0e3; border: 1px solid #8ab79d80; border-radius: 30px; background: #153e2d; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub { position: relative; margin-top: 22px; padding: 17px 0 0; border-top: 1px dashed #ca9caeaa; text-align: center; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub::before, #coupon-preview-dialog.coupon-modal .coupon-card-stub::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border: 1px solid #b38b9b; border-radius: 50%; background: #191518; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub::before { left: -32px; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub::after { right: -32px; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub > span { display: block; font-size: 9px; color: #a5c6b3; letter-spacing: .13em; margin-bottom: 8px; }
#coupon-preview-dialog.coupon-modal #coupon-number { display: block; color: #f4eaf0; font-size: 16px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; word-break: normal; user-select: all; }
#coupon-preview-dialog.coupon-modal[data-mode="issued"] #coupon-number, #coupon-preview-dialog.coupon-modal[data-mode="expired"] #coupon-number { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 15px; letter-spacing: .01em; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub > p { margin: 7px 0 0; color: #b8b6ac; font-size: 10px; line-height: 1.65; }
#coupon-preview-dialog.coupon-modal .coupon-card-stub #coupon-expiry { margin-top: 10px; color: #c6e8d6; font-size: 12px; font-weight: 700; }
#coupon-preview-dialog.coupon-modal .coupon-card-preview { margin: 15px 0 0; padding: 9px 8px; color: #edc4d4; background: #d7a6ba12; border-radius: 6px; text-align: center; font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: 0; }
#coupon-preview-dialog.coupon-modal[data-mode="issued"] .coupon-card-preview { color: #bde4cd; background: #a8d3bb10; }
#coupon-preview-dialog.coupon-modal .coupon-dialog-actions { display: grid; gap: 8px; }
#coupon-preview-dialog.coupon-modal .coupon-save { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; min-height: 49px; padding: 11px 14px; border: 1px solid #bcebd4; border-radius: 10px; color: #1c4333; background: linear-gradient(120deg, #c3ead7, #a5d2bd); font-size: 14px; line-height: 1.6; font-weight: 800; cursor: pointer; }
#coupon-preview-dialog.coupon-modal .coupon-save svg { width: 20px; height: 20px; flex: 0 0 20px; }
#coupon-preview-dialog.coupon-modal .coupon-save:disabled { cursor: progress; opacity: .65; }
#coupon-preview-dialog.coupon-modal .coupon-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#coupon-preview-dialog.coupon-modal .coupon-secondary-actions:empty { display: none; }
#coupon-preview-dialog.coupon-modal .coupon-secondary-button { min-height: 44px; padding: 8px 12px; border: 1px solid #b4889c55; border-radius: 8px; color: #ddc4cf; background: #ffffff03; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; }
#coupon-preview-dialog.coupon-modal .coupon-save-status { margin: 10px 0 0; text-align: center; color: #c0afb9; font-size: 11px; line-height: 1.75; word-break: keep-all; }
#coupon-preview-dialog.coupon-modal .coupon-verify-link { display: block; width: fit-content; margin: 10px auto 0; padding: 8px 9px; color: #bfd8c9; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; line-height: 1.6; }
#coupon-preview-dialog.coupon-modal .coupon-save-fallback { margin-top: 16px; padding-top: 13px; border-top: 1px solid #ba8b9b44; color: #d3bcc7; font-size: 12px; line-height: 1.7; }
#coupon-preview-dialog.coupon-modal .coupon-save-fallback summary { min-height: 36px; cursor: pointer; }
#coupon-preview-dialog.coupon-modal .coupon-save-fallback p { margin-top: 6px; }
#coupon-preview-dialog.coupon-modal .coupon-save-fallback img { display: block; width: 100%; height: auto; max-width: 400px; margin: 13px auto 0; border-radius: 11px; }
#coupon-preview-dialog.coupon-modal button:focus-visible, #coupon-preview-dialog.coupon-modal a:focus-visible, #coupon-preview-dialog.coupon-modal summary:focus-visible { outline: 2px solid #f4c7d9; outline-offset: 4px; }

/* The unissued view is a time notice, never a downloadable coupon mockup. */
#coupon-preview-dialog.coupon-modal[data-mode="notice"] {
  padding: 25px 27px 24px;
  border-color: #c391a6;
  background: radial-gradient(ellipse at 50% 30%, #3b243a2e, transparent 68%), linear-gradient(135deg, #20181e, #151114 74%);
}
#coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-dialog-heading {
  position: relative;
  top: auto;
  display: block;
  padding-bottom: 0;
  background: none;
}
#coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-title-group { width: 100%; }
#coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-dialog-eyebrow {
  min-height: 37px;
  padding: 5px 45px 0 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
#coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-close {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-color: #bd879d88;
  background: #34232e99;
}
#coupon-preview-dialog.coupon-modal .coupon-notice-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 3px auto 15px;
  padding: 6px 13px;
  border: 1px solid #b7759199;
  border-radius: 999px;
  color: #efafc8;
  background: #633b4b66;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
#coupon-preview-dialog.coupon-modal .coupon-notice-badge svg { flex: 0 0 17px; width: 17px; height: 17px; }
#coupon-preview-dialog.coupon-modal[data-mode="notice"] #coupon-dialog-title {
  margin: 0;
  color: #ffedeF;
  font-size: clamp(28px, 6vw, 35px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.055em;
  white-space: pre-line;
  text-align: center;
  word-break: keep-all;
}
#coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-dialog-description {
  margin: 11px 0 0;
  color: #eadde3;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}
#coupon-preview-dialog.coupon-modal .coupon-time-notice { text-align: center; }
#coupon-preview-dialog.coupon-modal .coupon-notice-art {
  display: block;
  width: 258px;
  max-width: 77%;
  height: 183px;
  margin: 10px auto 7px;
  object-fit: contain;
  filter: drop-shadow(0 11px 15px #0005);
}
#coupon-preview-dialog.coupon-modal .coupon-notice-art-fallback { width: 160px; }
#coupon-preview-dialog.coupon-modal .coupon-notice-schedule {
  padding: 16px 12px 15px;
  border: 1px solid #afe5c9;
  border-radius: 17px;
  background: radial-gradient(ellipse at 50% 35%, #24654377, transparent 80%), linear-gradient(120deg, #123325, #14231d);
  box-shadow: 0 0 22px #4f9a7020, inset 0 0 18px #21513924;
}
#coupon-preview-dialog.coupon-modal .coupon-notice-schedule p { margin: 0; }
#coupon-preview-dialog.coupon-modal #coupon-notice-label { color: #b6e7cc; font-size: 13px; line-height: 1.5; font-weight: 600; }
#coupon-preview-dialog.coupon-modal #coupon-notice-opening {
  display: block;
  margin-top: 4px;
  color: #c4f4da;
  font-size: clamp(22px, 5.7vw, 29px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.4;
  word-break: keep-all;
}
#coupon-preview-dialog.coupon-modal[data-notice-state="upcoming"] #coupon-notice-opening { font-size: clamp(20px, 5.3vw, 26px); }
#coupon-preview-dialog.coupon-modal #coupon-notice-hours { margin-top: 7px; color: #f0f4ee; font-size: 11px; line-height: 1.6; font-weight: 600; word-break: keep-all; }
#coupon-preview-dialog.coupon-modal .coupon-notice-benefit { margin: 13px 0 17px; color: #dbc9d2; font-size: 12px; line-height: 1.6; }
#coupon-preview-dialog.coupon-modal .coupon-notice-action {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid #e3afc4;
  border-radius: 10px;
  color: #f4dee8;
  background: linear-gradient(120deg, #39273188, #261e2688);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  cursor: pointer;
}
#coupon-preview-dialog.coupon-modal .coupon-notice-action:hover { background: #51344277; }
#coupon-preview-dialog.coupon-modal .coupon-notice-action:disabled { opacity: .6; cursor: progress; }
#coupon-preview-dialog.coupon-modal[data-notice-state="open"] .coupon-notice-action { color: #153b2b; border-color: #c1efd8; background: #b5e5ce; }
#coupon-preview-dialog.coupon-modal[data-notice-state="connection"] #coupon-notice-opening { font-size: clamp(19px, 4.7vw, 25px); }
#coupon-preview-dialog.coupon-modal[data-notice-state="ended"] .coupon-notice-art { opacity: .85; }

@media (max-width: 400px) {
  #coupon-preview-dialog.coupon-modal { width: calc(100% - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 18px; }
  #coupon-preview-dialog.coupon-modal #coupon-dialog-title { font-size: 22px; }
  #coupon-preview-dialog.coupon-modal .coupon-preview-card { padding: 17px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-body { min-height: 176px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-name { font-size: 19px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-name > strong { font-size: 29px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-tag { font-size: 8px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-hours { font-size: 10px; padding-inline: 5px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-brand > span:not(.coupon-card-state) { display: none; }
  #coupon-preview-dialog.coupon-modal .coupon-card-stub::before { left: -28px; }
  #coupon-preview-dialog.coupon-modal .coupon-card-stub::after { right: -28px; }
  #coupon-preview-dialog.coupon-modal[data-mode="issued"] #coupon-number, #coupon-preview-dialog.coupon-modal[data-mode="expired"] #coupon-number { font-size: 13px; }
  #coupon-preview-dialog.coupon-modal[data-mode="notice"] { padding: 18px 19px 19px; }
  #coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-dialog-eyebrow { min-height: 33px; font-size: 8px; letter-spacing: .12em; }
  #coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-close { top: -4px; right: -5px; }
  #coupon-preview-dialog.coupon-modal .coupon-notice-badge { margin-bottom: 12px; font-size: 11px; }
  #coupon-preview-dialog.coupon-modal[data-mode="notice"] #coupon-dialog-title { font-size: 28px; }
  #coupon-preview-dialog.coupon-modal[data-mode="notice"] .coupon-dialog-description { margin-top: 9px; font-size: 11px; }
  #coupon-preview-dialog.coupon-modal .coupon-notice-art { width: 220px; height: 156px; margin-top: 6px; }
  #coupon-preview-dialog.coupon-modal .coupon-notice-schedule { padding: 13px 9px; border-radius: 13px; }
  #coupon-preview-dialog.coupon-modal #coupon-notice-opening { font-size: 23px; }
  #coupon-preview-dialog.coupon-modal[data-notice-state="upcoming"] #coupon-notice-opening { font-size: 21px; }
  #coupon-preview-dialog.coupon-modal #coupon-notice-label { font-size: 12px; }
  #coupon-preview-dialog.coupon-modal #coupon-notice-hours { font-size: 10px; }
  #coupon-preview-dialog.coupon-modal .coupon-notice-benefit { margin: 11px 0 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #coupon-preview-dialog.coupon-modal *, #coupon-preview-dialog.coupon-modal *::before, #coupon-preview-dialog.coupon-modal *::after { animation: none !important; transition: none !important; }
}