@charset "UTF-8";

/* ============================================================
   서브 페이지 공통 (contact / 제품 상세)
   ============================================================ */

/* ---------- 페이지 머리 ----------
   홈 히어로와 같은 둥근 배너. 헤더가 위에 투명하게 겹친다.
   메뉴로 들어왔을 때 첫 화면에 본문이 바로 보이도록 낮게 잡는다. */
.page-head {
	padding-top: calc(var(--h-header) + 8px);
	background: var(--c-white);
}

.page-head-banner {
	position: relative;
	min-height: 168px;
	display: flex;
	align-items: center;
	background: var(--c-fill);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.page-head-bg {
	position: absolute;
	inset: 0;
}

/* 사진을 까는 변형 (제품 상세): 오른쪽 사진, 왼쪽은 배너 색으로 녹인다.
   사진 주소는 템플릿이 style 로 넣는다 */
.page-head--photo .page-head-banner {
	min-height: 260px;
}

/* 사진이 오른쪽 절반을 차지하므로 글은 왼쪽 절반 안에서 줄바꿈 */
.page-head--photo .page-head-inner {
	max-width: 52%;
}

.page-head--photo .page-head-bg {
	left: auto;
	width: 55%;
	background-size: cover;
	background-position: center;
}

.page-head--photo .page-head-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-fill) 0%, rgba(244, 244, 245, 0.5) 30%, rgba(244, 244, 245, 0) 60%);
}

/* 사진 출처 (오른쪽 아래 구석) */
.photo-credit {
	position: absolute;
	right: 20px;
	bottom: 14px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(17, 18, 20, 0.45);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.6875rem;
}

.photo-credit a {
	text-decoration: underline;
}

.page-head-inner {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 3vw, 40px) clamp(32px, 5vw, 72px);
}

/* 머리 바로 아래 첫 섹션은 위 여백을 줄여 본문을 끌어올린다 */
.page-head + .section {
	padding-top: clamp(40px, 4vw, 56px);
}

.page-title {
	font-size: clamp(2rem, 4.7vw, 4.75rem);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.page-lead {
	margin-top: 16px;
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-text-sub);
}

/* ---------- 문의 ---------- */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.contact-list {
	margin: 0;
	border-top: 3px solid var(--c-line-strong);
}

.contact-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 28px 0;
	border-bottom: 1px solid var(--c-line);
}

.contact-row dt {
	padding-top: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--c-brand);
}

.contact-row dd {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.3;
	/* 긴 메일 주소는 칸을 넘칠 때만 끊는다 */
	overflow-wrap: anywhere;
}

.contact-row--address dd,
.contact-row--small dd {
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	font-weight: 800;
	line-height: 1.5;
	word-break: keep-all;
}

.contact-row a {
	transition: color 0.2s;
}

.contact-row a:hover {
	color: var(--c-brand);
}

.embed--map {
	aspect-ratio: 4 / 3.4;
	border-radius: var(--r);
	background: #ddd;
}

/* ---------- 반응형 ---------- */

@media (max-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.page-head-banner {
		min-height: 200px;
	}

	.page-head--photo .page-head-inner {
		max-width: none;
	}

	.page-head--photo .page-head-bg {
		width: 100%;
		opacity: 0.3;
	}

	.page-head-inner {
		padding: 40px 24px;
	}


	.contact-row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 22px 0;
	}

	.contact-row dt {
		padding-top: 0;
	}

	.embed--map {
		aspect-ratio: 1;
	}
}