/* ---------------------------------------------------------------------------
 * Form_MemberSelectInfo.xfdl 변환본 — 회원가입 선택정보입력 모달 + reference 스타일.
 *
 * 원본 시각: 765×751 큰 모달. 25 입력 필드 절대좌표 배치.
 * 변환은 5 개 fieldset 그룹 (사업자/조직/상호/주소/연락처/계좌) 으로 단순화하되
 * 모든 필드 보존 — 회원가입 세 번째 매듭 (사이클 완성).
 * --------------------------------------------------------------------------- */

#member-select-info-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;
}
#member-select-info-modal.is-open { display: flex; }

#member-select-info-modal .layer-wrap {
  width: 720px;
  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;
}

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

#member-select-info-modal .layer-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 20px;
}

/* RHPT-88: 그룹을 테두리 박스가 아니라 '헤딩 한 줄'로 표현한다.
   입력 항목이 21행까지 늘면서 박스 8개의 테두리·내부여백·외부여백이 약 320px(전체의 25%)을
   먹고 세로 스크롤을 만들었다. 레거시(765x751)는 같은 항목을 스크롤 없이 담았는데, 박스 없이
   `▶ 사업장주소` 같은 텍스트 헤더만 썼기 때문이다. 그 방식을 따른다 —
   줄간격을 줄이는 것보다 이 장식을 없애는 쪽이 4배 효과적이다. */
#member-select-info-modal fieldset {
  border: 0;
  border-top: 1px solid #e6e8ec;
  padding: 8px 0 0 0;
  margin: 0 0 6px 0;
  background: transparent;
  min-width: 0; /* fieldset 기본 min-width:min-content 가 flex row 를 밀어내는 것 방지 */
}
#member-select-info-modal fieldset:first-of-type { border-top: 0; padding-top: 0; }

/* 전역 `common.css` 의 `legend {display:none}` 을 이 모달에서만 되살린다(특이도가 같으면 못 이김). */
#member-select-info-modal fieldset legend {
  display: block;
  /* legend 는 fieldset 의 border-top 을 자기 박스 폭만큼 끊고 그 자리에 놓인다.
     padding 이 0 이면 문구 바로 뒤에서 선이 다시 시작해 붙어 보이므로 우측 여백을 준다. */
  padding: 0 12px 0 0;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #2c4368;
}

/* 폼 row — 라벨 + 입력 그룹 */
#member-select-info-modal .form-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
#member-select-info-modal .form-row:last-child { margin-bottom: 0; }
#member-select-info-modal .form-row .form-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  color: #1f2a44;
  font-weight: 600;
}
#member-select-info-modal .form-row .form-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 3px 8px;
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  background: #ffffff;
}
#member-select-info-modal .form-row .form-input:focus { border-color: #4f6b96; }
#member-select-info-modal .form-row .form-input:disabled {
  background: #f5f6f8;
  color: #6d7280;
}
#member-select-info-modal .form-row .form-input.small { flex: 0 0 100px; }
#member-select-info-modal .form-row .form-input.tiny { flex: 0 0 60px; }
#member-select-info-modal .form-row .form-input.medium { flex: 0 0 160px; }
/* RHPT-88: 전화·휴대폰 1번 칸. SP 가 전체 번호를 이 칸에 담아주므로 "02-6908-3166" 같은 값이
   들어간다 — tiny(60px)로는 잘려 보인다. 레거시는 3칸 모두 99px 였으나, 실제로 값이 오는
   1번 칸만 넓혀 "여기에 전체 번호가 들어온다"가 드러나게 한다. */
#member-select-info-modal .form-row .form-input.phone-main { flex: 0 0 150px; }
#member-select-info-modal .form-row .dash { color: #6d7280; }

/* RHPT-88: 부가정보 콤보. form-input 과 높이·테두리를 맞춰 한 줄에 섞여도 어긋나지 않게 한다. */
#member-select-info-modal .form-row .form-select {
  flex: 0 0 auto;
  height: 26px;
  padding: 2px 6px;
  border: 1px solid #d0d4dc;
  border-radius: 4px;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  color: #1f2a44;
  outline: none;
}
#member-select-info-modal .form-row .form-select:focus { border-color: #4f6b96; }
#member-select-info-modal .form-row .form-select.tiny { width: 80px; }
#member-select-info-modal .form-row .form-select.small { width: 110px; }
#member-select-info-modal .form-row .form-select.medium { width: 150px; }
/* 콤보 뒤에 붙는 단위 표기(년/월/평/명). 다음 라벨과 붙어 보이지 않게 우측 여백을 준다. */
#member-select-info-modal .form-row .unit {
  flex: 0 0 auto;
  margin-right: 8px;
  font-size: 12px;
  color: #6d7280;
}

#member-select-info-modal .form-row .lookup-btn,
#member-select-info-modal .form-row .zipcode-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #4f6b96;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#member-select-info-modal .form-row .lookup-btn:hover,
#member-select-info-modal .form-row .zipcode-btn:hover { background: #3d5a85; }
#member-select-info-modal .form-row .lookup-btn:disabled,
#member-select-info-modal .form-row .zipcode-btn:disabled {
  background: #8b95a8; cursor: not-allowed;
}
#member-select-info-modal .notice {
  margin: 2px 0 4px 106px;
  font-size: 11px;
  color: #6d7280;
  font-style: italic;
}
/* RHPT-88: 레거시는 한샘 계좌정보 안내만 붉은색으로 강조한다(다른 두 안내문구는 일반색).
   색상은 테마 표준 경고색 #d12020 을 재사용 — form-member-base-info 등 6곳과 동일. */
#member-select-info-modal .notice.is-alert {
  color: #d12020;
  font-style: normal;
  font-weight: 600;
}

#member-select-info-modal .layer-footer {
  display: flex; justify-content: center; gap: 8px;
  padding: 12px 16px;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
  flex-shrink: 0;
}
#member-select-info-modal .layer-footer button {
  height: 34px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#member-select-info-modal .btn-register { background: #2c4368; color: #ffffff; }
#member-select-info-modal .btn-register:hover:not(:disabled) { background: #1f2a44; }
#member-select-info-modal .btn-register:disabled { background: #8b95a8; cursor: not-allowed; }
#member-select-info-modal .btn-cancel { background: #e6e8ec; color: #1f2a44; }
#member-select-info-modal .btn-cancel:hover { background: #d0d4dc; }

/* form-member-select-info reference fragment 스타일 — 다른 reference 와 동일 톤 */
.form-member-select-info-fragment {
  padding: 24px;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #1f2a44;
}
.form-member-select-info-fragment h3 { margin: 0 0 12px 0; font-size: 16px; color: #2c4368; }
.form-member-select-info-fragment p.lead { margin: 0 0 20px 0; font-size: 13px; color: #555; line-height: 1.7; }
.form-member-select-info-mapping {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px;
}
.form-member-select-info-mapping th, .form-member-select-info-mapping td {
  border: 1px solid #d0d4dc; padding: 8px 12px; vertical-align: top;
}
.form-member-select-info-mapping thead th { background: #eceefa; color: #1f2a44; font-weight: 600; }
.form-member-select-info-mapping td code {
  background: #f5f6f8; padding: 1px 5px; border-radius: 2px;
  font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; color: #2c4368;
}
.form-member-select-info-fragment .demo-box {
  background: #fbfbfc; border: 1px dashed #b8c0cf; border-radius: 4px;
  padding: 12px 16px; font-size: 13px; line-height: 1.7; color: #1f2a44;
}
.form-member-select-info-fragment .demo-box strong { color: #2c4368; }
.form-member-select-info-fragment pre {
  background: #1f2a44; color: #eceefa; padding: 12px 16px; border-radius: 4px;
  font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; line-height: 1.5;
  overflow-x: auto;
}
.form-member-select-info-fragment .demo-launch {
  display: inline-block; margin-top: 8px; padding: 6px 14px;
  background: #2c4368; color: #ffffff; border: 0; border-radius: 4px;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.form-member-select-info-fragment .demo-launch:hover { background: #1f2a44; }