/* 会員まわり（ログイン・登録・会員情報・あとで読む・ダッシュボードの入口）
   **WordPress テーマでだけ使う**（試作には会員の画面が無い）。それでも置き場は
   試作の assets/——デザインの正を1か所にするため。theme/sync-assets.js が写す。
   色・形・書体・余白は tokens.css だけを参照する（生の値を書かない） */

/* --- ログイン・登録・会員情報・再設定（parts/auth.php）------------------------
   2026-09-23 編集長のご指摘「ダサい。もっと洗練させて。美しく」。
   **記事の読み幅に入れない。** 面は2つだけ——白いカードのフォームと、黒い面の特典。
   高さを揃えて1枚の板に見せる（左右で角を分け合う）。狭い幅では縦に積み、フォームが先 */
.authp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--sp-s8) var(--sp-s9);
  max-width: 1040px;
}
@media (min-width: 900px) {
  /* 右の柱は固定幅。**auto-fit と並べない**（狭い幅で最小値が足し算になる） */
  .authp { grid-template-columns: minmax(0, 1fr) 380px; }
}
.authp__card {
  background: var(--sp-card);
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
  padding: var(--sp-s7) var(--sp-s6);
  box-shadow: var(--sp-shadow);
}
.authp__side {
  position: relative;
  overflow: hidden;
  background: var(--sp-foot);
  color: var(--sp-on-dark-soft);
  border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
  padding: var(--sp-s7) var(--sp-s6);
}
@media (min-width: 900px) {
  .authp__card { border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg); padding: var(--sp-s8) 72px; }
  .authp__side { border-radius: 0 var(--sp-radius-lg) var(--sp-radius-lg) 0; padding: var(--sp-s8) var(--sp-s6); }
}
@media (max-width: 480px) {
  .authp { padding-block: var(--sp-s6) var(--sp-s8); }
  .authp__card, .authp__side { padding: var(--sp-s6) var(--sp-pad); }
}

.authp__kicker {
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label); text-transform: uppercase;
  color: var(--sp-link); margin: 0 0 var(--sp-s4);
}
.authp__kicker--on-dark { color: var(--sp-red-on-dark); }
.authp__title {
  font-size: calc(32px * var(--sp-scale)); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--sp-ink); margin: 0;
}
.authp__lead { color: var(--sp-text-soft); line-height: 1.8; margin: var(--sp-s4) 0 0; max-width: 30em; }
.authp__alt {
  margin: var(--sp-s6) 0 0; padding-top: var(--sp-s5);
  border-top: 1px solid var(--sp-line);
  color: var(--sp-text-soft); font-size: calc(14px * var(--sp-scale));
}
.authp__alt a { color: var(--sp-link); font-weight: 700; display: inline-block; padding: var(--sp-s1) 0; }

/* SWPM が出すフォーム。**クラス名は SWPM のもの**（版によって table だったり div だったりするので、
   形は要素で拾う）。ラベルは小さく太く、入力欄は高さ48pxで角を丸く、ボタンは全幅の黒 */
.authp__form { margin-top: var(--sp-s6); max-width: 440px; }
.authp__form form { margin: 0; }
.authp__form :is(table, tbody, tr, td, th) { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; text-align: left; }
.authp__form label {
  display: block; font-size: calc(13px * var(--sp-scale)); font-weight: 700;
  color: var(--sp-ink); margin: var(--sp-s5) 0 var(--sp-s2);
}
.authp__form :is(input[type="text"], input[type="email"], input[type="password"], select) {
  width: 100%; box-sizing: border-box;
  height: 48px; padding: 0 var(--sp-s4);
  font: inherit; font-size: 16px;   /* 16px 未満だと iPhone で拡大される */
  color: var(--sp-ink);
  /* 灰色の面で塗ると、欄が大きな塊に見えた（2026-10-10 編集長のご依頼「フォームを磨いて」）。白地に細い線 */
  background: var(--sp-card);
  border: 1px solid var(--sp-field-line);
  border-radius: var(--sp-radius);
  transition: border-color 0.15s var(--sp-ease), background 0.15s var(--sp-ease);
}
.authp__form :is(input[type="text"], input[type="email"], input[type="password"], select):hover { border-color: var(--sp-ink); }
@media (hover: none) { .authp__form :is(input[type="text"], input[type="email"], input[type="password"], select):hover { border-color: var(--sp-field-line); } }
.authp__form :is(input[type="text"], input[type="email"], input[type="password"], select):focus {
  outline: none; background: var(--sp-card); border-color: var(--sp-ink);
  box-shadow: 0 0 0 3px var(--sp-blue-wash);
}
.authp__form :is(input[type="submit"], button[type="submit"]) {
  display: block; width: 100%;
  margin-top: var(--sp-s6);
  height: 52px; padding: 0 var(--sp-s6);
  font: inherit; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sp-on-dark); background: var(--sp-blue);
  border: 0; border-radius: var(--sp-radius-pill);
  cursor: pointer;
  transition: background 0.15s var(--sp-ease), transform 0.15s var(--sp-ease);
}
.authp__form :is(input[type="submit"], button[type="submit"]):hover { background: var(--sp-blue-dark); }
.authp__form :is(input[type="submit"], button[type="submit"]):active { transform: translateY(1px); }
.authp__form input[type="checkbox"] { width: 18px; height: 18px; vertical-align: -3px; margin: 0 var(--sp-s2) 0 0; accent-color: var(--sp-blue); }
.authp__form :is(p, div) { margin: 0; }
.authp__form a { color: var(--sp-link); }
/* 「ログイン情報を保存」「パスワードをお忘れの方」など、フォームの中の小さな行 */
.authp__form :is(.swpm-remember-me, .swpm-forgot-pass-link, .swpm-join-us-link, .swpm-login-form-register-link) {
  margin-top: var(--sp-s4); font-size: calc(14px * var(--sp-scale)); color: var(--sp-text-soft);
}
.authp__form :is(.swpm-remember-me) label { display: inline; font-weight: 400; margin: 0; color: var(--sp-text); }
.authp__form :is(.swpm-forgot-pass-link, .swpm-join-us-link, .swpm-login-form-register-link) a,
.authp__form a:is(.swpm-login-form-pw-reset-link, .swpm-login-form-register-link) { display: inline-block; padding: var(--sp-s1) 0; }
/* 会員登録のフォーム（inc/member-signup.php が SWPM のフォームを2つの組に並べ直す）。
   組の見出しは番号（01・02）＋名前。欄の間は 16px、組の間は線と 40px。
   2026-10-25 編集長のご指摘「見出しが詰まっている」「数字が AI ぽい」: 見出しの下に線と余白を取り、番号は等幅の青い札をやめて Manrope の墨に */
.authp__form .spreg__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.authp__form .spreg__set + .spreg__set { margin-top: var(--sp-s6); padding-top: var(--sp-s6); border-top: 1px solid var(--sp-line); }
/* legend は既定で fieldset の枠線の上に乗る。float にして線の下へ降ろす（次の欄は clear で下に） */
.authp__form .spreg__h {
  float: left; width: 100%;
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 var(--sp-s3); margin: 0 0 var(--sp-s2);
  border-bottom: 1px solid var(--sp-line);
  font-size: calc(16px * var(--sp-scale)); font-weight: 700; color: var(--sp-ink);
}
.authp__form .spreg__no { font-family: var(--sp-font-logo); font-size: calc(16px * var(--sp-scale)); font-weight: 600; letter-spacing: 0; color: var(--sp-text-soft); font-variant-numeric: tabular-nums; }
.authp__form .spreg__h + * { clear: both; }
.authp__form .spreg__f label { margin-top: var(--sp-s5); }
.authp__form .spreg__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-s4); }
.authp__form .spreg__opt {
  margin-left: var(--sp-s2); padding: 1px 6px; vertical-align: 1px;
  font-family: var(--sp-font-mono); font-size: calc(11px * var(--sp-scale)); font-weight: 400;
  color: var(--sp-text-soft); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill);
}
.authp__form .spreg__hint { margin: var(--sp-s2) 0 0; font-size: calc(13px * var(--sp-scale)); line-height: 1.6; color: var(--sp-text-soft); }
/* 規約の同意。本文の大きさで1行に、チェックの箱は押しやすく */
.authp__form .spreg__agree { margin-top: var(--sp-s6); }
.authp__form .spreg__agree label { display: inline-flex; align-items: center; gap: var(--sp-s2); margin: 0; font-weight: 400; font-size: calc(14px * var(--sp-scale)); color: var(--sp-text); min-height: 24px; }
.authp__form .spreg__agree input[type="checkbox"] { margin: 0; }
.authp__form .spreg__agree a { display: inline-block; padding: var(--sp-s1) 0; font-weight: 700; }
.authp__form .spreg ~ * .swpm-registration-submit, .authp__form .spreg ~ .swpm-registration-submit-section :is(input, button) { margin-top: var(--sp-s5); }

/* SWPM の注記・エラー */
.authp__form :is(.swpm-registration-success-msg, .swpm-login-widget-action-msg, .swpm_error, .swpm-error) {
  margin-top: var(--sp-s4); padding: var(--sp-s4); border-radius: var(--sp-radius);
  background: var(--sp-blue-wash); color: var(--sp-ink); font-size: calc(14px * var(--sp-scale));
}

/* 右の黒い面 */
.authp__sh {
  font-size: calc(24px * var(--sp-scale)); font-weight: 700; line-height: 1.4;
  color: var(--sp-on-dark); margin: 0;
}
.authp__ben { list-style: none; margin: var(--sp-s6) 0 0; padding: 0; position: relative; z-index: 1; }
.authp__ben li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-s4);
  padding: var(--sp-s5) 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.authp__no {
  /* 会員登録の組の番号と揃える（2026-10-25。等幅の札をやめて Manrope） */
  font-family: var(--sp-font-logo); font-size: calc(15px * var(--sp-scale)); font-weight: 600;
  color: var(--sp-red-on-dark); padding-top: 1px; font-variant-numeric: tabular-nums;
}
.authp__ben b { display: block; color: var(--sp-on-dark); font-size: calc(16px * var(--sp-scale)); }
.authp__ben p { margin: var(--sp-s2) 0 0; font-size: calc(14px * var(--sp-scale)); line-height: 1.75; color: var(--sp-on-dark-soft); }
.authp__free {
  position: relative; z-index: 1;
  margin: var(--sp-s5) 0 0; padding-top: var(--sp-s5); border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta); letter-spacing: var(--sp-ls-label); color: var(--sp-on-dark);
}
.authp__menu { list-style: none; margin: var(--sp-s6) 0 0; padding: 0; position: relative; z-index: 1; }
.authp__menu li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.authp__menu a { display: flex; justify-content: space-between; padding: var(--sp-s4) 0; color: var(--sp-on-dark); font-weight: 700; }
.authp__menu a:hover { color: var(--sp-red-on-dark); }
/* ロゴの輪を大きく、ごく薄く敷く（**飾りはこれ1つ**。読み上げない） */
.authp__ring {
  position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px;
  color: rgba(255, 255, 255, 0.06); --sp-ring-2: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

/* --- 会員でないときの案内（あとで読む・ダッシュボード）--- */
.gate {
  margin: var(--sp-s6) 0 var(--sp-s8);
  padding: var(--sp-pad);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-card);
  max-width: 640px;
}
.gate__t { font-size: calc(18px * var(--sp-scale)); font-weight: 700; color: var(--sp-ink); margin: 0 0 var(--sp-s3); }
.gate__d { color: var(--sp-text-soft); margin: 0 0 var(--sp-s5); }
.gate__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s4); }
.gate__act .btn-join { padding: 12px 20px; }
.gate__login { color: var(--sp-link); font-weight: 700; padding: 12px 4px; }

/* --- 記事ページの「あとで読む」--- */
.art__save {
  display: inline-flex; align-items: center; gap: var(--sp-s2);
  min-height: 32px; padding: 4px 12px;
  font: inherit; color: var(--sp-text);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-card);
  cursor: pointer;
}
.art__save:hover { border-color: var(--sp-link); color: var(--sp-link); }
.art__save[aria-pressed="true"] { background: var(--sp-link); border-color: var(--sp-link); color: var(--sp-on-link); }

/* --- あとで読む の一覧：外すボタンを行の右に --- */
.saved__row { position: relative; }
.saved__row > a { padding-right: 48px; }
.saved__row .saved__btn { top: 50%; right: 0; transform: translateY(-50%); }
.saved__next { margin: var(--sp-s6) 0 var(--sp-s8); }
.saved__next a { display: inline-block; padding: var(--sp-s2) 0; color: var(--sp-link); font-weight: 700; }

/* --- メールアドレスの確認・送り直しの結果（parts/auth.php・2026-10-05）--------------------
   SWPM が WordPress のエラー画面で出していたものを、ログインの画面の上に出す。うまくいったら差し色、使えないときは灰色 */
.authp__notice {
  margin: var(--sp-s6) 0 0; padding: var(--sp-s4) var(--sp-s5);
  border: 1px solid var(--sp-link); border-left-width: 4px; border-radius: var(--sp-radius);
  background: var(--sp-bg);
}
.authp__notice--warn { border-color: var(--sp-line-strong); }
/* 編集部のアカウントの中身（会員情報の画面・2026-10-12） */
.authp__acct { margin: var(--sp-s6) 0 0; display: grid; gap: var(--sp-s3); }
.authp__acct > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--sp-s3); padding-bottom: var(--sp-s3); border-bottom: 1px solid var(--sp-line); }
.authp__acct dt { color: var(--sp-text-soft); font-size: calc(13px * var(--sp-scale)); }
.authp__acct dd { margin: 0; color: var(--sp-ink); font-weight: 700; overflow-wrap: anywhere; }
.authp__notice-t { margin: 0; font-weight: 700; color: var(--sp-ink); }
.authp__notice-d { margin: var(--sp-s2) 0 0; color: var(--sp-text-soft); line-height: 1.8; font-size: calc(14px * var(--sp-scale)); }