@charset "utf-8";
/*
 * 실내건축 견적의뢰 랜딩 (categoryId 1527) — Modernist 테마
 *
 * 원본 디자인시스템(_ds/modernist-<id>/styles.css)의 토큰을 .eco-landing.is-interior 로
 * 스코프해 옮긴 것. 원본 랜딩은 클래스를 쓰지 않고 전부 인라인 style + data-* 훅으로
 * 되어 있고, 반응형은 DC 런타임 스크립트가 element.style 을 직접 덮어쓰는 방식이었다.
 * 그 로직을 아래 미디어쿼리로 옮겼다. 인라인 style 을 이겨야 하므로 !important 를 쓴다
 * (원본 행사 랜딩의 head <style> 도 같은 패턴을 쓴다).
 *
 * 브레이크포인트는 원본 그대로: md = 680px, lg = 1000px
 */


.eco-landing.is-interior {
	--color-bg: #f3f2f2;
	--color-surface: #eae9e9;
	--color-text: #201e1d;
	--color-accent: #ec3013;
	--color-accent-2: #e15b47;
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);

	--color-neutral-100: #f8f4f4;
	--color-neutral-200: #eae7e7;
	--color-neutral-300: #d7d3d3;
	--color-neutral-400: #bab6b6;
	--color-neutral-500: #9b9797;
	--color-neutral-600: #7d7979;
	--color-neutral-700: #605d5d;
	--color-neutral-800: #444141;
	--color-neutral-900: #2d2b2b;

	--color-accent-100: #fff2ef;
	--color-accent-200: #ffe0d9;
	--color-accent-300: #ffc4b8;
	--color-accent-400: #ff9783;
	--color-accent-500: #ff563c;
	--color-accent-600: #dd2b0f;
	--color-accent-700: #ae1800;
	--color-accent-800: #7c1405;
	--color-accent-900: #4d170e;

	--font-heading: "Archivo", "Pretendard", system-ui, sans-serif;
	--font-heading-weight: 800;
	--font-body: "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: 0;
	--radius-md: 0;
	--radius-lg: 0;
}

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

/* ── 상단 CTA 바 ─────────────────────────────────────────────────── */
/*
 * 시안은 화면 맨 위 position:fixed 바다. fixed 는 사이트 헤더(#header)를 가리므로 랜딩 루트의 첫 자식을
 * sticky 로 둔다 — 처음엔 사이트 헤더 아래, 스크롤하면 화면 맨 위.
 * sticky 는 조상 중 하나라도 overflow(visible 이외)가 있으면 풀리므로 랜딩 루트와 그 조상에 overflow 를 두지 말 것.
 * z-index 50 은 시안 값이다. 사이트 카테고리 전체메뉴(.all-menu, z-index 100)보다 낮아 펼친 메뉴를 가리지 않는다.
 * 치수는 시안의 cqw 값을 캡처 폭 1916px 기준 px 로 환산했고, 글자 크기는 08-26 매핑을 적용했다(15->16, 16->17, 17->18).
 */
.eco-landing.is-interior .lnd-int-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 85px;
	padding: 0 40px;
	background: #fff;
	border-bottom: 1px solid #e7e6e6;
}
.eco-landing.is-interior .lnd-int-bar-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	white-space: nowrap;
}
.eco-landing.is-interior .lnd-int-bar-tel {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #111;
	line-height: 1;
}
.eco-landing.is-interior .lnd-int-bar-tel-icon { font-size: 18px; }
.eco-landing.is-interior .lnd-int-bar-tel-label { font-size: 16px; font-weight: 700; color: #444; }
.eco-landing.is-interior .lnd-int-bar-tel-num { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.eco-landing.is-interior .lnd-int-bar-divider {
	width: 1px;
	height: 28px;
	background: #d8d6d6;
}
.eco-landing.is-interior .lnd-int-bar-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 18px;
	background: var(--color-accent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	transition: background .18s ease;
}
.eco-landing.is-interior .lnd-int-bar-cta-arrow { font-size: 18px; }
.eco-landing.is-interior .lnd-int-bar-cta:hover {
	background: #c92709;
	color: #fff;
}

/* 앵커로 이동한 대상이 바(85px)에 가리지 않도록. common.css 의 16px 여유를 더한 값 */
.eco-landing.is-interior [id] { scroll-margin-top: 101px; }

/*
 * ≤1023px 에서는 사이트 .header-mobile(absolute, 54px, 불투명 흰색)이 랜딩 맨 위 54px 를 덮어
 * 바의 버튼이 눌리지 않는다. 그만큼 루트를 내린다. margin-top 은 조상으로 collapse 되어
 * #header 째 밀리고 겹침이 남으므로 padding 이어야 한다(1532 MRO 와 같은 방식).
 */
@media (max-width: 1023px) {
	.eco-landing.is-interior { padding-top: 54px; }
	.eco-landing.is-interior .lnd-int-bar { height: 64px; padding: 0 20px; }
	.eco-landing.is-interior [id] { scroll-margin-top: 80px; }
}
/* 바 내용 폭이 약 425px 이라 좁은 폭에서는 한 줄에 담기도록 '대표번호' 글자를 빼고 간격·여백을 줄인다(아이콘이 전화임을 알린다) */
@media (max-width: 480px) {
	.eco-landing.is-interior .lnd-int-bar { padding: 0 16px; }
	.eco-landing.is-interior .lnd-int-bar-inner { gap: 12px; }
	.eco-landing.is-interior .lnd-int-bar-tel-label { display: none; }
	.eco-landing.is-interior .lnd-int-bar-cta { padding: 0 14px; }
}
@media (max-width: 374px) {
	.eco-landing.is-interior .lnd-int-bar { padding: 0 12px; }
	.eco-landing.is-interior .lnd-int-bar-inner { gap: 10px; }
	.eco-landing.is-interior .lnd-int-bar-tel-num { font-size: 17px; }
	.eco-landing.is-interior .lnd-int-bar-cta { gap: 6px; padding: 0 12px; font-size: 15px; }
	.eco-landing.is-interior .lnd-int-bar-cta-arrow { font-size: 16px; }
}

/* 상단 롤링 키워드 띠 */
@keyframes ecoTicker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.eco-landing.is-interior [style*="ecoTicker"] { animation: none !important; }
}

/* ── 반응형 그리드 (원본 DC 스크립트 wire() 이식) ──────────────────── */
/* 기본값 = 모바일. 인라인 style 에 이미 1fr 이 들어 있어 여기서는 재지정하지 않는다. */
.eco-landing.is-interior [data-casegrid] {
	grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 680px) {
	.eco-landing.is-interior [data-cards],
	.eco-landing.is-interior [data-scopegrid],
	.eco-landing.is-interior [data-addons],
	.eco-landing.is-interior [data-processgrid],
	.eco-landing.is-interior [data-whygrid] {
		grid-template-columns: 1fr 1fr !important;
	}
	.eco-landing.is-interior [data-cards] > article {
		border-right: 1px solid var(--color-neutral-300);
	}
}

@media (min-width: 1000px) {
	.eco-landing.is-interior [data-herogrid] { grid-template-columns: 1.05fr 1fr !important; }
	.eco-landing.is-interior [data-two] { grid-template-columns: 1fr 1fr !important; }
	.eco-landing.is-interior [data-cards] { grid-template-columns: repeat(3, 1fr) !important; }
	.eco-landing.is-interior [data-addons] { grid-template-columns: repeat(5, 1fr) !important; }
	.eco-landing.is-interior [data-processgrid] { grid-template-columns: repeat(4, 1fr) !important; }
	.eco-landing.is-interior [data-whygrid] { grid-template-columns: repeat(4, 1fr) !important; }
	.eco-landing.is-interior [data-licensegrid] { grid-template-columns: 1.1fr 1fr !important; }
	/* 원본은 1열(폼이 없었다). 견적요청 폼이 우측에 들어가므로 2열로 복원한다. */
	.eco-landing.is-interior [data-quotegrid] { grid-template-columns: 1fr 1fr !important; }

	.eco-landing.is-interior [data-heroleft] { border-right: 2px solid var(--color-text) !important; }
	.eco-landing.is-interior [data-heroright] { border-top: 0 !important; }

	/* 칸마다 인라인 padding:22px 0 / 24px 0 이 있어 !important 없이는 좌우 여백이 0 으로 남아 글자가 구분선에 붙는다 */
	.eco-landing.is-interior [data-addons] > div,
	.eco-landing.is-interior [data-processgrid] > div {
		padding-left: 18px !important;
		padding-right: 18px !important;
		border-left: 1px solid var(--color-neutral-300);
	}
}

/* ── style-hover 속성 대체 (원본 11곳) ─────────────────────────────── */
.eco-landing .lnd-h1,
.eco-landing .lnd-h2,
.eco-landing .lnd-h3,
.eco-landing .lnd-h4,
.eco-landing .lnd-h5 {
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.eco-landing .lnd-h1:hover { background: var(--color-accent-600); color: #fff; }
.eco-landing .lnd-h2:hover { background: var(--color-text); color: var(--color-bg); }
.eco-landing .lnd-h3:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.eco-landing .lnd-h4:hover { background: var(--color-surface); }
.eco-landing .lnd-h5:hover { background: #fff; color: var(--color-accent-700); }

/* ── 문의 섹션 (accent 배경 위) ────────────────────────────────────── */
.eco-landing.is-interior .lnd-form { border: 2px solid var(--color-text); }
.eco-landing.is-interior .lnd-form-kicker { color: var(--color-accent-700); }

/* ── 섹션 바로가기 ────────────────────────────────────────────────── */
/*
 * 원본 헤더에 있던 섹션 네비를 히어로 아래로 옮긴 것.
 * 이동한 섹션이 상단 CTA 바에 가리지 않는 것은 위 [id] 의 scroll-margin-top 이 맡는다.
 */
/* 원본 헤더(sticky)의 섹션 링크 줄을 그대로 옮긴 것. 셀 구분선 없이 텍스트 링크로 두어야
   2px 검정 테두리 위주인 이 디자인과 어긋나지 않는다. */
.eco-landing.is-interior .lnd-sectionnav {
	background: var(--color-bg);
	border-bottom: 2px solid var(--color-text);
}
.eco-landing.is-interior .lnd-sectionnav-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 12px clamp(20px, 4vw, 56px);
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 32px);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.eco-landing.is-interior .lnd-sectionnav-inner::-webkit-scrollbar { display: none; }
.eco-landing.is-interior .lnd-sectionnav-label {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--color-neutral-600);
	white-space: nowrap;
}
.eco-landing.is-interior .lnd-sectionnav-label i {
	width: 24px;
	height: 2px;
	background: var(--color-accent);
	display: block;
}
.eco-landing.is-interior .lnd-sectionnav a {
	flex: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-text);
	white-space: nowrap;
	padding: 3px 0;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
.eco-landing.is-interior .lnd-sectionnav a:hover {
	color: var(--color-accent-700);
	border-bottom-color: var(--color-accent);
}
.eco-landing.is-interior .lnd-sectionnav a.is-cta {
	margin-left: auto;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	padding: 11px 20px;
	border-bottom: 0;
	transition: background .18s ease;
}
.eco-landing.is-interior .lnd-sectionnav a.is-cta:hover {
	background: var(--color-accent-700);
	color: #fff;
	border-bottom: 0;
}

@media (max-width: 900px) {
	/* 가로 스크롤 상태에서는 auto 여백이 CTA 를 화면 밖으로 밀어낸다 */
	.eco-landing.is-interior .lnd-sectionnav a.is-cta { margin-left: 0; padding: 9px 16px; }
	.eco-landing.is-interior .lnd-sectionnav-label { display: none; }
}