/* =========================================================
   form.css - 입력 / 필드,라벨 / 세그먼트,카드 라디오 / 드롭존 / 체크 필 / 폼 테이블 (DESIGN.md 9.2, 9.4-b, 9.7)
   ========================================================= */
/* --- 다크 폴백: 리스킨 전 레거시 작성/상세 화면들이 입력 배경을 밝은색(#fff 등)으로 하드코딩하고 있어
   다크에서 흰 입력창이 된다. 다크에서만 입력 계열의 면/글자를 토큰으로 강제한다(:not 이 특이성을 높여
   레거시 페이지 규칙을 이긴다). 테두리는 건드리지 않는다 — .is-error 등 상태 테두리가 죽지 않게. --- */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="image"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--input-bg);
    color: var(--ink);
}

/* --- select2 다크 스킨 (2026-09-14) ---
   select2.min.css 는 CDN 이라 페이지마다 이 파일 뒤에 로드되고 라이트 색(#fff/#aaa/#ddd)이 하드코딩돼 있다.
   회원 수정 무역매니저·견적서 고객/매니저 선택 등 select2 를 쓰는 모든 admin 화면 공통. html[data-theme] 로 특이성을
   올려 CDN 규칙과 pages/*.css 의 3클래스 규칙(.form-table .select2-container ...)을 모두 이긴다 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--input-bg);
    border-color: var(--line-strong);
    color: var(--ink);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--input-placeholder); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--faint); }
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--faint); }
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--surface-2); color: var(--faint); }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--tint-blue); border-color: var(--tint-blue-line); color: var(--ink); }
/* 드롭다운(body 직속 .select2-container 안): 면·테두리·그림자 */
html[data-theme="dark"] .select2-dropdown {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
    box-shadow: var(--adm-shadow-panel);
}
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-dropdown { border-color: var(--accent); }
/* 검색창 */
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background: var(--input-bg);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
/* 옵션 목록 */
html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--ink); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--accent); color: #fff; }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--disabled { color: var(--faint); }
html[data-theme="dark"] .select2-container--default .select2-results__group { color: var(--muted); }
html[data-theme="dark"] .select2-container--default .select2-results__message { color: var(--faint); }

/* --- 검색/폼 공통 입력 (높이 40 / 반경 10) --- */
/* box-sizing 을 컴포넌트에 직접 선언: 레거시 input[type=text] 규칙에만 기대면 password/number 등은 content-box 라 40px 보다 커진다 */
.input-date, .input-select, .input-text {
    box-sizing: border-box;
    border: 1px solid var(--line-strong);
    background-color: var(--input-bg);
    border-radius: var(--r-ctl);
    font-size: 14px;
    padding: 8px 12px;
    height: 40px;
    line-height: 1.2;
    color: var(--ink);
    outline: none;
    transition: border-color .13s, box-shadow .13s;
}
.input-date:focus, .input-select:focus, .input-text:focus,
.m-bank-grid input:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;   /* 브라우저 기본 검정 outline 이 포커스 링 위에 겹치지 않게 — 인라인 스타일 textarea(메모·코멘트 모달)도 포함 (2026-09-10) */
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder); }
.input-text { min-width: 200px; }
/* 차수 검색: 숫자 한두 자리라 좁게. 스피너는 폭을 먹어 숨긴다 */
.input-num { min-width: 0; width: 92px; box-sizing: border-box; }
.input-num::-webkit-outer-spin-button,
.input-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-num { -moz-appearance: textfield; }

.input-date { box-sizing: border-box; height: 40px; padding: 8px 12px; }

/* --- 모달/폼 필드 --- */

/* 수동 파이요청 모달 폼 */
.m-field { margin-bottom:18px; }
.m-label { display:block; font-size:13px; font-weight:600; color:var(--sub); margin-bottom:8px; }
.m-radio { display:inline-block; margin-right:10px; font-size:14px; color:var(--ink); cursor:pointer; }

/* --- 세그먼트 토글 --- */

/* 세그먼트 토글(구분/요청유형/세부구분) — 네이티브 라디오를 CSS로만 세그먼트화(:has 로 활성 표시) */
.m-seg { display:flex; padding:3px; gap:3px; background:var(--track); border-radius:10px; }
.m-seg .m-radio { flex:1; margin:0; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-seg); font-size:13px; color:var(--faint); cursor:pointer; transition:background-color .12s, color .12s; }
.m-seg .m-radio input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.m-seg .m-radio:has(input:checked) { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(25,31,40,.13); font-weight:600; }
.m-seg .m-radio:has(input[value="URGENT"]:checked) { color:var(--danger); }
/* 긍정/부정 2택(수신 동의·거부 등): 선택된 칩 글자색으로 뜻을 구분 — .is-yes Primary / .is-no Danger */
.m-seg .m-radio.is-yes:has(input:checked) { color:var(--accent); }
.m-seg .m-radio.is-no:has(input:checked) { color:var(--danger); }

/* 컴팩트 세그(내용 폭만) — 단독 배치되는 세부구분/요청유형용 */
.m-seg-inline { display:inline-flex; }
.m-seg-inline .m-radio { flex:0 0 auto; padding:0 18px; }

/* --- 카드 라디오 --- */

/* 대행유형 라디오 카드(3열) */
.m-card-group { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.m-card-group .m-radio { margin:0; display:flex; align-items:center; gap:10px; padding:11px 12px;
    border:1.5px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; text-align:left; transition:border-color .12s, background-color .12s, box-shadow .12s; }
.m-card-group .m-radio:has(input:checked) { border-color:var(--accent); background:var(--tint-blue); box-shadow:0 0 0 3px rgba(49,130,246,.1); font-weight: 600; }
.m-card-group .m-radio input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.m-card-group .m-radio::before { content:""; width:16px; height:16px; flex:none; border-radius:50%; box-sizing:border-box; border:1.5px solid var(--line-mid); background:var(--surface); }
.m-card-group .m-radio:has(input:checked)::before { border:5px solid var(--accent); }
.m-card-title { font-size:13px; color:var(--ink); line-height:1.3; }
.m-card-hint { font-size:11px; color:var(--faint); }

/* --- 두 칸 그리드 --- */

/* 두 필드를 한 줄에(세로 길이 절약) */
.m-grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; margin-bottom:18px; }
.m-grid-2 .m-field { margin-bottom:0; }

/* --- 파일 첨부(드롭존 + 목록) --- */

/* 파일 첨부(견적서 없음) — 드롭존 + 파일 목록 */
.m-file-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.m-file-head .m-label { margin:0; }
.m-file-count { font-size:11px; color:var(--faint); }
.m-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    padding:22px; border:1.5px dashed var(--tint-blue-line); border-radius:14px; background:var(--tint-drop); cursor:pointer;
    transition:border-color .13s, background-color .13s; }
.m-dropzone:hover { border-color:var(--tint-blue-line-strong); }
.m-dropzone.dragover { border-color:var(--accent); background:var(--tint-blue); }
.m-dropzone svg { color:var(--accent); }
.m-drop-title { font-size:13.5px; color:var(--sub); }
.m-drop-title b { color:var(--accent-ink); font-weight:600; }
.m-drop-hint { font-size:11.5px; color:var(--faint2); }
.m-file-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.m-file-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.m-file-badge { flex:none; padding:3px 6px; border-radius:6px; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#fff; }
.m-file-name { flex:1; min-width:0; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-file-size { flex:none; font-size:11.5px; color:var(--faint2); }
.m-file-del { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center;
    border:none; background:transparent; border-radius:6px; color:var(--faint); font-size:16px; line-height:1; cursor:pointer; }
.m-file-del:hover { background:var(--soft-red-bg); color:var(--danger); }

/* --- 체크 필(공통, DESIGN.md 9.5) ---
   네이티브 체크박스(accent-color, 크기 미지정)를 pill 라벨로 감싼 토글. 구조는 하나, 색 변형만 다르다:
   .check-pill-primary(기본, Primary) / .check-pill-danger(긴급) / .check-pill-grey(보류).
   미체크: 흰 배경 + 회색 테두리 + muted 글씨 / 체크: 변형색 테두리 + 연한 변형색 배경 + 진한 변형색 글씨 */
.check-pill { --pill:var(--accent); --pill-ink:var(--accent-ink); --pill-bg:var(--tint-blue);
    display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 13px; box-sizing:border-box;
    border:1.5px solid var(--line); border-radius:var(--r-ctl); background:var(--surface);
    font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; white-space:nowrap;
    transition:border-color .12s,background .12s,color .12s; }
.check-pill-icon { flex:none; }
.check-pill:hover { background:var(--surface-2); }
.check-pill:has(input:checked) { border-color:var(--pill); background:var(--pill-bg); color:var(--pill-ink); }
.check-pill-danger { --pill:var(--danger); --pill-ink:var(--danger-ink); --pill-bg:var(--soft-red-bg); }
.check-pill-grey   { --pill:var(--muted); --pill-ink:var(--sub); --pill-bg:var(--track); }

/* --- TDS 체크박스/라디오(공통 전역, DESIGN.md 9.5-b) ---
   2026-09-02 전역화. 이전에는 .check-pill/.choice-group/.pr-check-col/input.tds-check 화이트리스트에만
   적용되어, 마크업을 못 고치는 리스킨 페이지(견적서 작성·LITE 상세 등)는 네이티브 컨트롤 +
   admin_common 의 scale(1.2/1.3) 변형으로 떨어져 화면마다 모양이 달랐다.
   이제 관리자 전 화면의 checkbox/radio 를 여기서 직접 그린다.
   - 크기: --check-size 하나로만 조절(기본 14px). 페이지에서 `스코프 { --check-size: 16px; }` 식으로만 키울 것.
   - 색: --check 하나로만(기본 Primary, 체크 필은 --pill).
   - 세로 정렬: 컨트롤은 vertical-align:middle 고정. 라벨에 vertical-align:Npx 같은 오프셋 금지 —
     라벨을 inline-flex + align-items:center 로 묶거나 라벨도 middle 로 맞춘다.
   - 개별 페이지에서 appearance/border/scale 을 다시 만지지 말 것(겹침의 원인). */
input[type="checkbox"],
input[type="radio"],
input.tds-check {
    --check:var(--accent);
    --check-size:16px;
    appearance:none; -webkit-appearance:none;
    width:var(--check-size); height:var(--check-size); min-width:var(--check-size);
    margin:0 4px 0 0; padding:0; flex:none; box-sizing:border-box;
    border:1.5px solid var(--line-mid); background:var(--surface); position:relative; vertical-align:middle;
    cursor:pointer; transform:none; /* admin_common 의 scale(1.2/1.3) 해제 */
    transition:border-color .12s, background .12s, box-shadow .12s; }
input[type="checkbox"], input.tds-check { border-radius:4px; }
input[type="radio"] { border-radius:50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover, input.tds-check:hover { border-color:var(--check); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input.tds-check:focus-visible { outline:none; box-shadow:0 0 0 3px var(--tint-blue); }
input[type="checkbox"]:checked, input[type="radio"]:checked, input.tds-check:checked { border-color:var(--check); background:var(--check); }
/* 체크 표시는 크기 비례로 그린다 — --check-size 만 바꾸면 같이 커진다.
   ::after(회전 보더)+translate 는 요소가 소수점 좌표에 놓이면(플렉스 라벨 vs 표 셀) 서브픽셀 위상 차로
   체크 위치가 자리마다 미세하게 달라 보인다 — 라디오 도트와 같은 문제(2026-09-04). 배경 SVG 로 그리면
   요소 좌표계 안에서 함께 래스터라이즈되어 어디서나 균일하다 */
input[type="checkbox"]:checked, input.tds-check:checked {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.9 8.6l2.8 2.8 5.4-6.6'/%3E%3C/svg%3E");
    background-size:100% 100%; background-position:center; background-repeat:no-repeat; }
input[type="checkbox"]:checked::after, input.tds-check:checked::after { content:none; }
/* 라디오 도트: ::after + translate(-50%,-50%) 는 요소가 소수점 좌표에 놓이면 서브픽셀 위상 차로
   도트 크기가 제각각으로 보인다(특히 --check-size 홀수일 때). radial-gradient 의 1px 소프트 엣지로
   그리면 위치와 무관하게 균일 — 도트 지름은 기존과 동일한 36%(반지름 18%) 비례 */
input[type="radio"]:checked {
    background:radial-gradient(circle, #fff calc(var(--check-size) * 0.18), var(--check) calc(var(--check-size) * 0.18 + 1px)); }
input[type="radio"]:checked::after { content:none; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled, input.tds-check:disabled { opacity:.4; cursor:not-allowed; }
.check-pill input[type="checkbox"] { --check:var(--pill); }

/* --- 폼 테이블: 등록/수정/상세 (DESIGN.md 9.4-b) --- */
.form-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; border-top: 1px solid var(--line); }
.form-table th, .form-table td { border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.form-table th { width: 160px; padding: 12px 16px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--sub); }
.form-table td { padding: 10px 16px; background: var(--surface); color: var(--ink); }
.form-table td .input-text, .form-table td .input-select, .form-table td .input-date, .form-table td .input-textarea { width: 100%; max-width: 480px; }
.form-table .req { margin-left: 4px; color: var(--danger); font-weight: 700; }
.form-table tr.form-section th { background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700; padding-top: 24px; }
.form-section-title { margin: 24px 0 12px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-row .input-text, .field-row .input-select, .field-row .input-date { width: auto; }
/* 한 칸 안의 보조 라벨(예: 이우/위해) — th 라벨과 같은 톤(13/600 body). 폭은 글자만큼, 다음 컨트롤과 8px 간격은 .field-row gap 이 준다 */
.field-label { flex: none; font-size: 13px; font-weight: 600; color: var(--sub); white-space: nowrap; min-width: 32px; }
.input-textarea { box-sizing: border-box; height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
/* 스레드형 모달 입력(메모·코멘트, rows=2): 인라인 border 가 textarea:focus 의 파란 테두리를 이겨 포커스가 그림자만 남던 문제 — 클래스로 이전 (2026-09-10) */
.input-thread { flex: 1; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--adm-r-sm); padding: 8px 10px; font-size: 14px; line-height: 1.5; resize: vertical; background: var(--input-bg); color: var(--ink); outline: none; transition: border-color .13s, box-shadow .13s; }
/* 수정 불가 값(아이디·가입일 등): 입력과 같은 40px 박스에 회색 배경으로 "잠긴 필드"처럼 보여 행 높이가 입력 행과 맞는다 */
.form-static { display: inline-flex; align-items: center; box-sizing: border-box; width: 100%; max-width: 480px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--sub); font-size: 14px; }
.form-hint { margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--muted); }
.form-error { margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--danger); }
.input-text.is-error, .input-select.is-error, .input-date.is-error, .input-textarea.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(228,41,57,.15); }
.choice-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 폼 테이블 안의 체크/라디오 행은 입력 행(컨트롤 40px)과 같은 높이로 — 담당업무 행이 얕게 보이던 문제 (2026-09-14) */
.form-table td .choice-group { min-height: 40px; }
.choice-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.choice-group input[type="radio"] { accent-color: var(--accent); transform: none; margin: 0; }   /* 체크박스는 아래 TDS 체크박스 공통 스펙 */
.w-92 { width: 92px !important; } .w-160 { width: 160px !important; } .w-240 { width: 240px !important; } .w-full { width: 100% !important; max-width: none !important; }
.form-preview-img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 24px; }
.form-actions .form-actions-left { margin-right: auto; display: flex; gap: 8px; }

/* 숨긴 파일 input(label.btn 으로 연다) · 자동완성 방지용 더미 입력 등 화면에 두지 않는 컨트롤 */
.file-hidden { display: none !important; }

/* number 입력의 스핀 버튼(우측 ▲▼) 전역 숨김 — 일반 input 과 같은 모양으로 (2026-09-04).
   증감이 필요한 곳은 견적서 목록 차수처럼 −/＋ 버튼을 따로 둔다 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* --- 스마트에디터2(네이버 SE2) 다크 프레임 ---
   에디터는 PNG 스프라이트 툴바 + 자체 iframe 이라 다크화가 불가능하고, 본문 캔버스는
   라이트 공개 사이트에 실릴 콘텐츠의 WYSIWYG 미리보기라 흰 문서 유지가 맞다.
   다크에서는 구글 Docs 처럼 "의도된 밝은 문서 시트"로 보이도록 테두리·라운드·그림자만 입힌다 (2026-09-11) */
:root[data-theme="dark"] iframe[src*="SmartEditor2Skin"] {
    border: 1px solid var(--line-mid);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: light;
}