@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════
   스톤 어라이브 GHOST — 회원 쪽 모양 (2026-09-21)

   그누보드 basic 회원 스킨(style.css) 위에 덧칠한다. 그 style.css 도 우리
   색으로 갈아 두었다(도구 scratchpad/member_css_tokens.py, 원본은 _g5/_orig/).

   ┌ 왜 body.sa-inner 를 앞에 붙이나 ─────────────────────────────┐
   │ assets/g5.css 가 게시판 스킨의 흰 바탕을 싹 지우려고           │
   │   body.sa-inner *:not(img)... { background-color:transparent } │
   │ 를 !important 로 건다. 그냥 적으면 그것에 진다. 같은 조상       │
   │ 선택자를 앞에 붙여 무게를 올려야 우리 바탕이 살아남는다.        │
   └───────────────────────────────────────────────────────────────┘

   색·글꼴은 assets/site.css 의 토큰(--gold, --line, --ink …)을 그대로
   쓴다. 홈페이지 본문과 같은 결을 유지하려는 것이다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 바깥 틀 ───────────────────────────────────────────────────── */

body.sa-inner .register{
  max-width:860px; margin:0 auto; padding:0 0 60px;
}
body.sa-inner .register:after{content:""; display:block; clear:both}

/* 머리 ─ 무슨 쪽인지 한눈에 */
body.sa-inner .sa-join-head{
  text-align:center; padding:34px 16px 26px;
}
body.sa-inner .sa-join-eyebrow{
  margin:0 0 10px; font-size:11.5px; letter-spacing:.24em;
  color:var(--gold); opacity:.85; text-transform:uppercase;
}
body.sa-inner .sa-join-head h1{
  margin:0; font-size:32px; line-height:1.25; font-weight:400; color:var(--ink);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
body.sa-inner .sa-join-lead{
  margin:12px 0 0; font-size:14.5px; color:var(--ink-dim);
}

/* ── 1 ▸ 2 ▸ 3 단계 표시 ───────────────────────────────────────── */

body.sa-inner .sa-steps{
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; margin:0 auto 30px; padding:0; list-style:none;
  max-width:560px;
}
body.sa-inner .sa-steps li{
  position:relative; flex:1 1 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-mute);
}
/* 칸 사이를 잇는 선. 동그라미 한가운데(17px) 높이에 맞춘다 */
body.sa-inner .sa-steps li:before{
  content:""; position:absolute; top:17px; right:50%; left:-50%;
  height:1px; background:var(--line);
}
body.sa-inner .sa-steps li:first-child:before{display:none}
body.sa-inner .sa-steps li b{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:400;
  color:var(--ink-mute);
  background:var(--bg-2) !important;
  border:1px solid var(--line);
}
body.sa-inner .sa-steps li.on b{
  color:#2a1c06;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)) !important;
  border-color:transparent;
  box-shadow:0 0 0 4px rgba(255,200,97,.14);
}
body.sa-inner .sa-steps li.done b{
  color:var(--gold); border-color:rgba(255,200,97,.5);
  background:rgba(255,200,97,.10) !important;
}
body.sa-inner .sa-steps li.on span{color:var(--ink)}
body.sa-inner .sa-steps li.done span{color:var(--ink-dim)}

/* ── 카드 ──────────────────────────────────────────────────────── */

body.sa-inner .sa-join-card,
body.sa-inner #register_form .register_form_inner{
  margin:0 0 18px; padding:22px 24px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(27,22,17,.88) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
body.sa-inner .sa-join-card h2,
body.sa-inner #register_form h2{
  margin:0 0 16px; padding:0 0 13px;
  font-size:16px; font-weight:400; color:var(--gold);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:9px;
}
/* 제목 옆 '필수' 딱지 */
body.sa-inner .sa-join-card h2 em{
  font-style:normal; font-size:11px; line-height:1;
  padding:4px 8px; border-radius:999px;
  color:var(--ember); background:rgba(255,106,61,.12) !important;
  border:1px solid rgba(255,106,61,.35);
}

/* 약관 본문 */
body.sa-inner #fregister textarea,
body.sa-inner .sa-join-card textarea{
  width:100%; height:190px; padding:15px 16px; resize:vertical;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(18,15,12,.7) !important;
  color:var(--ink-dim); font-size:13px; line-height:1.75;
  font-family:var(--font);
}

/* 개인정보 수집 표 */
body.sa-inner .fregister_terms table{
  width:100%; border-collapse:collapse; font-size:13px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
body.sa-inner .fregister_terms table caption{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
body.sa-inner .fregister_terms table th{
  padding:11px 12px; font-weight:400; color:var(--gold);
  background:rgba(58,48,37,.55) !important;
  border-bottom:1px solid var(--line);
}
body.sa-inner .fregister_terms table td{
  padding:12px; color:var(--ink-dim); line-height:1.6;
  border-top:1px solid var(--line); vertical-align:middle;
}
body.sa-inner .fregister_terms table td:first-child{color:var(--ink)}

/* ── 동의 체크 ─────────────────────────────────────────────────── */

body.sa-inner .fregister_agree{
  margin:14px 0 0; padding:0; border:0;
}
body.sa-inner .fregister_agree input[type="checkbox"]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
body.sa-inner .fregister_agree input[type="checkbox"] + label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:14px; color:var(--ink-dim); padding:0;
}
body.sa-inner .fregister_agree input[type="checkbox"] + label span{
  flex:0 0 auto; width:20px; height:20px; border-radius:6px;
  border:1px solid var(--line); background:rgba(18,15,12,.8) !important;
  position:relative; transition:.15s ease;
}
/* 체크 표시는 글꼴에 기대지 않고 선 두 개를 기울여 그린다 */
body.sa-inner .fregister_agree input[type="checkbox"] + label span:after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px; opacity:0;
  border:solid #2a1c06; border-width:0 2px 2px 0;
  transform:rotate(45deg); transition:opacity .15s ease;
}
body.sa-inner .fregister_agree input[type="checkbox"] + label:hover span{
  border-color:rgba(255,200,97,.55);
}
body.sa-inner .fregister_agree input[type="checkbox"]:checked + label{color:var(--ink)}
body.sa-inner .fregister_agree input[type="checkbox"]:checked + label span{
  background:linear-gradient(180deg,var(--gold),var(--gold-2)) !important;
  border-color:transparent;
}
body.sa-inner .fregister_agree input[type="checkbox"]:checked + label span:after{opacity:1}
body.sa-inner .fregister_agree input[type="checkbox"]:focus-visible + label span{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* 모두 동의 — 한 단 올려 눈에 띄게 */
body.sa-inner #fregister_chkall{
  margin:0 0 20px; padding:16px 20px;
  border:1px solid rgba(255,200,97,.28); border-radius:14px;
  background:rgba(255,200,97,.06) !important;
}
body.sa-inner #fregister_chkall input[type="checkbox"] + label{
  font-size:15px; color:var(--ink);
}

body.sa-inner .sa-join-note{
  margin:0 0 22px; padding:13px 16px;
  font-size:13px; line-height:1.7; color:var(--ink-dim);
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:0 10px 10px 0;
  background:rgba(27,22,17,.6) !important;
}
body.sa-inner .sa-join-note b{color:var(--gold); font-weight:400}

/* ── 입력 줄 ───────────────────────────────────────────────────── */

body.sa-inner #register_form ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 14px;
}
/* 기본은 한 줄 통으로, half_input 만 반 칸을 쓴다 */
body.sa-inner #register_form ul > li{grid-column:1 / -1; margin:0; padding:0}
body.sa-inner #register_form ul > li.half_input{grid-column:span 1}

body.sa-inner .register_form_inner label{
  display:block; margin:0 0 7px;
  font-size:13px; color:var(--ink-dim); font-weight:400;
}
body.sa-inner .register_form_inner label.inline{display:inline-block; margin:0 0 0 6px}

body.sa-inner .register .frm_input,
body.sa-inner .register textarea,
body.sa-inner .register select{
  width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(18,15,12,.72) !important;
  color:var(--ink); font-size:14.5px; font-family:var(--font);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.sa-inner .register .frm_input::placeholder{color:var(--ink-mute)}
body.sa-inner .register .frm_input:focus,
body.sa-inner .register textarea:focus{
  outline:none; border-color:rgba(255,200,97,.6);
  box-shadow:0 0 0 3px rgba(255,200,97,.12);
}
/* 본인확인이 채워 주는 칸 — 손대지 못한다는 것을 보이게 */
body.sa-inner .register .frm_input[readonly]{
  color:var(--ink-dim); cursor:not-allowed;
  background:rgba(58,48,37,.38) !important;
}
body.sa-inner .register .twopart_input{width:auto; max-width:160px; display:inline-block}
body.sa-inner .register .frm_address{margin-top:8px}

/* 규칙 안내 (아이디·비밀번호 밑) */
body.sa-inner .sa-rule{
  display:block; margin:7px 0 0; font-size:12px; color:var(--ink-mute);
}
/* 중복확인 결과 */
body.sa-inner #msg_mb_id,
body.sa-inner #msg_mb_nick,
body.sa-inner #msg_mb_hp{
  display:block; margin:7px 0 0; font-size:12.5px; color:var(--ember);
}

/* ── 본인확인 단추 ─────────────────────────────────────────────── */

body.sa-inner .register .btn_frmline{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 18px; margin:0 8px 0 0;
  border:1px solid rgba(255,200,97,.45); border-radius:10px;
  background:rgba(255,200,97,.08) !important;
  color:var(--gold); font-size:14px; font-family:var(--font); cursor:pointer;
  transition:.15s ease;
}
body.sa-inner .register .btn_frmline:hover{
  background:rgba(255,200,97,.16) !important; border-color:var(--gold);
}
body.sa-inner #fregisterform .cert_req{
  margin-left:2px; font-size:12.5px; color:var(--ember);
}
body.sa-inner #fregisterform .cert_desc{
  margin-left:6px; font-size:12px; color:var(--ink-mute);
}
/* 인증을 마쳤을 때 뜨는 줄 */
body.sa-inner #fregisterform #msg_certify{
  margin:12px 0 0; padding:11px 15px;
  border:1px solid rgba(127,212,168,.35); border-radius:10px;
  background:rgba(127,212,168,.09) !important;
  color:var(--ok); font-size:13.5px;
}
body.sa-inner #fregisterform #msg_certify strong{color:var(--ok); font-weight:400}

/* ── 물음표 풍선 ───────────────────────────────────────────────── */

body.sa-inner .register .tooltip_icon{
  border:0; background:none !important; padding:0 0 0 4px;
  color:var(--ink-mute); cursor:pointer; vertical-align:middle;
}
body.sa-inner .register .tooltip_icon:hover{color:var(--gold)}
body.sa-inner .register .tooltip{
  display:none; position:absolute; z-index:20; max-width:340px;
  margin-top:6px; padding:11px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(20,16,12,.98) !important;
  color:var(--ink-dim); font-size:12.5px; line-height:1.65; font-weight:400;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
body.sa-inner .register .tooltip:before{display:none}

/* ── 체크 목록 (정보공개·메일수신 …) ───────────────────────────── */

body.sa-inner .register .chk_box{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
body.sa-inner .register .chk_box input[type="checkbox"],
body.sa-inner .register .chk_box input[type="radio"]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
body.sa-inner .register .chk_box input + label{
  display:inline-flex; align-items:center; gap:9px; margin:0; cursor:pointer;
  font-size:13.5px; color:var(--ink-dim);
}
body.sa-inner .register .chk_box input + label span{
  flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1px solid var(--line); background:rgba(18,15,12,.8) !important;
  position:relative;
}
body.sa-inner .register .chk_box input[type="radio"] + label span{border-radius:50%}
body.sa-inner .register .chk_box input:checked + label{color:var(--ink)}
body.sa-inner .register .chk_box input:checked + label span{
  background:linear-gradient(180deg,var(--gold),var(--gold-2)) !important;
  border-color:transparent;
}
body.sa-inner .register .chk_box input[type="checkbox"]:checked + label span:after{
  content:""; position:absolute; left:5.5px; top:1.5px;
  width:4px; height:9px;
  border:solid #2a1c06; border-width:0 2px 2px 0; transform:rotate(45deg);
}
body.sa-inner .register .chk_box input[type="radio"]:checked + label span:before{
  content:""; position:absolute; inset:4px; border-radius:50%; background:#2a1c06;
}
body.sa-inner .register .chk_li{font-size:13.5px; color:var(--ink-dim)}

/* ── 자동등록방지 ──────────────────────────────────────────────── */

body.sa-inner #fregisterform .captcha{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
body.sa-inner #captcha_img{
  border-radius:8px; border:1px solid var(--line);
  background-color:#fff !important;   /* 글자가 보여야 하므로 여기만 흰 바탕 */
}
body.sa-inner #captcha_reload,
body.sa-inner #captcha_mp3{
  height:40px; padding:0 12px; border-radius:9px;
  border:1px solid var(--line); background:rgba(58,48,37,.5) !important;
  color:var(--ink-dim); cursor:pointer;
}
body.sa-inner #captcha_key{max-width:170px}

/* ── 아래 단추 ─────────────────────────────────────────────────── */

body.sa-inner .register .btn_confirm{
  display:flex; gap:10px; justify-content:center;
  margin:26px 0 0; padding:0;
}
body.sa-inner .register .btn_confirm .btn_submit,
body.sa-inner .register .btn_confirm .btn_close{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 30px; min-width:150px;
  border-radius:12px; font-size:16px; font-family:var(--font);
  cursor:pointer; transition:.15s ease; text-decoration:none;
}
body.sa-inner .register .btn_confirm .btn_submit{
  border:0; color:#2a1c06; font-weight:400;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)) !important;
  box-shadow:0 8px 22px rgba(255,155,61,.28);
}
body.sa-inner .register .btn_confirm .btn_submit:hover{
  filter:brightness(1.07); transform:translateY(-1px);
}
body.sa-inner .register .btn_confirm .btn_close{
  border:1px solid var(--line); color:var(--ink-dim);
  background:rgba(58,48,37,.45) !important;
}
body.sa-inner .register .btn_confirm .btn_close:hover{
  color:var(--ink); border-color:rgba(255,236,200,.3);
}

/* ── 3단계 : 가입 완료 ─────────────────────────────────────────── */

body.sa-inner #reg_result{
  max-width:620px; margin:0 auto; padding:40px 28px 34px; text-align:center;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(27,22,17,.88) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.3);
}
body.sa-inner #reg_result i{color:var(--gold); font-size:46px}
body.sa-inner #reg_result h2{
  margin:16px 0 10px; font-size:24px; font-weight:400; color:var(--ink); border:0;
}
body.sa-inner #reg_result h2 strong{color:var(--gold); font-weight:400}
body.sa-inner #reg_result p,
body.sa-inner #reg_result .result_txt{color:var(--ink-dim); font-size:14.5px; line-height:1.75}
body.sa-inner #reg_result #result_email{
  margin:18px 0 0; padding:14px 16px; border-radius:10px;
  border:1px solid var(--line); background:rgba(18,15,12,.6) !important;
}
body.sa-inner #reg_result #result_email strong{color:var(--gold); font-weight:400}

/* ── 좁은 화면 ─────────────────────────────────────────────────── */

@media (max-width:760px){
  body.sa-inner .register{padding-left:14px; padding-right:14px}
  body.sa-inner .sa-join-head h1{font-size:26px}
  body.sa-inner .sa-join-card,
  body.sa-inner #register_form .register_form_inner{padding:18px 16px}
  body.sa-inner #register_form ul{grid-template-columns:1fr}
  body.sa-inner #register_form ul > li.half_input{grid-column:1 / -1}
  body.sa-inner .sa-steps li span{font-size:11px}
  body.sa-inner .register .btn_confirm{flex-direction:column-reverse}
  body.sa-inner .register .btn_confirm .btn_submit,
  body.sa-inner .register .btn_confirm .btn_close{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   원본 style.css 를 눌러야 하는 것들

   basic 스킨은 동의 체크를 카드 우상단에 절대위치로 띄운다
     .fregister_agree { position:absolute; top:0; right:0 }
     .fregister_agree ... label span { position:absolute; top:20px; right:15px }
   우리 카드에서는 제목 줄과 겹치므로 흐름 안으로 되돌린다.

   또 원본은 #id 로 적은 규칙이 많다(#fregister section, #register_form …).
   클래스만으로는 무게에서 지므로 여기서는 같은 #id 를 함께 적는다.
   ══════════════════════════════════════════════════════════════════ */

body.sa-inner #fregister .fregister_agree,
body.sa-inner #fregister_chkall.fregister_agree{
  position:static; top:auto; right:auto;
}
body.sa-inner #fregister .fregister_agree input[type="checkbox"] + label span,
body.sa-inner #fregister_chkall input[type="checkbox"] + label span,
body.sa-inner .fregister_agree.chk_all input[type="checkbox"] + label span{
  position:relative; top:auto; right:auto; display:block;
}
/*  켜졌을 때. 원본이 #id 로 적어 둔 자리라 여기서도 #id 를 같이 적어야
    무게에서 이긴다. 한번 background-image:none 을 위에 걸었다가
    켜진 모양까지 같이 지워 먹었다 — 끄는 규칙은 끈 상태에만 건다. */
body.sa-inner #fregister .fregister_agree input[type="checkbox"]:checked + label span,
body.sa-inner #fregister_chkall input[type="checkbox"]:checked + label span{
  background:linear-gradient(180deg,var(--gold),var(--gold-2)) !important;
  border-color:transparent;
}
body.sa-inner #fregister .fregister_agree input[type="checkbox"]:checked + label span:after,
body.sa-inner #fregister_chkall input[type="checkbox"]:checked + label span:after{opacity:1}

/* 카드 자체 — #fregister section 이 테두리·여백을 잡고 있다 */
body.sa-inner #fregister section.sa-join-card{
  position:relative; margin:0 0 18px; padding:22px 24px;
  border:1px solid var(--line); border-radius:14px;
}
body.sa-inner #fregister section.sa-join-card h2{
  padding:0 0 13px; text-align:left; font-size:16px;
}
body.sa-inner #fregister section.sa-join-card textarea{
  display:block; padding:15px 16px; height:190px; border:1px solid var(--line);
  line-height:1.75;
}
/* 표를 감싼 div 의 20px 을 뺀다. 카드가 이미 여백을 갖고 있다 */
body.sa-inner #fregister_private.fregister_terms > div{padding:0}
body.sa-inner .fregister_terms table th{width:auto}

/* 모두 동의 — 원본은 line-height:50px 한 줄짜리 띠다 */
body.sa-inner #fregister_chkall{
  line-height:1.5; text-align:center;
}
body.sa-inner #fregister_chkall input[type="checkbox"] + label{
  justify-content:center;
}

/* 입력 쪽 바깥 상자 */
body.sa-inner #register_form{background:none !important; margin-bottom:0}
body.sa-inner #fregisterform .form_01 div{margin:0 0 18px}
body.sa-inner #fregisterform .btn_confirm{margin-top:26px}
body.sa-inner .register .chk_li{padding-left:0}
body.sa-inner #reg_mb_icon,
body.sa-inner #reg_mb_img{float:none}

/* 가입완료 쪽 */
body.sa-inner #reg_result{background:rgba(27,22,17,.88) !important; border:1px solid var(--line)}
body.sa-inner #reg_result h2{font-size:24px; margin:16px 0 10px}
body.sa-inner #reg_result #result_email{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
body.sa-inner #reg_result .btn_confirm{margin:28px 0 0}
body.sa-inner #reg_result .reg_result_p{color:var(--gold); font-size:16px}

/* ══════════════════════════════════════════════════════════════════
   휴대폰 문자 인증 (2026-09-21)
   번호 칸 옆 '인증번호 받기' → 6자리 입력 → 확인.
   서버 쪽은 extend/sa_sms.php · bbs/ajax.sa_sms.php 가 맡는다.
   ══════════════════════════════════════════════════════════════════ */

body.sa-inner .sa-hp-row{display:flex; gap:8px; align-items:center}
body.sa-inner .sa-hp-row .frm_input{flex:1 1 auto; min-width:0; width:auto}
body.sa-inner .sa-hp-row .btn_frmline{flex:0 0 auto; margin:0; white-space:nowrap}
body.sa-inner .sa-sms-code{margin-top:8px}
body.sa-inner .sa-sms-code .frm_input{
  max-width:170px; letter-spacing:.32em; text-align:center;
  font-variant-numeric:tabular-nums;
}
/*  hidden 은 display:flex 에 눌린다. 다시 세워 둔다 */
body.sa-inner .sa-hp-row[hidden]{display:none}

body.sa-inner .sa-sms-timer{
  font-size:13px; color:var(--gold); font-variant-numeric:tabular-nums;
}
body.sa-inner .sa-sms-msg{
  margin:7px 0 0; font-size:12.5px; color:var(--ink-mute); min-height:1em;
}
body.sa-inner .sa-sms-msg.good{color:var(--ok)}
body.sa-inner .sa-sms-msg.bad{color:var(--ember)}

/*  인증이 끝난 번호 칸 */
body.sa-inner .register .frm_input.sa-sms-ok{
  border-color:rgba(127,212,168,.5);
  background:rgba(127,212,168,.08) !important;
  color:var(--ink);
}
body.sa-inner .register .btn_frmline:disabled{opacity:.55; cursor:default}

@media (max-width:520px){
  body.sa-inner .sa-hp-row{flex-wrap:wrap}
  body.sa-inner .sa-hp-row .btn_frmline{width:100%}
  body.sa-inner .sa-sms-code .frm_input{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   디스코드 연동 (2026-09-21)
   서버 쪽은 extend/sa_discord.php · bbs/discord_login.php · _callback.php
   ══════════════════════════════════════════════════════════════════ */

body.sa-inner .sa-dc-box{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 15px; border-radius:12px;
  border:1px solid rgba(88,101,242,.38);
  background:rgba(88,101,242,.09) !important;
}
/*  연동이 끝나면 초록 쪽으로 — 끝났다는 것이 한눈에 보여야 한다 */
body.sa-inner .sa-dc-box.on{
  border-color:rgba(127,212,168,.42);
  background:rgba(127,212,168,.09) !important;
}
body.sa-inner .sa-dc-box .btn_frmline{
  margin:0; flex:0 0 auto; white-space:nowrap;
  border-color:rgba(88,101,242,.55); color:#c3c8ff;
  background:rgba(88,101,242,.18) !important;
}
body.sa-inner .sa-dc-box .btn_frmline:hover{
  border-color:#5865f2; background:rgba(88,101,242,.3) !important;
}
body.sa-inner .sa-dc-box.on .btn_frmline{
  border-color:var(--line); color:var(--ink-dim);
  background:rgba(58,48,37,.5) !important;
}
body.sa-inner .sa-dc-state{font-size:13px; color:var(--ink-dim)}
body.sa-inner .sa-dc-box.on .sa-dc-state{color:var(--ok)}
body.sa-inner .sa-dc-state b{color:var(--ink); font-weight:400}
body.sa-inner .sa-dc-box.on .sa-dc-state b{color:var(--ok)}

body.sa-inner .sa-dc-msg{
  margin:7px 0 0; font-size:12.5px; color:var(--ink-mute); min-height:1em;
}
body.sa-inner .sa-dc-msg.good{color:var(--ok)}
body.sa-inner .sa-dc-msg.bad{color:var(--ember)}

@media (max-width:520px){
  body.sa-inner .sa-dc-box{flex-direction:column; align-items:stretch; text-align:center}
  body.sa-inner .sa-dc-box .btn_frmline{width:100%}
}


/*  ── 입력칸 글자색 (2026-09-22) ─────────────────────────────────
    비밀번호를 쳐도 글자가 안 보인다는 말이 나왔다.
    입력칸이 color:var(--ink) 를 쓰는데 --ink 가 두 곳에 서로 다르게
    정의돼 있다 - assets/site.css 는 밝은 크림, assets/g5.css 는 진한
    브라운. 페이지가 g5.css 를 나중에 부르므로 **어두운 쪽이 이긴다.**
    어두운 바탕에 어두운 글자가 되어 안 보였던 것이다.
    변수에 기대지 말고 여기서 색을 직접 준다.                       */
body.sa-inner .register .frm_input,
body.sa-inner .register textarea,
body.sa-inner .register select,
body.sa-inner .register input[type="password"],
body.sa-inner .register input[type="text"],
body.sa-inner .register input[type="email"]{
  color:#f6efe2 !important;
  -webkit-text-fill-color:#f6efe2 !important;   /* 사파리·크롬이 따로 본다 */
  caret-color:#ffc85a;
}
body.sa-inner .register .frm_input::placeholder{color:rgba(246,239,226,.38) !important}

/*  브라우저 자동완성이 칸을 제 색(흰 바탕·검은 글자)으로 칠한다.
    background 로는 못 덮는다 - 크롬이 더 센 내부 규칙을 쓴다.
    안쪽 그림자로 칸을 통째로 채우고 글자색은 따로 준다.  */
body.sa-inner .register input:-webkit-autofill,
body.sa-inner .register input:-webkit-autofill:hover,
body.sa-inner .register input:-webkit-autofill:focus,
body.sa-inner .register input:-webkit-autofill:active{
  -webkit-text-fill-color:#f6efe2 !important;
  -webkit-box-shadow:0 0 0 1000px rgba(18,15,12,.72) inset !important;
  box-shadow:0 0 0 1000px rgba(18,15,12,.72) inset !important;
  caret-color:#ffc85a;
  border-radius:inherit;
  transition:background-color 9999s ease-out 0s;
}

/*  ── 손으로 못 고치는 칸 (닉네임) ──────────────────────────────
    잠겼다는 것이 한눈에 보여야 한다. 안 그러면 '왜 안 쳐지지' 가 된다. */
body.sa-inner .register .frm_input.sa-locked{
  background:rgba(18,15,12,.42) !important;
  border-style:dashed;
  color:rgba(246,239,226,.82) !important;
  -webkit-text-fill-color:rgba(246,239,226,.82) !important;
  cursor:not-allowed;
}
body.sa-inner .register .frm_input.sa-locked:focus{outline:none;box-shadow:none}

/*  ── 치는 즉시 나오는 안내 ─────────────────────────────────────*/
body.sa-inner .register .sa-live{
  display:block; margin:6px 2px 0; font-size:12.5px; line-height:1.4;
}
body.sa-inner .register .sa-live.good{color:#74d86f}
body.sa-inner .register .sa-live.bad {color:#ff8d7a}
body.sa-inner .register .sa-live.dim {color:rgba(246,239,226,.5)}

/*  안내가 나오면 원래 있던 규칙 설명은 자리를 비켜 준다 (두 줄이 겹쳐 보인다) */
body.sa-inner .register .sa-live + .sa-rule{display:none}

/*  꼭 읽어야 하는 안내 (이메일 인증 등) */
body.sa-inner .register .sa-rule.sa-warn{
  color:#ffc85a; font-weight:600;
}

/*  ── 비밀번호 칸은 시스템 글꼴로 (2026-09-22) ──────────────────
    글자를 쳐도 별표조차 안 보인다는 말이 나왔다. 색 문제가 아니었다.

    크롬·엣지는 비밀번호를 가릴 때 U+2022(•)를 쓰는데, 우리 본문
    글꼴 "ONE Mobile POP" 의 그 글리프가 **빈 껍데기**다
    (cmap 에는 있고 그릴 것이 없다). 글리프가 있다고 나오니 브라우저가
    대체 글꼴로 넘어가지도 않아서 아무것도 안 그려진다.
    U+25CF(●)는 멀쩡하지만 크롬이 그걸 안 쓴다.

    가려진 글자는 어차피 점만 보이므로, 이 칸만 시스템 글꼴을 쓴다.
    letter-spacing 은 점들이 붙어 보이지 않게 조금 벌린 것이다.      */
body.sa-inner .register input[type="password"]{
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,"Segoe UI",Arial,sans-serif !important;
  letter-spacing:.12em;
}