/* register.css */
.reg-hero { text-align:center; padding:52px 24px 36px; border-bottom:1px solid rgba(201,145,58,0.08); animation:fadeUp .45s ease both; }
.reg-hero__eyebrow { font-family:var(--font-mono); font-size:9px; letter-spacing:.45em; text-transform:uppercase; color:rgba(201,145,58,.38); margin-bottom:12px; }
.reg-hero__title { font-family:var(--font-display); font-size:clamp(32px,6vw,56px); font-weight:700; color:var(--gold); letter-spacing:.1em; line-height:1; margin-bottom:8px; text-shadow:0 0 36px rgba(201,145,58,.16); }
.reg-hero__sub { font-family:var(--font-serif); font-style:italic; font-size:14px; color:rgba(201,145,58,.4); }

.reg-wrap { max-width:980px; margin:0 auto; padding:40px 24px 80px; }

.reg-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border:1px solid rgba(201,145,58,.2); background:rgba(201,145,58,.04); margin-bottom:32px; font-size:13px; line-height:1.8; color:rgba(212,201,176,.6); }
.reg-notice svg { flex-shrink:0; margin-top:2px; color:rgba(201,145,58,.5); }
.reg-notice strong { color:rgba(212,201,176,.85); }

/* プランカード */
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; }

.plan-card { border:1px solid rgba(201,145,58,.22); background:rgba(0,0,0,.2); display:flex; flex-direction:column; padding:0; overflow:hidden; animation:fadeUp .5s ease both; }
.plan-card:nth-child(2) { animation-delay:.08s; }
.plan-card:nth-child(3) { animation-delay:.16s; }
.plan-card--3 { border-color:rgba(201,90,26,.3); }
.plan-card--4 { border-color:rgba(158,26,26,.4); box-shadow:0 0 24px rgba(158,26,26,.07); }

.plan-card__badge { font-family:var(--font-mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase; padding:10px 20px; color:rgba(201,145,58,.55); background:rgba(201,145,58,.05); border-bottom:1px solid rgba(201,145,58,.1); }
.plan-card__badge--3 { color:rgba(201,90,26,.6); background:rgba(201,90,26,.05); border-color:rgba(201,90,26,.12); }
.plan-card__badge--4 { color:rgba(220,38,38,.6); background:rgba(158,26,26,.07); border-color:rgba(158,26,26,.18); }

.plan-card__name { font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.08em; color:var(--gold); padding:18px 20px 0; }
.plan-card__name--3 { color:#e09055; }
.plan-card__name--4 { color:var(--red-light); }
.plan-card__catch { font-family:var(--font-serif); font-style:italic; font-size:13px; color:rgba(212,201,176,.5); padding:6px 20px 14px; line-height:1.6; }
.plan-card__divider { height:1px; background:rgba(201,145,58,.08); margin:0 20px; }
.plan-card__divider--3 { background:rgba(201,90,26,.1); }
.plan-card__divider--4 { background:rgba(158,26,26,.15); }

.plan-card__perks { list-style:none; padding:18px 20px; display:flex; flex-direction:column; gap:14px; flex:1; }
.plan-card__perks li { display:flex; align-items:flex-start; gap:10px; }
.plan-card__perks li strong { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; display:block; margin-bottom:3px; }
.plan-card--2 .plan-card__perks li strong { color:rgba(201,145,58,.8); }
.plan-card--3 .plan-card__perks li strong { color:rgba(201,90,26,.85); }
.plan-card--4 .plan-card__perks li strong { color:rgba(220,38,38,.85); }
.plan-card__perks li p { font-size:11px; line-height:1.7; color:rgba(212,201,176,.5); }
.plan-card--4 .plan-card__perks li p { color:rgba(255,195,195,.55); }

.perk-icon { font-size:10px; flex-shrink:0; margin-top:1px; }
.perk-icon--gold { color:rgba(201,145,58,.6); }
.perk-icon--orange { color:rgba(201,90,26,.7); }
.perk-icon--red { color:rgba(220,38,38,.65); }

.plan-card__btn { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 20px 20px; padding:11px 16px; font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; border:1px solid; transition:all var(--transition); }
.plan-card__btn--2 { background:rgba(201,145,58,.07); border-color:rgba(201,145,58,.42); color:var(--gold); }
.plan-card__btn--2:hover { background:var(--gold); color:var(--ink); }
.plan-card__btn--3 { background:rgba(201,90,26,.07); border-color:rgba(201,90,26,.48); color:var(--orange); }
.plan-card__btn--3:hover { background:var(--orange); color:var(--ink); }
.plan-card__btn--4 { background:rgba(158,26,26,.09); border-color:rgba(158,26,26,.5); color:var(--red-light); }
.plan-card__btn--4:hover { background:var(--red); color:#fff; }

/* 登録の流れ */
.reg-flow { border-top:1px solid rgba(201,145,58,.08); padding-top:36px; }
.reg-flow__title { font-family:var(--font-serif); font-size:18px; font-weight:600; color:rgba(201,145,58,.6); letter-spacing:.06em; margin-bottom:24px; text-align:center; }
.reg-flow__steps { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; justify-content:center; }
.reg-flow__step { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:160px; text-align:center; }
.reg-flow__num { font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--gold); width:34px; height:34px; border:1px solid rgba(201,145,58,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(201,145,58,.05); flex-shrink:0; }
.reg-flow__step p { font-size:12px; line-height:1.7; color:rgba(212,201,176,.48); }
.reg-flow__step strong { color:rgba(212,201,176,.78); }
.reg-flow__arrow { font-family:var(--font-mono); font-size:18px; color:rgba(201,145,58,.22); flex-shrink:0; padding-top:8px; }

/* アカウント作成ボックス */
.create-box { max-width:560px; margin:0 auto; border:1px solid rgba(201,145,58,.25); background:rgba(201,145,58,.02); }
.create-box__header { padding:28px 28px 20px; border-bottom:1px solid rgba(201,145,58,.1); }
.create-box__level { font-family:var(--font-mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:rgba(201,145,58,.5); margin-bottom:8px; }
.create-box__title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--paper); letter-spacing:.06em; margin-bottom:6px; }
.create-box__desc { font-size:12px; color:rgba(212,201,176,.5); }

.create-warning { margin:20px 28px 0; padding:14px 16px; border:1px solid rgba(220,38,38,.3); background:rgba(158,26,26,.06); }
.create-warning__title { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-light); display:flex; align-items:center; gap:6px; margin-bottom:10px; animation:blink 2s infinite; }
.create-warning__list { list-style:none; display:flex; flex-direction:column; gap:5px; }
.create-warning__list li { font-size:12px; line-height:1.7; color:rgba(212,201,176,.55); padding-left:14px; position:relative; }
.create-warning__list li::before { content:'▪'; position:absolute; left:0; top:2px; font-size:8px; color:var(--red-light); }
.create-warning__list strong { color:rgba(212,201,176,.85); }

.create-form { padding:24px 28px 28px; display:flex; flex-direction:column; gap:16px; }
.create-field { display:flex; flex-direction:column; gap:7px; }
.create-field__label { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(201,145,58,.48); }
.create-field__input { background:rgba(0,0,0,.4); border:1px solid rgba(201,145,58,.2); color:var(--paper); font-family:var(--font-mono); font-size:14px; letter-spacing:.06em; padding:10px 14px; outline:none; transition:border-color .2s; }
.create-field__input:focus { border-color:rgba(201,145,58,.55); }
.create-field__input::placeholder { color:rgba(212,201,176,.2); font-size:12px; font-family:var(--font-serif); }
.create-form__error { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--red-light); display:none; padding:8px 12px; border:1px solid rgba(220,38,38,.25); background:rgba(158,26,26,.05); }
.create-submit-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; background:rgba(201,145,58,.08); border:1px solid rgba(201,145,58,.42); color:var(--gold); cursor:pointer; transition:all var(--transition); }
.create-submit-btn:hover { background:var(--gold); color:var(--ink); }

/* 完了画面 */
.create-result { padding:28px; }
.create-result__header { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.create-result__header p { font-family:var(--font-display); font-size:18px; color:rgba(34,197,94,.8); letter-spacing:.06em; }
.create-result__creds { border:1px solid rgba(34,197,94,.2); background:rgba(34,197,94,.04); padding:20px; margin-bottom:18px; }
.create-result__creds-title { font-family:var(--font-mono); font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:rgba(34,197,94,.5); margin-bottom:14px; animation:blink 2s infinite; }
.cred-row { display:flex; align-items:center; gap:16px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.cred-row:last-child { border-bottom:none; }
.cred-row__label { font-family:var(--font-mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:rgba(212,201,176,.35); width:90px; flex-shrink:0; }
.cred-row__value { font-family:var(--font-mono); font-size:18px; font-weight:700; color:rgba(34,197,94,.85); letter-spacing:.08em; }
.cred-row__level { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; }
.create-result__warning { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:rgba(220,38,38,.65); padding:12px 16px; border:1px solid rgba(220,38,38,.25); background:rgba(158,26,26,.05); margin-bottom:16px; }
.create-result__check { display:flex; align-items:center; gap:10px; margin-bottom:18px; cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:rgba(212,201,176,.55); }
.create-result__check input { width:16px; height:16px; cursor:pointer; accent-color:var(--gold); }
.create-result__login-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; font-family:var(--font-mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; background:rgba(201,145,58,.08); border:1px solid rgba(201,145,58,.42); color:var(--gold); cursor:pointer; transition:all var(--transition); }
.create-result__login-btn:hover:not(:disabled) { background:var(--gold); color:var(--ink); }
.create-result__login-btn:disabled { opacity:.35; cursor:not-allowed; }

.reg-blink { animation:blink 2s infinite; }

@media (max-width:720px) {
  .plan-grid { grid-template-columns:1fr; }
  .reg-flow__steps { flex-direction:column; align-items:center; }
  .reg-flow__arrow { transform:rotate(90deg); }
  .create-box { max-width:100%; }
  .create-form, .create-box__header, .create-result { padding:20px 18px; }
  .create-warning { margin:16px 18px 0; }
}

/* note URLが未設定の場合のボタン無効スタイル */
.plan-card__btn--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* ---- すでに会員の方 ---- */
.reg-already {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid rgba(201,145,58,.1);
  background: rgba(201,145,58,.02);
}
.reg-already__text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(212,201,176,.38);
}
.reg-already__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(201,145,58,.35);
  color: rgba(201,145,58,.7);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.reg-already__btn:hover {
  background: rgba(201,145,58,.08);
  color: var(--gold);
  border-color: rgba(201,145,58,.6);
}

/* ---- レベルバッジ（登録フォーム上部） ---- */
.create-level-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid rgba(201,145,58,.35);
  background: rgba(201,145,58,.07);
  color: var(--gold);
  margin-bottom: 14px;
}
.create-level-badge--lv2 { color: var(--gold); border-color: rgba(201,145,58,.35); background: rgba(201,145,58,.06); }
.create-level-badge--lv3 { color: #e09055; border-color: rgba(201,90,26,.4); background: rgba(201,90,26,.06); }
.create-level-badge--lv4 { color: var(--red-light); border-color: rgba(158,26,26,.45); background: rgba(158,26,26,.07); }

/* ---- フォームフィールドのnote ---- */
.create-field__note {
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(201,145,58,.3);
  margin-left: 8px;
  text-transform: none;
}

/* ---- フォーム内ログインヒント ---- */
.create-login-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(201,145,58,.08);
}
.create-login-hint__text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(212,201,176,.3);
}
.create-login-hint__btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,145,58,.6);
  background: transparent;
  border: 1px solid rgba(201,145,58,.25);
  padding: 6px 16px;
  cursor: pointer;
  transition: all .2s;
}
.create-login-hint__btn:hover {
  color: var(--gold);
  border-color: rgba(201,145,58,.55);
  background: rgba(201,145,58,.06);
}

/* ---- 最上部ログインバナー ---- */
.reg-already--top {
  margin-bottom: 24px;
  border-color: rgba(201,145,58,.15);
}