/*
 * login.css - ログイン画面 / ランディングページ専用スタイル
 * 値は variables.css のトークンのみを参照する。
 *
 * 構成:
 *   1. ヒーロー（ロゴ + キャッチ + サブキャッチ + MS/Google ボタン + スクロール誘導）
 *   2. 「── OneSend の特徴 ──」 横線付きセンタータイトル
 *   3. zigzag 3 パネル（画像 + 見出し + 本文 を左右交互配置）
 *   4. 利用方法 4 ステップ（縦タイムライン）
 *   5. FAQ アコーディオン
 *   6. 最終 CTA（メインキャッチ再掲 + ログインボタン）
 *   7. フッター（規約 3 リンク + 運営者表記）
 *
 * 設計ルール:
 *   - 背景は legal.php と同じ薄水色（--os-color-primary-light）
 *   - 装飾画像（bg.jpg 等）は使わない
 *   - フォントは Noto Sans JP のみ（display フォント禁止）
 *   - ボタンは MS 公式黒 / Google 公式白 + 薄ボーダー
 *   - クラス命名は .login-b-* を踏襲（リデザイン案 B 由来）
 */

/* ======================================================================
 * Body / Background
 * ====================================================================== */
body.login-b-page {
  background: var(--os-color-primary-light);
  margin: 0;
  padding: 0;
  font-family: var(--os-font-family-base);
  color: var(--os-color-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-weight: var(--os-font-weight-normal);
  line-height: var(--os-line-height-base);
}

/* ======================================================================
 * Retired banner (退会完了時に ?retired=1 で表示)
 * ====================================================================== */
.login-b-retired-banner {
  width: 100%;
  padding: var(--os-spacing-md) var(--os-spacing-lg);
  background-color: rgba(var(--os-color-primary-rgb), 0.1);
  color: var(--os-color-primary-dark);
  font-size: var(--os-font-size-sm);
  font-weight: var(--os-font-weight-medium);
  text-align: center;
  box-sizing: border-box;
}

/* ======================================================================
 * Layout: Main
 * ====================================================================== */
.login-b-main {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ======================================================================
 * Hero — 100vh で次セクションを初期ビュー外に押し出す
 * ====================================================================== */
/* スムーズスクロール (login.php 専用 CSS のため html に適用しても他画面に波及しない) */
html:has(.login-b-page) {
  scroll-behavior: smooth;
}

.login-b-hero {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--os-spacing-2xl) var(--os-spacing-md);
  /* 100vh より少し小さくして、次セクションの見出しが画面下端から覗くようにする */
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* ----- スクロール誘導インジケーター --------------------------------- */
.login-b-hero__scroll-hint {
  position: absolute;
  bottom: var(--os-spacing-xl);
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--os-spacing-xs);
  padding: var(--os-spacing-sm) var(--os-spacing-md);
  color: var(--os-color-text-secondary);
  text-decoration: none;
  border-radius: var(--os-radius-sm);
  /* 中央寄せ + 鈴のように上端を支点に左右スイング */
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  animation: login-b-scroll-swing 3200ms ease-in-out infinite;
  transition:
    opacity var(--os-transition-base),
    color var(--os-transition-base),
    box-shadow var(--os-transition-base);
}

.login-b-hero__scroll-hint:hover {
  color: var(--os-color-primary);
}

.login-b-hero__scroll-hint:focus-visible {
  outline: none;
  box-shadow: var(--os-shadow-focus);
}

.login-b-hero__scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.login-b-hero__scroll-label {
  font-size: var(--os-font-size-xs);
  font-weight: var(--os-font-weight-medium);
  letter-spacing: 0.06em;
  line-height: var(--os-line-height-tight);
  text-align: center;
}

.login-b-hero__scroll-icon {
  display: block;
}

/* 鈴のように左右に振れるスイング (translateX(-50%) を保ったまま rotate) */
@keyframes login-b-scroll-swing {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20%      { transform: translateX(-50%) rotate(-3deg); }
  60%      { transform: translateX(-50%) rotate(3deg); }
  80%      { transform: translateX(-50%) rotate(-1.5deg); }
}

.login-b-logo {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
}

.login-b-headline {
  margin: var(--os-spacing-2xl) 0 0;
  font-size: var(--os-font-size-3xl);
  font-weight: var(--os-font-weight-bold);
  line-height: var(--os-line-height-tight);
  letter-spacing: var(--os-letter-spacing-tight);
  color: var(--os-color-text-primary);
}

.login-b-lead {
  margin: var(--os-spacing-lg) 0 0;
  max-width: 560px;
  font-size: var(--os-font-size-md);
  font-weight: var(--os-font-weight-normal);
  line-height: var(--os-line-height-relaxed);
  color: var(--os-color-text-secondary);
  text-wrap: balance;
}

.login-b-actions {
  margin-top: var(--os-spacing-2xl);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--os-spacing-md);
}

/* ======================================================================
 * OAuth Button — base
 *   レイアウト・タイポ・トランジションのみ定義。色は modifier 側で指定。
 *   - .login-b-btn--ms     : Microsoft ブランド黒
 *   - .login-b-btn--google : Google ブランド白
 * ====================================================================== */
.login-b-page .login-b-btn,
.login-b-page a.login-b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--os-spacing-sm);
  width: 100%;
  max-width: 320px;
  padding: var(--os-spacing-sm) var(--os-spacing-lg);
  border-radius: var(--os-radius-sm);
  font-family: var(--os-font-family-base);
  font-size: var(--os-font-size-base);
  font-weight: var(--os-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--os-transition-base),
    border-color var(--os-transition-base),
    box-shadow var(--os-transition-base),
    transform var(--os-transition-base);
}

.login-b-page .login-b-btn img,
.login-b-page a.login-b-btn img,
.login-b-page .login-b-btn .login-b-btn__icon,
.login-b-page .login-b-btn .login-b-btn__icon-placeholder {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.login-b-page .login-b-btn .login-b-btn__icon-placeholder {
  display: inline-block;
  border: 1px dashed var(--os-color-gray-300);
  border-radius: var(--os-radius-sm);
}

/* ----- Microsoft: 黒ボタン ------------------------------------------ */
.login-b-page .login-b-btn--ms,
.login-b-page a.login-b-btn--ms {
  background-color: var(--os-color-ink);
  border: 1px solid var(--os-color-ink);
  color: var(--os-color-text-on-primary);
}

.login-b-page .login-b-btn--ms:hover,
.login-b-page a.login-b-btn--ms:hover {
  background-color: var(--os-color-gray-700);
  border-color: var(--os-color-gray-700);
  transform: translateY(-1px);
}

.login-b-page .login-b-btn--ms:active,
.login-b-page a.login-b-btn--ms:active {
  transform: translateY(0);
}

.login-b-page .login-b-btn--ms:focus-visible,
.login-b-page a.login-b-btn--ms:focus-visible {
  outline: none;
  box-shadow: var(--os-shadow-focus);
}

/* ----- Google: 白ボタン --------------------------------------------- */
.login-b-page .login-b-btn--google,
.login-b-page a.login-b-btn--google {
  background-color: var(--os-color-bg-base);
  border: 1px solid var(--os-color-gray-200);
  color: var(--os-color-text-primary);
}

.login-b-page .login-b-btn--google:hover,
.login-b-page a.login-b-btn--google:hover {
  background-color: var(--os-color-gray-100);
  transform: translateY(-1px);
}

.login-b-page .login-b-btn--google:active,
.login-b-page a.login-b-btn--google:active {
  transform: translateY(0);
}

.login-b-page .login-b-btn--google:focus-visible,
.login-b-page a.login-b-btn--google:focus-visible {
  outline: none;
  box-shadow: var(--os-shadow-focus);
}

/* ======================================================================
 * Section title (横線付きセンタータイトル)
 * ====================================================================== */
.login-b-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--os-spacing-md);
  margin: var(--os-spacing-3xl) auto var(--os-spacing-2xl);
  padding: 0 var(--os-spacing-md);
}

/* 1 つ目（OneSend の特徴）はヒーロー直後で覗かせるため上マージンを詰める */
#login-b-features.login-b-section-title {
  margin-top: var(--os-spacing-md);
}

.login-b-section-title__line {
  display: block;
  flex: 0 0 120px;
  height: 1px;
  background-color: var(--os-color-gray-300);
}

.login-b-section-title h2 {
  margin: 0;
  font-size: var(--os-font-size-2xl);
  font-weight: var(--os-font-weight-semibold);
  line-height: var(--os-line-height-tight);
  letter-spacing: 0.05em;
  color: var(--os-color-text-primary);
  white-space: nowrap;
}

/* ======================================================================
 * Feature panels (zigzag)
 * ====================================================================== */
.login-b-feature {
  width: 100%;
  max-width: 960px;
  margin: 0 auto var(--os-spacing-2xl);
  padding: 0 var(--os-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--os-spacing-2xl);
}

.login-b-feature--image-right {
  flex-direction: row-reverse;
}

.login-b-feature__image {
  flex: 1 1 50%;
  min-height: 240px;
  background-color: var(--os-color-gray-100);
  border: 1px dashed var(--os-color-gray-300);
  border-radius: var(--os-radius-md);
}

.login-b-feature__text {
  flex: 1 1 50%;
}

.login-b-feature__text h3 {
  margin: 0 0 var(--os-spacing-md);
  font-size: var(--os-font-size-lg);
  font-weight: var(--os-font-weight-semibold);
  line-height: var(--os-line-height-tight);
  color: var(--os-color-text-primary);
}

.login-b-feature__text p {
  margin: 0;
  font-size: var(--os-font-size-base);
  line-height: var(--os-line-height-relaxed);
  color: var(--os-color-text-secondary);
  text-wrap: balance;
}

/* ======================================================================
 * Usage timeline (利用方法 4ステップ)
 *   - 番号 ○ マーカー + 接続線 + CSS のみのフェードイン
 * ====================================================================== */
.login-b-usage {
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--os-spacing-2xl);
  padding: 0 var(--os-spacing-md);
}

.login-b-usage__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.login-b-usage__step {
  display: flex;
  gap: var(--os-spacing-lg);
  padding: var(--os-spacing-md) 0;
  position: relative;
}

.login-b-usage__marker {
  flex: 0 0 40px;
  height: 40px;
  border-radius: var(--os-radius-full);
  background-color: var(--os-color-primary);
  color: var(--os-color-text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--os-font-weight-semibold);
  font-size: var(--os-font-size-md);
  position: relative;
  z-index: 1;
}

/* ステップ間を繋ぐ縦線（最後のステップ以外） */
.login-b-usage__step:not(:last-child) .login-b-usage__marker::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + var(--os-spacing-md) * 2);
  background-color: var(--os-color-primary);
  opacity: 0.3;
}

.login-b-usage__content {
  flex: 1;
  padding-bottom: var(--os-spacing-md);
}

.login-b-usage__content h3 {
  margin: 0 0 var(--os-spacing-sm);
  font-size: var(--os-font-size-lg);
  font-weight: var(--os-font-weight-semibold);
  line-height: var(--os-line-height-tight);
  color: var(--os-color-text-primary);
}

.login-b-usage__content p {
  margin: 0;
  font-size: var(--os-font-size-base);
  line-height: var(--os-line-height-relaxed);
  color: var(--os-color-text-secondary);
}

/* ======================================================================
 * FAQ accordion (HTML5 details/summary, JS なし)
 * ====================================================================== */
.login-b-faq {
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--os-spacing-2xl);
  padding: 0 var(--os-spacing-md);
}

.login-b-faq__list {
  width: 100%;
}

.login-b-faq__item {
  border-bottom: 1px solid var(--os-color-gray-200);
}

.login-b-faq__item:first-child {
  border-top: 1px solid var(--os-color-gray-200);
}

.login-b-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--os-spacing-md);
  padding: var(--os-spacing-lg) var(--os-spacing-md);
  cursor: pointer;
  font-size: var(--os-font-size-md);
  font-weight: var(--os-font-weight-semibold);
  color: var(--os-color-text-primary);
  list-style: none;
}

.login-b-faq__question::-webkit-details-marker {
  display: none;
}

.login-b-faq__question:focus-visible {
  outline: none;
  box-shadow: var(--os-shadow-focus);
  border-radius: var(--os-radius-sm);
}

.login-b-faq__icon {
  flex-shrink: 0;
  font-size: var(--os-font-size-xl);
  font-weight: var(--os-font-weight-normal);
  color: var(--os-color-primary);
  line-height: 1;
  transition: transform var(--os-transition-base);
}

.login-b-faq__item[open] .login-b-faq__icon {
  transform: rotate(45deg);
}

.login-b-faq__answer {
  padding: 0 var(--os-spacing-md) var(--os-spacing-lg);
  font-size: var(--os-font-size-base);
  line-height: var(--os-line-height-relaxed);
  color: var(--os-color-text-secondary);
}

/* ======================================================================
 * Final CTA (横線セパレータなし、ヒーローと呼応)
 * ====================================================================== */
.login-b-cta {
  width: 100%;
  max-width: 600px;
  margin: var(--os-spacing-3xl) auto var(--os-spacing-2xl);
  padding: var(--os-spacing-2xl) var(--os-spacing-md);
  text-align: center;
}

.login-b-cta__heading {
  margin: 0 0 var(--os-spacing-2xl);
  font-size: var(--os-font-size-2xl);
  font-weight: var(--os-font-weight-semibold);
  line-height: var(--os-line-height-tight);
  letter-spacing: var(--os-letter-spacing-tight);
  color: var(--os-color-text-primary);
}

.login-b-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--os-spacing-md);
  margin-bottom: var(--os-spacing-lg);
}

.login-b-cta__note {
  margin: 0;
  font-size: var(--os-font-size-sm);
  color: var(--os-color-text-secondary);
}

/* ======================================================================
 * Footer
 * ====================================================================== */
.login-b-footer {
  flex-shrink: 0;
  padding: var(--os-spacing-3xl) var(--os-spacing-md) var(--os-spacing-xl);
  text-align: center;
  color: var(--os-color-text-secondary);
}

.login-b-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--os-spacing-sm) var(--os-spacing-lg);
  font-size: var(--os-font-size-sm);
}

.login-b-footer__nav a {
  color: var(--os-color-text-secondary);
  text-decoration: none;
  transition: color var(--os-transition-base);
}

.login-b-footer__nav a:hover {
  color: var(--os-color-primary);
  text-decoration: underline;
}

.login-b-footer__copy {
  margin: var(--os-spacing-md) 0 0;
  font-size: var(--os-font-size-xs);
  font-weight: var(--os-font-weight-normal);
  color: var(--os-color-text-secondary);
}

/* ======================================================================
 * Staged fade-in (ロード時のヒーロー登場のみ。スクロール演出はなし)
 * ====================================================================== */
@keyframes login-b-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ロゴの浮遊（入場後にループ）*/
@keyframes login-b-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.login-b-logo,
.login-b-headline,
.login-b-lead,
.login-b-actions .login-b-btn {
  opacity: 0;
  animation: login-b-rise 600ms var(--os-ease-emphasized) forwards;
}

.login-b-logo {
  /* 入場 (rise 600ms) → 完了後にゆるやかな浮遊 (float 4.5s loop) */
  animation:
    login-b-rise 600ms var(--os-ease-emphasized) 0ms forwards,
    login-b-float 4500ms ease-in-out 600ms infinite;
}
.login-b-headline                        { animation-delay: 150ms; }
.login-b-lead                            { animation-delay: 250ms; }
.login-b-actions .login-b-btn:nth-child(1) { animation-delay: 350ms; }
.login-b-actions .login-b-btn:nth-child(2) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .login-b-logo,
  .login-b-headline,
  .login-b-lead,
  .login-b-actions .login-b-btn,
  .login-b-usage__step {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* スクロールヒントは中央寄せのため translateX(-50%) を保持 */
  .login-b-hero__scroll-hint {
    animation: none;
    transform: translateX(-50%);
  }

  html:has(.login-b-page) {
    scroll-behavior: auto;
  }

  .login-b-page .login-b-btn:hover,
  .login-b-page a.login-b-btn:hover {
    transform: none;
  }
}

/* ======================================================================
 * Scroll-triggered reveal
 *   IntersectionObserver で .is-visible を付与してフェードイン
 * ====================================================================== */
.login-b-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--os-ease-emphasized),
    transform 600ms var(--os-ease-emphasized);
  will-change: opacity, transform;
}

.login-b-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* IntersectionObserver 非対応 / JS 無効時のフォールバック */
.no-js .login-b-reveal,
.no-intersection-observer .login-b-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .login-b-reveal,
  .login-b-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================================================
 * Responsive
 * ====================================================================== */
@media (max-width: 1024px) {
  .login-b-feature {
    max-width: calc(100% - 32px);
  }
}

@media (max-width: 767px) {
  .login-b-hero {
    padding: var(--os-spacing-2xl) var(--os-spacing-md) var(--os-spacing-xl);
  }

  .login-b-logo {
    width: 240px;
  }

  .login-b-headline {
    font-size: var(--os-font-size-2xl);
  }

  .login-b-section-title {
    margin: var(--os-spacing-2xl) auto var(--os-spacing-xl);
    gap: var(--os-spacing-sm);
  }

  .login-b-section-title__line {
    flex: 0 0 32px;
  }

  .login-b-section-title h2 {
    font-size: var(--os-font-size-xl);
  }

  .login-b-feature,
  .login-b-feature--image-right {
    flex-direction: column;
    gap: var(--os-spacing-lg);
    margin-bottom: var(--os-spacing-xl);
  }

  .login-b-feature__image {
    width: 100%;
    min-height: 200px;
  }

  .login-b-usage__step {
    gap: var(--os-spacing-md);
  }

  .login-b-usage__marker {
    flex: 0 0 32px;
    height: 32px;
    font-size: var(--os-font-size-sm);
  }

  .login-b-usage__content h3 {
    font-size: var(--os-font-size-md);
  }

  .login-b-faq__question {
    padding: var(--os-spacing-md) var(--os-spacing-sm);
    font-size: var(--os-font-size-base);
  }

  .login-b-faq__answer {
    padding: 0 var(--os-spacing-sm) var(--os-spacing-md);
  }

  .login-b-cta {
    margin: var(--os-spacing-2xl) auto var(--os-spacing-xl);
    padding: var(--os-spacing-xl) var(--os-spacing-md);
  }

  .login-b-cta__heading {
    font-size: var(--os-font-size-xl);
    margin-bottom: var(--os-spacing-xl);
  }

  .login-b-footer__nav {
    gap: var(--os-spacing-sm) var(--os-spacing-md);
  }
}