/* ─────────────────────────────────────────────────────────────
문성전자 — 회원 페이지 브랜드 색 (로그인 · 회원가입 약관 · 정보 입력 · 가입 완료) — ms-mb
케이디엘/솔루션 마크업 그대로, CSS 만 덮어씀. 스킨 8개(PC·모바일)에서 링크. 2026-09-09
솔루션 기본: 빨간 .wset(#de3833) / 모바일 보라 .wset(#441D7C) → 네이비, 사각 입력칸 → 둥근 입력칸
───────────────────────────────────────────────────────────── */
:root{--mb-navy:#0f1c6e;--mb-navy2:#142a8f;--mb-blue:#1a6ad0;--mb-ink:#1b2440;--mb-mute:#5d6680;--mb-line:#e6e9f2;--mb-g50:#f6f8fc;--mb-soft:#eaf3ff;--mb-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif}
/* ── 페이지 제목 (PC h2.stit / h2.pg_tit 에 .ms-mbtit 추가) ── */
h2.ms-mbtit{font-family:'Samsung One Korean','Malgun Gothic',sans-serif;text-align:center;margin:56px 0 36px;padding:0;position:relative;line-height:1.2;letter-spacing:-.01em}
h2.ms-mbtit small{display:block;font-family:var(--mb-en);font-size:12px;letter-spacing:.14em;color:var(--mb-blue);margin-bottom:10px}
h2.ms-mbtit small:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mb-blue);margin:0 7px 1px 0;vertical-align:middle}
h2.ms-mbtit,h2.ms-mbtit span{font-size:28px;font-weight:700;color:var(--mb-navy);letter-spacing:-.01em}
h2.ms-mbtit span{display:block}
h2.ms-mbtit:after{content:'';display:block;width:34px;height:4px;border-radius:2px;background:var(--mb-blue);margin:14px auto 0}
h2.ms-mbtit .pg_nav{font-size:12px;color:var(--mb-mute);font-weight:400;position:absolute;top:-30px;right:0;letter-spacing:0}
h2.ms-mbtit .pg_nav i{color:#c9cfdd;margin:0 6px 2px}
/* ── 공통 입력칸 · 버튼 (회원 페이지 컨테이너 안에서만) ── */
#login_fld .frm_input,#fregisterform .frm_input,.mb_login input[type=text],.mb_login input[type=password],.mb_login input[type=email]{height:48px !important;line-height:48px;padding:0 16px;font-size:14px;color:var(--mb-ink);border:1.5px solid var(--mb-line);border-radius:14px;background:#fff;box-sizing:border-box;text-indent:0;transition:border-color .15s,box-shadow .15s}
#login_fld .frm_input:focus,#fregisterform .frm_input:focus,.mb_login input:focus{outline:0;border-color:var(--mb-blue);box-shadow:0 0 0 3px rgba(31,124,240,.15)}
#login_fld .frm_input::placeholder,.mb_login input::placeholder{color:#a3aabf}
#login_fld .wset,#fregister .wset,#fregisterform .wset,.mb_login .wset{background:var(--mb-navy) !important;border:1.5px solid var(--mb-navy) !important;color:#fff !important;border-radius:9999px;font-weight:700;transition:background .15s}
#login_fld .wset:hover,#fregister .wset:hover,#fregisterform .wset:hover,.mb_login .wset:hover{background:var(--mb-navy2) !important;border-color:var(--mb-navy2) !important}
#fregister .bx-white,#fregisterform .bx-white,.mb_login .bx-white,#reg_result .btn_medium,#reg_result .grey{background:#fff !important;border:1.5px solid var(--mb-line) !important;color:var(--mb-navy) !important;border-radius:9999px;font-weight:700}
#fregister .bx-white:hover,#fregisterform .bx-white:hover,.mb_login .bx-white:hover,#reg_result .btn_medium:hover{border-color:var(--mb-navy) !important}
#login_fld input[type=checkbox],#fregister input[type=checkbox],#fregisterform input[type=checkbox]{width:18px;height:18px;accent-color:var(--mb-blue);vertical-align:middle;margin:0 6px 2px 0;cursor:pointer}
/* 모바일 스프라이트 체크박스(.css-checkbox + .css-label) → 파란 체크 */
.mb_login label.css-label,#fregister label.css-label{background:none !important;padding-left:26px !important;position:relative;font-size:12px;color:var(--mb-ink);line-height:20px;height:20px}
.mb_login label.css-label:before,#fregister label.css-label:before{content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:5px;border:1.5px solid #c9cfdd;background:#fff;box-sizing:border-box}
.mb_login input.css-checkbox:checked + label.css-label:before,#fregister input.css-checkbox:checked + label.css-label:before{border-color:var(--mb-blue);background:var(--mb-blue) url("data:image/svg+xml;utf8,") center/12px no-repeat}
/* ── PC 로그인 ── */
#login_fld.login_wrap{width:440px;padding:36px 36px 30px;margin:0 auto 90px;border:1px solid var(--mb-line);border-radius:24px;box-shadow:0 18px 48px rgba(15,28,110,.07);overflow:visible;position:relative}
#login_fld.login_wrap:before{content:'';position:absolute;left:50%;top:-1px;width:64px;height:4px;margin-left:-32px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--mb-navy),var(--mb-blue))}
#login_fld .log_inner dd{margin-bottom:10px}
#login_fld .log_inner input[type=text],#login_fld .log_inner input[type=password]{padding:0 18px;height:52px !important;line-height:52px}
#login_fld .log_inner .log_op{display:flex;align-items:center;font-size:12px;color:var(--mb-mute);margin:4px 0 18px;line-height:20px}
#login_fld .log_inner .log_op label{cursor:pointer}
#login_fld .log_inner .btn_large.wset{height:52px;padding:0;line-height:50px;font-size:15px}
#login_fld .log_inner .log_bt{margin-top:22px}
#login_fld .log_inner .log_bt a{font-size:13px;font-weight:600;color:var(--mb-ink)}
#login_fld .log_inner .log_bt a:hover{color:var(--mb-blue)}
#login_fld .log_inner .log_bt span:before{background:#d5dae6}
#login_fld .sns_btn{margin-top:34px}
#login_fld .sns_btn .grtit{border-bottom-color:var(--mb-line)}
#login_fld .sns_btn .grtit span{font-size:12px;color:var(--mb-mute)}
/* ── PC 회원가입 약관 ── */
#fregister{max-width:760px;margin:0 auto 90px}
#fregister .sns_box{border:1px solid var(--mb-line);border-radius:18px;overflow:hidden}
#fregister .sns_box h3{background:var(--mb-g50);border-bottom-color:var(--mb-line);font-size:14px;color:var(--mb-navy)}
#fregister section{padding:0 !important;margin-top:18px;border:1px solid var(--mb-line);border-radius:20px;overflow:hidden;background:#fff}
#fregister section:first-child{margin-top:0}
#fregister section h2{margin:0;padding:16px 22px;font-size:15px;font-weight:700;color:var(--mb-navy);background:var(--mb-g50);border-bottom:1px solid var(--mb-line);display:flex;align-items:center;gap:8px}
#fregister section h2:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mb-blue)}
#fregister textarea{width:100%;height:190px;padding:16px 22px;border:0;border-bottom:1px solid var(--mb-line);color:var(--mb-mute);font-size:12px;line-height:1.6;background:#fff;box-sizing:border-box;resize:none;outline:0}
#fregister .fregister_agree{padding:14px 22px;font-size:13px;color:var(--mb-ink);display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
#fregister section .fregister_agree + .fregister_agree{border-top:1px dotted #c9cfdd;background:var(--mb-soft)}
#fregister .fregister_agree label{margin:0;cursor:pointer}
#fregister .fregister_agree label.bold{font-weight:700;color:var(--mb-navy)}
#fregister .fregister_agree label>span{font-weight:400;font-size:12px;color:var(--mb-mute) !important;margin-left:4px}
#fregister .btn_confirm{margin-top:28px;display:flex;justify-content:center;gap:8px}
#fregister .btn_confirm .btn_large{height:52px;line-height:50px;padding:0 44px;font-size:15px;box-sizing:border-box;cursor:pointer}
/* ── PC 회원 정보 입력 ── */
#fregisterform{max-width:860px;margin:0 auto 90px}
#fregisterform h3{margin:0 0 12px;padding:0 0 12px;font-size:16px;font-weight:700;color:var(--mb-navy);border-bottom:2px solid var(--mb-navy);display:flex;align-items:center;gap:8px}
#fregisterform h3:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mb-blue)}
#fregisterform h3.mart30{margin-top:36px !important}
#fregisterform .tbl_frm01{border:0}
#fregisterform .tbl_frm01 table{border-collapse:separate;border-spacing:0}
#fregisterform .tbl_frm01 th{padding:12px 0;font-size:13px;font-weight:700;color:var(--mb-ink);text-align:left;vertical-align:top;line-height:44px;border:0;border-bottom:1px dotted #d5dae6;background:none}
#fregisterform .tbl_frm01 td{padding:12px 0 12px 8px;border:0;border-bottom:1px dotted #d5dae6;font-size:13px;color:var(--mb-ink);line-height:1.6;background:none}
#fregisterform .tbl_frm01 .frm_input{height:44px !important;line-height:44px;min-width:260px;margin:2px 0}
#fregisterform .tbl_frm01 .frm_input.frm_address{width:100%;max-width:520px}
#fregisterform .tbl_frm01 td>label{font-size:12px;color:var(--mb-mute);margin-left:6px}
#fregisterform .frm_info{display:block;font-size:12px;color:var(--mb-mute);margin-top:4px}
#fregisterform #msg_mb_id{font-size:12px;margin-left:6px}
#fregisterform .btn_small,#fregisterform .btn_lsmall{height:36px;line-height:34px;padding:0 14px;border-radius:9999px;border:1.5px solid var(--mb-line) !important;background:#fff !important;color:var(--mb-navy) !important;font-size:12px;font-weight:700;box-sizing:border-box;vertical-align:middle;cursor:pointer} /* 모바일 솔루션 .btn_lsmall 흰 글자 !important 덮어씀 */
#fregisterform .btn_small:hover,#fregisterform .btn_lsmall:hover{border-color:var(--mb-navy)}
#fregisterform #msg_certify{border-radius:12px;border-color:#cfe3ff;background:var(--mb-soft);color:var(--mb-navy)}
#fregisterform .btn_confirm{margin-top:32px;display:flex;justify-content:center;gap:8px}
#fregisterform .btn_confirm .btn_large{height:52px;line-height:50px;padding:0 44px;font-size:15px;box-sizing:border-box;cursor:pointer}
/* ── PC 가입 완료 ── */
#reg_result{max-width:640px;margin:0 auto 90px}
#reg_result .bx-danger{margin:0 !important;padding:40px 36px 32px !important;border:1px solid var(--mb-line) !important;border-radius:24px;background:#fff !important;color:var(--mb-ink) !important;text-align:center;line-height:1.7 !important;box-shadow:0 18px 48px rgba(15,28,110,.07)}
#reg_result .bx-danger:before{content:'';display:block;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--mb-soft) url("data:image/svg+xml;utf8,") center/30px no-repeat}
#reg_result .bx-danger h4{font-size:20px !important;font-weight:700;color:var(--mb-navy);margin-bottom:18px}
#reg_result .bx-danger h4 strong{color:var(--mb-blue)}
#reg_result #result_email{margin:0 0 20px;padding:14px 20px;border:1px solid var(--mb-line);border-radius:16px;background:var(--mb-g50);text-align:left;font-size:13px}
#reg_result #result_email span{width:110px;color:var(--mb-mute)}
#reg_result #result_email strong{color:var(--mb-navy);font-family:var(--mb-en)}
#reg_result .bx-danger p{font-size:13px;color:var(--mb-mute);margin:0}
#reg_result .btn_confirm{margin:24px 0 0;text-align:center}
#reg_result .btn_confirm .btn_medium{height:48px;line-height:46px;padding:0 36px;box-sizing:border-box;display:inline-block;background:var(--mb-navy) !important;border-color:var(--mb-navy) !important;color:#fff !important}
/* ── 모바일 로그인 ── */
.mb_login{width:auto !important;margin:16px 12px 36px !important;padding:24px 18px 22px;border:1px solid var(--mb-line);border-radius:20px;box-shadow:0 14px 36px rgba(15,28,110,.06);position:relative;overflow:hidden}
.mb_login:before{content:'';position:absolute;left:50%;top:0;width:56px;height:4px;margin-left:-28px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--mb-navy),var(--mb-blue))}
.mb_login .login_fs{margin-top:6px}
.mb_login .login_fs p.mart15{margin-top:0}
.mb_login .login_fs p.mart3{margin-top:8px}
.mb_login .login_fs p.tal{margin:12px 0 4px;display:flex;align-items:center}
.mb_login .btn_medium{height:48px;line-height:46px;padding:0;font-size:14px;box-sizing:border-box;border-radius:9999px}
.mb_login .btn_medium.wfull{width:100%;display:block}
.mb_login .login_fs p.mart7{margin-top:12px;text-align:center}
.mb_login .login_fs p.mart7 a{font-size:12px;font-weight:600;color:var(--mb-mute)}
.mb_login .sns_btn{border-top-color:var(--mb-line)}
.mb_login .mb_login_od{border-top:1px dotted #c9cfdd}
.mb_login .mb_login_od h3{font-size:14px;color:var(--mb-navy);font-weight:700}
.mb_login .mb_login_od .btn_medium{border:1.5px solid var(--mb-navy) !important;background:var(--mb-navy) !important;color:#fff !important}
.mb_login .mb_login_od .btn_medium.red{background:var(--mb-blue) !important;border-color:var(--mb-blue) !important;color:#fff !important}
/* ── 모바일 약관 ── */
#fregister .s_cont{margin:12px 12px 36px}
#fregister .s_cont .sns_box,#fregister .s_cont .fregister_agree{border:1px solid var(--mb-line);border-radius:16px;overflow:hidden;margin-top:10px}
#fregister .s_cont .sns_box .fr_tit,#fregister .s_cont .fregister_agree .fr_tit{background:var(--mb-g50);border-bottom-color:var(--mb-line);font-size:13px;font-weight:700;color:var(--mb-navy);padding:10px 12px;padding-right:80px}
#fregister .s_cont .fr_tit .btn_small{top:8px;right:10px;height:26px;line-height:24px;padding:0 10px;border-radius:9999px;border:1.5px solid var(--mb-line);background:#fff;color:var(--mb-navy);font-size:11px;font-weight:700;box-sizing:border-box}
#fregister .s_cont .agree_txt{height:110px;margin:0;padding:12px;font-size:12px;color:var(--mb-mute);line-height:1.6}
#fregister .s_cont .agree_chk{border-top:1px dotted #c9cfdd;background:#fff;padding:10px 12px}
#fregister .fregister_agree2{margin:12px 0 0;padding:14px 12px;border-radius:14px;background:var(--mb-soft);border:1px solid #cfe3ff}
#fregister .fregister_agree2 label{font-size:13px !important;font-weight:700;color:var(--mb-navy)}
#fregister .s_cont .btn_confirm{margin-top:20px;display:flex;gap:8px}
#fregister .s_cont .btn_confirm .btn_medium{flex:1;height:48px;line-height:46px;padding:0;font-size:14px;box-sizing:border-box;text-align:center;border-radius:9999px}
/* ── 모바일 정보 입력 ── */
#fregisterform.m,#fregisterform.ms-mbform{margin:0 12px 36px}
@media (max-width:640px){
#fregisterform{margin:0 12px 36px}
#fregisterform h3{font-size:14px;margin-top:20px}
#fregisterform .tbl_frm01 th{line-height:1.4;padding:10px 0;font-size:12px;width:90px}
#fregisterform .tbl_frm01 td{padding:10px 0 10px 6px;font-size:12px}
#fregisterform .tbl_frm01 .frm_input{min-width:0;width:100% !important;height:42px !important;line-height:42px}
#fregisterform .tbl_frm01 td>label{display:block;margin:2px 0 4px}
#fregisterform .btn_confirm .btn_medium{flex:1;height:48px;line-height:46px;padding:0;font-size:14px;box-sizing:border-box;text-align:center;border-radius:9999px}
#reg_result{padding:0 12px 36px !important}
#reg_result>p:first-child{margin:14px 0 0;padding:28px 18px 0;text-align:center;font-size:16px;color:var(--mb-navy);font-weight:700;line-height:1.4}
#reg_result>p:first-child:before{content:'';display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--mb-soft) url("data:image/svg+xml;utf8,") center/26px no-repeat}
#reg_result>p:first-child strong{color:var(--mb-blue)}
#reg_result #result_email{margin:16px 0;padding:12px 14px;border:1px solid var(--mb-line);border-radius:14px;background:var(--mb-g50);font-size:12px;line-height:1.9}
#reg_result #result_email span{width:28%;color:var(--mb-mute)}
#reg_result #result_email strong{color:var(--mb-navy) !important;font-size:1em !important;font-family:var(--mb-en)}
#reg_result p{font-size:12px;color:var(--mb-mute)}
#reg_result .homebtn a{height:48px;line-height:46px;padding:0;box-sizing:border-box;display:block;border-radius:9999px;background:var(--mb-navy) !important;border:1.5px solid var(--mb-navy) !important;color:#fff !important;font-size:14px;font-weight:700}
}