/* ---------------------------------------------------------------------------
 * IK_Main_P01.xfdl 변환본 — IK 제휴점 고객 상세 모달 (4 mode = D/E/U/DEL).
 * Modal #A 12번째 인스턴스. 800x680 거대 모달 — 핵심 22 필드만 변환.
 * --------------------------------------------------------------------------- */

#ik-customer-detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}
#ik-customer-detail-modal.is-open { display: flex; }

#ik-customer-detail-modal .layer-wrap {
  width: 820px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#ik-customer-detail-modal .layer-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 2px solid #2c4368;
  background: #2c4368;
  color: #ffffff;
}
#ik-customer-detail-modal .layer-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
#ik-customer-detail-modal .layer-close {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}
#ik-customer-detail-modal .layer-content {
  padding: 12px 16px;
  overflow: auto;
}
#ik-customer-detail-modal .ik-cust-section {
  border: 1px solid #cdd2dc;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 8px 12px 10px;
}
#ik-customer-detail-modal .ik-cust-section legend {
  font-size: 12px;
  font-weight: 600;
  color: #2c4368;
  padding: 0 6px;
}
/* RHPT-60: flex-wrap + 축소 가능 입력으로 가로 오버플로우(오른쪽 잘림) 방지.
   라벨은 내용폭(min 84px), 입력은 shrink 허용(min-width 로 하한). 폭 초과 시 클리핑 대신 다음 줄로 wrap. */
#ik-customer-detail-modal .field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin-bottom: 6px;
}
/* RHPT-60: 라벨을 고정폭으로 통일해 입력박스 좌측 시작점을 정렬(가장 긴 "대표자은행계좌번호" 9자 기준). */
#ik-customer-detail-modal .field-label {
  flex: 0 0 108px;
  width: 108px;
  font-size: 12px;
  color: #1f2a44;
  white-space: nowrap;
}
#ik-customer-detail-modal .field-input {
  flex: 1 1 90px;
  min-width: 48px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #cdd2dc;
  border-radius: 3px;
  font-size: 12px;
  background: #ffffff;
}
/* 다필드 밀집 행(공사형태/건수/평수/직원수)은 라벨을 내용폭으로 좁히되 좌측 여백으로 이전 입력과 간격 확보. */
#ik-customer-detail-modal .field-row.dense .field-label {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding-left: 12px;
}
/* 단, 밀집 행의 첫 라벨(공사형태)만 고정폭 유지 → 윗 행 첫 열과 정렬(좌측 여백 없음). */
#ik-customer-detail-modal .field-row.dense .field-label:first-of-type {
  flex: 0 0 108px;
  width: 108px;
  padding-left: 0;
}
/* 밀집 행 입력은 균등 신장 → 4쌍이 폭 전체에 고르게 퍼지고 마지막(직원수) 입력이 오른쪽 끝까지 정렬. */
#ik-customer-detail-modal .field-row.dense .field-input {
  flex: 1 1 0;
  min-width: 44px;
}
#ik-customer-detail-modal .field-input.mini  { flex: 0 1 70px; min-width: 40px; }
/* 이름류 입력(대표자명·인트라인증자명): grow 로 행 전체를 채우지 않게 폭을 고정해, 같은 행의
   파트너(대표자주민번호·대표자은행계좌번호)가 다음 줄로 밀리지 않게 한다. */
#ik-customer-detail-modal .field-input.capw  { flex: 0 1 150px; }
/* 고정폭 유틸 — 삭제여부(=공사형태 입력폭 120)·삭제일(달력) 등 특정 열 정렬용.
   border-box 로 padding·border 포함한 실폭을 120/140 으로 고정(공사형태 grow 입력폭과 정합). */
#ik-customer-detail-modal .field-input.w120  { flex: 0 0 120px; box-sizing: border-box; }
#ik-customer-detail-modal .field-input.w140  { flex: 0 0 140px; box-sizing: border-box; }
/* 좁은 라벨 — 삭제일을 윗 행 공사건수 입력열과 정렬(공사건수 auto 라벨과 동일 폭). */
#ik-customer-detail-modal .field-label.col-narrow { flex: 0 0 52px; width: 52px; }
/* 긴 라벨(연대보증인 주민등록번호/주소) — 고정폭 통일로 두 행의 입력 열을 정렬(긴 라벨 기준 120px). */
#ik-customer-detail-modal .field-label.lg { flex: 0 0 120px; width: 120px; }
/* 2줄 입력(삭제사유 등): 라벨 옆에서 남은 폭을 채우되 세로 2줄. 고정 height(26) 대신 auto. */
#ik-customer-detail-modal textarea.field-input {
  height: auto;
  min-height: 46px;
  line-height: 1.4;
  padding: 4px 6px;
  box-sizing: border-box;
  resize: none;
  font-family: inherit;
}
#ik-customer-detail-modal .field-input.small { flex: 0 1 100px; min-width: 44px; }
#ik-customer-detail-modal .field-input.wide  { flex: 1 1 100%; }
#ik-customer-detail-modal .field-row .sep { font-size: 12px; color: #6d7280; }
#ik-customer-detail-modal .field-input:disabled {
  background: #f6f7fa;
  color: #6d7280;
}
#ik-customer-detail-modal .layer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #cdd2dc;
  background: #fafbfc;
}
#ik-customer-detail-modal .layer-footer button {
  height: 30px;
  padding: 0 16px;
  border: 1px solid #cdd2dc;
  background: #ffffff;
  color: #1f2a44;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
#ik-customer-detail-modal .layer-footer .btn-save {
  background: #2c4368;
  color: #ffffff;
  border-color: #2c4368;
}
#ik-customer-detail-modal .layer-footer .btn-save.danger {
  background: #b91c1c;
  border-color: #b91c1c;
}