.membership-pane{max-width:920px;margin:0 auto;padding-bottom:40px;color:var(--ink,#272323)}
.membership-entry{position:fixed;inset:0;z-index:100;display:grid;align-content:center;justify-items:center;gap:12px;padding:30px;text-align:center;background:var(--bg,#f4f0ea);color:var(--ink,#272323)}.membership-entry[hidden]{display:none}
/* 계정 확인 게이트(Owner 2026-09-16 「차라리 스핀휠이 도는 것이 좋을 것 같아」) — 휠은 셸의 `.spin` 하나를 그대로 쓴다(새 스피너 0).
   휠은 도는 동안에만 있다: 실패하면 스크립트가 `hidden` 으로 내린다. */
.membership-entry .spin{width:22px;height:22px;border-width:3px}
.membership-entry p{margin:0;font-size:15px;line-height:1.6;color:var(--muted,#77706c)}
html[data-account-entry="loading"] .app{visibility:hidden}
html[data-account-entry="loading"] body>:not(#accountEntryPending){visibility:hidden!important;pointer-events:none!important}
/* 첫 계정 확인 동안의 뼈대(2026-09-24) — 전체 화면 「계정 확인」 대신 셸이 선다. 로고와 대시보드 뼈대만 보이고
   메뉴·머리줄은 자리만 지킨다(권한이 갈리기 전이다). 업무 화면들은 확인이 끝날 때까지 그리지 않는다.
   ★뼈대 카드의 자리(위 여백 · 높이 192)는 조각의 「조회 중」 카드 자리와 맞췄다 — 조각이 붙을 때 판이 밀리지 않게.
   ★`data-boot-skeleton` 은 첫 확인이 끝나면 셸이 걷는다 — 그 뒤의 `loading`(계정 바뀜)은 위 줄대로 통째로 가린다 */
html[data-account-entry="loading"][data-boot-skeleton] body>.app:not(#accountEntryPending){visibility:visible!important}
html[data-boot-skeleton] .side-nav,html[data-boot-skeleton] .topbar>*{visibility:hidden}
html[data-boot-skeleton] .workspace>:not(.topbar):not(#dashboardView){display:none!important}
.boot-skeleton{max-width:1180px;margin:0 auto;padding-top:82px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.boot-skeleton i{grid-column:span 3;height:192px;border-radius:20px;background:var(--paper-soft,#faf6f1);animation:boot-skeleton-pulse 1.6s ease-in-out infinite}
@keyframes boot-skeleton-pulse{50%{opacity:.55}}
@media (max-width:620px){.boot-skeleton{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-top:74px}.boot-skeleton i{grid-column:1/-1;height:210px}}
@media (prefers-reduced-motion:reduce){.boot-skeleton i{animation:none}}
html[data-account-entry="loading"] .vision-chat-root,html[data-account-entry="loading"] .vision-float{display:none}
html[data-account-entry="restricted"] .side-nav>.nav,html[data-account-entry="restricted"] .side-nav>.nav-divider,html[data-account-entry="restricted"] #noticeButton,html[data-account-entry="restricted"] .vision-float{display:none}
.membership-card{margin:16px 0;padding:24px;border:1px solid var(--line,#e4dcd4);border-radius:20px;background:var(--paper,#fffdfa)}
.membership-card h2{margin:0 0 14px;font-size:18px}.membership-card p{line-height:1.65;overflow-wrap:anywhere}
.membership-role{font-size:21px;font-weight:700}.membership-muted{color:var(--muted,#77706c);font-size:13px}
.membership-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border:1px solid var(--line,#ded5cc);border-radius:11px;background:var(--paper,#fffdfa);color:inherit;font:inherit;font-size:14px;font-weight:650;text-decoration:none;cursor:pointer}
/* ★최신 테마(2026-09-29 사장님 「전수조사해서 최신 ux테마로 다 바꿔」) — 초점은 2px 먹색 · 바깥 2px. 빨강 3px 초점은 은퇴 */
.membership-button:focus-visible,.membership-pane input:focus-visible,.membership-pane select:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.membership-button:disabled{opacity:.55;cursor:wait}
/* ★`cursor:wait` 는 「지나가는 상태」의 글자다. 마지막 관리자 줄의 회색은 기다린다고 풀리지 않는다 —
   그 줄에서는 「할 수 없음」이라고 말한다. 왜 못 하는지는 바로 아래 한 줄이 글자로 말한다. */
[data-membership-last-admin="true"] .membership-button:disabled{cursor:not-allowed}
/* 표 안의 권한·직위 select 는 단추와 같은 말을 한다 — 고를 수 있으면 손가락, 잠기면 흐림, 마지막 관리자 줄이면 「할 수 없음」 */
.membership-controls select{cursor:pointer}.membership-controls select:disabled{opacity:.55;cursor:wait}
[data-membership-last-admin="true"] .membership-controls select:disabled{cursor:not-allowed}
/* ★주 단추의 «기본값»이 먹색이다(옛 기본값 빨강은 덮개를 빠뜨린 새 자리에서 새어 나왔다). 빨강 주 단추는 `.membership-primary.hr-danger`(되돌릴 수 없는 삭제) 하나뿐 */
.membership-primary{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.membership-card form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px}.membership-card label{grid-column:1/-1;font-size:14px;font-weight:650}
.membership-pane input,.membership-pane select{box-sizing:border-box;min-width:0;min-height:44px;width:100%;padding:10px 12px;border:1px solid var(--hr-field-line,#8c827b);border-radius:10px;background:var(--paper,#fffdfa);color:inherit;font:inherit;font-size:14px}
.membership-message{min-height:1.5em;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
/* 구성원 초대 — Google 확인 휠(옛 「계정 초대」 창의 `#hr-ai-dspin` 자리 · 2026-09-19 밤). 휠은 셸의 `.spin` 그대로이고 색·크기도 새로 정하지 않는다.
   ★입력 칸과 휠은 한 상자(.membership-invite-field · 격자 1열 = 직위 폼의 칸과 같은 폭) 안이고, 휠은 그 상자 기준 절대 위치로 칸 «안» 오른쪽 끝(12px)에 선다.
     세로 가운데는 top/bottom:0 + margin:auto 로 잡는다 — `.spin` 의 회전 애니메이션이 transform 을 쓰므로 translate 로 가운데를 잡으면 안 된다.
   ★`.spin{display:inline-block}` 이 `[hidden]` 보다 세다(index.html 머리말의 함정) — 여기서 hidden 을 명시로 이긴다. */
.membership-card form .membership-invite-field{position:relative;grid-column:1;min-width:0}
.membership-invite-field input{padding-right:40px}
.membership-invite-field .membership-invite-spin{position:absolute;right:12px;top:0;bottom:0;margin:auto 0;pointer-events:none}
.membership-invite-field .membership-invite-spin[hidden]{display:none}
/* 직위 목록 — 「추가」·「삭제」 옆 휠(같은 `.spin`). 단추 묶음 안에서 단추와 나란히 선다 */
.membership-controls .spin{margin-left:2px}
.membership-visibility{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr);gap:10px;font-size:14px}.membership-visibility dt{color:var(--muted,#77706c)}.membership-visibility dd{margin:0}
.membership-member{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 14px;padding:14px 0;border-top:1px solid var(--line,#e4dcd4)}.membership-member p{margin:4px 0 0}.membership-member strong{overflow-wrap:anywhere}
.membership-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.membership-controls select{width:auto;min-width:140px}
/* 첫 관리자 지정(계정 시스템 C) — 2026-09-28 Owner 「ux가 예전 ux 테마인것 같은데?」: 인사 설정 v3 의 카드·칸·단추로 다시 그렸다.
   ★카드는 바로 아래 「회사 설정 N개」(`.hr-setup-card` · hr-pane.css)와 같은 테두리 카드 · 고르는 칸은 시트의 평평한 칸(꺾쇠 하나) ·
     주 단추는 인사 설정의 검정 주 단추 · 초점 고리도 빨강이 아니라 먹색. 새 색을 만들지 않는다(토큰 그대로). */
.membership-pane .membership-card.membership-bootstrap{display:grid;gap:12px;margin:0 0 18px;padding:16px 18px;border:1.5px solid var(--ink,#252122);border-radius:13px;background:var(--paper,#fffdfa);color:var(--ink,#252122)}
.membership-card.membership-bootstrap h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.02em}
.membership-bootstrap-company strong{display:block;font-size:14px;font-weight:650;overflow-wrap:anywhere}
.membership-card.membership-bootstrap .membership-bootstrap-company p{margin:3px 0 0;font-size:13px;line-height:1.55}
.membership-card.membership-bootstrap .membership-bootstrap-pending{font-weight:600;color:var(--ink,#252122)}
.membership-bootstrap-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.membership-pane .membership-bootstrap-form select{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 1 320px;width:auto;min-width:200px;height:44px;min-height:44px;padding:0 36px 0 12px;border:1px solid var(--hr-field-line,#8c827b);border-radius:8px;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;cursor:pointer}
.membership-pane .membership-bootstrap select:focus-visible,.membership-pane .membership-bootstrap .membership-button:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.membership-bootstrap .membership-button{min-height:44px;border-radius:8px}
.membership-bootstrap .membership-primary{min-width:96px;background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
.membership-bootstrap .membership-primary:disabled{opacity:1;cursor:wait;background:var(--paper-soft,#faf6f1);border-color:var(--hr-field-line,#8c827b);color:var(--muted,#77706c)}
.membership-card.membership-bootstrap .membership-bootstrap-hint{flex:1 0 100%;margin:0;font-size:12px}
.membership-card.membership-bootstrap .membership-bootstrap-form>.membership-muted:only-child{margin:0;font-size:13px}
.membership-card.membership-bootstrap .membership-message:empty{display:none}
.membership-card.membership-bootstrap .membership-message{margin:0;font-size:13px}
/* 지명 수락 카드(받는 사람) — 주 단추는 같은 검정 주 단추 */
.membership-nomination .membership-primary{background:var(--ink,#252122);border-color:var(--ink,#252122);color:var(--paper,#fffdfa)}
@media(max-width:600px){.membership-pane .membership-bootstrap-form select{flex:1 0 100%;width:100%;min-width:0}
  .membership-bootstrap-form .membership-button{flex:1 0 100%}}
@media(max-width:600px){.membership-card{padding:18px 15px;border-radius:15px}.membership-card form{grid-template-columns:1fr}.membership-button{padding:9px 12px}.membership-visibility{grid-template-columns:1fr}.membership-visibility dd{padding-bottom:5px}.membership-member{grid-template-columns:1fr}.membership-controls{justify-content:flex-start}.membership-controls select{width:100%}}

/* ══ 인사 설정 v3(2026-09-24) — 도구 줄 · 이름 단추 · 오른쪽 고정 시트 ══════════════════════════════════════════
   ★초대·상세·입사 확인이 «같은» 시트다: 폭 490 고정(시안 `#drawer`) · 높이 화면 전체 · 머리/본문(스크롤)/고정 단추 줄. 390 이하에서는 화면 전체.
   ★단추 줄은 시트 바닥에 고정이고, 칸이 없는 실패의 한 줄은 그 바로 위에 선다(가림 0 · 스크롤과 무관 · 칸 오류는 칸 옆에만). */
.hr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 12px}
.hr-tools input[type="search"]{flex:1 1 220px;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper,#fffdf9);color:var(--ink,#252122);font-size:14px}
.hr-filters{display:flex;flex-wrap:wrap;gap:6px}
.hr-filter{min-height:36px;border-radius:999px}
.hr-filter.is-on{border-color:var(--ink,#252122);background:var(--ink,#252122);color:var(--paper,#fffdf9)}
.hr-invite-open{margin-left:auto}
.membership-button.hr-person{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:44px;padding:4px 0;border:0;border-radius:0;background:transparent;color:inherit;font-weight:inherit;text-align:left}
.hr-person strong{text-decoration:underline;text-decoration-color:var(--line,#e4dcd4);text-underline-offset:3px}
.hr-person:hover strong{text-decoration-color:currentColor}
.hr-person span{font-size:12px}
.hr-sheet-backdrop{position:fixed;z-index:55;inset:0;display:flex;justify-content:flex-end;background:rgba(28,22,22,.32)}
.hr-sheet{box-sizing:border-box;width:490px;max-width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-left:1px solid var(--line,#e4dcd4);background:var(--paper,#fffdf9);color:var(--ink,#252122);box-shadow:-22px 0 60px rgba(25,20,18,.18)}
.hr-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px;border-bottom:1px solid var(--line,#e4dcd4)}
.hr-sheet-head h2{margin:0;font-size:22px;letter-spacing:-.03em;overflow-wrap:anywhere}
.hr-sheet-head p{margin:0 0 8px}
.hr-sheet-head h2:focus{outline:none}
.membership-button.hr-sheet-close{flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;font-size:23px;font-weight:400;line-height:1}
.membership-button.hr-sheet-close:hover{background:var(--bg,#eee8e2)}
.hr-sheet-body{overflow:auto;padding:16px 24px 24px;-webkit-overflow-scrolling:touch}
.hr-sheet-body form{display:grid;grid-template-columns:1fr;gap:6px;margin-top:14px}
.hr-sheet-body form label{margin-top:8px;font-size:13px;font-weight:700}
.hr-sheet-body input,.hr-sheet-body select{box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line,#e4dcd4);border-radius:12px;background:var(--paper-soft,#faf6f1);color:inherit;font-size:14px}
.hr-sheet-body input[aria-invalid="true"],.hr-sheet-body select[aria-invalid="true"]{border-color:var(--accent,#db2535)}
.hr-sheet-account{margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#e4dcd4)}
.hr-sheet-foot{padding:12px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#e4dcd4);background:var(--paper,#fffdf9)}
.hr-sheet-foot .membership-message{min-height:0;margin:0 0 8px}
.hr-sheet-foot .membership-message:empty{display:none}
.hr-sheet-foot .membership-controls{display:flex;flex-direction:row;justify-content:flex-start;gap:8px}
.hr-sheet-foot .membership-controls .membership-button{min-width:132px;min-height:44px}
.hr-danger{border-color:var(--accent,#db2535);color:var(--accent,#db2535)}
.membership-primary.hr-danger{background:var(--accent,#db2535);color:#fff}
.hr-impact{margin:0 0 10px;padding:12px 14px;border:1px solid var(--accent,#db2535);border-radius:12px;background:var(--paper-soft,#faf6f1)}
.hr-impact ul{margin:6px 0 10px;padding-left:18px;font-size:13px;line-height:1.55}
@media(max-width:600px){
  .hr-sheet{width:100%;border-left:0}
  .hr-sheet-head,.hr-sheet-body,.hr-sheet-foot{padding-left:16px;padding-right:16px}
  .hr-invite-open{margin-left:0}
  /* ★390 에서도 단추는 반씩 늘지 않는다 — 시안처럼 오른쪽에 「취소」·「저장」(132) 두 개(화면 감수 #21) */
  .hr-sheet-foot .membership-controls .membership-button{flex:0 0 auto;min-width:72px}
  .hr-sheet-foot .membership-controls .membership-primary{min-width:132px}
}
/* 시트 안의 고르개도 표의 것과 같은 말을 한다 — 고를 수 있으면 손가락, 잠기면 흐림, 마지막 관리자면 「할 수 없음」 */
.hr-sheet select{cursor:pointer}
.hr-sheet select:disabled{opacity:.55;cursor:wait}
.hr-sheet[data-membership-last-admin="true"] select:disabled{cursor:not-allowed}