/* auth-style.css — login/subscribe/account 専用の追加スタイル
 * site.css（デザイントークン・共通ヘッダー/フッター/フォーム部品）の上に重ねて使う。
 * 天啓の防壁のauth-style.cssの構成（パネル・プランカード・ステータス行）を、
 * 黄金の海図のトークン（--gold/--surface等）に置き換えて移植したもの。
 */

.auth-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
}
.auth-panel {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--surface-lt);
  border-radius: var(--radius);
  padding: 36px 36px 30px;
  position: relative;
}
.auth-panel.wide { max-width: 640px; }
.auth-panel .c-orn {
  position: absolute; width: 16px; height: 16px;
  border-color: var(--compass-rim); border-style: solid;
}
.auth-panel .c-orn.tl { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.auth-panel .c-orn.tr { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
.auth-panel .c-orn.bl { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }
.auth-panel .c-orn.br { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }

.panel-title {
  font-size: 1.15rem; text-align: center; color: var(--gold-lt);
}
.panel-sub {
  font-size: 0.8rem; color: var(--ink-muted); text-align: center;
  margin-top: 8px; line-height: 1.9;
}

.switch-line { text-align: center; margin-top: 16px; font-size: 0.82rem; color: var(--ink-muted); }
.switch-line a { color: var(--gold-lt); text-decoration: underline; }

.msg { font-size: 0.8rem; text-align: center; margin-top: 14px; min-height: 1.4em; color: var(--ink-muted); }
.msg.warn { color: var(--danger); }
.msg.ok { color: #7FAE8C; }

.status-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 10px 0; border-bottom: 1px solid var(--surface-lt); }
.status-row span:first-child { color: var(--ink-muted); }
.status-badge { display: inline-block; padding: 2px 12px; font-size: 0.72rem; border-radius: 999px; border: 1px solid var(--surface-lt); }
.status-badge.trialing { color: var(--gold); border-color: var(--gold); }
.status-badge.active { color: #7FAE8C; border-color: #7FAE8C; }
.status-badge.past_due, .status-badge.canceled, .status-badge.none { color: var(--danger); border-color: var(--danger); }

.trial-note {
  background: var(--bg-alt); border: 1px solid var(--surface-lt); border-radius: 8px;
  padding: 14px 18px; font-size: 0.78rem; line-height: 1.9; color: var(--ink-mid); margin-top: 18px;
}

/* ═══ プラン月額/年額トグル ═══ */
.interval-toggle {
  display: flex; gap: 0; margin: 20px auto 0; max-width: 280px;
  border: 1px solid var(--surface-lt); border-radius: 999px; overflow: hidden;
}
.interval-toggle button {
  flex: 1; padding: 9px 8px; font-family: var(--font); font-size: 0.8rem;
  background: transparent; border: none; color: var(--ink-muted); cursor: pointer;
  transition: background .2s, color .2s;
}
.interval-toggle button.active { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color: #1a1408; }
.interval-note { text-align: center; font-size: 0.76rem; color: var(--gold); margin-top: 8px; min-height: 1.3em; }

.plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
.plan-card {
  border: 1px solid var(--surface-lt); border-radius: var(--radius); padding: 20px;
  text-align: center; background: var(--bg-alt);
}
.plan-card .plan-name { font-size: 0.95rem; color: var(--gold-lt); }
.plan-card .plan-price { font-size: 1.5rem; color: var(--ink); margin-top: 10px; }
.plan-card .plan-price small { font-size: 0.72rem; color: var(--ink-muted); }
.plan-card .plan-desc { font-size: 0.8rem; color: var(--ink-muted); margin-top: 10px; line-height: 1.8; }

.not-ready-box {
  text-align: center; padding: 30px 20px; border: 1px dashed var(--compass-rim);
  border-radius: var(--radius); color: var(--ink-mid); font-size: 0.9rem; line-height: 1.9;
}