@charset "UTF-8";
/* =========================================
   sign.css（完成版）
   - login.php / signup.php など認証系ページ
   - common.css：ボタン/フォーム素の装飾
   - style.css：デザイン寄り
   - sign.css：認証ページ固有のUI
========================================= */

/* =========================================
   認証フォームの外枠（サインアップ/ログイン共通）
   ※common.cssに .auth-card がある前提
========================================= */
.signup-card{
  max-width: 560px;
  margin: 24px auto;
}

.signup-title{
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* エラー表示 */
.signup-error-box{ margin-bottom: 12px; }

.signup-error-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

/* 認証フォームの補足テキスト */
.auth-subtext{
  margin-top: 12px;
  font-size: 14px;
}

/* =========================================
   利用規約同意（チェックボックス）
========================================= */
.form-agree-row{
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.form-agree-checkbox{
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

/* 送信ボタン（幅100%が必要な画面向け） */
.form-submit{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
}

/* =========================================
   signup.php 必須（性別/時間帯）などを「チップ」にする
   ※:has 対応ブラウザ前提
========================================= */
.signup-card .radio-row,
.signup-card .check-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup-card .radio-item,
.signup-card .check-item{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  background: var(--cm-color-surface);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 1;
  transition: 0.15s ease;
}

/* 入力自体は全体に被せてクリック領域を確保 */
.signup-card .radio-item input[type="radio"],
.signup-card .check-item input[type="checkbox"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

/* 表示テキストはクリック透過 */
.signup-card .radio-item span,
.signup-card .check-item span{
  pointer-events: none;
}

.signup-card .radio-item:hover,
.signup-card .check-item:hover{
  border-color: rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

.signup-card .radio-item:has(input:checked),
.signup-card .check-item:has(input:checked){
  background: var(--cm-brand-ink);
  color: #fff;
  border-color: var(--cm-brand-ink);
}

.signup-card .radio-item:has(input:focus-visible),
.signup-card .check-item:has(input:focus-visible){
  box-shadow: 0 0 0 3px rgba(34,50,67,0.18);
}

.signup-card .radio-item:active,
.signup-card .check-item:active{
  transform: translateY(0);
  opacity: 0.95;
}

/* =========================================
   login.php 追加（直付けstyle撤去分）
========================================= */
.login-card{
  max-width: 520px;
  margin: 24px auto;
}

.login-title{
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* エラー表示 */
.login-error-box{ margin-bottom: 12px; }

.login-error-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

/* 入力行の余白（直付けmargin-bottomの移設） */
.login-row{ margin-bottom: 10px; }
.login-row:last-of-type{ margin-bottom: 14px; }

/* 入力（直付け：width/padding/border/radius の移設）
   ※ form-input がcommon側で整ってるなら、ここは軽めでOK
*/
.login-input{
  width: 100%;
}

/* login-form は将来拡張用（今は最低限） */
.login-form{ }



/* =========================================
   - signup.php 固有の「直付けstyle剥がし」分
========================================= */

/* 生年月日（3select） */
.signup-birth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* ちょいスペーサー（pref→city間） */
.signup-spacer{
  height: 10px;
}

/* 子どもの年齢帯：非表示 */
.child-age-wrap.is-hidden{
  display: none;
}

/* 小画面は縦積み */
@media (max-width: 520px){
  .signup-birth-grid{
    grid-template-columns: 1fr;
  }
}