@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* ═══ 가맹점 회원 페이지(가입 · 아이디/비밀번호 찾기) — /branch/ 와 같은 톤 ═══ */
/* 색·규격은 /branch/ 포털·게시판 스킨과 같은 값을 쓴다 */
/* 값은 게시판 스킨(franchise.css)의 --fb-* 와 하나도 어긋나면 안 된다 —
가입 → 로그인 → 게시판이 한 흐름이라 선 색이나 버튼 높이가 달라지면 바로 드러난다. */
:root{
--brg-y:#ffd400; --brg-ink:#1a1a1a; --brg-sub:#5a616b; --brg-mut:#8b919b;
--brg-line:#f0f1f4; --brg-line-d:#d8dce1; --brg-req:#e02b2b;
--brg-r:10px; /* 버튼·입력 라운드 */
--brg-h-ctl:46px; /* 버튼·입력 높이 — 모바일에서 50px 로 커진다 */
}
.brg_wrap{
width:100%; background:#fff; min-height:76vh; box-sizing:border-box;
padding:calc(5.4068vw + 46px) 20px 120px;
font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif !important;
color:var(--brg-ink); letter-spacing:-.3px;
}
.brg_wrap *{ font-family:inherit !important; box-sizing:border-box; }
.brg_wrap a{ text-decoration:none; color:inherit; }
.brg_inner{ max-width:720px; margin:0 auto; }
.brg_inner.narrow{ max-width:430px; }
.brg_inner.brg_find_page{ max-width:560px; }
/* ── 타이틀 + 스텝 ── */
.brg_title{ font-size:26px; font-weight:800; text-align:center; margin:0 0 22px; letter-spacing:-1px; }
.brg_steps{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 54px; font-size:13.5px; color:#c2c6cd; font-weight:600; }
.brg_steps i{ font-style:normal; }
.brg_steps .on{ color:var(--brg-ink); font-weight:800; }
.brg_steps .arw{ color:#d8dbe0; font-size:11px; }
/* ── 아이디 / 비밀번호 찾기 탭 ── */
.brg_find_page .brg_title{ margin-bottom:28px; }
.brg_find_tabs{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px;
margin:0 0 36px; padding:5px; border:1px solid #eceff2; border-radius:14px; background:#f5f6f8;
}
.brg_wrap .brg_find_tab{
display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px; border-radius:10px;
color:#7c838d; font-size:15px; font-weight:700; letter-spacing:-.4px;
transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.brg_wrap .brg_find_tab:hover{ color:var(--brg-ink); background:rgba(255,255,255,.58); }
.brg_wrap .brg_find_tab.is_active{
color:var(--brg-ink); background:#fff; font-weight:800; box-shadow:0 3px 12px rgba(24,30,38,.08);
}
.brg_wrap .brg_find_tab:focus-visible{ outline:2px solid var(--brg-ink); outline-offset:2px; }
/* ── 섹션 ── */
.brg_sec{ margin-bottom:46px; }
.brg_sec_head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
padding-bottom:14px; margin-bottom:0; border-bottom:1px solid var(--brg-ink); }
.brg_sec_tit{ font-size:17px; font-weight:800; margin:0; letter-spacing:-.5px; }
.brg_sec_note{ font-size:13.5px; color:var(--brg-mut); }
.brg_sec_note b{ color:var(--brg-req); font-weight:700; }
/* ── 폼 행 ── */
.brg_row{ display:flex; align-items:flex-start; gap:20px; padding:20px 0; border-bottom:1px solid var(--brg-line); }
.brg_row > .brg_lb{ flex:0 0 132px; padding-top:14px; font-size:15px; font-weight:600; color:#2a2f36; }
.brg_lb .req{ color:var(--brg-req); margin-right:3px; }
.brg_row > .brg_fd{ flex:1 1 auto; width:0; min-width:0; }
.brg_input{ display:block; width:100%; height:var(--brg-h-ctl); padding:0 15px;
border:1px solid var(--brg-line-d); border-radius:var(--brg-r); background:#fff; font-size:15px; color:#222; outline:none; transition:border-color .15s; }
.brg_input::placeholder{ color:#b5bac2; }
.brg_input:focus{ border-color:var(--brg-ink); }
.brg_input[readonly]{ background:#f6f7f9; color:#6a707b; }
.brg_input.w_half{ max-width:300px; }
.brg_input.w_zip{ max-width:160px; }
/* 한 줄 배치 — .brg_input 은 기본이 width:100% 라 그대로 두면 옆 요소가 아래로 밀린다.
flex 안에서는 폭을 풀고 최소폭을 0으로 둬야 줄바꿈 없이 나란히 놓인다. */
.brg_line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brg_line + .brg_line{ margin-top:8px; }
.brg_line .brg_input{ flex:1 1 0; width:auto; min-width:0; }
.brg_line .brg_sbtn, .brg_line .brg_sel{ flex:0 0 auto; }
/* 이메일 — [아이디] @ [도메인] [선택] 을 한 줄에 */
.brg_email{ flex-wrap:nowrap; }
.brg_email .brg_sel{ width:132px; }
.brg_sbtn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:var(--brg-h-ctl); padding:0 20px;
border:1px solid var(--brg-ink); border-radius:var(--brg-r); background:#fff; color:var(--brg-ink); font-size:15px; font-weight:700; cursor:pointer;
white-space:nowrap; transition:background .15s, color .15s; }
.brg_sbtn:hover{ background:var(--brg-ink); color:#fff; }
.brg_sel{ height:var(--brg-h-ctl); padding:0 34px 0 13px; border:1px solid var(--brg-line-d); border-radius:var(--brg-r); background:#fff; font-size:15px; color:#333; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat; background-position:right 13px center; }
.brg_sel:focus{ border-color:var(--brg-ink); outline:none; }
/* 폼 행에 단독으로 놓이는 셀렉트 — 입력창 .w_half 와 같은 폭으로 맞춘다 */
.brg_sel.w_half{ width:100%; max-width:300px; }
.brg_at{ flex:0 0 auto; color:#9aa0a8; font-size:15px; }
/* 체크박스 */
.brg_chk{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--brg-sub); cursor:pointer; user-select:none; }
.brg_chk input{ width:16px; height:16px; margin:0; accent-color:var(--brg-ink); cursor:pointer; }
.brg_chks{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; min-height:50px; }
.brg_agree{ margin-top:10px; }
.brg_help{ display:block; margin-top:7px; font-size:13.5px; color:#9aa0a8; }
.brg_msg{ display:block; margin-top:7px; font-size:13.5px; min-height:16px; }
.brg_msg_ok{ color:#0f9d58; }
.brg_msg_err{ color:var(--brg-req); }
/* ── 약관 ── */
.brg_terms{ height:220px; overflow-y:auto; padding:20px 22px; margin-top:18px; border:1px solid var(--brg-line); background:#fafbfc;
font-size:14px; line-height:1.9; color:var(--brg-sub); white-space:pre-wrap; word-break:break-all; }
.brg_terms.brg_terms_sm{ height:auto; max-height:220px; }
.brg_terms_agree{ display:flex; justify-content:flex-end; padding:14px 2px 0; }
/* ── 자동등록방지(kcaptcha) — 하나의 보안 입력 카드로 재배치 ── */
.brg_captcha_row{ align-items:flex-start; }
.brg_captcha_box{
padding:12px; border:1px solid #e7eaf0; border-radius:12px; background:#f8f9fb;
transition:border-color .18s ease,box-shadow .18s ease;
}
.brg_captcha_box:focus-within{ border-color:#b8bec8; box-shadow:0 0 0 3px rgba(26,26,26,.04); }
.brg_wrap #captcha{
display:grid; grid-template-columns:112px minmax(96px,1fr) 42px 42px;
grid-template-areas:"image input audio reload" "info info info info";
align-items:center; gap:9px 8px; margin:0; padding:0; border:0;
}
.brg_wrap #captcha legend{ position:absolute; width:0; height:0; overflow:hidden; padding:0; margin:0; font-size:0; line-height:0; }
.brg_wrap #captcha #captcha_img{ grid-area:image; display:block; width:112px; height:var(--brg-h-ctl); border:1px solid var(--brg-line-d); border-radius:8px; background:#fff; vertical-align:middle; }
.brg_wrap #captcha #captcha_key{ grid-area:input; width:100%; min-width:0; height:var(--brg-h-ctl); padding:0 14px; border:1px solid var(--brg-line-d); border-radius:8px;
margin:0 !important; background:#fff; background-image:none !important; font-size:15px; letter-spacing:2px; color:#222; outline:none; transition:border-color .15s; }
.brg_wrap #captcha #captcha_key::placeholder{ color:#a8aeb7; letter-spacing:-.3px; }
.brg_wrap #captcha #captcha_key:focus{ border-color:var(--brg-ink); box-shadow:0 0 0 2px rgba(26,26,26,.05); }
.brg_wrap #captcha #captcha_mp3,
.brg_wrap #captcha #captcha_reload{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:var(--brg-h-ctl); padding:0;
border:1px solid var(--brg-line-d); border-radius:8px; background:#fff !important; background-image:none !important; font-size:0; color:transparent; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; }
.brg_wrap #captcha #captcha_mp3:hover,
.brg_wrap #captcha #captcha_reload:hover{ border-color:#aeb4bd; background:#fff !important; transform:translateY(-1px); }
.brg_wrap #captcha button:focus-visible{ outline:2px solid var(--brg-ink); outline-offset:2px; }
.brg_wrap #captcha button span{ display:block; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.brg_wrap #captcha_mp3{ grid-area:audio; }
.brg_wrap #captcha #captcha_mp3 span{ background-image:url('data:image/svg+xml;utf8,') !important; }
.brg_wrap #captcha_reload{ grid-area:reload; }
.brg_wrap #captcha #captcha_reload span{ background-image:url('data:image/svg+xml;utf8,') !important; }
.brg_wrap #captcha #captcha_info{ grid-area:info; width:auto; margin:0; padding-left:2px; font-size:12.5px; line-height:1.45; color:#9299a4; }
.brg_wrap #captcha_audio{ grid-column:1 / -1; width:100%; height:38px; }
/* ── 버튼 ── */
.brg_btns{ display:flex; gap:10px; margin-top:44px; }
.brg_wrap .brg_btn{ display:flex; align-items:center; justify-content:center; flex:1 1 0; height:var(--brg-h-ctl);
border:1px solid var(--brg-line-d); border-radius:var(--brg-r); background:#fff; color:var(--brg-sub);
font-size:15px; font-weight:700; letter-spacing:-.4px; cursor:pointer; transition:background .15s, color .15s; }
.brg_btn:hover{ color:var(--brg-ink); border-color:var(--brg-ink); }
.brg_wrap .brg_btn_solid{ background:var(--brg-ink); color:#fff; border-color:var(--brg-ink); }
.brg_btn_solid:hover{ background:var(--brg-y); color:#191919; border-color:var(--brg-y); }
/* ── 완료 / 결과 ── */
.brg_done{ text-align:center; padding:30px 0 10px; }
.brg_done_ico{ font-size:42px; line-height:1; margin-bottom:18px; }
.brg_done_tit{ font-size:24px; font-weight:800; margin:0 0 16px; letter-spacing:-.8px; }
.brg_done_msg{ font-size:15.5px; color:#5a616b; line-height:1.85; margin:0 0 10px; }
.brg_done_msg strong{ color:#111; font-weight:800; }
.brg_done_sub{ font-size:13.5px; color:var(--brg-mut); margin:0; }
.brg_done_box{ margin:26px auto 0; max-width:380px; padding:20px; background:#fafbfc; border:1px solid var(--brg-line); font-size:15px; }
.brg_done_box b{ font-weight:800; letter-spacing:.3px; }
/* 한 사람이 여러 지점 계정을 가진 경우 아이디를 여러 개 나열한다 */
.brg_done_item + .brg_done_item{ margin-top:14px; padding-top:14px; border-top:1px solid var(--brg-line); }
/* 손가락 크기로 커지는 시점은 /branch/ 포털·게시판 스킨과 같은 860px 로 맞춘다 —
여기만 599px 이면 태블릿에서 로그인 화면 입력창(50px)과 가입 화면 입력창(46px)이 어긋난다 */
@media (max-width:860px){ :root{ --brg-h-ctl:50px; } }
@media (max-width:599px){
.brg_wrap{ padding:calc(15vw + 28px) 16px 84px; }
.brg_title{ font-size:22px; }
.brg_find_page .brg_title{ margin-bottom:22px; }
.brg_find_tabs{ margin-bottom:28px; }
.brg_wrap .brg_find_tab{ min-height:44px; padding:0 10px; font-size:14px; }
.brg_steps{ gap:9px; margin-bottom:34px; font-size:13.5px; }
.brg_sec{ margin-bottom:34px; }
.brg_row{ flex-direction:column; gap:8px; padding:16px 0; }
.brg_row > .brg_lb{ flex:none; padding-top:0; font-size:14px; }
.brg_row > .brg_fd{ width:100%; }
.brg_input.w_half, .brg_input.w_zip, .brg_sel.w_half{ max-width:none; }
.brg_chks{ min-height:0; gap:14px 18px; }
/* 세로로 쌓이면 flex 주축이 높이가 된다 — .brg_btn 의 flex:1 1 0 이 flex-basis:0 으로 걸려
height:50px 를 눌러버리고 버튼이 글자 높이(20px)로 납작해진다. 기본값으로 되돌린다. */
.brg_btns{ flex-direction:column-reverse; margin-top:32px; }
.brg_wrap .brg_btn{ flex:0 0 auto; }
/* 좁은 화면에선 [아이디]@[도메인] 한 줄, 선택 셀렉트는 아랫줄 전체폭 */
.brg_email{ flex-wrap:wrap; }
.brg_email .brg_input{ flex:1 1 110px; }
.brg_email .brg_sel{ width:100%; }
}
@media (max-width:420px){
.brg_captcha_box{ padding:11px; }
.brg_wrap #captcha{
grid-template-columns:minmax(0,1fr) 42px 42px;
grid-template-areas:"image audio reload" "input input input" "info info info";
}
.brg_wrap #captcha #captcha_img{ width:112px; max-width:100%; }
}