/* ---------------------------------------------------------------------------
 * 우편번호 조회 모달 (RHPT-88) — IK::POP_ZIPCODE_SEARCH_NEW.xfdl 변환본.
 *
 * ⚠ 이 파일이 없으면 모달이 **항상 화면에 보인다** — 이 저장소의 모달은
 *   `#<id> { display:none }` + `.is-open { display:flex }` 로 여닫고 JS 는 클래스만
 *   토글하므로, 스타일시트가 곧 개폐 장치다. 신규 모달을 추가할 때 DOM/JS 와 함께
 *   반드시 만들 것.
 *
 * z-index 는 선택정보 모달(9000)보다 위여야 한다 — 그 위에 겹쳐 뜨기 때문.
 * --------------------------------------------------------------------------- */

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

#zipcode-search-modal .layer-wrap {
  width: 640px;
  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;
}

#zipcode-search-modal .layer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: #2c4368;
  color: #ffffff;
  flex-shrink: 0;
}
#zipcode-search-modal .layer-title { margin: 0; font-size: 15px; font-weight: 600; }
#zipcode-search-modal .layer-close {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: #ffffff; cursor: pointer; font-size: 18px; line-height: 1; border-radius: 3px;
}
#zipcode-search-modal .layer-close:hover { background: rgba(255, 255, 255, 0.18); }

#zipcode-search-modal .layer-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}

#zipcode-search-modal .form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#zipcode-search-modal .form-row .form-label {
  width: 70px;
  flex-shrink: 0;
  font-size: 12px;
  color: #1f2a44;
  font-weight: 600;
}
#zipcode-search-modal .form-row .form-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  background: #ffffff;
}
#zipcode-search-modal .form-row .form-input:focus { border-color: #4f6b96; }
#zipcode-search-modal .form-row .form-select {
  flex: 0 0 auto;
  height: 28px;
  padding: 3px 6px;
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  color: #1f2a44;
  outline: none;
}
#zipcode-search-modal .form-row .form-select.medium { width: 150px; }
#zipcode-search-modal .form-row .search-btn {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: #4f6b96;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#zipcode-search-modal .form-row .search-btn:hover { background: #3d5a85; }
#zipcode-search-modal .form-row .search-btn:disabled { background: #8b95a8; cursor: not-allowed; }

#zipcode-search-modal .notice {
  margin: 6px 0 10px 78px;
  font-size: 11px;
  color: #6d7280;
  font-style: italic;
}

/* 결과 목록 — 행이 많아도 모달이 커지지 않게 목록만 스크롤한다. */
#zipcode-search-modal .zipcode-result {
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
#zipcode-search-modal .zipcode-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
#zipcode-search-modal .zipcode-table thead th {
  position: sticky;
  top: 0;
  background: #eceefa;
  color: #1f2a44;
  font-weight: 600;
  padding: 7px 8px;
  border-bottom: 1px solid #d0d4dc;
  text-align: left;
}
#zipcode-search-modal .zipcode-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f3;
  color: #1f2a44;
  /* 긴 주소가 표를 넓히지 못하게 잘라낸다(가로 스크롤 방지). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#zipcode-search-modal .zipcode-table tbody td.center { text-align: center; }
#zipcode-search-modal .zipcode-table tbody tr[data-post-no] { cursor: pointer; }
#zipcode-search-modal .zipcode-table tbody tr[data-post-no]:hover { background: #f2f5fb; }
#zipcode-search-modal .zipcode-table tbody td.empty {
  padding: 24px 8px;
  text-align: center;
  color: #6d7280;
  white-space: normal;
}

#zipcode-search-modal .zipcode-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
#zipcode-search-modal .zipcode-paging button {
  height: 26px;
  padding: 0 12px;
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  color: #1f2a44;
  cursor: pointer;
}
#zipcode-search-modal .zipcode-paging button:hover:not(:disabled) { background: #f2f5fb; }
#zipcode-search-modal .zipcode-paging button:disabled { color: #b8c0cf; cursor: not-allowed; }
#zipcode-search-modal .zipcode-paging .page-info { font-size: 12px; color: #6d7280; }

#zipcode-search-modal .layer-footer {
  display: flex; justify-content: center;
  padding: 12px 16px;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
  flex-shrink: 0;
}
#zipcode-search-modal .layer-footer button {
  height: 34px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  background: #e6e8ec;
  color: #1f2a44;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#zipcode-search-modal .layer-footer button:hover { background: #d0d4dc; }