@charset "utf-8";
/* ============================================================================
   HUDMEDIA Editorial — default.css
   ----------------------------------------------------------------------------
   이 파일이 언제 나가는가
     root/head.sub.php 가 화면 종류와 상관없이 항상 한 번 부른다. 즉 메인·게시판
     뿐 아니라, 테마 head.php 를 거치지 않는 화면에도 나간다.

   왜 여기에 로그인 화면 스타일이 있는가
     bbs/login.php 와 bbs/member_confirm.php 는 테마 head.php 가 아니라
     bbs/_head.sub.php(→ root/head.sub.php)를 부른다. 그래서 그 두 화면에는
     테마의 main.css 도, 헤더·푸터도 붙지 않는다. 실제로 로그인 화면은
     그누보드 기본 회원스킨(skin/member/basic) 모양 그대로 나오고 있었고,
     이 파일은 주석 한 줄짜리 빈 파일이었다 — 그래서 사이트와 전혀 달라 보였다.

     스킨 파일(skin/member/basic/*.skin.php)은 그누보드가 기본 제공하는
     것이라 고치지 않는다. 이미 붙어 있는 클래스에 생김새만 입힌다.

   범위를 어떻게 좁혔나
     선택자를 전부 .mbskin 안쪽으로 묶었다. 이 클래스는 회원 관련 화면에만
     있으므로, 이 파일이 모든 화면에 나가더라도 다른 화면에는 아무 영향이 없다.
     배경색만 body:has(.mbskin) 으로 준다 — :has() 를 모르는 브라우저에서는
     배경이 흰색으로 남을 뿐 레이아웃은 그대로다.

   색은 왜 var(...) 에 기본값을 달아 두었나
     관리자 색상 팔레트(--arc-*)는 run_event('pre_head') 로 주입되는데, 이
     화면들은 그 훅을 지나지 않아 변수가 없다. 그래서 현재 팔레트(진녹)를
     기본값으로 적어 둔다. 나중에 이 화면들이 팔레트를 받게 되면 변수 쪽이
     자동으로 이긴다.
   ========================================================================== */

body:has(.mbskin){
  background:#ffffff;
  margin:0;
}

.mbskin{
  max-width:460px;
  margin:0 auto;
  padding:56px 20px 80px;
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  color:#1f1c19;
  letter-spacing:-.01em;
  word-break:keep-all;
}

/* 카드 */
.mbskin .mbskin_box{
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:18px;
  padding:36px 30px 30px;
  box-shadow:0 1px 2px rgba(31,28,25,.04), 0 14px 34px rgba(31,28,25,.07);
}
@media(max-width:480px){
  .mbskin{padding:28px 16px 56px}
  .mbskin .mbskin_box{padding:26px 20px 24px;border-radius:14px}
}

/* 제목 — 스킨이 $g5['title'] 을 h1 으로 찍는다("로그인") */
.mbskin .mbskin_box > h1{
  margin:0 0 22px;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--arc-main, #17332a);
  text-align:center;
}

/* 제목 줄 — 예전에는 오른쪽에 회원가입 링크가 함께 있어 양끝으로 벌렸다.
   가입을 받지 않기로 해 링크를 뺐으므로 제목만 가운데에 둔다 (2026-09-07) */
.mbskin .mb_log_cate{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid #eee8dc;
}
.mbskin .mb_log_cate h2{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--arc-main, #17332a);
  letter-spacing:-.03em;
}
.mbskin .mb_log_cate .join{
  font-size:13.5px;
  font-weight:600;
  color:var(--arc-accent, #3f8f6b);
  text-decoration:none;
}
.mbskin .mb_log_cate .join:hover{text-decoration:underline;text-underline-offset:3px}

/* 입력 묶음 */
.mbskin fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
.mbskin legend{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.mbskin .frm_input{
  display:block;
  width:100%;
  height:50px;
  margin-bottom:10px;
  padding:0 14px;
  border:1px solid #ddd6c9;
  border-radius:10px;
  background:#fff;
  font-size:15.5px;
  color:#1f1c19;
  box-sizing:border-box;
}
.mbskin .frm_input::placeholder{color:#a9a299}
.mbskin .frm_input:focus{
  outline:3px solid rgba(63,143,107,.28);
  outline-offset:1px;
  border-color:var(--arc-accent, #3f8f6b);
}

.mbskin .btn_submit{
  display:block;
  width:100%;
  height:52px;
  margin-top:8px;
  border:0;
  border-radius:10px;
  background:var(--arc-main, #17332a);
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.mbskin .btn_submit:hover{
  background:var(--arc-point, #2b5f4a);
  transform:translateY(-1px);
}

/* 자동로그인 / 아이디·비밀번호 찾기 */
.mbskin #login_info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:13.5px;
  color:#6f6a64;
}
.mbskin #login_info label{cursor:pointer}
.mbskin #login_info a{color:#6f6a64;text-decoration:none}
.mbskin #login_info a:hover{color:var(--arc-main, #17332a);text-decoration:underline;text-underline-offset:3px}
.mbskin .chk_box{display:flex;align-items:center;gap:6px}

/* 비회원 구매 등 부가 영역 — 쇼핑몰을 쓰지 않으면 나오지 않는다 */
.mbskin #mb_login_notmb,
.mbskin #mb_login_od{
  margin-top:20px;
  padding:22px 20px;
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:14px;
}
.mbskin #mb_login_notmb h2,
.mbskin #mb_login_od h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
}
.mbskin #guest_privacy{
  max-height:140px;
  overflow-y:auto;
  padding:12px;
  margin:10px 0;
  border:1px solid #eee8dc;
  border-radius:8px;
  background:#faf8f3;
  font-size:13px;
  line-height:1.7;
  color:#6f6a64;
}
.mbskin .btn_confirm{margin-top:12px}
.mbskin .btn_confirm .btn_submit{text-align:center;line-height:52px;text-decoration:none}

/* 소셜 로그인 버튼이 있으면 카드 아래에 자연스럽게 붙게 */
.mbskin #social_login{margin-top:16px}


/* ============================================================================
   회원가입 / 정보수정 (bbs/register_form.php) — 2026-08-27
   ----------------------------------------------------------------------------
   이 화면은 테마 머리·꼬리는 붙는데 생김새는 그누보드 기본 회원스킨
   (skin/member/basic/style.css)의 잿빛 그대로였다. 스킨 파일은 고치지 않는다
   — 검증 스크립트(jquery.register_form.js)가 id·name 에 얽혀 있어서다.
   이미 붙어 있는 클래스에 로그인 카드(.mbskin)와 같은 결의 생김새만 입힌다.
   선택자는 전부 .register 안쪽이라 다른 화면에는 아무 영향이 없다.
   ========================================================================== */

.register{
  max-width:820px;
  margin:0 auto;
  padding:40px 20px 80px;
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  color:#1f1c19;
  letter-spacing:-.01em;
  word-break:keep-all;
}

/* 구획 카드 — 사이트 이용정보 / 개인정보 / 기타 개인설정 / 수신설정 */
.register .register_form_inner{
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:18px;
  padding:0;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(31,28,25,.04), 0 14px 34px rgba(31,28,25,.07);
  overflow:hidden;
}
.register .register_form_inner h2,
.register #register_form h2{
  margin:0;
  padding:18px 24px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--arc-main, #17332a);
  background:#faf8f3;
  border-bottom:1px solid #eee8dc;
}
.register #register_form{background:transparent;margin-bottom:0}
.register .register_form_inner ul{
  list-style:none;
  margin:0;
  padding:22px 24px;
}
.register .register_form_inner li{margin:0 0 18px}
.register .register_form_inner li:last-child{margin-bottom:0}

/* 이름표(레이블) */
.register .register_form_inner label,
.register .register_form_inner .frm_label{
  display:block;
  margin-bottom:8px;
  font-size:13.5px;
  font-weight:700;
  color:#6f6a64;
  line-height:1.5;
}
.register .register_form_inner label.inline{display:inline;font-weight:500}
.register .cert_desc{font-weight:400;color:#a9a299;font-size:12.5px}

/* 입력칸 — 로그인 화면과 같은 규격 */
.register .frm_input{
  display:block;
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid #ddd6c9;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  color:#1f1c19;
  box-sizing:border-box;
}
.register .frm_input::placeholder{color:#a9a299}
.register .frm_input:focus{
  outline:3px solid rgba(63,143,107,.28);
  outline-offset:1px;
  border-color:var(--arc-accent, #3f8f6b);
}
.register .frm_input[readonly]{background:#f4f1ea;color:#8a847b}
.register textarea{
  display:block;
  width:100%;
  min-height:96px;
  padding:12px 14px;
  border:1px solid #ddd6c9;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  font-family:inherit;
  color:#1f1c19;
  line-height:1.6;
  box-sizing:border-box;
  resize:vertical;
}
.register textarea:focus{
  outline:3px solid rgba(63,143,107,.28);
  outline-offset:1px;
  border-color:var(--arc-accent, #3f8f6b);
}

/* 비밀번호 두 칸 — 스킨의 half_input(float)을 격자로 다시 잡는다 */
.register .half_input{float:none;width:100%}
@media(min-width:560px){
  .register .register_form_inner ul{display:block}
  .register li.half_input{width:calc(50% - 6px);display:inline-block;vertical-align:top}
  .register li.half_input.margin_input{margin-right:8px}
}

/* 검사 결과 한 줄 (아이디 중복 등) */
.register [id^="msg_mb_"], .register #msg_certify{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  color:#8a847b;
}

/* 작은 단추 — 본인확인·주소검색 따위 */
.register .btn_frmline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  margin:0 0 8px;
  border:1px solid #ddd6c9;
  border-radius:9px;
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  color:#1f1c19;
  cursor:pointer;
}
.register .btn_frmline:hover{border-color:var(--arc-accent, #3f8f6b);color:var(--arc-accent, #3f8f6b)}

/* 물음표 도움말 */
.register .tooltip_icon{color:#c2bbb0;font-size:1.1em}
.register .tooltip_icon:hover{color:var(--arc-accent, #3f8f6b)}
.register .tooltip{
  background:#2a2622;
  border-radius:8px;
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.6;
  margin-top:6px;
}
.register .tooltip:before{border-right-color:#2a2622}

/* 체크 항목 — 메일 수신, 마케팅 동의 등 */
.register .chk_box{display:block}
.register .consent-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.register .chk_li{font-size:14px;color:#1f1c19}
.register .selec_chk{width:17px;height:17px;accent-color:var(--arc-main, #17332a)}
.register .js-open-consent{
  border:0;background:none;padding:0;
  font-size:12.5px;color:var(--arc-accent, #3f8f6b);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.register .consent-date{margin-top:4px;font-size:12px;color:#a9a299}

/* 자동 스팸 방지(캡차) */
.register .is_captcha_use #captcha{margin-top:4px}

/* 아래 단추줄 — [취소] [회원가입/정보수정] */
.register .btn_confirm{
  display:flex;
  gap:10px;
  margin-top:6px;
  text-align:initial;
}
.register .btn_confirm .btn_close,
.register .btn_confirm .btn_submit{
  float:none;
  flex:1;
  width:auto;
  height:52px !important;
  margin:0;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
.register .btn_confirm .btn_close{
  border:1px solid #ddd6c9;
  background:#fff;
  color:#6f6a64;
}
.register .btn_confirm .btn_close:hover{border-color:#b9b2a7;color:#1f1c19}
.register .btn_confirm .btn_submit{
  border:0;
  background:var(--arc-main, #17332a);
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.register .btn_confirm .btn_submit:hover{
  background:var(--arc-point, #2b5f4a);
  transform:translateY(-1px);
}
.register .btn_confirm .btn_submit[disabled]{opacity:.55;cursor:default;transform:none}

@media(max-width:480px){
  .register{padding:24px 14px 56px}
  .register .register_form_inner{border-radius:14px}
  .register .register_form_inner ul{padding:18px 16px}
  .register .register_form_inner h2, .register #register_form h2{padding:15px 16px}
}

/* 봇 미끼 칸(허니팟) — 사람 눈과 화면낭독기에서 숨긴다.
   display:none 은 쓰지 않는다. 그걸 보고 건너뛰는 봇이 있다. */
.register .arc_reg_extra{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}