@charset "utf-8";
/*
 * 소독방역청소 랜딩 (categoryId 1529) — Disinfect 블루 테마
 *
 * 원본: 더에코 소독 랜딩페이지(최종본) 폴더의 index.html + style.css.
 * 별도 디자인시스템 CSS 가 없고 색이 전부 인라인 style 에 리터럴(#0a4f9e, #FFB51B 등)로
 * 박혀 있었다. 여기서는 그 리터럴을 토큰으로 정리해 .eco-landing.is-disinfect 에 선언한다.
 * 공통 폼(landing/common.css)이 요구하는 --color-* / --font-* / --space-* / --radius-md 는
 * 전부 채워야 한다.
 *
 * 원본 style.css 의 미디어쿼리는 상단 바에만 있고 본문은 데스크톱 1200px 고정이라
 * 본문 반응형은 여기서 새로 넣는다.
 * 열 수·패딩이 인라인 style 로 박혀 있으므로 마크업에 훅 클래스(.lnd-dz-*)를 달고
 * 미디어쿼리에서 !important 로 덮는다.
 */

.eco-landing.is-disinfect {
	--color-bg: #ffffff;
	--color-surface: #f5f9fc;
	--color-surface-2: #f1f7fd;
	--color-text: #1a2430;
	--color-divider: #e6edf4;
	--color-divider-2: #d5e3f0;

	--color-heading: #142b5f;
	--color-muted: #4a5b6b;
	--color-muted-2: #5b6b7b;
	--color-muted-3: #33546f;

	--color-accent: #0877d1;
	--color-accent-100: #eaf4fd;
	--color-accent-300: #8fd3ff;
	--color-accent-500: #0a6ed1;
	--color-accent-600: #0a5fbf;
	--color-accent-700: #0a4f9e;
	--color-accent-900: #142b5f;
	--color-deep: #0a2b52;

	--color-point: #ffb51b;
	--color-point-600: #e09c05;
	--color-green: #19a65a;

	--font-heading: "Noto Sans KR", "Pretendard", system-ui, sans-serif;
	--font-heading-weight: 900;
	--font-body: "Noto Sans KR", "Pretendard", system-ui, sans-serif;
	--font-display: Barlow, "Noto Sans KR", system-ui, sans-serif;

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

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
}

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

/* ── 굵기 상속 복원 ────────────────────────────────────────────────
 * 사이트 css/common.css 의 `* { font-weight:400 }` 가 모든 요소에 굵기를 직접 박아 상속을 끊는다.
 * 원본은 굵기를 부모(p·h·링크)에 주고 안쪽 span 이 물려받는 구조라, 히어로 부제·섹션 제목의 강조 span 과
 * 상단 바 라벨이 원본 700/900 대신 400 으로 렌더된다.
 * 특정도 0(:where)이라 사이트 `*` 만 이기고(이 파일이 뒤에 로드된다) 인라인·클래스 규칙은 그대로 둔다.
 * 공용 폼(.lnd-form)은 원본에 없던 요소라 제외한다. */
:where(.eco-landing.is-disinfect) :where(:not(.lnd-form, .lnd-form *)) { font-weight: inherit; }

/* ── 상단 CTA 바 (원본 .site-header) ───────────────────────────────── */
/*
 * 원본은 페이지 맨 위 sticky top:0 헤더다. 여기서는 사이트 헤더(#header) 아래 랜딩 루트의
 * 첫 자식으로 두어, 처음엔 사이트 헤더 밑에 있다가 스크롤하면 화면 상단에 붙는다.
 * position:fixed 는 사이트 헤더를 가리므로 쓰지 않는다. sticky 는 조상 중 하나라도
 * overflow(visible 이외)가 있으면 풀리므로 랜딩 루트와 그 조상에 overflow 를 두지 말 것.
 * z-index 는 사이트 카테고리 메뉴(.all-menu, z-index 100)보다 낮아야 메뉴가 바 위로 펼쳐진다.
 * 글자 크기는 08-26 매핑을 적용했다(원본 16->17, 14->16, 19 는 18px 이상이라 그대로).
 */
.eco-landing.is-disinfect .lnd-dz-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 76px;
	padding: 0 40px;
	background: #fff;
	border-bottom: 1px solid #e6ebf1;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.eco-landing.is-disinfect .lnd-dz-bar-inner {
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
}
.eco-landing.is-disinfect .lnd-dz-bar-tel {
	display: flex;
	align-items: center;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: #0f2b52;
}
.eco-landing.is-disinfect .lnd-dz-bar-tel-icon { margin-right: 0.3em; }
.eco-landing.is-disinfect .lnd-dz-bar-tel-label { margin-right: 8px; }
.eco-landing.is-disinfect .lnd-dz-bar-tel strong {
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.2px;
}
.eco-landing.is-disinfect .lnd-dz-bar-divider {
	width: 1px;
	height: 26px;
	background: #d7dee8;
}
.eco-landing.is-disinfect .lnd-dz-bar-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 4px;
	background: var(--color-accent-700);
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.3px;
	transition: background .18s ease;
}
.eco-landing.is-disinfect .lnd-dz-bar-cta:hover {
	background: #0f2b52;
	color: #fff;
}

/*
 * 바 견적 버튼의 목적지. 바 밑으로 숨지 않도록 바 높이(원본 style.css 값)보다 1px 더 띄운다.
 * 스크롤 위치가 정수로 반올림되어 딱 바 높이만 주면 섹션 윗선이 바 밑으로 0.5px 까지 들어간다.
 */
.eco-landing.is-disinfect #quote { scroll-margin-top: 77px; }

@media (max-width: 1024px) {
	.eco-landing.is-disinfect .lnd-dz-bar { height: 64px; padding: 0 20px; }
	.eco-landing.is-disinfect .lnd-dz-bar-tel { font-size: 16px; }
	.eco-landing.is-disinfect .lnd-dz-bar-tel strong { font-size: 17px; }
	.eco-landing.is-disinfect .lnd-dz-bar-cta { height: 42px; padding: 0 18px; font-size: 16px; }
	.eco-landing.is-disinfect #quote { scroll-margin-top: 65px; }
}

/*
 * 1023px 이하에서는 사이트 .header-mobile(absolute, 높이 54px, 흰 배경)이 랜딩 맨 위를 덮는다.
 * 바가 그 아래에서 시작하도록 루트에 padding 을 준다. margin-top 은 조상으로 collapse 되어
 * #header 자체가 밀리므로 쓰지 않는다.
 */
@media (max-width: 1023px) {
	.eco-landing.is-disinfect { padding-top: 54px; }
}

/*
 * 원본은 720px 이하에서 대표번호를 통째로 숨긴다. 모바일에서는 전화 연결이 가장 쓸모 있는
 * 동작이라 '대표번호' 글자만 빼고 아이콘과 번호는 남긴다. 견적 버튼 문구는 원본 그대로 둔다.
 */
@media (max-width: 720px) {
	.eco-landing.is-disinfect .lnd-dz-bar { padding: 0 16px; }
	.eco-landing.is-disinfect .lnd-dz-bar-inner { gap: 14px; }
	.eco-landing.is-disinfect .lnd-dz-bar-tel-label { display: none; }
}
/* 위 구성은 폭 약 345px 까지 들어간다. 그보다 좁으면 구분선을 빼고 버튼 여백과 글자를 줄여 320px 까지 한 줄에 담는다 */
@media (max-width: 359px) {
	.eco-landing.is-disinfect .lnd-dz-bar { padding: 0 12px; }
	.eco-landing.is-disinfect .lnd-dz-bar-inner { gap: 10px; }
	.eco-landing.is-disinfect .lnd-dz-bar-divider { display: none; }
	.eco-landing.is-disinfect .lnd-dz-bar-tel strong { font-size: 16px; }
	.eco-landing.is-disinfect .lnd-dz-bar-cta { padding: 0 12px; font-size: 15px; }
}

/* ── 클로징 CTA 버튼 (원본은 눌러도 반응 없는 div 였다) ──────────── */
.eco-landing.is-disinfect .lnd-dz-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 44px;
	border-radius: 8px;
	background: var(--color-point);
	color: var(--color-heading);
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.6px;
	transition: background .18s ease, color .18s ease;
}
.eco-landing.is-disinfect .lnd-dz-cta:hover {
	background: var(--color-point-600);
	color: var(--color-heading);
}
.eco-landing.is-disinfect .lnd-dz-cta.is-ghost {
	background: #fff;
	color: var(--color-accent);
}
.eco-landing.is-disinfect .lnd-dz-cta.is-ghost:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-700);
}

/* ── 문의 섹션의 전화/이메일 (원본 상담 바를 이관) ────────────────── */
.eco-landing.is-disinfect .lnd-dz-contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 34px;
}
.eco-landing.is-disinfect .lnd-dz-contact a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	color: #fff;
}
.eco-landing.is-disinfect .lnd-dz-contact a:hover { color: var(--color-accent-300); }
.eco-landing.is-disinfect .lnd-dz-contact-label {
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.6);
}
.eco-landing.is-disinfect .lnd-dz-contact-tel {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--color-point);
}
.eco-landing.is-disinfect .lnd-dz-contact-mail {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
}

/* ── 인증 목록 (원본 푸터에서 이관) ───────────────────────────────── */
.eco-landing.is-disinfect .lnd-dz-certs {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.eco-landing.is-disinfect .lnd-dz-cert {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: 6px 12px;
	border-radius: 999px;
}
.eco-landing.is-disinfect .lnd-dz-cert.is-point {
	color: var(--color-heading);
	background: var(--color-point);
	border-color: var(--color-point);
}

/*
 * 서비스 카드의 아이콘. 원본은 제목 길이에 맞춰 margin-left 를 46~94px 로 하나씩
 * 다르게 박아 오른쪽에 붙여 놨는데, 카드 폭이 변하는 반응형에서는 어긋난다.
 * 같은 의도를 폭과 무관하게 유지되는 auto 마진으로 바꾼다.
 */
.eco-landing.is-disinfect .lnd-dz-svc-icon {
	margin-left: auto;
	flex: 0 0 auto;
}

/* ── 반응형 (원본에 미디어쿼리가 전혀 없어 여기서 새로 넣는다) ────── */

/* 문의 섹션: 데스크톱에서만 좌(카피·연락처) / 우(견적요청 폼) 2열 */
@media (min-width: 1000px) {
	.eco-landing.is-disinfect .lnd-dz-quote { grid-template-columns: 0.95fr 1.05fr !important; }
}

/*
 * 프로세스 5단계와 One Stop 알약 4개는 한 줄에 들어가는 최소 폭이 서로 달라
 * 화살표 훅을 따로 둔다. 한쪽 브레이크포인트에서 다른 쪽 화살표까지 같이 숨으면
 * 그리드 칼럼(1fr 26px 1fr …)이 밀려 레이아웃이 어긋난다.
 */

/* 프로세스: 카드 5장이 각 200px 아래로 좁아지기 전에 3열로 접는다 */
@media (max-width: 1239px) {
	.eco-landing.is-disinfect .lnd-dz-steps { grid-template-columns: repeat(3, 1fr) !important; }
	.eco-landing.is-disinfect .lnd-dz-step-arrow { display: none !important; }
}

@media (max-width: 1199px) {
	/* One Stop 알약 4개: 가로 한 줄 -> 2x2 */
	.eco-landing.is-disinfect .lnd-dz-os { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
	.eco-landing.is-disinfect .lnd-dz-os-arrow { display: none !important; }

	/*
	 * "왜 전문적인 관리가 필요할까요?" 제목에 white-space:nowrap 이 박혀 있다.
	 * 1200px 에서는 한 줄에 들어가지만 좁아지면 그대로 넘쳐 가로 스크롤이 생긴다.
	 */
	.eco-landing.is-disinfect .lnd-dz-need-title { white-space: normal !important; }
}

@media (max-width: 1080px) {
	/* 현장 사진 4장: 4열 -> 2열 */
	.eco-landing.is-disinfect .lnd-dz-os-photos { grid-template-columns: repeat(2, 1fr) !important; }
	/* 서비스 6장: 3열 -> 2열 */
	.eco-landing.is-disinfect .lnd-dz-svc { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 860px) {
	/* 왜 더에코 6장: 2열 -> 1열 */
	.eco-landing.is-disinfect .lnd-dz-why { grid-template-columns: 1fr !important; }

	/*
	 * "단순한 일회성 청소가 아닌 [소독+방역+청소+지속관리] 까지 연결되는 통합관리"
	 * 는 한 줄짜리 문장이라 좁아지면 알약이 찌그러진다. 세로로 쌓는다.
	 */
	.eco-landing.is-disinfect .lnd-dz-need-band { flex-direction: column; text-align: center; }

	/* 키비주얼 밴드는 420px 이 모바일에서 과하다 */
	.eco-landing.is-disinfect .lnd-dz-kv { height: 340px !important; }
}

@media (max-width: 680px) {
	.eco-landing.is-disinfect .lnd-dz-os { grid-template-columns: 1fr !important; }
	.eco-landing.is-disinfect .lnd-dz-os-photos { grid-template-columns: 1fr !important; }
	.eco-landing.is-disinfect .lnd-dz-svc { grid-template-columns: 1fr !important; }
	.eco-landing.is-disinfect .lnd-dz-steps { grid-template-columns: 1fr !important; }

	/* 좌우 여백 48px 은 모바일에서 과하다 */
	.eco-landing.is-disinfect .lnd-dz-sec { padding-left: 20px !important; padding-right: 20px !important; }

	/* 클로징 CTA 버튼 2개는 세로로 쌓고 폭을 채운다 */
	.eco-landing.is-disinfect .lnd-dz-cta-row { flex-direction: column; }
	.eco-landing.is-disinfect .lnd-dz-cta { width: 100%; padding-left: 20px; padding-right: 20px; }
}