/* ============================================================================
   認証フロー結果・小画面共通 (V27 ダークネイビー版)
   使用テンプレート: auth/message.html / auth/password_reset.html /
                     auth/password_reset_confirm.html / auth/unsubscribe.html
   中央寄せの小カード 1 枚構成。 寸法は rem (等倍スケール対応)。
   ============================================================================ */
body.fl27-body {
  background:
    radial-gradient(100rem 43.75rem at 85% -8%, rgba(201,168,92,0.08), transparent 65%),
    radial-gradient(81.25rem 37.5rem at 0% 100%, rgba(58,103,166,0.18), transparent 60%),
    #1B2E4B;
}
body.fl27-body .app-scroll-area { padding: 0; }
.fl27 {
  --surface: rgba(255,255,255,0.05);
  --line: rgba(255,255,255,0.11); --line-strong: rgba(255,255,255,0.2);
  --gold: #C9A85C; --gold-bright: #E8CE8C; --gold-line: rgba(201,168,92,0.45); --gold-dim: rgba(201,168,92,0.14);
  --text: #F2F5F9; --sub: #8FA0B5; --teal: #3BD3A5; --red: #FF6B7E;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --num: "Manrope", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--sans); color: var(--text);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 4.5rem 1rem 6rem; box-sizing: border-box;
  display: flex; justify-content: center;
}
.fl27 a { color: inherit; text-decoration: none; }
.fl-card {
  width: 100%; max-width: 30rem; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 0.0625rem solid var(--line); border-radius: 1.125rem;
  padding: 2.5rem 2.25rem 2.25rem; text-align: center;
}
@media (max-width: 640px) { .fl-card { padding: 1.75rem 1.25rem 1.5rem; } }
.fl-eyebrow { font-family: var(--num); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; }
.fl-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; margin: 0.875rem 0 0; color: var(--text); }
.fl-lead { font-size: 0.88rem; color: var(--sub); line-height: 1.9; margin: 1rem 0 0; }
.fl-lead .em { font-weight: 800; color: var(--gold-bright); }
.fl-error { margin: 1.25rem 0 0; padding: 0.75rem 1rem; border-radius: 0.5rem; text-align: left;
  border: 0.0625rem solid rgba(255,107,126,0.5); border-left: 0.1875rem solid var(--red);
  background: rgba(255,107,126,0.08); font-size: 0.84rem; line-height: 1.8; }

/* フォーム (規約お問い合わせと同意匠) */
.fl-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; text-align: left; }
.fl-field { display: flex; flex-direction: column; gap: 0.4375rem; }
.fl-field label { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.fl-field input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.625rem;
  border: 0.0625rem solid var(--line-strong); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.88rem; transition: .15s; box-sizing: border-box; }
.fl-field input::placeholder { color: rgba(143,160,181,0.6); }
.fl-field input:focus { outline: none; border-color: var(--gold-line); background: var(--gold-dim); }

/* ボタン */
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem; border-radius: 62.4375rem; margin-top: 0.5rem;
  font-size: 0.88rem; font-weight: 800; letter-spacing: 0.04em;
  border: 0.0625rem solid transparent; transition: .18s; cursor: pointer; font-family: inherit; }
.fl-btn.solid { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #16243B; }
.fl-btn.solid:hover { filter: brightness(1.08); transform: translateY(-0.0625rem); box-shadow: 0 0.5rem 1.5rem rgba(201,168,92,0.25); }
.fl-btn.ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.fl-btn.ghost:hover { border-color: var(--gold-line); color: var(--gold-bright); }
.fl-btn.danger { background: linear-gradient(135deg, #FF8B9A, #E04F62); color: #2A0E14; }
.fl-btn.danger:hover { filter: brightness(1.08); transform: translateY(-0.0625rem); }
.fl-btn.block { width: 100%; }

.fl-cta-wrap { margin-top: 1.5rem; display: flex; justify-content: center; gap: 0.875rem; flex-wrap: wrap; }

/* サブリンク */
.fl-sub { margin-top: 1.25rem; font-size: 0.82rem; color: var(--sub); }
.fl-sub a { color: var(--gold-bright); border-bottom: 0.0625rem solid var(--gold-line); transition: color .14s; }
.fl-sub a:hover { color: #fff; }