@charset "utf-8";
/* ============================================================
   LEGATO — 회원 영역 스타일 (로그인 / 회원가입 / 정보찾기)
   업로드 위치 : /theme/basic/css/legato-member.css
   로드 : head.php + head.sub.php 양쪽에 <link> 추가
          (register.php·content.php 는 head.php, login.php 등은 head.sub.php 사용)

   스코프 원칙
     · 회원 컨테이너 안에서만 적용됩니다.
       #login_wrap #register_wrap #register_form #fregisterform
       #reg_result #find_info #mb_confirm
     · 게시판(.bbs-wrap 하위)에는 영향을 주지 않습니다.
     · 예외: .sound_only 숨김만 백엔드 전역(.legato-wrap)에 적용합니다.
       그누보드 전용 클래스이고, 화면에 노출되면 안 되는 텍스트입니다.
   ============================================================ */

/* ── 백엔드 전역 : 접근성 전용 텍스트 숨김 ─────────────── */
.legato-wrap .sound_only,
.legato-wrap .msg_sound_only,
#login_fs legend, #info_fs legend, #fregisterform legend, #fregister legend,
#mb_confirm legend, #pw_confirm legend, #login_info h2, #mb_login_notmb h2 {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 회원 컨테이너 기본 레이아웃 ───────────────────────
   head.php 경로(register.php 등)는 .bbs-wrap 으로 감싸지지 않으므로
   컨테이너가 직접 여백을 갖습니다. .bbs-wrap 안에서는 중복을 제거합니다. */
#login_wrap, #register_wrap, #register_form,
#reg_result, #find_info, #mb_confirm, #pw_confirm {
  padding: 120px 20px 100px;
}
.bbs-wrap #login_wrap, .bbs-wrap #register_wrap, .bbs-wrap #register_form,
.bbs-wrap #reg_result, .bbs-wrap #find_info, .bbs-wrap #mb_confirm, .bbs-wrap #pw_confirm {
  padding: 0;
}

/* ── 1. 회원 페이지 공통 컨테이너 ────────────────────────── */
#login_wrap,
#register_wrap,
#register_form,
#reg_result,
#find_info,
#mb_confirm {
  width: 100%;
  margin: 0 auto;
  color: var(--white, #fff);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 15px;
  line-height: 1.7;
}
#login_wrap,
#find_info,
#mb_confirm { max-width: 420px; }
#register_wrap,
#reg_result   { max-width: 720px; }
#register_form { max-width: 760px; }

:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login_left { width: 100%; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .mbskin { width: 100%; }

/* ── 2. 페이지 타이틀 ──────────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sub_title,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #win_title,
#register_form > h1,
#reg_result > h1 {
  font-family: 'Montserrat', var(--font-sans, sans-serif);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--white, #fff);
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sub_title::after,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #win_title::after,
#register_form > h1::after,
#reg_result > h1::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 46px; height: 2px;
  background: var(--amber, #FFBF00);
}

/* ── 3. 입력 필드 공통 ────────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .frm_input,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=text],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=password],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=email],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=tel],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) select,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) textarea {
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  padding: 0 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  color: var(--white, #fff);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) textarea { height: auto; padding: 14px 16px; line-height: 1.75; resize: vertical; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .frm_input:focus,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input:focus,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) select:focus,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) textarea:focus {
  outline: none;
  border-color: var(--amber, #FFBF00);
  background: rgba(255,191,0,.06);
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) ::placeholder { color: var(--gray-600, #666674); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .half_input { width: 49%; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .full_input { width: 100%; }

/* 필드 라벨 (ID / PW 등) */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .input_title,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .form_name,
#register_form label:not(.sound_only):not([for^=agree]):not([for=chk_all]) {
  display: block;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-400, #9999A5);
  margin: 0 0 8px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login_input_wrap { margin-bottom: 18px; }

/* 필수 표시 */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .required,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .icon_required,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .text_required { border-color: rgba(255,191,0,.35); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) strong.icon_required::after { content: " *"; color: var(--amber, #FFBF00); }

/* 검사 결과 메시지 */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #msg_mb_id,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #msg_mb_nick,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #msg_certify,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .frm_info {
  display: block;
  font-size: 12.5px;
  color: var(--gray-400, #9999A5);
  margin-top: 6px;
  line-height: 1.6;
}

/* ── 4. 버튼 ─────────────────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_submit,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) button.btn_submit,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input.btn_submit {
  display: block;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 2px;
  background: var(--amber, #FFBF00);
  color: #0A0A0F;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_submit:hover { background: var(--amber-light, #FFD54F); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_submit:active { transform: translateY(1px); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .input_btn { margin-top: 26px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_confirm { margin-top: 30px; }

:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_close,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_cancel,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) button.btn_frmline,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) a.btn_frmline,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_overlap {
  display: inline-block;
  height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--white, #fff);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_close:hover,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_cancel:hover,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) button.btn_frmline:hover,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .btn_overlap:hover {
  border-color: var(--amber, #FFBF00);
  color: var(--amber, #FFBF00);
}

/* ── 5. 체크박스 ─────────────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=checkbox],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) input[type=radio] {
  width: 18px; height: 18px;
  margin: 0 8px 0 0;
  vertical-align: -3px;
  accent-color: var(--amber, #FFBF00);
  cursor: pointer;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) label[for^=agree],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) label[for=chk_all],
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .chkbox_div label {
  display: inline-block;
  font-size: 14px;
  color: var(--white, #fff);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  margin: 0;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .chkbox_div label i { display: none; }

/* ── 6. 로그인 화면 ──────────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_fs { border: 0; padding: 0; margin: 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_info { margin: 18px 0 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login_info_wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_password_lost {
  font-size: 13px;
  color: var(--gray-400, #9999A5);
  text-decoration: none;
  transition: color .2s ease;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_password_lost::after { content: " ›"; color: var(--gray-600, #666674); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_password_lost:hover { color: var(--amber, #FFBF00); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #login_password_lost img { display: none; }

:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .is_no_member {
  margin: 26px 0 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align: center;
  font-size: 14px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .is_no_member .c_50 { color: var(--gray-400, #9999A5); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .is_no_member a {
  margin-left: 8px;
  color: var(--amber, #FFBF00);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,191,0,.4);
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .is_no_member a:hover { border-bottom-color: var(--amber, #FFBF00); }

/* ── 7. 소셜 로그인 / 소셜 가입 ──────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login-sns { margin: 30px 0 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login-sns h2,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .login-sns h3 {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-400, #9999A5);
  text-align: center;
  margin: 0 0 16px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-wrap { display: flex; flex-direction: column; gap: 10px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-icon {
  display: flex; align-items: center; justify-content: center;
  height: 52px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: filter .2s ease;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-icon:hover { filter: brightness(1.08); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-icon .ico { display: none; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-icon .txt i { font-style: normal; font-weight: 500; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-naver { background: #03C75A; color: #fff; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sns-kakao { background: #FEE500; color: #191600; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #sns_register { margin: 0 0 34px; }

/* ── 8. 약관 동의 화면 ───────────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_term,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private {
  margin: 0 0 24px;
  padding: 22px 24px;
  background: var(--black-card, #1A1A24);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_term h2,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white, #fff);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private .title {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private .title h2 { margin: 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_term textarea,
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private textarea {
  height: 190px;
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.08);
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--gray-400, #9999A5);
  white-space: pre-wrap;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .fregister_agree { border: 0; padding: 0; margin: 14px 0 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private .title .fregister_agree { margin: 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_chkall {
  margin: 18px 0 0; padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_chkall label { font-weight: 700; }

/* ── 9. 회원가입 폼 ──────────────────────────────────── */
#register_form .register_list,
#fregisterform .register_list { list-style: none; margin: 0; padding: 0; }
#register_form .form_01,
#fregisterform .form_01 { margin: 0 0 20px; }
#register_form fieldset,
#fregisterform fieldset { border: 0; padding: 0; margin: 0 0 8px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .form_agree_q { margin: 8px 0 0; font-size: 14px; color: var(--gray-400, #9999A5); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .r_agree label, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .r_gender label {
  display: inline-block; margin-right: 18px;
  font-family: var(--font-sans, sans-serif);
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--white, #fff);
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .emailbox, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .datebox { display: flex; gap: 8px; align-items: center; }

/* ── 10. 자동등록방지(캡차) ──────────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha {
  border: 0; padding: 0; margin: 18px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_img {
  height: 50px; border-radius: 2px; background: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_key { width: 120px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_mp3, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_reload {
  height: 50px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px; background: transparent;
  color: var(--gray-400, #9999A5); font-size: 12px; cursor: pointer;
}
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_mp3:hover, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_reload:hover { color: var(--amber, #FFBF00); border-color: var(--amber, #FFBF00); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_info { flex: 1 1 100%; font-size: 12.5px; color: var(--gray-600, #666674); }

/* ── 11. 정보찾기 · 비밀번호 확인 ────────────────────── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #info_fs { border: 0; padding: 0; margin: 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #info_fs p { color: var(--gray-400, #9999A5); font-size: 14px; margin: 0 0 18px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .new_win_con { margin: 0; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .win_btn { display: flex; gap: 10px; margin-top: 26px; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .win_btn .btn_submit { flex: 1 1 auto; }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .win_btn .btn_close { flex: 0 0 auto; }

/* ── 12. 가입 완료 ───────────────────────────────────── */
#reg_result { text-align: center; }
#reg_result .result_email { color: var(--gray-400, #9999A5); font-size: 14px; }
#reg_result .result_btn_all { margin-top: 30px; }
#reg_result .btn_submit { display: inline-block; width: auto; min-width: 200px; padding: 0 30px; }

/* ── 13. 모바일 ──────────────────────────────────────── */
@media (max-width: 640px) {
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .sub_title, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #win_title { font-size: 26px; margin-bottom: 26px; }
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_term, :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private { padding: 18px 16px; }
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #fregister_private .title { align-items: flex-start; flex-direction: column; }
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .win_btn { flex-direction: column; }
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) .win_btn .btn_close { width: 100%; }
  :is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) #captcha_key { width: 100px; }
}

/* == 14. 소셜 로그인 스킨(/skin/social/style.css) 무력화 =============
   큐가 복구되면서 소셜 플러그인 기본 CSS 가 함께 로드됩니다.
   그 CSS 는 아이콘을 원형 이미지로 만들고 텍스트를 숨기며
   (visibility:hidden / opacity:0 / font-size:0),
   회원가입 화면에서는 float:left · width:50% 로 좌우 분할합니다.
   background-color 에 !important 를 쓰므로 같은 자리에 !important 로 덮습니다.
   ※ 아래는 ID 2개(#register_wrap #sns_register = 2,0,0)로 우선순위를 확보합니다. */

#login_wrap #sns_login,
#register_wrap #sns_register,
#register_form #sns_register {
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  text-align: left;
}
#login_wrap #sns_login { margin: 30px 0 0; }
#register_wrap #sns_register, #register_form #sns_register { margin: 0 0 34px; }
#login_wrap #sns_login::after,
#register_wrap #sns_register::after { content: none; }

/* 소제목 */
#login_wrap #sns_login h3,
#register_wrap #sns_register h2,
#register_form #sns_register h2 {
  float: none;
  display: block;
  width: auto; height: auto; line-height: 1.4;
  margin: 0 0 16px; padding: 0;
  text-align: left;
  color: var(--gray-400, #9999A5);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}

/* 버튼 묶음 */
#login_wrap #sns_login .sns-wrap,
#register_wrap #sns_register .sns-wrap,
#register_form #sns_register .sns-wrap {
  float: none;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: flex-start;
  width: auto; height: auto; line-height: normal;
  margin: 0; padding: 0;
  text-align: left;
}
#login_wrap #sns_login .sns-wrap::after,
#register_wrap #sns_register .sns-wrap::after { content: none; }

/* 버튼 */
#login_wrap #sns_login .sns-icon,
#register_wrap #sns_register .sns-icon,
#register_form #sns_register .sns-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; line-height: 1;
  margin: 0; padding: 0;
  position: relative;
  border: 0; border-radius: 12px;
  aspect-ratio: auto; overflow: visible;
  padding-left: 52px; padding-right: 52px;
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto;
  text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  transition: filter .2s ease;
}
#login_wrap #sns_login .sns-naver,
#register_wrap #sns_register .sns-naver,
#register_form #sns_register .sns-naver { background-color: #03C75A !important; color: #fff; }
#login_wrap #sns_login .sns-kakao,
#register_wrap #sns_register .sns-kakao,
#register_form #sns_register .sns-kakao { background-color: #FEE500 !important; color: #191600; }
#login_wrap #sns_login .sns-icon:hover,
#register_wrap #sns_register .sns-icon:hover,
#register_form #sns_register .sns-icon:hover { filter: brightness(1.08); }

/* 아이콘 이미지 span 숨김 · 텍스트 노출 */
/* 브랜드 심볼 — 카카오/네이버 BI 가이드는 심볼 없는 버튼을 허용하지 않습니다.
   경로 데이터는 사이트에 이미 있는 /skin/social/img/sns_*_s.svg 의 공식 심볼에서
   가져왔고, 색상만 가이드 규정값(카카오 심볼 #000000 / 네이버 심볼 흰색)으로 씁니다. */
#login_wrap #sns_login .ico,
#register_wrap #sns_register .ico,
#register_form #sns_register .ico {
  display: block !important;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
#login_wrap #sns_login .sns-kakao .ico,
#register_wrap #sns_register .sns-kakao .ico,
#register_form #sns_register .sns-kakao .ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 40'%3E%3Cpath fill='%23000000' d='M20.0528 9.7333C13.0795 9.7333 7.42615 14.2266 7.42615 19.7733C7.42615 23.2133 9.59948 26.24 12.9061 28.0533L11.9995 32.9466C11.9595 33.1866 12.2261 33.3733 12.4261 33.2266L17.8528 29.6533C17.8528 29.6533 19.3061 29.8 20.0528 29.8C27.0261 29.8 32.6795 25.3066 32.6795 19.76C32.6795 14.2133 27.0261 9.71997 20.0528 9.71997V9.7333Z'/%3E%3C/svg%3E") !important;
}
#login_wrap #sns_login .sns-naver .ico,
#register_wrap #sns_register .sns-naver .ico,
#register_form #sns_register .sns-naver .ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 40'%3E%3Cpath fill='%23ffffff' d='M23.2261 11.0533V20.3067L16.8928 11.0533H10.0528V29.3867H16.8795V20.1333L23.2128 29.3867H30.0528V11.0533H23.2261Z'/%3E%3C/svg%3E") !important;
}
#login_wrap #sns_login .txt,
#register_wrap #sns_register .txt,
#register_form #sns_register .txt {
  position: static;
  display: block;
  width: auto; height: auto;
  margin: 0; padding: 0; border: 0;
  overflow: visible;
  line-height: 1;
  font-size: 15px; font-weight: 700;
  color: inherit; text-align: center;
  opacity: 1; visibility: visible;
}
#login_wrap #sns_login .txt i,
#register_wrap #sns_register .txt i,
#register_form #sns_register .txt i { font-style: normal; font-weight: 500; }

/* 회원가입 약관 페이지에는 제목 요소가 없어 CSS 로 넣습니다. */
#register_wrap::before {
  content: "JOIN";
  display: block;
  font-family: 'Montserrat', var(--font-sans, sans-serif);
  font-size: 34px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.2;
  color: var(--white, #fff);
  margin: 0 0 34px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 -2px 0 -0px transparent;
  background-image: linear-gradient(var(--amber, #FFBF00), var(--amber, #FFBF00));
  background-repeat: no-repeat;
  background-size: 46px 2px;
  background-position: left bottom;
}

/* == 15. 팝업 / 부가 회원 페이지 =====================================
   쪽지(memo) / 포인트(point) / 스크랩(scrap) / 회원정보(profile) /
   메일보내기(formmail) 팝업창.
   기존 스킨 style.css 를 비웠으므로 여기서 최소한의 다크 처리를 합니다.
   이 페이지들은 head.sub.php 를 사용하므로 본 파일이 함께 로드됩니다. */
#memo_list, #memo_write, #memo_view, #point, #scrap, #scrap_do,
#profile, #formmail, #myinfo_top, #myinfo_table {
  color: var(--gray-400);
  font-family: var(--font-sans);
}
#win_title {
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,191,0,.25);
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
#memo_list table, #point table, #scrap table, #profile table,
#memo_view table, #scrap_do table {
  width: 100%;
  border-collapse: collapse;
  background: var(--black-card);
}
#memo_list th, #point th, #scrap th, #profile th,
#memo_view th, #scrap_do th {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--amber-light);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
#memo_list td, #point td, #scrap td, #profile td,
#memo_view td, #scrap_do td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--gray-400);
  font-size: 14px;
}
#memo_list a, #point a, #scrap a, #profile a, #memo_view a, #formmail a { color: var(--amber-light); }
#memo_list a:hover, #point a:hover, #scrap a:hover, #profile a:hover { color: var(--amber); }

#point .point_top, #myinfo_top {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255,191,0,.20);
  border-radius: 10px;
  background: var(--black-card);
  color: var(--white);
}
#point .point_all strong, #point .point_status strong { color: var(--amber); }
#point .txt_expired { color: var(--gray-600); }

#memo_write textarea, #formmail textarea, #scrap_do textarea,
#memo_write .frm_input, #formmail .frm_input, #scrap_do .frm_input,
#formmail .frm_file {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: var(--black-light);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color .2s ease;
}
#memo_write textarea, #formmail textarea, #scrap_do textarea { min-height: 180px; line-height: 1.7; resize: vertical; }
#memo_write textarea:focus, #formmail textarea:focus, #scrap_do textarea:focus,
#memo_write .frm_input:focus, #formmail .frm_input:focus, #scrap_do .frm_input:focus {
  border-color: var(--amber);
  outline: none;
}
#memo_view_contents { padding: 18px 0; color: var(--gray-400); font-size: 15px; line-height: 1.8; }
#memo_view_contents h2 { color: var(--white); font-size: 18px; }

#profile .profile_img img, #profile .my_profile_img img { border-radius: 8px; }
#profile h2, #myinfo_table h3 { margin: 24px 0 12px; color: var(--white); font-size: 17px; font-weight: 600; }

/* 팝업 하단 창닫기 버튼 */
#memo_list ~ .win_btn button, #point ~ .win_btn button, #scrap ~ .win_btn button,
#profile ~ .win_btn button, .win_btn button, .win_btn a {
  display: inline-block;
  min-width: 140px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: transparent;
  color: var(--gray-400);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.win_btn button:hover, .win_btn a:hover { border-color: var(--amber); color: var(--amber); }

/* == 16. 회원가입 폼(register_form.php) 정밀 정리 =====================
   스킨 마크업이 아래 구조라 라벨과 입력칸이 형제로 나열됩니다.
     <li>
       <div class="form_name"><p>아이디</p></div>
       <label class="sound_only">…</label>
       <input class="frm_input half_input">
       <button class="btn_overlap">중복확인</button>
       <span id="msg_mb_id"></span>
     </li>
   li 를 flex 로 만들어 [라벨 140px | 입력 나머지] 2단으로 세웁니다.

   고친 것
     · "필수 정보필수 입력 항목입니다." 가 한 덩어리로 붙던 문제
       (.text_required 는 .sound_only 가 아니라 화면에 나오는 요소입니다)
     · 라벨 글자가 "아 이 디" 처럼 벌어지던 문제 → letter-spacing 초기화
     · 컨테이너 폭·중앙 정렬이 #register_form 에만 걸려 있어
       바깥에 있는 [가입하기] 버튼이 페이지 전체 폭으로 퍼지던 문제
       → 폭·여백을 form(#fregisterform) 으로 옮김
     · 성별·수신동의 라디오가 세로로 흩어지던 문제                    */

/* 컨테이너를 form 으로 옮깁니다 (btn_confirm 이 #register_form 바깥) */
#fregisterform {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 120px 20px 100px;
}
.bbs-wrap #fregisterform { padding: 0; }
#register_form {
  max-width: none;
  margin: 0;
  padding: 0;
}
.bbs-wrap #register_form { padding: 0; }
#fregisterform *, #fregisterform *::before, #fregisterform *::after { box-sizing: border-box; }
#fregisterform img { max-width: 100%; height: auto; }

/* 섹션 제목 : 필수 정보 + 안내문 */
#register_form h2 {
  display: block;
  margin: 0 0 8px;
  color: var(--white, #fff);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}
#register_form .text_required {
  display: block;
  margin: 6px 0 0;
  color: var(--gray-600, #666674);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
}
#register_form .text_required .icon_required {
  font-style: normal;
}
#register_form .text_required .icon_required::before {
  content: "*";
  margin-right: 4px;
  color: var(--amber, #FFBF00);
}

/* 목록 */
#register_form .register_list { margin: 18px 0 0; padding: 0; list-style: none; }
#register_form .register_list > li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  min-height: 0;
}
#register_form .register_list > li:last-child { border-bottom: 0; }
#register_form .register_list > li::after { content: none; }

/* 왼쪽 라벨 */
#register_form .form_name {
  flex: 0 0 132px;
  padding-top: 13px;
}
#register_form .form_name p {
  margin: 0;
  color: var(--gray-400, #9999A5);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-align-last: auto;
  word-break: keep-all;
}

/* 오른쪽 입력 영역 */
#register_form .register_list > li > .frm_input,
#register_form .register_list > li > .form_input,
#register_form .register_list > li > .datebox,
#register_form .register_list > li > .telbox,
#register_form .register_list > li > .emailbox,
#register_form .register_list > li > .r_gender,
#register_form .register_list > li > .form_agree_q,
#register_form .register_list > li > .form_agree_q0,
#register_form .register_list > li > #captcha,
#register_form .register_list > li > .captcha {
  flex: 1 1 260px;
  min-width: 0;
}
#register_form .form_input { display: block; }
#register_form .emailbox { display: block; }
#register_form .emailbox .frm_input { width: 100%; }
#register_form .datebox .frm_input { width: 100%; }
#register_form .frm_input.half_input,
#register_form .frm_input.full_input { width: 100%; max-width: 100%; }

/* 안내 문구 · 검증 메시지는 줄바꿈해서 아래로 */
#register_form .frm_info,
#register_form span[id^="msg_"],
#register_form #msg_certify {
  flex: 1 1 100%;
  margin: 0 0 0 148px;
  color: var(--gray-600, #666674);
  font-size: 12.5px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  #register_form .frm_info,
  #register_form span[id^="msg_"],
  #register_form #msg_certify { margin-left: 0; }
}

/* 중복확인 · 주소검색 등 인라인 버튼 */
#register_form .btn_overlap,
#register_form .btn_frmline {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--white, #fff);
  font-family: var(--font-sans, sans-serif);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition, .2s ease);
}
#register_form .btn_overlap:hover,
#register_form .btn_frmline:hover { border-color: var(--amber, #FFBF00); color: var(--amber, #FFBF00); }

/* 라디오 : 성별 */
#register_form .r_gender {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 50px;
}
#register_form .r_gender input[type="radio"],
#register_form .r_agree input[type="radio"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--amber, #FFBF00);
  cursor: pointer;
}
#register_form .r_gender label {
  margin: 0 20px 0 0;
  color: var(--white, #fff);
  font-size: 14.5px;
  cursor: pointer;
}
#register_form .r_gender label span, #register_form .r_agree label span { font-size: inherit; }

/* 라디오 : 이메일 수신동의 */
#register_form .form_agree_q p {
  margin: 0 0 12px;
  padding-top: 13px;
  color: var(--gray-400, #9999A5);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: keep-all;
}
#register_form .r_agree { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
#register_form .r_agree > span { display: inline-flex; align-items: center; gap: 8px; }
#register_form .r_agree label { margin: 0; color: var(--white, #fff); font-size: 14.5px; cursor: pointer; }

/* 파일 첨부 안내 블록 */
#register_form .form_agree_q0 p { margin: 0 0 8px; padding-top: 13px; color: var(--gray-400, #9999A5); font-size: 13px; }
#register_form input[type="file"] { color: var(--gray-400, #9999A5); font-size: 13px; }

/* 자동등록방지 */
#register_form #captcha, #register_form .captcha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

/* 하단 버튼 */
#fregisterform .btn_confirm { margin-top: 34px; }

@media (max-width: 640px) {
  #fregisterform { padding: 100px 18px 80px; }
  #register_form .register_list > li { gap: 6px; }
  #register_form .form_name { flex: 1 1 100%; padding-top: 0; }
  #register_form .form_agree_q p, #register_form .form_agree_q0 p { padding-top: 0; }
  #register_form .r_gender { min-height: 0; }
  #register_form .btn_overlap, #register_form .btn_frmline { width: 100%; }
}

/* == 17. 소셜 회원가입 페이지 (/plugin/social/register_member.php) =====
   네이버·카카오 인증을 마치면 이 페이지로 넘어옵니다.
   여기서 약관에 동의하고 가입이 완료됩니다.
   (그누보드 본체의 register_form.php 를 거치지 않으므로
    "소셜 가입 시 별도 비밀번호 요구" 문제는 발생하지 않습니다)

   문제 : /skin/social/style.css 가 흰 배경을 깔고 있는데 글자색은
          테마의 흰색을 물려받아, 약관 본문이 흰 배경에 흰 글씨가 됩니다.
          드래그해야만 읽히는 상태였습니다.

   조치 : 그 CSS 가 칠하는 밝은 배경을 전부 다크로 바꿉니다.
          아래 선택자는 /skin/social/style.css 에 실제로 있는 것만
          1:1 로 대응시킨 것이며, 우리 CSS 가 나중에 로드돼 이깁니다. */

/* 동의 항목 카드 */
.mbskin .toggle {
  margin-top: -1px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.04);
}
.mbskin .toggle:first-of-type { border-radius: 2px 2px 0 0; }
.mbskin .toggle .toggle-title {
  padding: 15px 16px;
  color: var(--white, #fff);
  font-size: 15px;
  line-height: 22px;
}
.mbskin .toggle .title-name { color: var(--white, #fff); }
.mbskin .toggle .toggle-inner {
  padding: 16px;
  background: var(--black-light, #12121A);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.75;
  max-height: 320px;
  overflow-y: auto;
}
.mbskin .toggle .toggle-inner div { max-width: 100%; color: inherit; }

/* [+ 자세히보기] 버튼 — 원본은 파란 배경에 color:#f (잘못된 값)입니다 */
.mbskin .right_i {
  top: 12px; right: 12px;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--gray-400, #9999A5) !important;
  font-size: 12.5px;
}
.mbskin .toggle .toggle-title.active .right_i,
.mbskin .right_i:hover { border-color: var(--amber, #FFBF00); color: var(--amber, #FFBF00) !important; }

/* 전체 동의 줄 */
.mbskin .all_agree {
  margin-bottom: 6px;
  padding: 15px 16px;
  border: 1px solid rgba(255,191,0,.28);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  background: rgba(255,191,0,.06);
  color: var(--white, #fff);
  font-size: 15px;
  line-height: 22px;
}

/* 체크박스 */
.mbskin .toggle input[type="checkbox"],
.mbskin .all_agree input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0 10px 0 0;
  vertical-align: -4px;
  accent-color: var(--amber, #FFBF00);
  cursor: pointer;
}

/* 안내 박스 */
.social_info_guide {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  color: var(--gray-400, #9999A5);
  font-size: 13.5px;
  line-height: 1.7;
}
.bg-warning { margin: 0 0 12px; padding: 14px 16px; border-radius: 2px; }
.bg-warning1 { background: rgba(255,90,90,.10); border: 1px solid rgba(255,90,90,.30); color: #ffb3b3; }
.bg-warning2 { background: rgba(120,220,120,.10); border: 1px solid rgba(120,220,120,.30); color: #b7e8b7; }
.bg-warning3 { background: rgba(255,191,0,.08); border: 1px solid rgba(255,191,0,.28); color: var(--amber-light, #FFD54F); }

/* 하단 "혹시 기존 회원이신가요?" 바 */
.mbskin .member_connect {
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  color: var(--gray-400, #9999A5);
}
.mbskin .member_connect .strong { color: var(--white, #fff); font-size: 14.5px; font-weight: 600; margin: 0 0 10px; }
.mbskin .member_connect button {
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--white, #fff);
  font-family: var(--font-sans, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition, .2s ease);
}
.mbskin .member_connect button:hover { border-color: var(--amber, #FFBF00); background: transparent; color: var(--amber, #FFBF00); }

/* 로딩 화면 */
.social-login-loading { color: var(--gray-400, #9999A5); }

/* 가입/취소 버튼 줄 */
#fregisterform .btn_confirm { display: flex; gap: 10px; justify-content: center; margin: 26px 0 0; }
#fregisterform .btn_confirm .btn_submit { flex: 1 1 auto; height: 52px; padding: 0 30px; font-size: 15px; }
#fregisterform .btn_confirm .btn_cancel {
  flex: 0 0 auto;
  height: 52px; line-height: 50px; padding: 0 26px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--gray-400, #9999A5);
  font-size: 14px; font-weight: 500;
}
#fregisterform .btn_confirm .btn_cancel:hover { border-color: var(--amber, #FFBF00); color: var(--amber, #FFBF00); }

@media (max-width: 640px) {
  #fregisterform .btn_confirm { flex-direction: column; }
  .mbskin .right_i { position: static; display: inline-block; margin: 8px 0 0; }
}

/* ── 17-2. 소셜 가입 화면 하단 "개인정보 입력" 영역 ──────────────
   전체약관 동의 줄 아래에 붙는 블록입니다. (E-mail 값 등을 보여줌)
   이 블록의 흰 배경은 /skin/social/style.css 에 없습니다. 플러그인
   스킨 마크업이 직접 칠하는 것으로 보여, 마크업을 확인하기 전까지
   "전체동의 줄 뒤에 오는 컨테이너"를 기준으로 걷어냅니다.
   버튼(input·button·a)은 목록에서 제외해 노란 [회원가입] 버튼이
   투명해지지 않도록 했습니다.                                     */
.mbskin .all_agree ~ :is(div, section, table, fieldset, dl, ul),
.mbskin .all_agree ~ * :is(div, section, table, thead, tbody, tr, th, td,
                           dl, dt, dd, p, h2, h3, h4, span, label, li, caption, legend) {
  background: transparent !important;
  border-color: rgba(255,255,255,.12) !important;
}
.mbskin .all_agree ~ :is(div, section, table, fieldset, dl, ul) {
  margin-top: 14px;
}
.mbskin .all_agree ~ * :is(h2, h3, h4, caption, legend, th, dt) {
  color: var(--amber-light, #FFD54F) !important;
  font-size: 14px;
  font-weight: 600;
}
.mbskin .all_agree ~ * :is(td, dd, p, span, li) {
  color: var(--white, #fff) !important;
  font-size: 14.5px;
}
.mbskin .all_agree ~ * :is(table) { width: 100%; border-collapse: collapse; }
.mbskin .all_agree ~ * :is(th, td) {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  text-align: left;
}
.mbskin .all_agree ~ * :is(caption, h2, h3) {
  padding: 14px 16px 0;
  text-align: left;
}
/* 인라인 style="background:#fff" 대비 */
.social_info_guide { background: rgba(255,255,255,.04) !important; }

/* ── 17-3. 회원가입 완료 화면 (register_result.php) ─────────────── */
#reg_result .reg_grade { color: var(--amber, #FFBF00); font-weight: 700; }
#reg_result p a { color: var(--amber-light, #FFD54F); text-decoration: underline; }
#reg_result p a:hover { color: var(--amber, #FFBF00); }
#reg_result img[src$="join_com.png"] { display: none; }

#reg_result #result_email {
  max-width: 420px;
  margin: 26px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  text-align: left;
  line-height: 2;
}
#reg_result #result_email span {
  display: inline-block;
  min-width: 96px;
  color: var(--gray-400, #9999A5);
  font-size: 13px;
}
#reg_result #result_email strong { color: var(--white, #fff); font-size: 15px; font-weight: 600; }

/* ── 18. select 드롭다운 목록 색상 (윈도우 크롬 흰 배경 대응) ── */
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) select option { background-color: var(--black-card, #1A1A24); color: var(--white, #fff); }
:is(#login_wrap,#register_wrap,#register_form,#fregisterform,#reg_result,#find_info,#mb_confirm,#pw_confirm) select option:disabled { color: var(--gray-600, #666674); }
.mbskin select option { background-color: var(--black-card, #1A1A24); color: var(--white, #fff); }

/* ── 19. 가입 폼 필수/선택 표시 · 안내문 (2026-09-02) ─────────
   종전에는 상단에 "* 필수 입력 항목입니다" 안내만 있고 정작
   각 항목에는 표시가 없었습니다. 어느 칸이 필수인지 알 수 없어
   비워두고 제출했다가 되돌아오는 일이 생깁니다. */
#register_form .form_name .req,
#fregisterform .form_name .req {
  display: inline-block; margin-left: 4px; vertical-align: 2px;
  color: var(--amber, #FFBF00); font-weight: 700; font-size: 15px; line-height: 1;
}
#register_form .form_name .opt,
#fregisterform .form_name .opt {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 9px;
  background: rgba(255,255,255,.08); color: var(--gray-400, #9999A5);
  font-size: 11px; font-weight: 400; letter-spacing: .02em; vertical-align: 1px;
}

/* 입력칸 아래 규칙 안내 (비밀번호 등) */
#register_form .frm_info,
#fregisterform .frm_info {
  display: block; margin-top: 8px;
  color: var(--gray-400, #9999A5); font-size: 12.5px; line-height: 1.75;
}
#register_form .frm_info b,
#fregisterform .frm_info b { color: var(--amber-light, #FFD54F); font-weight: 500; }

/* 상단 안내문의 * 아이콘도 앰버로 맞춥니다 */
#register_form .text_required,
#fregisterform .text_required { color: var(--gray-400, #9999A5); }
#register_form .icon_required,
#fregisterform .icon_required { color: var(--amber, #FFBF00); font-style: normal; }

/* ── 20. 약관 동의 화면 정렬 통일 (2026-09-02) ────────────────
   · 이용약관 / 개인정보 동의 체크박스를 모두 "본문 아래 · 왼쪽"으로 통일
   · (필수) 표시를 두 항목에 동일한 스타일로
   · 전체 동의는 두 섹션 밖 독립 행
   ──────────────────────────────────────────────────────────── */
#register_wrap #fregister_term h2,
#register_wrap #fregister_private h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
#register_wrap .req_mark {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--amber, #FFBF00);
}

/* 동의 체크박스 : 본문(textarea) 바로 아래, 왼쪽 정렬 */
#register_wrap .fregister_agree {
  display: flex; align-items: center; justify-content: flex-start;
  border: 0; padding: 0; margin: 14px 0 0;
}
#register_wrap .fregister_agree input[type=checkbox] { flex: 0 0 auto; }
#register_wrap .fregister_agree label { line-height: 1.5; }

/* 전체 동의 : 약관 / 개인정보 두 섹션 밖 독립 행 */
#register_wrap #fregister_chkall {
  display: flex; align-items: center;
  margin: 0 0 26px; padding: 15px 18px;
}
#register_wrap #fregister_chkall input[type=checkbox] { flex: 0 0 auto; }