@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   보이스밸런스 — 회원 화면 (로그인 · 회원가입 · 비밀번호 찾기)
   ───────────────────────────────────────────────────────────
   올릴 곳 · /www/skin/member/basic/vb_member.css
   쓰는 곳 · login.skin.php · register.skin.php ·
             register_form.skin.php · password_lost.skin.php

   ★ 이 파일은 회원 화면에서만 불립니다. 게시판·홈페이지는 건드리지 않습니다.
   ★ 그누보드 기본 머리말(로고·메뉴)과 꼬리말을 감추고,
     홈페이지와 같은 색·글꼴로 다시 그립니다.
   ═══════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  --vb-bg:#fdfbf9;      --vb-paper:#ffffff;
  --vb-deep:#14352f;    --vb-ink:#1f3833;    --vb-dim:#536b66;
  --vb-mint:#12a693;    --vb-mint-dark:#0b8375;  --vb-mint-soft:#e9f6f2;
  --vb-pink:#e2688c;    --vb-pink-soft:#fdf0f3;
  --vb-gold:#b98f3e;    --vb-gold-soft:#faf4e8;
  --vb-line:rgba(31,56,51,.14);
  --vb-kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;
  --vb-en:'Montserrat',sans-serif;
  --vb-shadow:0 16px 42px rgba(20,53,47,.10);
}

/* ── 그누보드 기본 머리말·꼬리말 감추기 ───────────────── */
body.vb-member #hd,
body.vb-member #gnb,
body.vb-member #tnb,
body.vb-member #logo,
body.vb-member #ft,
body.vb-member #aside,
body.vb-member #container_title,
body.vb-member #hd_pop,
body.vb-member #skip_to_container,
body.vb-member .lt,
body.vb-member #hd_wrapper{ display:none !important; }

body.vb-member{
  background:var(--vb-bg) !important;
  font-family:var(--vb-kr) !important;
  color:var(--vb-ink);
  font-weight:450;
  margin:0; padding:0;
  -webkit-text-size-adjust:100%;
}
body.vb-member #wrapper,
body.vb-member #container{
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  min-height:0 !important;
}

/* ── 우리 머리말 ───────────────────────────────────── */
.vb-mb-top{
  padding:34px 20px 0; text-align:center;
}
.vb-mb-top a{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.vb-mb-top img{ width:38px; height:auto; display:block; }
.vb-mb-top b{
  font-family:var(--vb-en); font-weight:800; font-size:17px;
  letter-spacing:.14em; color:var(--vb-deep);
}
.vb-mb-top small{
  display:block; font-size:11px; color:var(--vb-dim);
  letter-spacing:.02em; margin-top:2px; font-weight:600;
}

/* ── 가운데 카드 ───────────────────────────────────── */
.vb-mb-wrap{
  max-width:460px; margin:0 auto; padding:26px 20px 60px;
}
.vb-mb-wrap.wide{ max-width:720px; }

.mbskin, .register, #mb_login{
  max-width:none !important; width:auto !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
.mbskin_box,
.vb-mb-card{
  background:var(--vb-paper); border-radius:22px;
  padding:38px 34px 34px; box-shadow:var(--vb-shadow);
  border:1px solid rgba(31,56,51,.06);
}

/* 제목 */
.vb-mb-wrap h1{
  font-size:22px; font-weight:800; color:var(--vb-ink);
  margin:0 0 6px; letter-spacing:-.02em; text-align:center;
}
.vb-mb-wrap .vb-mb-sub{
  font-size:14px; color:var(--vb-dim); text-align:center;
  margin:0 0 28px; line-height:1.7;
}
.mb_log_cate{ display:none; }        /* 「로그인 / 회원가입」 탭 — 아래에서 다시 그림 */

/* 카드 안 첫 제목은 위 여백을 없앤다 */
.mbskin_box > h1:first-child,
.vb-mb-card > h1:first-child{ margin-top:0; }

/* ── 입력칸 ────────────────────────────────────────── */
.vb-mb-wrap fieldset{ border:0; margin:0; padding:0; }
.vb-mb-wrap legend{ position:absolute; left:-9999px; }

.vb-mb-wrap .frm_input,
.vb-mb-wrap input[type=text],
.vb-mb-wrap input[type=password],
.vb-mb-wrap input[type=email],
.vb-mb-wrap input[type=tel],
.vb-mb-wrap input[type=date],
.vb-mb-wrap select,
.vb-mb-wrap textarea{
  width:100%; box-sizing:border-box;
  height:52px; padding:0 16px; margin:0 0 11px;
  border:1.5px solid var(--vb-line); border-radius:13px;
  background:#fff; font-family:var(--vb-kr); font-size:15px;
  color:var(--vb-ink); font-weight:500;
  transition:border-color .15s, box-shadow .15s;
}
.vb-mb-wrap textarea{ height:auto; padding:14px 16px; line-height:1.7; }
.vb-mb-wrap .frm_input:focus,
.vb-mb-wrap input:focus, .vb-mb-wrap select:focus, .vb-mb-wrap textarea:focus{
  outline:0; border-color:var(--vb-mint);
  box-shadow:0 0 0 4px rgba(18,166,147,.12);
}
.vb-mb-wrap ::placeholder{ color:#a8b5b2; font-weight:450; }
.vb-mb-wrap input[readonly]{ background:#f4f6f6; color:var(--vb-dim); }

/* 라벨 */
.vb-fld{ margin-bottom:16px; }
.vb-fld > label,
.vb-fld > .lab{
  display:block; font-size:13.5px; font-weight:700;
  color:var(--vb-ink); margin:0 0 7px; letter-spacing:-.01em;
}
.vb-fld .req{ color:var(--vb-pink); margin-left:3px; }
.vb-fld .hint{
  display:block; font-size:12.5px; color:var(--vb-dim);
  margin:-4px 0 0; line-height:1.6;
}

/* ── 버튼 ──────────────────────────────────────────── */
.vb-mb-wrap .btn_submit,
.vb-mb-wrap button[type=submit]{
  width:100%; height:54px; border:0; border-radius:999px;
  background:var(--vb-mint); color:#fff;
  font-family:var(--vb-kr); font-size:16px; font-weight:800;
  letter-spacing:-.01em; cursor:pointer; margin-top:6px;
  box-shadow:0 12px 26px rgba(18,166,147,.28);
  transition:background .15s, transform .1s;
}
.vb-mb-wrap .btn_submit:hover{ background:var(--vb-mint-dark); }
.vb-mb-wrap .btn_submit:active{ transform:translateY(1px); }

.vb-mb-wrap .btn_close,
.vb-mb-wrap .btn_cancel{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:0 26px; border-radius:999px;
  background:#eef2f2; color:var(--vb-dim);
  font-size:15px; font-weight:700; text-decoration:none;
}
.vb-mb-wrap .btn_confirm{
  display:flex; gap:10px; margin-top:22px;
}
.vb-mb-wrap .btn_confirm .btn_submit{ margin-top:0; }
.vb-mb-wrap .btn_confirm .btn_close{ flex:0 0 auto; }

/* 작은 버튼 (중복확인 등) */
.vb-mb-wrap .btn_frmline{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 18px; border-radius:13px; border:0;
  background:var(--vb-deep); color:#fff;
  font-family:var(--vb-kr); font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
.vb-inline{ display:flex; gap:8px; align-items:flex-start; }
.vb-inline .frm_input{ flex:1 1 auto; }

/* ── 체크박스 ──────────────────────────────────────── */
.vb-mb-wrap .chk_box,
.vb-mb-wrap .fregister_agree{ margin:0; }
.vb-mb-wrap .selec_chk{ position:absolute; opacity:0; width:0; height:0; }
.vb-mb-wrap .selec_chk + label{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:var(--vb-ink); cursor:pointer;
  line-height:1.65; font-weight:500;
}
.vb-mb-wrap .selec_chk + label span{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  border:1.5px solid var(--vb-line); border-radius:7px;
  background:#fff; position:relative; transition:.15s;
}
.vb-mb-wrap .selec_chk:checked + label span{
  background:var(--vb-mint); border-color:var(--vb-mint);
}
.vb-mb-wrap .selec_chk:checked + label span::after{
  content:''; position:absolute; left:7px; top:3px;
  width:5px; height:10px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.vb-mb-wrap .selec_chk:focus + label span{ box-shadow:0 0 0 4px rgba(18,166,147,.15); }

/* ── 로그인 화면 ───────────────────────────────────── */
#login_info{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:18px; font-size:13.5px;
}
#login_info a{ color:var(--vb-dim); text-decoration:none; border-bottom:1px solid var(--vb-line); }
#login_info a:hover{ color:var(--vb-mint); border-color:var(--vb-mint); }

.vb-mb-foot{
  text-align:center; margin-top:24px;
  font-size:14px; color:var(--vb-dim);
}
.vb-mb-foot a{
  color:var(--vb-mint); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid rgba(18,166,147,.35); padding-bottom:1px;
}
.vb-mb-foot a:hover{ border-color:var(--vb-mint); }

.vb-mb-links{
  text-align:center; margin-top:30px; font-size:12.5px; color:#8a938f;
}
.vb-mb-links a{ color:#8a938f; text-decoration:none; margin:0 7px; }
.vb-mb-links a:hover{ color:var(--vb-mint); }

/* ── 회원가입 약관 화면 ────────────────────────────── */
/* 🔴 그누보드 기본 style.css 가 ID 선택자로 세게 잡고 있어
      여기서도 같은 세기로 다시 잡아야 합니다. */

#fregister p{                       /* 분홍 띠를 없앱니다 */
  position:static; text-align:left; color:var(--vb-dim);
  height:auto; line-height:1.7; font-size:14px;
  background:none; margin:0 0 14px; border-radius:0; font-weight:450;
}
#fregister p:before{ display:none; }
#fregister p.vb-mb-sub{               /* 맨 위 안내만 가운데 */
  color:var(--vb-dim); text-align:center; margin:0 0 28px;
}

#fregister section{
  margin:0 0 22px; border:0; position:static; border-radius:0;
}
#fregister h2{
  text-align:left; padding:0; border-bottom:0;
  font-size:15.5px; font-weight:800; color:var(--vb-ink); margin:0 0 10px;
}
#fregister textarea{
  display:block; padding:16px; width:100%; height:170px;
  background:#fcfdfd; border:1.5px solid var(--vb-line);
  border-radius:13px; line-height:1.8; box-sizing:border-box;
  font-size:13.5px; color:var(--vb-dim); font-family:var(--vb-kr);
  margin:0 0 12px; resize:vertical;
}
#fregister_private div{ padding:0; background:none; }
#fregister_private table th{ width:auto; background:var(--vb-mint-soft); color:var(--vb-ink); }

/* 안내 상자는 위 규칙에서 빼야 합니다 (배경이 지워집니다) */
#fregister_private div.vb-note,
#fregister div.vb-note{
  background:var(--vb-mint-soft) !important;
  padding:15px 18px !important; border-radius:14px;
  font-size:13.5px; line-height:1.75; color:#1c4a44;
}
#fregister_private div.vb-warn,
#fregister div.vb-warn{
  background:var(--vb-pink-soft) !important; padding:15px 18px !important;
}

/* 체크박스를 글자 옆으로 되돌립니다 */
#fregister .fregister_agree,
.fregister_agree{ position:static !important; top:auto; right:auto; }
#fregister .fregister_agree input[type="checkbox"] + label,
.fregister_agree input[type="checkbox"] + label{
  color:var(--vb-ink) !important;
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; font-weight:600; cursor:pointer; line-height:1.65;
}
#fregister .fregister_agree input[type="checkbox"] + label span,
.fregister_agree input[type="checkbox"] + label span,
.fregister_agree.chk_all input[type="checkbox"] + label span{
  position:static !important; top:auto !important; right:auto !important;
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  display:block; background:#fff; border:1.5px solid var(--vb-line);
  border-radius:7px; transition:.15s;
}
#fregister .fregister_agree input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span{
  background:var(--vb-mint) !important; border-color:var(--vb-mint) !important;
  background-image:none !important; position:relative !important;
}
#fregister .fregister_agree input[type="checkbox"]:checked + label span::after,
.fregister_agree input[type="checkbox"]:checked + label span::after{
  content:''; position:absolute; left:7px; top:3px;
  width:5px; height:10px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}

#fregister_chkall{
  position:static; text-align:left; background:var(--vb-mint-soft);
  line-height:1.65; border:0; border-radius:14px;
  padding:16px 18px; margin:22px 0 0;
}
#fregister .btn_confirm{ text-align:left; }

#fregister_term, #fregister_private{ margin-bottom:20px; }
.vb-mb-wrap h2{
  font-size:15.5px; font-weight:800; color:var(--vb-ink);
  margin:0 0 10px; letter-spacing:-.01em;
}
#fregister_term textarea{
  width:100%; box-sizing:border-box; height:170px;
  border:1.5px solid var(--vb-line); border-radius:13px;
  padding:16px; font-size:13.5px; line-height:1.8; color:var(--vb-dim);
  background:#fcfdfd; resize:vertical; margin-bottom:12px;
}
#fregister_private table{
  width:100%; border-collapse:collapse; font-size:13px;
  border-radius:13px; overflow:hidden; margin-bottom:12px;
}
#fregister_private caption{ position:absolute; left:-9999px; }
#fregister_private th, #fregister_private td{
  border:1px solid #e6eeef; padding:10px 12px; text-align:left;
  vertical-align:top; line-height:1.65; color:var(--vb-ink);
}
#fregister_private th{ background:var(--vb-mint-soft); font-weight:700; font-size:12.5px; white-space:nowrap; }

.chk_all{
  background:var(--vb-mint-soft); border-radius:14px;
  padding:16px 18px; margin:22px 0 0;
}
.chk_all label{ font-weight:800 !important; font-size:15px !important; }

/* ── 회원가입 정보 입력 화면 ───────────────────────── */
#register_form{ background:none; margin-bottom:0; }
#fregisterform .form_01 div{ margin:0; }

#register_form .register_form_inner{
  background:var(--vb-paper); border-radius:22px;
  padding:30px 30px 24px; margin:0 0 20px;
  box-shadow:var(--vb-shadow); border:1px solid rgba(31,56,51,.06);
}
#register_form .register_form_inner > h2{
  font-size:16px; font-weight:800; color:var(--vb-ink);
  margin:0 0 20px; padding:0 0 14px; text-align:left;
  border-bottom:1px solid #eef4f5; letter-spacing:-.01em;
}
#register_form ul{ list-style:none; margin:0; padding:0; }
#register_form li{ margin:0 0 16px; list-style:none; }
#register_form li:last-child{ margin-bottom:0; }

#register_form label,
#fregisterform label{
  display:block; font-size:13.5px; font-weight:700;
  color:var(--vb-ink); margin:0 0 7px; letter-spacing:-.01em;
}
#register_form .vb-sex label,
#register_form label.inline,
#register_form label.frm_label{ display:inline-flex; margin:0; }

#fregisterform .frm_input,
#fregisterform input[type=text],
#fregisterform input[type=password],
#fregisterform input[type=email],
#fregisterform input[type=tel],
#fregisterform input[type=date],
#fregisterform select{
  width:100%; box-sizing:border-box; height:52px; padding:0 16px; margin:0;
  border:1.5px solid var(--vb-line); border-radius:13px; background:#fff;
  font-family:var(--vb-kr); font-size:15px; color:var(--vb-ink); font-weight:500;
}
#fregisterform textarea{
  width:100%; box-sizing:border-box; padding:14px 16px;
  border:1.5px solid var(--vb-line); border-radius:13px;
  font-family:var(--vb-kr); font-size:14.5px; line-height:1.7;
}
#fregisterform input:focus,
#fregisterform select:focus,
#fregisterform textarea:focus{
  outline:0; border-color:var(--vb-mint);
  box-shadow:0 0 0 4px rgba(18,166,147,.12);
}
#fregisterform .twopart_input{ width:auto; display:inline-block; margin-right:8px; }
#fregisterform .frm_address{ margin-top:8px; }
#fregisterform #reg_mb_addr3{ margin-top:8px; }

/* 도움말 방울 */
#register_form .tooltip_icon{
  border:0; background:none; color:#a8b5b2; cursor:pointer; padding:0 2px;
}
#register_form .tooltip{
  font-size:12.5px; color:var(--vb-dim); font-weight:450;
}
#register_form .hint{
  display:block; font-size:12.5px; color:var(--vb-dim);
  margin:7px 0 0; line-height:1.65; font-weight:450;
}
#register_form span[id^="msg_"]{
  display:block; font-size:12.5px; margin-top:6px; font-weight:600;
}

/* 기타 개인설정의 체크박스들 — 「☑ 정보 메일을 받겠습니다」 꼴 */
#register_form .selec_chk{ position:absolute; opacity:0; width:0; height:0; }
#register_form li:has(> .selec_chk){
  display:flex; align-items:flex-start; gap:0;
}
#register_form .selec_chk + label{
  display:inline-flex; align-items:flex-start; margin:0; cursor:pointer;
}
#register_form .selec_chk + label span{
  flex:0 0 auto; width:22px; height:22px; margin-top:0;
  border:1.5px solid var(--vb-line); border-radius:7px;
  background:#fff; position:relative; display:block; transition:.15s;
}
#register_form .selec_chk:checked + label span{
  background:var(--vb-mint); border-color:var(--vb-mint);
}
#register_form .selec_chk:checked + label span::after{
  content:''; position:absolute; left:7px; top:3px;
  width:5px; height:10px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
#register_form .chk_li{
  padding-left:10px; font-size:14px; font-weight:500;
  color:var(--vb-ink); line-height:1.55; display:inline-block;
}
#register_form .is_captcha_use{
  font-size:13.5px; font-weight:700; color:var(--vb-ink); display:block;
}
#register_form .captcha{ margin-top:8px; }
#register_form .captcha img{ max-width:100%; height:auto; vertical-align:middle; }
#register_form #captcha_key{
  height:44px; width:auto; max-width:140px; display:inline-block;
  margin-left:8px; vertical-align:middle;
}

#fregisterform .btn_confirm{
  display:flex; gap:10px; margin:0 0 10px;
}
#fregisterform .btn_confirm .btn_submit{ margin-top:0; flex:1; }
#fregisterform .btn_confirm .btn_close{ flex:0 0 auto; }

/* ── 안내 상자 ─────────────────────────────────────── */
.vb-note{
  background:var(--vb-mint-soft); border-radius:14px;
  padding:15px 18px; font-size:13.5px; line-height:1.75;
  color:#1c4a44; margin:0 0 20px;
}
.vb-note b{ font-weight:800; }
.vb-warn{
  background:var(--vb-pink-soft); border:1px solid #f3d4dc;
  border-radius:14px; padding:15px 18px;
  font-size:13.5px; line-height:1.75; color:#9b3b57; margin:0 0 20px;
}

/* ── 성별 고르기 ───────────────────────────────────── */
.vb-sex{ display:flex; gap:10px; }
.vb-sex input{ position:absolute; opacity:0; width:0; height:0; }
.vb-sex label{
  flex:1; display:flex; align-items:center; justify-content:center;
  height:52px; border:1.5px solid var(--vb-line); border-radius:13px;
  font-size:15px; font-weight:600; color:var(--vb-dim);
  cursor:pointer; background:#fff; transition:.15s;
}
.vb-sex input:checked + label{
  border-color:var(--vb-mint); background:var(--vb-mint-soft);
  color:var(--vb-mint-dark); font-weight:800;
}

/* ── 그누보드가 기본으로 넣는 것들 정리 ───────────── */
.vb-mb-wrap .sound_only{ position:absolute; left:-9999px; }
.vb-mb-wrap .required{ background-image:none !important; }
.vb-mb-wrap #register_form td,
.vb-mb-wrap #register_form th{ border:0; padding:0; }
.vb-mb-wrap table.tbl_frm01{ width:100%; }
.vb-mb-wrap p{ font-size:14px; color:var(--vb-dim); line-height:1.75; }

/* ── 가입 완료 · 아이디비번 찾기 · 비밀번호 확인 ───── */
#reg_result{
  padding:0 !important; text-align:left !important;
  background:none !important; border:0 !important; border-radius:0 !important;
}
#reg_result h2{ font-size:2em; margin:0 0 20px; }
.btn_confirm_reg{ margin-top:20px; }
.btn_confirm_reg .reg_btn_submit{
  display:block; height:54px; line-height:54px; text-align:center;
  border-radius:999px; background:var(--vb-mint); color:#fff;
  font-size:16px; font-weight:800; text-decoration:none;
}

/* 아이디·비밀번호 찾기 (새 창으로 뜨는 화면) */
#find_info{
  max-width:460px; margin:0 auto; padding:26px 20px 60px;
  background:none; border:0;
}
#find_info .new_win_con{
  background:var(--vb-paper); border-radius:22px; padding:34px 30px 30px;
  box-shadow:var(--vb-shadow); border:1px solid rgba(31,56,51,.06);
  margin:0 0 16px;
}
#find_info h3{
  display:block !important;              /* 그누보드가 감춰둔 것을 되살립니다 */
  font-size:19px; font-weight:800; color:var(--vb-ink);
  margin:0 0 8px; text-align:center; letter-spacing:-.02em;
  position:static !important; width:auto !important; height:auto !important;
  overflow:visible !important; font-size:19px !important;
}
#find_info .g-recaptcha{ margin:4px 0 14px; display:flex; justify-content:center; }
#find_info .captcha{ margin:4px 0 14px; }
#find_info p{
  font-size:14px; color:var(--vb-dim); line-height:1.75;
  margin:0 0 20px; text-align:center;
}
#find_info fieldset{ border:0; margin:0; padding:0; }
#find_info .frm_input{
  width:100%; box-sizing:border-box; height:52px; padding:0 16px; margin:0 0 12px;
  border:1.5px solid var(--vb-line); border-radius:13px;
  font-family:var(--vb-kr); font-size:15px; color:var(--vb-ink);
}
#find_info .frm_input:focus{
  outline:0; border-color:var(--vb-mint); box-shadow:0 0 0 4px rgba(18,166,147,.12);
}
#find_info .win_btn{ margin-top:8px; }
#find_info .btn_submit{
  width:100%; height:54px; border:0; border-radius:999px;
  background:var(--vb-mint); color:#fff; font-family:var(--vb-kr);
  font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 12px 26px rgba(18,166,147,.28);
}
#find_info .cert_btn .btn_submit{ margin-bottom:8px; }

/* 정보수정 전 비밀번호 확인 */
#mb_confirm{
  max-width:460px; margin:0 auto; padding:26px 20px 60px;
  background:none; border:0;
}
#mb_confirm .mbskin_box,
#mb_confirm > div{ background:var(--vb-paper); }

/* ═══════════════════════════════════════════════════════════
   ★★ 2026-09-14 · 카카오 단추를 우리 단추 크기로
   ───────────────────────────────────────────────────────────
   【무엇이 문제였나】
   그누보드 기본 소셜 스킨이 카카오를 40×40 작은 정사각형으로 그립니다.
   우리 로그인 단추는 높이 54 의 둥근 알약이라 나란히 두면 초라해 보이고,
   글자가 칸 밖으로 삐져나와 세로로 흩어져 있었습니다.

   【어떻게 했나】
   소셜 스킨 파일(/skin/social/...)은 건드리지 않고
   여기서 모양만 덮어씁니다. 그누보드가 새 판으로 바뀌어도 그대로 삽니다.

   ⚠️ 노란색은 카카오가 정한 색(#FEE500)입니다. 바꾸지 마십시오.
      카카오는 자기 색·말풍선 모양을 함부로 바꾸는 것을 허락하지 않습니다.
   ═══════════════════════════════════════════════════════════ */
/* ⚠️ 폭을 !important 로 못박습니다.
      기본 소셜 스킨이 sns-wrap-32 같은 클래스로 폭을 좁게 잡아,
      그냥 width:100% 만 주면 절반만 차고 왼쪽으로 쏠립니다. */
#sns_login, #sns_register{
  display:block !important; width:100% !important; max-width:none !important;
  margin:20px 0 0 !important; padding:0 !important;
  border:0 !important; background:none !important; float:none !important;
  text-align:left !important;
}

/* 「소셜계정으로 로그인」 글씨 — 가운데 줄 하나 그은 모양 */
#sns_login h3, #sns_register h2{
  position:relative; display:flex; align-items:center; gap:12px;
  margin:0 0 12px; padding:0; border:0; background:none;
  font-size:12.5px; font-weight:600; color:var(--vb-dim,#536b66); letter-spacing:.01em;
  text-align:center; white-space:nowrap;
}
#sns_login h3:before, #sns_login h3:after,
#sns_register h2:before, #sns_register h2:after{
  content:""; flex:1; height:1px; background:rgba(31,56,51,.13);
}

#sns_login .sns-wrap, #sns_register .sns-wrap{
  display:block !important; width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  float:none !important; overflow:visible !important; text-align:left !important;
}
/* 카카오 <a> 를 감싼 것이 또 있을 때를 대비 — 그 안의 것도 폭을 풉니다 */
#sns_login .sns-wrap > *, #sns_register .sns-wrap > *{
  max-width:none !important; float:none !important;
}
#sns_login .sns-wrap:after, #sns_register .sns-wrap:after{ content:""; display:block; clear:both; }

/* 카카오 단추 — 로그인 단추와 같은 높이(54) · 같은 둥글기 */
#sns_login .sns-kakao, #sns_register .sns-kakao{
  display:flex !important; align-items:center; justify-content:center; gap:9px;
  box-sizing:border-box;
  width:100% !important; height:54px !important; min-height:54px !important;
  margin:0 !important; padding:0 18px !important;
  border:0 !important; border-radius:999px !important;
  background:#FEE500 !important; color:#191600 !important;
  font-size:16px !important; font-weight:700 !important; line-height:1 !important;
  text-indent:0 !important; text-decoration:none !important;
  box-shadow:none !important; overflow:visible !important; float:none !important;
  transition:background .15s;
}
#sns_login .sns-kakao:hover, #sns_register .sns-kakao:hover{ background:#F5DC00 !important; }

/* 말풍선 그림 — 글자가 아니라 그림이라 화면 크기와 상관없이 또렷합니다 */
#sns_login .sns-kakao .ico, #sns_register .sns-kakao .ico{
  display:block !important; flex:none;
  width:20px !important; height:20px !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  font-size:0 !important; text-indent:0 !important; overflow:hidden !important;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191600' d='M12 3C6.48 3 2 6.48 2 10.78c0 2.79 1.86 5.24 4.66 6.62-.15.54-.97 3.35-1 3.57 0 0-.02.17.09.23.11.07.24.02.24.02.3-.04 3.5-2.29 4.05-2.68.63.09 1.28.14 1.96.14 5.52 0 10-3.48 10-7.78S17.52 3 12 3z'/%3E%3C/svg%3E") center/20px 20px no-repeat !important;
}

/* 글자 — 기본 스킨이 칸 밖으로 흘려놓은 것을 제자리에 앉힙니다 */
#sns_login .sns-kakao .txt, #sns_register .sns-kakao .txt{
  display:inline-block !important; position:static !important;
  width:auto !important; height:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  clip:auto !important; clip-path:none !important; overflow:visible !important;
  font-size:16px !important; font-weight:700 !important; line-height:1 !important;
  color:inherit !important; text-indent:0 !important; white-space:nowrap;
}
#sns_login .sns-kakao .txt i{ font-style:normal; }

/* 가입 화면 — 카카오 위 한 줄 안내와 아래 구분선 */
.vb-sns-lead{
  margin:4px 0 14px; padding:14px 16px;
  border:1px solid rgba(31,56,51,.10); border-radius:14px;
  background:var(--vb-mint-soft,#e9f6f2);
  font-size:14px; line-height:1.7; color:var(--vb-ink,#1f3833); text-align:center;
  word-break:keep-all;
}
.vb-sns-lead b{ color:var(--vb-mint-dark,#0b8375); font-weight:800; }

.vb-sns-or{
  display:flex; align-items:center; gap:12px;
  margin:22px 0 18px; color:var(--vb-dim,#536b66); font-size:12.5px; font-weight:600;
}
.vb-sns-or:before, .vb-sns-or:after{
  content:""; flex:1; height:1px; background:rgba(31,56,51,.13);
}
.vb-sns-or span{ white-space:nowrap; }

/* 가입 화면에서는 「SNS 계정으로 가입」 제목 줄을 감춥니다.
   바로 위 안내가 같은 말을 이미 하고 있어 두 번 됩니다. */
#sns_register h2{ display:none !important; }
#sns_register{ margin-top:0 !important; }

#sns_login a.sns-icon, #sns_register a.sns-icon,
#sns_login .sns-wrap a, #sns_register .sns-wrap a{
  width:100% !important; max-width:none !important; min-width:0 !important;
  float:none !important; box-sizing:border-box !important;
}

/* 🔴🔴 로그인 화면만 폭이 절반이던 진짜 이유 (2026-09-14)
   ───────────────────────────────────────────────────────────
   소셜 스킨 style.css 에 이 규칙이 있습니다.

       #mb_login #sns_login .sns-icon{ width:49% !important; float:left !important }

   카카오·네이버 두 개를 나란히 놓으려고 만든 것입니다.
   우리는 카카오 하나뿐이라 절반만 차지했습니다. (350px × 49% = 171.5px)

   ⚠️ 이 규칙은 앞에 #mb_login 이 하나 더 붙어 있습니다.
      CSS 는 !important 끼리 부딪히면 「ID 가 많은 쪽」이 이깁니다.
      그래서 아무리 !important 를 붙여도 우리가 졌습니다.
      우리도 #mb_login 을 붙여 힘을 맞춥니다.

   ⚠️ 아래에서 #mb_login 을 빼지 마십시오. 다시 절반이 됩니다.
   ─────────────────────────────────────────────────────────── */
#mb_login #sns_login a.sns-icon,
#mb_login #sns_login .sns-icon,
#mb_login #sns_login .sns-kakao{
  width:100% !important; max-width:none !important; min-width:0 !important;
  float:none !important; clear:both !important;
  margin:0 !important; box-sizing:border-box !important;
}

/* ★ 2026-09-14 · 네 줄의 왼쪽 끝을 맞춥니다
   ───────────────────────────────────────────────────────────
   로그인 폼을 감싼 틀(#login_fs · #login_frm)에 좌우 여백이 있어
   아이디 칸 · 비밀번호 칸 · 로그인 단추만 안쪽으로 35px 들어와 있었습니다.
   카카오는 그 틀 밖에 있어 카드 끝까지 나가 어긋나 보였습니다.

   틀의 여백을 없애고 모두 카드 안쪽 폭에 맞춥니다.
   카드 안쪽 여백은 .mbskin_box 가 이미 맡고 있으므로 좁아 보이지 않습니다.

   ⚠️ #mb_login 을 앞에 붙인 이유는 위 카카오 항목과 같습니다. 빼지 마십시오. */
#mb_login #login_fs,
#mb_login #login_frm{
  width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  box-sizing:border-box !important;
}
#mb_login #login_fs > input,
#mb_login #login_fs > button,
#mb_login #login_frm > input,
#mb_login #login_frm > button,
#mb_login #login_fs .frm_input,
#mb_login #login_frm .frm_input{
  width:100% !important; box-sizing:border-box !important;
}
#mb_login #login_info{ width:100% !important; margin-left:0 !important; margin-right:0 !important; }

/* ═══════════════════════════════════════════════════════════
   ★ 2026-09-14 · 카카오 가입 화면 (/skin/social/)
   ───────────────────────────────────────────────────────────
   이 화면만 그누보드 기본 껍데기가 나왔습니다.
   vb_head.php 를 부르게 했고, 여기서 모양을 맞춥니다.
   ═══════════════════════════════════════════════════════════ */
/* ⚠️ 소셜 스킨 style.css 가 이 화면에 좁은 폭을 박아 두었습니다.
      화면이 가느다란 띠처럼 보이던 원인입니다. 전부 풀어 줍니다. */
.vb-mb-wrap .social_register,
.vb-mb-wrap .social_register form,
.vb-mb-wrap .social_register section,
.vb-mb-wrap .social_register > div,
.vb-mb-wrap .social_register #register_form,
.vb-mb-wrap .social_register .tbl_frm01,
.vb-mb-wrap .social_register .tbl_wrap,
.vb-mb-wrap .social_register table{
  width:100% !important; max-width:none !important; min-width:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  float:none !important; box-sizing:border-box !important;
}
.vb-mb-wrap .social_register ul,
.vb-mb-wrap .social_register li{
  width:100% !important; max-width:none !important; list-style:none;
  margin-left:0 !important; padding-left:0 !important; float:none !important;
}
/* 카드 안에 또 카드가 겹쳐 보이지 않게 */
.vb-mb-wrap .social_register section,
.vb-mb-wrap .social_register #register_form,
.vb-mb-wrap .social_register .tbl_frm01{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding-left:0 !important; padding-right:0 !important;
}

/* 맨 위 분홍 띠 — 기본 스킨의 빨간 경고를 부드럽게 */
.social_register form > p:first-child{
  margin:0 0 20px; padding:13px 16px; border-radius:12px;
  background:var(--vb-pink-soft,#fdf0f3); border:1px solid rgba(226,104,140,.28);
  color:#b14a6c; font-size:13.5px; line-height:1.7; text-align:center; word-break:keep-all;
}
.social_register form > p:first-child i{ display:none; }

/* 기존 계정 연결 — 화면 맨 아래 한 줄로 */
.member_connect{ text-align:center; margin-top:18px; }
.member_connect .strong{
  margin:0 0 6px; font-size:13.5px; color:var(--vb-dim,#536b66);
}
.member_connect .connect-opener{
  background:none; border:0; padding:6px 2px; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--vb-mint-dark,#0b8375);
  text-decoration:underline; text-underline-offset:3px;
}

/* ── 좁은 화면 ─────────────────────────────────────── */
@media (max-width:520px){
  .vb-mb-top{ padding-top:26px; }
  .vb-mb-wrap{ padding:20px 16px 46px; }
  .mbskin_box, .vb-mb-card{ padding:30px 22px 26px; border-radius:20px; }
  .vb-mb-wrap h1{ font-size:20px; }
  .vb-mb-wrap .btn_confirm{ flex-direction:column-reverse; }
  .vb-mb-wrap .btn_confirm .btn_close{ width:100%; }
  #sns_login .sns-kakao, #sns_register .sns-kakao{ font-size:15px !important; }
  #sns_login .sns-kakao .txt, #sns_register .sns-kakao .txt{ font-size:15px !important; }
}