/* ===== base / iOS対策 ===== */
html, body { height: 100%; }

/* ベース（非表示） */
.c-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;

  /* iOS Safari のツールバー変動に対応 */
  height: 100dvh;                 /* iOS16+ / モダンブラウザ */
  min-height: -webkit-fill-available; /* iOS15系フォールバック */
}
.c-popup.is-open { display: block; }
body.c-popup--open { overflow: hidden; }

/* 半透明の背景（下の安全領域まで塗る） */
.c-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);

  /* 安全領域（下部ツールバー裏まで背景を延長） */
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom); /* 旧シンタックス */
}

/* ダイアログ（中央固定。現在の指定に準拠） */
.c-popup__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  max-width: 600px;
  width: 100%;
  padding: 0 12px;

  overflow: hidden;

  /* 画面が極端に小さい端末で上下が切れないよう高さ制御 */
  max-height: calc(100svh - 32px);
}

/* コンテンツ */
.c-popup__title { font-size: 1.25rem; margin: 0 0 12px; }
.c-popup__text { margin: 0 0 16px; line-height: 1.7; }
.c-popup__cta {
  display: inline-block; padding: 12px 18px; border-radius: 999px;
  text-decoration: none; background: #111; color: #fff;
}

/* 画像を全幅で綺麗に（画像バナー用） */
.c-popup__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 閉じるボタン（×） */
.c-popup__close {
  position: absolute; top: 8px; right: 20px;
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* スマホ最適化（余白・角丸調整など） */
@media (max-width: 560px) {
  .c-popup__dialog {
    width: calc(100vw - 24px);    /* 左右12pxずつの余白を維持 */
    border-radius: 12px;
    max-height: calc(100svh - 24px);
  }
}