@charset "utf-8";
/*
 * 홍보마케팅 랜딩 (categoryId 1530) — Promo 딥그린 테마
 *
 * 원본: 더에코 랜딩페이지 v2.dc.html (Design Canvas 산출물).
 * 렌탈(1528)·소독(1529)과 같은 순수 인라인형이라 별도 디자인시스템 CSS(_ds)가 없고
 * 색이 전부 인라인 style 에 리터럴(#0E3B2C, #3E8E68 등)로 박혀 있었다.
 * 여기서는 그 리터럴을 토큰으로 정리해 .eco-landing.is-promo 에 선언한다.
 * 공통 폼(landing/common.css)이 요구하는 --color-* / --font-* / --space-* / --radius-md 는 전부 채운다.
 *
 * 원본에 미디어쿼리가 전혀 없어(데스크톱 1440px 고정) 반응형은 여기서 새로 넣는다.
 * 열 수·패딩이 인라인 style 로 박혀 있으므로 마크업에 훅 클래스(.lnd-pm-*)를 달고
 * 미디어쿼리에서 !important 로 덮는다.
 *
 * 본문 글자는 08-26 매핑(13->15, 14->16, 15->16, 16->17, 17->18)을 적용한 상태로 만들었다.
 */

.eco-landing.is-promo {
	--color-bg: #ffffff;
	--color-surface: #f0f5f1;
	--color-surface-2: #e7eee9;
	--color-surface-3: #dce6df;
	--color-text: #16211c;
	--color-divider: #e2e9e4;
	--color-divider-2: #d3e0d7;

	--color-heading: #0e3b2c;
	--color-muted: #5f6e67;
	--color-muted-2: #66756d;
	--color-muted-3: #8a978f;

	/*
	 * 이 디자인은 hover 가 더 밝아지는 방향이다(#0E3B2C -> #155A42).
	 * common.css 의 .lnd-btn--primary:hover 가 --color-accent-700 을 쓰므로
	 * 700 자리에 원안의 hover 색을 그대로 넣는다. 다른 테마와 밝기 방향이 반대인 건 의도.
	 */
	--color-accent: #0e3b2c;
	--color-accent-300: #8fc7ab;
	--color-accent-500: #3e8e68;
	--color-accent-700: #155a42;
	--color-deep: #0a2b20;

	--font-heading: Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
	--font-heading-weight: 800;
	--font-body: Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
	--font-display: Archivo, Pretendard, system-ui, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;

	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 8px;
}

/*
 * 원본 래퍼 div 의 overflow-x:hidden. 루트에 두면 상단 CTA 바의 sticky 가 동작하지 않는다
 * (조상에 overflow 가 있으면 그 조상이 sticky 의 스크롤 기준이 되는데, 루트는 스크롤되지 않는다).
 * ±2deg 로 기울인 장식 액자(.lnd-pm-video-shot, INTEGRATED 목업)가 있는 두 섹션으로 옮긴다.
 * hidden 은 overflow-y 를 auto 로 바꿔 섹션을 스크롤 컨테이너로 만들므로 clip 을 쓴다.
 */
.eco-landing.is-promo #video,
.eco-landing.is-promo #integrated { overflow-x: clip; }

/* 원본 <style> 의 a 규칙. common.css 의 .eco-landing a 를 덮는다. */
.eco-landing.is-promo a { color: var(--color-heading); }
.eco-landing.is-promo a:hover { color: var(--color-accent-500); }

/* ── 버튼 (원본 style-hover 속성을 옮긴 것) ──────────────────────── */
.eco-landing.is-promo .lnd-pm-btn {
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* 버튼 색이 전부 인라인 style 이라 !important 없이는 hover 가 적용되지 않는다 */
.eco-landing.is-promo .lnd-pm-btn:hover {
	background: var(--color-accent-700) !important;
	color: #fff !important;
}
.eco-landing.is-promo .lnd-pm-btn--ghost:hover {
	background: transparent !important;
	border-color: var(--color-heading) !important;
	color: var(--color-heading) !important;
}

/* ── 상단 CTA 바 ─────────────────────────────────────────────────── */
/*
 * 원본은 position:fixed 헤더다. 이 랜딩은 사이트 헤더(#header, position:relative) 아래에
 * 들어가므로 랜딩 루트의 첫 자식을 sticky 로 붙인다 — 처음엔 사이트 헤더 아래, 스크롤하면 화면 맨 위.
 * z-index 60 은 원본 값이다. 사이트 GNB 드롭다운(110)·모바일 메뉴(100000)보다 낮아 그 아래로 깔리고
 * 본문의 겹친 액자(2~3)보다는 위에 온다.
 */
.eco-landing.is-promo .lnd-pm-bar {
	position: sticky;
	top: 0;
	z-index: 60;
}
/* 원본 style-hover 2건. 색이 인라인 style 이라 !important 가 있어야 적용된다 */
.eco-landing.is-promo .lnd-pm-bar-tel,
.eco-landing.is-promo .lnd-pm-bar-cta { transition: background .18s ease, color .18s ease; }
.eco-landing.is-promo .lnd-pm-bar-tel:hover { color: #155a42 !important; }
.eco-landing.is-promo .lnd-pm-bar-cta:hover {
	background: var(--color-heading) !important;
	color: #fff !important;
}

/* 앵커로 이동한 대상이 바(76px)에 가리지 않도록. common.css 의 16px 여유를 더한 값 */
.eco-landing.is-promo #quote,
.eco-landing.is-promo #estimate { scroll-margin-top: 92px; }

/*
 * ≤1023px 에서는 사이트 .header-mobile(absolute, 54px, 불투명 흰색)이 랜딩 맨 위 54px 를 덮어
 * 바의 버튼이 눌리지 않는다. 그만큼 루트를 내린다. margin-top 은 조상으로 collapse 되어
 * #header 째 밀리고 겹침이 남으므로 padding 이어야 한다(1532 MRO 와 같은 방식).
 */
@media (max-width: 1023px) {
	.eco-landing.is-promo { padding-top: 54px; }
}
/* 폰에서는 상시 노출되는 바가 화면을 덜 차지하도록 높이·여백을 줄인다 */
@media (max-width: 767px) {
	.eco-landing.is-promo .lnd-pm-bar-inner {
		height: 60px !important;
		padding: 0 16px !important;
	}
	.eco-landing.is-promo .lnd-pm-bar-group { gap: 14px !important; }
	.eco-landing.is-promo .lnd-pm-bar-cta {
		height: 42px !important;
		padding: 0 16px !important;
	}
}
/* 320~480px 에서 한 줄에 들어가도록 '대표번호' 라벨을 접고 번호만 남긴다(아이콘이 전화임을 알린다) */
@media (max-width: 480px) {
	.eco-landing.is-promo .lnd-pm-bar-tel-label { display: none; }
	.eco-landing.is-promo .lnd-pm-bar-tel-num { font-size: 17px !important; }
	.eco-landing.is-promo .lnd-pm-bar-group { gap: 12px !important; }
	.eco-landing.is-promo .lnd-pm-bar-cta {
		gap: 6px !important;
		padding: 0 14px !important;
		font-size: 15px !important;
	}
}

/* ── 히어로 인증 바 ──────────────────────────────────────────────── */
/* 두 칸 사이 구분선이 첫 칸의 border-right 로 인라인에 박혀 있어 세로 배치에서 옮겨야 한다 */
@media (max-width: 560px) {
	.eco-landing.is-promo .lnd-pm-hero-certs { flex-direction: column; }
	.eco-landing.is-promo .lnd-pm-hero-cert {
		max-width: none !important;
		border-right: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, .18);
	}
	.eco-landing.is-promo .lnd-pm-hero-cert:last-child { border-bottom: 0; }
}

/* 세 항목이 줄바꿈되면 구분선이 줄 끝에 홀로 남는다. 점 표식이 이미 구분 역할을 한다 */
@media (max-width: 700px) {
	.eco-landing.is-promo .lnd-pm-hero-sep { display: none !important; }
}

/* ── 강점 4칸 ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.eco-landing.is-promo .lnd-pm-badges { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.eco-landing.is-promo .lnd-pm-badges { grid-template-columns: 1fr !important; }
}

/* ── 01 VIDEO ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-promo .lnd-pm-video-grid { grid-template-columns: 1fr !important; }
	/*
	 * 데스크톱에서는 사진 두 장을 절대배치로 겹쳐 놓는 무대다. 한 칸으로 접히면
	 * 무대가 가로로 넓어져 세로 원본(473x620)이 띠처럼 잘리므로, 절대배치를 풀고
	 * 원본 비율 그대로 나란히 세운다.
	 */
	.eco-landing.is-promo .lnd-pm-video-stage {
		min-height: 0 !important;
		padding: clamp(28px, 5vw, 60px);
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(14px, 2.4vw, 26px);
		align-items: start;
	}
	.eco-landing.is-promo .lnd-pm-video-shot {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
	}
	.eco-landing.is-promo .lnd-pm-video-shot img { height: auto !important; }
	/* 데스크톱의 큰 좌측 들여쓰기는 한 칸에서 의미가 없다 */
	.eco-landing.is-promo .lnd-pm-video-body { padding-left: clamp(28px, 5vw, 90px) !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-promo .lnd-pm-video-stage { grid-template-columns: 1fr; }
}

/* ── 02 PRINT ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-promo .lnd-pm-print-grid { grid-template-columns: 1fr !important; }
}

/* ── 03 INTEGRATED ───────────────────────────────────────────────── */
@media (max-width: 860px) {
	.eco-landing.is-promo .lnd-pm-int-media { grid-template-columns: 1fr !important; }
	/* 좌우 칸의 안쪽 여백이 서로 반대로 박혀 있어 한 칸에서는 좌우를 맞춘다 */
	.eco-landing.is-promo .lnd-pm-int-half {
		padding-left: clamp(28px, 5vw, 90px) !important;
		padding-right: clamp(28px, 5vw, 90px) !important;
	}
	.eco-landing.is-promo .lnd-pm-int-label--r { text-align: left !important; }
	.eco-landing.is-promo .lnd-pm-int-tags { grid-template-columns: 1fr !important; }
}

/* ── SERVICES ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-promo .lnd-pm-svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
	.eco-landing.is-promo .lnd-pm-svc-grid { grid-template-columns: 1fr !important; }
}

/* ── WHY THE ECO ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.eco-landing.is-promo .lnd-pm-why-grid { grid-template-columns: 1fr !important; }
	/* 우측 칸의 세로 구분선과 들여쓰기는 두 칸일 때만 의미가 있다 */
	.eco-landing.is-promo .lnd-pm-why-cell--r {
		border-left: 0 !important;
		padding-left: 0 !important;
	}
	/* 한 칸이 되면 05 의 아래선과 06 의 위선이 겹쳐 보이므로 06 만 위선을 지운다 */
	.eco-landing.is-promo .lnd-pm-why-cell--last { border-top: 0 !important; }
}

/* ── ALL-IN-ONE PROCESS ──────────────────────────────────────────── */
/*
 * 8단계를 가로 한 줄에 4개씩 늘어놓는 구성이라 좁아지면 칸이 100px 아래로 떨어져
 * 단계 이름이 서너 줄로 쪼개진다. 격자로 접고 화살표 대신 원본에 이미 있던
 * 단계 번호(기본은 감춤)를 드러내 순서를 유지한다.
 */
.eco-landing.is-promo .lnd-pm-flow-num { display: none; }
@media (max-width: 860px) {
	.eco-landing.is-promo .lnd-pm-flow {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 16px 14px !important;
		align-items: start !important;
	}
	.eco-landing.is-promo .lnd-pm-flow-arrow,
	.eco-landing.is-promo .lnd-pm-flow-turn { display: none !important; }
	.eco-landing.is-promo .lnd-pm-flow-num {
		display: block;
		margin-bottom: 6px;
		font-family: var(--font-display);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: var(--color-accent-300);
	}
}
@media (max-width: 480px) {
	.eco-landing.is-promo .lnd-pm-flow { grid-template-columns: 1fr; }
}

/* ── 문의 ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-promo .lnd-pm-contact-grid { grid-template-columns: 1fr !important; }
}
.eco-landing.is-promo .lnd-pm-contact-item { display: block; }
/* 원본의 #8A978F 는 흰 배경에서 3.04:1 로 AA(4.5:1) 미달이라 muted-2(4.85:1)로 올린다 */
.eco-landing.is-promo .lnd-pm-contact-label {
	font-size: 14px;
	color: var(--color-muted-2);
}
.eco-landing.is-promo .lnd-pm-contact-value {
	margin-top: 8px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--color-heading);
	transition: color .18s ease;
}
.eco-landing.is-promo .lnd-pm-contact-item:hover .lnd-pm-contact-value { color: var(--color-accent-500); }

/*
 * common.css 의 .lnd-form 은 background:#fff / 테두리 없음이다. 다른 5개 랜딩은 폼을
 * 어두운 섹션 위에 올려 카드로 보이지만, 이 랜딩의 문의 섹션은 원안이 흰 배경이라
 * 폼이 배경에 묻힌다. 섹션 색은 원안대로 두고 폼에만 면과 테두리를 준다.
 */
.eco-landing.is-promo .lnd-form {
	background: var(--color-surface);
	border: 1px solid var(--color-divider-2);
}