/* 가입 절차 — 새 brm 테마(외국인 직원 M1 · 사장님 2026-09-29 시안 승인 · ux-design/foreign-worker/fw.css 의 조각).
   ★색·글꼴·칸·단추 규격을 새로 정하지 않는다 — 포털 토큰(--paper · --line · --ink · --muted · --hr-field-line · --hr-danger-text)과
     포털 규칙(.membership-card · .membership-button · .hr-ls-seg · .hr-sheet · .hr-self-page [data-hr=contact-form])을 그대로 쓴다.
   ★최신 테마 규칙: 초점 2px 먹색 · 빨강은 오류 글자와 오류 칸 테두리에만 · 칸 높이 44 · 네이티브 select 없음.
   ★옛 가입 카드 CSS(onboarding-pane.css)는 이 셸에서 더는 링크하지 않는다. */
/* ★★가입 중에는 업무 메뉴가 «부재»다(docs/120 §0-1) — 바닥의 「설정」 하나를 감춘다(옛 파일의 규칙을 옮김) */
html[data-onboarding="1"] .side-footer .settings-link{display:none}

#onboardingView .fw-onb{max-width:760px}
#onboardingView .fw-onb-head{margin:0 0 12px}
#onboardingView .fw-onb-head[hidden]{display:none}
#onboardingView .fw-onb-head .card-title{margin:0;font-size:22px;letter-spacing:-.03em}
#onboardingView .form-msg{margin:10px 0 0;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
#onboardingView .form-msg.sub{color:var(--muted,#77706c);font-size:13px}
#onboardingView .form-msg:empty{margin:0}
#onboardingView .hint{display:block;margin-top:6px;color:var(--muted,#77706c);font-size:12px;line-height:1.6}
#onboardingView .hint:empty{display:none}
#onboardingView .membership-card[hidden],#onboardingView [hidden]{display:none!important}
#onboardingView .fw-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
#onboardingView .hr-self-page .membership-card .fw-card-head h2{margin:0}
#onboardingView .chip{display:inline-block;margin-right:8px;padding:4px 9px;border-radius:999px;background:var(--bg,#f4f0ea);color:var(--muted,#77706c);font-size:11px;font-weight:700}
#onboardingView .fw-ver{margin:0 0 8px;font-size:13px}
/* 언어 — 글자 크기 한 칸(「한국어 ▾」) · 누르면 작은 목록 */
.fw-langctl{position:relative;flex:none}
.fw-lang-btn{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 2px;border:0;background:none;color:var(--muted,#77706c);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fw-lang-btn:hover{color:var(--ink,#252122)}
.fw-lang-menu{position:absolute;z-index:20;right:0;top:calc(100% + 4px);min-width:140px;margin:0;padding:6px;list-style:none;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdf9);box-shadow:0 12px 32px rgba(35,28,25,.14)}
.fw-lang-menu[hidden]{display:none}
.fw-lang-menu button{display:block;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--ink,#252122);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.fw-lang-menu button[aria-selected=true]{font-weight:700;background:var(--bg,#f4f0ea)}
.fw-ko{display:block;margin-top:1px;color:var(--muted,#77706c);font-size:11.5px;font-weight:500}
.fw-ko[hidden]{display:none}
.fw-text-btn{padding:6px 0;border:0;background:none;color:var(--ink,#252122);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ★안쪽 스크롤 상자 0(사장님 2026-09-29 「동의 영역에 스크롤이 3개」) — 전문을 제자리에 다 펼친다. 스크롤은 페이지 하나 */
#onboardingView .fw-doc{margin:0 0 14px;padding:0;border:0;background:none;font:inherit;font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
#onboardingView .fw-check{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;font-weight:600;cursor:pointer}
#onboardingView .fw-check input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--ink,#252122)}
/* 폼 — 제품 contact-form 격자 위 */
#onboardingView .fw-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0;min-width:0;margin:0;padding:0;border:0}
#onboardingView .fw-fields[disabled]{opacity:.55}
#onboardingView .fw-after-kind,#onboardingView .fw-field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0;min-width:0}
#onboardingView .fw-label,#onboardingView [data-hr="contact-form"] label{margin-top:10px;font-size:13px;font-weight:500}
#onboardingView .fw-seg2{display:inline-grid;justify-self:start;grid-template-columns:repeat(2,minmax(96px,auto));margin-top:2px}
#onboardingView .fw-seg2 label{grid-column:auto;margin-top:0;font-size:13px;font-weight:700}
#onboardingView .fw-rrn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr);align-items:center;gap:8px}
#onboardingView .rrn-dash{color:var(--muted,#77706c)}
#onboardingView .fw-addr{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px}
#onboardingView .fw-addr:has(.addr-zip[hidden]){grid-template-columns:minmax(0,1fr) auto}
@media(max-width:620px){
  /* ★좁은 폭 — 우편번호 · 도로명이 한 줄, 「주소 찾기」는 아래 한 줄(도로명이 잘리지 않게) */
  #onboardingView .fw-addr{grid-template-columns:96px minmax(0,1fr)}
  #onboardingView .fw-addr:has(.addr-zip[hidden]){grid-template-columns:minmax(0,1fr)}
  #onboardingView .fw-addr #hr-address-open{grid-column:1/-1}
}
#onboardingView .addr-sublabel{display:block;margin:12px 0 6px}
#onboardingView .fw-opt{color:var(--muted,#77706c);font-weight:500}
#onboardingView .hr-error{margin:2px 0 0}
#onboardingView .fw-err .fw-fix{display:flex;margin-top:8px;min-height:40px;color:var(--ink,#252122)}
#onboardingView .fw-foreign{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0;margin-top:8px;padding:6px 16px 16px;border:1px solid var(--line,#e4dcd4);border-radius:14px;background:var(--paper-soft,#faf6f1)}
#onboardingView .membership-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#onboardingView .membership-controls .membership-button{min-height:44px}
/* 칸 하나의 자 — 높이 44 · 테두리 --hr-field-line · 둥근 10 · 글자 14 */
#onboardingView input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.fw-date-native),#hr-address-backdrop input,.fw-picker input,.fw-pick{box-sizing:border-box;width:100%;height:44px;min-height:44px;padding:0 12px;border:1px solid var(--hr-field-line,#8c827b);border-radius:10px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit;font-size:14px;line-height:normal}
#onboardingView input[readonly]{background:var(--paper-soft,#faf6f1);cursor:pointer}
#onboardingView input[aria-invalid=true],#onboardingView .fw-pick[aria-invalid=true],.fw-picker input[aria-invalid=true]{border-color:var(--hr-danger-text,#db2535)}
.fw-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}
.fw-pick .fw-placeholder{color:var(--muted,#77706c)}
.fw-pick>span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fw-pick>span[aria-hidden]{flex:none;color:var(--muted,#77706c);font-size:18px;line-height:1}
/* 날짜 칸 — 글 칸 + 칸 안 달력 단추(네이티브 date 는 숨김 · 달력만 빌림) */
.fw-date{position:relative}
#onboardingView .fw-date input[data-date]{padding-right:48px}
.fw-date-btn{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0 10px 10px 0;background:none;color:var(--muted,#77706c);cursor:pointer}
.fw-date-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.fw-date-native{position:absolute;right:0;bottom:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
/* 고르기 창(제품 .hr-sheet) 안 */
.fw-pick-backdrop[hidden]{display:none}
.fw-pick-backdrop{z-index:85}
.fw-picker .hr-sheet-body{display:grid;align-content:start;gap:8px}
.fw-list{display:grid;gap:0;margin:4px 0 8px;padding:0;list-style:none}
.fw-row{display:flex;align-items:baseline;gap:12px;width:100%;min-height:48px;padding:10px 4px;border:0;border-bottom:1px solid var(--line-soft,#ebe4dc);background:none;color:var(--ink,#252122);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.fw-row b{flex:none;min-width:44px;font-size:15px;letter-spacing:.02em}
.fw-row span{flex:1;min-width:0;overflow-wrap:anywhere}
.fw-row small{flex:none;color:var(--muted,#77706c);font-size:12px}
.fw-row:hover,.fw-row[aria-pressed=true]{background:var(--bg,#f4f0ea)}
.fw-row[aria-pressed=true]{font-weight:700}
.fw-cont{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.fw-cont .membership-button[aria-pressed=true]{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.fw-other-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.fw-other-row .membership-button{height:44px;min-height:44px}
.fw-picker .hr-sheet-section{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--muted,#77706c)}
.fw-picker .fw-text-btn{justify-self:start}
/* 주소 찾기 — 같은 문서 안의 덮개(docs/128) · 새 테마 옷 */
#hr-address-backdrop{position:fixed;z-index:80;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(28,22,22,.32)}
#hr-address-backdrop.on{display:flex}
#hr-address-backdrop .modal{box-sizing:border-box;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid var(--line,#e4dcd4);border-radius:16px;background:var(--paper,#fffdf9);color:var(--ink,#252122);box-shadow:0 18px 60px #0002}
#hr-address-backdrop .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#hr-address-backdrop .modal-head h2{margin:0;font-size:18px}
#hr-address-backdrop .field{display:grid;gap:6px;margin-top:14px}
#hr-address-backdrop .field>label{font-size:13px;font-weight:500}
#hr-address-backdrop .fw-addr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
#hr-address-backdrop .membership-button{min-height:44px}
#hr-address-backdrop .membership-button:disabled{opacity:.55;cursor:wait}
#hr-address-backdrop .hint{display:block;margin:12px 0 0;color:var(--muted,#77706c);font-size:12px;line-height:1.6}
#hr-address-backdrop .addr-list{display:grid;gap:0;margin-top:8px}
#hr-address-backdrop .addr-list[hidden],#hr-address-backdrop #hr-address-more-wrap[hidden]{display:none}
#hr-address-backdrop .addr-item{display:grid;gap:2px;width:100%;min-height:48px;padding:10px 4px;border:0;border-bottom:1px solid var(--line-soft,#ebe4dc);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#hr-address-backdrop .addr-item:hover{background:var(--bg,#f4f0ea)}
#hr-address-backdrop .addr-road{font-size:14px;font-weight:650}
#hr-address-backdrop .addr-sub{color:var(--muted,#77706c);font-size:12px}
#hr-address-backdrop #hr-address-more-wrap{margin-top:12px}
/* 초점 — 2px 먹색(옛 빨간 3px · 파랑 초점을 덮는다) */
#onboardingView :focus-visible,#hr-address-backdrop :focus-visible,.fw-picker :focus-visible{outline:2px solid var(--ink,#252122)!important;outline-offset:2px!important}
#onboardingView .hr-ls-seg label:has(input:focus-visible){outline:2px solid var(--ink,#252122);outline-offset:-3px}
#onboardingView .hr-ls-seg input:focus-visible{outline:none!important}
@media(max-width:620px){
  #onboardingView .membership-controls{display:grid;grid-template-columns:1fr 1fr}
  #hr-address-backdrop{align-items:flex-end;padding:0}
  #hr-address-backdrop .modal{width:100%;max-height:92vh;padding:20px 16px;border-radius:20px 20px 0 0}
}
/* ★B1(2026-09-29 정렬) — 폰에서도 단추 줄은 오른쪽 끝부터: 단추가 하나(「다음」)면 오른쪽 반 칸, 둘이면 반씩 */
@media(max-width:620px){#onboardingView .membership-controls>.membership-button:only-child{grid-column:2}}