@charset "utf-8";
/*
 * 의류 직접생산 랜딩 (categoryId 1535) — Industry 디자인시스템 + 세이지 그린 override
 *
 * 원본: 더에코 의류 직접생산 랜딩페이지 v7.dc.html. 디자인시스템 CSS(_ds/industry-<id>/styles.css)를
 * 로드한 뒤 문서 자체 helmet <style> 이 body 배경·본문색·링크색·모서리 마크 색을 덮어쓴다.
 * 실제 렌더 값은 override 쪽이므로 그 값을 기준으로 삼고, 본문이 인라인 리터럴로 쓰는 색
 * (세이지 #5F8068 계열, 크림 #FFF7D9, 피치 #FCE8D5, 포인트 #D98A55)을 토큰으로 승격했다.
 * .btn/.card/.tag 등 DS 컴포넌트 클래스는 문서에서 쓰이지 않아 이식하지 않았다(.blueprint/.corner 만 사용).
 *
 * 원본은 min-width:1200px 데스크톱 전용 설계(@media 0건)라 반응형은 전부 여기서 새로 추가했다.
 */

.eco-landing.is-apparel {
	--color-bg: #FAF8F1;
	--color-text: #4A504B;
	--color-heading: #343A35;

	--color-accent: #5F8068;
	--color-accent-100: #E7F3DF;
	--color-accent-400: #7C9A84;
	--color-accent-700: #4E6B57;
	--color-cream: #FFF7D9;
	--color-peach: #FCE8D5;
	--color-point: #D98A55;

	/* helmet 이 덮지 않은 DS 원값 */
	--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

	--font-heading: "Barlow Condensed", Pretendard, system-ui, sans-serif;
	--font-heading-weight: 600;
	--font-body: Pretendard, system-ui, sans-serif;

	/* common.css 의 h1~h6 margin-bottom / p·figcaption 여백과 공용 폼이 요구하는 최소 토큰 (DS 값) */
	--space-1: 3.4px;
	--space-2: 6.8px;
	--space-3: 10.2px;
	--radius-md: 4px;
	--color-surface: #F5F5F1;
}

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

/* ── 굵기 상속 복원 ────────────────────────────────────────────────
 * 사이트 css/common.css 의 `* { font-weight:400 }` 가 굵기 상속을 끊는다. 원본은 굵기를 부모(h1·h2·흐름 줄)에
 * 주고 안쪽 span 이 물려받는 구조라, 그대로 두면 제목 강조 span·ONE-STOP 흐름 단어가 400 으로 렌더된다.
 * 특정도 0(:where)이라 사이트 `*` 만 이기고 인라인·클래스 규칙은 그대로 둔다. 공용 폼(#estimate)은 제외. */
:where(.eco-landing.is-apparel) :where(:not(#estimate, #estimate *)) { font-weight: inherit; }

/* ── 공용 폼: 원본 폼 카드의 그림자 (흰 카드가 연한 #FFF3E8 섹션에 묻히지 않게) ── */
.eco-landing.is-apparel .lnd-form { box-shadow: 0 12px 32px rgba(52, 58, 53, .10); }

/* ── hover (원본 style-hover 이관 + 링크화한 연락처) ─────────────────
 * 색이 인라인 style 이라 !important 없이는 hover 가 먹지 않는다(1530 코드리뷰 지적). */
.eco-landing.is-apparel .lnd-ap-topbar-cta,
.eco-landing.is-apparel .lnd-ap-topbar-tel,
.eco-landing.is-apparel .lnd-ap-contact {
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.eco-landing.is-apparel .lnd-ap-topbar-cta:hover {
	background: #4E6B57 !important;
	color: #fff !important;
}
.eco-landing.is-apparel .lnd-ap-topbar-tel:hover { color: #5F8068 !important; }
.eco-landing.is-apparel .lnd-ap-contact:hover {
	background: #E7F3DF !important;
	border-color: #5F8068 !important;
}

/* ── 상단 CTA 바 (원본 sticky header) ─────────────────────────────
 * 랜딩 루트의 첫 자식이라 처음엔 사이트 헤더(#header, 흐름 배치) 아래에 있다가 스크롤하면 화면 상단에 붙는다.
 * sticky 는 조상 중 하나라도 overflow 가 visible 이 아니면 죽으므로 루트에 overflow 를 두지 않는다.
 * z-index 90: 사이트 카테고리 전체메뉴(.all-menu, z-index 100)를 가리지 않고 본문보다는 위(MRO 와 같은 값). */
.eco-landing.is-apparel .lnd-ap-topbar {
	position: sticky;
	top: 0;
	z-index: 90;
}
/* 앵커 이동 시 대상이 바(80px + 하단선 1px) 밑에 숨지 않게 한다. common.css 의 16px 보다 우선. */
.eco-landing.is-apparel [id] { scroll-margin-top: 96px; }

/* ≤1023px: 사이트 .header-mobile(absolute, 0~54px, 불투명)이 랜딩 맨 위를 덮는다 → 루트 padding-top.
 * margin-top 은 조상을 타고 collapse 되어 안 된다(MRO 실측). */
@media (max-width: 1023px) {
	.eco-landing.is-apparel { padding-top: 54px; }
}
@media (max-width: 680px) {
	.eco-landing.is-apparel .lnd-ap-topbar-in { padding: 0 24px !important; }
}
/* 좁은 폭: "대표전화" 라벨·구분선을 빼고 크기·여백을 줄여 두 요소를 한 줄에 둔다(문구는 그대로). */
@media (max-width: 560px) {
	.eco-landing.is-apparel .lnd-ap-topbar-in { height: 64px !important; padding: 0 16px !important; }
	.eco-landing.is-apparel .lnd-ap-topbar-ctas { gap: 14px !important; }
	.eco-landing.is-apparel .lnd-ap-topbar-sep,
	.eco-landing.is-apparel .lnd-ap-topbar-label { display: none; }
	.eco-landing.is-apparel .lnd-ap-topbar-cta { padding: 10px 16px !important; font-size: 16px !important; }
	.eco-landing.is-apparel .lnd-ap-topbar-num { font-size: 22px !important; }
	.eco-landing.is-apparel [id] { scroll-margin-top: 80px; }
}
@media (max-width: 374px) {
	.eco-landing.is-apparel .lnd-ap-topbar-in { padding: 0 12px !important; }
	.eco-landing.is-apparel .lnd-ap-topbar-cta { padding: 10px 12px !important; font-size: 15px !important; }
	.eco-landing.is-apparel .lnd-ap-topbar-num { font-size: 20px !important; }
}

/* ── 섹션 컨테이너 여백 (좁은 화면에서 축소) ─────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-sec { padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (max-width: 680px) {
	.eco-landing.is-apparel .lnd-ap-sec {
		padding: 64px 24px !important;
	}
}
@media (max-width: 420px) {
	.eco-landing.is-apparel .lnd-ap-sec { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── 제목 크기 (원본 50/40~52px 고정 + nowrap) ───────────────────── */
@media (max-width: 640px) {
	.eco-landing.is-apparel .lnd-ap-h1 { font-size: 34px !important; white-space: normal !important; }
	.eco-landing.is-apparel .lnd-ap-h2 { font-size: 30px !important; }
}
@media (max-width: 374px) {
	.eco-landing.is-apparel .lnd-ap-h1 { font-size: 30px !important; }
	.eco-landing.is-apparel .lnd-ap-h2 { font-size: 27px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-apparel .lnd-ap-nowrap { white-space: normal !important; }
}

/* ── 01 히어로: 카피 / 이미지 2열 ─────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}

/* ── 02 직접생산확인증명서: 증명서 / 설명 2열 + 품목·기간 표 ───────────
 * 오른쪽 표의 확인기간(32px nowrap)이 칸 폭 ~1130px 아래에서 넘쳐 1199px 부터 1열로 접는다. */
@media (max-width: 1199px) {
	.eco-landing.is-apparel .lnd-ap-cert-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
	.eco-landing.is-apparel .lnd-ap-cert-grid > .blueprint { width: 100%; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
	.eco-landing.is-apparel .lnd-ap-cert-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
		padding: 18px 20px !important;
	}
	.eco-landing.is-apparel .lnd-ap-cert-val { white-space: normal !important; font-size: 22px !important; }
	.eco-landing.is-apparel .lnd-ap-cert-row + .lnd-ap-cert-row .lnd-ap-cert-val { font-size: 26px !important; line-height: 1.15 !important; }
}

/* ── 03 니즈: 4칸 ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-needs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-apparel .lnd-ap-needs-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.eco-landing.is-apparel .lnd-ap-needs-note { padding: 18px 4px !important; font-size: 18px !important; }
}

/* ── 04 주요 품목: 3칸 카드 ───────────────────────────────────────── */
@media (max-width: 860px) {
	.eco-landing.is-apparel .lnd-ap-items-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 520px;
		margin: 0 auto;
		gap: 32px !important;
	}
	.eco-landing.is-apparel .lnd-ap-item-img { height: 380px !important; }
}

/* ── 05 ONE-STOP: 5단계 + 연결선 + 흐름 줄 ───────────────────────── */
@media (max-width: 1100px) {
	.eco-landing.is-apparel .lnd-ap-os-line { display: none; }
	.eco-landing.is-apparel .lnd-ap-os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 48px !important; }
}
@media (max-width: 640px) {
	.eco-landing.is-apparel .lnd-ap-os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
	.eco-landing.is-apparel .lnd-ap-os-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 680px) {
	.eco-landing.is-apparel .lnd-ap-flow {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 12px !important;
		padding: 16px 20px !important;
		font-size: 17px !important;
	}
}

/* ── 06 기관 맞춤 제작 서비스: 제목 / 2x2 카드 ────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-svc-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-apparel .lnd-ap-svc-cards { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; }
}

/* ── 07 왜 더에코: 6칸 격자(카드 span 2 → 3장/행, 2행은 가운데 2장) ──
 * ≤1023: 4칸 격자에서 2장/행, 홀로 남는 5번째 카드를 가운데로. ≤640: 1열. */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.eco-landing.is-apparel .lnd-ap-why-4 { grid-column: auto / span 2 !important; }
	.eco-landing.is-apparel .lnd-ap-why-5 { grid-column: 2 / span 2 !important; }
}
@media (max-width: 640px) {
	.eco-landing.is-apparel .lnd-ap-why-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.eco-landing.is-apparel .lnd-ap-why-grid > .blueprint { grid-column: auto !important; }
}

/* ── 08 사회적 가치: 제목/설명 2열 + 카드 3장(사이 화살표) ────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-social-head { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
	.eco-landing.is-apparel .lnd-ap-social-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.eco-landing.is-apparel .lnd-ap-social-arrow { height: 64px; }
	.eco-landing.is-apparel .lnd-ap-social-arrow svg { transform: rotate(90deg); }
}

/* ── 09 프로세스: 5단계 + 화살표 4개 ─────────────────────────────
 * 접히면 화살표를 숨긴다. 카드마다 STEP 01~05 배지가 있어 순서는 유지된다. */
@media (max-width: 1100px) {
	.eco-landing.is-apparel .lnd-ap-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
	.eco-landing.is-apparel .lnd-ap-step-arrow { display: none !important; }
}
@media (max-width: 640px) {
	.eco-landing.is-apparel .lnd-ap-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 400px) {
	.eco-landing.is-apparel .lnd-ap-steps-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 10 문의: 카피+연락처 / 공용 폼 2열 ──────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-apparel .lnd-ap-quote-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
}
@media (max-width: 420px) {
	.eco-landing.is-apparel .lnd-ap-contact { width: 100%; padding: 14px 18px !important; }
	.eco-landing.is-apparel .lnd-ap-contact-txt { white-space: normal !important; }
}