@charset "utf-8";

/* ===========================================================
   고충처리 페이지 전용 스타일
   - PC: 섹션 타이틀(좌측) | 입력 영역(우측)
         + 입력 영역 내부도 라벨(좌측) | 인풋(우측)
   - 모바일: 모든 항목 상하 배치
   - 메인 컬러: #1f378d
   - 주의: default.css의 input[type=text] 글로벌 스타일을 덮어쓰기 위해
           input.gc_input / textarea.gc_textarea 형태로 specificity 높임
=========================================================== */

/* 외곽 섹션: PC 좌우 grid -------------------------------- */
.gc_section {
	display: grid;
	grid-template-columns: 220px 1fr;
	column-gap: 40px;
	align-items: start;
	margin-top: 50px;
	padding: 30px 0;
	border-top: 1px solid #eaeaea;
}
.gc_section:first-of-type {
	margin-top: 30px;
	border-top: none;
}
.gc_section_tit {
	font-size: 20px;
	font-weight: 700;
	color: #1f378d;
	text-align: left;
	margin: 0;
	padding-top: 6px;
	letter-spacing: -0.5px;
	line-height: 1.4;
}
.gc_section_body {
	min-width: 0;
}

/* 내부 필드: PC 라벨-인풋 좌우 grid ------------------------ */
.gc_field {
	display: grid;
	grid-template-columns: 90px 1fr;
	column-gap: 24px;
	align-items: center;
	margin-bottom: 20px;
}
.gc_field:last-child {
	margin-bottom: 0;
}
.gc_field_textarea {
	align-items: start;
}
.gc_field_textarea .gc_label {
	padding-top: 10px;
}

.gc_label {
	font-size: 14px;
	font-weight: 700;
	color: #222;
	margin: 0;
}

/* default.css의 input[type=text] {border:1px solid #bbb; height:26px}
   글로벌 스타일을 이기기 위해 'input.gc_input' 형태 사용 */
input.gc_input,
input[type=text].gc_input {
	width: 100%;
	height: 38px;
	border: 0;
	border-bottom: 1px solid #d0d0d0;
	background: transparent;
	font-size: 14px;
	color: #333;
	padding: 0 4px;
	outline: none;
	box-sizing: border-box;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	transition: border-color .15s;
}
input.gc_input:focus,
input[type=text].gc_input:focus {
	border-bottom-color: #1f378d;
}
input.gc_input::placeholder,
input[type=text].gc_input::placeholder {
	color: #b8b8b8;
}

textarea.gc_textarea {
	width: 100%;
	min-height: 160px;
	border: 1px solid #d0d0d0;
	background: #fff;
	font-size: 14px;
	color: #333;
	padding: 12px;
	outline: none;
	box-sizing: border-box;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}
textarea.gc_textarea:focus {
	border-color: #1f378d;
}
textarea.gc_textarea::placeholder {
	color: #b8b8b8;
}

.gc_field_notice {
	margin-top: 10px;
	font-size: 13px;
	color: #666;
	letter-spacing: -0.3px;
}

/* 고충처리 절차 (SVG 이미지) ------------------------------ */
.gc_process {
	padding: 4px 0;
}
.gc_process_img {
	max-width: 100%;
	height: auto;
}
.gc_process_img.pc { display: block; }
.gc_process_img.mob { display: none; }

/* 신고자 보호 프로그램 박스 ------------------------------- */
.gc_protect_box {
	padding: 22px 24px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
	color: #333;
	font-size: 14px;
	line-height: 1.7;
}
.gc_protect_box p {
	margin: 0 0 10px 0;
}
.gc_protect_box p:last-child {
	margin-bottom: 0;
}

/* 개인정보 수집 동의 박스 --------------------------------- */
.gc_term_box {
	padding: 22px 24px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
	color: #333;
	font-size: 13px;
	line-height: 1.8;
}
.gc_term_form {
	margin-top: 14px;
	text-align: left;
}
.gc_term_form label {
	margin-left: 6px;
	font-size: 14px;
	color: #222;
	cursor: pointer;
}

.pc_only { display: inline; }
.mob_only { display: none; }


/* ============================================================
   모바일 반응형 (768px 이하: 모두 상하 배치로 전환)
============================================================ */
@media screen and (max-width: 768px) {
	.gc_section {
		display: block;
		margin-top: 36px;
		padding: 24px 0 0;
	}
	.gc_section:first-of-type {
		margin-top: 20px;
		padding-top: 0;
	}
	.gc_section_tit {
		font-size: 18px;
		text-align: center;
		margin-bottom: 22px;
		padding-top: 0;
		color: #222;
	}
	.gc_section_body {
		max-width: 720px;
		margin: 0 auto;
		padding: 0 4px;
	}

	/* 내부 필드도 모바일에서는 상하 배치 */
	.gc_field {
		display: block;
		margin-bottom: 22px;
	}
	.gc_field_textarea .gc_label {
		padding-top: 0;
	}
	.gc_label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
	}

	input.gc_input,
	input[type=text].gc_input {
		height: 38px;
		font-size: 14px;
	}
	textarea.gc_textarea {
		min-height: 140px;
	}

	/* 절차 이미지 모바일 전환 */
	.gc_process_img.pc { display: none; }
	.gc_process_img.mob {
		display: block;
		margin: 0 auto;
	}

	.gc_protect_box,
	.gc_term_box {
		padding: 18px 20px;
		font-size: 13px;
	}

	.pc_only { display: none; }
	.mob_only { display: inline; }
}