@charset "utf-8";
/*
 * 행사·여행·연수 랜딩 (categoryId 1531) — Industry 디자인시스템 + 네이비 톤
 *
 * 원본: 행사여행 디자인 시안(최종본)_완료/theeco-event-travel-training.dc.html.
 * 디자인시스템(_ds/industry-<id>/styles.css)에서 이 문서가 쓰는 토큰과 컴포넌트
 * (.blueprint/.corner/.tag/.btn)를, 문서 자체 helmet <style> 에서 기본 규칙
 * (본문·제목 Noto Sans KR, h1~h4 굵기·자간, p/h 여백 0)을 가져와 .eco-landing.is-event 로 스코프했다.
 * 섹션·글자 색은 원본이 전부 인라인 리터럴이라 마크업에 그대로 두었다.
 * 원본은 min-width:1280px 데스크톱 전용(@media 는 인쇄용 1건)이라 반응형은 여기서 새로 추가했다.
 */


.eco-landing.is-event {
	--color-bg: #ffffff;
	--color-surface: #e9e9ea;
	--color-text: #1d1f20;
	--color-accent: #5980a6;
	--color-accent-2: #728fab;
	--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

	--color-neutral-100: #f5f5f8;
	--color-neutral-200: #e7e7ea;
	--color-neutral-300: #d4d4d7;
	--color-neutral-400: #b7b7ba;
	--color-neutral-500: #98989b;
	--color-neutral-600: #7a7a7d;
	--color-neutral-700: #5d5d60;
	--color-neutral-800: #424244;
	--color-neutral-900: #2b2b2d;

	--color-accent-100: #eef6ff;
	--color-accent-200: #d6ebff;
	--color-accent-300: #b5d9fd;
	--color-accent-400: #94bce3;
	--color-accent-500: #749dc4;
	--color-accent-600: #597ea3;
	--color-accent-700: #416180;
	--color-accent-800: #2c455d;
	--color-accent-900: #1d2d3d;

	/* 원본 helmet 이 body 를 Noto Sans KR 로, h1~h4 를 Noto Sans KR 700 으로 덮는다 */
	--font-heading: "Noto Sans KR", "Barlow Condensed", system-ui, sans-serif;
	--font-heading-weight: 700;
	--font-body: "Noto Sans KR", "Barlow", system-ui, sans-serif;

	--space-1: 3.4px;
	--space-2: 6.8px;
	--space-3: 10.2px;

	--radius-md: 4px;

	letter-spacing: -0.01em;
}

/* ── 원본 helmet 기본 규칙 ─────────────────────────────────────────── */
.eco-landing.is-event :is(h1, h2, h3, h4) {
	letter-spacing: -0.03em;
	text-wrap: balance;
	margin: 0;
}
/* 공용 폼 안쪽 p(.lnd-form-title/-note)는 자체 여백이 있어 제외한다 */
.eco-landing.is-event p:not(.lnd-form *) {
	margin: 0;
	text-wrap: pretty;
}

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

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

/* ── 태그 (_ds 11px -> 08-26 매핑 12px) ─────────────────────────────── */
.eco-landing.is-event .tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: 0;
}
.eco-landing.is-event .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── 버튼 (_ds .btn — 사이트 전역 .btn 과 겹치지 않게 lnd-ev-btn 으로 옮겼다) ── */
.eco-landing.is-event .lnd-ev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	border: 1px solid var(--color-divider);
	border-radius: 0;
}
.eco-landing.is-event .lnd-ev-btn svg { display: block; }

/* 원본 style-hover 3건. 배경이 인라인이라 !important 없이는 hover 가 먹지 않는다 */
.eco-landing.is-event .lnd-ev-topbar-cta:hover,
.eco-landing.is-event .lnd-ev-contact-cta:hover { background: #2c455d !important; }
.eco-landing.is-event .lnd-ev-band-cta:hover { background: rgba(255, 255, 255, 0.14) !important; }

/* ── 상단 바 ─────────────────────────────────────────────────────────
 * 원본대로 sticky top:0 이고 랜딩 루트의 첫 자식이다. 처음에는 사이트 헤더 아래에 있다가
 * 스크롤하면 화면 상단에 붙는다.
 * - fixed 는 쓰지 않는다: 사이트 헤더(#header, relative, 데스크톱 약 173px)를 늘 가린다.
 * - z-index 는 원본 100 대신 90: 사이트 헤더 드롭다운(.gnb depth2 110, .all-menu 100)과
 *   좌측 퀵메뉴(.hd-quick-wrap, fixed 100)가 100 이라 같은 값이면 DOM 순서상 뒤인 이 바가 그 위에 그려진다.
 *   랜딩 안에는 z-index 를 가진 요소가 없어 90 이면 충분하다.
 * - sticky 는 조상에 overflow(visible 이외)가 있으면 동작하지 않는다. 이 테마 루트에 overflow 를 두지 말 것.
 */
.eco-landing.is-event .lnd-ev-topbar {
	position: sticky;
	top: 0;
	z-index: 90;
}

/* 앵커 이동(#quote, #estimate)과 폼 필드 포커스 스크롤이 상단 바(72px)에 가리지 않게 */
.eco-landing.is-event [id] { scroll-margin-top: 88px; }

/*
 * ≤1023px 에서는 사이트 .header-mobile(absolute, 54px, 불투명 #fff)이 랜딩 맨 위 54px 를 덮어
 * 상단 바 버튼이 눌리지 않는다. 루트에 padding-top 을 줘 바를 그 아래로 내린다
 * (margin-top 은 조상으로 collapse 되어 #header 째 밀리므로 쓰지 않는다).
 */
@media (max-width: 1023px) {
	.eco-landing.is-event { padding-top: 54px; }
	.eco-landing.is-event .lnd-ev-topbar-in { height: 64px !important; gap: 20px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-topbar-in { height: 60px !important; gap: 12px !important; justify-content: space-between; }
	.eco-landing.is-event .lnd-ev-topbar-spacer,
	.eco-landing.is-event .lnd-ev-topbar-label,
	.eco-landing.is-event .lnd-ev-topbar-sep { display: none; }
	.eco-landing.is-event .lnd-ev-topbar-cta { height: 42px !important; padding: 0 16px !important; }
}
@media (max-width: 374px) {
	.eco-landing.is-event .lnd-ev-topbar-cta { padding: 0 12px !important; font-size: 15px !important; }
	.eco-landing.is-event .lnd-ev-topbar-arrow { display: none; }
}

/* ── 공통: 좌우 여백 · 섹션 상하 여백 · 섹션 머리 ─────────────────────── */
@media (max-width: 680px) {
	.eco-landing.is-event .lnd-ev-sec { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 420px) {
	.eco-landing.is-event .lnd-ev-sec { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 767px) {
	.eco-landing.is-event .lnd-ev-vpad { padding-top: 80px !important; padding-bottom: 80px !important; }
	.eco-landing.is-event .lnd-ev-vpad-top { padding-top: 80px !important; }
	.eco-landing.is-event .lnd-ev-benefits-sec { padding-top: 44px !important; padding-bottom: 44px !important; }
	.eco-landing.is-event .lnd-ev-mb { margin-bottom: 44px !important; }
}

/* 제목(원본 72/52/42/34px 고정)을 폭에 맞춰 줄인다 */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-h2-xl { font-size: 56px !important; }
	.eco-landing.is-event .lnd-ev-h2-lg { font-size: 44px !important; }
	.eco-landing.is-event .lnd-ev-h2-md { font-size: 36px !important; }
}
@media (max-width: 640px) {
	.eco-landing.is-event .lnd-ev-h2-xl { font-size: 38px !important; }
	.eco-landing.is-event .lnd-ev-h2-lg { font-size: 30px !important; }
	.eco-landing.is-event .lnd-ev-h2-md { font-size: 28px !important; }
	.eco-landing.is-event .lnd-ev-h3-svc { font-size: 28px !important; }
}
@media (max-width: 374px) {
	.eco-landing.is-event .lnd-ev-h2-xl { font-size: 32px !important; }
	.eco-landing.is-event .lnd-ev-h2-lg { font-size: 27px !important; }
	.eco-landing.is-event .lnd-ev-h2-md { font-size: 25px !important; }
}

/* 제목 + 오른쪽 설명 한 줄 머리 -> 세로로 */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-head { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
	.eco-landing.is-event .lnd-ev-why-big { font-size: 80px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-why-head { gap: 16px !important; }
	.eco-landing.is-event .lnd-ev-why-big { display: none; }
}

/* ── 히어로 ─────────────────────────────────────────────────────────
 * 원본은 높이 620px 고정 무대에 문구를 절대배치로 가운데 둔다. 좁은 화면에서는 문구가 무대를
 * 넘쳐 잘리므로, 문구를 흐름 안으로 돌리고 무대 높이를 문구에 맞춘다(사진·스크림은 그대로 inset:0). */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-hero-stage { height: auto !important; }
	.eco-landing.is-event .lnd-ev-hero-content { position: relative !important; inset: auto !important; min-height: 520px; padding: 88px 0; }
	.eco-landing.is-event .lnd-ev-hero-h1 { font-size: 48px !important; }
}
@media (max-width: 640px) {
	.eco-landing.is-event .lnd-ev-hero-content { min-height: 0; padding: 72px 0; }
	.eco-landing.is-event .lnd-ev-hero-sub { font-size: 18px !important; }
	.eco-landing.is-event .lnd-ev-hero-h1 { font-size: 32px !important; }
	.eco-landing.is-event .lnd-ev-hero-desc { font-size: 16px !important; }
	/* 데스크톱 폭 기준 수동 줄바꿈이라 좁은 화면에서는 자연 줄바꿈과 겹쳐 짧은 줄이 생긴다 */
	.eco-landing.is-event .lnd-ev-hero-desc br { display: none; }
}
@media (max-width: 374px) {
	.eco-landing.is-event .lnd-ev-hero-h1 { font-size: 28px !important; }
	.eco-landing.is-event .lnd-ev-hero-kicker { letter-spacing: 0.2em !important; }
}
/* 둘째 줄(행사·여행·연수를 한 번에)이 288px 칸을 넘어 '번에'만 남는 폭 */
@media (max-width: 340px) {
	.eco-landing.is-event .lnd-ev-hero-h1 { font-size: 26px !important; }
}

/* 히어로 아래 상담문의 띠: 전화 | 안내문 | CTA 한 줄 -> 줄바꿈 */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-band-in { flex-wrap: wrap; gap: 20px 28px !important; }
	.eco-landing.is-event .lnd-ev-band-sep { display: none; }
	.eco-landing.is-event .lnd-ev-band-text { flex: 1 1 320px; margin-right: 0 !important; }
	.eco-landing.is-event .lnd-ev-band-cta { flex: 1 1 100%; justify-content: center; }
}

/* ── KEY BENEFITS 4칸 ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-benefits { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
}

/* ── 직접생산확인증명서: 증명서 | 문구 2열 ─────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-cert-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
	.eco-landing.is-event .lnd-ev-cert-frame { width: 100%; max-width: 500px; }
}

/* ── CORE SERVICE: 사진 | 문구 교차 2행 + 사진 2칸 ──────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-svc-row { grid-template-columns: minmax(0, 1fr) !important; }
	/* 2행은 문구가 먼저라 1열로 접으면 1행과 순서가 엇갈린다 -> 사진을 위로 */
	.eco-landing.is-event .lnd-ev-svc-media { order: -1; }
	.eco-landing.is-event .lnd-ev-svc-text { padding: 36px 0 52px !important; }
}
@media (max-width: 767px) {
	.eco-landing.is-event .lnd-ev-svc-pair { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; padding-top: 40px !important; padding-bottom: 80px !important; }
}

/* ── WHY THE ECO 5칸 ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 44px !important; }
	.eco-landing.is-event .lnd-ev-why-item { padding: 32px 16px 0 !important; }
	.eco-landing.is-event .lnd-ev-why-item:nth-child(3n+1) { border-left: 0 !important; padding-left: 0 !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-why-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
	.eco-landing.is-event .lnd-ev-why-item { border-left: 0 !important; padding: 28px 0 !important; }
	.eco-landing.is-event .lnd-ev-why-item + .lnd-ev-why-item { border-top: 1px solid #dfe4e9; }
}

/* ── ONE-STOP PROCESS 4단계(화살표 칸 포함 7칸) ─────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 44px 24px; }
	/* 2열에서는 화살표가 행을 건너뛰어 순서를 오도한다. 단계 번호(STEP 1~4)가 있어 순서는 유지된다 */
	.eco-landing.is-event .lnd-ev-step-arrow { display: none !important; }
	.eco-landing.is-event .lnd-ev-step { padding-right: 16px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
}

/* ── 행사기획·운영 상세 / 국내·해외 연수·출장 3칸 ─────────────────────── */
@media (max-width: 860px) {
	.eco-landing.is-event .lnd-ev-cols3 { grid-template-columns: minmax(0, 1fr) !important; }
	.eco-landing.is-event .lnd-ev-col3-item { border-left: 0 !important; padding: 32px 0 !important; }
	.eco-landing.is-event .lnd-ev-col3-item + .lnd-ev-col3-item { border-top: 1px solid #dfe4e9; }
}

/* ── PUBLIC PROCUREMENT 인증 4칸 ───────────────────────────────────── */
@media (max-width: 1023px) {
	.eco-landing.is-event .lnd-ev-certs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px; }
	.eco-landing.is-event .lnd-ev-cert-item { padding: 32px 16px 0 24px !important; }
	.eco-landing.is-event .lnd-ev-cert-item:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-certs { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0; }
	.eco-landing.is-event .lnd-ev-cert-item { border-left: 0 !important; padding: 24px 0 !important; }
	.eco-landing.is-event .lnd-ev-cert-item + .lnd-ev-cert-item { border-top: 1px solid rgba(255, 255, 255, 0.22); }
}

/* ── FAQ 2칸 ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.eco-landing.is-event .lnd-ev-faq { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}

/* ── 문의 ────────────────────────────────────────────────────────────
 * 공용 폼은 흰 면 + 테두리 없음이라 원안의 옅은 회색(#f6f8fa) 문의 섹션에서 경계가 흐리다.
 * 섹션 색은 원안대로 두고 원안 구분선 색으로 테두리만 준다. */
.eco-landing.is-event .lnd-ev-estimate .lnd-form { border: 1px solid #dfe4e9; }

@media (max-width: 767px) {
	.eco-landing.is-event .lnd-ev-contact-row { gap: 28px 40px !important; }
}
@media (max-width: 560px) {
	.eco-landing.is-event .lnd-ev-contact-cta { flex: 1 1 100%; }
}