/* ============================================================
   copy-flow.css ── 「見て選ぶ → コピーする → AIに貼る」版の上乗せCSS
   ------------------------------------------------------------
   ・style.css / usage-flow.css / rich.css の後ろに読み込みます。
   ・新しく足したのは、絞り込みチップ・コピーボタン・
     モーダル下部・スマホ2カラム一覧まわりだけです。
   ・白ベース／黒が主役／蛍光イエローがアクセント、は元のまま。
   ============================================================ */

:root {
  --cf-accent: #e7ff00;
  --cf-accent-line: #c9df00;
  --cf-ink: #121212;
  --cf-muted: #6e6e69;
  --cf-line: #d9d9d4;
}

/* ------------------------------------------------------------
   ヘッダー：導線は「チラシプロンプトを探す」の一本だけ
   ------------------------------------------------------------ */
.header-nav {
  display: flex;
}

.header-nav button,
.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cf-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.header-nav button:hover,
.header-nav button:focus-visible,
.header-nav a:hover,
.header-nav a:focus-visible {
  border-color: var(--cf-ink);
  background: var(--cf-accent);
  color: var(--cf-ink);
}

.footer-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 利用規約ページのロゴはリンク（<a>）なので、下線を消しておく */
a.brand {
  text-decoration: none;
}

/* ------------------------------------------------------------
   ヒーロー下のボタン
   ------------------------------------------------------------ */
.hero-cta {
  display: grid;
  justify-items: center;
  width: min(100%, 420px);
  margin: 22px auto 0;
  padding: 15px 24px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hero-cta span {
  color: #4f5a00;
  font-size: 10px;
  font-weight: 600;
}

.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
}

/* ------------------------------------------------------------
   利用規約ページ（terms.html）
   トップと同じ白ベース・黒主役・蛍光イエローのトーンで組んでいます。
   ------------------------------------------------------------ */
.terms-page {
  background: var(--cf-bg, #ffffff);
  color: var(--cf-ink);
}

.terms-shell {
  padding-block: 46px 90px;
  max-width: 820px;
}

.terms-head {
  padding-bottom: 26px;
  border-bottom: 2px solid var(--cf-ink);
}

.terms-head h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.terms-lead {
  margin: 16px 0 0;
  color: #3b3b38;
  font-size: 13.5px;
  line-height: 1.95;
}

.terms-date {
  margin: 14px 0 0;
  color: var(--cf-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.terms-block {
  padding-block: 26px;
  border-bottom: 1px solid var(--cf-line);
}

.terms-block h2 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 14px;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.terms-block h2::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 5px;
  background: var(--cf-accent);
}

.terms-block ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
}

.terms-block li {
  position: relative;
  margin-bottom: 9px;
  color: #3b3b38;
  font-size: 13.5px;
  line-height: 1.9;
}

.terms-block li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: -1.2em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9d200;
}

.terms-note {
  margin: 0;
  color: #3b3b38;
  font-size: 13.5px;
  line-height: 2.1;
}

.terms-block a {
  color: var(--cf-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #c9d200;
  text-decoration-thickness: 2px;
}

/* 公開前に埋めていただく箇所 */
.terms-fill {
  padding: 1px 8px;
  background: #fbffd0;
  box-shadow: inset 0 -1px 0 #c9d200;
}

.terms-back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 34px;
  padding: 13px 28px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.terms-back:hover {
  background: var(--cf-ink);
  color: #ffffff;
}

/* ------------------------------------------------------------
   使い方アニメ：画面幅に合わせてステージを拡大／縮小する
   ------------------------------------------------------------
   .uf-stage は 240×116px の固定サイズで組んであり、中身も px 指定です。
   構造を触らずに大きさだけ変えたいので、ステージごと拡大縮小しています。
   ・transform は場所を取らないので、増えた高さ分だけ margin-bottom で補います
     （116px × (倍率 − 1)）。
   ・倍率は「1カラムの内側の幅」に収まる値。はみ出すと .uf-step の
     overflow: hidden で切れてしまうため、幅が変わる境目ごとに決めています。
   ------------------------------------------------------------ */
.uf-stage {
  /* 240px の箱を、カラム幅に関係なくいつも中央に置く。
     （margin:auto だとカラムより広いときに中央からずれ、
       拡大縮小の基準点までずれてしまうため） */
  left: 50%;
  margin-right: 0;
  margin-left: -120px;
  transform-origin: top center;
}

/* タブレット幅：3カラムになると1枚あたりが狭く、そのままでは切れる */
@media (min-width: 640px) and (max-width: 767px) {
  .uf-stage {
    margin-bottom: -44px;
    transform: scale(0.62);
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .uf-stage {
    margin-bottom: -23px;
    transform: scale(0.8);
  }
}

/* PC：カラムに余裕が出るぶん、はっきり見えるところまで拡大する */
@media (min-width: 1100px) {
  .catalog-intro,
  .uf-flow {
    max-width: 1120px;
  }

  .uf-stage {
    margin-bottom: 29px;
    transform: scale(1.25);
  }

  .uf-title {
    font-size: 16px;
  }

  .uf-note {
    font-size: 11.5px;
  }

  .uf-step:nth-child(3) .uf-title {
    font-size: 16px;
  }

  .uf-step:nth-child(3) .uf-note {
    font-size: 11.5px;
  }
}

@media (min-width: 1240px) {
  .catalog-intro,
  .uf-flow {
    max-width: 1280px;
  }

  .uf-stage {
    margin-bottom: 52px;
    transform: scale(1.45);
  }
}

@media (min-width: 1400px) {
  .uf-stage {
    margin-bottom: 64px;
    transform: scale(1.55);
  }
}

/* ------------------------------------------------------------
   使い方アニメ STEP2：「TXT」から「PROMPT」に変えた分の微調整
   （構造・動きはそのまま、文字がカードからはみ出さないようにするだけ）
   ------------------------------------------------------------ */
.uf-file-label {
  left: 7px;
  font-size: 8px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   使い方アニメ STEP3：順番を「貼る → AIが質問 → チラシ」に直す
   ------------------------------------------------------------
   元は2枚のチップが同時にAIへ飛び込む形でしたが、
   掲載情報は貼る前には無いので、順番を組み直しています。
   ・uf-chip-a ＝ 貼り付けるチラシプロンプト（左からAIへ入る）
   ・uf-chip-b ＝ AIが返す質問の吹き出し（AIの上に出る）
   ・uf-out    ＝ できあがるチラシ（質問のあとに出る）
   クラス名・DOMの入れ子・.uf-stage のサイズ・is-active の仕組みは
   そのままで、位置と再生タイミングだけを差し替えています。
   ------------------------------------------------------------ */
.uf-chip-a {
  top: 46px;
}

/* AIの吹き出し（上に出る。しっぽを出すので overflow は解除） */
.uf-chip-b {
  top: 0;
  left: 84px;
  width: 140px;
  height: 26px;
  overflow: visible;
  border-color: var(--uf-ink);
  color: var(--uf-ink);
  font-weight: 800;
}

.uf-chip-b::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 54px;
  width: 9px;
  height: 9px;
  transform: translateY(-5px) rotate(45deg);
  border-right: 1px solid var(--uf-ink);
  border-bottom: 1px solid var(--uf-ink);
  background: var(--uf-surface);
}

.uf-step.is-active .uf-chip-a {
  animation: uf-chip calc(var(--uf-duration) * 0.47) cubic-bezier(0.4, 0, 0.2, 1)
    calc(var(--uf-duration) * 0.02) both;
}

.uf-step.is-active .uf-chip-b {
  animation: cf-ask calc(var(--uf-duration) * 0.5) cubic-bezier(0.2, 0.9, 0.25, 1.35)
    calc(var(--uf-duration) * 0.5) both;
}

/* プロンプトが入った瞬間にAIが反応する */
.uf-step.is-active .uf-core {
  animation: uf-pulse 900ms ease calc(var(--uf-duration) * 0.42);
}

/* 質問のあとにチラシができあがる */
.uf-step.is-active .uf-out {
  animation: uf-out 620ms cubic-bezier(0.2, 0.9, 0.25, 1.4) calc(var(--uf-duration) * 0.74) forwards;
}

.uf-step.is-active .uf-spark-1 {
  animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.79) forwards;
}

.uf-step.is-active .uf-spark-2 {
  animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.83) forwards;
}

.uf-step.is-active .uf-spark-3 {
  animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.87) forwards;
}

@keyframes cf-ask {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.86);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 停止中（次に何が起きるか）の見せ方も、順番に合わせておく */
.uf-step:not(.is-active) .uf-chip-b {
  opacity: 1;
}

/* ------------------------------------------------------------
   絞り込み（固定カテゴリのチップ方式）
   ------------------------------------------------------------
   ・開閉は .filter-shell.is-open だけで決まります。
   ・チップは button + aria-pressed。開いたまま何個でも選べます。
   ------------------------------------------------------------ */
.facet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.facet-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cf-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  gap: 9px;
  transition: border-color 180ms ease, background 180ms ease;
}

.facet-toggle::after {
  content: "開く";
  color: var(--cf-muted);
  font-size: 10px;
  font-weight: 600;
}

.facet-toggle[aria-expanded="true"] {
  border-color: var(--cf-ink);
}

.facet-toggle[aria-expanded="true"]::after {
  content: "閉じる";
}

.facet-toggle:hover {
  border-color: var(--cf-ink);
}

.facet-toggle-count {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--cf-ink);
  border-radius: 50%;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 11px;
  font-weight: 800;
}

/* 絞り込み中だけ出る「該当 ◯件」。
   見出し横の件数はカタログの総数なので、そちらは動かしません。 */
.facet-result {
  margin: 0;
  padding: 8px 2px;
  color: var(--cf-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.filter-clear {
  padding: 8px 4px;
  color: var(--cf-muted);
  font-size: 12px;
}

.facet-panel {
  display: none;
}

.filter-shell.is-open .facet-panel {
  display: grid;
  margin-top: 12px;
  padding: 16px 16px 6px;
  border: 1px solid var(--cf-line);
  background: #fafaf8;
  gap: 14px;
}

.facet-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.facet-group-label {
  margin: 0;
  color: var(--cf-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.facet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.facet-chip {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid #c7c7c1;
  border-radius: 999px;
  background: #ffffff;
  color: #3b3b38;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.facet-chip:hover {
  border-color: var(--cf-ink);
}

.facet-chip[aria-pressed="true"] {
  border-color: var(--cf-ink);
  background: var(--cf-accent);
  color: var(--cf-ink);
}

.facet-chip[aria-pressed="true"]::after {
  content: " ✓";
  font-size: 10px;
}

.active-filter-list {
  gap: 7px;
}

.active-filter-list button {
  padding: 6px 11px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.active-filter-list button span {
  margin-left: 5px;
  font-size: 11px;
}

@media (min-width: 700px) {
  .facet-group {
    grid-template-columns: 62px 1fr;
    align-items: start;
    gap: 12px;
  }

  .facet-group-label {
    padding-top: 11px;
  }
}

/* ------------------------------------------------------------
   カード：コピーが主役
   ------------------------------------------------------------
   説明文とタグの間が空きすぎると、タグが下の段のカードのものに
   見えてしまうので、説明の高さ確保（min-height）はやめて詰めます。
   代わりにカードを縦のフレックスにして、コピーボタンだけを
   カード下端に揃えています（横並びでボタンの位置がそろう）。
   ------------------------------------------------------------ */
.prompt-card {
  display: flex;
  flex-direction: column;
}

.prompt-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.prompt-description {
  min-height: 0;
  margin: 6px 0 7px;
}

.prompt-tags {
  min-height: 0;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   件数の上に出す「YYYY/MM/DD現在」
   ------------------------------------------------------------ */
.catalog-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

/* style.css に .catalog-count span（22px）があるので、
   打ち消せるようクラス2つ分の指定にしています */
.catalog-count .catalog-date {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* 「件」は小さいまま、数字だけ大きく（元の見た目のまま） */
.catalog-count .catalog-count-number {
  display: inline-block;
  color: var(--cf-muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .catalog-count .catalog-date {
    padding: 4px 9px;
    font-size: 10px;
  }
}

/* 「今人気のチラシ！」のマーク（サムネイル左上） */
.prompt-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  /* 読み込み中のシマー（.prompt-thumb::before）より前に出す */
  z-index: 3;
  padding: 5px 10px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

@media (min-width: 900px) {
  .prompt-badge {
    top: 10px;
    left: 10px;
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* 拡大プレビューでは、番号のとなりに並べる */
.preview-eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 3px;
  gap: 8px;
}

.preview-badge {
  position: static;
  box-shadow: none;
}

.prompt-copy {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 11px 12px;
  border: 1px solid var(--cf-ink);
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.prompt-copy:hover {
  transform: translateY(-1px);
  background: var(--cf-ink);
  color: #ffffff;
}

.prompt-copy.is-copied,
.prompt-copy.is-copied:hover {
  transform: none;
  background: var(--cf-ink);
  color: var(--cf-accent);
}

.prompt-copy-main {
  min-height: 52px;
  font-size: 14px;
}

/* ------------------------------------------------------------
   一覧：スマホは2カラムのサムネイル中心
   ------------------------------------------------------------ */
.prompt-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
}

@media (max-width: 639px) {
  .prompt-card-body {
    padding-top: 10px;
  }

  .prompt-number {
    font-size: 8px;
  }

  .prompt-title {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* 説明・タグ・拡大ラベルは、タップ後のモーダルで見せる */
  .prompt-description,
  .prompt-tags,
  .preview-label {
    display: none;
  }


  .prompt-copy {
    padding: 9px 6px;
    font-size: 11px;
  }

  .catalog-shell {
    padding-bottom: 64px;
  }
}

@media (min-width: 640px) {
  .prompt-grid {
    gap: 40px 18px;
  }
}

@media (min-width: 900px) {
  .prompt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   拡大プレビュー：画像＋説明＋コピー
   ------------------------------------------------------------ */
.preview-dialog-surface {
  grid-template-rows: auto 1fr auto;
}

.preview-dialog-heading {
  min-width: 0;
}

/* 拡大画像は読み込み終わってから出す（前のチラシが残って見えないように）。
   width / height 属性が入っているので、読み込み前でも場所は確保されます。 */
#previewImage {
  opacity: 0;
  transition: opacity 180ms ease;
}

#previewImage.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #previewImage {
    transition: none;
  }
}

.preview-dialog-heading .prompt-number {
  margin: 0 0 3px;
}

.preview-dialog-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--cf-line);
  background: #ffffff;
}

.preview-dialog-description {
  margin: 0;
  color: var(--cf-muted);
  font-size: 12px;
  line-height: 1.7;
}

.preview-dialog-foot .prompt-tags {
  display: flex;
  margin-top: 8px;
}

.preview-dialog-foot .prompt-copy {
  margin-top: 12px;
}

@media (min-width: 700px) {
  .preview-dialog-foot {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px);
    align-items: center;
    padding: 16px 20px 20px;
    gap: 8px 24px;
  }

  /* 左に説明とタグ、右にコピーボタン（自動配置に任せず、位置を決めておく） */
  .preview-dialog-description {
    grid-row: 1;
    grid-column: 1;
  }

  .preview-dialog-foot .prompt-tags {
    grid-row: 2;
    grid-column: 1;
    margin-top: 0;
    margin-bottom: 0;
  }

  .preview-dialog-foot .prompt-copy {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   コピーできなかったときの手動コピー用ダイアログ
   ------------------------------------------------------------ */
.manual-copy-dialog {
  width: min(100% - 24px, 640px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--cf-ink);
  background: #ffffff;
  color: var(--cf-ink);
}

.manual-copy-dialog::backdrop {
  background: rgb(18 18 18 / 55%);
}

.manual-copy-surface {
  padding: 20px;
}

.manual-copy-surface h2 {
  margin: 0 0 6px;
  font-size: 15px;
}

.manual-copy-surface p {
  margin: 0 0 12px;
  color: var(--cf-muted);
  font-size: 12px;
  line-height: 1.7;
}

#manualCopyClose {
  margin-top: 14px;
}

#manualCopyText {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: #fafaf8;
  color: var(--cf-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

/* ------------------------------------------------------------
   トースト：コピーした瞬間に、画面のまん中へ出す
   ------------------------------------------------------------
   ・rich.css 側のアニメーション（rc-toast-in）は transform を
     使うため、中央寄せの transform と衝突します。
     ここで専用のアニメーションに差し替えています。
   ・クリックの邪魔をしないよう pointer-events は切っています。
   ------------------------------------------------------------ */
.toast {
  position: fixed;
  top: 50%;
  right: 0;
  bottom: auto;
  left: 0;
  width: fit-content;
  max-width: min(calc(100% - 32px), 420px);
  height: auto;
  margin-inline: auto;
  padding: 20px 26px;
  overflow: visible;
  transform: translateY(-50%);
  /* popover のブラウザ標準スタイル（border: solid 等）を打ち消す */
  border: 0;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  pointer-events: none;
  animation: cf-toast-in 260ms ease;
}

@keyframes cf-toast-in {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.toast-main {
  display: block;
  /* 文言の中の改行（\A）をそのまま活かす */
  white-space: pre-line;
}

/* コピーできたときだけ、下段に小さくお知らせを出す */
.toast-note {
  display: none;
}

.toast.has-note .toast-note {
  display: block;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 22%);
  color: #c6c8bd;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.toast-note a {
  color: var(--cf-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* トースト自体はクリックを通す設定なので、リンクだけ押せるようにする */
  pointer-events: auto;
}

/* PCでは見落とされないよう、画面幅に合わせて大きく出す
   （文字も余白も clamp で伸縮。スマホは今までどおりの大きさ） */
@media (min-width: 700px) {
  .toast {
    max-width: min(calc(100% - 64px), 720px);
    padding: clamp(26px, 3vw, 40px) clamp(30px, 4vw, 56px);
    border-radius: 22px;
    font-size: clamp(17px, 1.9vw, 26px);
    line-height: 1.6;
  }

  .toast.has-note .toast-note {
    margin-top: 16px;
    padding-top: 15px;
    font-size: clamp(12px, 1.05vw, 15px);
  }

  .toast-note a {
    text-underline-offset: 4px;
  }
}