@charset "utf-8";
/*
 * 렌탈 랜딩 (categoryId 1528) — Rental 그린 테마
 *
 * 원본: theeco-rental-landing.dc.html (Design Canvas 산출물, 2026-09 최종본).
 * 별도 디자인시스템 CSS(_ds)가 없고 색이 전부 인라인 style 에 리터럴(#12805f, #005B3A 등)로
 * 박혀 있다. 여기서는 그 리터럴을 토큰으로 정리해 .eco-landing.is-rental 에 선언한다.
 * 공통 폼(landing/common.css)이 요구하는 --color-* / --font-* / --space-* / --radius-md 는 전부 채운다.
 *
 * 원본에 미디어쿼리가 전혀 없어(데스크톱 1160~1240px 고정, 히어로는 vw 단위) 반응형은 여기서 새로 넣는다.
 * 열 수·패딩·글자 크기가 인라인 style 로 박혀 있으므로 마크업에 훅 클래스(.lnd-rt-*)를 달고
 * 미디어쿼리에서 !important 로 덮는다.
 *
 * 본문 글자는 08-26 매핑(13->14(배지), 14/14.5/15->16, 16->17, 17->18, 17.5->18.5, 12.5->15)을 적용한 상태다.
 */

.eco-landing.is-rental {
	--color-bg: #e9f4ee;
	--color-surface: #eaf6f0;
	--color-surface-2: #f2faf6;
	--color-text: #1b2233;
	--color-divider: #bfe0d2;
	--color-divider-2: #d9e9e1;

	--color-heading: #141a2b;
	--color-deep: #0e2a22;
	--color-muted: #4d566d;
	--color-muted-2: #5b6580;
	--color-muted-3: #3f5a52;

	--color-accent: #12805f;
	--color-accent-100: #e6f4ee;
	--color-accent-300: #c9e8db;
	--color-accent-600: #0d6b4e;
	--color-accent-700: #005b3a;
	--color-accent-900: #0e2a22;

	--color-point: #f29a38;
	--color-point-600: #d97f18;

	--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;

	--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: 18px;

	/* 원본 body 의 text-wrap:pretty (background / font / keep-all 은 common.css 가 토큰으로 처리) */
	text-wrap: pretty;
}

/*
 * 원본 <helmet> 의 a { color:#3b5bf5 } / a:hover { color:#2743cf }.
 * 원본에서 이 색으로 보이는 링크는 하나도 없고(전부 인라인 color) 편집기 기본값이라
 * 테마 색으로 스코프해 둔다. 사이트 전체 a 규칙을 건드리지 않는다.
 */
.eco-landing.is-rental a { color: var(--color-accent); }
.eco-landing.is-rental a:hover { color: var(--color-accent-600); }

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

/* ── 버튼 (원본 상담 밴드 CTA 의 style-hover="background:#0d6b4e" 를 옮긴 것) ─────── */
.eco-landing.is-rental .lnd-rt-btn {
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* 버튼 색이 전부 인라인 style 이라 !important 없이는 hover 가 적용되지 않는다 */
.eco-landing.is-rental .lnd-rt-btn:hover {
	background: var(--color-accent-600) !important;
	color: #fff !important;
}
.eco-landing.is-rental .lnd-rt-btn.is-point:hover {
	background: var(--color-point-600) !important;
	color: #fff !important;
}
.eco-landing.is-rental .lnd-rt-btn.is-light:hover {
	background: var(--color-accent-100) !important;
	color: var(--color-accent-700) !important;
}

/* ── 상단 CTA 바 (원본 #site-header: position:sticky; top:0) ─────────── */
/*
 * 랜딩 루트(.eco-landing)의 첫 자식이다. 처음엔 사이트 헤더(#header, position:relative) 바로 아래에
 * 있다가 스크롤하면 화면 상단에 붙는다. fixed 는 첫 화면에서 사이트 헤더를 가리므로 쓰지 않는다.
 * - sticky 는 조상 중 하나라도 overflow 가 visible 이 아니면 동작하지 않는다.
 *   .eco-landing 과 그 조상(main#contents, #container, body, html)에 overflow 를 두지 말 것.
 * - z-index 는 사이트 GNB 드롭다운(layout.css depth2 110 / 전체메뉴 100)보다 낮게 둬서
 *   드롭다운이 바 위로 펼쳐지게 한다.
 * - 글자 크기는 08-26 매핑 적용값이다(☎ 14->16, 대표번호·버튼 15->16, 화살표 16->17, 번호 19 유지).
 */
.eco-landing.is-rental .lnd-rt-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #e5eae7;
	box-shadow: 0 2px 10px rgba(14, 42, 34, 0.05);
}
.eco-landing.is-rental .lnd-rt-topbar-inner {
	max-width: 1400px;
	height: 72px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}
.eco-landing.is-rental .lnd-rt-topbar-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0e5741;
	white-space: nowrap;
}
.eco-landing.is-rental .lnd-rt-topbar-icon { font-size: 16px; }
.eco-landing.is-rental .lnd-rt-topbar-label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
}
.eco-landing.is-rental .lnd-rt-topbar-num {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.5px;
}
.eco-landing.is-rental .lnd-rt-topbar-divider {
	flex: none;
	width: 1px;
	height: 22px;
	background: #dde4e0;
}
.eco-landing.is-rental .lnd-rt-topbar-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border-radius: 6px;
	background: #0e5741;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
	white-space: nowrap;
	transition: background .18s ease;
}
/* 원본 style-hover="background:#0b4633". 글자색도 다시 준다 — 없으면 위의 a:hover(0,3,1)가 이겨 글자가 초록이 된다 */
.eco-landing.is-rental .lnd-rt-topbar-cta:hover {
	background: #0b4633;
	color: #fff;
}
.eco-landing.is-rental .lnd-rt-topbar-arrow { font-size: 17px; }

/* 앵커(#quote·#estimate)로 이동했을 때 대상이 상단 바(72px) 밑에 깔리지 않게 common.css 의 16px 를 덮는다 */
.eco-landing.is-rental [id] { scroll-margin-top: 88px; }

/*
 * 프로세스 아이콘 원본 폭이 192/193/196/207/212px 로 제각각이라, 공통 상한(예: 210px)을
 * 쓰면 원본보다 좁은 아이콘이 그 상한까지 확대된다. 대신 각자 <img width/height> 속성이
 * 갖는 고유 크기에서 멈추도록 width:auto 로 인라인 width:100% 를 이긴다(!important 필요).
 * 인라인의 margin-left/right:0(margin: 10px 0 14px 의 일부)도 같은 이유로 !important 가
 * 필요하다. margin-top/bottom(상하 여백)은 인라인 값을 그대로 둔다.
 */
.eco-landing.is-rental .lnd-rt-step img {
	width: auto !important;
	max-width: 100%;
	height: auto;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── 문의 섹션의 전화/이메일 (어두운 배경 위) ─────────────────────── */
.eco-landing.is-rental .lnd-rt-contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 34px;
}
.eco-landing.is-rental .lnd-rt-contact a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	color: #fff;
}
.eco-landing.is-rental .lnd-rt-contact a:hover { color: var(--color-accent-300); }
.eco-landing.is-rental .lnd-rt-contact-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	/* rgba(255,255,255,0.55) on #005b3a = 3.64:1 (AA 미달). 0.72 = ~5.1:1 */
	color: rgba(255, 255, 255, 0.72);
}
.eco-landing.is-rental .lnd-rt-contact-tel {
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 900;
	letter-spacing: -1.5px;
}
.eco-landing.is-rental .lnd-rt-contact-mail {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-accent-300);
}

/* ── 인증 목록 (원본 푸터에서 이관) ───────────────────────────────── */
.eco-landing.is-rental .lnd-rt-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-rental .lnd-rt-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;
}

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

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

@media (max-width: 1080px) {
	/* 렌탈 가능 품목 8장: 4열 -> 2열 */
	.eco-landing.is-rental .lnd-rt-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	/* "왜 필요할까요" 5장: 3열 -> 2열 */
	.eco-landing.is-rental .lnd-rt-why-card { width: calc((100% - 24px) / 2) !important; }
	/* 핵심 경쟁력 4장: 4열 -> 2열 */
	.eco-landing.is-rental .lnd-rt-core { grid-template-columns: repeat(2, 1fr) !important; }
	/*
	 * 프로세스 5단계: 가로 한 줄 -> 3+2 줄바꿈, 사이 화살표는 숨김.
	 * flex-grow:0 으로 둬 2행에 카드 두 장만 남아도 남는 폭을 나눠 갖지 않게 하고,
	 * 대신 컨테이너를 가운데 정렬해 2행이 짧게 남는다.
	 */
	.eco-landing.is-rental .lnd-rt-steps { flex-wrap: wrap; justify-content: center; }
	.eco-landing.is-rental .lnd-rt-arrow { display: none; }
	.eco-landing.is-rental .lnd-rt-step { flex: 0 1 calc((100% - 20px) / 3) !important; }
	/*
	 * 설치 사례 6장: 3열 -> 2열. 인라인 flex:0 0 calc((100% - 44px)/3) + min-width:260px 라
	 * 그대로 두면 좁은 폭에서 카드가 260px 로 굳은 채 가운데에 뜬다.
	 */
	.eco-landing.is-rental .lnd-rt-case { flex: 0 0 calc((100% - 22px) / 2) !important; }
}

/* ── 히어로: 1024px 아래는 사진을 흐름에 넣고 카피를 전폭으로 ──────── */
/*
 * 원안은 absolute 사진 위에 26% 폭 텍스트 블록, 글자 크기가 전부 vw 라 390px 에서는
 * 1.26vw = 4.9px 이 되고 nowrap 줄이 화면 밖으로 나간다. clamp() 로는 배치 자체를
 * 바꿀 수 없어(사진 absolute 해제, 블록 전폭) 미디어쿼리 !important 로 한 번에 덮는다.
 * 사진은 16:10 으로 잘라 높이를 확보하고, 장비가 있는 우측(58%)을 중심으로 보여 준다.
 */
@media (max-width: 1023px) {
	.eco-landing.is-rental .lnd-rt-hero { padding-top: 0 !important; }
	.eco-landing.is-rental .lnd-rt-hero-stage {
		min-height: 0 !important;
		display: block !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-img {
		position: static !important;
		height: auto !important;
		aspect-ratio: 16 / 10;
		object-position: 58% 50% !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-copy {
		width: auto !important;
		margin: 28px 20px 4px !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-eyebrow {
		font-size: 18px !important;
		letter-spacing: -0.4px !important;
		white-space: normal !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-tag {
		margin-top: 10px !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		white-space: normal !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-title {
		margin-top: 14px !important;
		font-size: clamp(34px, 9vw, 44px) !important;
		letter-spacing: -1.6px !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-sub {
		margin-top: 16px !important;
		font-size: clamp(20px, 5vw, 24px) !important;
		letter-spacing: -0.6px !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-rule {
		margin-top: 18px !important;
		padding-top: 16px !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-solution {
		font-size: 18px !important;
		letter-spacing: -0.4px !important;
	}
	.eco-landing.is-rental .lnd-rt-hero-solution-em { font-size: 19px !important; }
	.eco-landing.is-rental .lnd-rt-hero-list {
		margin-top: 16px !important;
		gap: 8px !important;
		font-size: 16px !important;
	}

	/*
	 * 상단 CTA 바: 사이트 .header-mobile(absolute, 54px, 흰 배경)이 랜딩 맨 위 54px 자리에 겹친다.
	 * 그 아래에서 바가 시작하도록 루트를 내린다. margin-top 은 조상으로 collapse 되어
	 * #header 까지 함께 밀리고 겹침이 그대로 남으니 padding 이어야 한다.
	 */
	.eco-landing.is-rental { padding-top: 54px; }
	.eco-landing.is-rental .lnd-rt-topbar-inner {
		height: 60px;
		padding: 0 20px;
	}
}

@media (max-width: 680px) {
	.eco-landing.is-rental .lnd-rt-why-card { width: 100% !important; }
	.eco-landing.is-rental .lnd-rt-core { grid-template-columns: 1fr !important; }
	.eco-landing.is-rental .lnd-rt-step { flex: 1 1 100% !important; }
	.eco-landing.is-rental .lnd-rt-case {
		flex: 0 0 100% !important;
		min-width: 0 !important;
	}

	/*
	 * 좌우 여백 40px 은 모바일에서 과하다. 히어로는 섹션에 좌우 패딩이 없고
	 * 안쪽 컨테이너(.lnd-rt-wrap)가 40px 을 갖는 구조라 둘을 따로 줄인다.
	 */
	.eco-landing.is-rental .lnd-rt-sec,
	.eco-landing.is-rental .lnd-rt-wrap {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* 클로징 CTA 두 개는 세로로 */
	.eco-landing.is-rental .lnd-rt-cta-row > .lnd-rt-btn {
		flex: 1 1 100%;
	}

	/*
	 * 카드 제목의 min-height(2.7em / 4.05em)와 프로세스 1~4단계의 빈 1.3em 줄은
	 * 옆 카드와 그림 높이를 맞추는 원안의 정렬용 여백이다. 카드가 한 열로 서면
	 * 맞출 이웃이 없고 제목 아래 40~55px 공백만 남으므로 접는다.
	 */
	.eco-landing.is-rental .lnd-rt-why-card h3,
	.eco-landing.is-rental .lnd-rt-step h3,
	.eco-landing.is-rental .lnd-rt-core h3 { min-height: 0 !important; }
	.eco-landing.is-rental .lnd-rt-step-gap { display: none; }
}

/* 렌탈 가능 품목 8장: 2열 -> 1열 (2열 카드 폭이 250px 아래로 내려가면 설명이 한 줄 열 자에 못 미친다) */
@media (max-width: 560px) {
	.eco-landing.is-rental .lnd-rt-items { grid-template-columns: 1fr !important; }
}

/* 상단 CTA 바: 좁은 폭에서는 '대표번호' 라벨과 구분선을 접고 번호(좌)·버튼(우)으로 벌린다 */
@media (max-width: 560px) {
	.eco-landing.is-rental .lnd-rt-topbar-inner {
		padding: 0 16px;
		gap: 12px;
		justify-content: space-between;
	}
	.eco-landing.is-rental .lnd-rt-topbar-label,
	.eco-landing.is-rental .lnd-rt-topbar-divider { display: none; }
	.eco-landing.is-rental .lnd-rt-topbar-num { font-size: 18px; }
	.eco-landing.is-rental .lnd-rt-topbar-cta { padding: 0 16px; }
}

/* 320~360px: 버튼 문구는 그대로 두고 화살표와 여백만 줄여 한 줄에 넣는다 */
@media (max-width: 360px) {
	.eco-landing.is-rental .lnd-rt-topbar-inner {
		padding: 0 12px;
		gap: 8px;
	}
	.eco-landing.is-rental .lnd-rt-topbar-cta { padding: 0 12px; }
	.eco-landing.is-rental .lnd-rt-topbar-arrow { display: none; }
}