/*!
 * suzu-engage.css v1.1.0 — 離脱防止バナー／ポップアップ
 * 合同会社SuzuLabo
 *
 * 設計の考え方（v1.1で全面的に見直した）
 *   汎用コンポーネントを作って色だけ差し替えると、サイトから浮いて「AIっぽい」体裁になる。
 *   そこで既定値を suzulabo.co.jp が実際に使っている値そのものに合わせた。
 *     角丸6px（サイト内で13箇所と最多）／影は無彩色でなく色味を持たせる／
 *     地はウォームクリーム #f8f4ef ＋ 1px の細い境界線／CTAは青 #1f6680
 *   これは記事下のCTAブロックと同じ設計で、バナーは「そのCTAを隅に収まる大きさへ縮めたもの」。
 *
 * 要素は足さない。小見出し・見出し・1行・ボタン・閉じるだけ。
 * 補足行や副ボタンを全部並べると、そこで一気にテンプレートの顔になる。
 */

.suzu-engage {
  /* --- 色（suzulabo.co.jp の実値。他サイトは .suzu-engage に対して上書きする） --- */
  --se-surface: #f8f4ef;
  --se-border: #e7dfd3;
  --se-ink: #252525;
  --se-muted: #5f6670;
  --se-body: #55524c;
  --se-accent: #1f6680;
  --se-accent-hover: #17526a;
  --se-accent-text: #ffffff;
  --se-scrim: rgba(48, 36, 27, 0.48);

  /* --- 形（サイトの実測値に合わせる） --- */
  --se-radius: 6px;
  --se-shadow: 0 7px 18px rgba(23, 56, 74, 0.14);
  --se-max-width: 460px;
  --se-z: 9998;

  --se-font: inherit;

  position: fixed;
  z-index: var(--se-z);
  font-family: var(--se-font);
  color: var(--se-ink);
  -webkit-font-smoothing: antialiased;
}

.suzu-engage *,
.suzu-engage *::before,
.suzu-engage *::after {
  box-sizing: border-box;
}

/* ================================================================
 * パネル
 * ================================================================ */
.suzu-engage__panel {
  position: relative;
  background: var(--se-surface);
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
  box-shadow: var(--se-shadow);
  padding: 24px 24px 24px;
  text-align: left;
}

/* 小見出しは装飾でなく、事実を置く場所にする（PDF・15ページ・入力不要 など） */
.suzu-engage__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--se-muted);
}

.suzu-engage__title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--se-ink);
  /* 和文を文節で折る。「組み合わ／せ方」のような割れ方を防ぐ。
     対応していないブラウザは通常の折り返しに戻るだけ */
  word-break: auto-phrase;
  line-break: strict;
}

.suzu-engage__body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--se-body);
}

.suzu-engage__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--se-muted);
}

.suzu-engage__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* --- 主ボタン（サイトの suzu-cta__button--material と同じ設計） --- */
.suzu-engage__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--se-radius);
  background: var(--se-accent);
  color: var(--se-accent-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.suzu-engage__cta:hover,
.suzu-engage__cta:focus-visible {
  background: var(--se-accent-hover);
  color: var(--se-accent-text);
  text-decoration: none;
}

/* --- 副リンク（サイトの suzu-cta__button--contact と同じ、下線のテキストリンク） --- */
.suzu-engage__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--se-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: rgba(31, 102, 128, 0.4);
  text-underline-offset: 4px;
  cursor: pointer;
}

.suzu-engage__secondary:hover {
  color: var(--se-ink);
  text-decoration-color: rgba(74, 55, 40, 0.4);
}

/* --- 閉じる（タップ領域44px。線は細く、色は本文より弱く） --- */
.suzu-engage__close {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--se-radius);
  background: transparent;
  color: var(--se-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.suzu-engage__close:hover,
.suzu-engage__close:focus-visible {
  color: var(--se-ink);
}

.suzu-engage :focus-visible {
  outline: 2px solid var(--se-accent);
  outline-offset: 2px;
}

/* ================================================================
 * 形式1: bar（画面下部の帯・非モーダル）
 * モバイルの既定。画面を塞がず、Googleのインタースティシャル指針に沿う
 * ================================================================ */
.suzu-engage--bar {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.suzu-engage--bar .suzu-engage__panel {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 24px;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 56px 16px 20px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.suzu-engage--bar .suzu-engage__title {
  margin-top: 6px;
  font-size: 16px;
}

.suzu-engage--bar .suzu-engage__body {
  font-size: 14px;
  line-height: 1.7;
}

.suzu-engage--bar .suzu-engage__media,
.suzu-engage--bar .suzu-engage__note {
  display: none;
}

.suzu-engage--bar .suzu-engage__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.suzu-engage--bar[data-state='open'] .suzu-engage__panel {
  transform: translateY(0);
  opacity: 1;
}

/* 狭い画面。要素を落として、帯が画面を食う割合を20%以内に抑える */
@media (max-width: 560px) {
  .suzu-engage--bar {
    padding: 0 8px calc(8px + env(safe-area-inset-bottom));
  }
  .suzu-engage--bar .suzu-engage__panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 48px 16px 16px;
  }
  .suzu-engage--bar .suzu-engage__cta {
    width: 100%;
  }
  .suzu-engage--bar .suzu-engage__body,
  .suzu-engage--bar .suzu-engage__secondary {
    display: none;
  }
  .suzu-engage--bar .suzu-engage__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ================================================================
 * 形式2: slidein（右下のカード・非モーダル）
 * PC向け。背景を暗くせず、読書を止めない
 * ================================================================ */
.suzu-engage--slidein {
  right: 24px;
  bottom: 24px;
  width: min(352px, calc(100vw - 48px));
}

.suzu-engage--slidein .suzu-engage__panel {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.suzu-engage--slidein[data-state='open'] .suzu-engage__panel {
  transform: translateY(0);
  opacity: 1;
}

.suzu-engage--slidein .suzu-engage__media {
  margin-bottom: 16px;
}

.suzu-engage--slidein .suzu-engage__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 20px;
}

.suzu-engage--slidein .suzu-engage__cta {
  width: 100%;
}

/* ================================================================
 * 形式3: modal（中央・背景を暗くする）
 * PCのみ。強い手段なので使う場面を限る
 * ================================================================ */
.suzu-engage--modal {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.suzu-engage--modal .suzu-engage__scrim {
  position: absolute;
  inset: 0;
  background: var(--se-scrim);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.suzu-engage--modal[data-state='open'] .suzu-engage__scrim {
  opacity: 1;
}

.suzu-engage--modal .suzu-engage__panel {
  position: relative;
  width: 100%;
  max-width: var(--se-max-width);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 36px 32px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.suzu-engage--modal[data-state='open'] .suzu-engage__panel {
  transform: translateY(0);
  opacity: 1;
}

.suzu-engage--modal .suzu-engage__title {
  font-size: 22px;
}

.suzu-engage--modal .suzu-engage__media {
  margin-bottom: 24px;
}

.suzu-engage--modal .suzu-engage__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 24px;
}

/* モーダル表示中は背面をスクロールさせない */
.suzu-engage-lock,
.suzu-engage-lock body {
  overflow: hidden;
}

/* ================================================================
 * 閉じるアニメーション
 * ================================================================ */
.suzu-engage[data-state='closing'] .suzu-engage__panel {
  transform: translateY(12px);
  opacity: 0;
}

.suzu-engage[data-state='closing'] .suzu-engage__scrim {
  opacity: 0;
}

/* ================================================================
 * 動きを減らす設定を尊重する
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .suzu-engage .suzu-engage__panel,
  .suzu-engage .suzu-engage__scrim,
  .suzu-engage .suzu-engage__cta,
  .suzu-engage .suzu-engage__close {
    transition: none !important;
  }
  .suzu-engage .suzu-engage__panel {
    transform: none !important;
    opacity: 1 !important;
  }
  .suzu-engage .suzu-engage__scrim {
    opacity: 1 !important;
  }
}

.suzu-engage[data-reduced-motion='true'] .suzu-engage__panel {
  transform: none;
  opacity: 1;
}

.suzu-engage[data-reduced-motion='true'] .suzu-engage__scrim {
  opacity: 1;
}

/* ================================================================
 * 印刷時は出さない
 * ================================================================ */
@media print {
  .suzu-engage { display: none !important; }
}