@charset "utf-8";
/* ==========================================================
   홍씨스터 그누보드 테마 — 회원가입·로그인·비밀번호 찾기·게시판 공통
   색은 모두 /core/css/hs.css 의 낮/밤 변수를 사용
   (그누보드 basic 회원 스킨 위에 덮어씌우는 방식이라 !important 를 일부 사용)
   ========================================================== */
@import url("/core/css/hs.css");

/* ---------- 그누보드 필수 유틸 ---------- */
.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); }
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: space-between; flex-wrap: wrap; gap: 8px; font-size: 13.5px; 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: 16px; margin: 20px 0 10px; }

/* 카드: 로그인·회원가입 폼 상자 */
#hs-member .mbskin, #hs-member .register, #hs-member #reg_result, #hs-member .mbskin_box,
#hs-member #fregister, #hs-member #fregisterform, #hs-member .register_form_inner {
  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 .register_form_inner { box-shadow: none !important; padding: 0 !important; border: 0 !important; }
#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: 14.5px !important; }
#hs-member { font-size: 16px; }
#hs-member td, #hs-member th, #hs-member li, #hs-member label { font-size: 15.5px; }

/* 입력칸 */
#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(--bg-2) !important; color: var(--text) !important;
  font: inherit !important; font-size: 15px !important; box-shadow: none !important; box-sizing: border-box;
}
#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"], #hs-member input[type="radio"] { 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 { color: var(--label) !important; font-weight: 800 !important; font-size: 14.5px; }
#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: flex !important; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  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 { color: inherit !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(--grad) !important; color: #fff !important; font: inherit !important; font-weight: 800 !important; font-size: 15.5px !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) !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); }

/* 캡차 */
#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%; }
}