/* 모달창 공통 css */
.modal_window {
  width: 100%;
  height: 100%;
  background-color: #00000080;
  opacity: 0.95;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;
  display: none;
}

.modal_box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 모달창 헤더부분 */
.modal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal_header h2 {
  font-size: 20px;
  font-weight: 700;
}
.modal_header img {
  cursor: pointer;
}
/* 모달창 날짜 */
.modal_date {
  font-size: 12px;
  color: #333333;
  font-weight: 500;
  margin-top: -12px;
}
.input_menu_container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* url 컨테이너 */
.input_container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input_container > p {
  font-size: 14px;
  color: #646464;
  font-weight: 500;
}
.input_box {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.input_box::placeholder {
  color: #333333;
}
.input_box:focus {
  border: 1px solid #333333;
}
.input_box:hover {
  background-color: #f8f8f8;
}
/* 모달창 삭제제,저장 버튼 */
.modal_btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.modal_btn_delete {
  padding: 6px 12px;
  border-radius: 3px;
  color: #ff404c;
  font-size: 14px;
  border: 1.5px solid #ff404c;
  background-color: #fff;
  font-weight: 500;
}
.modal_btn_save {
  padding: 6px 12px;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  border: 1.5px solid #333333;
  background-color: #333333;
  font-weight: 500;
  cursor: pointer;
}
/* 확인버튼 파랑색  */
.modal_btn_save_blue {
  border: 1.5px solid #0057ff;

  background-color: #0057ff;
}
.modal_btn_save_red {
  border: 1.5px solid #ff404c;
  background-color: #ff404c;
  color: #ffffff;
}
/* 데이터 수정 -> 확인 모달 */
.modal_container {
  box-sizing: border-box;
  width: 480px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  padding: 32px 28px;
  color: #333333;
  z-index: 10000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font-family: "Pretendard";
}

.small_modal_container {
  width: 444px !important;
  box-sizing: border-box !important;
}
.modal_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 18px;
  color: #333333;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 8px;
}
.modal_text_red {
  color: #ff404c;
  font-weight: 700;
}
.modal_btn_cancel {
  padding: 6px 12px;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  border: 1.5px solid #333333;
  background-color: #fff;
  font-weight: 500;
}
/* 데이터 수정 -> 삭제 버튼 */
.last_delete_btn {
  background-color: #ff404c;
  color: #ffffff;
  border: 1.5px solid #ff404c;
}
/* 일일레포팅 메타광고쪽 모달 */
.modal_content_container_2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.4px;
}
.modal_contents_item {
  flex: 1;
}
.modal_contents_item > p {
  margin-bottom: 7px;
  font-weight: 500;
  font-size: 14px;
  color: #646464;
}
.modal_contents_item_text {
  color: #333333;
  letter-spacing: -0.4px;
  font-size: 16px;
  font-weight: 500;
}

.modal_contents_item > input {
  height: 43px;
  width: 100%;
  color: #333333 !important;
  font-size: 16px;
  font-weight: 500;
  padding: 12px;
  text-align: left;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.modal_contents_item > input:hover {
  background-color: #f8f8f8;
}
/* CTR 입력 필드 컨테이너 */
.modal_contents_item {
  position: relative;
}
/* CTR 입력 필드의 % 표시 */
.modal_contents_item > .ctr_input ~ span {
  position: absolute;
  right: 12px;
  top: 53%;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  /* pointer-events: none; */
}
.modal_contents_item > span {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  display: flex;
  gap: 3px;
}
.modal_content_container_1 {
  width: 48%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.4px;
}
/* CTR 입력 필드 */
.modal_contents_input.ctr_input {
  margin-right: 8px;
}
/* 대시보드 모달창중에 날짜 여는 칸 */
.date_input {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
  cursor: pointer;
}
.date_input:hover {
  background-color: #f8f8f8;
}

/* 레포팅 페이지 에서 업로드 모달창 관련 */
.upload_modal_container {
  width: 444px;
}
.modal_sample_btn {
  /* 브라우저에서 기본으로 제공되는 부분 없애기기 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  background-color: #333333;
  color: #ffffff;
  border-radius: 4px;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.4px;
  cursor: pointer;
}
.modal_sample_btn:hover {
  background-color: #646464;
}

/* 파일 첨부 부분 */
.custom_file_input_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 파일 첨부전용 input  */
.custom_file_text_input {
  height: 43px;
  flex: 1;
  padding: 12px;
  border-radius: 4px;
  border: 1.5px solid #e5e5e5;
  background-color: #fff;
  color: #333333;
  letter-spacing: -0.4px;
  font-size: 16px;
  font-weight: 500;

  /* 효과만 제거 */
  pointer-events: none; /* 클릭 불가 */
  cursor: default !important; /* 커서 기본 */
}
.custom_file_text_input:hover,
.custom_file_text_input:focus {
  background-color: #fff;
  border: 1.5px solid #e5e5e5;
  outline: none;
  box-shadow: none;
}

/* 파일선택 버튼 */
.custom_file_btn {
  height: 43px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1.5px solid #646464;
  background: #fff;
  color: #646464;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload_modal_btn_box {
  margin-top: 8px;
}

.line_height {
  line-height: 30px;
}