/* ===========================================================================
   Ecotec Korea — 한글화 오버레이
   원본(main.css)의 레이아웃·색상은 그대로 두고, 한글 조판에 필요한 부분만 보정.
   =========================================================================== */

/* --- 1. 폰트 스택: 라틴은 원본 그대로, 한글만 Pretendard/Noto Sans KR 로 폴백 --- */
:root {
  --font-ko: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Montserrat", var(--font-ko);
  --font-heading: "Roboto", var(--font-ko);
}

body,
.font-body   { font-family: "Montserrat", var(--font-ko); }
.font-heading{ font-family: "Roboto", var(--font-ko); }
.font-montserrat { font-family: "Montserrat", var(--font-ko); }
.font-roboto     { font-family: "Roboto", var(--font-ko); }

/* --- 2. 한글 줄바꿈: 단어 중간에서 끊기지 않도록 --- */
body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd,
.nav-link__text,
.hero__content-shell,
.btn {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --- 3. 한글은 라틴보다 시각 높이가 커서 자간·행간을 미세 보정 --- */
:lang(ko) { letter-spacing: -0.01em; }

h1, h2, h3, .text-5xl, .text-4xl, .text-3xl { letter-spacing: -0.02em; }

/* 본문 가독성: 원본 line-height 가 한글에 다소 좁음 */
.rich-text p,
.entry-content p { line-height: 1.75; }

/* --- 4. 원본에서 영문 기준으로 잡힌 uppercase 를 한글에서는 해제 --- */
.uppercase:lang(ko) { text-transform: none; }

/* --- 5. 버튼 안 한글 텍스트가 세로로 눌리는 현상 보정 --- */
.btn { line-height: 1.4; }

/* --- 6. Font Awesome Pro(Light) 미사용 환경 대비: Free 로도 아이콘이 보이도록 --- */
.fa-light { font-weight: 300; }

/* --- 7. 워드프레스 관리바가 fixed 헤더를 가리지 않도록 --- */
.admin-bar .header-desktop { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header-desktop { top: 46px; }
}

/* --- 8. 워드프레스 기본 정렬 클래스 (에디터 콘텐츠용) --- */
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: .875rem; color: #69696c; margin-top: .5rem; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- 9. 카드 그리드: 행을 다 채우지 못한 카드가 통째로 늘어나는 것 방지 ---
   마지막 줄의 카드가 flex-grow 로 한 줄 전체를 차지하지 않도록
   각 브레이크포인트의 basis 값과 같은 상한을 건다.
   너비는 원본 응용분야 페이지와 같은 '한 줄에 4개'(basis-23.50)에 맞춘다. */
@media (min-width: 640px)  { .ecotec-card-cell { max-width: calc(50% - 1rem); } }
@media (min-width: 1024px) { .ecotec-card-cell { max-width: calc(33.333% - 1rem); } }
@media (min-width: 1040px) { .ecotec-card-cell { max-width: calc(25% - 0.75rem); } }

/* --- 10. 에디터 본문 타이포그래피 ---
   원본은 Tailwind preflight 로 p/h 마진이 0 이고, 문단 간격을 CMS 위젯이 넣어 준다.
   워드프레스 에디터로 작성한 본문에도 같은 리듬을 주기 위해 여기서 복원한다. */
.entry-content > * + *,
.terex-content-block > * + * { margin-top: 1.25rem; }

.entry-content p,
.terex-content-block p { line-height: 1.8; }

.entry-content h2, .entry-content h3, .entry-content h4 { font-weight: 700; margin-top: 2.5rem; }
.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.375rem; }
.entry-content h4 { font-size: 1.125rem; }

.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .5rem; }

.entry-content a { color: var(--brand-default, #25844e); text-decoration: underline; }
.entry-content a:hover { text-decoration: none; }

.entry-content blockquote {
  border-left: 3px solid rgba(var(--color-brand-default));
  padding-left: 1.5rem;
  font-style: normal;
  color: #69696c;
}

.entry-content img { max-width: 100%; height: auto; border-radius: .5rem; }

.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: .75rem 1rem; border-bottom: 1px solid #dfdfe1; text-align: left; }
.entry-content th { font-weight: 700; }

/* --- 11. 원본 마크업이 쓰지만 이 CSS 빌드에서 purge 된 임의값 유틸리티 복원 ---
   z-[200] (메가메뉴 드롭다운), z-[300] (모바일 메뉴 패널), z-60 (모달 닫기 버튼).
   없으면 모바일 메뉴 패널이 히어로 아래로 깔린다. */
.z-\[200\] { z-index: 200; }
.z-\[300\] { z-index: 300; }
.z-60      { z-index: 60; }
.z-\[1\]   { z-index: 1; }   /* 카드 호버 오버레이 */

/* 원본 마크업이 쓰지만 이 CSS 빌드에 없는 나머지 유틸리티 */
.max-w-screen { max-width: 100vw; }
.shadow-card  { box-shadow: 0 8px 24px rgba(35, 35, 36, .12); }

/* --- 12. 텍스트 선택 하이라이트 ---
   main.css 에 ::selection 규칙이 없어 브라우저 기본 파란색이 그대로 보인다.
   브랜드 그린(#25844E, rgb 37 132 78)으로 통일한다. */
::selection      { background-color: #25844E; color: #fdfdfd; }
::-moz-selection { background-color: #25844E; color: #fdfdfd; }

/* --- 13. 아이콘: Font Awesome Solid(굵음) -> Phosphor Light(얇음) ---
   원본은 FA Pro 의 fa-light 를 쓰지만 Pro 는 유료라 Free(Solid, weight 900)로
   대체돼 아이콘이 굵게 보인다. 마크업은 그대로 두고 글리프만 교체하므로
   엘리멘터 아이콘 선택기로 넣은 아이콘까지 함께 얇아진다.
   매핑하지 않은 FA 아이콘은 기존대로 FA 로 렌더된다. */
.fa-magnifying-glass,
.fa-location-dot,
.fa-globe,
.fa-bars,
.fa-xmark,
.fa-chevron-down,
.fa-chevron-right,
.fa-chevron-left,
.fa-arrow-right,
.fa-arrow-left,
.fa-arrow-up-right-from-square,
.fa-external-link-alt,
.fa-circle-play,
.fa-facebook,
.fa-instagram,
.fa-youtube,
.fa-linkedin {
	font-family: "Phosphor-Light" !important;
	font-weight: normal !important;
	font-style: normal !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-magnifying-glass::before { content: "\e30c" !important; }   /* ph-magnifying-glass */
.fa-location-dot::before { content: "\e316" !important; }   /* ph-map-pin */
.fa-globe::before { content: "\e288" !important; }   /* ph-globe */
.fa-bars::before { content: "\e2f0" !important; }   /* ph-list */
.fa-xmark::before { content: "\e4f6" !important; }   /* ph-x */
.fa-chevron-down::before { content: "\e136" !important; }   /* ph-caret-down */
.fa-chevron-right::before { content: "\e13a" !important; }   /* ph-caret-right */
.fa-chevron-left::before { content: "\e138" !important; }   /* ph-caret-left */
.fa-arrow-right::before { content: "\e06c" !important; }   /* ph-arrow-right */
.fa-arrow-left::before  { content: "\e058" !important; }   /* ph-arrow-left (좌우 화살표 굵기를 맞춘다) */
.fa-arrow-up-right-from-square::before { content: "\e5de" !important; }   /* ph-arrow-square-out */
.fa-external-link-alt::before          { content: "\e5de" !important; }   /* ph-arrow-square-out (FA5 이름) */
.fa-circle-play::before { content: "\e3d2" !important; }   /* ph-play-circle */
.fa-facebook::before { content: "\e226" !important; }   /* ph-facebook-logo */
.fa-instagram::before { content: "\e2d0" !important; }   /* ph-instagram-logo */
.fa-youtube::before { content: "\e4fc" !important; }   /* ph-youtube-logo */
.fa-linkedin::before { content: "\e2ee" !important; }   /* ph-linkedin-logo */

/* SNS·외부링크 아이콘은 Light 로는 너무 얇다.
   SNS 로고는 면(Fill), 외부링크 표시는 굵은 선(Bold)으로 낸다.
   글리프 코드가 모든 굵기에서 같아 font-family 만 바꾸면 된다. */
.fa-facebook,
.fa-instagram,
.fa-youtube,
.fa-linkedin {
	font-family: "Phosphor-Fill" !important;
}

.fa-external-link-alt,
.fa-arrow-up-right-from-square {
	font-family: "Phosphor-Bold" !important;
}

/* --- 14. 엘리멘터 제품 상세 템플릿 --- */
.ecotec-el-eyebrow { font-size: .875rem; color: #69696c; letter-spacing: .02em; }
.ecotec-el-model { font-size: 2.5rem; font-weight: 700; line-height: 1.2; color: #232324; }
.ecotec-el-product-body { border-left: 3px solid #25844E; padding-left: 1.5rem; }
.ecotec-el-product-body p + p { margin-top: 1rem; }
.ecotec-el-product-body p { line-height: 1.7; }
.ecotec-el-product-image { display: flex; background: #fdfdfd; }
.ecotec-el-product-image img { width: 100%; height: 100%; object-fit: cover; }
.ecotec-el-specs th { white-space: nowrap; }

/* --- 15. 검색 오버레이 (테마 자체 구현) --------------------------------- */
.ecotec-search {
  position: fixed; inset: 0; z-index: 100001;   /* 워드프레스 관리자 바(99999)보다 위 */
  visibility: hidden; opacity: 0;
  transition: opacity .22s ease, visibility .22s ease;
}
/* 워드프레스 관리자 바가 상단 32px(모바일 46px)를 차지하므로 그만큼 내린다.
   admin-bar 는 <body> 클래스라 오버레이(body 자식)에는 자손 선택자로 걸어야 한다. */
.admin-bar .ecotec-search { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .ecotec-search { top: 46px; }
}
.ecotec-search.is-open { visibility: visible; opacity: 1; }

.ecotec-search__backdrop {
  position: absolute; inset: 0;
  background: rgba(24, 26, 25, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ecotec-search__panel {
  position: relative;
  background: #fdfdfd;
  box-shadow: 0 18px 48px rgba(24, 26, 25, .22);
  transform: translateY(-14px);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.ecotec-search.is-open .ecotec-search__panel { transform: translateY(0); }

.ecotec-search__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 72px;
}

/* 닫기 버튼: 검색 버튼 바로 왼쪽. 입력 줄 안에 인라인으로 놓는다 */
.ecotec-search__close {
  flex: none;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #a0a0a0; line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.ecotec-search__close i { font-size: 24px; line-height: 1; }
.ecotec-search__close:hover { background: #efeff0; color: #232324; }

/* 입력 줄: 밑줄 하나로 단순하게 */
.ecotec-search__form {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid #dfdfe1;
  padding-bottom: 14px;
  transition: border-color .2s ease;
}
.ecotec-search__form:focus-within { border-color: #25844E; }

/* 입력 글자보다 한 단계 작게 — 너무 크면 아이콘이 튄다 */
.ecotec-search__icon {
  flex: none; line-height: 1; color: #a0a0a0;
  font-size: clamp(19px, 1.7vw, 24px);
}

.ecotec-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.4;
  color: #232324;
}
.ecotec-search__input::placeholder { color: #bfbfc3; }
.ecotec-search__input::-webkit-search-cancel-button { display: none; }

.ecotec-search__submit {
  flex: none;
  padding: 10px 22px; border-radius: 999px;
  background: #25844E; color: #fdfdfd;
  font-size: 15px; font-weight: 700;
  transition: background-color .2s ease;
}
.ecotec-search__submit:hover { background: #226941; }

.ecotec-search__hint { margin-top: 14px; font-size: 13px; color: #a0a0a0; }
.ecotec-search__hint kbd {
  display: inline-block; padding: 1px 6px; margin: 0 2px;
  border: 1px solid #dfdfe1; border-radius: 4px;
  background: #fafafa; font-size: 12px; font-family: Roboto, var(--font-ko);
}

@media (max-width: 767px) {
  .ecotec-search__inner { padding: 56px 20px 48px; }
  .ecotec-search__submit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ecotec-search, .ecotec-search__panel { transition: none; }
}

/* --- 검색 결과 ---------------------------------------------------------- */

.ecotec-results__inner {
  /* 다른 페이지 섹션과 같은 좌우 여백 */
  width: min(100%, 1920px);
  margin-inline: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/*
 * 세로 리듬을 다른 페이지와 맞춘다.
 * 29절의 리듬 규칙은 `main .elementor > .e-con` 안쪽만 겨냥하는데,
 * 검색 결과는 엘리멘터 문서가 아니라 테마 템플릿이라 그 규칙이 닿지 않는다.
 * 같은 변수를 써서 똑같은 값을 준다.
 */
.ecotec-results__inner {
  padding-top: var(--ecotec-gap-section);
  padding-bottom: var(--ecotec-gap-section);
}
/* 마지막 콘텐츠(페이지네이션)와 푸터 사이 */
.ecotec-results {
  padding-bottom: var(--ecotec-gap-section);
}

.ecotec-results__head {
  padding-bottom: 32px;
  border-bottom: 1px solid #e3e3e5;
  margin-bottom: 32px;
}
.ecotec-results__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  color: #232324;
  margin: 0 0 10px;
  line-height: 1.25;
}
.ecotec-results__title span { color: #25844E; }
.ecotec-results__count {
  margin: 0 0 24px;
  color: #69696c;
  font-size: 16px;
}
.ecotec-results__count strong { color: #232324; }

/* 다시 검색하기 */
.ecotec-results__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
}
.ecotec-results__form i {
  position: absolute;
  left: 16px;
  color: #8a8a8f;
  pointer-events: none;
}
.ecotec-results__form input[type="search"] {
  flex: 1 1 auto;
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px 0 44px;
  border: 1px solid #d5d5d8;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: #232324;
}
.ecotec-results__form input[type="search"]:focus {
  outline: none;
  border-color: #25844E;
  box-shadow: 0 0 0 3px rgba(37,132,78,.15);
}
.ecotec-results__form button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #25844E;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ecotec-results__form button:hover { background: #1b6b3e; }

/* ---- 결과 목록: 한 줄에 하나 ---- */
.ecotec-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ecotec-results__link {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px 16px 16px;
  background: #fdfdfd;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.ecotec-results__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(24,26,25,.22);
  text-decoration: none;
}

.ecotec-results__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4f5;
}
.ecotec-results__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.ecotec-results__link:hover .ecotec-results__media img { transform: scale(1.04); }
.ecotec-results__media i { font-size: 28px; color: #b4b4b8; }

.ecotec-results__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ecotec-results__type {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf3ee;
  color: #25844E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ecotec-results__name {
  font-size: 20px;
  font-weight: 700;
  color: #232324;
  line-height: 1.35;
}
.ecotec-results__desc {
  color: #69696c;
  font-size: 15px;
  line-height: 1.65;
  /* 두 줄까지만 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ecotec-results__name mark,
.ecotec-results__desc mark {
  background: rgba(37,132,78,.14);
  color: #1b6b3e;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
}
.ecotec-results__go { flex: 0 0 auto; }
.ecotec-results__go .btn {
  transition: transform .125s ease-linear, background-color .2s ease;
}
.ecotec-results__link:hover .ecotec-results__go .btn {
  transform: translateX(4px);
  background: #eef0ef;
}

/* ---- 페이지네이션 ---- */
.ecotec-pagination { margin-top: 40px; }
.ecotec-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ecotec-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e3e3e5;
  border-radius: 999px;
  background: #fff;
  color: #47474a;
  font-size: 15px;
  text-decoration: none;
  justify-content: center;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ecotec-pagination a.page-numbers:hover {
  border-color: #25844E;
  color: #25844E;
}
.ecotec-pagination .page-numbers.current {
  background: #25844E;
  border-color: #25844E;
  color: #fff;
  font-weight: 700;
}
.ecotec-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ---- 결과 없음 ---- */
.ecotec-results__empty { padding: 8px 0 24px; }
.ecotec-results__empty-lead {
  color: #69696c;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.ecotec-results__links-label {
  display: block;
  font-weight: 700;
  color: #232324;
  margin-bottom: 12px;
}
.ecotec-results__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ecotec-results__links a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #e3e3e5;
  border-radius: 999px;
  color: #232324;
  text-decoration: none;
  font-size: 15px;
}
.ecotec-results__links a:hover { border-color: #25844E; color: #25844E; }

@media (max-width: 767px) {
  .ecotec-results__link {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 12px;
  }
  .ecotec-results__go { display: none; }
  .ecotec-results__name { font-size: 17px; }
  .ecotec-results__desc { font-size: 14px; }
  .ecotec-results__form { flex-wrap: wrap; }
  .ecotec-results__form input[type="search"] { flex: 1 1 100%; }
  .ecotec-results__form button { flex: 1 1 100%; }
}


/* --- 18. 사양 표 (원본 Terex 사양 표와 동일한 형태) ---------------------
   라벨 왼쪽 / 값 오른쪽, 행 단위 줄무늬, 얇은 구분선.
   main.css 의 .responsive-table-* 는 셀 flex 구조를 전제로 해 열 단위로 색이
   갈리므로 쓰지 않고 전용 클래스를 쓴다. */
.ecotec-spec {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 15px;
  color: #232324;
}
.ecotec-spec tr { border-bottom: 1px solid #e6e6e8; }
.ecotec-spec tr:last-child { border-bottom: 0; }

/* 행 단위 줄무늬: 홀수 흰색, 짝수 옅은 회색 */
.ecotec-spec tr:nth-child(odd)  { background-color: #fdfdfd; }
.ecotec-spec tr:nth-child(even) { background-color: #f5f5f6; }

.ecotec-spec th,
.ecotec-spec td {
  padding: 16px 20px;
  vertical-align: top;
  line-height: 1.5;
  background: transparent;   /* 행 배경이 그대로 보이도록 */
}
.ecotec-spec th {
  width: 40%;
  text-align: left;
  font-weight: 400;
  color: #4a4a4d;
  white-space: normal;
}
.ecotec-spec td {
  text-align: right;
  font-weight: 400;
  color: #232324;
}

@media (max-width: 640px) {
  .ecotec-spec { font-size: 14px; }
  .ecotec-spec th, .ecotec-spec td { padding: 13px 14px; }
  .ecotec-spec th { width: 45%; }
}

/* 사양 섹션: 제목만 좌우 여백을 주고, 표는 섹션 폭을 좌우로 꽉 채운다.
   마지막 행이 섹션 하단에 딱 붙도록 아래 여백을 없애고,
   행 배경이 라운드 밖으로 삐져나오지 않게 잘라 낸다. */
.ecotec-el-specs { overflow: hidden; }
.ecotec-el-specs > .e-con-inner > .elementor-widget-heading { padding: 0 20px; margin-bottom: 16px; }
.ecotec-el-specs > .e-con-inner > .elementor-widget-shortcode { margin-bottom: 0; }
.ecotec-el-specs .ecotec-spec { margin-bottom: 0; }
.ecotec-el-specs .ecotec-spec tr:first-child { border-top: 1px solid #e6e6e8; }
/* 마지막 행 아래에는 구분선을 두지 않는다 (섹션 테두리가 그 역할을 한다) */
.ecotec-el-specs .ecotec-spec tr:last-child { border-bottom: 0; }

/* 사양 박스 폭 정렬.
   boxed 컨테이너는 max-width(1920px)를 .e-con-inner 에만 걸기 때문에,
   1920px 보다 넓은 화면에서는 '박스(테두리·배경)는 전체 폭 / 내용은 1920px' 로
   어긋나 양옆에 빈 공간이 생긴다. 박스 자체를 콘텐츠 폭에 맞추고,
   내부는 박스를 꽉 채우게 해서 표가 항상 가장자리까지 닿게 한다. */
.ecotec-el-specs {
  width: min(calc(100% - 32px), 1920px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ecotec-el-specs > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- 19. 제품 상세 (저장된 원본 페이지 구조 재현) ---------------------- */

/* 섹션 흰 카드 라운드를 전 구간 동일하게 (16px) */
.ecotec-product-card,
.ecotec-hotspots-card,
.grid.grid-cols-2.bg-system-light { border-radius: 16px; }

/* 원본 init.js 는 Swiper 초기화 전까지 갤러리를 숨겨 둔다(inline visibility).
   이 테마는 Swiper 를 쓰지 않으므로 항상 보이게 고정한다. */
.gallery-container { opacity: 1 !important; visibility: visible !important; }

/* ---- 갤러리 메인 : 슬라이드를 겹쳐 두고 활성만 보인다 (원본 swiper-fade) ---- */
.gallery-top { position: relative; border-radius: 16px; }
.gallery-top .ecotec-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease;
  background: #fdfdfd;
}
.gallery-top .ecotec-slide.is-active { opacity: 1; visibility: visible; }

/* 큰 이미지는 영역을 꽉 채운다.
   picture 가 flex + align-items:center 라 이미지가 늘어나지 않아
   위아래에 빈 공간이 생겼다. */
.gallery-top .ecotec-slide > picture { width: 100%; height: 100%; display: block; }
.gallery-top .ecotec-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gallery-top .ecotec-slide iframe { width: 100%; height: 100%; border: 0; }

/* ---- 썸네일 스트립 : 한 화면 6개, 페이지 단위 스와이프 ---- */
.ecotec-thumbs { position: relative; }
.ecotec-thumbs__viewport { overflow: hidden; cursor: grab; }
.ecotec-thumbs__viewport.is-dragging { cursor: grabbing; }
.ecotec-thumbs__track {
  display: flex;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* 6개가 정확히 한 화면을 채우도록 폭을 고정 (gap 은 margin 으로 처리) */
.ecotec-thumb {
  position: relative;
  flex: 0 0 calc(100% / 6);
  aspect-ratio: 3 / 2;             /* 16:9 보다 세로를 조금 더 준다 */
  border: 2px solid #dfdfe1;
  border-radius: 8px;
  overflow: hidden;
  background: #fdfdfd;
  opacity: .75;
  transition: border-color .2s ease, opacity .2s ease;
}
.ecotec-thumb:hover { opacity: 1; }
.ecotec-thumb.is-active { border-color: #25844E; opacity: 1; }
.ecotec-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;               /* contain -> cover */
  display: block;
}
.ecotec-thumb--video i {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fdfdfd; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* 남은 장수 배지 (+7) */
.ecotec-thumb__more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,26,25,.55);
  color: #fdfdfd; font-size: 18px; font-weight: 700;
}
.ecotec-thumb__more[hidden] { display: none; }

@media (max-width: 640px) {
  .ecotec-thumb { flex-basis: calc(100% / 4); }
}

/* ---- 확대 보기 : 좌우 이동 + 하단 썸네일 ---- */
.ecotec-lightbox {
  position: fixed; inset: 0; z-index: 1300;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  grid-template-rows: 1fr auto;
  align-items: center;
  background: rgba(24,26,25,.9);
  padding: 56px 16px 20px;
}
.ecotec-lightbox.hidden { display: none; }
.ecotec-lightbox__stage {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; height: 100%;
}
.ecotec-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ecotec-lightbox__nav {
  grid-row: 1;
  width: 48px; height: 48px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fdfdfd; font-size: 24px; background: rgba(255,255,255,.12);
  transition: background-color .2s ease;
}
.ecotec-lightbox__nav:hover { background: rgba(255,255,255,.25); }
.ecotec-lightbox__nav--prev { grid-column: 1; justify-self: start; }
.ecotec-lightbox__nav--next { grid-column: 3; justify-self: end; }
.ecotec-lightbox__close {
  position: absolute; top: 16px; right: 20px;
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fdfdfd; font-size: 26px;
  transition: background-color .2s ease;
}
.ecotec-lightbox__close:hover { background: rgba(255,255,255,.15); }
.ecotec-lightbox__thumbs {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding-top: 16px;
}
.ecotec-lightbox__thumbs button {
  width: 84px; aspect-ratio: 16 / 9;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  opacity: .55; transition: opacity .2s ease, border-color .2s ease;
}
.ecotec-lightbox__thumbs button:hover { opacity: 1; }
.ecotec-lightbox__thumbs button.is-active { opacity: 1; border-color: #25844E; }
.ecotec-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
  .ecotec-lightbox { grid-template-columns: 40px 1fr 40px; padding: 56px 8px 16px; }
  .ecotec-lightbox__nav { width: 36px; height: 36px; font-size: 18px; }
  .ecotec-lightbox__thumbs button { width: 56px; }
}

/* --- 20. 제품 상세: 핫스팟 ---------------------------------------------- */
.ecotec-hotspots-card { background: #fdfdfd; padding: 24px; }
.ecotec-hotspots {
  position: relative;
  /* 원본 .hotspots-wrapper 와 같은 크기 제한 */
  max-width: 1600px;
  max-height: 900px;
  margin: 0 auto;
}
.ecotec-hotspots > img { display: block; width: 100%; height: auto; }
.ecotec-hotspots .hotspots { position: absolute; inset: 0; }
.ecotec-popover {
  width: 358px; max-width: min(358px, 80vw);
  visibility: hidden; opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  pointer-events: none;
}
.ecotec-popover.is-open {
  visibility: visible; opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.ecotec-popover img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ecotec-popover h2 { font-size: 18px; margin-bottom: 6px; }
.ecotec-popover p { font-size: 14px; line-height: 1.7; color: #69696c; }

/* --- 21. 제품 상세: 기술 문서 -------------------------------------------
   패널 자체는 배경 없이 두고, 치수 / 동력 / 다운로드가 각각 독립된 흰 카드다. */
.tech-specs__panel { background: transparent; }
.tech-specs__panel .h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }

/* 각 사양 그룹 = 하나의 카드 */
.tech-specs__panel .accordion {
  background: #fdfdfd;
  border-radius: 16px;
  margin-bottom: 16px;
}
.tech-specs__panel .accordion-wrapper > .bg-system-light {
  border-radius: 16px;
  background: #fdfdfd;
}
/* 다운로드 카드 안의 아코디언은 카드가 이미 있으므로 중복 라운드/여백 제거 */
.tech-specs__panel .accordion-wrapper > .bg-system-light .accordion {
  border-radius: 0; margin-bottom: 0;
}

/* 단위 스위치: 배경 알약 안에서 인디케이터가 미끄러진다.
   패딩(6px)을 뺀 폭의 절반이어야 오른쪽으로 밀렸을 때 영역을 넘지 않는다. */
.ecotec-unit-switch { padding: 6px; }
.ecotec-unit-switch__indicator {
  top: 6px; bottom: 6px; left: 6px;
  width: calc(50% - 6px);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.ecotec-unit-switch button {
  background: transparent;
  color: #69696c;
  transition: color .2s ease;
  white-space: nowrap;
}
.ecotec-unit-switch button.is-active { color: #fdfdfd; }

/* 사양 탭 (제원) */
.tech-specs .tabs .btn.flex.flex-col { padding-bottom: 12px; }
.tech-specs .tabs .btn .text-sm { letter-spacing: .04em; color: #232324; font-weight: 700; }

.accordion-panel { max-height: 0; }
.accordion.is-open > .accordion-trigger .fa-chevron-down { transform: rotate(180deg); }
.accordion .table-row .table-cell { font-size: 15px; }
.accordion .table-row .table-cell:last-child { text-align: right; }

.toggle-expand-collapse-btn { white-space: nowrap; }

/* --- 22. 제품 상세: 다운로드 (기술 문서 우측 열) ------------------------- */
.tech-specs__panel ul li a { color: #232324; }
.tech-specs__panel ul li i { color: #25844E; }

/* --- 23. 제품 전체 보기(Product Range) 캐러셀 ---------------------------- */

/* 스와이프 영역은 overflow:hidden 이라 카드 그림자가 잘린다.
   안쪽에 패딩을 주고 같은 크기의 음수 마진으로 되돌려, 레이아웃은 그대로 둔 채
   그림자가 번질 자리만 확보한다. (JS 는 padding 을 뺀 실제 폭으로 계산한다.) */
.ecotec-range__viewport {
  overflow: hidden;
  /* 좌우 패딩만큼 폭을 늘려, 카드가 실제 콘텐츠 폭을 꽉 채우게 한다.
     (100% 로 두면 패딩 32px 만큼 오른쪽에 빈자리가 남는다.) */
  width: calc(100% + 32px);
  padding: 28px 16px;
  margin: -28px -16px;
}
.ecotec-range__track {
  display: flex;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* 슬라이드 폭.
   원본은 340/450px 고정이지만 그 값은 원본 컨테이너(≈1400px) 기준이라
   더 넓은 이 테마(최대 1920px)에서는 4번째 카드가 잘려 보인다.
   화면 폭에 맞춰 '한 줄에 몇 장'을 고정하는 방식으로 계산한다. */
.ecotec-range__slide {
  --gap: 24px;
  flex: 0 0 auto;
  width: 340px;               /* 모바일: 다음 카드가 살짝 보이는 원본 폭 */
  margin-right: var(--gap);
  height: auto;
}
.ecotec-range__slide:last-child { margin-right: 0; }

@media (min-width: 640px) {   /* 태블릿 2장 */
  .ecotec-range__slide { width: calc((100% - var(--gap)) / 2); }
}
@media (min-width: 1024px) {  /* 작은 PC 3장 */
  .ecotec-range__slide { width: calc((100% - var(--gap) * 2) / 3); }
}
@media (min-width: 1440px) {  /* PC 4장 */
  .ecotec-range__slide { width: calc((100% - var(--gap) * 3) / 4); }
}

.ecotec-range__slide > div { height: 100%; }

/* 카드 안쪽 이미지는 원본과 같이 비율 고정 + 왼쪽 정렬 */
.ecotec-range__slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: left center;
}
/* 이미지가 없는 제품(원본에서 지연 로딩되어 저장되지 않은 것)의 자리 */
.ecotec-range__noimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f4f4f5 0%, #e9e9eb 100%);
  border-radius: 8px;
}

.ecotec-range__nav { transition: opacity .2s ease; }
.ecotec-range.is-first .ecotec-range__nav--prev,
.ecotec-range.is-last  .ecotec-range__nav--next { opacity: .35; pointer-events: none; }

/* 페이지네이션은 main.css 의 원본 스타일(.swiper-custom-pagination — 310px 트랙,
   비활성 1px 회색 / 활성 2px 진한색)을 그대로 쓴다. 여기서는 클릭 영역만 넓힌다. */
.ecotec-range__pagination .swiper-custom-pagination-bullet {
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 0;
}
.ecotec-range__pagination .swiper-custom-pagination-bullet::before {
  content: '';
  position: absolute;
  inset: -12px 0;             /* 선은 2px 이라 그대로면 누르기 어렵다 */
}

/* 슬라이드가 한 화면에 다 들어가면 화살표/인디케이터를 감춘다.
   단, 자리는 남겨 두어야 그룹 사이 위아래 간격이 무너지지 않는다. */
.ecotec-range.is-single .ecotec-range__nav { visibility: hidden; }
.ecotec-range.is-single .ecotec-range__pagination { visibility: hidden; }

/* 카드 호버: 살짝 떠오르며 이미지가 아주 조금 확대된다.
   (main.css 에서 purge 된 shadow-card 를 대신하는 그림자이기도 하다) */
.ecotec-range__slide .group {
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.ecotec-range__slide .group:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(24,26,25,.24);
}
.ecotec-range__slide img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.ecotec-range__slide .group:hover img { transform: scale(1.04); }

/* --- 24. 제품군 히어로 타일 -------------------------------------------- */

/* 타일 안쪽 .container 는 폭만 잡고 좌우 여백이 없어서 제목/버튼이
   타일 왼쪽 끝에 붙는다. 카드와 같은 가로 패딩을 준다.
   .elementor .container 리셋(inc/elementor.php)보다 뒤에 오도록
   .elementor 를 함께 적어 우선순위를 높인다. */
.ecotec-hero-tiles .hero__container,
.elementor .ecotec-hero-tiles .hero__container { padding-left: 32px; padding-right: 32px; }

@media (max-width: 640px) {
  .ecotec-hero-tiles .hero__container,
  .elementor .ecotec-hero-tiles .hero__container { padding-left: 20px; padding-right: 20px; }
}

/* 타일이 하나뿐인 제품군(핸들링·컨베잉·분리 선별·퇴비화)에서도
   타일 크기가 다른 제품군과 같아야 한다.
   원본 마크업의 flex-grow 때문에 혼자 남으면 가로를 다 먹는다. */
@media (min-width: 1024px) {
  .ecotec-hero-tiles > div { flex-grow: 0; }
}

/* 타일 사진은 타일을 꽉 채운다.
   원본 마크업의 aspect-16/9 가 h-full 보다 먼저 먹어서(부모 picture 높이가 auto)
   타일 높이(예: lg 496px)보다 짧게 잘려 아래쪽이 빈 채로 보였다.
   picture 에 높이를 주고 이미지의 비율 고정을 풀어 cover 로 채운다. */
.ecotec-hero-tiles .hero > picture { height: 100%; }
.ecotec-hero-tiles .hero > picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* 타일 호버: 카드와 같은 결로 살짝 떠오르고 사진이 조금 확대된다. */
.ecotec-hero-tiles .hero {
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.ecotec-hero-tiles .hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(24,26,25,.26);
}
.ecotec-hero-tiles .hero picture img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.ecotec-hero-tiles .hero:hover picture img { transform: scale(1.05); }

/* --- 25. 스크롤 등장 애니메이션 ---------------------------------------- */

/* JS(initScrollReveal)가 화면에 들어온 항목에 .is-revealed 를 붙인다.
   JS 가 없거나 동작 최소화 설정이면 처음부터 보이게 둔다. */
[data-ecotec-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
[data-ecotec-reveal].is-revealed { opacity: 1; transform: none; }

/* ---- 페이지 전환 ---------------------------------------------------------
 * 링크 동작에는 손대지 않는다 (가로채면 이동이 막힐 수 있다).
 *   1) 지원 브라우저: 뷰 트랜지션으로 페이지끼리 부드럽게 넘어간다.
 *   2) 그 밖: 문서가 준비되면 본문이 부드럽게 나타난다.
 *
 * 위아래 움직임은 넣지 않는다. 스크롤 등장 애니메이션이 이미 아래에서
 * 올라오는 방식이라, 전환까지 같이 움직이면 어색하다. 전환은 밝기만 바꾼다.
 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: ecotecPageOut .2s ease both;
}
::view-transition-new(root) {
  animation: ecotecPageIn .3s ease both;
}

@keyframes ecotecPageOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes ecotecPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 뷰 트랜지션을 지원하지 않는 브라우저용 진입 효과 (역시 밝기만). */
.ecotec-page-in main {
  opacity: 0;
}
.ecotec-page-in.ecotec-ready main {
  opacity: 1;
  transition: opacity .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .ecotec-page-in main,
  .ecotec-page-in.ecotec-ready main { opacity: 1; transition: none; }
  [data-ecotec-reveal] { opacity: 1; transform: none; transition: none; }
  .ecotec-range__slide .group,
  .ecotec-range__slide img,
  .ecotec-hero-tiles .hero,
  .ecotec-hero-tiles .hero picture img { transition: none; }
  .ecotec-range__slide .group:hover,
  .ecotec-hero-tiles .hero:hover { transform: none; }
}

/* --- 26. 말단 제품군: 소개 카드 + 비교 목록 ----------------------------- */

/* 소개 카드 (원본 .rounded-lg.bg-system-light/75) */
.terex-content-block { line-height: 1.8; color: #47474a; }
.terex-content-block > div + div { margin-top: 1.25rem; }
.border-l-3 { border-left-width: 3px; border-left-style: solid; }
.border-brand-default { border-color: #25844E; }
.bg-system-light\/75 { background-color: rgba(253, 253, 253, .75); }

/* 비교 목록 카드 : 좌 240px 이미지 + 우 사양표 */
.ecotec-compare__card {
  background: #fdfdfd;
  border-radius: 16px;
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.ecotec-compare__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(24,26,25,.24);
}
.ecotec-compare__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.ecotec-compare__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.ecotec-compare__card:hover .ecotec-compare__media img { transform: scale(1.04); }

/* 사양표 — 라벨/값 두 칸, 줄마다 밑줄, 짝수 줄만 배경 */
.ecotec-compare__card .table { display: table; }
.ecotec-compare__card .table-row { display: table-row; }
.ecotec-compare__card .table-cell { display: table-cell; vertical-align: top; font-size: 15px; }
.ecotec-compare__card .table-cell:first-child { width: 42%; color: #69696c; }
.ecotec-compare__card .table-cell:last-child { color: #232324; font-weight: 500; }
.ecotec-compare__card .table-row:last-child .table-cell { border-bottom: 0; }
.bg-neutral-100-50 { background-color: rgba(239, 239, 240, .5); }
.border-gray { border-color: #dfdfe1; }

/* 2열 → 태블릿 이하 1열, 카드 안쪽도 1열 */
@media (max-width: 1023px) {
  .ecotec-compare__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ecotec-compare__card { grid-template-columns: 1fr; }
  .ecotec-compare__media img { max-width: 320px; margin: 0 auto; }
}

/* --- 27. 제품 상세: 관련 제품 캐러셀 ------------------------------------ */

/* 리스트 페이지 캐러셀을 그대로 쓰되 PC 2장 배치로 바꾼다. */
.ecotec-related .ecotec-range__slide { width: 100%; }

@media (min-width: 1024px) {
  .ecotec-related .ecotec-range__slide { width: calc((100% - var(--gap)) / 2); }
}

/* 카드가 세로로 서로 다른 높이를 갖지 않도록 */
.ecotec-related .ecotec-range__slide > a { height: 100%; }

/* 화살표는 원본대로 브랜드 셰브론 버튼 */
.ecotec-related .ecotec-range__nav {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- 28. 도입 사례(응용분야 상세) 블록 ---------------------------------- */

/* 영상 배너 : 가운데 정렬 (원본은 좌우 여백 칼럼으로 밀려 있었다) */
.ecotec-story-video__col { max-width: 1100px; margin-inline: auto; }

/* 배경 사진 위 가운데 재생 버튼 (원본 bg-hero-overlay-center) */
.ecotec-story-video { min-height: 320px; }
.ecotec-story-video picture,
.ecotec-story-video picture img { width: 100%; height: 100%; object-fit: cover; }
.ecotec-story-video .btn-transparent {
  border: 1px solid rgba(253,253,253,.6);
  color: #fdfdfd;
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ecotec-story-video .btn-transparent:hover {
  background: rgba(253,253,253,.14);
  border-color: #fdfdfd;
}
.ecotec-story-video .btn-transparent i { font-size: 22px; }

@media (min-width: 1024px) {
  .ecotec-story-video { min-height: 420px; }
}

/* 이미지 + 본문 2단 (원본 lg:flex-row-reverse).
   이미지는 원래 비율 그대로 두어, 글이 이미지보다 짧을 때
   섹션 높이가 이미지 높이가 되도록 한다 (잘리거나 늘어나지 않는다). */
.ecotec-story-split__media {
  display: flex;
  align-items: center;      /* 반대로 글이 더 길 때는 사진을 세로 가운데에 */
}
.ecotec-story-split__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1023px) {
  .ecotec-story-split__media { margin-bottom: 24px; border-radius: 8px; overflow: hidden; }
}

/* 사례 영상 모달 (theme.js 가 hidden/flex 클래스를 토글한다) */
.partial-modal .modal-content iframe { max-width: 1280px; border: 0; }

/* --- 29. 섹션 세로 리듬 (홈 제외 전 페이지 공통) ------------------------- */

/*
 * 페이지마다 간격이 달라지지 않도록 세로 간격은 여기 한곳에서만 정한다.
 *
 *   .ecotec-el-sec  엘리멘터 컨테이너 = 섹션 하나. 위아래 리듬을 갖는다.
 *   .ecotec-sec     한 컨테이너가 블록을 여러 개 낼 때(사례 본문, 제품군 캐러셀)의 각 블록.
 *   .ecotec-head    섹션 안 제목 줄.  .ecotec-block  제목 바로 아래 내용.
 */
:root {
  --ecotec-gap-section: 40px;   /* 섹션 위아래 → 섹션 사이 80px */
  --ecotec-gap-head: 24px;      /* 제목 → 바로 아래 내용 */
  --ecotec-gap-crumb: 8px;      /* 브레드크럼 아래 */
}

/*
 * 기본 간격이지 못 바꾸는 값이 아니다.
 * 엘리멘터 컨테이너는 여백을 --padding-* 변수로 받으므로 우리도 같은 변수에 넣는다.
 * 그래야 어떤 섹션의 여백을 편집기에서 직접 지정했을 때 그 값이 이긴다.
 * (엘리멘터가 내보내는 규칙이 이보다 구체적이라 자연스럽게 덮어쓴다)
 */
/*
 * 엘리멘터로 만든 섹션은 자기 여백을 문서 안에 값으로 갖는다
 * (migrate-section-spacing.php 가 넣었다). 그래야 편집기에서 보이는 대로 나오고
 * 섹션마다 자유롭게 바꿀 수 있다. 여기서 CSS 로 덮어쓰면 안 된다.
 *
 * 아래는 엘리멘터 컨테이너가 아닌 곳(검색 결과처럼 테마가 직접 그리는 화면)의 기본값이다.
 */
.ecotec-el-sec:not(.e-con) {
  padding-top: var(--ecotec-gap-section);
  padding-bottom: var(--ecotec-gap-section);
}

/* 한 컨테이너 안의 블록들: 첫 블록은 컨테이너 패딩을 쓰고, 이후만 사이 간격을 갖는다 */
.ecotec-el-sec .ecotec-sec { padding-top: 0; padding-bottom: 0; }
.ecotec-el-sec .ecotec-sec + .ecotec-sec { padding-top: calc(var(--ecotec-gap-section) * 2); }

/* 제목과 그 아래 내용 (같은 섹션 안. 사이 간격은 컨테이너 flex-gap 24px) */
.ecotec-head { margin-bottom: 0; }
.ecotec-head .section-heading,
.ecotec-head.section-heading { padding-bottom: 0; }
.ecotec-head .description { margin-bottom: 0; }
.ecotec-head + .ecotec-block { margin-top: var(--ecotec-gap-head); }

/* 브레드크럼: 헤더와의 간격을 아래 간격과 같게 맞춘다.
   (아래는 자기 패딩 8px + 다음 섹션 40px = 48px 이므로 위도 같은 값을 준다) */
.ecotec-el-sec--crumb {
  padding-top: calc(var(--ecotec-gap-crumb) + var(--ecotec-gap-section));
  padding-bottom: var(--ecotec-gap-crumb);
}
.ecotec-el-sec--crumb .breadcrumb { padding-top: 0; padding-bottom: 0; }

/* 모바일에서 브레드크럼 링크의 터치 영역을 넓힌다 */
@media (max-width: 767px) {
  .breadcrumb ol { row-gap: 4px; }
  .breadcrumb a,
  .breadcrumb span[aria-current] { display: inline-block; padding-block: 6px; }
}

/* 숏코드가 빈 값을 돌려준 컨테이너는 자리를 차지하지 않게 한다
   (제품군 템플릿 하나를 상위/말단 제품군이 함께 쓴다).

   주의: '숏코드 위젯을 가진' 컨테이너로 한정해야 한다.
   그 조건이 없으면 숏코드를 안 쓰는 문서(홈처럼 이미지·제목 위젯으로만 만든 페이지)의
   컨테이너까지 전부 숨겨져 페이지가 통째로 사라진다. */
main .elementor > .e-con:has(.elementor-widget-shortcode):not(:has(.elementor-shortcode:not(:empty))) {
  display: none;
}

/* 마지막 섹션과 푸터 사이.
   우리 섹션 체계(.ecotec-el-sec)를 쓰는 문서에만 준다.
   홈처럼 마지막 블록이 배경색 있는 밴드인 페이지는 푸터와 붙어야 한다. */
main .elementor:has(> .ecotec-el-sec) { padding-bottom: var(--ecotec-gap-section); }

/* 모바일에서는 리듬을 좁힌다 */
@media (max-width: 767px) {
  :root {
    --ecotec-gap-section: 20px;   /* 데스크톱 40px 의 절반 */
    --ecotec-gap-head: 16px;
  }
}

/* --- 30. 모바일 최적화 -------------------------------------------------- */

@media (max-width: 1023px) {
  /*
   * 원본 모바일에는 헤더 바가 없다.
   * 배경 없이 컬러 로고만 콘텐츠 위에 얹히고(스크롤과 함께 올라간다),
   * 검색·딜러·메뉴는 화면 아래 알약이 담당한다.
   */
  /* 헤더 바 자체를 없앤다. 모바일 UI 는 <body> 아래(푸터)에서 따로 출력한다.
     .ehf-header #masthead 규칙이 sticky 를 걸어 두므로 같은 선택자로 눌러야 한다. */
  .ehf-header #masthead,
  #masthead { display: none; }

  /* 컬러 로고 — 배경 없이 콘텐츠 위에 얹히고 스크롤과 함께 올라간다 (fixed 아님) */
  .ecotec-mobile-logo {
    display: block;
    position: absolute;
    top: 16px;
    left: 32px;
    width: 128px;
    z-index: 50;
  }
  .ecotec-mobile-logo img { width: 128px; height: auto; display: block; }
  .admin-bar .ecotec-mobile-logo { top: calc(16px + 46px); }

  /* 헤더가 없으므로 본문이 화면 맨 위에서 시작한다. 로고와 겹치지 않게 띄운다. */
  main .elementor > .e-con.ecotec-el-sec--crumb { padding-top: 88px; }
  .admin-bar main .elementor > .e-con.ecotec-el-sec--crumb { padding-top: calc(88px + 46px); }
}

@media (max-width: 1023px) {
  /* ---- 하단 알약 ---- */
  #mobileBottomNav {
    position: fixed;
    bottom: 24px;                     /* 원본 bottom-16 은 화면 중앙에 가깝게 떠 보인다 */
    transform: translateY(0);
    opacity: 1;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;             /* 알약 바깥의 빈 영역은 클릭을 막지 않는다 */
  }
  #mobileBottomNav.is-hidden {        /* 아래로 자연스럽게 내려간다 */
    transform: translateY(140%);
    opacity: 0;
  }
  .ecotec-bottom-pill { pointer-events: auto; }

  /* 아이콘 세 개의 크기를 하나로 맞추고 키운다 */
  .ecotec-bottom-pill i {
    font-size: 26px;
    line-height: 1;
    color: #232324;
  }
  .ecotec-bottom-pill a,
  .ecotec-bottom-pill button { color: #232324; }

  .admin-bar #mobileBottomNav { bottom: 24px; }
}

/* ---- 아래에서 올라오는 전체 화면 패널 (메뉴 / 검색) ---- */
.ecotec-panel {
  position: fixed;
  inset: 0;
  z-index: 100001;                    /* 워드프레스 관리자 바(99999)보다 위 */
  display: flex;
  flex-direction: column;
  background: #fdfdfd;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  visibility: hidden;
}
.ecotec-panel.is-open { transform: translateY(0); visibility: visible; }
/* 모바일 관리자 바는 position:absolute 라 스크롤과 함께 사라진다.
   따라서 패널은 화면을 다 덮고(top:0), z-index 로 관리자 바보다 앞에 온다. */
.admin-bar .ecotec-panel { top: 0; }

.ecotec-panel__head { z-index: 2; border-bottom: 1px solid #efeff0; }
.ecotec-panel__body { flex: 1 1 auto; padding-bottom: 120px; }

.ecotec-panel .overlay-nav-item { border-bottom: 1px solid #efeff0; list-style: none; }
.ecotec-panel .overlay-nav-item:last-child { border-bottom: 0; }
.ecotec-panel .mobile-nav-item { width: 100%; }
.ecotec-panel .mobile-nav-item i { font-size: 18px; color: #69696c; transition: transform .25s ease; }
.ecotec-panel .mobile-nav-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

.ecotec-panel .mobile-nav-sub { padding-left: 8px; padding-bottom: 8px; }
.ecotec-panel .mobile-nav-sub .overlay-nav-item { border-bottom: 0; }
.ecotec-panel .mobile-nav-item--sub { font-size: 1rem; font-weight: 500; padding: .625rem .5rem; }
.ecotec-panel .mobile-nav-item--grand { font-size: .9375rem; font-weight: 400; color: #69696c; padding: .5rem .5rem .5rem 1.25rem; }

/* 닫기 버튼 (패널이 열렸을 때만) */
.ecotec-panel-close { z-index: 100002; display: none; }
.ecotec-panel-close.is-open { display: flex; }
.admin-bar .ecotec-panel-close { bottom: 1rem; }
.ecotec-panel-close button { color: #232324; line-height: 1; }

@media (max-width: 767px) {
  /* 흰 카드 안쪽 여백을 조금 줄여 글 폭을 확보한다 */
  .terex-content-block { font-size: 15px; }
  .ecotec-head .title,
  .section-heading .title { font-size: clamp(24px, 7vw, 32px); }

  /* 하단 알약이 마지막 내용을 가리지 않도록 여유를 둔다 */
  main .elementor:has(> .ecotec-el-sec) { padding-bottom: 120px; }
}

/* --- 31. 모바일 로고 줄맞춤 · 푸터 정리 --------------------------------- */

@media (max-width: 1023px) {
  /* 로고 왼쪽 끝을 본문(브레드크럼·카드)과 같은 16px 에 맞춘다 */
  .ecotec-mobile-logo { left: 16px; }

  /* 로고와 브레드크럼 사이를 좁힌다 */
  main .elementor > .e-con.ecotec-el-sec--crumb { padding-top: 56px; }
  .admin-bar main .elementor > .e-con.ecotec-el-sec--crumb { padding-top: calc(56px + 46px); }
}

@media (max-width: 767px) {
  /* 푸터 로고 축소.
     선택자를 넓게 잡으면 홈 인트로 이미지 같은 다른 이미지 위젯까지 잡힌다. */
  .ecotec-el-footer-logo img { max-width: 180px; height: auto; }

  /* 약관 링크: 가로로 흐르되(줄바꿈 허용) 줄 사이 간격을 넉넉히 준다.
     엘리멘터의 'inline' 보기는 .elementor-inline-items 로 flex 를 걸므로 그걸 눌러야 한다. */
  .elementor-widget.ecotec-el-legal .elementor-icon-list-items.elementor-inline-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 20px;                 /* 세로 간격 */
    margin-inline: 0;
  }
  .elementor-widget.ecotec-el-legal .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
    margin: 0;
    padding-inline: 0;
  }

  /* 1단으로 바뀐 푸터 열은 모두 왼쪽 정렬로 맞춘다 */
  .ecotec-el-footer-cols > .e-con,
  .ecotec-el-footer-cols > .e-con > .e-con-inner { align-items: flex-start; text-align: left; }
  .ecotec-el-footer-cols .elementor-widget-heading,
  .ecotec-el-footer-cols .elementor-widget-button { text-align: left; }
  .ecotec-el-footer-cols .elementor-button-wrapper { text-align: left; }

  /* '가까운 딜러를 찾고 계신가요?' 는 가로(왼쪽) 정렬, 버튼은 가로 100% */
  .ecotec-el-dealer,
  .ecotec-el-dealer p { text-align: left; }
  .ecotec-el-dealer-btn .elementor-button-wrapper { display: block; }
  .ecotec-el-dealer-btn .elementor-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* SNS 는 왼쪽 정렬 (열 컨테이너가 flex-end 로 밀고 있다) */
  .ehf-footer .e-con:has(> .ecotec-el-social),
  footer .e-con:has(> .ecotec-el-social) { align-items: flex-start; }
  .ecotec-el-social { width: 100%; }
  .ecotec-el-social .elementor-icon-list-items { justify-content: flex-start; }
}

/* --- 32. 홈 히어로 카피 ------------------------------------------------- */

/*
 * 사진에 박혀 있던 글자를 진짜 텍스트로 옮겼다. 원본 배치를 그대로 따른다.
 *   HIGH CAPACITY  화면 위쪽, 가장 크게. 아래로 갈수록 흐려져 지형에 묻히는 느낌.
 *   SCREENING      바로 아래, 위 문구의 절반 크기로 또렷하게.
 *   TXS 350 …      화면 맨 아래, 자간 넓게 흐리게.
 * 크기는 모두 화면 폭에 비례(vw)하므로 어느 폭에서도 비율이 유지된다.
 */
.ecotec-el-hero {
  position: relative;
  /* 고정 헤더·관리자 바를 뺀 만큼만 차지해 화면에 정확히 들어맞게 한다
     (--ecotec-header-h 는 theme.js 의 setHeaderHeight 가 넣는다) */
  min-height: calc(100vh - var(--ecotec-header-h, 0px));
  min-height: calc(100svh - var(--ecotec-header-h, 0px));
}

.ecotec-el-hero > .e-con-inner,
.ecotec-el-hero > .elementor-element { position: relative; z-index: 1; }

/* 마우스를 따라 배경만 살짝 움직인다 (theme.js 의 initHeroParallax).
   배경을 조금 키워 두고 그 여유분 안에서만 움직여 가장자리가 비지 않게 한다. */
.elementor .ecotec-el-hero.has-parallax,
.ecotec-el-hero.has-parallax {
  background-image: none !important;   /* 배경은 아래 ::before 가 그린다 */
  overflow: hidden;
}
/*
 * 요소 상자는 히어로와 정확히 같게(inset:0) 두고, 그림만 조금 키워(scale)
 * 그 여유분 안에서 움직인다. 상자가 커지지 않으므로 어떤 경우에도
 * 화면 밖으로 밀려 가로 스크롤이 생기거나 가장자리가 비지 않는다.
 */
.ecotec-el-hero.has-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ecotec-hero-bg);
  background-size: cover;
  background-position: center center;
  transform: scale(1.06) translate3d(var(--ecotec-parallax-x, 0px), var(--ecotec-parallax-y, 0px), 0);
  will-change: transform;
  z-index: 0;
}

/* 카피는 히어로 전체를 덮고, 그 안에서 위/아래로 나뉜다.
   (엘리멘터가 위젯에 position:relative 를 걸어 두므로 선택자를 더 구체적으로 쓴다) */
.ecotec-el-hero .elementor-widget.ecotec-el-hero-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}
.ecotec-el-hero-copy > .elementor-widget-container { height: 100%; }

.ecotec-hero-copy {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  height: 100%;
  padding: clamp(40px, 9vh, 120px) 16px clamp(48px, 11vh, 150px);
  box-sizing: border-box;
  font-family: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif;
  line-height: .92;
  text-align: center;
}

.ecotec-hero-copy > span { display: block; }

/* 배경 사진이 다 읽히기 전에는 글자를 내보내지 않는다.
   (theme.js 의 initHeroReveal 이 로딩이 끝나면 .is-ready 를 붙인다) */
.ecotec-hero-copy > span { opacity: 0; }
.ecotec-hero-copy.is-ready > span { opacity: 1; }

/* 1) HIGH CAPACITY — 가장 크고, 아래쪽이 흐려진다 */
.ecotec-hero-copy__lead {
  font-size: clamp(30px, 7.6vw, 168px);
  font-weight: 800;
  letter-spacing: -.012em;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f9f6 38%,
    rgba(255, 255, 255, .42) 74%,
    rgba(255, 255, 255, .14) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ecotec-hero-copy.is-ready .ecotec-hero-copy__lead {
  animation: ecotecHeroIn .9s cubic-bezier(.22,.61,.36,1) .05s both;
}

/* 2) SCREENING — 위 문구의 절반 크기, 또렷한 흰색 */
.ecotec-hero-copy__main {
  /* 위 문구에 살짝 겹쳐 올라간다 */
  margin-top: clamp(-46px, -3.4vw, -12px);
  font-size: clamp(18px, 3.9vw, 86px);
  font-weight: 800;
  letter-spacing: -.005em;
  color: #ffffff;
  /* 위쪽으로 크고 넓게 퍼지는 부드러운 그림자 (겹친 글자와 분리해 준다) */
  text-shadow:
    0 -10px 30px rgba(16, 26, 20, .45),
    0 -24px 70px rgba(16, 26, 20, .38),
    0 -44px 120px rgba(16, 26, 20, .3);
}
.ecotec-hero-copy.is-ready .ecotec-hero-copy__main {
  animation: ecotecHeroIn .9s cubic-bezier(.22,.61,.36,1) .2s both;
}

/* 3) TXS 350 STARSCREEN — 맨 아래, 자간 넓게 */
.ecotec-hero-copy__sub {
  align-self: end;
  font-size: clamp(13px, 1.75vw, 38px);
  font-weight: 600;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.ecotec-hero-copy.is-ready .ecotec-hero-copy__sub {
  animation: ecotecHeroIn .9s cubic-bezier(.22,.61,.36,1) .38s both;
}

@keyframes ecotecHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 좁은 화면에서는 하단 알약과 겹치지 않게 위로 올린다 */
@media (max-width: 1023px) {
  .ecotec-hero-copy { padding-bottom: 140px; }
}

/* 모바일: 'HIGH' 다음에 줄을 바꾸고 글자를 크게. 두 문구는 겹치지 않는다. */
@media (max-width: 767px) {
  .ecotec-hero-copy__lead {
    font-size: clamp(46px, 15vw, 82px);
    line-height: .96;
    /* 'HIGH CAPACITY' 의 공백에서 줄바꿈 */
    white-space: pre-line;
    /* 두 줄이 되면 그라데이션이 통째로 걸려 윗줄만 하얗고 아랫줄이 흐려진다.
       한 줄 높이만큼 잘라 반복시켜 줄마다 같은 그라데이션이 들어가게 한다. */
    background-size: 100% .96em;
    background-repeat: repeat-y;
  }
  .ecotec-hero-copy__main {
    margin-top: clamp(6px, 2vw, 14px);   /* 겹치지 않게 */
    font-size: clamp(30px, 10vw, 56px);
    text-shadow: 0 -6px 22px rgba(16, 26, 20, .4);
  }
}

@media (max-width: 640px) {
  .ecotec-hero-copy__sub { letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .ecotec-hero-copy > span,
  .ecotec-hero-copy.is-ready > span { animation: none; opacity: 1; transform: none; }
}

/* --- 33. 언어 선택 드롭다운 -------------------------------------------- */

.ecotec-lang-dropdown ul { margin: 0; padding: 0; list-style: none; }

.ecotec-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
  color: #232324;
  transition: background-color .2s ease;
}
.ecotec-lang-item img {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex: none;
  display: block;
}
a.ecotec-lang-item:hover { background: #efeff0; }
.ecotec-lang-item.is-current { background: #efeff0; font-weight: 700; }

/* --- 34. 헤더 서브메뉴 -------------------------------------------------- */
/*
 * '제품' 메가메뉴와 그 옆 서브메뉴(응용분야·지원·회사소개)는 생김새가 달라
 * 규칙을 절대 공유하지 않는다. 아래 두 블록을 각각 따로 고칠 것.
 *   - 34-A : .main-nav__dropdown-content--mega           (제품, 가로 전체)
 *   - 34-B : .main-nav-container__dropdown-content--compact (그 외, 떠 있는 카드)
 */

/* --- 34-A. 제품 메가메뉴 ------------------------------------------------ */

/* 배경 띠는 화면 가로를 꽉 채우고, 헤더에 붙으므로 라운드를 주지 않는다. */
.main-nav__dropdown-content--mega > .container__dropdown-content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 32px 0;          /* 위아래 동일 */
  border-radius: 0;
}

/* 안쪽 내용만 본문과 같은 좌우 여백을 갖는다. */
.ecotec-mega__inner {
  width: min(100%, 1920px);
  margin-inline: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 카테고리 구분 (제품 메가메뉴에만 있다) */
.main-nav__dropdown-content--mega nav > ul > .nav-item {
  border: 1px solid #e3e3e5;
  border-radius: 16px;
  padding: 12px;
  transition: border-color .2s ease;
}
.main-nav__dropdown-content--mega nav > ul > .nav-item:hover {
  border-color: #c8c8cc;
}

/* 카테고리 제목 줄 */
.main-nav__dropdown-content--mega nav > ul > .nav-item > .nav-item__link {
  padding: 8px 8px 12px;
  border-bottom: 1px solid #e3e3e5;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-weight: 700;
}

/* 하위 메뉴가 없는 카테고리는 구분선을 두지 않는다 (나눌 것이 없다) */
.main-nav__dropdown-content--mega nav > ul > .nav-item:not(:has(> ul)) > .nav-item__link {
  border-bottom: 0;
  padding-bottom: 8px;
}
.main-nav__dropdown-content--mega nav > ul > .nav-item > .nav-item__link:hover {
  background: transparent;
  box-shadow: none;
}

/* 하위 항목 */
.main-nav__dropdown-content--mega nav > ul > .nav-item > ul { margin-top: 8px; }
.main-nav__dropdown-content--mega nav > ul > .nav-item > ul .nav-item__link {
  margin-bottom: 2px;
  border-radius: 8px;
}
.main-nav__dropdown-content--mega nav > ul > .nav-item > ul .nav-item__link:hover {
  background: #f4f4f5;
}

/* --- 34-B. 그 외 서브메뉴 (응용분야 · 지원 · 회사소개) ------------------- */

.main-nav-container__dropdown-content--compact {
  /* 헤더와 띄우는 간격은 theme.js 의 place() 가 잡는다 (GAP).
     이 요소의 top 은 JS 가 !important 로 넣으므로 CSS 여백으로는 못 옮긴다. */
  padding: 12px 16px;       /* 위아래 동일 */
  border-radius: 12px;
}

/* 마지막 항목의 아래 여백까지 더해지면 위아래가 어긋난다. */
.main-nav-container__dropdown-content--compact .nav-item:last-child > .nav-item__link {
  margin-bottom: 0;
}

/* --- 35. 홈 제품 라인업 카드 링크 -------------------------------------- */

/* 카드 전체가 눌리도록 링크를 덮어 씌운다 (내용 위에 얹히되 글은 그대로 읽힌다) */
.ecotec-el-card { position: relative; }
.ecotec-el-card__link-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
}
.ecotec-el-card__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 36. 문의하기 페이지 (원본 Contact Us 재현) ------------------------ */
/* 두 열이 같은 높이가 되도록 (딜러 카드가 폼 높이만큼 늘어난다) */
.ecotec-el-contact > .e-con-inner > .e-con {
  align-self: stretch;
}

/* 숏코드 출력이 열 높이를 그대로 물려받게 한다 (카드가 폼 높이만큼 늘어난다) */
.ecotec-el-contact .elementor-widget-shortcode,
.ecotec-el-contact .elementor-widget-shortcode > .elementor-widget-container,
.ecotec-el-contact .elementor-shortcode {
  height: 100%;
}
.ecotec-el-contact .elementor-shortcode {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ecotec-el-contact .elementor-shortcode > .section-heading {
  flex: 0 0 auto;
}
.ecotec-el-contact .elementor-shortcode > .group,
.ecotec-el-contact .elementor-shortcode > .ecotec-form {
  flex: 1 1 auto;
}

/* 딜러 안내 카드 — 카드 전체가 링크라 본문 밑줄을 지운다 */
.ecotec-contact-dealer a,
.ecotec-contact-dealer a:hover,
.ecotec-el-contact a:hover {
  text-decoration: none;
}
.ecotec-el-contact .section-heading {
  margin-bottom: 0;
}

/* ---- 문의 폼: 원본과 같은 밑줄형 입력 ---- */
.ecotec-form {
  position: relative;
  font-size: 16px;
  color: #232324;
}
.ecotec-form__row {
  padding-bottom: 18px;
}
.ecotec-form__label {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #69696c;
  padding-bottom: 8px;
}
.ecotec-form__req {
  color: #f00;
  font-weight: 700;
}
.ecotec-form input[type="text"],
.ecotec-form input[type="email"],
.ecotec-form input[type="tel"],
.ecotec-form select,
.ecotec-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 0.8px solid #808080;
  border-radius: 0;
  background: transparent;
  padding: 0 0 8px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: #232324;
  transition: border-color 0.125s ease;
}
.ecotec-form input[type="text"],
.ecotec-form input[type="email"],
.ecotec-form input[type="tel"],
.ecotec-form select {
  height: 32px;
}
.ecotec-form textarea {
  resize: vertical;
  min-height: 48px;
  max-height: 360px;
}
.ecotec-form input:focus,
.ecotec-form select:focus,
.ecotec-form textarea:focus {
  outline: none;
  border-bottom-color: #25844e;
}

.ecotec-form__notice {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
}
.ecotec-form__notice--ok {
  background: #e8f4ec;
  color: #1b6b3e;
}
.ecotec-form__notice--err {
  background: #fdecec;
  color: #b3261e;
}

/* 원본과 같은 순서: 제목 → 안내문 → 체크박스 */
.ecotec-form__consent {
  padding-top: 6px;
}
.ecotec-form__consent-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
}
.ecotec-form__consent-body {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.ecotec-form__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  cursor: pointer;
}
.ecotec-form__check input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #25844e;
  flex: 0 0 auto;
}

/* 봇 유인 칸 — 사람에게는 보이지 않는다 */
.ecotec-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 원본의 SUBMIT 이미지 버튼과 같은 모양 */
.ecotec-form__submit {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.ecotec-form__button {
  width: 150px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: #25844e;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.125s ease;
}
.ecotec-form__button:hover {
  background: #1b6b3e;
}

/* ---- 사무소 안내 ---- */
/* 주소 카드가 남는 높이를 갖고, 지도는 원본과 같은 350px 를 유지한다 */
.ecotec-office > div:first-child {
  flex: 1 1 auto;
}
.ecotec-office__map {
  display: block;
  flex: 0 0 350px;
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: 16px;
}

@media (max-width: 640px) {
  .ecotec-form__button {
    width: 100%;
  }
}

/* --- 36-B. 뉴스레터 신청 페이지 --------------------------------------- */
/* 문의하기와 같은 뼈대를 쓰므로 여기서는 왼쪽 안내 글만 손본다 */
.ecotec-el-newsletter .elementor-shortcode > .ecotec-newsletter-intro {
  flex: 1 1 auto;
}
.ecotec-newsletter-intro p {
  margin: 0 0 1rem;
}
.ecotec-newsletter-intro p:last-child {
  margin-bottom: 0;
}
.ecotec-newsletter-intro a {
  text-decoration: underline;
}

/* --- 36-C. 약관·정책 페이지 ------------------------------------------- */
/* 긴 글이라 읽기 좋게 줄 간격과 소제목 간격만 잡아 준다 */
.ecotec-el-sec--legal .elementor-widget-text-editor {
  color: #232324;
  font-size: 16px;
  line-height: 1.8;
}
.ecotec-el-sec--legal .elementor-widget-text-editor h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.ecotec-el-sec--legal .elementor-widget-text-editor h4 {
  margin: 1.75rem 0 0.5rem;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.ecotec-el-sec--legal .elementor-widget-text-editor > *:first-child,
.ecotec-el-sec--legal .elementor-widget-text-editor h3:first-child,
.ecotec-el-sec--legal .elementor-widget-text-editor h4:first-child {
  margin-top: 0;
}
.ecotec-el-sec--legal .elementor-widget-text-editor p {
  margin: 0 0 1rem;
}
.ecotec-el-sec--legal .elementor-widget-text-editor ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  list-style: disc;
}
.ecotec-el-sec--legal .elementor-widget-text-editor li {
  margin-bottom: 0.5rem;
}
.ecotec-el-sec--legal .elementor-widget-text-editor a {
  color: #25844E;
  text-decoration: underline;
}

/* ---- 사이트맵 (원본과 같이 푸터와 똑같은 5단) ---- */
.ecotec-sitemap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 24px;
}
.ecotec-sitemap__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.ecotec-sitemap__title a {
  color: #232324;
}
.ecotec-sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ecotec-sitemap__list > li {
  margin-bottom: 12px;
}
.ecotec-sitemap a {
  color: #454545;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}
.ecotec-sitemap a:hover {
  text-decoration: underline;
}

@media (max-width: 1039px) {
  .ecotec-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ecotec-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ---- 수신 설정 폼 ---- */
.ecotec-prefs__lead {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #454545;
}
.ecotec-prefs__title {
  margin: 32px 0 8px;
  font-size: 22px;
  font-weight: 700;
}
.ecotec-prefs__group {
  margin: 0 0 20px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #e2e2e2;
}
.ecotec-prefs__group-title {
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: #232324;
}
.ecotec-prefs__group-desc {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #646464;
}
.ecotec-prefs__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
/* 이 폼은 라디오·체크박스를 쓰므로 밑줄형 입력 규칙을 받지 않게 한다 */
.ecotec-prefs input[type="radio"],
.ecotec-prefs input[type="checkbox"] {
  width: auto;
  border: 0;
  padding: 0;
}

/* '모든 소식 수신을 해지합니다' 를 고르면 위 묶음들은 잠기고 흐려진다 */
.ecotec-prefs__group.is-off {
  opacity: 0.45;
}
.ecotec-prefs__group.is-off .ecotec-form__check {
  cursor: not-allowed;
}

/* --- 37. 도입 사례 (엘리멘터 위젯 판) ---------------------------------- */
/*
 * 사례 본문은 숏코드가 아니라 엘리멘터 위젯으로 그린다.
 * 블록 하나 = 컨테이너 하나라서 위아래 간격을 엘리멘터에서 조절할 수 있다.
 * 여기서는 예전 숏코드가 내던 '생김새'만 그대로 옮겨 놓는다.
 */

/* 히어로 배너 — 원본과 같은 높이로 잘라 넣는다 (h-hero 계열 값) */
.ecotec-story-hero img {
  display: block;
  width: 100%;
  height: 642px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}
@media (min-width: 640px)  { .ecotec-story-hero img { height: 260px; } }
@media (min-width: 768px)  { .ecotec-story-hero img { height: 335px; } }
@media (min-width: 1024px) { .ecotec-story-hero img { height: 496px; } }

/* 영상 배너 — 원본은 16:9 영상틀이 아니라 히어로와 같은 높이의 띠였다.
   엘리멘터 기본값(16:9)이면 화면 절반을 넘게 차지해 배치가 어긋난다. */
/* 영상은 16:9 비율 그대로 두고 가운데에 놓는다 (가로로 늘리지 않는다) */
.ecotec-story-video-el .elementor-wrapper {
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.ecotec-story-video-el .elementor-custom-embed-image-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 글 카드 — 왼쪽 초록 선 + 연한 배경.
   엘리멘터 4.x 는 위젯 안에 래퍼(.elementor-widget-container)를 만들지 않아
   문단이 위젯 바로 밑에 온다. 그래서 초록 선은 가상 요소로 그린다.
   (원본: 카드 안쪽 여백 24px → 초록 선 3px → 글까지 다시 24px) */
.ecotec-story-text {
  position: relative;
  padding: 24px 24px 24px 51px;
  border-radius: 16px;
  background: rgba(253, 253, 253, .75);
}
.ecotec-story-text::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: #25844E;
}
.ecotec-story-text p {
  margin: 0 0 1.25rem;
  line-height: 1.8;
  color: #47474a;
}
.ecotec-story-text p:last-child { margin-bottom: 0; }
.ecotec-story-text h4 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #232324;
}
.ecotec-story-text h4:not(:first-child) { margin-top: 1.5rem; }

/* 사진 + 글 2단 — 두 열의 높이를 같게 맞춘다 */
.ecotec-story-split > .e-con-inner > .e-con { align-self: stretch; }
.ecotec-story-media,
.ecotec-story-media .elementor-widget-container { height: 100%; }
.ecotec-story-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}
/* 글 카드도 열 높이를 채운다 */
.ecotec-story-split .ecotec-story-text { height: 100%; box-sizing: border-box; }

@media (max-width: 1023px) {
  .ecotec-story-split > .e-con-inner { flex-direction: column !important; }
  .ecotec-story-media img { margin-bottom: 8px; }
}

/* --- 38. 핫스팟 설명 상자: 모바일 가로 넘침 방지 --------------------------
 * 설명 상자가 312px 고정이라 좁은 화면에서는 오른쪽 핫스팟의 상자가
 * 화면 밖으로 나가 페이지에 가로 스크롤이 생겼다.
 * 화면 안에 들어오도록 폭을 제한한다. */
@media (max-width: 767px) {
  .ecotec-popover {
    max-width: min(312px, calc(100vw - 32px));
    width: max-content;
  }
  /* 상자가 화면 밖으로 밀리지 않도록 핫스팟 영역 안에서만 그린다 */
  .ecotec-hotspots { overflow: hidden; }
}