/* ===== PIXEL MARKET SignUp ===== */
:root{
  --pm-bg:#0a0d17;
  --pm-surface:rgba(255,255,255,.06);
  --pm-surface-ghost:rgba(255,255,255,.03);
  --pm-border:rgba(255,255,255,.12);
  --pm-text:#e7ecff;
  --pm-dim:#93a0c3;
  --pm-danger:#ff5a8a;
  --pm-accent1:#00d1ff;
  --pm-accent2:#ff33b5;
  --pm-grad:linear-gradient(90deg,var(--pm-accent1),var(--pm-accent2));
  --pm-radius:16px;
  --pm-shadow:0 12px 32px rgba(0,0,0,.35);
}

#contents_area{ background: transparent; }

/* レイアウト */
.pm-signup{ max-width:1100px; margin:30px auto 60px; padding:0 16px; color:var(--pm-text); }
.pm-signup__inner{ display:grid; gap:18px; }

/* ヘッダー部 */
.pm-signup__head{ text-align:center; }
.pm-title{
  margin:0 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
  background: var(--pm-grad); -webkit-background-clip:text; background-clip:text; color: transparent;
}
.pm-lead{ margin:0 0 8px; color:var(--pm-dim); }
.pm-caution{ margin:0; padding-left:18px; color:#ffd1de; }
.pm-caution li{ list-style:disc; }

/* カード */
.pm-card{
  background: var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
}
.pm-card__body{ padding: 20px; }

/* 行レイアウト */
.pm-row{
  display:grid; grid-template-columns: 220px 1fr; gap: 14px;
  padding:14px 0; border-bottom:1px dashed rgba(255,255,255,.08);
}
.pm-row:last-child{ border-bottom:none; }
.pm-col--label h3{ margin:0; font-size:15px; color:#fff; }
.pm-required{
  display:inline-block; margin-left:8px; font-size:12px; color:#fff;
  padding:2px 6px; border-radius:999px; background: var(--pm-grad);
}
.pm-col--field input, .pm-col--field select{
  background: rgba(0,0,0,.2); color: var(--pm-text);
  border:1px solid var(--pm-border); border-radius:12px;
  padding:10px 12px; outline:none;
}
.pm-col--field input:focus, .pm-col--field select:focus{
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(0,209,255,.18);
}
.pm-inline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pm-mini{ color:var(--pm-dim); font-size:12px; }
.pm-suffix{ color:#ffd1de; margin:0 6px; font-size:13px; }
.pm-mt8{ margin-top:8px; }

/* 入力サイズ */
input.half{ width:180px; }

/* パスワード表示切替 */
.pm-password{ position:relative; }
.pm-password input{ width:100%; padding-right:44px; }
.pm-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--pm-border); background:rgba(255,255,255,.04); cursor:pointer;
}
.pm-eye span{
  position:absolute; inset:0; margin:auto; width:16px; height:10px; border:2px solid var(--pm-dim);
  border-top-left-radius:50% 80%; border-top-right-radius:50% 80%; border-bottom:none; top:9px;
}
.pm-eye.show span{ border-color:#fff; }
.pm-strength{ margin-top:6px; font-size:12px; color:var(--pm-dim); }

/* 同意 */
.pm-agree{ margin-top:10px; }
.pm-link{ color:#A7B7FF; text-decoration:underline; }

/* エラー */
.pm-error{ margin-top:6px; font-size:12px; color:var(--pm-danger); }
.pm-global-error{
  margin-top:14px; padding:10px 12px; border-radius:12px;
  background: rgba(255,90,138,.12); color:#ffd1de; border:1px solid rgba(255,90,138,.35);
}

/* ボタン */
.pm-actions{ margin:22px 0 6px; text-align:center; }
.pm-btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; cursor:pointer;
  border:1px solid transparent; text-decoration:none;
}
.pm-btn--primary{ background: var(--pm-grad); color:#fff; box-shadow: var(--pm-shadow); }
.pm-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* レスポンシブ */
@media (max-width: 992px){
  .pm-row{ grid-template-columns: 1fr; }
  input.half{ width:100%; }
}