@charset "utf-8";

/* ============================================================
   회원가입 (/register/)
   로그인 페이지(login.css)와 같은 규격의 단일 카드.
   ============================================================ */
.rgw{
  --r-ink:var(--ink,#171717); --r-ink-2:var(--ink-2,#747474); --r-ink-3:var(--ink-3,#8f8f8f);
  --r-line:var(--line,#e5e5e3); --r-line-2:var(--line-2,#dadde0);
  --r-card:var(--card,#fff); --r-soft:var(--soft,#fafaf9);
  --r-mint:var(--mint,#20bdb8); --r-mint-2:var(--mint-2,#159f9a);
  --r-warn:var(--coral-2,#c44b42);
  display:flex; align-items:flex-start; justify-content:center;
  padding:48px 16px 80px;
}
.rg{
  width:100%; max-width:460px;
  padding:34px 32px 28px;
  border:1px solid var(--r-line); border-radius:14px; background:var(--r-card);
}

/* ── 머리말 ─────────────────────────────────────────── */
.rg-head{padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--r-line);}
.rg-head h1{font-size:24px; font-weight:800; letter-spacing:-.04em; line-height:1.3; color:var(--r-ink);}
.rg-head p{margin-top:8px; font-size:13px; color:var(--r-ink-2);}

/* ── 입력 ───────────────────────────────────────────── */
.rg-f{margin-bottom:16px;}
.rg-f > label{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:700; letter-spacing:-.02em; color:var(--r-ink-2);
}
.rg-f > label em{font-style:normal; color:var(--r-warn); margin-left:2px;}
.rg-f > label .opt{
  margin-left:4px; font-size:11px; font-weight:600; color:var(--r-ink-3);
}
.rg-f input[type=text],
.rg-f input[type=password],
.rg-f input[type=email],
.rg-f input[type=tel]{
  width:100%; height:46px; padding:0 13px;
  border:1px solid var(--r-line); border-radius:9px; background:var(--r-card);
  font-family:inherit; font-size:14px; color:var(--r-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rg-f input::placeholder{color:var(--r-ink-3);}
.rg-f input:focus{outline:none; border-color:var(--r-mint); box-shadow:0 0 0 3px rgba(32,189,184,.13);}

.rg-sel{position:relative; display:block;}
.rg-sel select{
  width:100%; height:46px; padding:0 34px 0 13px;
  border:1px solid var(--r-line); border-radius:9px; background:var(--r-card);
  font-family:inherit; font-size:14px; color:var(--r-ink);
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.rg-sel select:focus{outline:none; border-color:var(--r-mint); box-shadow:0 0 0 3px rgba(32,189,184,.13);}
.rg-sel::after{
  content:""; position:absolute; right:15px; top:50%; margin-top:-4px;
  width:6px; height:6px; border-right:2px solid var(--r-ink-3); border-bottom:2px solid var(--r-ink-3);
  transform:rotate(45deg); pointer-events:none;
}

.rg-help{display:block; margin-top:6px; font-size:11.5px; line-height:1.6; color:var(--r-ink-3);}
.rg-help.warn{color:var(--r-warn);}
.rg-help.ok{color:var(--r-mint-2);}

/* ── 자동등록방지 ───────────────────────────────────── */
.rg-cap #captcha{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rg-cap #captcha img{border:1px solid var(--r-line); border-radius:8px; vertical-align:middle;}
.rg-cap #captcha input[type=text],
.rg-cap #captcha #captcha_key{
  width:120px !important; height:46px; padding:0 13px;
  border:1px solid var(--r-line); border-radius:9px; font-size:14px;
}
.rg-cap #captcha button,
.rg-cap #captcha .captcha_reload,
.rg-cap #captcha .captcha_mp3{
  height:36px; padding:0 10px; border:1px solid var(--r-line-2); border-radius:8px;
  background:var(--r-soft); font-size:12px; color:var(--r-ink-2); cursor:pointer;
}

/* ── 약관 동의 ──────────────────────────────────────── */
.rg-agree{
  margin:20px 0 18px; padding:14px 15px;
  border:1px solid var(--r-line); border-radius:10px; background:var(--r-soft);
}
.rg-chk{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--r-ink-2);}
.rg-chk input{width:16px; height:16px; flex:0 0 auto; accent-color:var(--r-mint); cursor:pointer;}
.rg-chk b{font-weight:700; color:var(--r-ink);}
.rg-agree-list{
  margin-top:11px; padding-top:11px; border-top:1px solid var(--r-line);
  display:grid; gap:8px;
}
.rg-agree-list .rg-chk{font-size:12.5px;}
.rg-agree-list a{font-weight:600; color:var(--r-mint-2); text-decoration:underline;}

/* ── 버튼 ───────────────────────────────────────────── */
.rg-btn{
  width:100%; height:50px;
  border:1px solid var(--r-mint); border-radius:9px; background:var(--r-mint);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em; color:#fff;
  cursor:pointer; transition:background-color .15s ease, border-color .15s ease;
}
.rg-btn:hover{background:var(--r-mint-2); border-color:var(--r-mint-2);}
.rg-btn:focus-visible{outline:2px solid var(--r-mint); outline-offset:2px;}

.rg-back{margin-top:18px; text-align:center;}
.rg-back a{font-size:13px; font-weight:600; color:var(--r-ink-3);}
.rg-back a:hover{color:var(--r-mint-2); text-decoration:underline;}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:520px){
  .rgw{padding:28px 14px 56px;}
  .rg{padding:26px 20px 22px; border-radius:12px;}
  .rg-head h1{font-size:21px;}
  .rg-f input, .rg-sel select{height:44px;}
  .rg-btn{height:48px;}
}

/* 약관 본문 (펼치기) */
.rg-chk .rg-more{
  margin-left:auto; padding:2px 8px; flex:0 0 auto;
  border:1px solid var(--r-line-2); border-radius:6px; background:var(--r-card);
  font-family:inherit; font-size:11px; font-weight:600; color:var(--r-ink-3); cursor:pointer;
}
.rg-chk .rg-more:hover{border-color:var(--r-mint); color:var(--r-mint-2);}
.rg-terms{
  margin:2px 0 4px; padding:11px 13px; max-height:180px; overflow-y:auto;
  border:1px solid var(--r-line); border-radius:8px; background:var(--r-card);
  font-size:11.5px; line-height:1.8; color:var(--r-ink-2); white-space:pre-line;
}