/* ============================================================
   smarthaccp.io 회원 화면(member/*.html) 스타일 — 2026-10-15.
   색·서체·.btn·.sub-head·.sub-body 는 haccp.css 의 토큰을 그대로 쓴다. 이 파일은 회원 화면 안(mb-*)만 꾸민다.
   - 입력칸은 mb-input(스킨이 그린 칸)과 text-input(엔진이 만든 추가 항목 칸)만 고른다.
     input 전체를 고르면 엔진 jqx 위젯(달력·콤보·라디오) 안의 입력칸까지 바뀌어 위젯이 깨진다.
   - 엔진이 칸에 넣는 인라인 폭·높이·float(추가 항목, 우편번호 칸)를 덮어야 해서 그 몇 곳만 !important 를 쓴다.
   - 우편번호 창(layout_pop.html)은 haccp.css 를 싣지 않는다 — .mb-zip-pop 안에서 토큰 기본값을 따로 둔다.
   ★ 이 파일을 고치면 design/layout.html · layout_pop.html 의 ?v= 를 올린다.
   ============================================================ */

/* 카드 */
.mb-card{max-width:480px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:32px}
.mb-card.is-wide{max-width:720px}
.mb-card.is-flat{margin-top:0}
@media (max-width:560px){.mb-card{padding:24px 18px}}

/* 입력 칸 묶음 */
.mb-fields{display:grid;gap:20px}
.mb-field{display:grid;gap:8px;min-width:0;align-content:start}
.mb-field > label,.mb-label{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.mb-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:560px){.mb-row2{grid-template-columns:1fr}}

.mb-input,
.mb-card input.text-input,
.mb-card textarea.text-input{
  display:block;width:100%!important;height:48px!important;float:none!important;margin:0;
  padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);
  font:inherit;font-size:16px;line-height:1.4;box-shadow:none
}
.mb-card input[type="file"].text-input{height:auto!important;padding:10px 12px}
.mb-input:focus,
.mb-card input.text-input:focus,
.mb-card textarea.text-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.mb-input[readonly],.mb-card input.text-input[readonly]{background:var(--panel);color:var(--ink-2)}
.mb-input::placeholder{color:var(--ink-3)}
.mb-textarea,.mb-card textarea.text-input{height:auto!important;min-height:120px;padding:12px 14px;resize:vertical}
.mb-textarea.is-tall{min-height:200px}

/* 엔진 jqx 위젯 — 자리만 잡아 준다(달력·콤보는 엔진 크기 그대로) */
.mb-widget{min-height:24px}

/* jqx 라디오(약관 동의·회원 구분·성별) — 선택 카드 모양으로 바꾼다.
   위젯 마크업: span.jqx-radiobutton[role=radio][aria-checked] > div > div.jqx-radiobutton-default(동그라미) + 글자 + 숨은 input(true·false).
   값·클릭 처리는 엔진 위젯이 그대로 한다 — 모양만 바꾼다. 엔진이 인라인으로 넣는 폭(70·100·120px)은 덮는다 */
.mb-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mb-choice.is-type{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.mb-card .jqx-radiobutton{
  display:flex!important;align-items:center;gap:10px;width:auto!important;min-height:52px;padding:0 16px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink-2);
  font-size:15.5px;font-weight:500;line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s,color .15s
}
.mb-card .jqx-radiobutton:hover{border-color:var(--ink-3);color:var(--ink)}
.mb-card .jqx-radiobutton:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mb-card .jqx-radiobutton > div{float:none!important;margin:0!important;flex:none;line-height:0}
.mb-card .jqx-radiobutton > div[style*="clear"]{display:none}
.mb-card .jqx-radiobutton .jqx-radiobutton-default{
  box-sizing:border-box;width:20px!important;height:20px!important;margin:0!important;float:none!important;
  border:1.5px solid #b9c1cb!important;border-radius:50%!important;background:var(--bg)!important;background-image:none!important;box-shadow:none!important
}
.mb-card .jqx-radiobutton .jqx-radiobutton-default > span{display:none!important}
.mb-card .jqx-radiobutton[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);font-weight:700}
.mb-card .jqx-radiobutton[aria-checked="true"] .jqx-radiobutton-default{border:6px solid var(--accent)!important}
@media (max-width:340px){.mb-choice{grid-template-columns:1fr}}
@media (max-width:420px){.mb-card .jqx-radiobutton{padding:0 12px;gap:8px;font-size:15px}.mb-agree-all small{display:none}}

/* jqx 체크박스(메일·문자 수신 등) — 같은 톤의 네모 표시. 값은 위젯이 넣는다 */
.mb-card .jqx-checkbox{display:inline-flex!important;align-items:center;gap:8px;width:auto!important;cursor:pointer;color:var(--ink-2)}
.mb-card .jqx-checkbox > div{float:none!important;margin:0!important;line-height:0}
.mb-card .jqx-checkbox > div[style*="clear"]{display:none}
.mb-card .jqx-checkbox .jqx-checkbox-default{box-sizing:border-box;width:20px!important;height:20px!important;margin:0!important;border:1.5px solid #b9c1cb!important;border-radius:4px!important;background:var(--bg)!important;background-image:none!important;box-shadow:none!important}
.mb-card .jqx-checkbox .jqx-checkbox-default > span{display:none!important}
.mb-card .jqx-checkbox[aria-checked="true"] .jqx-checkbox-default{border:0!important;background:var(--accent) center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.mb-card .jqx-checkbox[aria-checked="true"]{color:var(--ink)}

/* 전체 동의 */
.mb-agree-all{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 18px;margin-bottom:28px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.mb-agree-all::before{content:"";box-sizing:border-box;width:22px;height:22px;flex:none;border:1.5px solid #b9c1cb;border-radius:4px;background:var(--bg)}
.mb-agree-all[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
.mb-agree-all[aria-pressed="true"]::before{border:0;background:var(--accent) center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mb-agree-all small{margin-left:auto;font-size:13px;font-weight:500;color:var(--ink-3)}
.mb-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.mb-add .button a{color:var(--accent)}

/* 안내·메시지 */
.mb-help{font-size:14px;color:var(--ink-3);line-height:1.6}
.mb-help a,.mb-note a,.mb-check a{color:var(--accent);text-underline-offset:3px}
.mb-gap{margin-top:16px!important}
.mb-msg{font-size:14px;line-height:1.5;margin:0}
.mb-msg:empty{display:none}
.mb-msg.is-ok{color:var(--accent)}
.mb-msg.is-bad{color:var(--bad)}
.mb-note{background:var(--accent-soft);border-radius:6px;padding:14px 16px;font-size:15px;color:var(--ink-2);margin-bottom:24px!important}
.mb-note b{color:var(--ink)}
.mb-warn{background:var(--bad-soft);color:var(--bad);border-radius:6px;padding:14px 16px;font-size:15px;margin-bottom:24px!important}
.mb-foot-note{max-width:480px;margin:20px auto 0!important;text-align:center;font-size:14px;color:var(--ink-3)}
.mb-foot-note a{color:var(--ink-2);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}

/* 단추 */
.mb-actions{display:flex;gap:10px;margin-top:28px}
.mb-actions .btn{flex:1 1 0;min-width:0}
.mb-actions .btn-main.is-danger{background:var(--bad)}
.mb-actions .btn-main.is-danger:hover{background:#b8302a}

/* 로그인 아래 링크 */
.mb-links{display:flex;flex-wrap:wrap;justify-content:center;margin-top:24px;font-size:15px}
.mb-links a{padding:2px 14px;color:var(--ink-2);text-decoration:none;line-height:1.4}
.mb-links a + a{border-left:1px solid var(--line)}
.mb-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mb-out-link{margin-top:20px!important;text-align:right;font-size:14px}
.mb-out-link a{color:var(--ink-3)}

/* 간편 로그인 */
.mb-or{display:flex;align-items:center;gap:12px;margin:28px 0 12px!important;font-size:14px;color:var(--ink-3)}
.mb-or::before,.mb-or::after{content:"";flex:1;height:1px;background:var(--line)}
.mb-or.is-join{margin:20px 0 24px!important}
/* 회원가입 첫 화면 두 단계(confirm.html, haccp.js 12) — data-mb-at 이 없으면(스크립트 없음) 둘 다 보인다 */
[data-mb-steps][data-mb-at="choose"] > [data-mb-step="email"],
[data-mb-steps][data-mb-at="email"] > [data-mb-step="choose"]{display:none}
.mb-step-title{margin:0 0 6px!important;font-size:20px;font-weight:700;color:var(--ink)}
.mb-step > .mb-help{margin:0 0 20px!important}
.mb-step-email{display:flex;width:100%}
.mb-step-back{display:inline-block;margin:0 0 20px;font-size:15px;color:var(--ink-2);text-decoration:none}
.mb-step-back:hover{color:var(--accent)}
.mb-social{display:grid;gap:8px}
.mb-sns{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;text-decoration:none;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;font-weight:600;letter-spacing:0}
/* 간편 로그인 단추는 각 사의 디자인 가이드 그대로(색·심볼·문구·모서리) — 임의로 바꾸지 않는다.
   카카오: 배경 #FEE500 · 심볼 #000 · 레이블 #000 85% · 모서리 12px · 문구 '카카오 로그인'(허용 문구는 '카카오 로그인'·'로그인'뿐) · OS 기본 서체
   네이버: 배경 #03A94D · N 로고·레이블 흰색 · 로고 16px 이상 · 로고-레이블 8px · 모서리 8px(공식 PNG) */
.mb-sns.is-kakao{background:#FEE500;color:rgba(0,0,0,.85);border-radius:12px;font-weight:500}
.mb-sns.is-naver{background:#03A94D;color:#FFFFFF;border-radius:8px}
.mb-sns-sym{flex:none;display:block}
.mb-sns:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 약관 동의(가입 1단계) */
.mb-block{display:grid;gap:12px}
.mb-block + .mb-block{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.mb-card .mb-block h2{font-size:19px;letter-spacing:-.01em}
.mb-terms{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:16px 18px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.mb-terms p{margin:0 0 8px}
/* 약관 원문(편집기 HTML)의 큰 제목·가운데 정렬을 상자 크기에 맞춘다 */
.mb-terms h1,.mb-terms h2,.mb-terms h3,.mb-terms h4{font-size:15px!important;font-weight:700;color:var(--ink);text-align:left!important;margin:14px 0 6px;line-height:1.5}
.mb-terms > :first-child{margin-top:0}
.mb-terms ol,.mb-terms ul{margin:0 0 8px;padding-left:1.3em}
.mb-terms table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0}
.mb-terms th,.mb-terms td{border:1px solid var(--line);padding:6px 8px}
.mb-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mb-block-head a{font-size:14px;color:var(--ink-3);white-space:nowrap}
.mb-req{font-size:13px;font-weight:700;color:var(--accent);margin-left:6px}
.mb-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);cursor:pointer}
.mb-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}

/* 주소 — 우편번호(읽기 전용)·기본주소(읽기 전용)·상세주소(입력) */
.mb-addr{display:grid;gap:8px}
.mb-zip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mb-card input.mb-zip{width:110px!important;flex:none}
.mb-card input.mb-zip.is-sub{width:80px!important}
/* 뒷자리 칸은 옛 6자리 우편번호가 들어 있을 때만 보인다(도로명 우편번호는 5자리 한 칸). 엔진 우편번호 창이 값을 넣으면 다시 보인다 */
.mb-card input.mb-zip.is-sub:placeholder-shown{display:none}
.mb-zip-btn{min-height:48px;padding:0 18px;font-size:15px}

/* 자동입력 방지 */
.mb-captcha{display:flex;gap:10px;align-items:center}
.mb-captcha img{flex:none;height:48px;width:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.mb-captcha .mb-input{max-width:200px}

/* 아이디 찾기 결과 */
.mb-result{background:var(--accent-soft);border-radius:6px;padding:16px 18px;margin-bottom:24px}
.mb-result-title{font-size:14px;color:var(--ink-2)}
.mb-result-value{font-size:18px;font-weight:800;color:var(--ink);margin-top:4px!important;overflow-wrap:anywhere}

/* 쪽지함 */
.mb-tabs{display:flex;flex-wrap:wrap;gap:6px;max-width:720px;margin:0 auto 20px}
.mb-tabs a{padding:9px 16px;border-radius:6px;background:var(--panel);color:var(--ink-2);font-size:15px;font-weight:700;text-decoration:none;min-height:42px;display:inline-flex;align-items:center}
.mb-tabs a:hover{color:var(--ink)}
.mb-tabs a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.mb-count{font-size:15px;color:var(--ink-2);margin-bottom:10px!important}
.mb-count b{color:var(--ink)}
.mb-table-wrap{overflow-x:auto}
.mb-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.mb-table th{background:var(--panel);color:var(--ink-2);font-size:14px;font-weight:700;padding:12px;text-align:center;white-space:nowrap}
.mb-table td{padding:14px 12px;border-bottom:1px solid var(--line)}
.mb-table td.c{text-align:center}
.mb-table td a{color:var(--ink);text-decoration:none}
.mb-table td a:hover{text-decoration:underline;text-underline-offset:3px}
.mb-table .mb-del{display:inline-block;padding:4px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;color:var(--ink-2)}
.mb-table .mb-del:hover{border-color:var(--bad);color:var(--bad);text-decoration:none}
.mb-empty{color:var(--ink-3);padding:40px 12px!important}
.mb-paging{margin-top:24px;text-align:center}
.mb-dl{display:grid;grid-template-columns:120px minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.mb-dl dt,.mb-dl dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.mb-dl dt{font-size:14px;font-weight:700;color:var(--ink-3)}
.mb-msg-body{padding:24px 0 0;white-space:pre-line;line-height:1.8;overflow-wrap:anywhere}
.mb-msg-body a{color:var(--accent)}

/* 약관·방침·이용안내 본문 */
.mb-doc{max-width:860px;color:var(--ink-2);font-size:16px;line-height:1.8}
.mb-doc h1,.mb-doc h2,.mb-doc h3,.mb-doc h4{color:var(--ink);margin:32px 0 12px;line-height:1.4}
.mb-doc h2{font-size:22px}
.mb-doc h3,.mb-doc h4{font-size:18px}
.mb-doc p{margin:0 0 12px}
.mb-doc table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15px}
.mb-doc th,.mb-doc td{border:1px solid var(--line);padding:8px 12px}
.mb-doc th{background:var(--panel);text-align:center}
.mb-doc a{color:var(--accent)}

/* 우편번호 찾기 창 — layout_pop.html(haccp.css 없음) */
.mb-zip-pop{
  --bg:#ffffff;--panel:#f3f5f8;--line:#e3e7ec;--ink:#1b2129;--ink-2:#4f5966;--ink-3:#8a94a0;--accent:#2a6ef0;--accent-strong:#1d57c9;
  box-sizing:border-box;max-width:520px;margin:0 auto;padding:20px 16px 24px;background:var(--bg);color:var(--ink);
  font-family:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere
}
.mb-zip-pop *{box-sizing:border-box}
.mb-zip-pop p{margin:0}
.mb-zip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mb-zip-head h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.mb-zip-close{border:0;background:var(--panel);color:var(--ink-2);border-radius:6px;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mb-zip-tip{margin:12px 0;padding:12px 14px;background:var(--panel);border-radius:6px;color:var(--ink-2)}
.mb-zip-ex{font-size:14px;color:var(--ink-3)}
.mb-zip-search{display:flex;gap:8px}
.mb-zip-search .mb-input{flex:1;min-width:0}
.mb-zip-pop .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.mb-zip-pop .btn:hover{background:var(--accent-strong)}
.mb-zip-count{margin:14px 0 8px!important;font-size:14px;color:var(--ink-3)}
.mb-zip-count b{color:var(--ink)}
.mb-zip-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.mb-zip-list li{border-bottom:1px solid var(--line)}
.mb-zip-list li:last-child{border-bottom:0}
.mb-zip-list a{display:block;padding:10px 6px;color:var(--ink-2);text-decoration:none;cursor:pointer}
.mb-zip-list a:hover{background:var(--panel);color:var(--ink)}
.mb-zip-list .mb-empty{padding:28px 6px;text-align:center;color:var(--ink-3)}
.mb-zip-pop .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mb-zip-pop .mb-choice{display:flex;flex-wrap:wrap;gap:8px 20px}
.mb-static{margin:0!important;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.mb-apply-link{margin-top:20px!important;padding:14px 16px;border-radius:6px;background:var(--accent-soft);font-size:15px;color:var(--ink-2)}
.mb-apply-link a{color:var(--accent);font-weight:700}
/* 자동가입 방지 ALTCHA 위젯(2026-10-15, haccp.js 11) — 문의 폼 위젯과 같은 모양 */
.mb-altcha altcha-widget{display:block;max-width:100%;--altcha-max-width:320px;--altcha-border-radius:6px;--altcha-color-border:var(--line);--altcha-color-base:var(--bg);font-size:15px}