@charset "utf-8";
/* ==========================================================================
   X서버 · 회원 페이지   member-override.css

   대상 : /bbs/login.php · register.php · register_form.php · password_lost.php
          member_confirm.php · password.php · profile.php · formmail.php …
   그누보드 회원 스킨(theme/basic/skin/member/basic)의 흰 배경 카드를
   우리 보라 테마로 덮는다. 스킨 PHP 는 건드리지 않는다.

   이 파일은 회원 스킨 style.css 보다 "뒤"에 실려야 한다 (head.sub.php 참조).
   ========================================================================== */

/* ---------- 카드 본체 ---------- */
.mbskin{
  position:relative;
  width:100%; max-width:460px; margin:34px auto 40px;
  padding:0 0 4px;
  color:#ddd2ee;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150,58,236,.22) 0%, rgba(150,58,236,0) 62%),
    linear-gradient(180deg, rgba(14,4,32,.94) 0%, rgba(6,1,16,.96) 100%);
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background-clip:padding-box;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

/* ---------- 제목 ---------- */
.mbskin h1{
  margin:0 0 4px; padding:20px 22px 16px;
  font:bold 21px/1.3 Tahoma,sans-serif; text-align:center; color:#f0e6ff;
  text-shadow:0 0 14px rgba(178,104,240,.6);
  background:url(../img/ui/head_tile.png) repeat-x center bottom;
  background-size:auto 36px;
}
.mbskin h2{
  margin:0; padding:14px 20px 8px;
  font:bold 15px/1.4 Tahoma,sans-serif; color:#e2d2f7;
}
.mbskin h2 .fa{ color:#b268f0; }

/* ---------- 폼 ---------- */
.mbskin fieldset{ border:0; padding:6px 22px 14px; }
.mbskin legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.mbskin .frm_input,
.mbskin input[type=text],
.mbskin input[type=password],
.mbskin input[type=email],
.mbskin input[type=tel],
.mbskin select,
.mbskin textarea{
  width:100%; height:42px; margin:0 0 9px; padding:0 12px;
  color:#efe6fb; font-size:14px;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(150,84,210,.5);
  border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.mbskin textarea{ height:auto; min-height:120px; padding:10px 12px; line-height:1.7; }
.mbskin .frm_input::-webkit-input-placeholder{ color:#8b7da4; }
.mbskin .frm_input::placeholder{ color:#8b7da4; }
.mbskin .frm_input:focus,
.mbskin input:focus,
.mbskin select:focus,
.mbskin textarea:focus{
  outline:none; border-color:#c77dff; box-shadow:0 0 10px rgba(168,92,232,.65);
}
/* 필수 표시가 흰 배경 위 붉은 배경이라 어두운 데서 튄다 */
.mbskin .required,
.mbskin textarea.required{ background-image:none; background-color:rgba(0,0,0,.5); }

/* 체크박스 · 라디오 */
.mbskin input[type=checkbox],
.mbskin input[type=radio]{
  position:relative; width:17px; height:17px; margin:0 6px 0 0; padding:0;
  vertical-align:-3px; cursor:pointer;
  background:rgba(0,0,0,.55); border:1px solid rgba(150,84,210,.6);
  -webkit-appearance:none; appearance:none;
}
.mbskin input[type=radio]{ border-radius:50%; }
.mbskin input[type=checkbox]:checked,
.mbskin input[type=radio]:checked{ background:#6b22b8; border-color:#c77dff; }
.mbskin input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.mbskin input[type=radio]:checked::after{
  content:""; position:absolute; left:4px; top:4px;
  width:7px; height:7px; border-radius:50%; background:#fff;
}
.mbskin label{ color:#c6b8dc; font-size:13px; cursor:pointer; }

/* ---------- 버튼 ---------- */
.mbskin .btn_submit,
.mbskin button.btn_submit,
.mbskin fieldset .btn_submit,
.mbskin input[type=submit]{
  width:100%; height:48px; margin-top:4px;
  font:bold 15px/1 Tahoma,sans-serif; letter-spacing:.04em; color:#fff;
  background:linear-gradient(180deg, #7b2fc9 0%, #4a1489 100%);
  border:1px solid rgba(199,125,255,.6);
  border-radius:0; cursor:pointer;
  box-shadow:0 0 18px rgba(150,58,236,.35);
  transition:filter .16s ease, box-shadow .16s ease;
}
.mbskin .btn_submit:hover,
.mbskin input[type=submit]:hover{
  filter:brightness(1.22); box-shadow:0 0 24px rgba(178,104,240,.6);
}
.mbskin .btn_cancel,
.mbskin button.btn_cancel,
.mbskin a.btn_cancel,
.mbskin a.btn01, .mbskin a.btn02, .mbskin a.btn_b01, .mbskin a.btn_b02{
  display:inline-block; height:42px; line-height:40px; padding:0 18px;
  color:#c6b8dc; font-size:14px; text-align:center;
  background:rgba(0,0,0,.45); border:1px solid rgba(150,84,210,.45);
  border-radius:0;
}
.mbskin .btn_cancel:hover,
.mbskin a.btn01:hover, .mbskin a.btn02:hover,
.mbskin a.btn_b01:hover, .mbskin a.btn_b02:hover{
  color:#fff; background:rgba(96,38,164,.45);
}
.mbskin .btn_confirm{ padding:4px 22px 18px; text-align:center; }
.mbskin .btn_confirm .btn_submit{ width:100%; }

/* ==========================================================================
   로그인 화면 (/bbs/login.php)
     이 페이지는 우리 서브 레이아웃(#app · #scols)을 거치지 않고
     head.sub / tail.sub 만 쓴다 → 폭을 잡아 줄 상자가 없다.
     그래서 카드 자체에 최대 폭과 가운데 정렬을 직접 준다.
   ========================================================================== */
#mb_login.lg-card{
  width:calc(100% - 32px); max-width:520px;
  grid-template-columns:minmax(0,1fr);      /* 캐릭터 칸 없이 한 칸 */
  margin:56px auto 70px;
  min-height:0;
}
#mb_login .lg-form{ min-width:0; width:100%; padding:30px 34px 30px; align-items:stretch; }
/* 제목 이미지가 칸 폭에 맞춰 가로로 늘어나지 않게 */
#mb_login .lg-ttl{ align-self:flex-start; width:auto; height:46px; margin-left:-4px; }
#mb_login .lg-form form{ width:100%; max-width:100%; }
#mb_login .lg-desc,
#mb_login .lg-opt,
#mb_login .lg-under,
#mb_login .lg-notice,
#mb_login .lg-form .btn-login{ max-width:100%; }
/* 로그인 버튼 : 폼 폭을 꽉 채운다 */
#mb_login .btn.btn-login{ width:100%; height:52px; margin-top:4px; }
#mb_login .btn.btn-login span{ font-size:15px; letter-spacing:.1em; }

/* 안내 박스 : flex 로 두면 링크가 따로 떨어져 "운영자 쪽 / 지쓰기" 처럼 끊긴다 */
#mb_login .lg-notice{ display:block; line-height:1.85; }
#mb_login .lg-notice b{ display:inline-block; margin-right:7px; vertical-align:1px; }
#mb_login .lg-notice a{ color:#c9a6f0; white-space:nowrap; }
#mb_login .lg-notice a:hover{ color:#fff; }

/* 캐릭터 칸 아래 서버 이름이 그림에 묻히지 않게 */
#mb_login .lg-visual::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, rgba(6,1,16,0) 0%, rgba(6,1,16,.85) 78%);
  pointer-events:none;
}
#mb_login .lg-visual .cap-txt{ z-index:1; }

@media (max-width:820px){
  #mb_login.lg-card{ margin:22px auto 34px; min-height:0; }
}

/* ==========================================================================
   자동등록방지 (kcaptcha) — 로그인·비밀번호찾기·회원가입·글쓰기 어디서나 같은 모양
     기본 마크업은 이미지 / 입력칸 / 버튼 / 안내문이 제각각 흘러서 두 줄로 어긋난다.
     하나의 상자로 묶고 한 줄로 세운다. 안내문만 아랫줄.
   ========================================================================== */
#captcha,
#container #captcha,
.mbskin #captcha,
#mb_login #captcha{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  width:100%; margin:0; padding:9px 10px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(150,84,210,.4);
}
#captcha legend{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
#captcha #captcha_img{
  flex:none; height:42px; width:auto; margin:0;
  border:1px solid rgba(150,84,210,.45); background:#fff;
}
#captcha #captcha_key{
  flex:1 1 110px; min-width:90px; width:auto; height:42px; margin:0; padding:0 10px;
  text-align:center; letter-spacing:.24em; font-size:15px;
  color:#efe6fb; background:rgba(0,0,0,.5);
  border:1px solid rgba(150,84,210,.5);
}
#captcha #captcha_key:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 10px rgba(168,92,232,.65); }
#captcha button{
  flex:none; width:42px; height:42px; padding:0;
  background:rgba(0,0,0,.45); border:1px solid rgba(150,84,210,.45);
  color:#c6b8dc; font-size:0; cursor:pointer;
}
#captcha button:hover{ background:rgba(96,38,164,.45); border-color:#c77dff; }
#captcha button span{ display:inline-block; width:18px; height:18px; }
#captcha #captcha_mp3 span{
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c6b8dc'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.8-1-3.3-2.5-4v8c1.5-.7 2.5-2.2 2.5-4z'/%3E%3C/svg%3E") no-repeat center/18px 18px;
}
#captcha #captcha_reload span{
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c6b8dc'%3E%3Cpath d='M17.65 6.35A8 8 0 1 0 19.73 14h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") no-repeat center/18px 18px;
}
#captcha #captcha_info{
  flex:1 0 100%; margin:2px 0 0; font-size:12px; line-height:1.6; color:#8d7fa0;
}
/* 감싼 줄에는 위쪽 여백만 */
.lg-captcha{ margin-top:4px; }

/* ---------- 아래는 그누보드 기본 카드(.mbskin) 를 쓰는 화면들 ---------- */
#mb_login #login_fs{ padding:16px 22px 10px; }
#mb_login #login_fs label[for=login_auto_login]{ display:inline-block; margin-top:12px; }
#mb_login #login_auto_login{ margin-top:12px; }

#login_info{
  margin:6px 0 0; padding:14px 22px 18px;
  background:transparent;                    /* 스킨 기본값이 흰 바탕이다 */
  border:0; border-top:1px solid rgba(150,84,210,.28);
  text-align:center;
}
#login_info h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#login_info div{ display:flex; align-items:center; justify-content:center; gap:14px; }
#login_info a{ color:#a99cc0; font-size:13px; }
#login_info a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.4); }
#login_info div a + a{ position:relative; padding-left:15px; }
#login_info div a + a::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-5px;
  width:1px; height:11px; background:rgba(150,84,210,.55);
}

/* 소셜 로그인 영역이 있으면 톤만 맞춘다 */
.mbskin #social_login{ padding:0 22px 12px; }

/* ---------- 회원가입 약관 (register.php) ---------- */
#fregister_chkall{
  margin:0; padding:14px 22px;
  background:rgba(96,38,164,.20);
  border-bottom:1px solid rgba(150,84,210,.28);
}
#fregister_chkall label{ color:#e2d2f7; font-size:14px; font-weight:bold; }
#fregister_term, #fregister_private{ padding:0 22px 6px; }
#fregister_term textarea, #fregister_private textarea,
.mbskin .fregister_agree textarea{
  min-height:150px; font-size:13px; line-height:1.75; color:#c6b8dc;
}
.mbskin .fregister_agree{ padding:8px 0 14px; border:0; text-align:right; }
.mbskin .fregister_agree label{ color:#c6b8dc; }

/* ---------- 표 형태 폼 (register_form.php) ---------- */
.mbskin{ max-width:640px; }        /* 가입 폼은 항목이 많아 조금 넓게 */
#mb_login, #mb_confirm{ max-width:420px; }

.mbskin .tbl_frm01{ margin:0; padding:0 22px 16px; }
.mbskin .tbl_frm01 table{ width:100%; border-collapse:collapse; }
.mbskin .tbl_frm01 th{
  width:114px; padding:9px 8px; text-align:left; vertical-align:middle;
  color:#c9a6f0; font-size:13px; font-weight:normal;
  background:none; border:0; border-bottom:1px solid rgba(150,84,210,.18);
}
.mbskin .tbl_frm01 td{
  padding:9px 0; vertical-align:middle;
  background:none; border:0; border-bottom:1px solid rgba(150,84,210,.18);
}
.mbskin .tbl_frm01 .frm_input{ margin-bottom:0; }
.mbskin .frm_info{ display:block; margin-top:5px; font-size:12px; color:#8d7fa0; }
.mbskin .frm_file{ padding:6px 0; font-size:13px; color:#c6b8dc; }
.mbskin .tbl_frm01 a{ color:#c9a6f0; }
.mbskin #captcha{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mbskin #captcha input{ width:auto; flex:1 1 120px; }

/* 그누보드가 인라인으로 박는 흰 바탕 정리 */
.mbskin [style*="background-color:#fff"],
.mbskin [style*="background:#fff"],
.mbskin [style*="background-color:#efefef"]{ background:transparent !important; }

/* 안내 문구 */
.mbskin p, .mbskin .empty_list{ padding:0 22px 14px; font-size:13px; line-height:1.8; color:#b6a8cc; }
.mbskin strong{ color:#e2d2f7; }
.mbskin a{ color:#c9a6f0; }
.mbskin a:hover{ color:#fff; }

/* ==========================================================================
   서브 레이아웃 안에서 열리는 회원 페이지
     register.php(약관) 처럼 .mbskin 카드가 아니라 우리 서브 본문(#container)
     안에 그대로 들어오는 화면들. 회원 스킨 style.css 의 흰 바탕을 여기서 덮는다.
   ========================================================================== */
#container #fregister > p{
  margin:0 0 12px; padding:12px 14px;
  color:#e2d2f7; font-size:13px; line-height:1.8; text-align:center;
  background:rgba(96,38,164,.20);
  border:1px solid rgba(150,84,210,.35);
}
#container #fregister_chkall{
  margin:0 0 12px; padding:11px 14px; text-align:right;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(150,84,210,.30);
}
#container #fregister_chkall label{ color:#e2d2f7; font-size:14px; font-weight:bold; }

#container #fregister_term,
#container #fregister_private{
  margin:0 0 14px; padding:0;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(150,84,210,.30);
}
#container #fregister_term h2,
#container #fregister_private h2{
  margin:0; padding:11px 14px;
  font:bold 14px/1.4 Tahoma,sans-serif; color:#dcc6f7;
  background:linear-gradient(180deg, rgba(96,38,164,.5) 0%, rgba(28,8,56,.38) 100%);
  border-bottom:1px solid rgba(150,84,210,.30);
}
#container #fregister_term h2 .fa,
#container #fregister_private h2 .fa{ color:#b268f0; }

#container #fregister_term textarea,
#container #fregister_private textarea{
  display:block; width:100%; min-height:150px; margin:0; padding:12px 14px;
  color:#c6b8dc; font-size:13px; line-height:1.8;
  background:rgba(0,0,0,.42); border:0; resize:vertical;
}
#container .fregister_agree{
  margin:0; padding:10px 14px; text-align:right; border:0;
  border-top:1px solid rgba(150,84,210,.22);
}
#container .fregister_agree label{ color:#c6b8dc; font-size:13px; }

/* 개인정보처리방침 표
   스킨이 표를 감싼 div 에 background:#fff 를 줘서, 셀을 반투명으로 두면 흰색이 비친다.
   → 감싼 div 를 먼저 투명으로 만든다. */
#container #fregister_private > div{ padding:12px 14px; background:transparent; }
/* 스킨이 흰 바탕을 주는 나머지 회원 화면들 */
#container #register_form,
#container #reg_result,
#container #reg_result #result_email,
#container #fregisterform,
#container #msg_certify{ background:transparent; }
#container #fregister_private table{ width:100%; border-collapse:collapse; }
#container #fregister_private caption{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
#container #fregister_private th{
  padding:10px 8px; color:#dcc6f7; font-size:13px; font-weight:bold; text-align:center;
  background:linear-gradient(180deg, rgba(96,38,164,.5) 0%, rgba(28,8,56,.38) 100%);
  border:1px solid rgba(150,84,210,.30);
}
#container #fregister_private td{
  padding:10px 10px; color:#b6a8cc; font-size:13px; line-height:1.7;
  background:#150633;                       /* 불투명 — 뒤 흰 바탕이 비치지 않게 */
  border:1px solid rgba(150,84,210,.22);
}

/* 확인 버튼 */
/* 입력 안내 문구가 스킨 기본값(파랑)이라 우리 화면에서 튄다 */
#container .frm_info,
#container #fregisterform .frm_info{ display:block; margin-top:5px;
  font-size:12px; line-height:1.7; color:#8d7fa0; }
#container #msg_certify{ margin:6px 0 0; padding:8px 10px; text-align:center;
  font-size:12px; color:#c9a6f0;
  background:rgba(96,38,164,.18); border:1px solid rgba(150,84,210,.35); }

#container .btn_confirm{ padding:6px 0 4px; text-align:center; }
#container .btn_confirm .btn_submit,
#container .btn_confirm input[type=submit]{
  min-width:200px; height:48px; padding:0 26px;
  font:bold 15px/1 Tahoma,sans-serif; color:#fff;
  background:linear-gradient(180deg, #7b2fc9 0%, #4a1489 100%);
  border:1px solid rgba(199,125,255,.6); border-radius:0; cursor:pointer;
  box-shadow:0 0 18px rgba(150,58,236,.35);
}
#container .btn_confirm .btn_submit:hover{ filter:brightness(1.22); }

/* ---------- 좁은 화면 ---------- */
@media (max-width:760px){
  .mbskin{ margin:18px auto 26px; }
  .mbskin h1{ font-size:19px; padding:16px 16px 13px; }
  .mbskin fieldset,
  .mbskin .tbl_frm01,
  #fregister_term, #fregister_private,
  #fregister_chkall,
  .mbskin .btn_confirm,
  .mbskin p{ padding-left:14px; padding-right:14px; }
  .mbskin .tbl_frm01 th{ width:92px; }
}