/*
 * 고객 관리 CRM 전용 보충 스타일 — 디자인 시스템 "Travel UI"(tokens.css·bundle.css) 위에 얹는다.
 * tokens.css·bundle.css·fonts/는 디자인 시스템 원본 그대로 두고 고치지 않는다.
 * 값은 tokens.css의 변수만 쓴다(하드코딩 색상 금지). 공통 컴포넌트에 있는 것은 여기서 다시 정의하지 않는다.
 * 화면별 표 열 정의(--cols)는 각 화면 단계에서 이 파일 아래쪽에 추가한다.
 */

/* ===== 공통 ===== */
[hidden] { display: none !important; }
body.has-modal { overflow: hidden; }
.field-error:empty, .field-ok:empty, .alert:empty { display: none; }
.form-stack { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.auth__card > div, .auth__card > form { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.modal__text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text-2); }
/* 확인 창 문구 아래 목록 (App.confirm items — 고객 삭제 때 함께 지워지는 것) */
.confirm-list { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); list-style: none; display: flex; flex-direction: column; gap: var(--space-1);
    border-radius: var(--radius-md); background: var(--color-surface-sub); font-size: 14px; line-height: 1.6; color: var(--color-text); }
.confirm-list li { position: relative; padding-left: 14px; }
.confirm-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-3); }
.modal__foot-content { display: contents; }
.alert__title { display: block; margin-bottom: 2px; font-weight: 700; }
p.help { margin: 0; }
/* 줄바꿈을 살리는 도움말 — 비자 종류 설명(crm-visatype.md 4.1) */
.help--pre { white-space: pre-line; overflow-wrap: anywhere; }
.seg-group .field-error { margin-top: 6px; }
/* 회원가입 소속 여행사 미선택 오류 — 둘째 줄 "등록된 여행사만 가입할 수 있습니다." (ErrorCode.AGENCY_NOT_SELECTED) */
#signupForm [data-error-for="agencyId"] { white-space: pre-line; }

/*
 * 브라우저 자동완성(:autofill) 칸도 디자인 시스템 입력칸 색으로.
 * Chrome은 자동완성한 칸에 기본 배경을 !important로 칠해 덮어쓸 수 없으므로 안쪽 그림자로 덮는다
 * (잠금 해제 후에도 자동완성 배경이 남아 잠긴 칸처럼 보이던 문제 — 회원가입 [입력 수정]).
 * 포커스·오류·비활성 상태는 bundle.css의 .input 상태와 같은 색을 다시 지정한다.
 */
.input:autofill { -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); box-shadow: inset 0 0 0 100px var(--color-surface); }
.input:autofill:focus { box-shadow: inset 0 0 0 100px var(--color-surface), 0 0 0 3px var(--color-focus-halo); }
.input:autofill[aria-invalid="true"] { box-shadow: inset 0 0 0 100px var(--color-surface), 0 0 0 3px var(--color-danger-soft); }
.input:autofill:disabled { -webkit-text-fill-color: var(--color-text-3); box-shadow: inset 0 0 0 100px var(--color-bg); }

/* 본문 페이지 묶음: 섹션 사이 24px */
.main__inner > #page { display: flex; flex-direction: column; gap: var(--space-6); }

/* ===== 사이드바 하단 (이름 + 권한 / 테마 전환 + 로그아웃) ===== */
.sidebar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__user-actions { display: flex; align-items: center; gap: 4px; }
.sidebar__user-actions form { margin: 0; }

/* ===== 테마 전환 ===== */
.theme-icon--dark { display: none; }
:root[data-theme="dark"] .theme-icon--light { display: none; }
:root[data-theme="dark"] .theme-icon--dark { display: inline; }
.theme-toggle--float { position: fixed; top: var(--space-4); right: var(--space-4); }

/* ===== 목록 표 ===== */
.tbl__head .is-right { text-align: right; }
.tbl__row--link .cell-strong a { color: inherit; }
.tbl__row--link .cell-strong a:hover { color: var(--color-primary); }
.tbl .cell-inline { display: flex; align-items: center; gap: 6px; }
.tbl .cell-inline > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tbl__body.is-loading { opacity: .5; pointer-events: none; }
.tbl__skeleton { display: grid; gap: 14px; padding: 20px var(--space-4); }
.toolbar-search { width: 420px; max-width: 100%; }

/* 표 행 작업 버튼 */
.btn-xs.is-danger-text { color: var(--color-danger); }

/* ===== 회원가입 · 잠금 해제/비밀번호 찾기 (crm-dev-guide 6.5, 6.6, 6.8) ===== */
.auth__stack { display: flex; flex-direction: column; gap: var(--space-5); }
/* 인증번호 안내 + 남은 시간(빨간 mm:ss) */
.code-box { line-height: 1.6; }
.code-timer { margin-left: 6px; font-weight: 600; color: var(--color-danger); white-space: nowrap; }

/* ===== 고객 (crm-dev-guide 8.1~8.3) ===== */
/* 목록: 이름 · 전화번호 · 행정업무 · 비자 · 항공편 · 등록일 (crm-customerlist.md 3.1) */
.tbl--customers { --cols: minmax(110px, 1fr) 170px minmax(190px, 1.4fr) minmax(190px, 1.4fr) minmax(190px, 1.5fr) 130px; }
/* 상세: 불러오는 중 막대, 제목 아래 카드 머리와 본문 사이 */
.detail-skeleton { display: grid; gap: 14px; }
/* 상세 제목: 이름 뒤 한자 이름은 보조 글씨 (crm-hanja.md 4.2) */
.page-title__hanja { font-weight: 400; color: var(--color-text-3); }
/* 제목 줄: 이름 옆 여권 만료 칩 */
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 10px; }

/*
 * 고객 상세: 왼쪽 고객 정보 패널(320px) + 오른쪽 비자 정보·항공편 탭 카드 (crm-customerui.md 4.1)
 * 고객 정보 묶음(연락처 · 여권·신분 · 숙소제공자 · 신원보증인 · 메모)은 가는 선으로 나누고, 묶음 제목은 위.
 * 항목은 DescriptionList(.dl)를 한 줄씩 — 라벨 왼쪽(96px) · 값 오른쪽. 숙소제공자·신원보증인은 접는 묶음(details)
 * 1180px 이하에서는 패널이 전체 폭으로 위에 쌓인다.
 */
.customer-layout { display: flex; align-items: flex-start; gap: var(--space-6); }
.customer-layout > .customer-info { flex: 0 0 320px; min-width: 0; }
.customer-layout > .customer-work { flex: 1 1 0; min-width: 0; }
@media (max-width: 1180px) {
    .customer-layout { flex-direction: column; align-items: stretch; }
    .customer-layout > .customer-info { flex: none; }
}
.customer-info .card__head { padding: var(--space-4) var(--space-5); }
.info-section { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-sub); }
.info-section__title { margin: 0 0 6px; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--color-text-2); }
.info-section.detail-skeleton { display: grid; }
.info-section__empty { margin: 0; font-size: 14px; line-height: 22px; color: var(--color-text-4); }
.info-dl { display: block; }
.info-dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); padding: 4px 0; }
.info-dl dt { margin: 0; font-size: 13px; line-height: 22px; color: var(--color-text-4); }
.info-dl dd { font-size: 14px; line-height: 22px; }
.info-dl__chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 접는 묶음: 제목 왼쪽 · "이름 · 관계" 요약과 화살표 오른쪽 */
.info-fold { padding: 0; }
.info-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); list-style: none; cursor: pointer; }
.info-fold > summary::-webkit-details-marker { display: none; }
.info-fold > summary:hover { background: var(--color-row-hover); }
.info-fold > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.info-fold > summary .info-section__title { margin: 0; }
.info-fold__sum { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--color-text-3); }
.info-fold__sum > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-fold__sum svg { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.info-fold[open] .info-fold__sum svg { transform: rotate(180deg); }
.info-fold > .dl { padding: 0 var(--space-5) var(--space-4); }
/* 메모: 읽는 글(body-lg 15px), 3줄까지 — 넘치면 [더 보기] */
.info-memo { margin: 0; font-size: 15px; line-height: 24px; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; }
.info-memo.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn[hidden] { display: none; }

/* 비자 정보 · 항공편 탭 (밑줄 탭) — 오른쪽에 고른 탭의 [추가] 버튼 하나 */
.tabs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-5); border-bottom: 1px solid var(--color-border-sub); }
.tabs-bar > .btn[hidden], .customer-work > [role="tabpanel"][hidden] { display: none; }
.tabs { display: flex; gap: var(--space-6); }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 52px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-3); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }
.tab__count { min-width: 20px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-chip-neutral); color: var(--color-text-2); font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; }
.tab__count:empty { display: none; }
.tab[aria-selected="true"] .tab__count { background: var(--color-primary-soft); color: var(--color-primary); }
/* 상세의 두 표는 전체 폭 카드 안 — 좁으면 카드 안에서 가로 스크롤 */
.customer-work .tbl { min-width: 780px; }
.card__head + .card__body { padding-top: 0; }
/* 등록·수정 모달: 전화번호 중복 띠 — 문구 왼쪽, "기존 고객 {이름} 보기 →" 오른쪽 */
.alert--split { flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ===== 고객 상세 — 항공편·비자 정보 (crm-flight.md 4.2, crm-api.md 4장) ===== */
/* 항공편: 상태 · 구분 · 가는 편 · 오는 편 · 예약번호 · 금액(원) · 관리. 가는 편·오는 편이 두 줄이라 행은 56px */
.tbl--customer-flights { --cols: 92px 72px minmax(150px, 1fr) minmax(150px, 1fr) 88px 96px 86px; }
.tbl--customer-flights .tbl__row { height: var(--table-row); }
/* 비자: 진행 상태 · 국가 · 비자 종류 · 신청일 · 만료일(+ 만료 임박 칩) · 금액(원) · 관리 (crm-visa.md 4.2, 첨부 열 없앰 crm-filelimit.md) */
.tbl--visas { --cols: 92px minmax(60px, 0.7fr) minmax(110px, 1.4fr) 116px 148px 96px 86px; }
/* 고객 상세 출입국행정업무 (crm-immigration.md 4.2) — 상태 · 업무 · 접수일 · 금액 · 서류 · 등록자 · 관리 */
.tbl--immigrations { --cols: 92px minmax(140px, 1.6fr) 116px 96px 64px minmax(80px, 0.8fr) 86px; }
/* 첨부 건수 셀: 클립 아이콘 + 숫자 */
.tbl .cell-files { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-3); }
.tbl .cell-files svg { width: 15px; height: 15px; flex: none; }
/* 만료일 셀: 날짜 옆에 D-n / "오늘 만료" 칩 */
.tbl .cell-expiry { display: flex; align-items: center; gap: var(--space-2); }
/* 카드 안 하위 표: 머리 위 구분선, 빈 상태는 목록(120px)보다 낮게 */
.card__head + .table-wrap { border-top: 1px solid var(--color-border-sub); }
.tbl--compact .tbl__empty { padding: var(--space-8) 0; }

/* 두 줄 셀(가는 편·오는 편 등): 줄마다 길면 말줄임 */
.tbl .cell-2line > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== 항공편 관리 (crm-flight.md 4.1) ===== */
/* 목록: 상태 · 고객(이름/전화번호) · 구분 · 가는 편 · 오는 편 · 예약번호 · 금액(원) · 관리 */
.tbl--flights { --cols: 90px minmax(130px, 1fr) 72px minmax(210px, 1.6fr) minmax(210px, 1.6fr) 110px 130px 88px; }
.tbl .cell-2line a { color: inherit; }
.tbl .cell-2line a:hover { color: var(--color-primary); }
/* 툴바 왼쪽: 탭 · 출발 기간 · 상태 (좁으면 줄바꿈). 기간 오류 문구는 날짜 칸 아래 */
.flight-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.flight-period { display: flex; flex-direction: column; gap: 6px; }
.flight-period__inputs { display: flex; align-items: center; gap: var(--space-2); }
.flight-period__inputs .datepicker { width: 150px; }
.flight-period__sep { color: var(--color-text-3); }
.flight-filters .select--md { width: 130px; }
/* 비자 관리 툴바도 같은 배치(탭 · 기준 날짜 + 기간). 기준 날짜 Select는 기간 칸 앞에 붙인다 (crm-visa.md 4.1) */
.flight-period__inputs .select--md { width: 100px; }

/* ===== 비자 관리 (crm-visa.md 4.1) ===== */
/* 목록: 상태 · 고객(이름/전화번호) · 비자(국가/종류) · 신청일 · 만료일(+ 만료 임박 칩) · 금액(원) · 첨부 · 관리 */
.tbl--visa-list { --cols: 90px minmax(130px, 1fr) minmax(140px, 1.1fr) 110px 190px 120px 88px; }
/* 출입국행정업무 목록 (crm-immigration.md 4.1) — 상태 · 고객 · 업무 · 접수일 · 금액 · 서류 · 등록자 · 관리 */
.tbl--immigration-list { --cols: 90px minmax(130px, 1fr) minmax(140px, 1.2fr) 110px 120px 64px minmax(90px, 0.7fr) 88px; }
.flight-filters .immigration-type-filter { width: 180px; }

/* ===== 항공편 모달 (crm-flight.md 4.3) ===== */
/* 구간 묶음(가는 편·오는 편): 묶음 제목 + 2열 칸 */
.form-group { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-group__title { width: 100%; padding: 0 0 var(--space-2); border-bottom: 1px solid var(--color-border-sub); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-text); }
/* fieldset의 legend는 flex 항목이 아니라 묶음 gap이 적용되지 않는다 → 같은 간격을 margin으로 (밑줄이 아래 칸에 붙지 않게) */
.form-group > .form-group__title { margin-bottom: var(--space-4); }
/* 고객 등록·수정 모달: 880px · 3열 (좁으면 2열 → 1열). 주소는 2칸 */
#customerFormModal > .modal { max-width: 880px; }
/* 묶음 탭 (crm-customerui.md 4.2) — 상세의 밑줄 탭(.tab)을 모달 폭 끝까지 깐다. 오류 칸이 든 탭은 이름 뒤 빨간 점 */
.form-tabs { display: flex; gap: var(--space-6); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-7)) 0; padding: 0 var(--space-7); border-bottom: 1px solid var(--color-border-sub); }
.form-tabs .tab { height: 44px; font-size: 14px; }
.tab__error { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-danger); }
.form-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--3 .span-2 { grid-column: span 2; }
.form-grid--3 .seg { flex-wrap: nowrap; }
.form-grid--3 .seg-opt { flex: 1; justify-content: center; }
/* 숙소제공자 관계·소유형태·주거형태 — 한 줄 전체, 선택 버튼 옆에 기타 글자 칸 (crm-hostchoice.md 4.1) */
.host-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.form-grid--3 .host-choice .seg { flex-wrap: wrap; }
.form-grid--3 .host-choice .seg-opt { flex: 0 0 auto; }
.host-choice .input { flex: 1 1 14rem; width: auto; min-width: 0; }
@media (max-width: 900px) {
    .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid--3 .span-2 { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .form-grid--3 { grid-template-columns: minmax(0, 1fr); } }
/* 일시: 날짜(달력) + 시각(좁게) */
.datetime { display: flex; gap: var(--space-2); }
.datetime .datepicker { flex: 1; min-width: 0; }
.datetime__time { flex: none; width: 76px; }

/* 날짜 선택(.datepicker)은 디자인 시스템 DatePicker(bundle.css)로 옮겼다 (2026-10-19) — 동작은 common.js App.datePicker */

/* ===== 직원 관리 (crm-dev-guide 8.6) ===== */
/* 가입 신청: 이름/아이디 · 이메일 · 전화번호 · 신청일 · 권한 · [거절] [승인] */
.tbl--signups { --cols: minmax(140px, 1fr) minmax(200px, 1.5fr) 140px 120px 120px 136px; }
/* 사용자: 이름/아이디 · 이메일 · 전화번호 · 권한(+ 유일한 관리자) · 상태 · 최근 로그인 */
.tbl--users { --cols: minmax(150px, 1fr) minmax(200px, 1.5fr) 140px 220px 90px 176px; }
/* 표 안 권한 셀렉트: 작은 크기, 포커스 테두리가 셀에 잘리지 않게 */
.select--cell { width: 96px; height: var(--control-sm); font-size: 13px; }
.tbl__row > .cell-control { overflow: visible; }
.cell-note { font-size: 12.5px; color: var(--color-text-4); }

/* ===== 올릴 파일 목록 — 고객 서류 모달 (crm-document.md 4.3, 예전 비자 첨부파일 모양) — 디자인 시스템에 업로드 컴포넌트가 없어 토큰으로 조합 ===== */
.attach__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border-sub); border-radius: var(--radius-md); }
.attach__list:empty { display: none; }
.attach__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.attach__item + .attach__item { border-top: 1px solid var(--color-border-sub); }
.attach__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 13.5px; }
.attach__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach__size { font-size: 12.5px; color: var(--color-text-3); white-space: nowrap; }
.attach__actions { display: flex; gap: 2px; }
.attach__item .field-error { grid-column: 1 / -1; margin: 0; }
.attach__item .field-error:empty { display: none; }

/*
 * ===== 비자 서명 — 모달 안 (crm-visaform.md 4.1) — 디자인 시스템에 서명 컴포넌트가 없어 토큰·Button을 조합 =====
 * 그리기 칸·미리보기 안쪽은 종이에 들어갈 그림이라 테마를 따르지 않고 흰 바탕(+ 검정 선·회색 안내 글자)으로 둔다 — 색 토큰 규칙의 예외.
 */
.sign { gap: var(--space-3); }
.sign > .form-group__title { margin-bottom: var(--space-3); }
.sign__edit { display: flex; flex-direction: column; gap: var(--space-3); }
.sign__saved { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.sign__actions, .sign__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sign__tools { justify-content: flex-end; }
.sign-pad { position: relative; height: 160px; border: 1.5px dashed var(--color-border-input); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.sign-pad canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sign-pad__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #9aa0a8; pointer-events: none; }
.sign-preview { display: flex; align-items: center; justify-content: center; width: 320px; max-width: 100%; height: 120px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.sign-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 비자 모달 "신청서" 묶음 (crm-visaform.md 14.2) — [신청서 작성] + 안내 */
.application-group { gap: var(--space-2); }
.application-group > .form-group__title { margin-bottom: var(--space-2); }

/* ===== 비자 신청서 작성 모달 (crm-visaform.md 4.2, 12.2) ===== */
.application-notes { display: flex; flex-direction: column; gap: var(--space-1); }
/* 여러 서식 고르기 (crm-visaform.md 12.2·12.7) — 선택 카드 + checkbox, 한 줄에 하나, 목록 칸만 스크롤(최대 320px). 카드 안 서명 없음 줄은 주의 색 */
.application-forms__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.application-forms { grid-template-columns: 1fr; gap: var(--space-2); max-height: 320px; overflow-y: auto; padding: 4px var(--space-1) 4px 4px; } /* 안쪽 여백: 고른·포커스 테두리(outline-offset 2px)가 스크롤 칸에 잘리지 않게 */
.application-forms .choice-card__caution { color: var(--color-warning); font-weight: 600; }
/* 두 묶음 (crm-visatype.md 4.2) — 필요 서식(많아야 10개라 스크롤 없음) · [+ 다른 서식 추가] · 다른 서식(검색 + 스크롤) */
.application-picker { display: flex; flex-direction: column; gap: var(--space-4); }
.application-forms--required { max-height: none; overflow: visible; }
/* 고른 카드 아래 선택 묶음 (crm-formchoice.md 4.1) — 카드 글자 위치에 맞춰 들여 쓴다(admin 비자 종류 모달과 같은 모양) */
.application-form { display: flex; flex-direction: column; gap: var(--space-2); }
.application-choices { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) 0 var(--space-2) 42px; }
.application-choice { display: flex; flex-direction: column; gap: var(--space-2); }
.application-choice .seg-opt { height: var(--control-sm); padding: 0 12px; font-size: 13px; }
/* 위임업무 (crm-delegation.md 4.1) — 체크박스 3열 격자(좁으면 2열 → 1열), 기타신고는 옆에 글자 칸 */
.delegation { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.delegation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.delegation-opt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--color-text-2); cursor: pointer; }
.delegation-opt input { flex: none; margin: 0; }
.delegation-other { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.delegation-other .input { width: 9em; height: var(--control-sm); font-size: 13px; }
.delegation-other .field-error { flex-basis: 100%; }
@media (max-width: 640px) { .delegation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .delegation-grid { grid-template-columns: 1fr; } }


/*
 * ===== 출입국행정업무 추가·수정 모달 — 2단 (crm-immigration.md 4.3, 2026-10-23 개선안 A) =====
 * 1080px · 왼쪽 400px 기본 정보 + 서명 | 오른쪽 서류. 모달 높이는 왼쪽이 정하고 오른쪽 서류만 안에서 스크롤한다
 * (왼쪽은 스크롤 칸이 아니라 달력·고객 검색 목록 팝업이 잘리지 않는다). 900px 이하는 한 열로 쌓는다.
 */
#immigrationFormModal > .modal { max-width: 1080px; }
#immigrationFormModal .modal__head { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-sub); }
#immigrationFormModal .modal__body { padding: 0; }
.imm-form { display: grid; grid-template-columns: 400px minmax(0, 1fr); min-height: 560px; margin: 0; }
.imm-form__summary { grid-column: 1 / -1; margin: var(--space-5) var(--space-7) 0; }
.imm-form__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7); border-right: 1px solid var(--color-border-sub); }
.imm-form__main .form-grid .seg { flex-wrap: nowrap; }
.imm-form__main .form-grid .seg-opt { flex: 1; justify-content: center; padding: 0 8px; }
.imm-form__docs { position: relative; min-width: 0; background: var(--color-surface-sub); }
.imm-form__docs-scroll { position: absolute; inset: 0; overflow-y: auto; padding: var(--space-6) var(--space-7) var(--space-6) var(--space-6); }
/* 오른쪽 칸 하나만 스크롤 — 서류 목록 자체의 스크롤(320px)은 끈다. 카드 테두리가 잘리지 않게 안쪽 여백은 그대로 */
#immigrationFormModal .application-forms { max-height: none; overflow: visible; }
/* 고른 카드의 선택 묶음·입력 칸을 카드 안으로 — 카드 아래를 이어 붙인다 */
#immigrationFormModal .application-form { gap: 0; }
#immigrationFormModal .application-form:has(> .application-choices:not([hidden])) > .choice-card { border-bottom-color: var(--color-primary-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#immigrationFormModal .application-choices { padding: var(--space-3) var(--space-4) var(--space-4) 42px; border: 1px solid var(--color-primary); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-primary-tint); }
#immigrationFormModal .application-choices[hidden] { display: none; }
/* 아래 버튼 줄: [서류 만들기 n] | [취소] [저장] */
.imm-form__gen-count { margin-left: 2px; font-weight: 600; color: var(--color-text-3); }
.imm-form__foot-sep { align-self: center; width: 1px; height: 24px; margin: 0 var(--space-1); background: var(--color-border); }
@media (max-width: 900px) {
    .imm-form { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .imm-form__main { padding: var(--space-6) var(--space-7); border-right: 0; border-bottom: 1px solid var(--color-border-sub); }
    .imm-form__docs-scroll { position: static; overflow: visible; padding: var(--space-6) var(--space-7); }
    .imm-form__foot-sep { display: none; }
}

/* ===== 신분증·여권 스캔 — 고객 등록·수정 모달 맨 위 (crm-idscan.md 4.3) — 디자인 시스템에 업로드 영역·스피너가 없어 토큰으로 만든다 ===== */
.scan { display: flex; flex-direction: column; gap: var(--space-3); }
.scan__drop { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3) 10px var(--space-4); border: 1.5px dashed var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface-sub); }
.scan__drop.is-over { border-color: var(--color-primary); background: var(--color-primary-tint); }
.scan__icon { flex: none; width: 20px; height: 20px; color: var(--color-text-3); }
/* 한 줄 띠: 제목 뒤에 안내를 이어 쓰고, 넘치면 다음 줄로 */
.scan__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.scan__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-text); }
.scan__text .help { margin: 0; }
.scan__busy { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-sub); border-radius: var(--radius-md); }
.scan__previews { display: flex; flex: none; gap: var(--space-2); }
.scan__preview { flex: none; height: 64px; width: auto; max-width: 120px; object-fit: contain; border-radius: var(--radius-xs); background: var(--color-surface-sub); }
.scan__list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.scan__item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; }
.scan__thumb { height: 48px; width: auto; max-width: 96px; object-fit: contain; border-radius: var(--radius-xs); background: var(--color-surface-sub); }
.scan__label { font-size: 12px; line-height: 16px; color: var(--color-text-2); text-align: center; word-break: keep-all; }
.scan__label.is-unknown { color: var(--color-text-3); }
.scan__note { margin: 0; }
.scan__status { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-2); }
.scan .alert--split { flex-wrap: nowrap; }
.scan .alert--split > span:first-child { flex: 1; min-width: 0; word-break: keep-all; }
.scan__actions { display: flex; flex: none; gap: var(--space-2); }
.scan [hidden] { display: none; }
@media (max-width: 560px) { .scan__drop, .scan__busy { flex-wrap: wrap; } }
/* 처리 중 표시 (디자인 시스템에 없음) — 움직임을 줄인 환경에서는 느리게 */
.spinner { flex: none; width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spinner-rotate .8s linear infinite; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
/* 스캔으로 채운 칸 — 직원이 고치면 표시를 지운다(customer-form.js). 칸 아래 "이전 값"·확인 필요 문구 */
.input.is-scanned, .select--button.is-scanned { border-color: var(--color-primary); }
.field-note { margin: 4px 0 0; font-size: 12.5px; line-height: 18px; color: var(--color-text-3); }
.field-note__warn { display: block; color: var(--color-warning); font-weight: 600; }

/* ===== 고객 상세 — 서류 관리 (crm-document.md 4.2·4.3) ===== */
/* 트리 표: 파일 이름 · 크기 · 등록일 · 등록자 · 버튼 4개. 맨 위 단독 파일은 묶음의 폴더 아이콘 줄에, 묶음 안 파일은 한 단계 더 들여 쓴다 */
.tbl--documents { --cols: minmax(220px, 1fr) 88px 112px minmax(80px, 0.5fr) 164px; }
.tbl--documents .tbl__row[hidden] { display: none; }
.tbl--documents .is-right { text-align: right; }
.tbl--documents .tbl__row.is-editing { height: auto; min-height: var(--table-row-compact); padding: var(--space-2) 0; }
.tbl--documents .icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.tbl--documents .icon-btn[aria-disabled="true"]:hover { background: transparent; color: var(--color-text-3); }
.doc-name { display: flex; align-items: center; gap: var(--space-2); }
.doc-row:not(.doc-row--group):not(.doc-row--child) .doc-name { padding-left: calc(var(--space-4) + 36px); }
.doc-row--child .doc-name { padding-left: calc(var(--space-4) + 64px); }
.doc-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text-3); cursor: pointer; }
.doc-toggle:hover { background: var(--color-border-sub); color: var(--color-text); }
.doc-toggle svg { width: 16px; height: 16px; transition: transform 0.15s; }
.doc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.doc-name__icon { flex: none; display: inline-flex; color: var(--color-text-3); }
.doc-name__icon svg { width: 18px; height: 18px; }
.doc-name__icon--folder { color: var(--color-primary); }
.doc-name__group { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; cursor: pointer; }
.doc-name__group strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.doc-name__group small { flex: none; font-size: 12.5px; color: var(--color-text-4); }
/* 문서 이름 — 누르면 그 자리에서 고친다(마우스를 올리면 밑줄·연필) */
.doc-name__text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: text; }
.doc-name__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name__text svg { flex: none; width: 14px; height: 14px; color: var(--color-text-4); opacity: 0; }
.doc-name__text:hover span { text-decoration: underline; text-underline-offset: 3px; }
.doc-name__text:hover svg, .doc-name__text:focus-visible svg { opacity: 1; }
.inline-edit { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.inline-edit__input, .doc-upload__item .input { height: var(--control-sm); padding: 0 8px; font-size: 13.5px; }
.inline-edit__input { width: 100%; max-width: 360px; }
.inline-edit__error { margin: 0; white-space: normal; }
.inline-edit__error:empty { display: none; }
/* 서류 등록 모달 — 끌어다 놓는 영역(점선), 파일 줄: 파일 이름 · 크기 · 문서 이름 입력 · 빼기 */
.doc-upload { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.doc-upload.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.doc-upload__pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.doc-upload__pick .help { margin: 0; }
.doc-upload__empty { margin: 0; padding: var(--space-4) 0; font-size: 13px; color: var(--color-text-4); text-align: center; }
.doc-upload__empty[hidden] { display: none; }
.doc-upload__item { grid-template-columns: minmax(0, 1fr) auto minmax(160px, 220px) auto; }
.doc-upload [data-doc-errors] p { margin: 0; }
/* 서류 30개가 찼을 때 표 위 안내 (crm-filelimit.md 4.1) */
.doc-limit { margin-bottom: var(--space-3); }