/* =========================
   KDL 회원가입 모달 v2(signupModal.css)
   (signupModal.jsp 기준) 
========================= */

/* -- 모달 오버레이 및 컨테이너 -- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.55);
  display: none; justify-content: center; align-items: center;
  z-index: 1000;
}
.modal-overlay.visible { display: flex; }

.modal-container {
  background: #f9fbfd;
  border-radius: 13px;
  box-shadow: 0 6px 32px rgba(44,60,90,.18);
  width: 92vw; max-width: 520px;
  padding: 15px 40px 30px 40px;
  display: flex; flex-direction: column;
  min-height: 580px; overflow-y: auto;
}

/* -- 헤더 -- */
.modal-header-wrap { display: flex; flex-direction: column; margin-bottom: 20px; }
.modal-header-row { display: flex; justify-content: flex-end; align-items: center; min-height: 38px; }
.btn-modal-close {
  font-size: 1.6rem; background: none; border: none;
  color: #616161; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer; margin-bottom: 15px;
  transition: background 0.18s, color 0.18s;
}
.btn-modal-close:hover { background: #ffebee; color: #d32f2f; }
.modal-title { font-size: 1.45rem; font-weight: 500; color: #222; margin: 0 0 10px 0; text-align: center; }

/* -- 회원 유형 탭 -- */
.modal-tabs-wrap { display: flex; border-bottom: 2px solid #e3e8ee; margin-bottom: 18px; }
.modal-tabs-wrap .modalo-tab-choice { display: none; }
.modal-tabs-wrap .tab-label {
  padding: 11px 22px 8px 22px; cursor: pointer; font-size: 1.11rem; font-weight: 500;
  color: #adb5bd; border-bottom: 2.5px solid transparent; margin-bottom: -2.5px;
  transition: color .18s, border-color .18s;
}
.modal-tabs-wrap .tab-label:hover { color: #348BEE; }
.modal-tabs-wrap .modalo-tab-choice:checked + .tab-label {
  color: #348BEE; border-bottom: 2.5px solid #348BEE;
  font-weight: 400; background: #f5f9ff;
}

/* -- 폼 필드 영역 -- */
.modal-form { margin-top: 10px; width: 100%; }

/* -- 폼 레이아웃 -- */
.signup-regist-row-wrap {
  display: flex; flex-direction: row; gap: 3px; margin-bottom: 10px; flex-wrap: wrap;  /* nowrap; 한 줄(한 행)에 강제로 모두 배치 */
}
.signup-regist-col-wrap {
  display: flex; flex-direction: row; column-gap: 20px; margin-bottom: 10px; flex-wrap: wrap;
}
.signup-id-row { display: flex; gap: 14px; width: 100%; }
.signup-id-row .signup-input-field { flex: 2 1 0%; min-width: 0; }
.signup-regist-row { display: flex; flex-direction: column; flex: 1 1 48%; min-width: 180px; gap: 3px; }

/* -- 입력 필드 (input/text/password 등) -- */
.signup-input-field, .input-field,
.email-id-input,.email-domain-input {
  width: 100%; min-width: 0; height: 40px;
  padding: 0 8px;
  border: 1px solid #348BEE;
  border-radius: 5px;
  font-size: 1.03rem; color: #333;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color .14s, box-shadow .13s;
}
/* 입력 필드: hover/focus 효과 */
.signup-input-field:focus, .input-field:focus,
.email-id-input:focus,.email-domain-input:focus,
.signup-input-field:focus-visible, .input-field:focus-visible
.email-id-input:focus-visible,.email-domain-input:focus-visible {
  border-color: #bbaaff;
  background-color: #f6f2fe;
  box-shadow:
    0 0 0 2px #d7cfff,
    0 0 0 5px #ede7ff;
  outline: none;  /* <- 기본 포커스 테두리 제거 */
}

.signup-input-field:hover, .input-field:hover,
.email-id-input:hover,.email-domain-input:hover {
    border-color: #79c4ff;
    background-color: #f0f7ff;
    box-shadow: 0 0 0 2px #e6f2ff;
    transition: all 0.16s;
}

.signup-input-field::placeholder, .input-field::placeholder,
.email-id-input::placeholder,.email-domain-input::placeholder { color: #bdbdbd; }
.signup-input-field:disabled, .input-field:disabled,
.email-id-input:disabled,.email-domain-input:disabled {
  background: #f6f8fa; border-color: #dde8f2; color: #b0b7c3; cursor: not-allowed; box-shadow: none;
}

/* -- 이메일 입력 그룹 전체 컨테이너 -- */
.email-wrap {
  display: flex;
  flex-direction: row;      /* 자식 요소들을 가로로 배치 */
  align-items: flex-start;  /* 자식 요소들의 상단을 기준으로 정렬 */
  gap: 5px;                 /* 각 컬럼(영역) 사이의 간격 */
  width: 100%;
}

/* -- 입력창과 메시지를 세로로 묶는 그룹 (아이디, 도메인) -- */
.email-wrap .email-input-row {
  display: flex;
  flex-direction: column; /* 내부의 input과 msg를 세로로 쌓음 */
  flex: 1;                /* 공간을 1 비율로 차지 (3등분) */
  gap: 3px;                 /* input과 메세지 간격 */
  min-width: 0;           /* 내용이 길어져도 줄이 깨지지 않도록 함 */
}

/* -- '@' 기호 -- */
.email-wrap .email-at {
  flex: 0 0 auto;         /* 내용 크기만큼만 차지하고, 늘어나거나 줄어들지 않음 */
  padding-top: 10px;      /* input 필드 높이의 중앙에 오도록 조정 */
  color: #6d8498;
}

/* -- select 박스를 감싸는 그룹 -- */
.email-wrap .email-select-row {
  flex: 1;                /* 공간을 1 비율로 차지 (3등분) */
  min-width: 0;
}

/* -- select 박스 자체의 스타일 -- */
.email-select-row .email-select {
  width: 100%; /* 부모 그룹의 너비를 꽉 채움 */
  height: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  letter-spacing: 0.05em;
  border-radius: 5px;
  border: 1px solid #348BEE;
  background: #fff url('/resources/images/comm/icon/arrow_down.svg') no-repeat right 2px center/32px 24px;
  color: #343a40;
  font-size: 1.01rem;
  padding-left: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.13s;
}

.email-select:hover,
.email-select:focus {
  border-color: #bbaaff;
  background-color: #f6f2fe;
  box-shadow: 0 0 0 2px #d7cfff, 0 0 0 5px #ede7ff;
  outline: none;
}
/* .signup-email-select:disabled {
  background: #f6f8fa; border-color: #dde8f2; color: #b0b7c3; cursor: not-allowed; box-shadow: none;
} */
/* -- 중복확인 버튼 -- */
.btn-dupcheck {
  width: 100%; max-width: 130px; height: 40px;
  background: #348BEE; color: #fff; border: 1px solid #b5c9e3;
  border-radius: 20px; font-size: 1.04rem; font-weight: 400; 
  cursor: pointer; letter-spacing: 0.1em;
  transition: background 0.16s, color 0.14s;
}
.btn-dupcheck:hover, .btn-dupcheck:focus-visible {
  background: #e3f2fd !important; color: #256ac0 !important;
  border-color: #64b9f8 !important;
  box-shadow: 0 0 8px #dbeffe;
  outline: 1px solid #bbaaff; /* 연보라색 */
  outline-offset: 1px;        /* 테두리와의 간격 */
}
.btn-dupcheck:disabled {
  /* background: #e4e8ec !important;
  color: #b0b9c7 !important;
  border-color: #d3d7e1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0.5; */   /* 살짝 흐릿하게 */
  opacity: 0.45;
  cursor: not-allowed;
}

/* -- 비밀번호 안내 -- */
.item-info { font-size: 13px; color: #6a7682; padding-left: 2px; margin-top: 2px; }

/* -- 안내 메시지 (유효성) -- */
.input-msg {
  margin-top: 2px; font-size: 0.75em; font-weight: 300; min-height: 15px;
  color: #888; transition: color 0.2s;
  white-space: nowrap;     /* 텍스트가 요소의 너비를 넘어가더라도 줄바꿈하지 않음 */
  overflow: hidden;        /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis; /* 숨겨진 텍스트를 말줄임표(...)로 표시 */
}
/* 오류 메시지 색상 */
.input-msg.error {
    color: red; /* 또는 #dc3545 등 더 구체적인 오류 색상 */
}
/* 유효 메시지 색상 */
.input-msg.ok {
    color: green; /* 유효성체크 성공완료 색상 */
}
/* 유효 메시지 색상 */
.input-msg.success {
    color: #af75fa; /* 서버거래 성공 색상 */
}
/* 아이디 중복 확인 성공 시 메시지 색상 (예시) */
.input-msg.idSuccess {
    color: #2196f3; /* 파란색 계열, 'ok' 대신 'idSuccess' 사용 */
}
/* 추가적으로 'info' 타입에 대한 명시적인 정의 */
/* .input-msg가 기본 info 역할을 하므로 별도 클래스 없이 위에 정의해도 무방 */
.input-msg.info {
    color: #6a7682; /* 기본 정보/안내 메시지 색상 */
}

/* -- 체크박스(동의 등) -- */
.comm-checkbox { accent-color: #348bee; width: 18px; height: 18px; cursor: pointer; }
.comm-checkbox:hover, .comm-checkbox:focus {
  border-color: #bbaaff;
  background-color: #f6f2fe;
  box-shadow:
    0 0 0 2px #d7cfff,
    0 0 0 5px #ede7ff;
  outline: none;  /* <- 기본 포커스 테두리 제거 */
}

/* -- 약관 동의 영역 -- */
.agreement-info-contents {
  background: #f8fafb; border-radius: 6px; padding: 5px 5px 10px 5px;
  margin: 0; box-shadow: 0 1px 3px rgba(35,63,120,.07);
}
.required { color: #d32f2f; font-weight: bold; margin-left: 2px; }
.optional { color: #7f97ad; font-weight: 400; }
.regist-button-row { margin-top: 18px; text-align: center; }

/* -- 로그인 유도/푸터 -- */
.signup-footer {
  display: flex; align-items: center; justify-content: center;
  margin-top: 22px; padding-top: 13px;
  border-top: 1px solid #348bee;
  font-size: 1rem; color: #6a7682; /* gap: 7px; */
}
.signup-footer span { margin-right: 20px; } /* '이미 계정이 있으신가요?' 텍스트와 이미지/버튼 사이 간격 */
.signup-footer img { width: 24px; height: 24px; margin-right: 8px;}
.btnToLogin {
  background: none; border: none; color: #348bee; font-size: 1.03rem; font-weight: 400;
  cursor: pointer; text-decoration: underline; padding: 0 2px; margin-left: 1px;
  box-shadow: 0 2px 5px #8a50f7; text-underline-offset: 3px; width: 100px;
  transition: color .16s;
}
.btnToLogin:hover {
  color: #512da8;                 /* 진한 보라 */
  text-decoration-color: #348bee; /* 언더라인 색상도 동일하게 */
  text-decoration-thickness: 1.5px; /* 언더라인 두께 변화 */
}

/* 회원가입 결과 메시지 */
#signupResultMsg {
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 1.03rem;
    border-radius: 8px;
    min-height: 20px;
    text-align: center;
    transition: all 0.2s;
    word-break: keep-all;
    display: none;            /* 항상 숨김, js에서 show/hide */
}
#signupResultMsg.error {
    background: #fff6f6;
    color: #db2828;
    border: 1px solid #ffbdbd;
    display: block;
}
#signupResultMsg.success {
    background: #e8f9ee;
    color: #249859;
    border: 1px solid #74e1ae;
    display: block;
}
/* 각 항목 input 메시지 */
/* .input-msg {
    font-size: 0.97em;
    color: #888;
    margin-top: 2px;
    min-height: 18px;
    transition: color 0.2s;
}
.input-msg.error {
    color: #db2828;
    font-weight: 600;
} */
/* 입력/버튼 비활성화 */
/* input:disabled, select:disabled, textarea:disabled, button:disabled {
    background: #f5f5f5 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    border-color: #e0e0e0 !important;
} */