@charset "utf-8";
/* ==========================================================
   홍씨스터 그누보드 테마 — 회원가입·로그인·비밀번호 찾기·게시판 공통
   색은 모두 /core/css/hs.css 의 낮/밤 변수를 사용
   (그누보드 basic 회원 스킨 위에 덮어씌우는 방식이라 !important 를 일부 사용)
   ========================================================== */
/* hs.css는 head.php가 버전 붙여 먼저 불러옴 — 여기서 @import 하면 버전 없는 주소라 Cloudflare 옛 캐시가 뒤에서 새 값을 덮어씀(2026-10-07 발견) */

/* ---------- 그누보드 필수 유틸 ---------- */
.sound_only, .msg_sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }
#skip_to_container a { position: absolute; top: -9999px; }
#skip_to_container a:focus { top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--grad); color: #fff; border-radius: 8px; }
#hd_login_msg { display: none; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
img { max-width: 100%; }
a { color: var(--accent-strong); }
a:hover { color: var(--accent-2); }

/* ---------- 페이지 틀 ---------- */
#hs-member { min-height: calc(100vh - 140px); padding: 40px 16px 64px; }
.hs-member-inner { max-width: 760px; margin: 0 auto; }
.hs-foot { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--line); display: flex; justify-content: center; text-align: center; font-size: var(--fs-sub); color: var(--muted); }

/* 제목 */
#hs-member h1, #hs-member h2, #hs-member .mbskin_box h1, #hs-member #container_title {
  font-size: clamp(22px, 3vw, 28px) !important; font-weight: 800 !important; letter-spacing: -.03em;
  color: var(--text) !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 18px !important; text-align: left;
}
#hs-member h2 { font-size: 18px !important; margin-top: 28px !important; }
#hs-member h3 { color: var(--label) !important; font-size: var(--fs-body); margin: 20px 0 10px; }

/* 스킨이 넣은 흰 배경을 모두 지우고(낮/밤 모두 테마 색 사용), 바깥 카드 하나만 남김 */
/* :where() 로 우선순위를 낮춰서, 아래의 카드·표·안내띠 색 지정이 이기도록 함 */
#hs-member :where(*:not(input, select, textarea, button, img, .btn_submit, .btn_close, .btn_cancel, .btn_frmline)) {
  background-color: transparent !important;
}
#hs-member { color: var(--text); }

/* 체크박스 (그누보드 스킨: 진짜 체크박스는 숨기고 label 안의 span 네모 칸으로 표시)
   약관 동의(.fregister_agree), 전체 동의(.chk_all), 일반(.chk_box) 모두 — 체크되면 강조색 + 흰 체크 */
#hs-member input[type="checkbox"] + label span,
#hs-member input[type="radio"] + label span {
  background-color: var(--surface) !important; border: 1.5px solid var(--faint) !important;
}
#hs-member input[type="checkbox"] + label span { border-radius: 6px !important; }
#hs-member input[type="checkbox"]:checked + label span {
  background-color: var(--accent) !important; border-color: var(--accent) !important;
  background-image: url("/skin/member/basic/img/chk.png") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;
}
#hs-member input[type="radio"]:checked + label span { border-color: var(--accent) !important; }
#hs-member input[type="radio"]:checked + label span::before { background: var(--accent) !important; }
#hs-member input:focus-visible + label span { outline: 2px solid var(--accent); outline-offset: 2px; }
#hs-member input[type="checkbox"]:checked + label { color: var(--text) !important; }
#hs-member .fregister_agree input[type="checkbox"] + label span { width: 20px !important; height: 20px !important; }

/* 카드: 로그인·회원가입 폼 상자 (바깥 하나만) */
#hs-member .mbskin, #hs-member .register, #hs-member #reg_result, #hs-member .mbskin_box {
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--line) !important; border-radius: 20px !important;
  box-shadow: var(--shadow) !important; padding: clamp(20px, 4vw, 36px) !important;
  width: auto !important; max-width: 100% !important; margin: 0 auto 20px !important;
}
#hs-member .mbskin { max-width: 420px !important; }
/* 안쪽 상자는 테두리·그림자 없이 */
#hs-member #fregister, #hs-member #fregisterform, #hs-member .register_form_inner, #hs-member .register .form_01,
#hs-member .register section, #hs-member #fregister section, #hs-member .fregister_agree {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
#hs-member #fregister, #hs-member #fregisterform, #hs-member .register_form_inner { padding: 0 !important; }
/* 약관 구역: 구분선만 */
#hs-member .register section, #hs-member #fregister section { padding: 16px 0 !important; border-bottom: 1px solid var(--line) !important; }
#hs-member .register h2, #hs-member #fregister h2, #hs-member .register_form_inner h2 {
  font-size: 17px !important; color: var(--text) !important; margin: 18px 0 12px !important; padding: 0 !important;
}
#hs-member .register h2::before, #hs-member .register h2::after, #hs-member .register_form_inner h2::before, #hs-member .register_form_inner h2::after { display: none !important; }

/* 표 (개인정보 수집 항목 등): 낮/밤 모두 읽히게 */
#hs-member table { width: 100%; border-collapse: collapse; }
#hs-member table th { background-color: var(--surface-2) !important; color: var(--text) !important; font-weight: 700; }
#hs-member table td { color: var(--text) !important; }
#hs-member table th, #hs-member table td { border: 1px solid var(--line) !important; padding: 10px !important; font-size: var(--fs-sub); }
#hs-member .tbl_head01, #hs-member .tbl_wrap { overflow-x: auto; }

/* 크롬 자동완성 입력칸 색 맞춤 */
#hs-member input:-webkit-autofill, #hs-member input:-webkit-autofill:hover, #hs-member input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text);
}
#hs-member p, #hs-member li, #hs-member label, #hs-member th, #hs-member td { color: var(--text); }
#hs-member .frm_info, #hs-member .help, #hs-member small { color: var(--muted) !important; font-size: var(--fs-sub) !important; }
#hs-member { font-size: var(--fs-body); }
#hs-member td, #hs-member th, #hs-member li, #hs-member label { font-size: var(--fs-body); }

/* 입력칸 */
#hs-member input[type="text"], #hs-member input[type="password"], #hs-member input[type="email"],
#hs-member input[type="tel"], #hs-member input[type="number"], #hs-member input[type="url"],
#hs-member input[type="date"], #hs-member select, #hs-member textarea, #hs-member .frm_input,
.new_win input[type="text"], .new_win input[type="password"], .new_win input[type="email"], .new_win .frm_input {
  width: 100%; max-width: 100%; height: auto !important; min-height: 46px;
  padding: 11px 14px !important; border-radius: 12px !important;
  border: 1px solid var(--line) !important; background: var(--surface-2) !important; color: var(--text) !important;
  font: inherit !important; font-size: var(--fs-body) !important; box-shadow: none !important; box-sizing: border-box;
}
#hs-member input::placeholder, #hs-member textarea::placeholder { color: var(--faint) !important; opacity: 1; }
#hs-member textarea { min-height: 180px; line-height: 1.7; }
#hs-member input:focus, #hs-member select:focus, #hs-member textarea:focus,
.new_win input:focus { outline: 2px solid var(--accent) !important; outline-offset: 1px; border-color: var(--accent) !important; }
#hs-member input[readonly] { opacity: .7; }
#hs-member .half_input { width: calc(50% - 4px) !important; }
#hs-member input[type="checkbox"]:not(.selec_chk), #hs-member input[type="radio"]:not(.selec_chk) { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: middle; }

/* 표 형태 폼(tbl_frm01) → 세로 목록처럼 */
#hs-member .tbl_frm01 table, #hs-member .tbl_frm01 { width: 100%; border: 0 !important; background: none !important; }
#hs-member .tbl_frm01 th, #hs-member .tbl_frm01 td { display: block; width: 100% !important; border: 0 !important; background: none !important; padding: 6px 0 !important; text-align: left; }
/* 입력 항목 이름: 한 가지 색으로 통일 */
#hs-member .tbl_frm01 th, #hs-member .form_01 li > label, #hs-member .register_form label, #hs-member .register_form_inner label {
  color: var(--text) !important; font-weight: 700 !important; font-size: 15px; display: inline-block; margin-bottom: 6px;
}
#hs-member label strong, #hs-member .required_txt, #hs-member label .sound_only + * { color: var(--accent-strong) !important; }
#hs-member .register_form_inner li, #hs-member .form_01 li { margin-bottom: 14px; }
#hs-member .register_form_inner ul, #hs-member .form_01 ul { padding: 0 !important; margin: 0 !important; }
#hs-member .form_01 ul, #hs-member .register ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#hs-member .form_01 li { border: 0 !important; padding: 0 !important; }

/* 회원가입 안내 띠(원래 분홍) → 연한 블루 */
#hs-member #fregister > p, #hs-member .register > p, #hs-member .register form > p {
  background: #e3f0ff !important; color: #1d4f91 !important; border: 0 !important; border-left: 4px solid #6aa8f0 !important;
  border-radius: 12px !important; padding: 14px 18px !important; font-weight: 700; text-align: center;
  /* 스킨의 고정 높이·줄높이 해제 → 글씨 잘림 방지, 아이콘과 문장을 한 줄로 */
  height: auto !important; min-height: 0 !important; line-height: 1.6 !important;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  display: block !important; font-size: var(--fs-sub) !important; letter-spacing: -.02em;
  position: relative; margin: 0 0 16px !important; box-sizing: border-box; box-shadow: none !important; outline: 0 !important;
}
#hs-member #fregister > p::before, #hs-member #fregister > p::after,
#hs-member .register > p::before, #hs-member .register > p::after,
#hs-member .register form > p::before, #hs-member .register form > p::after { display: none !important; content: none !important; }
html[data-theme="dark"] #hs-member #fregister > p, html[data-theme="dark"] #hs-member .register > p,
html[data-theme="dark"] #hs-member .register form > p {
  background: #16263a !important; color: #9cc6ff !important; border-left-color: #4a86d0 !important;
}
#hs-member #fregister > p i, #hs-member .register > p i, #hs-member .register form > p i {
  color: inherit !important; display: inline !important; margin-right: 6px; position: static !important; font-size: inherit;
}
#hs-member #fregister > p br, #hs-member .register > p br, #hs-member .register form > p br { display: none; }
@media (min-width: 700px) {
  #hs-member #fregister > p, #hs-member .register > p, #hs-member .register form > p { white-space: nowrap !important; }
}

/* 약관 박스 */
#hs-member .fregister_agree, #hs-member section textarea { background: var(--bg-2) !important; }
#hs-member #fregister_chkall, #hs-member .fregister_agree .chk_all, #hs-member .chk_all {
  background: var(--accent-soft) !important; border: 1px solid var(--accent) !important; border-radius: 14px !important; padding: 14px 16px !important; color: var(--text) !important;
}

/* 버튼 */
#hs-member .btn_submit, #hs-member button[type="submit"], #hs-member input[type="submit"],
#hs-member .btn_confirm .btn_submit, .new_win .btn_submit {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--btn-grad) !important; color: var(--btn-ink) !important; font: inherit !important; font-weight: 800 !important; font-size: var(--fs-btn) !important;
  cursor: pointer; box-shadow: 0 8px 20px rgba(229, 57, 53, .22) !important; text-decoration: none !important; width: auto;
}
#hs-member .mbskin .btn_submit, #hs-member #login_fs .btn_submit { width: 100% !important; }
#hs-member .btn_submit:hover { filter: brightness(1.06); }
#hs-member .btn_close, #hs-member .btn_cancel, #hs-member a.btn_cancel, #hs-member .btn02, #hs-member .btn_b01, #hs-member .btn_b02,
#hs-member .btn_frmline, .new_win .btn_close {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px !important; border-radius: 999px !important;
  border: 1px solid var(--line) !important; background: var(--surface-2) !important; color: var(--text) !important;
  font: inherit !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer; height: auto !important; line-height: 1.4 !important;
}
#hs-member .btn_frmline { min-height: 46px; margin-left: 6px; }
#hs-member .btn_confirm { display: flex !important; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px !important; text-align: center; }

/* 로그인 스킨 */
#hs-member #login_info, #hs-member .login_if_auto, #hs-member .login_if_lpl { color: var(--muted); }
#hs-member #login_info a, #hs-member #login_password_lost { color: var(--accent-strong) !important; }
#hs-member .mb_login_join { background: none !important; border: 0 !important; }

/* 회원가입 결과 */
#hs-member #reg_result { text-align: center; }
#hs-member #reg_result .reg_result_p { font-size: 17px; }
#hs-member #reg_result strong { color: var(--accent-strong); }

/* 캡차 */
#hs-member #captcha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#hs-member #captcha img { border-radius: 10px; }
#hs-member #captcha #captcha_key { width: 140px !important; }

/* 팝업 창(비밀번호 찾기 등) */
.new_win { background: var(--bg); color: var(--text); min-height: 100vh; padding: 20px 16px; box-sizing: border-box; }
.new_win h1 { color: var(--text) !important; background: none !important; border: 0 !important; font-size: 20px !important; }
.new_win .new_win_con { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px; padding: 18px !important; color: var(--text); }

/* 게시판 기본(목록·보기) 가독성 */
#hs-member .tbl_head01 table { width: 100%; border-collapse: collapse; }
#hs-member .tbl_head01 th { background: var(--surface-2) !important; color: var(--muted) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
#hs-member .tbl_head01 td { border-bottom: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important; }

@media (max-width: 600px) {
  #hs-member { padding-top: 24px; }
  #hs-member .half_input { width: 100% !important; }
  #hs-member .btn_frmline { margin: 8px 0 0; width: 100%; }
}

/* ==========================================================
   회원가입 화면 정리 (2026-10-07) — 동의 블록·버튼·제목·입력칸·? 설명
   그누보드 스킨 style.css의 `.fregister_agree`(오른쪽 위 절대 위치)·`#fregister p`(높이 50px·가운데·빨간 막대)가
   우리가 넣은 동의 문구에 그대로 걸려 겹치던 것을, 이 화면 전용 클래스(hs-)로 따로 그림
   ========================================================== */
#hs-member .register .hs-reg-title { margin: 0 0 16px !important; }

/* 동의 블록 4개(약관·개인정보·국외 이전·나이 확인)와 전체 동의가 모두 같은 모양: 제목 → 설명·표 → 체크 한 줄, 왼쪽 정렬 */
#hs-member .register section.hs-consent { padding: 16px 0 !important; text-align: left; position: static !important; border-radius: 0 !important; }
#hs-member .register section.hs-consent h2 { margin: 0 0 10px !important; text-align: left; }
#hs-member .register section.hs-consent div { padding: 0 !important; text-align: left; }
#hs-member .register .hs-note { margin: 0 0 12px !important; font-size: var(--fs-sub); line-height: 1.65; color: var(--text); }
#hs-member .register .hs-note.hs-xfer-note { margin: 10px 0 0 !important; font-size: var(--fs-sub); color: var(--muted); }
#hs-member .register .hs-note a { text-decoration: underline; }
#hs-member .register .hs-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; }
#hs-member .register .hs-tblwrap table { min-width: 460px; text-align: left; }
#hs-member .register .hs-tblwrap th, #hs-member .register .hs-tblwrap td { text-align: left; vertical-align: top; line-height: 1.5; }
#hs-member .register section.hs-consent textarea { height: 140px; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: var(--fs-sub); line-height: 1.6em; }

/* 체크 한 줄: 체크 칸 + 문구가 한 덩어리(label 전체를 눌러도 체크), 칸은 문구 왼쪽·세로 가운데 */
#hs-member .register .hs-agree { position: relative !important; display: block; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#hs-member .register .hs-agree label {
  display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) !important; color: var(--text);
  font-size: 15px; line-height: 1.5;
}
#hs-member .register .hs-agree label:hover { border-color: var(--accent); }
#hs-member .register .hs-agree .hs-agree-text { font-weight: 700; flex: 1 1 auto; min-width: 0; }
#hs-member .register .hs-agree .hs-agree-text small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-tag) !important; color: var(--muted) !important; }
#hs-member .register .hs-agree input[type="checkbox"] + label .hs-box {
  position: relative !important; top: auto !important; right: auto !important; flex: 0 0 22px; width: 22px !important; height: 22px !important; display: block;
  border: 1.5px solid var(--faint) !important; border-radius: 6px !important; background: var(--surface) !important; box-sizing: border-box;
}
#hs-member .register .hs-agree input[type="checkbox"]:checked + label .hs-box { background: var(--accent) !important; border-color: var(--accent) !important; background-image: none !important; }
#hs-member .register .hs-agree input[type="checkbox"]:checked + label .hs-box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
#hs-member .register .hs-agree input[type="checkbox"]:checked + label { border-color: var(--accent); }
#hs-member .register .hs-agree input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
#hs-member .register section.hs-consent-all { border-bottom: 0 !important; padding-top: 4px !important; }

/* 버튼: 취소·회원가입 같은 크기, 가운데 나란히 (스킨의 float·49.5% 폭을 해제) */
#hs-member .register .btn_confirm { display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 10px; margin-top: 20px !important; }
#hs-member .register .btn_confirm .btn_submit, #hs-member .register .btn_confirm .btn_close {
  float: none !important; flex: 0 1 190px; width: auto !important; min-width: 0; height: 48px !important; min-height: 48px !important;
  padding: 0 16px !important; margin: 0 !important; box-sizing: border-box; font-size: var(--fs-btn) !important; font-weight: 800 !important; line-height: 1 !important;
}

/* 입력칸: 상담 화면 입력칸과 비슷한 높이, 칸 사이 간격 줄임, 폭 모두 같게 */
#hs-member .register input[type="text"], #hs-member .register input[type="password"], #hs-member .register input[type="email"],
#hs-member .register input[type="tel"], #hs-member .register input[type="number"], #hs-member .register input[type="url"],
#hs-member .register select, #hs-member .register .frm_input {
  min-height: 42px !important; padding: 9px 12px !important; font-size: var(--fs-body) !important; border-radius: 10px !important;
}
#hs-member .register .form_01 ul, #hs-member .register .register_form_inner ul { gap: 10px !important; }
#hs-member .register .form_01 li, #hs-member .register .register_form_inner li { margin: 0 !important; }
#hs-member .register .register_form_inner label { margin-bottom: 4px !important; font-size: var(--fs-sub); }
#hs-member .register li.half_input, #hs-member .register li.left_input, #hs-member .register li.margin_input { width: 100% !important; float: none !important; margin-right: 0 !important; }
#hs-member .register .register_form_inner { padding: 0 !important; margin-bottom: 8px; }

/* ? 설명: 눌러서 펼침 (그누보드 기본은 검은 말풍선 + 마우스 올림이라 휴대폰에서 안 되고, 배경 지우기 규칙 때문에 글자가 안 보였음) */
#hs-member .tooltip_icon { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0 !important; margin-left: 2px;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--muted); font-size: 1.15em; line-height: 1; cursor: pointer; vertical-align: middle; }
#hs-member .tooltip_icon:hover, #hs-member .tooltip_icon[aria-expanded="true"] { color: var(--accent-strong); }
#hs-member .tooltip { display: none; }
#hs-member .tooltip::before { display: none !important; }
#hs-member .tooltip.open {
  display: block !important; position: static !important; width: auto !important; margin: 8px 0 4px !important; padding: 10px 12px !important;
  background: var(--accent-soft) !important; color: var(--text) !important; border: 1px solid var(--line); border-radius: 10px;
  font-size: var(--fs-sub) !important; line-height: 1.6 !important; font-weight: 400 !important; text-align: left; letter-spacing: 0;
}

/* ==========================================================
   아이디·비밀번호 찾기 화면 (2026-10-07) — 그누보드 기본 배치(제목 → 라벨+입력 → 자동등록방지 → 꽉 찬 버튼), 색·글꼴은 사이트 테마
   ========================================================== */
#hs-member #find_info, #hs-member #pw_reset { max-width: 460px; margin: 0 auto !important; padding: 0 !important; min-height: 0 !important; background: none !important; }
#hs-member #find_info .new_win_con, #hs-member #pw_reset .new_win_con { padding: clamp(18px, 4vw, 28px) !important; margin: 0 0 16px; }
#hs-member #find_info h3.hs-find-title, #hs-member #pw_reset h3.hs-find-title { display: block !important; margin: 0 0 14px !important; text-align: left; font-size: 20px; font-weight: 800; color: var(--text) !important; }
#hs-member #find_info p, #hs-member #pw_reset p { margin: 0 0 14px; font-size: var(--fs-sub); line-height: 1.65; color: var(--muted); text-align: left; }
#hs-member #pw_reset p.hs-find-id { color: var(--text); margin-bottom: 10px; }
#hs-member .hs-find-label { display: block !important; margin: 0 0 6px !important; font-size: var(--fs-btn); font-weight: 700; color: var(--text) !important; }
#hs-member #pw_reset .hs-find-label { margin-top: 12px !important; }
#hs-member #find_info #mb_email { margin: 0 0 4px !important; }
#hs-member #pw_reset .frm_input { margin: 0 0 4px !important; }

/* 자동등록방지: 라벨 → 그림 → 입력칸 → 안내 → 버튼 둘 (세로로 나눔). 기본 CSS의 아이콘 스프라이트·글자 숨김은 해제하고 글자 버튼으로 */
#hs-member #captcha { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; margin: 16px 0 0 !important; padding: 0; position: static; }
#hs-member #captcha legend { position: static !important; display: block; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important;
  margin: 0 0 2px; padding: 0; font-size: var(--fs-sub) !important; line-height: 1.4 !important; text-indent: 0 !important; }
#hs-member #captcha legend label { display: block; margin: 0; font-size: var(--fs-sub); font-weight: 700; color: var(--text) !important; }
#hs-member #captcha #captcha_img { grid-column: 1 / -1; order: 1; justify-self: start; width: auto; max-width: 100%; height: 48px !important; border: 1px solid var(--line) !important; border-radius: 10px; background: #fff; padding: 0; margin: 0; }
#hs-member #captcha #captcha_key { grid-column: 1 / -1; order: 2; width: 100% !important; max-width: 100%; margin: 0 !important; height: auto !important; text-align: left; letter-spacing: .15em; font-weight: 700; }
#hs-member #captcha #captcha_info { grid-column: 1 / -1; order: 3; display: block; margin: 0 !important; font-size: var(--fs-sub) !important; letter-spacing: 0 !important; color: var(--muted) !important; }
#hs-member #captcha #captcha_mp3, #hs-member #captcha #captcha_reload {
  order: 4; display: inline-flex; align-items: center; justify-content: center; width: auto !important; height: auto !important; min-height: 44px; margin: 0 !important; padding: 8px 10px !important;
  border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface-2) !important; background-image: none !important; color: var(--text) !important;
  font: inherit; font-size: var(--fs-btn); font-weight: 700; text-indent: 0 !important; cursor: pointer; overflow: visible; box-sizing: border-box;
}
#hs-member #captcha #captcha_mp3:hover, #hs-member #captcha #captcha_reload:hover { border-color: var(--accent); }
#hs-member #captcha #captcha_mp3 span, #hs-member #captcha #captcha_reload span { display: none !important; }

/* 인증메일 보내기·확인: 상자 가로폭을 꽉 채우는 큰 버튼 */
#hs-member #find_info .win_btn, #hs-member #pw_reset .win_btn { display: block; margin: 16px 0 0; padding: 0; text-align: center; }
#hs-member #find_info .win_btn .btn_submit, #hs-member #pw_reset .win_btn .btn_submit { width: 100% !important; min-height: 50px; font-size: var(--fs-btn) !important; float: none !important; margin: 0 !important; }

/* 인증메일 보내기 옆 취소 버튼: 취소(테두리만) 작게 + 인증메일 보내기 넓게, 같은 높이로 나란히 */
#hs-member #find_info .win_btn { display: flex; gap: 10px; align-items: stretch; }
#hs-member #find_info .win_btn .btn_close { flex: 0 0 30%; min-height: 50px; padding: 0 12px !important; font-size: var(--fs-btn); font-weight: 700 !important; box-sizing: border-box; margin: 0 !important; }
#hs-member #find_info .win_btn .btn_submit { flex: 1 1 0; width: auto !important; min-width: 0; }

/* 체크 누르면 화면이 맨 위로 튀던 문제(2026-10-07): 진짜 체크박스(.selec_chk)는 숨겨져 position:absolute; top:0 인데,
   동의 칸을 position:static 으로 바꾼 뒤로 기준이 페이지 맨 위가 되어, 라벨을 누르면 브라우저가 그 체크박스에 포커스를 주며 맨 위로 스크롤했음.
   동의 칸 자신을 기준(relative)으로 잡아 체크박스를 그 자리에 둠 */
#hs-member .register .hs-agree .selec_chk { top: 0 !important; left: 0 !important; pointer-events: none; }

/* 입력칸을 누를 때 생기는 주황 테두리(outline 2px + 간격 1px)가 좌우만 잘리던 문제(2026-10-07):
   입력칸을 감싼 .tbl_wrap(.register_form_inner)이 overflow-x:auto 라 폭 100% 입력칸의 바깥 테두리가 좌우에서 잘렸음
   → 가입 입력 영역은 넘침을 자르지 않게 하고, 바깥 테두리가 들어갈 여백 4px을 둠 */
#hs-member .register .tbl_wrap, #hs-member .register .register_form_inner, #hs-member .register .form_01 { overflow: visible !important; }
#hs-member .register .register_form_inner { padding: 0 4px !important; }

/* 회원가입 완료 화면 (2026-10-07): 승인 대기 안내를 맨 위에, 파란 그누보드 색 → 사이트 주황 테마, 글은 모두 왼쪽 정렬·상자 안 줄바꿈, 메인으로 버튼은 다른 화면과 같은 모양 */
#hs-member #reg_result { text-align: left !important; max-width: 560px; }
#hs-member #reg_result * { text-align: left; }
#hs-member #reg_result p, #hs-member #reg_result .result_txt { margin: 0 0 14px !important; font-size: 15px; line-height: 1.7 !important; color: var(--text); overflow-wrap: anywhere; word-break: keep-all; white-space: normal; }
#hs-member #reg_result .reg_result_p { font-size: var(--fs-body); font-weight: 600; color: var(--text) !important; }
#hs-member #reg_result strong { color: var(--accent-strong); }
#hs-member #reg_result .hs-wait { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--accent); border-left-width: 5px; border-radius: 12px; background: var(--accent-soft) !important; }
#hs-member #reg_result .hs-wait-title { display: block; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--text); }
#hs-member #reg_result .hs-wait p { margin: 0 !important; color: var(--text); }
#hs-member #reg_result #result_email { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) !important; line-height: 1.9; overflow-wrap: anywhere; }
#hs-member #reg_result #result_email span { display: inline-block; min-width: 92px; width: auto; color: var(--muted); }
#hs-member #reg_result #result_email strong { color: var(--text); font-size: 1em; overflow-wrap: anywhere; }
#hs-member #reg_result .btn_confirm_reg { margin: 20px 0 0; }
#hs-member #reg_result .hs-reg-home { width: 100% !important; min-height: 50px; font-size: var(--fs-body) !important; text-align: center; }

/* 가입 완료 화면 보정: 위쪽 ".register > p" 안내띠 규칙(파란 배경·가운데·한 줄 nowrap·!important)이 #reg_result의 문단에도 걸려
   글이 카드를 넘고 파란 상자가 되던 것을 이 화면에서만 되돌림 */
#hs-member #reg_result > p, #hs-member #reg_result > p.result_txt, #hs-member #reg_result > p.reg_result_p {
  background: none !important; color: var(--text) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  font-weight: 400 !important; font-size: 15px !important; text-align: left !important; line-height: 1.7 !important; letter-spacing: 0 !important;
  white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; word-break: keep-all; margin: 0 0 14px !important;
}
#hs-member #reg_result > p.reg_result_p { font-size: var(--fs-body) !important; font-weight: 600 !important; }
#hs-member #reg_result > p::before, #hs-member #reg_result > p::after { display: none !important; content: none !important; }
html[data-theme="dark"] #hs-member #reg_result > p { background: none !important; color: var(--text) !important; }
#hs-member #reg_result > p br { display: inline; }

/* 가입 완료 화면 "메인으로" 버튼: 꽉 찬 폭 대신 작은 버튼, 가운데 정렬 */
#hs-member #reg_result .btn_confirm_reg { margin: 18px 0 0; text-align: center; }
#hs-member #reg_result .hs-reg-home { width: auto !important; min-width: 120px; min-height: 42px; padding: 8px 24px !important; font-size: 15px !important; }

/* 표 제목(caption)은 화면 낭독용 — 동의 블록에서 .fregister_terms 클래스를 뺀 뒤 그대로 보이던 것을 다시 숨김 (2026-10-07) */
#hs-member .register .hs-tblwrap caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); font-size: 0; }

/* ==========================================================
   회원 탈퇴 화면 (2026-10-07) — 안내 + 확인 체크 1개 + [탈퇴하기](붉은 버튼)·[취소]
   ========================================================== */
#hs-member #mb_confirm.hs-leave { max-width: 520px !important; text-align: left; }
#hs-member .hs-leave .hs-leave-title { margin: 0 0 14px !important; }
#hs-member .hs-leave .hs-leave-info { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-left: 5px solid var(--bad); border-radius: 12px; background: var(--surface-2) !important; }
#hs-member .hs-leave .hs-leave-lead { margin: 0 0 10px; padding: 0; border: 0; font-size: var(--fs-body); font-weight: 800; line-height: 1.6; color: var(--text); text-align: left; }
#hs-member .hs-leave .hs-leave-list { margin: 0 0 12px; padding-left: 22px; font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
#hs-member .hs-leave .hs-leave-list li { margin: 2px 0; font-size: var(--fs-body); }
#hs-member .hs-leave .hs-leave-small { margin: 0; padding: 0; border: 0; font-size: var(--fs-tag); line-height: 1.7; color: var(--muted); text-align: left; }
#hs-member .hs-leave .hs-agree { position: relative !important; display: block; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important; }
#hs-member .hs-leave .hs-agree label { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) !important; color: var(--text); font-size: var(--fs-body); line-height: 1.5; }
#hs-member .hs-leave .hs-agree label:hover { border-color: var(--accent); }
#hs-member .hs-leave .hs-agree .hs-agree-text { font-weight: 700; flex: 1 1 auto; min-width: 0; }
#hs-member .hs-leave .hs-agree input[type="checkbox"] + label .hs-box { position: relative !important; top: auto !important; right: auto !important; flex: 0 0 24px; width: 24px !important; height: 24px !important; display: block; border: 1.5px solid var(--faint) !important; border-radius: 6px !important; background: var(--surface) !important; box-sizing: border-box; }
#hs-member .hs-leave .hs-agree input[type="checkbox"]:checked + label .hs-box { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; background-image: none !important; }
#hs-member .hs-leave .hs-agree input[type="checkbox"]:checked + label .hs-box::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
#hs-member .hs-leave .hs-agree input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
#hs-member .hs-leave .hs-agree .selec_chk { top: 0 !important; left: 0 !important; pointer-events: none; }
#hs-member .hs-leave .hs-leave-pw { margin: 0 0 16px; }
#hs-member .hs-leave .hs-leave-pw .confirm_id { display: block; margin: 0 0 8px; font-size: var(--fs-sub); color: var(--muted); }
#hs-member .hs-leave .hs-leave-pw .confirm_id b { color: var(--text); }
#hs-member .hs-leave .hs-leave-pw .frm_input { width: 100%; }
#hs-member .hs-leave .hs-leave-btns { display: flex; gap: 10px; justify-content: center; margin: 0; }
#hs-member .hs-leave .hs-leave-btns .btn_close, #hs-member .hs-leave .hs-leave-btns .btn_submit { flex: 0 1 200px; width: auto !important; min-width: 0; min-height: 50px; height: 50px; padding: 0 16px !important; margin: 0 !important; box-sizing: border-box; font-size: var(--fs-btn) !important; font-weight: 800 !important; line-height: 1 !important; }
/* 붉은 버튼 (되돌릴 수 없는 동작) — 흰 글씨 5.6:1 이상 */
#hs-member .hs-btn-danger, #hs-member .hs-leave .hs-leave-btns .btn_submit.hs-btn-danger {
  background: linear-gradient(135deg, #c62828 0%, #b71c1c 55%, #a61b1b 100%) !important; color: #ffffff !important; border: 2px solid #8e1414 !important; box-shadow: 0 6px 16px rgba(166, 27, 27, .32) !important;
}
#hs-member .hs-btn-danger:disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; filter: grayscale(.2); }
#hs-member .hs-leave .hs-leave-list { list-style: disc !important; }
#hs-member .hs-leave .hs-leave-list li { list-style: disc !important; }
#hs-member .hs-leave label, #hs-member .hs-leave .hs-agree-text { letter-spacing: 0 !important; }

/* 동의 내역 화면 (2026-10-07) */
#hs-member .hs-consent-page { max-width: 560px; text-align: left; }
#hs-member .hs-consent-page .hs-note { margin: 0 0 16px !important; font-size: var(--fs-sub); line-height: 1.7; color: var(--muted); }
#hs-member .hs-consent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#hs-member .hs-consent-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) !important; }
#hs-member .hs-consent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#hs-member .hs-consent-head b { font-size: var(--fs-body); }
#hs-member .hs-consent-desc { margin: 6px 0 0; font-size: var(--fs-sub); line-height: 1.65; color: var(--text); }
#hs-member .hs-consent-meta { margin: 6px 0 0; font-size: var(--fs-tag); line-height: 1.65; color: var(--muted); }
#hs-member .hs-consent-page .hs-tag { background: var(--surface) !important; color: var(--muted); }
#hs-member .hs-consent-page .hs-tag.good { background: var(--good-soft) !important; color: var(--good-ink); }
#hs-member .hs-consent-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#hs-member .hs-consent-links .btn_close { flex: 1 1 160px; min-height: 48px; justify-content: center; }

/* 회원정보 수정 화면 맨 아래 — 회원 탈퇴 (2026-10-08): 구분선 아래 작고 연한 글씨, 버튼 모양 아님 */
#hs-member .hs-edit-leave { margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); text-align: center; }
#hs-member .hs-edit-leave p { margin: 0 0 4px; font-size: var(--fs-sub); color: var(--muted); }
#hs-member .hs-edit-leave a { display: inline-block; padding: 8px 10px; font-size: var(--fs-sub); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
#hs-member .hs-edit-leave a:hover, #hs-member .hs-edit-leave a:focus-visible { color: var(--bad-ink); }

/* 밤 모드: 주요 버튼 아래 빨간 빛 대신 그림자 (2026-10-08) */
html[data-theme="dark"] #hs-member .btn_submit, html[data-theme="dark"] #hs-member button[type="submit"], html[data-theme="dark"] #hs-member input[type="submit"],
html[data-theme="dark"] #hs-member .btn_confirm .btn_submit, html[data-theme="dark"] .new_win .btn_submit { box-shadow: 0 8px 20px rgba(0, 0, 0, .3) !important; }