/* ==========================================================================
   screens.css — 画面1（評価）／画面2（Wi-Fi＋任意セクション）のレイアウトと
   スライド遷移
   ========================================================================== */

/* 2画面を横に並べ、transformでスライドする */
.screens {
  display: flex;
  /* stretchだと画面2の任意セクション解禁で画面1まで伸び、
     スライド中にフッターが落下して見える */
  align-items: flex-start;
  width: 200%;
  transition: transform var(--dur-slide) var(--ease-glide);
}
.screens.at-2 { transform: translateX(-50%); }
.screens.no-anim { transition: none; }

.screen {
  width: 50%;
  /* 24px = 在フローの進捗ドット分。差し引かないと常に縦オーバーフローする */
  min-height: calc(100vh - 24px);
  min-height: calc(100svh - 24px);
  padding: 0 28px;
  display: flex;
  flex-direction: column;
}

/* 中身は幅を絞って中央へ（タブレット以上でも間延びさせない） */
.screen-inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --- 画面1：評価 --- */
.rate-head { text-align: center; }
.eyebrow {
  font-family: var(--font-latin);
  font-size: .78rem;
  letter-spacing: .5em;
  text-indent: .5em;   /* 字送りの分だけ右にずれるのを戻す */
  color: var(--ink-faint);
  text-transform: uppercase;
}
.rate-head h1 {
  /* 画面幅に追従させ、狭い端末でも必ず1行に収める */
  font-size: clamp(1.1rem, 6vw, 1.44rem);  /* 375pxで約22.5px・1行維持（実測） */
  letter-spacing: .04em;
  white-space: nowrap;
  margin-top: 14px;
}
.rate-lead {
  margin-top: 14px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
}
.rate-block { margin-top: 20px; }
.rate-note {
  margin-top: 10px;
  text-align: center;
  font-size: .7rem;
  color: var(--ink-faint);
}
.screen-rate .site-foot { margin-top: auto; }

/* --- 画面2：Wi-Fi＋任意セクション --- */
.screen-thanks { position: relative; } /* 左上の戻るボタンの基準 */
.thanks-head {
  position: relative; /* きらめき（.spark）の基準 */
  text-align: center;
  padding-top: 26px;
}
.thanks-head h2 { font-size: 1.28rem; margin-top: 12px; }

.connect-block { margin-top: 24px; }
.connect-note {
  margin-top: 12px;
  text-align: center;
  font-size: .72rem;
  color: var(--ink-faint);
}

.opt-section h3 {
  /* 「よろしければ、クチコミをお願いします」(18字)が375pxで1行に収まる上限 */
  font-size: clamp(.92rem, 4.27vw, 1rem);
  letter-spacing: .04em;
  white-space: nowrap;
  text-align: center;
}
.opt-lead {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: center;
}
.opt-body { margin-top: 20px; }
.opt-hint {
  margin-top: 18px;
  font-size: .7rem;
  color: var(--ink-faint);
  text-align: center;
}
.mail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
}
.screen-thanks .site-foot { margin-top: auto; }

/* 該当しない側の任意セクションはDOMごと非表示 */
[hidden] { display: none !important; }


/* 狭小端末では左右の余白を詰め、見出しが痩せすぎないようにする */
@media (max-width: 359px) {
  .screen { padding: 0 18px; }
}


/* --- 単独ページ（thanks.html）用 ---
   .screen は2画面スライド前提で width:50% なので、単独で使うときは全幅に戻す --- */
.screen.is-standalone {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}
.screen.is-standalone .thanks-head { padding-top: 8px; }