/* 기존 reports.css에서 body { ... } 부분을 완전히 제거합니다. */
:root {
	--molla-main-color: #D2B48C;
	--molla-darker-color: #A98B6D;
	--molla-light-color: #F0E6D8;
	--molla-lighter-color: #F8F4EF;
	--card-border-color: #e9ecef;
	--text-dark: #343a40;
	--text-muted: #6c757d;
}

/* .report-container 에 너비 제한을 걸어야 한다면 여기에 추가합니다. */
.reports-receive-container {
	padding: 40px; /* 기존 패딩 값 */
	margin-top: 20px; /* 상단 외부 여백 20px 추가 */
	margin-bottom: 20px; /* 하단 외부 여백 20px 추가 */
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	width: 100%;
	margin-left: auto;
	/* margin-top, margin-bottom 적용 후 margin: 0 auto;를 쓰면 */
	margin-right: auto; /* 상하 마진이 덮어씌워지므로 개별 지정 */
	box-sizing: border-box;
}

h2 {
	color: #333;
	font-size: 2em;
	margin-bottom: 10px;
}

p.description {
	color: #666;
	margin-bottom: 30px;
	line-height: 1.5;
}

.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.form-field {
	flex: 1;
	min-width: calc(50% - 10px);
	box-sizing: border-box;
}

.form-field.full-width {
	flex: 0 0 100%;
	min-width: 100%;
}

label {
	display: block;
	margin-bottom: 8px;
	color: #555;
	font-weight: bold;
}

input[type="text"], input[type="email"], select, textarea {
	width: 100%;
	padding: 12px 35px 12px 15px; /* 상, 우, 하, 좌 (오른쪽 패딩 확보) */
	border: 1px solid #ddd;
	/* border-radius: 5px; */
	font-size: 1em;
	box-sizing: border-box;
	transition: border-color 0.3s;
}

input[type="text"]:focus, input[type="email"]:focus, select:focus,
	textarea:focus {
	border-color: #ff9900;
	outline: none;
}

textarea {
	resize: none;
	min-height: 120px;
}



.info-message {
	margin-top: 30px;
	padding: 15px;
	background-color: #e9f5ee;
	border-left: 5px solid #4CAF50;
	color: #333;
	/* border-radius: 5px; */
	font-size: 0.9em;
	line-height: 1.4;
}

.info-message.warning {
	background-color: #fff3cd;
	border-left-color: #ffc107;
}

.required::after {
	content: ' *';
	color: #ff0000;
}

/* 신고 폼 - 첨부파일 미리보기 컨테이너 스타일 */
.image-preview-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

/* 개별 미리보기 이미지 썸네일 스타일 */
.image-preview-thumbnail {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border: 1px solid #ddd;
	/* border-radius: 5px; */
}
/* 개별 미리보기 아이템을 감싸는 컨테이너 (상대 위치 기준점) */
.preview-item {
	position: relative; /* 자식 요소인 삭제 버튼을 위한 위치 기준 */
	display: inline-block; /* 다른 아이템과 나란히 배치 */
}

/* 미리보기 삭제 버튼 스타일 */
.delete-preview-btn {
	position: absolute; /* 부모(.preview-item) 기준으로 위치 지정 */
	top: -5px; /* 오른쪽 상단 모서리 살짝 바깥쪽으로 */
	right: -5px;
	width: 20px;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.6); /* 반투명 검정 배경 */
	color: white;
	border: none;
/*	border-radius: 50%; /* 동그란 모양 */
	font-size: 12px;
	font-weight: bold;
	line-height: 20px; /* 텍스트 세로 중앙 정렬 */
	text-align: center; /* 텍스트 가로 중앙 정렬 */
	cursor: pointer; /* 마우스 올리면 손가락 모양으로 */
	opacity: 0; /* 평소에는 숨겨둠 */
	transition: opacity 0.2s;
}

/* 미리보기 아이템에 마우스를 올렸을 때, 삭제 버튼을 보여줌 */
.preview-item:hover .delete-preview-btn {
	opacity: 1;
}

/* =================================================================== */
/* 첨부 파일 입력 (Custom File Input) 스타일 - 리뷰 페이지 디자인 모방 */
/* =================================================================== */

/* custom-file 래퍼 (input과 label을 감싸는 div) */
.custom-file {
	position: relative;
	display: flex; /* 버튼과 파일명 표시 영역을 한 줄에 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
	width: 50%; /* ⭐⭐ 길이 조절: 전체 너비의 절반으로 설정 ⭐⭐ */
	min-width: 250px; /* 너무 줄어들지 않도록 최소 너비 설정 */
	overflow: hidden; /* 내용이 넘치면 숨김 (특히 긴 파일명) */
}

/* =================================================================== */
/* 신고 대상 검색 모달 디자인 수정 (image_f11a1f.png 참고) */
/* =================================================================== */

/* 모달 대화상자 크기 및 여백 조정 */
.modal-dialog.modal-lg {
	max-width: 700px; /* ⭐ 모달 최대 너비 설정 (정사각형에 가깝게) */
	width: 90%; /* 화면 크기에 따른 반응형 너비 */
	margin: 50px auto; /* ⭐ 상하 여백을 주고 가운데 정렬 */
}

/* 모달 콘텐츠 (배경, 테두리, 그림자) */
.modal-content {
	border-radius: 12px; /* ⭐ 둥근 모서리 */
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* ⭐ 더 뚜렷한 그림자 */
	border: none; /* Bootstrap 기본 테두리 제거 */
}

/* 모달 헤더 (제목과 닫기 버튼 포함) */
.modal-header {
	background-color: #fff; /* 흰색 배경 */
	border-bottom: 1px solid #e9ecef; /* 하단 구분선 */
	padding: 18px 25px; /* ⭐ 상하좌우 여백 추가 */
	border-top-left-radius: 12px; /* 둥근 모서리 유지 */
	border-top-right-radius: 12px;
	display: flex; /* 내부 요소 정렬을 위해 */
	justify-content: space-between; /* 제목과 버튼 분리 */
	align-items: center; /* 세로 중앙 정렬 */
}

/* 모달 제목 */
.modal-title {
	font-size: 20px; /* ⭐ 폰트 크기 조정 */
	font-weight: bold;
	color: #333;
}

/* ⭐⭐⭐ 닫기 버튼 스타일 - 우선순위 높이기 (핵심 수정) ⭐⭐⭐ */
/* #searchModal ID를 사용하여 더 높은 우선순위를 부여합니다. */
#searchModal .btn-close { /* ⭐ 선택자 변경: #searchModal이 추가됨 ⭐ */
	/* 기존 스타일 유지 */
	background-color: transparent;
	border: 0;
	padding: 0.5rem;
	opacity: 1; /* 불투명하게 */
	line-height: 1;
	transition: opacity 0.2s ease;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* ⭐⭐⭐ 핵심: SVG fill 색상 재정의 - 이제 이 규칙이 우선됩니다 ⭐⭐⭐ */
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z' fill='%23333333'/%3e%3c/svg%3e");
	/* 진한 회색/검정색 */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1em; /* 아이콘 크기 조절 */
}

/* ⭐⭐⭐ 호버 시 스타일 - 우선순위 높이기 (핵심 수정) ⭐⭐⭐ */
#searchModal .btn-close:hover { /* ⭐ 선택자 변경 ⭐ */
	opacity: 1;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z' fill='%23000000'/%3e%3c/svg%3e");
	/* 검정색 */
}

/* 모달 바디 (내부 내용 여백) */
.modal-body {
	padding: 25px; /* ⭐ 상하좌우 여백 추가 */
}

/* =================================================================== */
/* [추가] Custom Select Box Style for Report Page                      */
/* =================================================================== */

/* 1. select를 감싸는 wrapper 스타일 (위치 기준점) */
.reports-receive-container .select-wrapper {
  position: relative;
  width: 100%;
}

/* 2. <select> 태그의 브라우저 기본 디자인 비활성화 */
.reports-receive-container .select-wrapper select {
  -webkit-appearance: none; /* for Chrome, Safari, Opera */
  -moz-appearance: none;    /* for Firefox */
  appearance: none;         /* Standard */
  cursor: pointer;
  
  /* IE 10/11 용 화살표 숨기기 */
  &::-ms-expand {
    display: none;
  }
}

.reports-receive-container .select-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  
  /* ▼▼▼ 아이콘 영역(틀)의 크기를 키웁니다. (1rem -> 1.2rem) ▼▼▼ */
  width: 1.2rem;  /* 기존 1rem (16px) -> 19.2px */
  height: 1.2rem; /* 기존 1rem (16px) -> 19.2px */
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  
  /* ▼▼▼ 아이콘 자체의 크기도 키웁니다. (60% -> 80%) ▼▼▼ */
  background-size: 80%;
  
  pointer-events: none;
}