@charset "utf-8";
/*
 * 견적의뢰 랜딩 공통 스타일
 *
 * 랜딩 원본(Design Canvas 산출물)의 CSS는 body / * / h1~h6 / a / img 같은
 * 전역 셀렉터를 쓰므로 그대로 두면 사이트 전체를 오염시킨다.
 * 모든 규칙을 .eco-landing 하위로 스코프한다. 색상 토큰은 테마별 파일
 * (landing/interior.css, landing/event.css)에서 .eco-landing.is-* 에 선언한다.
 */

.eco-landing {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	font-weight: 400;
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}
.eco-landing *,
.eco-landing *::before,
.eco-landing *::after {
	box-sizing: border-box;
}
/*
 * 사이트 공통 css/common.css 가 `* { color: #222 }` 로 모든 요소에 색을 직접 박아
 * 색상 상속을 전부 끊는다. 랜딩은 어두운 섹션이 컨테이너에 color 를 주고 자식이
 * 물려받는 구조라, 인라인 color 가 없는 제목·문단이 #222 로 떨어져 배경에 묻힌다.
 * (0,1,0) 으로 그 `*` 를 덮어 상속을 되살린다. 자기 색을 가진 요소
 * (.lnd-form / .lnd-input / a / 인라인 style) 는 특정도가 더 높아 그대로 유지된다.
 */
.eco-landing * { color: inherit; }
.eco-landing h1,
.eco-landing h2,
.eco-landing h3,
.eco-landing h4,
.eco-landing h5,
.eco-landing h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-2);
}
.eco-landing h1 { font-size: 42px; }
.eco-landing h2 { font-size: 32px; }
.eco-landing h3 { font-size: 25px; }
.eco-landing h4 { font-size: 20px; }
.eco-landing h5 { font-size: 16px; }
.eco-landing h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.eco-landing p { margin: 0 0 var(--space-3); }
.eco-landing a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
.eco-landing img { display: block; max-width: 100%; }
.eco-landing figure { margin: 0; }
.eco-landing figcaption {
	font-size: 13px;
	margin-top: var(--space-1);
	color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-landing ul,
.eco-landing ol { list-style: none; margin: 0; padding: 0; }
.eco-landing input,
.eco-landing select,
.eco-landing textarea,
.eco-landing button { font-family: inherit; }
.eco-landing :focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.eco-landing ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* 랜딩 페이지에서만 앵커 이동을 부드럽게 */
html:has(.eco-landing) { scroll-behavior: smooth; }

/* ── 이미지 ────────────────────────────────────────────────────────── */
.eco-landing .lnd-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 문서 스캔(등록증 등)은 잘리면 안 되므로 전체를 담는다 */
.eco-landing .lnd-img-contain { object-fit: contain; }
/* 자료 미확보 구간(실내건축 등록증 등)의 자리표시 */
.eco-landing .lnd-img-placeholder {
	width: 100%;
	height: 100%;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	background: var(--color-surface);
	border: 1px dashed color-mix(in srgb, var(--color-text) 32%, transparent);
	color: color-mix(in srgb, var(--color-text) 55%, transparent);
	font-size: 15px;
	line-height: 1.6;
}

/* ── 스크롤 진입 애니메이션 (landing-motion.js) ────────────────────── */
/*
 * 초기 opacity:0 은 .reveal-ready 가 붙은 뒤에만 적용한다. 이 클래스는
 * landing-motion.js 가 직접 붙이므로, 스크립트가 로드되지 않거나 실패하면
 * 콘텐츠가 그냥 보인다(숨은 채 남지 않는다).
 */
.eco-landing.reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.eco-landing.reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.eco-landing.reveal-ready [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── 견적요청 폼 (fragments/landing_estimate_form.html) ────────────── */
.eco-landing .lnd-form {
	background: #fff;
	color: #1d1f20;
	padding: clamp(24px, 3vw, 36px);
}
.eco-landing .lnd-form-head { margin-bottom: 22px; }
.eco-landing .lnd-form-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-accent-700);
	margin-bottom: 10px;
}
.eco-landing .lnd-form-title {
	margin: 0 0 8px;
	font-size: clamp(21px, 2vw, 27px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #1d1f20;
}
.eco-landing .lnd-form-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #5d5d60;
}
.eco-landing .lnd-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}
.eco-landing .lnd-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.eco-landing .lnd-field--full { grid-column: 1 / -1; }
.eco-landing .lnd-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #424244;
}
.eco-landing .lnd-label.is-required::after {
	content: "*";
	margin-left: 3px;
	color: var(--color-accent);
}
.eco-landing .lnd-input,
.eco-landing .lnd-select,
.eco-landing .lnd-textarea {
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	font-size: 16px;
	color: #1d1f20;
	background: #fff;
	border: 1px solid #c9c9cc;
	border-radius: var(--radius-md);
	caret-color: var(--color-accent);
}
.eco-landing .lnd-textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.eco-landing .lnd-input:focus,
.eco-landing .lnd-select:focus,
.eco-landing .lnd-textarea:focus { border-color: var(--color-accent); outline: none; }
.eco-landing .lnd-input[readonly] { background: #f2f2f3; color: #5d5d60; }
.eco-landing .lnd-input::placeholder,
.eco-landing .lnd-textarea::placeholder { color: #9b9b9e; }
.eco-landing .lnd-input-unit { position: relative; }
.eco-landing .lnd-input-unit .lnd-input { padding-right: 42px; }
.eco-landing .lnd-unit {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #5d5d60;
	pointer-events: none;
}
.eco-landing .lnd-counter {
	align-self: flex-end;
	font-size: 13px;
	color: #7a7a7d;
}
.eco-landing .lnd-form-actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}
.eco-landing .lnd-btn {
	flex: 1;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.eco-landing .lnd-btn--primary { background: var(--color-accent); color: #fff; }
.eco-landing .lnd-btn--primary:hover { background: var(--color-accent-700); }
.eco-landing .lnd-btn--ghost {
	background: #fff;
	color: #1d1f20;
	border-color: #1d1f20;
}
.eco-landing .lnd-btn--ghost:hover { background: #1d1f20; color: #fff; }
.eco-landing .lnd-form-note {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #7a7a7d;
}

@media (max-width: 680px) {
	.eco-landing .lnd-fields { grid-template-columns: 1fr; }
	.eco-landing .lnd-form-actions { flex-direction: column; }
}

/* ── 지사 안내 (랜딩 푸터에서 이관) ────────────────────────────────── */
.eco-landing .lnd-offices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.eco-landing .lnd-office {
	padding: 16px 0;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 12px;
	align-items: start;
}
.eco-landing .lnd-office-name { font-size: 15px; font-weight: 800; }
.eco-landing .lnd-office-addr { font-size: 15px; line-height: 1.7; }
.eco-landing .lnd-office-biz { font-size: 13px; margin-top: 4px; opacity: 0.75; }

@media (min-width: 1000px) {
	.eco-landing .lnd-offices { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
}
@media (max-width: 480px) {
	.eco-landing .lnd-office { grid-template-columns: 1fr; gap: 4px; }
}

/* 앵커로 이동했을 때 섹션이 화면 맨 위에 딱 붙지 않도록 */
.eco-landing [id] { scroll-margin-top: 16px; }

/* ── 복사 안내 토스트 (landing-contact.js) ────────────────────────── */
.eco-landing .lnd-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 1000;
	transform: translate(-50%, 12px);
	max-width: min(92vw, 460px);
	padding: 13px 20px;
	border-radius: var(--radius-md);
	background: #1d1f20;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}
.eco-landing .lnd-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
	.eco-landing .lnd-toast { transition: none; }
}