/* 작업 화면(직원 정보 입력, 관리·접수증·신청 처리 화면)의 입력 칸·버튼·상태 배지·표·간격만 가볍게 다듬는다.
   전체 색감과 분위기(남색·청록·노랑, 프리텐다드)는 app.css 그대로다. 영업자 화면(결과입력·내 기록 등)은 건드리지 않는다.
   적용 범위: body.pc(관리 화면) 와 .staff-form(직원 정보 입력). 버튼·메뉴 이름, form 이름, 경로, 권한은 바꾸지 않는다. */

/* ── 입력 칸: 얇은 선, 8px 둥글기, 옅은 바탕, 초점은 청록 ── */
body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]), body.pc select, body.pc textarea,
.staff-form input:not([type=checkbox]):not([type=radio]) {
  border: 1px solid #D5DEE6; border-radius: 8px; background-color: #FBFCFD; box-shadow: none; }
body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]), body.pc select { height: 42px; padding: 0 12px; }
body.pc textarea { padding: 10px 12px; }
body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]):hover, body.pc select:hover, body.pc textarea:hover,
.staff-form input:not([type=checkbox]):not([type=radio]):hover { border-color: #9DB8C6; }
body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, body.pc select:focus, body.pc textarea:focus,
.staff-form input:not([type=checkbox]):not([type=radio]):focus { border-color: var(--teal); background-color: #fff; box-shadow: 0 0 0 3px rgba(55, 153, 162, 0.16); }
body.pc label, .staff-form label, .staff-form legend { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
body.pc label small, .staff-form label small { font-size: 12px; }
.staff-form input:not([type=checkbox]):not([type=radio]) { height: 46px; }

/* ── 버튼: 얇은 선, 8px, 그림자는 줄이고 주 버튼만 색을 채운다 ── */
body.pc button, body.pc .button, .staff-form button { border-color: #D5DEE6; border-radius: 8px; font-weight: 600; }
body.pc button:not(.primary):not(.link):hover, .staff-form button:not(.primary):not(.link):hover { border-color: var(--teal); background: #F1F7F8; }
body.pc button.primary, .staff-form button.primary { box-shadow: 0 1px 2px rgba(23, 59, 107, 0.25); }
body.pc button.primary:hover, .staff-form button.primary:hover { box-shadow: 0 2px 6px -1px rgba(23, 59, 107, 0.35); }

/* ── 상태 배지(.tag)와 칩: 작고 또렷하게 ── */
body.pc .tag { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
body.pc .tag.need { border: 1px solid #F0C4C1; }
body.pc .chip { border-radius: 8px; }

/* ── 카드·표: 얇은 구분선, 그림자 약하게, 머리글은 옅은 바탕에 작은 글씨 ── */
body.pc .card { box-shadow: 0 1px 2px rgba(23, 59, 107, 0.07); }
body.pc .card.scroll { border: 1px solid #E1E8EE; border-radius: 12px; background: #fff; }
body.pc table.contracts th { background: #F5F8FA; color: #5C6E7D; font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 0 #DCE5EC; }
body.pc table.contracts td { border-bottom: 1px solid #EEF2F5; }
body.pc table.contracts tbody tr:last-child td { border-bottom: 0; }
body.pc table.contracts tbody tr:nth-child(even) td { background-color: #FCFDFE; }
body.pc table.contracts tbody tr:hover td { background-color: #F1F7FA; }
body.pc table.contracts td a { text-underline-offset: 3px; }

/* ── 직원 정보 입력 화면 ── */
.staff-form { gap: 14px; }
.staff-form .steps, .steps { font-weight: 500; }
.staff-form small.error { display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid #F0C4C1; border-radius: 8px; background: #FDF1F0; font-weight: 600; line-height: 1.5; }
dl.staff-summary small.error { display: block; margin-top: 6px; }

/* ── 은행 선택: 칩(버튼식 선택). 라디오 그대로라 키보드(방향키·Tab)와 화면 낭독기가 그대로 된다 ── */
.bank-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.bank-pick legend { margin: 0 0 2px; padding: 0; color: var(--label); }
.bank-pick .picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.bank-pick .bank-chip { position: relative; display: inline-flex; margin: 0; }
.bank-pick .bank-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.bank-pick .bank-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #D5DEE6; border-radius: 999px;
  background: #FBFCFD; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.2; transition: background 0.12s, border-color 0.12s; }
.bank-pick .bank-chip:hover span { border-color: var(--teal); background: #F1F7F8; }
.bank-pick .bank-chip input:checked + span { border-color: var(--picked); background: var(--picked); color: var(--navy-deep); font-weight: 700; }
.bank-pick .bank-chip input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (max-width: 760px) { .bank-pick .bank-chip span { min-height: 44px; } }

/* ── 주소 검색 창과 [주소 검색] 링크 ── */
.addr-tools { margin: 6px 0 12px; }
.addr-tools .button.small { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.addr-tools small { display: inline; margin-left: 8px; font-weight: 400; color: var(--sub); }
.addr-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.addr-pick { display: block; width: 100%; height: auto; min-height: 56px; padding: 10px 14px; border: 1px solid #D5DEE6; border-radius: 10px; background: #FBFCFD; text-align: left; font: inherit; cursor: pointer; }
.addr-pick strong { display: block; font-size: 15px; color: var(--ink); }
.addr-pick small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--sub); }
.addr-pick:hover, .addr-pick:focus-visible { border-color: var(--teal); background: #F1F7F8; }
.addr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.addr-tools .button { width: auto; min-width: 120px; }
.addr-tools small { margin-left: 0; flex: 1 1 260px; }

/* ── 계정 목록(관리 → 계정) ──
   휴대폭: 아이디·이름은 한 줄, 배지(권한·구분·소속)와 상태는 아래로 줄바꿈해 카드처럼 쌓인다. 배지는 한 글자씩 쪼개지지 않는다.
   PC 폭(1100px 이상): 표 모양 — 아이디 / 이름 / 권한 / 구분 / 소속 / 상태 / 로그인된 기기 / 작업(줄을 눌러 펼침). */
.users summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; position: relative; padding-right: 34px; }
.users summary strong { flex: 0 1 8em; }
.users summary .u-name { flex: 1 1 5em; min-width: 4em; }
.users summary .tag { flex: none; white-space: nowrap; }
.users summary .state, .users summary .u-dev { flex: 1 1 100%; font-size: 12px; text-align: left; color: var(--sub); white-space: normal; }
.users summary .state:empty { display: none; }
.users summary .u-dev { color: #1A6B54; font-weight: 600; }
.users summary::after { position: absolute; right: 14px; top: 50%; margin-top: -6px; }
.users .u-head { display: none; }
.tag.org { background: #DDF3F0; color: #12675F; }          /* 구분(섭외팀·영업팀·업무지원팀) */
.tag.aff { background: #FFF0C9; color: #7A5400; }          /* 소속(지사·본부) */
.users li.off .tag.org, .users li.off .tag.aff { background: #E3E9F0; color: var(--sub); }
@media (min-width: 1100px) {
  body.pc .card.slim:has(.users) { max-width: none; }
  body.pc .users summary, body.pc .users .u-head {
    display: grid; grid-template-columns: 10em minmax(7em, 1.1fr) 6.5em 6.5em 8.5em minmax(9em, 1.4fr) 8em 4.5em;
    align-items: center; gap: 0 12px; padding: 6px 16px; min-height: 46px; }
  body.pc .users summary > strong { grid-column: 1; }
  body.pc .users summary > .u-name { grid-column: 2; }
  body.pc .users summary > .tag { grid-column: 3; justify-self: start; }
  body.pc .users summary > .tag.org { grid-column: 4; }
  body.pc .users summary > .tag.aff { grid-column: 5; }
  body.pc .users summary > .state { grid-column: 6; flex: none; font-size: 13px; }
  body.pc .users summary > .u-dev { grid-column: 7; flex: none; font-size: 13px; }
  body.pc .users summary::after { position: static; grid-column: 8; justify-self: end; margin: 0 6px 0 0; }
  body.pc .users .u-head { padding-top: 9px; padding-bottom: 9px; background: #F5F8FA; border-bottom: 1px solid #DCE5EC; color: #5C6E7D; font-size: 12.5px; font-weight: 600; }
  body.pc .users .u-head span { text-align: left; }
  body.pc .users .u-head span:last-child { text-align: right; padding-right: 4px; }
}

/* 보고 연결의 [직접 연결]: 접수증 번호 칸은 좁게(화면 보안 설정이 인라인 style을 막으므로 여기서 정한다) */
form.inline input[name=receipt_id] { width: 8em; }
form.inline label:has(input[name=receipt_id]) { flex: 0 0 auto; }
form.inline label:has(input[name=receipt_id]) { display: flex; align-items: center; gap: 8px; }
form.inline label:has(input[name=receipt_id]) input { margin-top: 0; }
td form.inline { margin: 4px 0; align-items: center; }