/* 「구성원과 인사」의 인사 축(hr-pane.mjs).
   입력창과 시트의 기본 규격은 account-system.css 를 쓰고, 승인 시안의 목록·탭·인사 시트 정렬만 여기서 덧댄다. */
/* 표 — 종전 구성원 목록 줄(.membership-member: 14px 상하 · 14px 글자)과 같은 규격 */
.hr-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hr-table{width:100%;border-collapse:collapse;font-size:14px}
.hr-table th,.hr-table td{padding:14px 8px;border-top:1px solid var(--line,#e4dcd4);text-align:left;vertical-align:top}
.hr-table th{color:var(--muted,#77706c);font-size:12px;font-weight:700;white-space:nowrap}
/* ★한국어 낱말은 띄어쓰기에서만 접는다(2026-09-24 · 390px 에서 「일부 접/근」「내 인/적사/항」으로 끊겼다). `anywhere` 는 표의 최소 폭 계산에
   글자 사이를 넣어 칸을 글자 하나 폭까지 줄이므로 낱말에는 `break-word` 를 쓰고, 띄어쓰기가 없는 이메일 줄만 `anywhere` 로 접는다 */
.hr-table td{word-break:keep-all;overflow-wrap:break-word}
.hr-table td [data-hr="account"]{word-break:normal;overflow-wrap:anywhere}
.hr-table .membership-controls{justify-content:flex-start}
/* 격자 배치 — 초대 폼의 2열 격자에서 오류 한 줄·안내 한 줄·단추 묶음·접힌 「자세히」·값 목록은 한 줄을 다 쓴다 */
.membership-card form .hr-error,.membership-card form .membership-muted,.membership-card form .membership-controls,.membership-card form .membership-visibility{grid-column:1/-1}
.membership-card form .membership-muted{margin:0}
.hr-error{margin:0;color:var(--accent,#ea1732);font-size:13px}
.hr-bad{color:var(--accent,#ea1732)}
/* 390px 에서 칸 여섯이 낱말 단위로 접힌 채 폭 안에 들도록 좌우 여백은 4px(6px 이면 3px 넘쳤다 · 2026-09-24 실측) */
@media(max-width:600px){.hr-table th,.hr-table td{padding:12px 4px;font-size:13px}}

/* ★인사 설정 v3(2026-09-24)의 도구 줄·오른쪽 시트 규칙은 account-system.css 에 있다 — 크기(칸·단추·폼)의 정본이 그 파일 하나이기 때문이다 */

/* 승인한 인사 설정 목업의 목록/탭 구조. 권한과 저장 경로는 기존 제어기를 사용한다. */
#membersView{max-width:1080px}
/* ★내 인적사항(#hr/personal)은 시안 v7 의 본문 폭(.content 1180)을 쓴다 — 인사 설정 표의 1080 과 따로(휴가·출장 화면과 같은 폭) */
body.hr-personal-route #membersView{max-width:1180px}
#membersPane.membership-pane{max-width:none}
.hr-settings-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line,#e4dcd4);margin-bottom:28px}
.hr-settings-tabs[hidden]{display:none}
/* ★내 인적사항(#hr/personal) — 시안(hr-settings-review-v2 · 사원 화면)의 두 카드: 폭 760 가운데 · 카드 안 값 목록은 줄마다 선 · 저장은 카드 안 오른쪽 검정 */
.hr-self-page{display:grid;gap:16px;max-width:none;margin:0}
/* ★시안 v7 치수(styles.css 실측) — 격자 두 칸 · 간격 16 · 카드 둥글기 20 · 안쪽 23(620 이하 18) · 제목 18 · 980 이하 한 칸 */
.hr-self-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.hr-self-grid>*{min-width:0}
.hr-self-page .membership-card{margin:0;padding:23px;border-radius:20px}
.hr-self-page .membership-card h2{margin:0 0 16px;font-size:18px;letter-spacing:-.03em}
.hr-self-page .hr-card-title{margin-bottom:16px}.hr-self-page .hr-card-title h2{margin:0}
.hr-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}
.hr-kv>div,.hr-kv-group>div{display:grid;gap:4px;min-width:0}.hr-kv>.hr-kv-group{display:contents}
.hr-self-page .hr-kv-note{margin:14px 0 0;color:var(--muted,#77706c);font-size:12px;line-height:1.6}
.hr-kv dt{margin:0;color:var(--muted,#77706c);font-size:11px}
.hr-kv dd{margin:0;font-size:14px;font-weight:650;overflow-wrap:anywhere}
@media(max-width:980px){.hr-self-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.hr-self-page .membership-card{padding:18px}.hr-kv{gap:12px}
  /* 시안 .card-foot — 폰에서는 카드 아래 단추가 줄을 나눠 가득 찬다 */
  .hr-self-page [data-hr="contact-form"] .membership-controls .membership-button{flex:1;width:100%}
  .hr-self-page .hr-card-foot .membership-button,.hr-self-page .hr-card-foot .hr-text-button{flex:1}.hr-self-page .hr-card-foot .hr-card-status{flex-basis:100%}}
.hr-self-page .membership-visibility{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;margin:6px 0 0;font-size:14px}
.hr-self-page .membership-visibility dt,.hr-self-page .membership-visibility dd{display:flex;align-items:center;min-height:52px;padding:11px 0;border-top:1px solid var(--line,#e4dcd4);box-sizing:border-box;overflow-wrap:anywhere}
.hr-self-page .membership-visibility dt{font-size:13px}
.hr-self-page [data-hr="self-basic"]>.membership-visibility:first-of-type>:nth-child(-n+2){border-top:0}
.hr-self-page [data-hr="self-company"]{margin:0}
.hr-self-page [data-hr="contact-form"]{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0}
.hr-self-page [data-hr="contact-form"] label{margin-top:10px;font-size:13px;font-weight:500}
.hr-self-page [data-hr="contact-form"] input{box-sizing:border-box;width:100%;min-height:44px}
.hr-self-page [data-hr="contact-form"] .membership-controls{justify-content:flex-end;margin-top:4px}
.hr-self-page [data-hr="contact-form"] .membership-message:empty{display:none}
.hr-self-page .hr-self-back{justify-content:flex-start}
/* ★주 단추는 검정이다 — 시안의 `.primary`(파괴적이지 않은 확인·저장). 빨강은 「접근 회수」 같은 파괴 동작에만 남는다(화면 감수 #22) */
.hr-self-page .membership-primary,.hr-sheet .membership-primary:not(.hr-danger),.hr-impact .membership-primary:not(.hr-danger){background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
@media(max-width:600px){.hr-self-page .membership-visibility{grid-template-columns:96px minmax(0,1fr)}}
/* ★폰(600 이하)의 내 인적사항에서는 떠 있는 비전 구슬을 내린다 — 연락처 칸과 「저장」이 첫 화면에서 구슬 밑에 깔렸다(390 실측 · 화면 감수 #17).
   입력 화면이라 자판이 올라오면 구슬이 칸을 더 가린다. 이 주소를 떠나면 구슬은 그대로 돌아온다(Codex 인계안 유지) */
/* ★2026-09-26(Codex 감수) — 폭과 관계없이 내 인적사항에서는 구슬을 내린다. 두 칸 격자(시안 v7 폭 그대로)의 오른쪽 카드 「저장」이
   870 에서 스크롤 중 구슬(x770–848 · y800–878) 밑을 지났다. 카드 폭을 줄이면 시안과 어긋나고, 아래 여백만으로는 «스크롤 중» 가림이 남는다.
   시안에도 구슬이 없다. 이 주소를 떠나면 구슬은 그대로 돌아온다 */
body.hr-personal-route #visionFloat{display:none}
/* ★근무조 M3(2026-09-27 · claude-main 짝 02) — 근무조 하위 화면(#hrLeaveSettingCard 안 wg-page)과 배정 · 이동 · 근무조 창이 열려 있는 동안
   구슬을 내린다. 1440 에서 「직원별 근무조」 마지막 줄 「바꾸기」가 첫 화면에서 구슬(x1322–1418 · y782–878) 밑에 깔렸고, 390 에서는 창의 「저장」이
   어느 스크롤에서도 구슬과 겹쳤다. 인사 설정 화면이 보일 때만 본다 — 탭을 옮기거나 주소를 떠나면 구슬은 그대로 돌아온다. 창은 닫히면 DOM 에서 빠진다 */
body:has(#membersView:not([hidden]) #hrLeaveSettingCard:not([hidden]) [data-hr="wg-page"]) #visionFloat,
body:has([data-hr="wg-dialog-backdrop"]) #visionFloat{display:none}
/* (옛 중간 폭 630 제한은 시안 v7 두 칸 격자로 바꾸며 뺐다 — 2026-09-26 · 구슬과 「저장」 겹침은 870 에서 다시 잰다) */

.hr-settings-tabs button{font:inherit;font-size:16px;padding:12px 2px 17px;min-height:48px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted,#77706c);cursor:pointer}
.hr-settings-tabs button[aria-selected=true]{color:var(--ink,#252122);border-bottom-color:currentColor;font-weight:650}
.hr-staff-list>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hr-staff-list .hr-tools{margin:0 0 22px;flex-wrap:nowrap}
.hr-staff-list .hr-tools input[type=search]{flex:1;max-width:380px;border-radius:8px}
.hr-staff-list .hr-list-refresh{margin-left:auto;background:none;font-size:13px;white-space:nowrap}
.hr-staff-list .hr-invite-open{margin-left:0;background:var(--ink,#252122);border-color:var(--ink,#252122)}
.hr-staff-list .hr-filters{margin-bottom:18px;gap:7px}
.hr-staff-list .hr-filter{min-height:34px;padding:7px 12px;border:0;background:transparent;border-radius:8px;color:var(--muted,#77706c);font-size:13px;font-weight:500}
.hr-staff-list .hr-filter.is-on{background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-staff-list .hr-table-scroll{border:1px solid var(--line,#e4dcd4);border-radius:15px;background:var(--paper,#fffdfa);overflow:hidden}
.hr-staff-list .hr-table{table-layout:fixed}
.hr-staff-list .hr-table th{background:var(--bg,#f4f0ea);font-size:12px;font-weight:500;padding:14px 20px;border-top:0}
.hr-staff-list .hr-table td{padding:20px;vertical-align:middle;font-size:13px}
.hr-staff-list .hr-table th:first-child{width:32%}.hr-staff-list .hr-table th:nth-child(2){width:27%}.hr-staff-list .hr-table th:nth-child(3){width:110px}
.hr-staff-list td[data-hr-cell=name]{position:relative;padding-left:74px}
.hr-person-initial{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;background:var(--bg,#eee7df);display:grid;place-items:center;font-size:15px;font-weight:600}
.hr-staff-list .hr-person{gap:5px}
.hr-staff-list .hr-person strong{text-decoration:none;font-size:15px}
.hr-staff-list .hr-person span{font-size:11px}
.hr-person-team,.hr-person-position{display:block;line-height:1.6}
.hr-person-position{color:var(--muted,#77706c);font-size:12px}
.hr-status-badge{display:inline-block;font-size:11px;padding:5px 8px;border-radius:5px;background:var(--bg,#eeebe6);color:var(--ink,#5f5852);white-space:nowrap}
.hr-status-badge[data-state=재직]{background:#edf1e9;color:#405536}.hr-status-badge[data-state="확인 대기"]{background:#fff0d8;color:#795216}.hr-status-badge[data-state=초대중]{background:#e9eef5;color:#486181}
.hr-staff-list .hr-table .membership-button:not(.hr-person){min-height:36px;padding:7px 10px;font-size:12px}
.hr-own-access{margin-top:26px;border-top:1px solid var(--line,#e4dcd4);padding-top:16px;color:var(--muted,#77706c);font-size:13px}
.hr-own-access>summary{cursor:pointer;min-height:32px}
.hr-own-access .membership-card h2{display:none}
#orgChartCard{max-width:none;margin:0 0 32px}
/* ★조직도의 「저장」은 오른쪽 아래에 선다 — 넓은 화면에서는 떠 있는 비전 구슬(오른쪽 아래 고정 · 78~96px)과 겹쳤다(1440 첫 화면 · 화면 감수 #17).
   단추 줄 오른쪽에 구슬 폭만큼 자리를 비워 둔다. 좁은 화면(620 이하)은 줄이 세로로 쌓이고 작업 영역 아래 여백(106px)이 구슬 자리를 이미 비운다 */
@media(min-width:621px){#orgChartCard .oc-bar{padding-right:calc(clamp(78px,8vw,96px) + 18px)}}
.hr-sheet-foot .membership-controls{justify-content:flex-end}
.hr-sheet-foot .membership-controls .membership-button{min-width:72px}
.hr-sheet-foot .membership-controls .membership-primary{min-width:132px;order:2}
@media(max-width:1000px){
.hr-staff-list .hr-tools{flex-wrap:wrap}.hr-staff-list .hr-tools input[type=search]{max-width:none;flex-basis:100%}.hr-staff-list .hr-list-refresh{margin-left:0}.hr-staff-list .hr-invite-open{margin-left:auto}
.hr-staff-list .hr-table thead{display:none}.hr-staff-list .hr-table,.hr-staff-list .hr-table tbody{display:block}
.hr-staff-list .hr-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.5fr);gap:7px 12px;padding:18px;border-top:1px solid var(--line,#e4dcd4)}.hr-staff-list .hr-table tr:first-child{border-top:0}
.hr-staff-list .hr-table td{display:block;padding:0;border:0;min-width:0}.hr-staff-list td[data-hr-cell=name]{grid-column:1;grid-row:1;padding-left:52px}.hr-person-initial{left:0}
.hr-staff-list td[data-hr-cell=position]{grid-column:1;grid-row:2;padding-left:52px}.hr-person-team,.hr-person-position{display:inline}.hr-person-team:not(:empty):after{content:' · '}
.hr-staff-list td[data-hr-cell=status]{grid-column:2;grid-row:1;text-align:right}.hr-staff-list td[data-hr-cell=role]{grid-column:2;grid-row:2;text-align:right;font-size:12px}.hr-staff-list td[data-hr-cell=actions]{grid-column:1/-1;grid-row:3}.hr-staff-list td[data-hr-cell=actions] .membership-controls{justify-content:flex-end}
}
@media(max-width:600px){.hr-settings-tabs{margin-bottom:22px}.hr-staff-list .hr-table tr{padding:16px 13px;gap:8px}.hr-staff-list .hr-person strong{font-size:14px}.hr-person-initial{width:34px;height:34px}.hr-staff-list td[data-hr-cell=name],.hr-staff-list td[data-hr-cell=position]{padding-left:44px}.hr-staff-list .hr-filters{gap:2px}.hr-staff-list .hr-filter{padding:7px 9px;font-size:12px}}

.hr-sheet{border-radius:18px 0 0 18px}
.hr-sheet-head{min-height:98px}
@media(max-width:600px){.hr-sheet{border-radius:0}}

.hr-sheet-body .membership-visibility{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;font-size:14px;margin:6px 0 18px}
.hr-sheet-body .membership-visibility dt,.hr-sheet-body .membership-visibility dd{padding:12px 0;border-bottom:1px solid var(--line,#e4dcd4);line-height:1.6;overflow-wrap:anywhere}
.hr-sheet-body .membership-visibility dt{font-size:13px}

.hr-person-row{cursor:pointer}.hr-person-row:hover{background:var(--bg,#f4f0ea)}
/* 거른 결과가 없을 때 — 표 틀 안에 한 줄(시안 `.empty` · 화면 감수 #15) */
.hr-staff-list .hr-table td.hr-empty{padding:60px 20px;text-align:center;color:var(--muted,#77706c);font-size:14px}
@media(max-width:1000px){.hr-staff-list .hr-table tr.hr-empty-row{display:block}.hr-staff-list .hr-table td.hr-empty{padding:48px 16px}}
.hr-staff-list .hr-table th:last-child{width:42px;font-size:0;padding:0}
.hr-staff-list .hr-table .hr-row-arrow{padding:20px 12px;color:var(--muted,#77706c);text-align:center;font-size:20px}
.hr-account-lifecycle{margin-top:8px;font-size:13px;color:var(--muted,#77706c)}.hr-account-lifecycle summary{cursor:pointer;padding:10px 0}.hr-account-lifecycle .membership-controls{margin-top:10px}
@media(max-width:1000px){.hr-staff-list .hr-table tr{grid-template-columns:minmax(0,1fr) 125px 30px}.hr-staff-list .hr-table .hr-row-arrow{grid-column:3;grid-row:1/3;padding:0;align-self:center}
/* ★좁은 화면의 한 줄 카드 — 시안처럼 상태 배지와 권한은 둘째 칸 «왼쪽»에 선다(오른쪽 정렬이 아니다 · 화면 감수 #16) */
.hr-staff-list td[data-hr-cell=status],.hr-staff-list td[data-hr-cell=role]{text-align:left}}
@media(max-width:600px){.hr-staff-list .hr-table tr{grid-template-columns:minmax(0,1fr) 88px 12px}.hr-staff-list td[data-hr-cell=role]{font-size:11px}}
.hr-person-team{font-weight:500}

/* 권한 변경 확인은 별도 대화상자. 뒤의 편집 시트와 같은 단추로 착각하지 않게 한다. */
.hr-impact-backdrop{position:fixed;inset:0;z-index:2;background:rgba(28,22,22,.22);display:flex;align-items:center;justify-content:center;padding:20px}
.hr-impact-backdrop .hr-impact{width:440px;max-width:100%;max-height:calc(100dvh - 40px);overflow:auto;margin:0;padding:24px;background:var(--paper,#fffdf9);border:1px solid var(--line,#e4dcd4);border-radius:16px;box-shadow:0 18px 60px #0002}
.hr-impact-backdrop .hr-impact strong{font-size:18px}
.hr-impact-backdrop .hr-impact ul{margin:18px 0 24px;font-size:14px;line-height:1.7}
.hr-impact-backdrop .membership-controls{display:flex;justify-content:flex-end;gap:8px}
.hr-impact-backdrop .membership-button{min-height:44px;min-width:88px}
.hr-impact-backdrop .hr-danger{background:var(--accent,#db2535);color:white}
.hr-sheet select{box-sizing:border-box;width:100%;height:46px;min-height:46px;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:8px;background:var(--paper,#fffdf9);font:inherit;font-size:14px}
/* 시트 안 글자 — 시안(`dialog label` 13px 보통 굵기 · `.sectionlabel` 14px 굵게) */
.hr-sheet-body form label{font-weight:500}
.hr-sheet-section{margin:18px 0 4px;font-size:14px;font-weight:700}

/* 0303 담당 업무 — 시안 「담당 업무」: 굵은 소제목 아래 체크 칸이 한 줄에 선다(칸 규격 46px 규칙이 이 작은 칸에 번지지 않게 되돌린다) */
.hr-sheet-body .hr-duties{grid-column:1/-1;border:0;margin:14px 0 0;padding:0;min-width:0}
.hr-sheet-body .hr-duties legend{padding:0;font-size:14px;font-weight:700}
.hr-sheet-body .hr-duty{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:4px 14px 0 0;font-size:14px;font-weight:400;cursor:pointer}
.hr-sheet-body .hr-duty input{width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:var(--ink,#252122)}
.hr-sheet-body .hr-duty-dropped{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.hr-sheet-body [data-hr="role-lock"],.hr-sheet-body [data-hr="place-only"]{margin:6px 0 0;line-height:1.6}

/* ★WebKit(사파리)은 기본 select 를 회색 그러데이션 단추로 그린다 — 시안처럼 평평한 칸 + 오른쪽 꺾쇠 하나(영업일 설정 `.bd select` 와 같은 그림).
   높이는 시트의 칸 규격(46 · 시안 `#editForm select`) 그대로다 */
.hr-sheet select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m4 5 3 3 3-3' fill='none' stroke='%23888888' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* ★390(620 이하)에서 조직도의 저장 줄은 폭을 다 쓰는 단추가 되어 첫 화면에서 비전 구슬 밑에 깔렸다(모든 장면 훑기 · 화면 감수 #17 같은 부류).
   오른쪽에 구슬 자리(78+12)를 비워 둔다 — 넓은 화면의 저장 줄과 같은 방법 */
@media(max-width:620px){#orgChartCard .oc-bar{padding-right:calc(clamp(70px,19vw,78px) + 12px)}}

/* ══ 2026-09-24 사장님 회차 — 탭 「직위 설정」 · 입사 확인 한 번 · 담당 업무 체크(계정 관리자 · 인사담당 · 재무담당[설계 중]) · 지원 계정 ══ */
/* 「직위 설정」 탭 — 직원 목록과 같은 조각을 쓰고 셸의 `data-hr-tab` 이 보일 구획을 고른다(내 인적사항 주소에서는 가르지 않는다) */
body:not(.hr-personal-route) #membersPane[data-hr-tab="positions"]>:not(.hr-positions-tab):not(.hr-sheet-backdrop){display:none}
body:not(.hr-personal-route) #membersPane:not([data-hr-tab="positions"])>.hr-positions-tab{display:none}
.hr-positions-tab>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hr-positions-tab .hr-position-form{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 18px}
.hr-positions-tab .hr-position-form input{flex:1;max-width:380px;min-height:44px;border-radius:8px}
.hr-positions-tab .hr-position-form .membership-primary{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa);min-height:44px;white-space:nowrap}
.hr-positions-tab .membership-message:empty{display:none}
.hr-positions-tab .hr-table-scroll{border:1px solid var(--line,#e4dcd4);border-radius:15px;background:var(--paper,#fffdfa);overflow:hidden}
.hr-positions-tab .hr-table th{background:var(--bg,#f4f0ea);font-size:12px;font-weight:500;padding:14px 20px;border-top:0}
.hr-positions-tab .hr-table td{padding:16px 20px;vertical-align:middle;font-size:14px}
.hr-positions-tab .hr-table td strong{font-weight:600}
.hr-positions-tab .hr-position-actions .membership-controls{justify-content:flex-end}
.hr-positions-tab .hr-position-actions .membership-button{min-height:36px;padding:7px 12px;font-size:12px}
.hr-positions-tab .hr-table td.hr-empty{padding:48px 20px;text-align:center;color:var(--muted,#77706c)}
@media(max-width:600px){.hr-positions-tab .hr-position-form{flex-wrap:wrap}.hr-positions-tab .hr-position-form input{max-width:none;flex-basis:100%}.hr-positions-tab .hr-table td,.hr-positions-tab .hr-table th{padding:14px}}
/* 입사 확인 — 안내 상자(시안 `.callout`) · 결과 상자(`.callout.ok`) · 「제출한 인적사항 보기」 */
.hr-callout{margin:14px 0 4px;padding:14px;border-radius:8px;background:var(--bg,#f1ede5);font-size:13px;line-height:1.8}
.hr-callout-ok{background:#edf1e9;color:#2f4526}.hr-callout p{margin:0}.hr-callout .hr-bad{color:var(--accent,#a02a2e)}
.hr-sheet-body .hr-facts-open{margin:6px 0 4px;min-height:40px;font-size:13px}
/* 담당 업무 — 한 줄에 체크 칸 셋 · 「설계 중」 표시(시안 `.mark-design`) · 권한 미리보기(시안 `.permissions`) */
.hr-sheet-body .hr-duty-row{display:flex;flex-wrap:wrap;gap:0 14px}
.hr-sheet-body .hr-duty.is-design{color:var(--muted,#77706c)}
/* ★잠긴 칸은 «보이게» 잠긴다 — 누를 수 없는데 멀쩡해 보이면 고장처럼 보인다(마지막 관리자 · 설계 중 · 관리 능력 없음). hidden-rendering 시험이 계산된 스타일로 잰다 */
.hr-sheet-body .hr-duty.is-locked{opacity:.55;cursor:not-allowed}
/* 담당 업무 즉시 적용의 결과 한 줄 — 묶음 바로 아래(성공은 기본 글자색 · 실패는 hr-bad) */
.hr-sheet-body .hr-duty-result{margin:6px 0 0;font-size:13px;line-height:1.5}
.hr-mark-design{display:inline-block;margin-left:4px;font-size:11px;font-weight:600;line-height:1.4;padding:1px 6px;border:1px dashed #a0782a;border-radius:4px;background:#fff6e5;color:#6e4c0e;white-space:nowrap}
.hr-sheet-body .hr-duty-note{margin:4px 0 0;font-size:12px}
.hr-permissions{margin-top:12px;padding:13px 15px;border-radius:8px;background:var(--paper-soft,#f6f3ef);font-size:12px;line-height:1.9}.hr-permissions p{margin:0}
/* 지원 계정 — 목록 밖 접힌 구획(시안 `.support`) */
.hr-support{margin-top:36px;border-top:1px solid var(--line,#e4dcd4);padding-top:18px;color:var(--muted,#77706c);font-size:12px}
.hr-support summary{cursor:pointer;min-height:32px}.hr-support-count{margin-left:8px}
.hr-support-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0}
.hr-support-row b{display:block;color:var(--ink,#252122);font-size:13px}.hr-support-row small{display:block;margin-top:7px}
/* 0356 비전 운영자 작업 — 지원 계정 아래 한 구획 */
.hr-operator-work{margin-top:28px;border-top:1px solid var(--line,#e4dcd4);padding-top:18px;font-size:13px;color:var(--ink,#252122)}
.hr-operator-work-title{cursor:pointer;min-height:32px;margin:0 0 10px;font-size:14px;font-weight:600}
.hr-operator-work-list{list-style:none;margin:0 0 12px;padding:0}
.hr-operator-work-row{padding:10px 0;border-bottom:1px solid var(--line,#efe8e1);overflow-wrap:anywhere}
.hr-operator-work-reason{display:block;margin-top:5px;color:var(--muted,#77706c);font-size:12px}
/* 근로자 구분 — 두 칸 한 줄(근로자 · 임원) */
.hr-sheet-body .hr-choice{grid-column:1/-1;border:0;margin:10px 0 0;padding:0;min-width:0}
.hr-sheet-body .hr-choice legend{padding:0;font-size:13px;font-weight:500}
.hr-sheet-body .hr-choice-row{display:flex;flex-wrap:wrap;gap:0 18px}
.hr-sheet-body .hr-change-note{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--hr-warn-ink)}
.hr-sheet-body .hr-choice-option{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:2px 0 0;font-size:14px;font-weight:400;cursor:pointer}
.hr-sheet-body .hr-choice-option input{width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:var(--ink,#252122)}

/* ══ 대비(어두운 화면 포함 · 사장님 2026-09-24 사파리 다크에서 「직원 초대」가 안 보였다) ══════════════════════════════════
   ★글자색은 늘 «자기 바탕 토큰의 짝»이다 — 바탕이 --ink 면 글자는 --paper(흰색 고정 0). 두 테마 모두 WCAG AA(글자 4.5 · 칸 테두리 3)를 Playwright 로 쟀다.
   ★인사 화면 전용 토큰 셋 — 칸 테두리(--hr-field-line) · 빨간 글자(--hr-danger-text) · 잠긴 주 단추(바탕 paper-soft · 글자 muted) */
:root{--hr-field-line:#8c827b;--hr-danger-text:#db2535}
@media(prefers-color-scheme:dark){:root{--hr-field-line:#857c78;--hr-danger-text:#ff9aa2}}
.hr-staff-list .hr-invite-open{color:var(--paper,#fffdfa)}
.hr-staff-list .hr-tools input[type=search],.hr-sheet-body input[type=text],.hr-sheet-body input[type=date],.hr-sheet-body input[type=email],.hr-sheet-body input[type=tel],.hr-sheet-body select,.hr-sheet select,.hr-self-page [data-hr="contact-form"] input,.hr-positions-tab .hr-position-form input,#membership-invite-email{border-color:var(--hr-field-line)}
.hr-sheet-body input[aria-invalid="true"],.hr-sheet-body select[aria-invalid="true"]{border-color:var(--hr-danger-text)}
.hr-error,.hr-bad,.membership-message.hr-bad,.hr-sheet-body [data-hr="field-error"],.hr-sheet-body .hr-danger:not(.membership-primary),.hr-danger:not(.membership-primary){color:var(--hr-danger-text)}
.hr-sheet-body .hr-danger:not(.membership-primary),.hr-danger:not(.membership-primary){border-color:var(--hr-danger-text)}
/* 잠긴 주 단추 — 흐림(opacity) 대신 읽히는 잠김 색(두 테마 모두 4.5 이상) */
.hr-sheet .membership-primary:disabled,.hr-staff-list .membership-primary:disabled,.hr-positions-tab .membership-primary:disabled,.hr-self-page .membership-primary:disabled{opacity:1;background:var(--paper-soft,#faf6f1);border-color:var(--hr-field-line);color:var(--muted,#77706c)}
/* 밝은 화면의 흐린 글자 — 셸의 --muted(#746d6c)가 셸 바탕(#f4f1eb) 위에서 4.49 로 AA 에 0.01 모자랐다. 인사 설정 안에서만 한 단계 짙게(4.84) */
#membersView{--muted:#6f6866}
@media(prefers-color-scheme:dark){#membersView{--muted:#b3aaa6}}
/* 직위 설정 탭의 잠긴 「삭제」 — 흐림 .55 는 밝은 화면에서 3.65 였다. 이 탭에서는 .75 로(읽히는 잠김) */
.hr-positions-tab .membership-button:disabled:not(.membership-primary){opacity:.75}
/* 통합(hr-release): 「수정」 폼의 칸도 인사 화면 칸 테두리 토큰을 쓴다(hr-ui 대비 규칙과 같은 뜻) */
/* ══ 0311 「연차 설정」 탭 — 연차 사용 스위치 하나 + 「법에서 정한 연차」(사장님 2026-09-24). 직위 설정 탭과 같은 카드 말투 · 색은 전부 토큰(어두운 화면이 저절로 따라온다) ══ */
.hr-leave-setting{max-width:none}
.hr-ls-card{border:1px solid var(--line,#e4dcd4);border-radius:15px;background:var(--paper,#fffdfa);padding:20px 22px}
.hr-ls-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.hr-ls-text{min-width:0}
.hr-ls-label{display:block;font-size:16px;font-weight:650;color:var(--ink,#252122)}
.hr-ls-desc{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#77706c)}
.hr-ls-lock{margin-top:12px}
.hr-ls-result{margin:10px 0 0;font-size:13px;min-height:1.6em;color:var(--ink,#252122)}.hr-ls-result:empty{min-height:0;margin:0}
.hr-ls-result.is-bad{color:var(--accent,#a02a2e)}
.hr-ls-card .membership-button{margin-top:12px}
/* 스위치 — 켜짐 = 검정 주 단추 색(--ink 바탕 · --paper 글자), 꺼짐 = 테두리만. 칸 안 글자(켜짐/꺼짐)로 색 말고도 상태를 말한다 */
.hr-ls-switch{flex:none;display:inline-flex;align-items:center;gap:8px;min-width:96px;min-height:44px;padding:4px 14px 4px 5px;border:1px solid var(--line,#e4dcd4);border-radius:999px;background:var(--bg,#f4f0ea);color:var(--ink,#252122);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hr-ls-knob{width:30px;height:30px;border-radius:50%;background:var(--paper,#fffdfa);border:1px solid var(--line,#e4dcd4);flex:none}
.hr-ls-switch[aria-checked=true]{flex-direction:row-reverse;padding:4px 5px 4px 14px;background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-ls-switch[aria-checked=true] .hr-ls-knob{border-color:var(--ink,#252122)}
.hr-ls-switch:disabled{opacity:.55;cursor:default}
.hr-ls-switch:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:3px}
.hr-ls-law{margin-top:22px;padding:18px 22px;border-radius:15px;background:var(--paper-soft,#f6f3ef);color:var(--ink,#252122)}
.hr-ls-law h3{margin:0 0 10px;font-size:15px;font-weight:650}
.hr-ls-law ul{margin:0;padding-left:18px;font-size:14px;line-height:1.75}
.hr-ls-law li{margin:4px 0}
.hr-ls-cite{font-size:11px;color:var(--muted,#77706c);white-space:nowrap}
.hr-ls-note{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted,#77706c)}
@media(max-width:600px){.hr-ls-card,.hr-ls-law{padding:16px}.hr-ls-row{gap:12px}.hr-ls-cite{white-space:normal}}
/* ══ M1 퇴사 · 휴직 · 보존 기한(0312~0316 · 2026-09-25) — 색은 전부 토큰 · 상태 뱃지 둘은 두 테마 모두 AA ══════════════════════════ */
.hr-status-badge[data-state=휴직]{background:#e9eef5;color:#3d5474}.hr-status-badge[data-state=퇴사]{background:#efebe8;color:#5a524d}
@media(prefers-color-scheme:dark){.hr-status-badge[data-state=휴직]{background:#2c3645;color:#c9d6ea}.hr-status-badge[data-state=퇴사]{background:#3a3533;color:#ddd4cf}}
.hr-lifecycle{margin-top:18px;border-top:1px solid var(--line,#e4dcd4)}
.hr-lifecycle>summary{min-height:44px;display:flex;align-items:center;color:var(--ink,#252122);font-weight:500}
.hr-lifecycle .hr-danger-actions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.hr-lifecycle .membership-button{min-height:44px}
.hr-life-state{margin:6px 0 4px;font-size:14px;color:var(--ink,#252122)}
.hr-kept{margin-top:8px}
.hr-life-dialog{width:480px}
.hr-impact-backdrop .hr-life-dialog{width:480px}
.hr-life-form{display:grid;gap:4px;margin-top:12px}
.hr-life-form label{margin-top:8px;font-size:13px;font-weight:500;color:var(--ink,#252122)}
.hr-life-form input[type=date],.hr-life-form input[type=text],.hr-life-form select{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;font:inherit;font-size:14px;border:1px solid var(--hr-field-line);border-radius:8px;background:var(--paper,#fffdf9);color:var(--ink,#252122)}
.hr-life-form input[aria-invalid="true"],.hr-life-form select[aria-invalid="true"]{border-color:var(--hr-danger-text)}
.hr-life-form .hr-choice{border:0;margin:10px 0 0;padding:0;min-width:0}
.hr-life-form .hr-choice legend{padding:0;font-size:13px;font-weight:500;color:var(--ink,#252122)}
.hr-life-form .hr-choice-row{display:flex;flex-wrap:wrap;gap:0 18px}
.hr-life-form .hr-choice-option{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:2px 0 0;font-size:14px;font-weight:400;cursor:pointer}
.hr-life-form .hr-choice-option input{width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:var(--ink,#252122)}
.hr-life-form .membership-muted{margin:2px 0 0;font-size:12px;line-height:1.6}
.hr-life-notice{margin:14px 0 0;font-size:14px;font-weight:650;color:var(--ink,#252122)}
.hr-impact-backdrop .hr-life-form ul{margin:10px 0 4px;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink,#252122)}
.hr-life-dialog .membership-message:empty{display:none}
.hr-life-dialog .membership-controls{margin-top:12px}
.hr-retention{margin-top:28px}
.hr-retention h2{font-size:17px}
:root{--hr-retention-red:#a3182a}
@media(prefers-color-scheme:dark){:root{--hr-retention-red:#ff9aa2}}
.hr-retention-overdue{color:var(--hr-retention-red);font-weight:600}
.hr-retention-list{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line,#e4dcd4);border-radius:15px;background:var(--paper,#fffdfa);overflow:hidden}
.hr-retention-row{padding:14px 18px;border-top:1px solid var(--line,#e4dcd4)}.hr-retention-row:first-child{border-top:0}
.hr-retention-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.hr-retention-head strong{font-size:14px;color:var(--ink,#252122);overflow-wrap:anywhere}
.hr-retention-state{font-size:12px;padding:4px 8px;border-radius:5px;background:var(--bg,#f4f0ea);color:var(--ink,#252122);white-space:nowrap}
.hr-retention-state[data-state=OVERDUE],.hr-retention-state[data-state=UNKNOWN],.hr-retention-state[data-state=HOLD_REVIEW_DUE]{color:var(--hr-retention-red);font-weight:650}
.hr-retention-facts,.hr-retention-hold{margin:6px 0 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.hr-retention-hold{color:var(--ink,#252122)}
.hr-retention-row .membership-controls{margin-top:8px}
.hr-retention-row .membership-button{min-height:40px}
@media(max-width:600px){.hr-impact-backdrop .hr-life-dialog{padding:18px}.hr-retention-row{padding:12px 14px}}
/* 대화 안 고르개 — 시트의 고르개와 같은 모양(사파리는 기본 모양이면 높이를 무시한다) */
.hr-life-form select{appearance:none;-webkit-appearance:none;height:46px;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m4 5 3 3 3-3' fill='none' stroke='%23888888' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
/* ★M5 파기 — 카드 머리 「기한 지난 N명 모두 미리보기」 · 줄의 「파기 미리보기」·「기한 정하기」 · 지운 항목·파기 기록 접이 · 미리보기 대화(값 0) */
.hr-retention-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.hr-retention-top h2{margin:0}
.hr-retention .membership-button.hr-danger:not(.membership-primary),.hr-retention .hr-purge-all{color:var(--hr-retention-red);border-color:var(--hr-retention-red);min-height:40px}
.hr-retention-row .membership-controls{display:flex;flex-wrap:wrap;gap:8px}
.hr-retention-more{margin-top:14px}
.hr-retention-more>summary{min-height:44px;display:flex;align-items:center;color:var(--ink,#252122);font-weight:500;cursor:pointer}
.hr-retention-state[data-state=PURGED],.hr-retention-state[data-state=VERIFIED]{white-space:normal}
.hr-impact-backdrop .hr-purge-dialog{width:600px}
.hr-purge-dialog .hr-life-notice{font-weight:600;line-height:1.6}
.hr-purge-person{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#e4dcd4)}
.hr-purge-person .hr-sheet-section{margin:10px 0 2px;font-size:13px;font-weight:600;color:var(--ink,#252122)}
.hr-impact-backdrop .hr-purge-dialog ul{margin:4px 0 6px;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink,#252122);overflow-wrap:anywhere}
.hr-purge-dialog .hr-retention-state[data-state=failed],.hr-purge-dialog .hr-retention-state[data-state=changed]{color:var(--hr-retention-red);font-weight:650}
.hr-purge-dialog .hr-retention-state[data-state=done]{font-weight:650}
.hr-purge-dialog .hr-error{color:var(--hr-retention-red);font-size:13px;margin:6px 0 0}
.hr-purge-result{margin-top:16px;font-size:14px;line-height:1.6;color:var(--ink,#252122)}
.hr-purge-result p{margin:2px 0}
.hr-purge-dialog .membership-controls{margin-top:14px;flex-wrap:wrap}
.hr-impact-backdrop .hr-purge-dialog .hr-danger.membership-primary{background:var(--hr-retention-red);border-color:var(--hr-retention-red);color:#fff}
@media(prefers-color-scheme:dark){.hr-impact-backdrop .hr-purge-dialog .hr-danger.membership-primary{color:#1d1718}}
@media(max-width:600px){.hr-impact-backdrop .hr-purge-dialog{padding:18px}}
/* ══ 인사 설정 v3 §2~§4(2026-09-26) — 사업장 탭 · 연차 기준 · 등록 다음 할 일 ══ */
:root{--hr-warn-bg:#fff4dc;--hr-warn-ink:#6f4a10;--hr-warn-line:#f0d9a8;--hr-good-ink:#35592c;--hr-dot:#c2362f}
@media(prefers-color-scheme:dark){:root{--hr-warn-bg:#3a2f1a;--hr-warn-ink:#f1d49b;--hr-warn-line:#5a4726;--hr-good-ink:#a8d49a;--hr-dot:#ff7b72}.hr-status-badge[data-state="확인 대기"]{background:#3a2f1a;color:#f1d49b}}
.hr-settings-tabs .hr-tab-dot{display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--hr-dot);vertical-align:middle}
.hr-ls-basis{margin-top:18px;padding-top:18px;border-top:1px solid var(--line,#e4dcd4)}
.hr-ls-basis.is-off .hr-ls-choices,.hr-ls-basis.is-off .hr-ls-text{opacity:.55}
.hr-ls-chip,.hr-wp-chip{flex:none;display:inline-block;font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);white-space:nowrap}
.hr-wp-chip{background:var(--bg,#eeebe6);color:var(--ink,#5f5852)}
.hr-ls-choices{display:grid;gap:10px;margin-top:14px}
.hr-ls-choice{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line,#e4dcd4);border-radius:11px;background:var(--paper,#fffdfa);cursor:pointer}
.hr-ls-choice:has(input:checked){border-color:var(--ink,#252122)}
.hr-ls-choice:has(input:disabled){cursor:default}
.hr-ls-choice input{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--ink,#252122)}
.hr-ls-choice-text{display:grid;gap:3px;font-size:13px;line-height:1.6;color:var(--muted,#77706c)}
.hr-ls-choice-text b{font-size:14px;font-weight:650;color:var(--ink,#252122)}
.hr-ls-basis-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.hr-ls-basis-foot .hr-ls-result{margin:0;color:var(--muted,#77706c)}
.hr-ls-basis-foot .membership-button{margin-top:0;flex:none}
.hr-ls-result.is-good{color:var(--hr-good-ink)}
.hr-ls-basis-foot .hr-ls-result.is-bad{color:var(--accent,#a02a2e)}
@media(max-width:600px){.hr-ls-basis-foot{flex-direction:column;align-items:stretch}.hr-ls-basis-foot .membership-button{width:100%}}
/* 사업장 탭 */
.hr-wp-card{border:1px solid var(--line,#e4dcd4);border-radius:15px;background:var(--paper,#fffdfa);padding:20px 22px}
.hr-wp-card h2{margin:0;font-size:16px;font-weight:650}
.hr-wp-sub{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#77706c)}
.hr-wp-warn,.hr-next-warn-box{margin:16px 0 0;padding:12px 14px;border-radius:9px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);font-size:13px;line-height:1.7}
.hr-wp-fields{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin-top:16px}
.hr-wp-field{display:grid;gap:6px;align-content:start}
.hr-wp-field label,.hr-wp-field>span:first-child{font-size:13px;font-weight:600;color:var(--ink,#252122)}
.hr-wp-field input{font:inherit;font-size:14px;min-height:44px;padding:0 12px;border:1px solid var(--hr-field-line,#cfc5bd);border-radius:9px;background:var(--paper,#fffdfa);color:var(--ink,#252122)}
.hr-wp-field input[aria-invalid=true]{border-color:var(--accent,#a02a2e)}
.hr-wp-hint{font-size:12px;color:var(--muted,#77706c)}
.hr-wp-err{font-size:12px;color:var(--accent,#a02a2e);min-height:0}.hr-wp-err:empty{display:none}
.hr-wp-optional{font-weight:400;color:var(--muted,#77706c)}
.hr-wp-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:16px}
.hr-wp-foot .hr-wp-msg{margin:0 auto 0 0;font-size:13px;color:var(--muted,#77706c)}
.hr-wp-msg.is-bad{color:var(--accent,#a02a2e)}.hr-wp-msg.is-good{color:var(--hr-good-ink)}
.hr-wp-list{display:grid;gap:10px;margin-top:16px}
.hr-wp-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line,#e4dcd4);border-radius:11px}
.hr-wp-item-main{display:grid;gap:3px;min-width:0}
.hr-wp-item-main strong{font-size:15px;font-weight:650;color:var(--ink,#252122)}
.hr-wp-item-main span{font-size:13px;color:var(--muted,#77706c);overflow-wrap:anywhere}
.hr-wp-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted,#77706c)}
.hr-wp-add{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--muted,#77706c)}
.hr-wp-link{font:inherit;font-size:13px;font-weight:600;padding:8px 0;min-height:44px;border:0;background:none;color:var(--ink,#252122);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hr-wp-choice{display:flex;gap:10px;flex-wrap:wrap;border:0;margin:14px 0 0;padding:0}
.hr-wp-choice legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.hr-wp-choice label{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line,#e4dcd4);border-radius:9px;font-size:13px;cursor:pointer}
.hr-wp-dialog{width:min(560px,calc(100vw - 32px))}
.hr-wp-dialog .hr-wp-fields{grid-template-columns:1fr}
@media(max-width:600px){.hr-wp-card{padding:16px}.hr-wp-fields{grid-template-columns:1fr}.hr-wp-foot{flex-direction:column;align-items:stretch}.hr-wp-foot .membership-button{width:100%}.hr-wp-item{align-items:flex-start;flex-direction:column}}
/* 직원 목록 — 등록 단계 · 다음 할 일 · 설정 안내 · 마무리 거름 */
.hr-setup-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:16px 18px;border:1px solid var(--hr-warn-line);border-radius:13px;background:var(--hr-warn-bg);color:var(--hr-warn-ink)}
.hr-setup-card strong{display:block;font-size:14px;font-weight:650}
.hr-setup-card p{margin:4px 0 0;font-size:13px;line-height:1.6}
.hr-setup-links{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.hr-todo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px;font-size:13px}
.hr-todo strong{font-weight:650;margin-right:4px}
.hr-todo-chip{font:inherit;font-size:12px;min-height:36px;padding:0 12px;border:1px solid var(--hr-warn-line);border-radius:999px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);cursor:pointer}
.hr-todo-chip b{margin-left:6px}
.hr-todo-chip[aria-pressed=true]{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-todo-done{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;background:#edf1e9;color:#35592c}
@media(prefers-color-scheme:dark){.hr-todo-done{background:#243322;color:#a8d49a}}
.hr-steps{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0;padding:0;list-style:none;font-size:11px;color:var(--muted,#77706c)}
.hr-steps li+li::before{content:'›';margin-right:4px}
.hr-steps li.is-done{color:var(--hr-good-ink)}
.hr-steps li.is-now{color:var(--ink,#252122);font-weight:650}
.hr-next{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--muted,#77706c);white-space:normal}
.hr-next.is-warn{color:var(--hr-warn-ink)}
.hr-next-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hr-next-act .membership-button{min-height:36px;padding:0 12px;font-size:12px}
.hr-after{margin:14px 0 0;padding:12px 14px;border-radius:9px;background:var(--bg,#f1ede5);font-size:13px;line-height:1.7}
.hr-after ol{margin:6px 0;padding-left:20px}
.hr-self-card{margin:0 0 18px}
.membership-button.hr-wp-link{min-height:auto;padding:0;border:0;background:none;color:var(--ink,#252122);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.membership-button.hr-todo-chip{min-height:36px;padding:0 12px;font-size:12px;border:1px solid var(--hr-warn-line);border-radius:999px;background:var(--hr-warn-bg);color:var(--hr-warn-ink)}
.membership-button.hr-todo-chip[aria-pressed=true]{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
/* 주 단추는 인사 설정 v3 의 검정 주 단추(직원 초대와 같은 모양) · 안내 카드는 시안처럼 테두리 카드 */
.hr-setup-card .membership-primary,.hr-staff-list .hr-next-act .membership-primary,.hr-wp-card .membership-primary,.hr-ls-basis .membership-primary,.hr-self-card .membership-primary,.hr-next-warn-box .membership-primary,.hr-wp-dialog .membership-primary{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-wp-card .membership-primary:disabled,.hr-ls-basis .membership-primary:disabled,.hr-wp-dialog .membership-primary:disabled,.hr-staff-list .hr-next-act .membership-primary:disabled{opacity:1;background:var(--paper-soft,#faf6f1);border-color:var(--hr-field-line,#cfc5bd);color:var(--muted,#77706c)}
.hr-setup-card{border:1.5px solid var(--ink,#252122);background:var(--paper,#fffdfa);color:var(--ink,#252122)}
.hr-setup-card p{color:var(--muted,#77706c)}
.hr-next{font-weight:600;color:var(--ink,#252122)}
.hr-next.is-warn{color:var(--hr-warn-ink)}
@media(max-width:600px){.hr-setup-card{flex-direction:column;align-items:stretch}.hr-setup-links{flex-direction:column}.hr-setup-links .membership-button{width:100%}}
/* ── ★0336 연차 설정 — 상시 근로자 수 · 휴직 종류별 연차 계산 (시안 ux-design/leave-kind-rules v3) ── */
.hr-ls-choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hr-ls-warn{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);font-size:13px;line-height:1.55}
.hr-ls-warn-text{color:var(--hr-warn-ink)}
.hr-ls-kinds-head{display:grid;grid-template-columns:minmax(0,1fr) 180px 130px;gap:12px;margin-top:14px;padding-bottom:7px;border-bottom:1px solid var(--line,#e4dcd4);font-size:11px;font-weight:650;color:var(--muted,#77706c)}
.hr-ls-kinds-group{margin:12px 0 2px;font-size:11px;font-weight:700;color:var(--muted,#77706c)}
.hr-ls-kinds-list{margin:0;padding:0;list-style:none}
.hr-ls-kind{display:grid;grid-template-columns:minmax(0,1fr) 180px 130px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line,#e4dcd4)}
.hr-ls-kinds-list .hr-ls-kind:first-child{border-top:0}
.hr-ls-kind.is-hidden{opacity:.55}
.hr-ls-kind-main{display:grid;gap:3px;min-width:0}
.hr-ls-kind-main strong{font-size:14px;font-weight:650;color:var(--ink,#252122);overflow-wrap:anywhere}
.hr-ls-kind-main small{font-size:12px;color:var(--muted,#77706c);overflow-wrap:anywhere}
.hr-ls-kind-select{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--hr-field-line,#cfc5bd);border-radius:10px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit;font-size:13px}
.hr-ls-kind-fixed{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink,#252122)}
.hr-ls-kind-lock{padding:1px 6px;border:1px solid var(--line,#e4dcd4);border-radius:5px;font-size:10px;font-weight:600;color:var(--muted,#77706c)}
.hr-ls-chip-plain{background:var(--paper-soft,#f6f3ef);color:var(--muted,#77706c);white-space:normal}
.hr-ls-overlap strong{display:block;margin-bottom:4px}.hr-ls-overlap p{margin:4px 0 0}.hr-ls-overlap .membership-button{margin-top:8px}
.hr-ls-kinds-help{margin:12px 0 0;padding-left:18px;font-size:12px;line-height:1.7;color:var(--muted,#77706c)}
.hr-ls-dialog ul{margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.7}
.hr-ls-dialog-wide{width:640px!important}
.hr-ls-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;padding:12px;border-radius:10px;background:var(--paper-soft,#f6f3ef);font-size:13px}
.hr-ls-facts dt{color:var(--muted,#77706c)}.hr-ls-facts dd{margin:0;font-weight:600}
.hr-ls-attest{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 12px;border:1px solid var(--line,#e4dcd4);border-radius:10px;font-size:13px;line-height:1.5;cursor:pointer}
.hr-ls-attest input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink,#252122)}
.hr-ls-field{display:grid;gap:6px;margin-top:12px;font-size:13px}.hr-ls-field>span:first-child{font-size:12px;font-weight:650}
.hr-ls-field select,.hr-ls-field input{min-height:40px;padding:8px 10px;border:1px solid var(--hr-field-line,#cfc5bd);border-radius:10px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit}
.hr-ls-preview{margin-top:14px;padding:12px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper-soft,#f6f3ef)}
.hr-ls-table-wrap{margin-top:8px;overflow-x:auto}
.hr-ls-preview table{width:100%;border-collapse:collapse;font-size:12.5px}
.hr-ls-preview th,.hr-ls-preview td{padding:7px 5px;border-top:1px solid var(--line,#e4dcd4);text-align:left}
.hr-ls-preview th{border-top:0;font-size:11px;color:var(--muted,#77706c)}
@media(max-width:900px){.hr-ls-choices-3{grid-template-columns:1fr}.hr-ls-kinds-head,.hr-ls-kind{grid-template-columns:minmax(0,1fr) 160px}.hr-ls-kinds-head span:last-child{display:none}.hr-ls-kind-tag{grid-column:1/-1}}
@media(max-width:600px){.hr-ls-kinds-head{display:none}.hr-ls-kind{grid-template-columns:minmax(0,1fr);gap:7px}.hr-ls-kind-tag{grid-column:auto}.hr-ls-dialog-wide{width:auto!important}}
/* ★0333 내 인적사항 M2a — 새 동의서 안내 · 비상연락처 · 급여 계좌(준비 중) · 동의서 창 · 사람 창 비상연락처 · 회사 설정(시안 v7 · 색은 셸 변수만) */
.hr-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.hr-card-title h2{margin:0}
.hr-chip{display:inline-block;font-size:11px;line-height:1;padding:6px 9px;border-radius:999px;border:0;color:var(--muted,#77706c);background:var(--bg,#f4f0ea);white-space:nowrap}
.hr-chip-good{color:#1d6b3f;background:#e1f0e6}
@media (prefers-color-scheme:dark){.hr-chip-good{color:#9bd7b1;background:#1f3a2b}}
.hr-consent-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-color:var(--ink,#252122)}
.hr-consent-banner strong{display:block;font-size:15px}.hr-consent-banner p{margin:4px 0 0;font-size:13px}
.hr-card-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:14px 0 0;border-top:1px solid var(--line,#e4dcd4);font-size:14px}
/* 시안 v7 .account 상자 — 내 인적사항 카드 안의 빈 자리·준비 중 한 줄은 옅은 상자(둥글기 14 · 안쪽 18) */
.hr-self-page .hr-card-empty{margin-top:0;padding:18px;border:1px solid var(--line-soft,#ece5de);border-radius:14px;background:var(--paper-soft,#faf6f1);font-size:13px}
@media(max-width:620px){.hr-self-page .hr-card-empty{flex-direction:column;align-items:stretch}.hr-self-page .hr-card-empty .membership-button{width:100%}}
.hr-self-page form.hr-em-form{display:block}
.hr-em-fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);gap:10px 12px;margin-top:10px}
.hr-em-field{display:grid;gap:6px;min-width:0}.hr-em-field label{font-size:13px;font-weight:500}
.hr-em-field input{box-sizing:border-box;width:100%;min-height:44px;min-width:0}
.hr-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}
.hr-card-status{margin-right:auto;font-size:13px;color:var(--ink,#252122)}.hr-card-status.hr-bad{color:var(--accent,#db2535)}
.hr-text-button{background:none;border:0;color:var(--ink,#252122);text-decoration:none;font-weight:600;padding:8px 4px;min-height:36px;cursor:pointer;font:inherit;font-size:13px}
.hr-impact-backdrop .hr-consent-dialog{width:760px}
/* ★한 문서(사장님 2026-09-29) — 따로 선 상자 · 안쪽 스크롤 없음. 스크롤은 창(.hr-impact) 하나 */
.hr-consent-onedoc{margin-top:10px}
.hr-consent-part+.hr-consent-part{margin-top:22px;padding-top:18px;border-top:1px solid var(--line,#e4dcd4)}
.hr-consent-head{margin:0 0 8px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink,#252122)}
.hr-consent-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65;color:var(--ink,#252122)}
.hr-consent-check{display:flex;gap:10px;align-items:center;margin-top:12px;font-weight:600;font-size:14px;min-height:44px}
.hr-consent-check input{width:20px;height:20px;margin:0;accent-color:var(--ink,#252122)}
.hr-consent-status{margin:4px 0 0;font-size:13px;min-height:1em;color:var(--muted,#77706c)}.hr-consent-status.hr-good{color:var(--ink,#252122)}.hr-consent-status.hr-bad{color:var(--accent,#db2535)}
.hr-consent-status:empty{display:none}
.hr-consent-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:13px}
.hr-person-emergency dd{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}.hr-person-em-acts{display:inline-flex;gap:4px;flex-wrap:wrap}
.hr-copy-text{padding:10px;border:1px dashed var(--line,#e4dcd4);border-radius:8px;font-size:13px;user-select:all;overflow-wrap:anywhere}
@media(max-width:620px){.hr-em-fields{grid-template-columns:minmax(0,1fr)}.hr-consent-banner .membership-button{width:100%}}
.hr-small-button{min-height:36px;padding:6px 10px;font-size:12px;font-weight:600}
/* ★설정 관문 P0 — 쉬는 요일 일곱 토글(연차 설정 탭) */
.hr-ls-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hr-ls-day{width:48px;height:48px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hr-ls-day[aria-pressed=true]{border-color:var(--ink,#252122);background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-ls-day.is-suggest{border-style:dashed;border-color:#b98232;background:#fff6e6;color:#7a4a0c}
.hr-ls-day:disabled{cursor:default;opacity:.7}
.hr-ls-offdays-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;color:var(--muted,#77706c);font-size:12px}
@media(prefers-color-scheme:dark){.hr-ls-day.is-suggest{background:#3a2d1a;color:#f1c98a;border-color:#a47a3c}}
@media(max-width:600px){.hr-ls-days{gap:6px}.hr-ls-day{width:calc((100% - 36px)/7);min-width:0;height:44px;font-size:13px}}
/* 사업장 탭 — 사업자등록증 주소(bizreg v4 · 시안 ux-design/bizreg-workplace) */
.hr-wp-addr{font-size:14px!important;color:var(--ink,#252122)!important}
.hr-wp-addr.is-empty{font-size:13px!important;color:var(--muted,#77706c)!important}
.hr-wp-src{justify-self:start;display:inline-flex;align-items:center;margin-top:3px;padding:3px 9px;border-radius:999px;border:1px solid var(--line,#e4dcd4);background:var(--paper,#fffdfa);font-size:12px!important;font-weight:650;color:var(--muted,#77706c)!important}
.hr-wp-src.is-cert{border-color:transparent;background:var(--hr-good-bg,#e4f4ee);color:var(--hr-good-ink,#126048)!important}
.hr-wp-nudge{display:grid;gap:8px;justify-items:start;margin-top:6px;padding:12px 14px;border:1px dashed var(--line,#e4dcd4);border-radius:11px;background:var(--paper,#fffdfa)}
.hr-wp-nudge p{margin:0;font-size:13px;line-height:1.55;color:var(--ink,#252122)}
.hr-wp-nudge-line{display:flex;flex-wrap:wrap;gap:4px 8px}
.hr-wp-nudge-label{font-size:12px!important;color:var(--muted,#77706c)!important}
.hr-wp-nudge-value{font-size:13px;font-weight:650;overflow-wrap:anywhere}
.hr-wp-nudge .membership-button{margin-top:0}
.hr-wp-item{align-items:flex-start}
.hr-wp-add{gap:14px;flex-wrap:wrap}
.hr-wp-add .membership-button{margin-top:0}
.hr-bz-drop{display:grid;justify-items:center;gap:8px;margin-top:16px;padding:32px 18px;border:1.5px dashed var(--line,#e4dcd4);border-radius:14px;background:var(--bg,#f6f2ed);text-align:center}
.hr-bz-drop strong{font-size:15px}
.hr-bz-drop p{margin:0;font-size:13px;color:var(--muted,#77706c)}
.hr-bz-drop-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.hr-bz-drop-row .membership-button{margin-top:0}
.hr-bz-reading{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px 0;font-size:14px}
.hr-bz-spin{width:20px;height:20px;border:2px solid var(--line,#e4dcd4);border-top-color:currentColor;border-radius:50%;animation:hr-bz-spin .8s linear infinite}
@keyframes hr-bz-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hr-bz-spin{animation:none}}
.hr-bz-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0;font-size:13px;color:var(--muted,#77706c)}
.hr-bz-file span{overflow-wrap:anywhere}
.hr-bz-fields{display:grid;gap:14px;margin-top:14px}
.hr-bz-field input{width:100%;box-sizing:border-box}
.hr-bz-field input[readonly]{background:var(--bg,#f6f2ed);color:var(--muted,#77706c)}
.hr-bz-warn{font-size:12px;font-weight:650;color:var(--hr-warn-ink,#7a4a0c)}
.hr-bz-warn[hidden],.hr-wp-err[hidden]{display:none}
.hr-workplace .hr-wp-link{min-height:44px}
.hr-bz-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start;margin-top:12px}
.hr-bz-side{display:grid;gap:6px;min-width:0}
.hr-bz-preview{display:block;width:100%;max-height:520px;object-fit:contain;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--bg,#f6f2ed)}
iframe.hr-bz-preview{height:460px}
.hr-bz-main{min-width:0}
.hr-bz-main .hr-wp-warn{margin-top:0}
@media(max-width:1000px){.hr-bz-grid{grid-template-columns:minmax(0,1fr)}.hr-bz-preview{max-height:320px}iframe.hr-bz-preview{height:300px}}
:root{--hr-good-bg:#e4f4ee}
@media(prefers-color-scheme:dark){:root{--hr-good-bg:#1f3a2c}}
.hr-bz-field input[readonly]{background:rgba(127,127,127,.12)}
.hr-bz-main .hr-wp-foot{margin-bottom:72px}
@media(max-width:600px){.hr-bz-main .hr-wp-foot{margin-bottom:84px}}
/* ★설정 관문 한 줄 틀(D7) — 카드 안의 관문 줄은 위에서 아래로 쌓는다 */
.hr-setup-card{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
.hr-setup-card>strong{font-size:15px}
.hr-setup-card .sg{justify-items:start}
/* ★설정 관문 시안 v2 — 연차 설정 탭 맨 위 「회사 설정 N개」 */
.hr-ls-setup{display:grid;gap:8px;margin:0 0 18px}
.hr-ls-setup>strong{font-size:15px;color:var(--ink,#252122)}
/* ══ 연차 설정 단순화 M1(2026-09-27 · 설계 docs/leave-setting-simple-20260927.md FROZEN v7.1 · 시안 ux-design/leave-setting-simple v7.1) ══
   ① 처음 설정(질문 하나씩) ② 요약 한 줄 + 줄 다섯(「바꾸기」) ③ 꺼짐 한 줄 · 휴직 종류 창 · ⓘ 는 `info-hint.mjs` 가 스스로 심는다 */
.hr-ls-stack{display:grid;gap:14px}
.hr-ls-stack>.hr-ls-result:empty{display:none}
.hr-ls-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:-1px;border:0}
.hr-ls-quiet.membership-button{min-height:36px;padding:0 14px;background:transparent}
.hr-leave-setting .hr-ls-card{border-radius:20px}
.hr-ls-setup{padding:24px 26px}
.hr-ls-setup-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hr-ls-setup-top h2{margin:0;font-size:20px;letter-spacing:-.03em;color:var(--ink,#252122)}
.hr-ls-steps{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;padding:0;list-style:none}
.hr-ls-steps li{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 6px;border:1px solid var(--line,#e4dcd4);border-radius:999px;color:var(--muted,#77706c);font-size:13px}
.hr-ls-step-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper-soft,#f6f3ef);font-size:12px;font-weight:700}
.hr-ls-steps li.is-now{border-color:var(--ink,#252122);color:var(--ink,#252122);font-weight:700}
.hr-ls-steps li.is-now .hr-ls-step-num{background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-ls-steps li.is-done{color:var(--ink,#252122)}
.hr-ls-steps li.is-done .hr-ls-step-num{background:#dff1e9;color:var(--green,#14785e)}
.hr-ls-steps li small{margin-left:4px;color:var(--green,#14785e);font-size:11px;font-weight:700}
.hr-ls-saved-lines{display:grid;gap:4px;margin:-6px 0 16px;padding:0;list-style:none;font-size:13px;color:var(--green,#14785e);font-weight:700}
.hr-ls-qcard{padding:20px 0 0;border-top:1px solid var(--line-soft,#ebe4dc)}
.hr-ls-qcard h3{display:flex;align-items:center;margin:0 0 12px;font-size:17px;color:var(--ink,#252122)}
.hr-ls-q-legend{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--muted,#77706c);font-size:12px}
.hr-ls-q-warn{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--ink,#252122)}
.hr-ls-effects{margin:10px 0 0;padding:12px 14px 12px 30px;border-radius:12px;background:var(--paper-soft,#f6f3ef);color:var(--ink,#252122);font-size:13px;line-height:1.7}
.hr-ls-known{display:grid;gap:6px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft,#ebe4dc);list-style:none;font-size:13px}
.hr-ls-known li{display:flex;gap:10px}.hr-ls-known span{min-width:110px;color:var(--muted,#77706c)}.hr-ls-known b{color:var(--ink,#252122)}
.hr-ls-choice-text b{display:inline-flex;align-items:center}
/* 근무 요일 — 요일마다 근무/쉼(M1 · 반일·격주 없음) */
.hr-ls-wk{display:grid;gap:10px}
.hr-ls-wk-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hr-ls-wk-day{min-width:44px;font-weight:800;font-size:14px;color:var(--ink,#252122)}
.hr-ls-wk-weekdays b{font-size:14px;color:var(--ink,#252122)}
.hr-ls-seg{display:inline-grid;grid-template-columns:repeat(2,auto);gap:0;margin:0;padding:0;border:1px solid var(--line,#e4dcd4);border-radius:12px;overflow:hidden;min-width:0}
.hr-ls-seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;min-width:72px;padding:0 14px;border-left:1px solid var(--line,#e4dcd4);font-size:13px;font-weight:700;cursor:pointer;background:var(--paper,#fffdfa);color:var(--ink,#252122)}
.hr-ls-seg label:first-of-type{border-left:0}
.hr-ls-seg input{position:absolute;opacity:0;pointer-events:none}
.hr-ls-seg label:has(input:checked){background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-ls-seg label:has(input:focus-visible){outline:2px solid var(--ink,#252122);outline-offset:-3px}
.hr-ls-seg label.is-suggest:has(input:checked){background:var(--paper-soft,#f6f3ef);color:var(--ink,#252122);box-shadow:inset 0 0 0 2px var(--ink,#252122)}
/* 요약 */
.hr-ls-summary{padding:6px 26px 18px}
.hr-ls-sum-top{padding:18px 0 14px;border-bottom:1px solid var(--line,#e4dcd4)}
.hr-ls-sum-line{margin:0;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.4;color:var(--ink,#252122)}
.hr-ls-sum-rows{margin:0;padding:0;list-style:none}
.hr-ls-sum-row{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line-soft,#ebe4dc)}
.hr-ls-sum-row:last-child{border-bottom:0}
.hr-ls-sum-label{display:flex;align-items:center;padding-top:2px;color:var(--muted,#77706c);font-size:13px;font-weight:700}
.hr-ls-sum-value{min-width:0}
.hr-ls-sum-value b{display:inline-flex;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--ink,#252122)}
.hr-ls-sum-value .hr-ls-chip{margin-left:6px}
.hr-ls-sum-value small{display:block;margin-top:4px;color:var(--muted,#77706c);font-size:12px;line-height:1.5}
.hr-ls-sum-value .hr-ls-result{margin:8px 0 0}
.hr-ls-sum-action{display:flex;justify-content:flex-end;min-width:72px}
.hr-ls-sum-action .membership-button{margin-top:0}
/* ★0348 — 근무 요일 줄(근무조 둘 이상): 「직원 배정」 · 「모두 같은 요일로」 두 단추 */
.hr-wg-row-acts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hr-wg-row-acts .membership-button{margin-top:0;white-space:nowrap}
.hr-wg-merge{border:0;margin:0 0 12px;padding:0;min-width:0}
.hr-ls-sum-row.is-editing{grid-template-columns:130px minmax(0,1fr);background:var(--paper-soft,#f6f3ef);margin:0 -14px;padding:16px 14px;border-radius:14px}
.hr-ls-sum-edit{min-width:0}
.hr-ls-sum-edit .hr-ls-choices{margin-top:0}
.hr-ls-actions{display:flex;gap:8px;justify-content:flex-end}
.hr-ls-actions .membership-button{margin-top:0}
.hr-ls-actions-left{justify-content:flex-start;margin-top:10px}
.hr-ls-lock-wrap{display:inline-flex;align-items:center;gap:2px}
.hr-ls-lock-mark{display:inline-block;padding:2px 6px;border:1px solid var(--line,#e4dcd4);border-radius:5px;font-size:10px;font-weight:700;color:var(--muted,#77706c)}
.hr-ls-summary>.hr-ls-lock{margin:12px 0 0}
/* 맨 위 「회사 설정 N개」 — 휴직 종류 규칙 확인만(§4-I) */
.hr-ls-gate{display:grid;gap:8px;padding:14px 18px;border:1px solid var(--line,#e4dcd4);border-radius:16px;background:var(--paper,#fffdfa)}
.hr-ls-gate>strong{font-size:14px;color:var(--ink,#252122)}
.hr-ls-gate-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink,#252122)}
.hr-ls-gate-line .membership-button{margin-top:0}
/* 휴직 종류 창 */
.hr-ls-dialog-head{display:flex;align-items:center;gap:12px}
.hr-ls-dialog-head .hr-ls-x{width:36px;min-width:36px;height:36px;min-height:36px;margin:0 0 0 auto;padding:0;font-size:15px}
.hr-ls-dialog .hr-ls-result{margin:10px 0 0}
.hr-ls-kind-lines{margin:0;padding:0;list-style:none}
.hr-ls-kind-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft,#ebe4dc)}
.hr-ls-kind-line.needs{grid-template-columns:minmax(0,1fr);background:var(--paper-soft,#f6f3ef);margin:0 -12px;padding:12px;border-radius:12px;border-top:0}
.hr-ls-kind-line.is-hidden{opacity:.55}
.hr-ls-kind-main strong{display:inline-flex;align-items:center;flex-wrap:wrap}
.hr-ls-kind-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.hr-ls-kind-right .membership-button{margin-top:0}
.hr-ls-kinds-fixed{margin:14px 0 0}.hr-ls-kinds-fixed summary{cursor:pointer;color:var(--muted,#77706c);font-size:13px;font-weight:700;padding:6px 0}
.hr-ls-treat{margin:6px 0 0;padding:0;border:0;min-width:0}
.hr-ls-treat legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--ink,#252122)}
.hr-ls-treat-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hr-ls-treat-opts label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdfa);font-size:14px;color:var(--ink,#252122);cursor:pointer}
.hr-ls-treat-opts label:has(input:checked){border-color:var(--ink,#252122);box-shadow:inset 0 0 0 1px var(--ink,#252122)}
.hr-ls-treat-opts label.is-dis{opacity:.5;cursor:default}
.hr-ls-treat-opts input{accent-color:var(--ink,#252122)}
.hr-ls-treat .hr-ls-attest{margin-top:10px}
.hr-ls-current{margin:6px 0 8px;font-size:13px;color:var(--muted,#77706c)}
.hr-ls-effect{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--ink,#252122)}
@media(max-width:620px){
  .hr-ls-setup,.hr-ls-summary{padding-left:16px;padding-right:16px}
  .hr-ls-sum-line{font-size:18px}
  .hr-ls-sum-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .hr-ls-sum-label{grid-column:1/-1}
  .hr-ls-sum-row.is-editing{grid-template-columns:minmax(0,1fr);margin:0 -8px;padding:14px 8px}
  .hr-ls-sum-edit .hr-ls-actions{width:100%}.hr-ls-sum-edit .hr-ls-actions .membership-button{flex:1}
  .hr-ls-kind-line{grid-template-columns:minmax(0,1fr)}.hr-ls-kind-right{justify-content:flex-start}
  .hr-ls-known span{min-width:96px}
  .hr-ls-treat-opts{grid-template-columns:minmax(0,1fr)}
  .hr-ls-gate-line{flex-direction:column;align-items:stretch}.hr-ls-gate-line .membership-button{width:100%}
  .hr-ls-wk-row{gap:6px}.hr-ls-wk-day{min-width:100%}
  .hr-ls-seg{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.hr-ls-seg label{padding:0 4px;min-width:0}
}
@media(prefers-color-scheme:dark){.hr-ls-steps li.is-done .hr-ls-step-num{background:#183b32;color:#a8d49a}.hr-ls-saved-lines,.hr-ls-steps li small{color:#a8d49a}}
/* 휴직 대화 — 회사 종류의 연차 계산을 그 자리에서(§4-E · §4-I) */
.hr-life-calc-missing{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0;padding:11px 13px;border-radius:10px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);font-size:13px;line-height:1.55}
.hr-life-calc-missing strong{font-size:13px}
.hr-life-current{margin:0;font-size:13px;color:var(--muted,#77706c)}
.hr-life-effect{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--ink,#252122)}
.hr-life-attest{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:13px;line-height:1.5;cursor:pointer}
.hr-life-attest input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink,#252122)}
.hr-life-scope-chip{display:inline-block;margin-top:6px;padding:4px 9px;border-radius:999px;background:var(--paper-soft,#f6f3ef);color:var(--muted,#77706c);font-size:12px;font-weight:650}
.hr-life-annual-calc{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.hr-life-kind-label{display:inline-flex;align-items:center}
.hr-annual-unconfirmed{display:inline-block;margin-left:6px;font-size:11px;padding:5px 8px;border-radius:5px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);white-space:nowrap}
.hr-leave-setting .membership-primary:not(.hr-danger){background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-leave-setting .membership-primary:disabled{opacity:1;background:var(--paper-soft,#faf6f1);border-color:var(--hr-field-line,#cfc5bd);color:var(--muted,#77706c)}
/* 연차 계산 두 칸 — 시안 v7.1 treat-opts 모양(테두리 칸 둘) */
.hr-life-form [data-hr="life-rule"] .hr-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hr-life-form [data-hr="life-rule"] .hr-life-kind-label{display:flex;align-items:center;gap:2px;min-height:44px;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdfa)}
.hr-life-form [data-hr="life-rule"] .hr-life-kind-label:has(input:checked){border-color:var(--ink,#252122);box-shadow:inset 0 0 0 1px var(--ink,#252122)}
.hr-life-form [data-hr="life-rule"] .hr-life-kind-label:has(input:disabled){opacity:.5}
.hr-life-form [data-hr="life-rule"] .hr-choice-option{flex:1;min-height:0;padding:0;border:0;background:transparent}
.hr-life-form [data-hr="life-rule"] .hr-life-scope-chip{margin-top:10px}
@media(max-width:620px){.hr-life-form [data-hr="life-rule"] .hr-choice-row{grid-template-columns:minmax(0,1fr)}}
.hr-impact-backdrop .hr-impact .hr-life-calc-missing strong{font-size:13px}
.hr-impact-backdrop .hr-impact .hr-ls-kind-main strong{font-size:14px;color:var(--ink,#252122)}
.hr-impact-backdrop .hr-impact .hr-ls-kind-main small{display:block;margin-top:3px;font-size:12px;color:var(--muted,#77706c)}
.hr-impact-backdrop .hr-impact.hr-ls-dialog ul.hr-ls-kind-lines{margin:0;padding:0}
.hr-ls-kinds-group{margin:14px 0 4px;font-size:11px;font-weight:700;color:var(--muted,#77706c)}
.hr-ls-kind-pickwrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hr-ls-kind-pickwrap .hr-ls-current{margin:0}
.hr-ls-kind-pickwrap .hr-ls-treat{flex:0 1 360px}
@media(max-width:620px){.hr-ls-kind-pickwrap{display:block}.hr-ls-kind-pickwrap .hr-ls-current{margin:6px 0 8px}}
/* 규모 · 기준 고르는 칸 — 시안 v7.1 .basis 처럼 두 칸 나란히(좁은 화면은 한 칸) */
.hr-leave-setting .hr-ls-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.hr-leave-setting .hr-ls-choices{grid-template-columns:minmax(0,1fr)}}

/* ★근무조 M3(0345 · 시안 ux-design/leave-setting-simple v7.1 simple.css v4~v7 을 제품 변수로) — 격주 · 직원마다 다름 · 근무조 하위 화면 · 직원 줄 칩 */
.hr-ls-seg.hr-wg-seg{grid-template-columns:repeat(4,auto)}
/* ★근무조 M4(0346) — 반일 근무 칸이 들어와 네 칸(근무 · 반일 근무 · 쉼 · 격주) 한 줄 · 「반일 근무일 연차 *」 두 칸(시안 half-leave) */
.hr-wg-halfrule{border:0;margin:14px 0 0;padding:0;min-width:0}
.hr-wg-halfrule legend{float:left;width:100%;padding:0;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink,#252122)}
.hr-wg-halfrule .hr-wg-opts{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hr-wg-halfrule .hr-wg-opts label{min-height:44px;padding:0 14px;border-radius:12px}
.hr-wg-editor{display:grid;gap:10px}
.hr-wg-alt{margin:0 0 4px 56px;padding:12px 14px;border-radius:12px;background:var(--paper-soft,#f6f3ef);display:grid;gap:8px}
.hr-wg-q{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--ink,#252122)}
.hr-wg-opts{display:flex;flex-wrap:wrap;gap:6px}
.hr-wg-opts label{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:10px;background:var(--paper,#fffdfa);font-size:13px;color:var(--ink,#252122);cursor:pointer}
.hr-wg-opts label:has(input:checked){border-color:var(--ink,#252122);box-shadow:inset 0 0 0 1px var(--ink,#252122);font-weight:700}
.hr-wg-opts label:has(input:disabled){opacity:.55;cursor:default}
.hr-wg-opts input{accent-color:var(--ink,#252122)}
.hr-wg-mode{margin:0 0 14px}
.hr-wg-effect{margin:2px 0 0;font-size:13px;font-weight:700;color:var(--ink,#252122)}
.hr-wg-block{display:grid;gap:10px;margin:0 0 14px;padding:14px;border:1px solid var(--line,#e4dcd4);border-radius:14px;background:var(--paper,#fffdfa)}
.hr-wg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hr-wg-name input{width:140px;min-height:38px;padding:0 10px;border:1px solid var(--hr-field-line,#cfc5bd);border-radius:10px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit;font-weight:800}
.hr-wg-intro{margin:10px 0 0;padding:12px 14px;border:1px dashed var(--line,#e4dcd4);border-radius:12px}
.hr-wg-intro .hr-ls-field{margin-top:0}
.hr-wg-hint-line{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--muted,#77706c)}
.hr-ls-sum-count{font-weight:500;color:var(--muted,#77706c);font-size:13px}
.hr-wg-text-link{min-height:32px;padding:0 4px;border:0;background:transparent;color:var(--ink,#252122);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hr-wg-back{display:inline-flex;align-items:center;justify-self:start;min-height:36px;margin:0 0 4px;padding:0 4px;border:0;background:transparent;color:var(--ink,#252122);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hr-wg-back:hover{text-decoration:underline}
.hr-wg-page{padding:20px 22px}
.hr-wg-page h2{display:flex;align-items:center;margin:0 0 12px;font-size:17px;color:var(--ink,#252122)}
.hr-wg-page-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hr-wg-page-top .membership-button{margin-top:0}
.hr-wg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hr-wg-card{display:grid;gap:6px;padding:16px;border:1px solid var(--line,#e4dcd4);border-radius:16px;background:var(--paper,#fffdfa)}
.hr-wg-card-head{display:flex;align-items:center;gap:8px}.hr-wg-card-head strong{font-size:16px;color:var(--ink,#252122)}
.hr-wg-muted{margin-left:auto;font-size:12px;color:var(--muted,#77706c)}
.hr-wg-week{margin:0;font-weight:700;font-size:14px;color:var(--ink,#252122)}
.hr-wg-members{margin:4px 0 0;color:var(--muted,#77706c);font-size:13px}
.hr-wg-pending{margin:0;font-size:13px;color:var(--ink,#252122)}
.hr-wg-card .hr-ls-actions .membership-button{margin-top:0}
.hr-wg-people,.hr-wg-check,.hr-wg-hist{margin:0;padding:0;list-style:none}
.hr-wg-person{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line-soft,#ebe4dc)}
.hr-wg-person strong{color:var(--ink,#252122)}
.hr-wg-person-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hr-wg-person-side .membership-button{margin-top:0}
.hr-wg-chip{display:inline-block;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--paper-soft,#f6f3ef);color:var(--ink,#252122);border:1px solid var(--line,#e4dcd4);white-space:nowrap}
.hr-wg-chips{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-left:6px}
.hr-wg-check li label{display:flex;align-items:center;gap:10px;min-height:44px;border-top:1px solid var(--line-soft,#ebe4dc);font-size:14px;color:var(--ink,#252122)}
.hr-wg-check input{width:18px;height:18px;accent-color:var(--ink,#252122)}
.hr-wg-check small{margin-left:auto;color:var(--muted,#77706c);font-size:12px}
.hr-wg-hist li{margin:6px 0;font-size:13px;color:var(--ink,#252122)}
.hr-wg-impact ul{margin:6px 0;padding-left:18px}.hr-wg-impact p{margin:4px 0}.hr-wg-impact .membership-button{margin-top:6px}
.hr-wg-sum{margin:6px 0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink,#252122)}
.hr-wg-dialog .hr-wg-alt{margin-left:0}
@media(max-width:600px){
  .hr-ls-seg.hr-wg-seg{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}.hr-wg-halfrule .hr-wg-opts{grid-template-columns:minmax(0,1fr)}.hr-ls-seg.hr-wg-seg label{min-width:0;padding:0 4px}
  .hr-wg-alt{margin-left:0}
  .hr-wg-cards{grid-template-columns:minmax(0,1fr)}
  .hr-wg-person{flex-direction:column;align-items:stretch}.hr-wg-person-side{justify-content:flex-start}
  .hr-wg-name input{width:100%}
  .hr-wg-page{padding:16px}
  .hr-wg-chips{margin-left:0;margin-top:4px}
}

/* ★직원 목록 「상태」 칸 — 상태 배지 · 근무조 칩 · (예정 이동 칩) · 「바꾸기」를 한 기둥에 쌓는다(2026-09-28 · 사장님 화면).
   종전: 배지는 왼쪽(인라인), 근무조 묶음(.hr-wg-chips)은 margin-left 6px 인라인 flex 로 줄바꿈되어 셋의 가운데가 서로 어긋났다(965.5/972.9/974.9px).
   이제 한 flex 기둥에서 같은 가운데 · 같은 간격. 근무조 묶음은 display:contents 로 풀어 그 안의 칩과 「바꾸기」도 기둥의 항목이 된다.
   td 는 표 칸 그대로 둔다 — 줄의 다른 칸과 세로 가운데(vertical-align:middle)가 함께 선다. */
.hr-staff-list .hr-status-stack{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hr-staff-list .hr-status-stack .hr-wg-chips{display:contents}
.hr-staff-list .hr-status-stack>*,.hr-staff-list .hr-status-stack .hr-wg-chips>*{margin:0}
.hr-staff-list .hr-status-stack [data-hr=wg-chip-next]{max-width:100%;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-align:center;border-radius:10px;line-height:1.35}
/* 110px 칸 — 좌우 여백 20px 이면 속이 70px 라 예정 이동 칩이 낱말 가운데서 끊겼다. 이 칸만 10px */
@media(min-width:1001px){.hr-staff-list .hr-table td[data-hr-cell=status]{padding-left:10px;padding-right:10px}}
.hr-staff-list .hr-status-stack .hr-wg-text-link{min-height:24px;line-height:24px}
.hr-staff-list .hr-table th:nth-child(3){text-align:center}
/* 좁은 화면의 한 줄 카드는 상태가 둘째 칸 «왼쪽»에 선다(화면 감수 #16) — 기둥의 축도 왼쪽 */
@media(max-width:1000px){.hr-staff-list .hr-status-stack{align-items:flex-start}.hr-staff-list .hr-status-stack [data-hr=wg-chip-next]{text-align:left}}
/* ★HR 편집 M1(설계 3판 §4 · §5 · 시안 ux-design/hr-edit-adjust) — 목록 「연차」 칸 · 작은 표 · 창의 「연차」 · 「수정」 모드 */
.hr-staff-list .hr-table th.hr-th-leave{width:118px}
.hr-staff-list td[data-hr-cell=leave]{position:relative;overflow:visible}
.hr-leave-wrap{position:relative;display:inline-block}
.hr-leave-cell{display:grid;gap:2px;margin:-4px -6px;padding:4px 6px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:32px}
.hr-leave-cell strong{font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hr-leave-cell:hover,.hr-leave-cell:focus-visible{background:var(--bg,#f4f0ea);outline:none}
.hr-leave-state{color:var(--muted,#77706c);font-size:13px;font-weight:700;margin:0}
.hr-leave-none{color:var(--muted,#77706c)}
.hr-leave-pop{position:absolute;z-index:6;left:-6px;top:calc(100% + 4px);display:none;min-width:210px;padding:12px 14px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdfa);box-shadow:0 12px 34px rgba(30,24,22,.18);cursor:default;text-align:left}
.hr-leave-wrap:hover .hr-leave-pop,.hr-leave-wrap:focus-within .hr-leave-pop,.hr-leave-wrap[data-open=true] .hr-leave-pop{display:block}
.hr-leave-bd dl{display:grid;margin:0;font-size:12.5px}
.hr-leave-bd dl>div{display:flex;justify-content:space-between;gap:18px;padding:5px 0}
.hr-leave-bd dt{color:var(--muted,#77706c)}.hr-leave-bd dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hr-leave-bd dl>div.is-sum{margin-top:4px;padding-top:8px;border-top:1px solid var(--line,#e4dcd4)}.hr-leave-bd dl>div.is-sum dt{color:var(--ink,#252122);font-weight:700}
.hr-leave-note{margin:6px 0 0;color:var(--muted,#77706c);font-size:11.5px}
/* ★폰에서 작은 표가 열려 있는 동안 구슬을 내린다(창 · 입력 화면 규칙과 같은 방식) — 닫으면 돌아온다 */
body:has(.hr-leave-wrap[data-open=true]) #visionFloat{display:none}
/* 작은 표가 표 틀 밖으로 나가도 잘리지 않게 — 둥근 머리 모서리는 칸이 잇는다 */
.hr-staff-list .hr-table-scroll:has(.hr-leave-wrap){overflow:visible}
.hr-staff-list .hr-table-scroll:has(.hr-leave-wrap) thead th:first-child{border-top-left-radius:15px}
.hr-staff-list .hr-table-scroll:has(.hr-leave-wrap) thead th:last-child{border-top-right-radius:15px}
@media(max-width:1000px){
  .hr-staff-list td[data-hr-cell=leave]{grid-column:1;grid-row:3;padding-left:52px}
  .hr-leave-cell{grid-auto-flow:column;align-items:baseline;justify-content:start}
}
@media(max-width:600px){.hr-staff-list td[data-hr-cell=leave]{padding-left:44px}}
/* 창 — 「인사 정보」 머리의 「수정」 · 「연차」 읽기 */
.hr-sheet-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hr-sheet-sec-head .hr-sheet-section{margin-bottom:8px}
.hr-sheet-body .hr-edit-open{flex:none;min-height:34px;padding:6px 14px;font-size:13px;background:none}
.hr-sheet-leave{display:grid;gap:8px;margin:4px 0 18px}
.hr-sheet-leave .hr-sheet-section{margin-bottom:0}
.hr-sheet-leave .hr-leave-big{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--muted,#77706c);font-size:13px}
.hr-sheet-leave .hr-leave-big b{color:var(--ink,#252122);font-size:30px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hr-leave-box{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:center;padding:16px;border-radius:14px;background:var(--bg,#f4f0ea)}
.hr-leave-box .hr-leave-big{display:grid;gap:2px}
@media(max-width:600px){.hr-leave-box{grid-template-columns:1fr;gap:8px}}
/* 「수정」 모드 — 고칠 수 없는 칸은 점선, 바뀐 칸은 이름표 · 테두리 색 */
.hr-edit-form{display:grid;gap:16px;margin:0 0 18px}
.hr-edit-form .hr-sheet-section{margin:10px 0 0}
.hr-edit-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hr-edit-field{display:grid;gap:6px;min-width:0}
.hr-edit-field label{font-size:12px;font-weight:700}
.hr-edit-field select{box-sizing:border-box;width:100%;min-height:42px;font:inherit}
.hr-edit-field.is-changed label{color:var(--hr-changed,#2f55c4)}
.hr-edit-field.is-changed select{border-color:var(--hr-changed,#2f55c4)}
/* 바뀐 칸은 파랑(붉음은 오류에만) */
:root{--hr-changed:#2f55c4}
@media(prefers-color-scheme:dark){:root{--hr-changed:#9db4ff}}
.hr-locked{display:grid;gap:6px;min-width:0}
.hr-locked-label{font-size:12px;font-weight:700}
.hr-locked-value{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;margin:0;padding:0 12px;border:1px dashed var(--line,#e4dcd4);border-radius:11px;color:var(--ink,#252122);font-size:14px;overflow-wrap:anywhere}
.hr-locked-value small{color:var(--muted,#77706c);font-size:11px;font-weight:700;white-space:nowrap}
.hr-locked-live .hr-locked-value{border-style:solid}
.hr-change-list{margin:0;padding:0;list-style:none}
.hr-change-list li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line,#e4dcd4);font-size:14px}
.hr-change-list li:first-child{border-top:0}
@media(max-width:600px){.hr-edit-two{grid-template-columns:minmax(0,1fr)}.hr-change-list li{grid-template-columns:1fr;gap:2px}}
@media(prefers-color-scheme:dark){.hr-leave-pop{background:var(--paper,#242122);border-color:var(--line,#403a3a)}.hr-leave-cell:hover,.hr-leave-cell:focus-visible{background:#2d292a}}
.hr-sheet-body .hr-edit-form{gap:18px}
.hr-staff-list [data-hr="leave-gate-line"]{margin:0 0 16px}
/* ★HR 편집 M1 — 폰(600 이하)의 「저장할 내용」은 시안처럼 화면 전체 시트다(다른 확인 창은 그대로 가운데) */
@media(max-width:600px){.hr-impact-backdrop:has(.hr-save-confirm){padding:0;align-items:stretch}.hr-impact-backdrop .hr-impact.hr-save-confirm{width:100%;max-height:none;min-height:100dvh;box-sizing:border-box;border:0;border-radius:0;box-shadow:none;padding:20px 16px}.hr-impact-backdrop .hr-save-confirm .membership-controls{display:grid;grid-template-columns:1fr 1fr}}
.hr-impact-backdrop .hr-impact .hr-change-list{padding:0;list-style:none}
/* ★HR 편집 M2(설계 3판 §3.4 · 시안 `#staff/p3/adjust`) — 연차 조정: 목록 칸 「조정 +1」 · 작은 표 조정 줄 · 창 조정 기록 · 조정 창 */
:root{--hr-adj-bg:#eef0fb;--hr-adj-ink:#33408f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--hr-adj-bg:#262c52;--hr-adj-ink:#b9c2ff}}
:root[data-theme=dark]{--hr-adj-bg:#262c52;--hr-adj-ink:#b9c2ff}
.hr-leave-cell small.hr-leave-adj{color:var(--hr-adj-ink);font-size:11px;font-weight:700;white-space:nowrap}
.hr-leave-bd dl>div.is-adj dt,.hr-leave-bd dl>div.is-adj dd{color:var(--hr-adj-ink)}
.hr-leave-self{font-size:12.5px;text-align:right}
.hr-leave-minor{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--muted,#77706c)}
.hr-adj-list{margin:0;padding:0;list-style:none}
.hr-adj-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line,#e4dcd4)}
.hr-adj-list li:first-child{border-top:0}
.hr-adj-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.hr-adj-chip{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:999px;background:var(--bg,#f4f0ea);color:var(--ink,#252122);font-size:12px;font-weight:700;white-space:nowrap}
.hr-adj-chip.is-adj{background:var(--hr-adj-bg);color:var(--hr-adj-ink)}
.hr-adj-reason{margin:6px 0 2px;font-size:13.5px;overflow-wrap:anywhere}
.hr-adj-list small{color:var(--muted,#77706c);font-size:11.5px}
.hr-adj-list li.is-reverted .hr-adj-reason{color:var(--muted,#77706c);text-decoration:line-through}
.hr-sheet-body .hr-text-button{flex:none;min-height:32px;padding:4px 10px;border:0;background:none;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.hr-impact-backdrop .hr-adjust{width:460px}
.hr-adjust-who{margin:6px 0 4px;color:var(--muted,#77706c);font-size:13px}
.hr-adjust-orig{margin:6px 0 8px;font-size:13px}
.hr-adjust-field{display:grid;gap:6px;margin-top:14px;min-width:0}
.hr-adjust-field label,.hr-adjust-seg legend{font-size:13px;font-weight:700}
.hr-adjust-field input[type=text],.hr-adjust-field input[type=number],.hr-adjust-field select{min-height:44px;width:100%;min-width:0;padding:8px 12px;border:1px solid var(--hr-field-line);border-radius:11px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font:inherit;box-sizing:border-box}
.hr-adjust-field input[aria-invalid=true]{border-color:var(--hr-danger-text)}
.hr-adjust-seg{display:block;margin:0;padding:0;border:0;min-width:0}
.hr-adjust-seg legend{margin-bottom:6px;padding:0}
.hr-adjust-seg-row{display:flex;gap:6px}
.hr-adjust-seg-item{position:relative;flex:1;display:grid;place-items:center;min-height:42px;border:1px solid var(--line,#e4dcd4);border-radius:11px;background:var(--paper,#fffdfa);font-size:13px;font-weight:700;cursor:pointer}
.hr-adjust-seg-item input{position:absolute;opacity:0;width:1px;height:1px}
.hr-adjust-seg-item:has(input:checked){border-color:var(--ink,#252122);background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-adjust-seg-item:has(input:focus-visible){outline:2px solid var(--ink,#252122);outline-offset:2px}
.hr-adjust-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hr-adjust-unit{display:flex;align-items:center;gap:8px}.hr-adjust-unit input{flex:1}.hr-adjust-unit span{font-size:13px;font-weight:700}
.hr-adjust-preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px;padding:14px 16px;border-radius:12px;background:var(--bg,#f4f0ea)}
.hr-adjust-preview p{margin:0;font-size:14px}.hr-adjust-preview b.hr-bad{color:var(--hr-danger-text)}
.hr-adjust-notice{margin:10px 0 16px;font-size:12.5px;font-weight:700}
@media(max-width:600px){.hr-impact-backdrop .hr-adjust{padding:18px}.hr-adjust-two{grid-template-columns:1fr}}
.hr-adjust-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hr-impact-backdrop .hr-adjust-x{min-width:44px;width:44px;min-height:44px;padding:0;border-radius:12px;font-size:20px}
/* ★0352 — 급여 계좌(내 인적사항 카드 · 직원 창 칸 · 처리 창 · 목록 「변경 요청 N」) — 시안 hr-edit-adjust v3 「급여 계좌」 */
.hr-pay-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft,#ece5de)}
.hr-pay-row:first-of-type{border-top:0}
.hr-pay-row>div{min-width:0;flex:1 1 auto}
.hr-pay-row p{margin:0 0 4px}
.hr-pay-row .membership-button{flex:none}
.hr-pay-row.is-pending{background:var(--hr-warn-bg);border:1px solid var(--hr-warn-line);border-radius:10px;padding:10px 12px;margin:8px 0}
.hr-pay-row.is-history{font-size:13px}
.hr-pay-mask{font-size:15px}
.hr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;overflow-wrap:anywhere}
.hr-pay-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.hr-chip-warn{color:var(--hr-warn-ink);background:var(--hr-warn-bg)}
.hr-warn-text{display:block;margin-top:4px;font-size:12px;color:var(--hr-warn-ink)}
.hr-pay-reason{color:var(--muted,#77706c);font-size:13px}
.hr-pay-form .hr-em-fields{grid-template-columns:minmax(0,1fr);max-width:520px}
.hr-pay-check{margin:12px 0 4px}
.hr-pay-check .membership-muted{margin:4px 0 0;font-size:12px}
.hr-pay-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:12px 0 6px;font-size:14px}
.hr-pay-kv dt{color:var(--muted,#77706c)}
.hr-pay-kv dd{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.hr-pay-section{margin-top:18px}
.hr-pay-chip{margin-left:auto}
@media(max-width:620px){.hr-pay-row{flex-direction:column;align-items:stretch}.hr-pay-row .membership-button{width:100%}}
.membership-card form.hr-pay-form{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:10px}
.hr-pay-form .hr-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.hr-pay-form .hr-card-foot .hr-card-status{margin-right:auto}
/* ★HR 편집 M4(설계 3판 §5 · §8 · 시안 `#staff/p3/edit`) — 입사일·구분·적용일·사유·사업장·연락처 칸 · 연차 변화 · 변경 기록 · 최근 변경 · 다시 받기 */
.hr-edit-field input{box-sizing:border-box;width:100%;min-height:42px;font:inherit;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:11px;background:var(--paper,#fff);color:var(--ink,#252122)}
.hr-edit-field.is-changed input{border-color:var(--hr-changed,#2f55c4)}
.hr-impact-line{margin:-8px 0 0;font-size:13px;color:var(--muted,#77706c)}
.hr-impact-table{margin:-8px 0 0;padding:10px 12px;border:1px solid var(--line,#e4dcd4);border-radius:11px}
.hr-impact-table .hr-impact-title{margin:0 0 4px;font-size:12px;font-weight:700}
.hr-impact-table .hr-change-list li{grid-template-columns:64px minmax(0,1fr);font-size:13px;padding:6px 0}
.hr-notice-line{margin:10px 0 0;font-size:13px}
.hr-impact .hr-notice-line{margin:10px 0 14px;font-weight:700}
.hr-impact-closed{margin-left:6px}
.hr-resubmit-open{justify-self:start}
.hr-history{margin:14px 0 0;border-top:1px solid var(--line,#e4dcd4);padding-top:10px}
.hr-history summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;min-height:36px}
.hr-history summary::-webkit-details-marker{display:none}
.hr-history summary .hr-sheet-section{margin:0}
.hr-hist-list{margin:6px 0 0;padding:0;list-style:none}
.hr-hist-list li{padding:8px 0;border-top:1px solid var(--line,#e4dcd4);font-size:13px;overflow-wrap:anywhere}
.hr-hist-list li:first-child{border-top:0}
.hr-hist-list p{margin:0}
.hr-hist-list small{color:var(--muted,#77706c)}
.hr-recent-change strong,.hr-resubmit-ask strong{display:block;margin:0 0 4px}
.hr-recent-change p{overflow-wrap:anywhere}
.hr-resubmit-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.hr-resubmit-ask strong{margin:0}
@media(prefers-color-scheme:dark){.hr-edit-field input{background:var(--paper,#242122);border-color:var(--line,#403a3a)}}
/* ★M2(설계 operator-scope §5-4) — 비전 운영자 「사유」 칸. 일곱 확인 창 어디에 붙어도 같은 모양(한 줄 이름표 위 · 칸 전폭 · 44px) */
.hr-operator-reason{display:grid;gap:6px;margin-top:12px;min-width:0;grid-column:1/-1;flex:1 1 100%;width:100%;box-sizing:border-box}
.hr-operator-reason label{font-size:13px;font-weight:600;color:var(--ink,#252122)}
.hr-operator-reason input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:0 12px;font:inherit;font-size:14px;border:1px solid var(--hr-field-line,#d9d3c9);border-radius:8px;background:var(--paper,#fffdf9);color:var(--ink,#252122)}
.hr-operator-reason input:disabled{opacity:.6}

/* ══ ★직원 화면 M1(2026-09-29 · docs/employee-hr-view-20260928.md · 시안 ux-design/employee-hr-view v3) — 색은 셸 토큰만 ══ */
/* 인사 홈 — 할 일 띠(있을 때만) · 숫자 셋(셋 다 누른다) · 「예정」 카드는 누를 수 없다 */
.hh-top:empty{display:none}
.membership-card.hh-todo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;border-color:var(--ink,#252122)}
.hh-todo .hh-todo-text{display:grid;gap:8px}
.hh-todo .hr-steps{margin:0}
.hh-todo .membership-controls{margin:0}
.membership-card.hh-todo-bad{border-color:var(--accent,#ea1732)}
.al.hh-summary{margin:0 0 18px}
.hh-summary .al-tile{display:block;padding:14px 8px;border-radius:14px;background:var(--paper,#fffdfa);color:inherit;text-decoration:none}
.hh-summary .al-tile b{font-size:22px}
.hh-summary .al-tile span{overflow-wrap:anywhere}
.hh-summary a.al-tile:hover{border-color:var(--ink,#252122)}
.hh-summary a.al-tile:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.menu-grid .settings-card.menu-inert{cursor:default;opacity:.55;box-shadow:none}
@media(max-width:620px){.membership-card.hh-todo{flex-direction:column;align-items:stretch}.hh-summary .al-tile b{font-size:18px}}
@media(prefers-color-scheme:dark){.hh-summary .al-tile{background:var(--paper,#242122)}}
/* 회사 정보(#hr/company) — 내 정보와 같은 두 칸 격자 · 본문 폭 */
#hrCompanyView{max-width:1180px}
.hc-places{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.hc-places li{display:grid;gap:3px}
.hc-places strong{font-size:15px}
.hc-places span{color:var(--muted,#77706c);font-size:13px}
.hc-result{margin:0 0 14px;font-size:15px;font-weight:700;line-height:1.5}
.hc-result:last-child{margin-bottom:0}
.hc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hc-week span{display:grid;place-items:center;align-content:center;min-height:40px;border:1px solid var(--line,#e4dcd4);border-radius:10px;font-size:13px;font-weight:700;line-height:1.2;text-align:center}
.hc-week span small{font-size:10px;font-weight:600}
.hc-week span.is-off{background:var(--paper-soft,#f7f3ee);color:var(--muted,#77706c);border-style:dashed}
.hc-week span.is-half{border-color:var(--amber,#b76e00);color:var(--amber,#b76e00)}
.hc-holidays .is-past{opacity:.5}
/* 내 정보 — 반려 한 줄 · 변경 기록(사람 말 + 포털 시각) · 바로 가기로 온 카드의 초점 */
.hr-callout.hr-rejected{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--accent,#ea1732)}
.hr-callout.hr-rejected .membership-controls{margin:0}
.hr-hist{display:grid;gap:2px;margin:0 0 12px;font-size:14px}
.hr-hist:last-child{margin-bottom:0}
.hr-hist strong{font-weight:700}
.hr-hist span{font-size:12px}
.hr-self-page [data-hr="self-account"]:focus,.hr-self-page [data-hr="self-recent"]:focus{outline:2px solid var(--ink,#252122);outline-offset:2px}
/* ══ ★직원 화면 M2(2026-09-29 · 시안 employee-hr-view v3 #people) — 구성원·조직. 색은 셸 토큰만 ══ */
#hrPeopleView{max-width:1180px}
.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hp-head .hr-settings-tabs{flex:1}
.hp-admin-link{margin:0 0 28px;padding:12px 2px 17px;color:var(--ink,#252122);font-size:14px;font-weight:700;text-underline-offset:3px}
.hp-dir td{vertical-align:middle}
.hp-dir .hr-person{cursor:pointer}
.hp-call{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line,#e4dcd4);border-radius:10px;background:var(--paper,#fffdfa);color:var(--ink,#252122);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.hp-me-chip{margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--paper-soft,#f7f3ee);color:var(--muted,#77706c);font-size:11px;font-weight:800}
.hp-dir .hp-group td{padding-top:18px;color:var(--muted,#77706c);font-size:12px;font-weight:800;border-bottom:0;grid-column:1/-1}
.oc-card.hp-me{outline:2px solid var(--ink,#252122);outline-offset:2px}
.oc-card[data-hp-person]{cursor:pointer}
.hp-org-list{display:none}
.hp-sheet-host .hr-sheet-body{padding:6px 24px 24px}
.hp-sheet-host .hr-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 10px}
.hp-sheet-host .hr-sheet-head h2{margin:2px 0 0;font-size:22px}
.hp-sheet-host .hr-sheet-head p{margin:0;font-size:12px}
@media(max-width:620px){
  .hp-head{display:block}
  .hp-admin-link{display:inline-block;margin:-18px 0 18px;padding:0}
  .hp-dir thead{display:none}
  .oc.hp-org-tree{display:none}
  .hp-org-list{display:grid;gap:18px}
  .hp-org-group h3{margin:0 0 8px;color:var(--muted,#77706c);font-size:12px;font-weight:800}
  .hp-org-group ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
  .hp-org-item .oc-card{width:100%;max-width:none;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .hp-org-item.is-sub{padding-left:22px;position:relative}
  .hp-org-item.is-sub::before{content:"";position:absolute;left:8px;top:0;bottom:50%;width:10px;border-left:1px solid var(--line,#e4dcd4);border-bottom:1px solid var(--line,#e4dcd4)}
}
/* ══ ★직원 화면 M3(2026-09-29 · 시안 employee-hr-view v3 #personal · #company) — 근무 카드 · 휴대전화 공개 스위치 · 내 근무조 줄. 색은 셸 토큰만 ══ */
.hr-share{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft,#ebe4dc)}
.hr-switch{display:flex!important;align-items:center;gap:10px;font-size:14px;font-weight:700;cursor:pointer}
.hr-switch input{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:var(--line,#e4dcd4);cursor:pointer;flex:none}
.hr-switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper,#fffdfa);transition:left .15s}
.hr-switch input:checked{background:var(--green,#14785e)}
.hr-switch input:checked::after{left:21px}
.hr-switch input:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.hr-switch input:disabled{opacity:.6}
.hr-share-state{margin:6px 0 0 52px;font-size:12px}
.hr-self-page [data-hr="self-work"]:focus{outline:2px solid var(--ink,#252122);outline-offset:2px}
.hc-mygroup{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft,#ebe4dc)}
.hc-text-link{display:inline-block;margin-top:8px;color:var(--ink,#252122);font-size:13px;font-weight:700;text-underline-offset:3px}
/* ══ 최신 테마 · 칸 하나의 자(2026-09-29 사장님 「전수조사해서 최신 ux테마로 다 바꿔」) ══════════════════════
   ★인사 화면의 한 줄 칸(글 · 날짜 · 숫자 · 고르기)은 높이 44 · 둥글기 10 · 글자 14 하나다. 40/42/46 이 섞여 한 줄에 선 칸의 위 · 높이가 어긋났다.
   ★테두리 색은 여기서 정하지 않는다 — 오류 칸의 빨강(aria-invalid)과 바뀐 칸 표시가 같은 특이도에서 지지 않게(색은 위 규칙들이 그대로 정한다).
   ★네이티브 select 를 고르기 창으로 바꾸는 일(L9)은 JS 동작이 바뀌어 따로 감수받는다 — 여기서는 높이와 모양만 맞춘다. */
.hr-sheet-body input[type=text],.hr-sheet-body input[type=date],.hr-sheet-body input[type=email],.hr-sheet-body input[type=tel],.hr-sheet-body input[type=number],.hr-sheet-body select,.hr-sheet select,
.hr-life-form input[type=date],.hr-life-form input[type=text],.hr-life-form select,.hr-ls-kind-select,.hr-ls-field select,.hr-ls-field input[type=text],.hr-ls-field input[type=date],.hr-ls-field input[type=number],
.hr-edit-field select,.hr-edit-field input[type=text],.hr-edit-field input[type=date],.hr-edit-field input[type=tel],.hr-edit-field input[type=email],.hr-edit-field input[type=number],.hr-adjust-field input[type=text],.hr-adjust-field input[type=number],.hr-adjust-field select{box-sizing:border-box;height:44px;min-height:44px;border-radius:10px;font-size:14px}
/* ══ ★직원 화면 다듬기(2026-09-29 라이브 걸음) — 인사 읽기 화면 머리의 뒤로(‹). 모양은 시안 v3 `.menu-back` 그대로 ══ */
.page-navigation .hr-back{display:grid;place-items:center;width:30px;height:34px;flex:none;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted,#77706c)}
.page-navigation .hr-back[hidden]{display:none}
.page-navigation .hr-back:hover{background:var(--paper-soft,#f7f3ee);color:var(--ink,#252122)}
.page-navigation .hr-back:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.page-navigation .hr-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ══ 내 정보 · 내 인적사항 정렬과 스크롤 하나(B1 · 2026-09-29 사장님 「폼의 크기와 위치 정렬 다 정비」 · 「스크롤이 3개야 … 덜렁거려」) ══
   ①한 줄의 카드는 위 · 높이가 같다(격자 stretch) · 카드 안쪽 여백은 모두 24(620 이하 18)
   ②칸은 모두 높이 44 · 둥글기 10 · 글자 14 · 라벨 13 · 라벨과 칸 사이 6 · 칸 묶음 사이 14. 비상연락처 세 칸은 같은 폭
   ③단추는 모두 높이 44 · 카드 바닥 오른쪽 끝
   ④동의서 창은 스크롤이 하나(한 문서 · 창 자신 — 외국인 M1) — 창이 열려 있는 동안 뒤 화면은 멈춘다 */
.hr-self-grid{align-items:stretch}
.hr-self-page .membership-card{box-sizing:border-box;padding:24px}
.hr-self-page .membership-card>h2,.hr-self-page .hr-card-title{margin:0 0 16px}
.hr-self-page .hr-card-title h2{margin:0}
.hr-self-page [data-hr="contact-form"]{gap:6px 0}
.hr-self-page [data-hr="contact-form"] label,.hr-self-page .hr-em-field label{margin:0;font-size:13px;font-weight:500;line-height:1.4}
.hr-self-page [data-hr="contact-form"] input+label,.hr-self-page [data-hr="contact-form"] .hr-error+label{margin-top:8px}
.hr-self-page input[type=text],.hr-self-page input[type=tel],.hr-self-page input[type=email],.hr-self-page input[type=search]{box-sizing:border-box;height:44px;min-height:44px;padding:0 12px;border-radius:10px;font-size:14px}
.hr-self-page .hr-em-form .hr-em-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;margin-top:0;align-items:start}
.hr-self-page .hr-pay-form .hr-em-fields{gap:14px 12px;margin-top:0}
.hr-self-page select{box-sizing:border-box;width:100%;height:44px;min-height:44px;padding:0 36px 0 12px;border:1px solid var(--hr-field-line,#8c827b);border-radius:10px;background-color:var(--paper,#fffdfa);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m4 5 3 3 3-3' fill='none' stroke='%23888888' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;color:var(--ink,#252122);font:inherit;font-size:14px;-webkit-appearance:none;appearance:none}
.hr-self-page .hr-em-field{gap:6px}
.hr-self-page .membership-button,.hr-self-page .hr-text-button{min-height:44px}
.hr-self-page .hr-card-foot,.hr-self-page [data-hr="contact-form"] .membership-controls{justify-content:flex-end;margin-top:14px}
@media(max-width:620px){.hr-self-page .membership-card{padding:18px}.hr-self-page .hr-em-form .hr-em-fields{grid-template-columns:minmax(0,1fr)}}
html:has(.hr-consent-dialog){overflow:hidden}
/* ★B1 — 내 정보는 시안(8793)처럼 가운데 좁은 단(920) · 공유 스위치는 모양 그대로 누름 자리 44 */
.hr-self-page{max-width:920px;margin-left:auto;margin-right:auto}
.hr-switch{min-height:44px}
/* ★외국인 M2(2026-09-29 · 시안 ux-design/foreign-worker fw.css) — 목록 「체류」 칸 · 칩 · 창 관문 줄 · 입력 폼의 확인 방법 */
.hr-staff-list .hr-table th.hr-th-stay{white-space:nowrap}
.hr-stay{display:grid;gap:5px;font-size:13px}
.hr-stay b{font-weight:650}
.hr-stay .hr-next{margin:0}
.hr-stay-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.hr-stay-chip{display:inline-block;font-size:11px;line-height:1;padding:6px 9px;border-radius:999px;background:var(--hr-warn-bg);color:var(--hr-warn-ink);white-space:nowrap}
.hr-stay-chip.is-strong{font-weight:700;box-shadow:inset 0 0 0 1px var(--hr-warn-line)}
.hr-callout.hr-stay-gate{background:var(--hr-warn-bg);color:var(--hr-warn-ink)}
.hr-callout.hr-stay-gate .membership-button{margin-top:8px}
.hr-stay-seg{display:flex;flex-wrap:wrap;gap:6px}
.hr-stay-seg label{position:relative;display:flex;align-items:center;min-height:42px;padding:6px 12px;border:1px solid var(--line,#e4dcd4);border-radius:11px;background:var(--paper,#fffdfa);font-size:13px;font-weight:600;cursor:pointer}
.hr-stay-seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0!important}
.hr-stay-seg label:has(input:checked){border-color:var(--ink,#252122);background:var(--ink,#252122);color:var(--paper,#fffdfa)}
.hr-stay-seg label:has(input:focus-visible){outline:2px solid var(--ink,#252122);outline-offset:2px}
.hr-stay-form .hr-edit-label{font-size:13px;font-weight:500}
.hr-stay-form .fw-pick{width:100%}
.hr-sheet .hr-stay-pick-back{z-index:60}
.hr-stay-pick-back .fw-pick-dialog{width:520px;max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
.hr-stay-pick-back .fw-pick-body{min-height:0;overflow:auto;margin:12px 0}
.hr-stay-pick-back .fw-list{margin:4px 0 8px;padding:0}
.hr-stay-pick-back input{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--hr-field-line);border-radius:10px;background:var(--paper);font:inherit;font-size:14px}
@media(max-width:1000px){.hr-staff-list td[data-hr-cell=stay]{grid-column:1/-1;grid-row:4;padding-left:52px}}
@media(max-width:600px){.hr-staff-list td[data-hr-cell=stay]{padding-left:44px}}
/* ★외국인 M3 — 내 인적사항 「체류」 카드(머리 오른쪽 작은 언어 칸 · 변경 폼) */
.hr-stay-card .fw-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.hr-self-page .hr-stay-card .fw-card-head h2{margin:0}
.hr-stay-card .hr-stay-self-form .hr-edit-field label{font-size:13px;font-weight:500}
.hr-stay-card .hr-stay-self-form .fw-pick{width:100%}
.hr-stay-card .hr-stay-self-form input[data-date]{box-sizing:border-box;width:100%;height:44px;padding:0 48px 0 12px;border:1px solid var(--hr-field-line);border-radius:10px;background:var(--paper,#fffdfa);font:inherit;font-size:14px}
.hr-stay-card .fw-actions{display:flex;justify-content:flex-end;gap:8px}
.hr-stay-card .fw-actions .membership-button{min-height:44px}
/* ★외국인 M4 — 퇴사자 신고 줄 · 되돌리기 · 출국만기보험 */
.hr-stay-done-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 18px;font-size:14px}
.hr-stay-done-row p{margin:0}
.hr-callout.hr-stay-gate a{color:inherit;font-weight:700;text-underline-offset:3px}
.hr-stay-ins-form .fw-date input[data-date]{box-sizing:border-box;width:100%;height:44px;padding:0 48px 0 12px;border:1px solid var(--hr-field-line);border-radius:10px;background:var(--paper,#fffdfa);font:inherit;font-size:14px}