@charset "utf-8";
/*
 * MRO 통합구매 랜딩 (categoryId 1532) — Industry 청사진 테마
 *
 * 원본: mro-landing.dc.html (Design Canvas 산출물). 디자인시스템 CSS
 * (_ds/industry-<id>/styles.css)를 로드하되, 문서 자체 <helmet><style> 이
 * 그 위에 teal 색상으로 토큰을 override 하고 있었다(--color-accent 등).
 * 실제로 렌더되는 값은 override 쪽이므로 여기서는 override 값을 원본으로 삼고,
 * 이 문서가 실제로 쓰는 토큰(색상 + .blueprint/.corner)만 추려
 * .eco-landing.is-mro 로 스코프해 옮겼다. .btn/.card/.tag 컴포넌트 클래스는
 * 문서에서 쓰이지 않아(버튼도 전부 인라인 style) 이식하지 않았다.
 *
 * 원본에 미디어쿼리가 0건이라(데스크톱 전용 설계) 반응형은 전부 여기서 새로 추가했다.
 */

.eco-landing.is-mro {
	--color-bg: #ffffff;
	--color-text: #183330;

	--color-accent: #16877F;
	--color-accent-100: #EDEDE8;
	--color-accent-200: #D7E9E5;
	--color-accent-300: #C9DEDA;
	--color-accent-400: #4FA59B;
	--color-accent-500: #16877F;
	--color-accent-600: #14766F;
	--color-accent-700: #12655F;
	--color-accent-800: #14524E;
	--color-accent-900: #0E625D;

	--color-neutral-100: #F5F5F2;
	--color-neutral-200: #EDEDE8;
	--color-neutral-300: #DAD9D2;
	--color-neutral-700: #55564F;

	--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

	--font-heading: "Barlow Condensed", "Noto Sans KR", system-ui, sans-serif;
	--font-heading-weight: 700;
	--font-body: "Barlow", "Noto Sans KR", system-ui, sans-serif;

	/* common.css 의 h1~h6 margin-bottom 과 .lnd-input/.lnd-btn 등 폼 컴포넌트가 요구하는 최소 토큰
	 * (--space-2:6.8px 는 다른 5개 테마의 8px 을 0.85배 축소한 값 — figcaption/p 여백·placeholder 배경에
	 * 쓰이는 --space-1/--space-3 도 같은 비율로 축소해 이식한다) */
	--space-1: 3.4px;
	--space-2: 6.8px;
	--space-3: 10.2px;
	--radius-md: 4px;
	--color-surface: #e9e9ea;
}

/* ── 청사진 프레임 (모서리 등록마크) — _ds/industry-.../styles.css 이식 ──── */
.eco-landing.is-mro .blueprint {
	position: relative;
	border: 1px solid var(--color-divider);
	border-radius: 0;
}
.eco-landing.is-mro .blueprint > .corner {
	position: absolute;
	width: 11px;
	height: 11px;
	color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.eco-landing.is-mro .blueprint > .corner::before,
.eco-landing.is-mro .blueprint > .corner::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.eco-landing.is-mro .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.eco-landing.is-mro .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.eco-landing.is-mro .blueprint > .corner.tl { top: -6px; left: -6px; }
.eco-landing.is-mro .blueprint > .corner.tr { top: -6px; right: -6px; }
.eco-landing.is-mro .blueprint > .corner.bl { bottom: -6px; left: -6px; }
.eco-landing.is-mro .blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── 굵기 상속 복원 ────────────────────────────────────────────────
 * 사이트 css/common.css 의 `* { font-weight:400 }` 가 모든 요소에 굵기를 직접 박아 상속을 끊는다.
 * 원본은 굵기를 부모(h2·p·링크 묶음)에 주고 안쪽 span 이 물려받는 구조라, 제목 안 span 13개·부제 span 2개·
 * 프로세스 흐름 줄·문의 링크 문구가 원본 700/500 대신 400 으로 렌더된다.
 * 특정도 0(:where)이라 사이트 `*` 만 이기고(이 파일이 뒤에 로드된다) 인라인·클래스 규칙은 그대로 둔다.
 * 공용 폼(#estimate)은 원본에 없던 요소라 제외한다. */
:where(.eco-landing.is-mro) :where(:not(#estimate, #estimate *)) { font-weight: inherit; }

/* ── 버튼 (원본 style-hover 속성 6건을 이관) ─────────────────────────
 * 버튼 색이 전부 인라인 style 이라 !important 없이는 hover 가 먹지 않는다(1530 코드리뷰 지적).
 */
.eco-landing.is-mro .lnd-mro-topbar-tel,
.eco-landing.is-mro .lnd-mro-topbar-cta,
.eco-landing.is-mro .lnd-mro-btn-solid,
.eco-landing.is-mro .lnd-mro-hero-tel,
.eco-landing.is-mro .lnd-mro-quote-link {
	transition: background .18s ease, color .18s ease;
}
/* 상단 CTA 바 대표번호(테두리 알약) */
.eco-landing.is-mro .lnd-mro-topbar-tel:hover {
	background: rgba(14, 98, 93, 0.08) !important;
	color: #0E625D !important;
}
/* 상단 CTA 바 상담문의 바로가기(채움 알약) */
.eco-landing.is-mro .lnd-mro-topbar-cta:hover {
	background: #14524E !important;
	color: #fff !important;
}
/* 히어로 솔리드 CTA */
.eco-landing.is-mro .lnd-mro-btn-solid:hover {
	background: var(--color-accent-400) !important;
	color: #fff !important;
}
/* 히어로 TEL 아웃라인 버튼 */
.eco-landing.is-mro .lnd-mro-hero-tel:hover {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
}
/* 문의 섹션 전화·이메일 링크(공통 값) */
.eco-landing.is-mro .lnd-mro-quote-link:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
}

/* ── 컨테이너 안쪽 여백 (좁은 화면에서 축소) ─────────────────────── */
@media (max-width: 680px) {
	.eco-landing.is-mro .lnd-mro-sec { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 420px) {
	.eco-landing.is-mro .lnd-mro-sec { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── 상단 CTA 바 (원본 position:fixed 헤더 -> sticky) ────────────────
 * 랜딩 루트의 첫 자식이라 처음엔 사이트 헤더(#header, 흐름 배치) 아래에 있다가 스크롤하면 화면 상단에 붙는다.
 * fixed 는 사이트 헤더를 가려 쓰지 않는다. sticky 는 조상 중 하나라도 overflow 가 visible 이 아니면 동작하지
 * 않으므로 원본 루트의 overflow-x:hidden 은 옮기지 않았다(.eco-landing 부터 html 까지 전부 visible).
 * z-index 90: 사이트 헤더의 카테고리 전체메뉴(.all-menu, z-index 100)는 #header 가 쌓임 맥락을 만들지 않아
 * 루트 맥락에서 이 바와 겨룬다. 펼친 메뉴를 가리지 않게 그보다 낮고, 랜딩 본문(z-index 없음)보다는 높게 둔다.
 */
.eco-landing.is-mro .lnd-mro-topbar {
	position: sticky;
	top: 0;
	z-index: 90;
}
/* 앵커 이동 시 대상이 바(72px + 하단선 1px) 밑에 숨지 않게 한다. common.css 의 16px 보다 우선한다. */
.eco-landing.is-mro [id] { scroll-margin-top: 88px; }

/* ≤1023px: 사이트 공통 .header-mobile(absolute, 0~54px, 불투명 #fff)이 #header 높이 0 인 구간에서
 * 랜딩 맨 위(=이 바)를 덮는다. 사이트 sub 페이지와 같은 값(sub.css .sub-content{padding:54px…})만큼
 * 루트에 padding-top 을 줘 바를 그 아래로 내린다.
 * - 바 자체에 주면 sticky 로 붙을 때 54px 흰 띠까지 함께 따라온다.
 * - margin-top 은 안 된다. 루트가 #container > main 의 첫 자식이라 border/padding 없는 조상을 타고
 *   margin 이 collapse 되어 #header 자체가 54px 밀리고 겹침은 그대로 남는다(실측). padding 은 collapse 되지 않는다. */
@media (max-width: 1023px) {
	.eco-landing.is-mro { padding-top: 54px; }
}
@media (max-width: 680px) {
	.eco-landing.is-mro .lnd-mro-topbar-in { padding: 0 24px !important; }
}
/* 좁은 폭: 두 버튼이 한 줄에 들어오도록 "대표번호" 라벨을 빼고 크기·여백을 줄인다(버튼 문구는 그대로). */
@media (max-width: 560px) {
	.eco-landing.is-mro .lnd-mro-topbar-in { height: 60px !important; padding: 0 16px !important; }
	.eco-landing.is-mro .lnd-mro-topbar-ctas { gap: 8px !important; }
	.eco-landing.is-mro .lnd-mro-topbar-tel,
	.eco-landing.is-mro .lnd-mro-topbar-cta { height: 40px !important; padding: 0 14px !important; gap: 6px !important; font-size: 16px !important; }
	.eco-landing.is-mro .lnd-mro-topbar-label { display: none; }
}
@media (max-width: 374px) {
	.eco-landing.is-mro .lnd-mro-topbar-in { padding: 0 12px !important; }
	.eco-landing.is-mro .lnd-mro-topbar-ctas { gap: 6px !important; }
	.eco-landing.is-mro .lnd-mro-topbar-tel,
	.eco-landing.is-mro .lnd-mro-topbar-cta { padding: 0 12px !important; font-size: 15px !important; }
}

/* ── 히어로: 좁은 화면(전폭 텍스트)에서 가로 그라디언트 스크림의 대비 붕괴 보정 ──
 * 원본은 90deg(가로) 그라디언트라 문단·TEL 이 전폭이 되는 ≤1023px 에서 오른쪽 알파가 ~0.08 까지
 * 떨어져 사진 위에 얹힌 텍스트가 안 읽힌다. 세로 그라디언트로 덮어써 전 구간 알파를 확보한다. */
@media (max-width: 1023px) {
	.eco-landing.is-mro .lnd-mro-hero-scrim {
		background: linear-gradient(180deg,
			rgba(14, 98, 93, 0.96) 0%, rgba(14, 98, 93, 0.92) 62%, rgba(14, 98, 93, 0.80) 100%) !important;
	}
}

/* ── 좁은 화면에서 clamp() 하한이 nowrap 최소폭을 이겨 가로 스크롤을 만드는 제목·부제 15개 ──
 * (13개는 h2 안, 2개는 전용몰 섹션 부제 p 안 — 훅 클래스로 정밀 지정) */
@media (max-width: 420px) {
	.eco-landing.is-mro .lnd-mro-nowrap { white-space: normal !important; }
}

/* ── 전용몰: 제목/인트로 2칸 헤더 + 카드 3칸 ─────────────────────── */
@media (max-width: 860px) {
	.eco-landing.is-mro .lnd-mro-mall-head { grid-template-columns: 1fr !important; }
	.eco-landing.is-mro .lnd-mro-mall-grid { grid-template-columns: 1fr !important; }
}

/* ── 이런 구매업무 (이미지 sticky + 4항목 리스트) ────────────────── */
@media (max-width: 1024px) {
	.eco-landing.is-mro .lnd-mro-pain-grid { grid-template-columns: 1fr !important; }
	.eco-landing.is-mro .lnd-mro-pain-sticky { position: static !important; top: auto !important; }
}

/* ── MRO 통합구매 서비스: 8칸 카테고리 격자 + 이미지/문구 2열 ─────── */
@media (max-width: 900px) {
	.eco-landing.is-mro .lnd-mro-items-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.eco-landing.is-mro .lnd-mro-items-media { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-mro .lnd-mro-items-grid { grid-template-columns: 1fr !important; }
}

/* ── 더에코 MRO통합구매: 5단계 격자 ──────────────────────────────── */
@media (max-width: 1024px) {
	.eco-landing.is-mro .lnd-mro-process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-mro .lnd-mro-process-grid { grid-template-columns: 1fr !important; }
}

/* ── 고객사 맞춤 MRO 구매관리: 이미지+본문 2열, 본문 안 2x2 특징 ──── */
@media (max-width: 1024px) {
	.eco-landing.is-mro .lnd-mro-custom-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-mro .lnd-mro-custom-features {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
}

/* ── MRO 구매대행 서비스 개요: 태그 2열 ──────────────────────────── */
@media (max-width: 900px) {
	.eco-landing.is-mro .lnd-mro-overview-tags { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ── 왜 더에코 MRO통합구매인가요: 6칸(카드는 span 2 = 3장/행) ─────── */
@media (max-width: 1024px) {
	.eco-landing.is-mro .lnd-mro-why-grid {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 20px !important;
	}
}
@media (max-width: 640px) {
	.eco-landing.is-mro .lnd-mro-why-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ── 사회적 가치 4칸 / 이용 프로세스 4칸 ─────────────────────────── */
@media (max-width: 900px) {
	.eco-landing.is-mro .lnd-mro-social-grid,
	.eco-landing.is-mro .lnd-mro-steps-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.eco-landing.is-mro .lnd-mro-social-grid,
	.eco-landing.is-mro .lnd-mro-steps-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── 문의: 카피+연락처 / 공용 폼 2열 ──────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-mro .lnd-mro-quote-grid { grid-template-columns: 1fr !important; }
}