@charset "utf-8";

/* =========================================================
   BAMPhil PC MEMBER SKIN (FINAL v2)
   - Bootstrap5/theme 충돌 방지
   - Login: 현재 완성 유지
   - Register: 풀폭 퍼짐/표 깨짐/약관 박스 난장 방지 (카드+폭 제한)
========================================================= */

:root{
  --bp-bg:#0b0c10;
  --bp-panel:#111318;
  --bp-panel2:#0f1116;
  --bp-line:rgba(255,255,255,.12);
  --bp-txt:#e9eef7;
  --bp-sub:rgba(255,255,255,.62);

  --bp-gold:#ffd27d;
  --bp-gold2:rgba(255,210,125,.35);

  --r:20px;
  --r-in:16px;

  --shadow:0 30px 90px rgba(0,0,0,.65);
  --shadow-in:inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================================================
   MEMBER PAGE BACKGROUND
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form, #member_confirm, #mb_confirm, #pw_confirm){
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,210,125,.08), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(80,120,255,.06), transparent 55%),
    var(--bp-bg);
  color:var(--bp-txt);
  padding:86px 14px 90px;
  min-height:calc(100vh - 120px);
}
:where(#mb_login, #fregister, #fregisterform, #register_form, #member_confirm, #mb_confirm, #pw_confirm),
:where(#mb_login, #fregister, #fregisterform, #register_form, #member_confirm, #mb_confirm, #pw_confirm) *{
  box-sizing:border-box;
}

/* =========================================================
   CARD (공통)
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form, #member_confirm, #mb_confirm, #pw_confirm) .mbskin{
  width:100%;
  max-width:560px;
  margin:0 auto;

  background:linear-gradient(180deg, rgba(25,30,38,.96), rgba(15,18,24,.96));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  box-shadow:var(--shadow), var(--shadow-in);
  padding:26px 26px 22px;
  position:relative;
  overflow:hidden;
}
:where(#mb_login, #fregister, #fregisterform, #register_form, #member_confirm, #mb_confirm, #pw_confirm) .mbskin::before{
  content:"";
  position:absolute;
  left:-40%;
  top:-70%;
  width:180%;
  height:130%;
  background:radial-gradient(circle at 50% 35%, rgba(255,210,125,.10), transparent 60%);
  pointer-events:none;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .mbskin_box{
  position:relative;
  z-index:1;
}

/* =========================================================
   BOOTSTRAP RESET (member scope only)
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form) form,
:where(#mb_login, #fregister, #fregisterform, #register_form) fieldset{
  margin:0;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) fieldset{
  border:0 !important;
  padding:0 !important;
  min-width:0;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) legend{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form)
input, 
:where(#mb_login, #fregister, #fregisterform, #register_form)
select,
:where(#mb_login, #fregister, #fregisterform, #register_form)
textarea,
:where(#mb_login, #fregister, #fregisterform, #register_form)
button{
  font:inherit;
  line-height:normal;
}

/* =========================================================
   INPUTS (공통)
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form)
.frm_input,
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="text"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="password"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="email"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="number"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="url"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
select{
  display:block !important;
  width:100% !important;
  height:54px !important;
  padding:0 16px !important;

  border-radius:var(--r-in) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.35) !important;
  color:var(--bp-txt) !important;

  outline:none !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65) !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) textarea{
  display:block !important;
  width:100% !important;
  min-height:180px !important;
  padding:12px 16px !important;

  border-radius:var(--r-in) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.35) !important;
  color:var(--bp-txt) !important;

  outline:none !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65) !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) input::placeholder,
:where(#mb_login, #fregister, #fregisterform, #register_form) textarea::placeholder{
  color:rgba(255,255,255,.42) !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) input:focus,
:where(#mb_login, #fregister, #fregisterform, #register_form) select:focus,
:where(#mb_login, #fregister, #fregisterform, #register_form) textarea:focus{
  border-color:rgba(255,210,125,.65) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.65),
    0 0 0 4px rgba(255,210,125,.14) !important;
}

/* =========================================================
   PRIMARY BUTTONS (공통)
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form)
.btn_submit,
:where(#mb_login, #fregister, #fregisterform, #register_form)
button[type="submit"],
:where(#mb_login, #fregister, #fregisterform, #register_form)
input[type="submit"]{
  display:block !important;
  width:100% !important;
  height:56px !important;

  border-radius:18px !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-0.2px !important;

  border:1px solid rgba(255,210,125,.60) !important;
  background:linear-gradient(180deg, #ffe59b, #f9c846) !important;
  color:#141414 !important;

  cursor:pointer !important;
  box-shadow:
    0 16px 44px rgba(255,211,77,.40),
    inset 0 1px 0 rgba(255,255,255,.60) !important;
  transition:.15s ease !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .btn_submit:hover{
  transform:translateY(-1px);
}

/* =========================================================
   LOGIN (그대로 유지)
========================================================= */
#mb_login #login_id{ margin-bottom:10px !important; }
#mb_login #login_pw{ margin-bottom:14px !important; }

#mb_login #login_info{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:14px !important;
}
#mb_login .login_if_lpl a{
  display:inline-flex !important;
  align-items:center !important;
  height:36px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
  color:rgba(255,255,255,.86) !important;
  text-decoration:none !important;
  font-weight:900 !important;
}

/* =========================================================
   REGISTER FIX (여기가 핵심)
   - 스샷처럼 “폼이 페이지 전체로 퍼지는” 현상 방지
   - 그누 회원가입의 table/section 박스를 카드 안에서 정렬
========================================================= */

/* 회원가입(약관/가입폼) 컨테이너 폭을 카드로 고정 */
#fregister, #fregisterform, #register_form{
  width:100%;
}
#fregister .mbskin,
#fregisterform .mbskin,
#register_form .mbskin{
  max-width:900px;             /* 회원가입은 항목이 많아 로그인보다 넓게 */
}

/* 그누 기본: 섹션 제목/구분선 */
:where(#fregister, #fregisterform, #register_form) h2,
:where(#fregister, #fregisterform, #register_form) h3{
  margin:18px 0 10px !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:rgba(255,255,255,.92) !important;
}

/* 그누 기본 폼 wrapper/table 폭 제한 + 줄맞춤 */
:where(#fregisterform, #register_form) .tbl_frm01,
:where(#fregisterform, #register_form) table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 12px !important;  /* 행 간격 */
}

/* th/td가 한 줄에 안 예쁘게 붙는 것 방지 */
:where(#fregisterform, #register_form) th,
:where(#fregisterform, #register_form) td{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  vertical-align:top !important;
}

/* 라벨(th) 스타일 */
:where(#fregisterform, #register_form) th{
  width:220px !important;
  padding-top:10px !important;
  color:rgba(255,255,255,.82) !important;
  font-weight:900 !important;
}

/* td 안의 input은 이미 100%라서, td가 좁아지지 않게 */
:where(#fregisterform, #register_form) td{
  width:auto !important;
}

/* 비밀번호/확인 같은 2단으로 나오던 영역은 “그누가 float로 쪼개는” 경우가 있음 → 강제 2열 그리드 */
:where(#fregisterform, #register_form) .frm_grid,
:where(#fregisterform, #register_form) .register_form,
:where(#fregisterform, #register_form) .form_01{
  width:100%;
}

/* 약관 박스(스크롤 영역) */
:where(#fregister) textarea,
:where(#fregister) .textarea,
:where(#fregister) .term,
:where(#fregister) .privacy{
  min-height:220px !important;
}

/* “약관 동의” 체크 줄 */
:where(#fregister) .chk_box,
:where(#fregisterform) .chk_box,
:where(#register_form) .chk_box{
  margin:10px 0 0 !important;
}

/* 하단 버튼 줄: 스샷처럼 취소가 위로 튀는 현상 방지 */
:where(#fregister, #fregisterform, #register_form) .btn_confirm{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-top:18px !important;
}

/* 취소 버튼 크게 */
:where(#fregister, #fregisterform, #register_form) .btn_close,
:where(#fregister, #fregisterform, #register_form) a.btn_close{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:56px !important;
  min-width:200px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

/* 회원가입 버튼은 남는 공간 채우게 */
:where(#fregister, #fregisterform, #register_form) .btn_confirm .btn_submit{
  flex:1 1 auto !important;
}

/* 캡챠가 너무 떠보이면 */
:where(#fregisterform, #register_form) #captcha,
:where(#fregisterform, #register_form) .captcha{
  margin-top:12px !important;
}

/* =========================================================
   CHECKBOX UI (공통)
========================================================= */
:where(#mb_login, #fregister, #fregisterform, #register_form) .selec_chk{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .chk_box label{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:800 !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .chk_box label span{
  width:20px !important;
  height:20px !important;
  border-radius:7px !important;
  border:1px solid rgba(255,255,255,.32) !important;
  background:rgba(0,0,0,.25) !important;
  display:inline-block !important;
  position:relative !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55) !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .selec_chk:checked + label span{
  background:rgba(255,210,125,.95) !important;
  border-color:rgba(255,210,125,.95) !important;
}
:where(#mb_login, #fregister, #fregisterform, #register_form) .selec_chk:checked + label span::after{
  content:"";
  position:absolute;
  left:6px; top:3px;
  width:6px; height:10px;
  border-right:2px solid #0b0c10;
  border-bottom:2px solid #0b0c10;
  transform:rotate(40deg);
}

/* PC wide */
@media (min-width:1200px){
  :where(#mb_login) .mbskin{ max-width:720px; }
  :where(#fregister, #fregisterform, #register_form) .mbskin{ max-width:980px; }
}
/* =========================================================
   REGISTER LAYOUT (PC) - new skins
========================================================= */
:where(#fregister, #register_form) .bp-mb-head{
  text-align:center;
  margin-bottom:16px;
}
:where(#fregister, #register_form) .bp-mb-title{
  margin:0 0 10px;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.3px;
  color:rgba(255,255,255,.92);
}
:where(#fregister, #register_form) .bp-mb-title strong{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
:where(#fregister, #register_form) .bp-mb-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
:where(#fregister, #register_form) .bp-mb-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.85);
  font-weight:900;
  text-decoration:none;
}
:where(#fregister, #register_form) .bp-mb-tab:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
:where(#fregister, #register_form) .bp-mb-tab.is-on{
  border-color:rgba(255,210,125,.35);
  background:rgba(255,210,125,.10);
  color:var(--bp-gold);
}
.bp-mb-help{
  margin:0 0 8px;
  color:rgba(255,255,255,.58);
  font-size:13px;
  line-height:1.5;
  text-align:center;
}

/* register sections */
.bp-reg-section{
  margin:14px 0;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(0,0,0,.18);
}
.bp-reg-section h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
  color:rgba(255,255,255,.92);
}
.bp-reg-scroll{
  width:100%;
  min-height:240px;
  resize:vertical;
}

/* agreement row */
.bp-reg-agree{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.bp-reg-agree .chk_box{ display:flex; align-items:center; gap:10px; }

/* form list grid */
.bp-reg-form h2{
  margin:18px 0 10px !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:rgba(255,255,255,.92) !important;
}
.bp-reg-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.bp-reg-item{ margin:0; }
.bp-reg-item.is-full{ grid-column:1 / -1; }

.bp-reg-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
  color:rgba(255,255,255,.85);
  font-weight:900;
}
.bp-reg-label small{
  font-weight:800;
  color:rgba(255,255,255,.55);
}

/* tooltip cleanup if exists */
.tooltip,
.tooltip_icon{ display:none !important; }

/* captcha box */
.bp-captcha{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.18);
}

/* buttons */
:where(#fregister, #register_form) .btn_confirm{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  margin-top:18px;
}
:where(#fregister, #register_form) .btn_close,
:where(#fregister, #register_form) a.btn_close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  min-width:200px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:900;
  text-decoration:none;
}
:where(#fregister, #register_form) .btn_confirm .btn_submit{ flex:1 1 auto; }

@media (max-width: 900px){
  .bp-reg-list{ grid-template-columns:1fr; }
}


/* Support gnuboard default register_form markup */
#register_form .register_form_inner > ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
#register_form .register_form_inner > ul > li{
  margin:0;
}
#register_form .register_form_inner > ul > li:has(textarea),
#register_form .register_form_inner > ul > li.full,
#register_form .register_form_inner > ul > li.hp,
#register_form .register_form_inner > ul > li.addr,
#register_form .register_form_inner > ul > li#captcha_box,
#register_form .register_form_inner > ul > li:nth-child(1){
  grid-column:1 / -1;
}
#register_form .register_form_inner label{
  display:block;
  margin:0 0 8px;
  color:rgba(255,255,255,.85);
  font-weight:900;
}
#register_form .register_form_inner label .req{
  color:var(--bp-gold);
}
@media (max-width: 900px){
  #register_form .register_form_inner > ul{ grid-template-columns:1fr; }
}

/* ✅ 텔레그램 알림은 광고 발송용이 아님 안내 */
#register_form .bp-tg-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.55;
}
#register_form .bp-tg-note b{ color:#ffd34d; }


/* ===============================
   자동등록방지 캡챠 한줄 정렬
================================ */
#captcha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

#captcha #captcha_img {
  height: 40px;
  border-radius: 6px;
}

#captcha #captcha_key {
  height: 40px;
  width: 110px;
  padding: 0 10px;
  border-radius: 6px;
}

#captcha .captcha_reload,
#captcha .captcha_sound {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 모바일에서도 줄 안깨지게 */
@media (max-width: 480px) {
  #captcha {
    flex-wrap: nowrap;
  }
}



/* =======================================================
   ✅ FIX: 정보공개(mb_open) + 캡챠가 같은 줄(2열 grid)로 붙는 문제
   - register_form.skin.php 내 ul이 2열 grid라서 "width/clear"로는 안 내려감
   - 아래는 강제 full-span + 캡챠 한줄 정렬
======================================================= */
#register_form .register_form_inner > ul > li.bp-open-fix,
#register_form .register_form_inner > ul > li.is_captcha_use{
  grid-column:1 / -1 !important;
}

#register_form li.is_captcha_use #captcha{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}

#register_form li.is_captcha_use #captcha *{ float:none !important; }
#register_form li.is_captcha_use #captcha_img{ height:40px !important; border-radius:6px !important; }
#register_form li.is_captcha_use #captcha_key{ height:40px !important; width:120px !important; padding:0 10px !important; border-radius:6px !important; }

#register_form li.is_captcha_use #captcha .captcha_sound,
#register_form li.is_captcha_use #captcha .captcha_reload{
  height:40px !important;
  width:40px !important;
  border-radius:6px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}