/* =========================================================
   ST ENGINEERING Co., Ltd. — Static Website
   위코(WHICO) 사이트 구조 기반 / 브랜드: 에스티이엔지
   컬러/로고 등 브랜드 요소만 여기서 교체하세요.
   ========================================================= */

:root {
  /* --- Brand Colors (로고 기준 / 이 값만 바꾸면 전체 반영) --- */
  --brand-primary: #2461C0;      /* ST 로고 블루 */
  --brand-primary-dark: #1B4C97; /* 호버/강조 */
  --brand-accent: #F39200;       /* CTA·포인트 (오렌지) */
  --brand-ink: #1A1D21;          /* 헤딩/본문 진한 텍스트 */
  --brand-gray: #5B6068;         /* 보조 텍스트 */
  --brand-line: #E4E7EC;         /* 구분선 */
  --brand-bg: #FFFFFF;
  --brand-bg-soft: #F5F7FA;      /* 섹션 배경 */
  --brand-dark: #12161C;         /* 다크 섹션(푸터 등) */

  /* --- Layout --- */
  --container: 1200px;
  --header-h: 84px;
  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(18, 22, 28, .06);
  --shadow-md: 0 12px 34px rgba(18, 22, 28, .12);

  /* --- Type --- */
  --font-base: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-en: "Poppins", "Montserrat", var(--font-base);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--brand-ink);
  background: var(--brand-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.skip-nav {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 2000;
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  transition: top .2s ease;
}
.skip-nav:focus { top: 8px; }

.section { padding: 120px 0; }              /* 여백 확대 — 미니멀·엘레강트 연출 */
.section--soft { background: var(--brand-bg-soft); }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 64px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--brand-primary);
  margin-bottom: 18px;
}
.section-title {
  font-size: clamp(29px, 4vw, 42px);
  font-weight: 700;                          /* 800 → 700: 덜 무겁고 세련되게 */
  line-height: 1.22;
  margin: 0 0 18px;
  letter-spacing: -.025em;
  word-break: keep-all;                      /* 한글 어절 단위 줄바꿈 */
}
.section-desc { color: var(--brand-gray); font-size: 17px; line-height: 1.75; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn--primary { background: var(--brand-accent); color: #fff; }
.btn--primary:hover { background: #d97f00; transform: translateY(-2px); }
.btn--ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand-ink); }
.btn--outline { border: 1.5px solid var(--brand-primary); color: var(--brand-primary); }
.btn--outline:hover { background: var(--brand-primary); color: #fff; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================
   Header / GNB
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(255, 255, 255, .0);
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.header.is-scrolled,
.header.is-solid {
  background: #fff;
  box-shadow: var(--shadow-sm);
  height: 72px;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 34px; width: auto; }
/* 로고 이미지 (images/logo.png). 헤더 높이에 맞춰 표시 */
.logo__img { height: 38px; width: auto; display: block; transition: height .3s ease, filter .3s ease; }
.header.is-scrolled .logo__img,
.header.is-solid .logo__img { height: 32px; }   /* 스크롤/서브페이지에선 살짝 작게 */
/* 히어로 위(어두운 배경)에선 로고를 흰색으로 자동 처리 */
.header:not(.is-scrolled):not(.is-solid) .logo__img { filter: brightness(0) invert(1); }
.logo__text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--brand-ink);
}
.logo__text b { color: var(--brand-primary); }
/* 히어로 위 투명 헤더일 때 로고 텍스트 흰색 처리 */
.header:not(.is-scrolled):not(.is-solid) .logo__text { color: #fff; }
.header:not(.is-scrolled):not(.is-solid) .logo__text b { color: #fff; }

.gnb { display: flex; align-items: center; }
/* 메뉴 항목 = 라운드 사각형(칩). 인라인 ul gap 이 항목 간격을 담당 */
.gnb a {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 10px;          /* 라운드 사각형 */
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: .01em;
  color: var(--brand-ink);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
}
/* 기본(솔리드/스크롤 헤더): 은은한 호버 칩 */
.gnb a:hover { background: rgba(36, 97, 192, .09); color: var(--brand-primary); }

/* 히어로 위 투명 헤더: 평소엔 흰 글자만, 라운드 칩은 호버 시에만 표시 */
.header:not(.is-scrolled):not(.is-solid) .gnb a {
  color: #fff;
  text-shadow: 0 1px 8px rgba(10, 14, 20, .55);
}
.header:not(.is-scrolled):not(.is-solid) .gnb a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.header__util { display: flex; align-items: center; gap: 14px; }
.lang-btn {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--brand-line);
  color: var(--brand-ink);
}
.header:not(.is-scrolled):not(.is-solid) .lang-btn {
  color: #fff; border-color: rgba(255,255,255,.5);
}
.lang-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.hamburger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--brand-ink);
  transition: all .3s ease;
}
.header:not(.is-scrolled):not(.is-solid) .hamburger span { background: #fff; }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(18, 22, 28, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0;
  width: min(340px, 82vw); height: 100%;
  background: #fff;
  padding: 28px 26px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__close { position: absolute; top: 20px; right: 20px; font-size: 30px; color: var(--brand-gray); line-height: 1; }
.mobile-nav__group { border-bottom: 1px solid var(--brand-line); padding: 6px 0; }
.mobile-nav__group > a { display: block; padding: 16px 6px; font-weight: 700; font-size: 18px; }
.mobile-nav__sub a { display: block; padding: 8px 18px; color: var(--brand-gray); font-size: 15px; }
.mobile-nav__sub a:hover { color: var(--brand-primary); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease, transform 6s ease;
  transform: scale(1.06);
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  /* 화면 전체를 균일하게 덮지 않고, 글자가 놓이는 자리만 타원형으로 눌러준다.
     같은 평균 농도로도 가독성은 올라가고 이미지(하늘·숲)는 원본 밝기를 유지 → '청정' 인상 유지.
     톤은 검정 대신 푸른빛 잉크(#0C1622)를 써서 하늘/숲과 이질감이 없게 함. */
  background:
    /* 1) 슬로건·서브카피 국소 스크림 (실측 글자 위치 기준으로 중심·반경 산정) */
    radial-gradient(ellipse 50% 50% at 32% 44%,
      rgba(12,22,34,.72) 0%, rgba(12,22,34,.55) 50%, rgba(12,22,34,0) 100%),
    /* 2) 상단 — 흰색 GNB 가독성 (헤더 높이만 짧고 얕게) */
    linear-gradient(180deg, rgba(12,22,34,.38) 0%, rgba(12,22,34,0) 12%),
    /* 3) 하단 — 슬라이드 인디케이터 / SCROLL */
    linear-gradient(0deg, rgba(12,22,34,.14) 0%, rgba(12,22,34,0) 11%);
}
@media (max-width: 900px) {
  /* 모바일은 텍스트가 화면 폭을 채우므로 가로로 넓고 세로로 납작한 스크림으로 교체.
     상단 하늘 / 하단 풍경은 그대로 열어둔다. */
  .hero__slide::after {
    background:
      radial-gradient(ellipse 105% 42% at 50% 42%,
        rgba(12,22,34,.62) 0%, rgba(12,22,34,.51) 60%, rgba(12,22,34,0) 100%),
      linear-gradient(180deg, rgba(12,22,34,.34) 0%, rgba(12,22,34,0) 10%),
      linear-gradient(0deg, rgba(12,22,34,.16) 0%, rgba(12,22,34,0) 10%);
  }
}
/* 이미지 자체를 살짝 맑게 — 채도/명도를 소폭 올려 '깨끗한 대기' 인상 강화 */
.hero__slide { filter: saturate(1.06) brightness(1.02); }
/* 배경 이미지 (images/ 폴더에 파일만 넣으면 자동 반영)
   - 첫 번째 layer(url)가 없으면(파일 미존재) 두 번째 layer(그라데이션)가 대신 표시됩니다.
   - 권장: 가로형 JPG, 1920px 이상, 각 파일명 그대로 저장 */
.hero__slide.ph1 { background-image: url("../images/hero-1.jpg?v=1"), linear-gradient(135deg, #16233b, #24406e); }
.hero__slide.ph2 { background-image: url("../images/hero-2.jpg?v=1"), linear-gradient(135deg, #1a1d24, #2c3b52); }
.hero__slide.ph3 { background-image: url("../images/hero-3.jpg?v=1"), linear-gradient(135deg, #12305c, #1f4f8f); }

.hero__inner { position: relative; z-index: 2; max-width: 960px; }
.hero__tag {
  font-family: var(--font-en);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  /* 오렌지 글자는 밝은 하늘 위에서 대비가 확보되지 않음(측정값 1.9).
     글자는 흰색으로 두고 브랜드 액센트는 앞쪽 짧은 바로 표현한다. */
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  text-shadow: 0 1px 10px rgba(8, 16, 26, .55);
}
.hero__tag::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--brand-accent);
  flex: none;
}
.hero__title {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  word-break: keep-all;          /* 한글이 어절 중간에서 잘리지 않도록 */
  text-wrap: balance;            /* 지원 브라우저에서 줄 길이 균형 */
  /* 오버레이를 옅게 만든 만큼 글자 자체의 그림자로 가독성 보강
     (좁은 그림자=윤곽 선명 / 넓은 그림자=배경과 분리) */
  text-shadow: 0 1px 3px rgba(8, 16, 26, .38), 0 4px 28px rgba(8, 16, 26, .5);
}
.hero__sub {
  font-size: clamp(17px, 2.4vw, 21px);
  color: rgba(255,255,255,.94);
  margin: 0 0 40px;
  max-width: 660px;
  word-break: keep-all;
  text-shadow: 0 1px 3px rgba(8, 16, 26, .35), 0 3px 20px rgba(8, 16, 26, .45);
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__dots {
  position: absolute; left: 24px; bottom: 40px; z-index: 3;
  display: flex; gap: 12px;
}
.hero__dots button {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.35);
  transition: background .3s ease;
}
.hero__dots button.is-active { background: var(--brand-accent); }
.hero__scroll {
  position: absolute; right: 32px; bottom: 40px; z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .2em;
  color: rgba(255,255,255,.7);
}

/* =========================================================
   Product / 사업소개 그리드
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-card__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
  opacity: .9;
}
.product-card:hover .product-card__bg { transform: scale(1.08); }
/* 사업소개 카드 배경 (images/ 에 product-N.jpg 넣으면 자동 반영, 없으면 그라데이션) */
.pc-bg-1 { background-image: url("../images/product-1.jpg?v=1"), linear-gradient(160deg,#243b5e,#0f1a2c); }
.pc-bg-2 { background-image: url("../images/product-2.jpg?v=1"), linear-gradient(160deg,#2b3a4d,#12181f); }
.pc-bg-3 { background-image: url("../images/product-3.jpg?v=1"), linear-gradient(160deg,#1c4a7a,#0d2947); }
.pc-bg-4 { background-image: url("../images/product-4.jpg?v=1"), linear-gradient(160deg,#33475f,#161d26); }
.pc-bg-5 { background-image: url("../images/product-5.jpg?v=1"), linear-gradient(160deg,#204b6e,#0e2236); }
.pc-bg-6 { background-image: url("../images/product-6.jpg?v=1"), linear-gradient(160deg,#2a3f57,#131a24); }
.product-card::before {
  content:""; position:absolute; inset:0;
  /* 상단은 더 투명하게, 하단만 텍스트용으로 어둡게 */
  background: linear-gradient(180deg, transparent 42%, rgba(10,14,20,.72) 100%);
  z-index:1;
}
.product-card__body { position: relative; z-index: 2; padding: 28px; width: 100%; }
.product-card__num {
  font-family: var(--font-en); font-size: 13px; font-weight: 600;
  color: var(--brand-accent); letter-spacing: .1em; margin-bottom: 10px;
}
.product-card__title { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.product-card__en {
  font-family: var(--font-en); font-size: 13px;
  color: rgba(255,255,255,.7); letter-spacing: .03em;
}
.product-card__more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; opacity: 0;
  transform: translateY(8px); transition: all .3s ease;
}
.product-card:hover .product-card__more { opacity: 1; transform: translateY(0); }

/* =========================================================
   Stats / 수치 강조
   ========================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 20px; }
.stat__num {
  font-family: var(--font-en);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800; color: var(--brand-primary);
  line-height: 1; letter-spacing: -.02em;
}
.stat__num span { font-size: .55em; }
.stat__label { margin-top: 12px; color: var(--brand-gray); font-weight: 500; }

/* =========================================================
   Portfolio / Slogan
   ========================================================= */
.portfolio { background: var(--brand-dark); color: #fff; }
.slogan {
  font-family: var(--font-en);
  font-size: clamp(30px, 5.5vw, 62px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 1000px; margin: 0 auto 60px; text-align: center;
}
.slogan b { color: var(--brand-accent); }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.portfolio-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background-size: cover; background-position: center;
}
/* 포트폴리오 배경 (images/ 에 portfolio-N.jpg 넣으면 자동 반영, 없으면 그라데이션) */
.portfolio-item.pf-1 { background-image: url("../images/portfolio-1.jpg?v=1"), linear-gradient(135deg,#23385a,#101a2b); }
.portfolio-item.pf-2 { background-image: url("../images/portfolio-2.jpg?v=1"), linear-gradient(135deg,#2c3e52,#12181f); }
.portfolio-item.pf-3 { background-image: url("../images/portfolio-3.jpg?v=1"), linear-gradient(135deg,#1d4c76,#0d2440); }
.portfolio-item.pf-4 { background-image: url("../images/portfolio-4.jpg?v=1"), linear-gradient(135deg,#34485f,#161d26); }
.portfolio-item.pf-5 { background-image: url("../images/portfolio-5.jpg?v=1"), linear-gradient(135deg,#204a6c,#0e2135); }
.portfolio-item.pf-6 { background-image: url("../images/portfolio-6.jpg?v=1"), linear-gradient(135deg,#2a3d55,#131923); }
.portfolio-item.pf-7 { background-image: url("../images/portfolio-7.jpg?v=1"), linear-gradient(135deg,#1f5484,#0d2b4b); }
.portfolio-item.pf-8 { background-image: url("../images/portfolio-8.jpg?v=1"), linear-gradient(135deg,#38506a,#181f28); }
.portfolio-item span {
  position: absolute; left: 18px; bottom: 16px;
  font-weight: 600; font-size: 15px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.portfolio__foot { text-align: center; margin-top: 48px; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  background: var(--brand-primary);
  color: #fff; text-align: center; padding: 80px 0;
}
.cta-band h2 { font-size: clamp(26px,3.6vw,38px); font-weight: 800; margin: 0 0 14px; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0 0 32px; font-size: 18px; }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--brand-dark); color: rgba(255,255,255,.72); padding: 64px 0 32px; }
.footer__util { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 28px; }
.footer__util a { font-weight: 600; color: #fff; font-size: 14px; }
.footer__util a:hover { color: var(--brand-accent); }
.footer__util a.strong { color: var(--brand-accent); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding: 32px 0; border-top: 1px solid rgba(255,255,255,.1);
}
.footer__brand .logo__text { color: #fff; font-size: 22px; }
.footer__brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.8; }
.footer__col h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.footer__col li { margin-bottom: 8px; font-size: 14px; }
.footer__col a:hover { color: var(--brand-accent); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.5);
}
.footer__counter { display: flex; gap: 16px; }
.footer__counter span b { color: rgba(255,255,255,.8); }

/* =========================================================
   Sub page (찾아오시는 길)
   ========================================================= */
.sub-visual {
  position: relative;
  height: 340px;
  display: flex; align-items: center;
  color: #fff;
  background: linear-gradient(120deg, #16233b, #24406e);
  overflow: hidden;
}
.sub-visual::after {
  content:""; position:absolute; inset:0;
  background: rgba(10,14,20,.35);
}
/* 맑은 공기 패키지 서브비주얼 — 자연 이미지 배경 (images/cleanair-hero.jpg 넣으면 자동 반영) */
.sub-visual--cleanair {
  background-image: url("../images/cleanair-hero.jpg?v=1"), linear-gradient(120deg, #14432f, #1f7a5a);
  background-size: cover; background-position: center;
}
/* 플랜트·장비 서브비주얼 — 설비 사진 배경 */
.sub-visual--plant {
  background-image: url("../images/plant/asphalt.jpg?v=1"), linear-gradient(120deg, #16233b, #24406e);
  background-size: cover; background-position: center;
}
.sub-visual--plant::after { background: rgba(10,14,20,.52); }
.sub-visual__inner { position: relative; z-index: 2; padding-top: var(--header-h); }
.sub-visual h1 { font-size: clamp(30px,5vw,48px); font-weight: 800; margin: 0 0 12px; }
.breadcrumbs { display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(255,255,255,.8); }
.breadcrumbs li::after { content: "›"; margin-left: 10px; opacity: .6; }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs li:last-child { color: #fff; font-weight: 600; }

.lnb { border-bottom: 1px solid var(--brand-line); background: #fff; }
.lnb ul { display: flex; gap: 6px; flex-wrap: wrap; }
.lnb a {
  display: block; padding: 20px 22px;
  font-weight: 600; color: var(--brand-gray);
  border-bottom: 3px solid transparent;
}
.lnb a:hover { color: var(--brand-primary); }
.lnb a.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

.map-embed {
  width: 100%; height: 460px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg,#eef1f5,#eef1f5 18px,#e6eaf0 18px,#e6eaf0 36px);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-gray); font-weight: 600;
  border: 1px solid var(--brand-line);
}
.location-info { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.info-card {
  background: var(--brand-bg-soft);
  border-radius: var(--radius);
  padding: 30px;
}
.info-card h3 { font-size: 17px; margin: 0 0 10px; color: var(--brand-primary); }
.info-card p { margin: 0; color: var(--brand-gray); font-size: 15px; }
.info-card strong { color: var(--brand-ink); font-size: 18px; }

/* =========================================================
   Responsive
   ========================================================= */
/* 메뉴 7개 — 이 아래에선 가로 여백이 부족하므로 햄버거로 전환. */
@media (max-width: 1120px) {
  .gnb, .header__util .lang-btn { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .location-info { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .product-grid, .portfolio-grid, .stats { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   Shared content blocks (신규 페이지 공통 — 기존 토큰 재사용)
   ========================================================= */

/* left-aligned section head 변형 */
.section-head--left { text-align: left; margin-left: 0; margin-right: 0; max-width: 720px; }

/* Prose / 2-column intro */
.prose { max-width: 760px; }
.prose p { color: var(--brand-gray); font-size: 17px; margin: 0 0 18px; }
.prose p strong { color: var(--brand-ink); }

/* CEO 인사말 */
.ceo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.ceo__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: linear-gradient(160deg, #243b5e, #0f1a2c);
  display: flex; align-items: flex-end; padding: 24px; color: #fff;
}
.ceo__photo span { font-weight: 600; font-size: 14px; opacity: .85; }
.ceo__body h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 22px; line-height: 1.25; }
.ceo__body h2 b { color: var(--brand-primary); }
.ceo__sign { margin-top: 28px; font-weight: 700; color: var(--brand-ink); }
.ceo__sign span { display: block; font-weight: 500; color: var(--brand-gray); font-size: 14px; margin-bottom: 4px; }

/* History / 연혁 */
.history { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; }
.history__group { border-top: 3px solid var(--brand-primary); padding-top: 22px; }
.history__year { font-family: var(--font-en); font-size: 30px; font-weight: 800; color: var(--brand-ink); margin: 0 0 16px; }
.history__list li { display: flex; gap: 16px; padding: 8px 0; color: var(--brand-gray); font-size: 15px; }
.history__list li b { color: var(--brand-primary); font-family: var(--font-en); min-width: 40px; }

/* Value / 핵심가치 카드 */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* 카드 수가 열 배수가 아닐 때(예: 5개) 마지막 줄을 가운데 정렬 */
.value-grid.is-centered { display: flex; flex-wrap: wrap; justify-content: center; }
.value-grid.is-centered .value-card { flex: 0 1 360px; }
.value-card {
  background: #fff; border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 34px 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.value-card__icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(36, 97, 192, .1); color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; margin-bottom: 20px;
}
.value-card h3 { font-size: 20px; margin: 0 0 10px; }
.value-card p { margin: 0; color: var(--brand-gray); font-size: 15px; }

/* Cert / 인증 그리드 */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-item {
  aspect-ratio: 3 / 4; border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: var(--brand-bg-soft); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center;
}
.cert-item span { font-size: 14px; color: var(--brand-gray); font-weight: 600; }
.cert-item .cert-ph { width: 56px; height: 56px; border-radius: 50%; background: rgba(36,97,192,.12); color: var(--brand-primary); display:flex; align-items:center; justify-content:center; font-size: 22px; }

/* Process / 개발 프로세스 */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.process__step { position: relative; padding: 30px 24px; background: var(--brand-bg-soft); border-radius: var(--radius); }
.process__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-en); font-size: 15px; font-weight: 700; color: var(--brand-accent);
  display: block; margin-bottom: 14px;
}
.process__step h3 { font-size: 18px; margin: 0 0 8px; }
.process__step p { margin: 0; color: var(--brand-gray); font-size: 14px; }

/* Feature split / R&D 역량 */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-split__media {
  aspect-ratio: 16 / 11; border-radius: var(--radius);
  /* images/rnd-1.jpg 넣으면 자동 반영, 없으면 그라데이션 */
  background-image: url("../images/rnd-1.jpg?v=1"), linear-gradient(150deg, #1c4a7a, #0d2947);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 24px; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600;
}
/* 맑은 공기 패키지 대표 이미지 (images/cleanair-1.jpg 넣으면 자동 반영) */
.feature-split__media--cleanair {
  background-image: url("../images/cleanair-1.jpg?v=1"), linear-gradient(150deg, #1f6b52, #0d2b23);
}
.feature-list { margin-top: 20px; }
.feature-list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--brand-line); }
.feature-list li:last-child { border-bottom: 0; }
.feature-list .k { min-width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.feature-list .v strong { display: block; margin-bottom: 2px; }
.feature-list .v span { color: var(--brand-gray); font-size: 14px; }

/* 설비 사양 목록 (라벨 ↔ 값) */
.spec-list { margin-top: 22px; border-top: 1px solid var(--brand-line); }
.spec-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 2px; border-bottom: 1px solid var(--brand-line);
}
.spec-list li > span { flex: none; color: var(--brand-gray); font-size: 14px; font-weight: 500; }
.spec-list li > strong { text-align: right; font-size: 15px; color: var(--brand-ink); font-weight: 700; }

/* 대표 설비 이미지 (images/product-1.jpg 반영) */
.feature-split__media--product {
  background-image: url("../images/product-1.jpg?v=1"), linear-gradient(150deg, #1c3a5e, #0d1f33);
}

/* 섹션 내부 소제목 (한 섹션 안에서 블록을 나눌 때) */
.block-head { max-width: 660px; margin: 88px auto 40px; text-align: center; }
.block-head .eyebrow { justify-content: center; }
.block-head h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 8px 0 0; word-break: keep-all; }
.block-head p { color: var(--brand-gray); font-size: 16px; line-height: 1.7; margin: 14px 0 0; word-break: keep-all; }

/* 처리 대상가스 태그 */
.gas-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.gas-tags span {
  font-size: 13px; font-weight: 500; color: var(--brand-primary-dark);
  background: rgba(36, 97, 192, .08); border: 1px solid rgba(36, 97, 192, .18);
  padding: 6px 12px; border-radius: 999px;
}
/* 처리공정 단계 카드의 효율 배지 */
.process__eff {
  display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: var(--brand-primary); background: #fff;
  border: 1px solid var(--brand-line); padding: 4px 10px; border-radius: 999px;
}

/* Contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: start; }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 600; font-size: 14px; }
.field label em { color: var(--brand-accent); font-style: normal; margin-left: 4px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--brand-ink);
  padding: 14px 16px; border: 1.5px solid var(--brand-line); border-radius: 8px;
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(36, 97, 192, .12);
}
.form__agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--brand-gray); }
.form__agree a { color: var(--brand-primary); text-decoration: underline; }
.contact-aside { background: var(--brand-bg-soft); border-radius: var(--radius); padding: 36px 32px; }
.contact-aside h3 { margin: 0 0 24px; font-size: 20px; }
.contact-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--brand-line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line .ci { color: var(--brand-primary); font-size: 20px; }
.contact-line b { display: block; font-size: 14px; color: var(--brand-gray); font-weight: 600; margin-bottom: 2px; }
.contact-line span { color: var(--brand-ink); font-weight: 500; }

/* Responsive — 신규 블록 */
@media (max-width: 1024px) {
  .ceo, .feature-split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .history { grid-template-columns: 1fr; gap: 32px; }
  .value-grid, .process { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .ceo__photo { max-width: 420px; }
}
@media (max-width: 640px) {
  .value-grid, .process, .cert-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* =========================================================
   우리동네 맑은공기 패키지 지원사업 — 랜딩페이지
   (모바일 퍼스트: 기본=모바일, min-width 로 확장)
   ========================================================= */

/* ---------- 1. Hero ---------- */
.lp-hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  color: #fff;
  background-image: url("../images/cleanair-hero.jpg?v=1"),
                    linear-gradient(135deg, #123b2b, #1f6b52);
  background-size: cover; background-position: center;
}
.lp-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,20,16,.78) 0%, rgba(8,20,16,.55) 45%, rgba(8,20,16,.25) 100%);
}
.lp-hero__inner { position: relative; z-index: 2; max-width: 860px; padding: 120px 0 80px; }
.lp-hero__badge {
  display: inline-block; margin-bottom: 20px;
  padding: 8px 16px; border-radius: 50px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lp-hero h1 {
  font-size: clamp(28px, 5.4vw, 56px);
  line-height: 1.22; font-weight: 700; letter-spacing: -.03em;
  margin: 0 0 20px; text-shadow: 0 2px 18px rgba(8,20,16,.5);
}
.lp-hero h1 b { color: #7FE3B6; font-weight: 800; }
.lp-hero__sub {
  font-size: clamp(15px, 2.2vw, 19px); line-height: 1.7;
  color: rgba(255,255,255,.9); margin: 0 0 36px;
  text-shadow: 0 1px 12px rgba(8,20,16,.45);
}
.lp-hero__cta { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .lp-hero__cta { flex-direction: row; flex-wrap: wrap; } }

/* ---------- 2. 사업 개요 카드 ---------- */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
.info-stat {
  background: #fff; border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 30px 26px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.info-stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.info-stat__label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-primary); margin-bottom: 14px;
}
.info-stat__value { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 8px; }
.info-stat__value small { font-size: 15px; font-weight: 600; color: var(--brand-gray); }
.info-stat p { margin: 0; font-size: 14.5px; color: var(--brand-gray); line-height: 1.7; }

/* ---------- 3. 지원 대상 표 ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--brand-line); }
.req-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 520px; }
.req-table th, .req-table td { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--brand-line); }
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: 0; }
.req-table th {
  width: 160px; white-space: nowrap;
  background: var(--brand-bg-soft); font-weight: 700; font-size: 15px; color: var(--brand-ink);
}
.req-table td { font-size: 15.5px; color: var(--brand-gray); line-height: 1.75; }
.req-table td strong { color: var(--brand-ink); }

/* ---------- 4. 지원 한도 카드 ---------- */
.limit-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .limit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .limit-grid { grid-template-columns: repeat(4, 1fr); } }
.limit-card {
  background: #fff; border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.limit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.limit-card h3 { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -.01em; min-height: 2.9em; }
.limit-card dl { margin: 0; display: grid; gap: 10px; }
.limit-card dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 8px; background: var(--brand-bg-soft);
}
.limit-card dl > div.is-primary { background: rgba(36,97,192,.09); }
.limit-card dt { margin: 0; font-size: 13px; color: var(--brand-gray); font-weight: 600; }
.limit-card dd { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.limit-card dl > div.is-primary dd { color: var(--brand-primary); }

.note-list { margin: 32px 0 0; padding: 24px 26px; background: var(--brand-bg-soft); border-radius: var(--radius); border-left: 3px solid var(--brand-accent); }
.note-list li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 14.5px; color: var(--brand-gray); line-height: 1.7; }
.note-list li:last-child { margin-bottom: 0; }
.note-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--brand-accent); font-weight: 700; }

/* ---------- 5. 재원 구조 (도넛) ---------- */
.funding { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; justify-items: center; }
@media (min-width: 800px) { .funding { grid-template-columns: 320px 1fr; justify-items: start; gap: 56px; } }
.donut { width: 100%; max-width: 300px; }
.donut svg { width: 100%; height: auto; }
.donut-cap { font-size: 13px; fill: var(--brand-gray); font-weight: 600; }
.donut-val { font-size: 34px; font-weight: 800; fill: var(--brand-primary); letter-spacing: -.02em; }
.legend { width: 100%; display: grid; gap: 12px; }
.legend li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; background: #fff;
  border: 1px solid var(--brand-line); border-radius: var(--radius);
}
.legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.legend span { flex: 1; font-weight: 600; }
.legend b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.caption { margin: 22px 0 0; font-size: 13.5px; color: var(--brand-gray); }

/* ---------- 6. 신청 절차 타임라인 ---------- */
.timeline { display: grid; grid-template-columns: 1fr; gap: 0; }
.timeline li { position: relative; display: flex; gap: 20px; padding: 0 0 30px 0; }
.timeline li:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 4px;
  width: 2px; background: var(--brand-line);
}
.tl-num {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 700; font-size: 14px;
}
.tl-body { padding-top: 4px; }
.tl-body strong { display: block; font-size: 17px; margin-bottom: 4px; letter-spacing: -.01em; }
.tl-body span { font-size: 14.5px; color: var(--brand-gray); }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .timeline li { flex-direction: column; gap: 16px; padding: 0; }
  .timeline li:not(:last-child)::before {
    left: 44px; right: -16px; top: 21px; bottom: auto; width: auto; height: 2px;
  }
  .tl-body { padding-top: 0; }
  .tl-body strong { font-size: 15.5px; }
  .tl-body span { font-size: 13.5px; }
}

/* ---------- 8. FAQ (네이티브 details 아코디언) ---------- */
.faq { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 22px 58px 22px 26px;
  font-weight: 600; font-size: 16.5px; position: relative;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--brand-primary);
}
.faq-item[open] summary { color: var(--brand-primary); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--brand-primary); }
.faq-a { padding: 0 26px 24px; color: var(--brand-gray); font-size: 15.5px; line-height: 1.75; }

/* ---------- 9. 하단 CTA / 폼 / 고지 ---------- */
.lp-cta { background: var(--brand-primary); color: #fff; }
.lp-cta .section-title { color: #fff; }
.lp-cta .section-desc { color: rgba(255,255,255,.85); }
.lp-form-wrap { max-width: 760px; margin: 0 auto; background: #fff; border-radius: var(--radius); padding: 32px 26px; }
@media (min-width: 700px) { .lp-form-wrap { padding: 40px; } }
.legal-note {
  max-width: 860px; margin: 40px auto 0; padding: 22px 24px;
  background: var(--brand-bg-soft); border-radius: var(--radius);
  border-left: 3px solid var(--brand-gray);
  font-size: 13.5px; color: var(--brand-gray); line-height: 1.75;
}
.legal-note a { color: var(--brand-primary); text-decoration: underline; }

/* 스크린리더 전용 (화면에는 안 보이지만 보조기기에는 읽힘) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 의미 단위 줄바꿈 헬퍼: 태블릿 이상에서만 강제 개행 (모바일은 자연 줄바꿈) */
.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: inline; } }

/* =========================================================
   플랜트 · 장비 페이지
   ========================================================= */
/* 메뉴 7개 — 기본 컨테이너(1200) 안에 들어감. 네비 간격만 약간 조정 */
.gnb a { padding: 9px 13px; font-size: 14.5px; }

/* =========================================================
   홈 재구성 (위코 구성 반영) + 시공사례 · 공지/보도
   ========================================================= */
/* 히어로 — 슬라이드마다 다른 문구 */
.hero__slide { display: flex; align-items: center; }
.hero__slide::after { z-index: 1; }
.hero__slide .hero__inner { position: relative; z-index: 2; opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.hero__slide.is-active .hero__inner { opacity: 1; transform: none; }

/* 사업영역 2카드 */
.biz-duo { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px) { .biz-duo { grid-template-columns: 1fr 1fr; gap: 28px; } }
.biz-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); min-height: 380px;
  background: var(--brand-dark); color: #fff;
  border: 1px solid var(--brand-line);
}
.biz-card__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform .5s ease;
}
.biz-card:hover .biz-card__bg { transform: scale(1.08); }
.biz-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,20,.15) 0%, rgba(10,14,20,.55) 55%, rgba(10,14,20,.85) 100%);
}
.biz-card__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px 32px; }
.biz-card .eyebrow { color: var(--brand-accent); }
.biz-card h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 6px 0 12px; letter-spacing: -.02em; }
.biz-card p { margin: 0 0 20px; color: rgba(255,255,255,.85); font-size: 15.5px; line-height: 1.7; word-break: keep-all; }
.biz-card__more { font-weight: 700; font-size: 15px; color: #fff; }
.biz-card__more .arrow { color: var(--brand-accent); margin-left: 4px; }

/* 시공사례 그리드 */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 620px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card {
  background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.work-card__thumb {
  aspect-ratio: 4 / 3; background: var(--brand-bg-soft);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-gray); font-size: 14px; font-weight: 600;
}
.work-card__body { padding: 22px 22px 24px; }
.work-card__tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand-primary); background: rgba(36,97,192,.08); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.work-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; word-break: keep-all; }
.work-card__meta { margin: 0; font-size: 13.5px; color: var(--brand-gray); }

/* 공지 · 보도 목록 */
.news-list { border-top: 2px solid var(--brand-ink); }
.news-item { display: block; padding: 26px 8px; border-bottom: 1px solid var(--brand-line); transition: background .2s ease; }
.news-item:hover { background: var(--brand-bg-soft); }
.news-item__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.news-cat { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.news-cat--notice { color: var(--brand-primary); background: rgba(36,97,192,.09); }
.news-cat--press { color: var(--brand-accent); background: rgba(243,146,0,.12); }
.news-item__date { font-size: 13px; color: var(--brand-gray); font-family: var(--font-en); }
.news-item__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--brand-ink); word-break: keep-all; }
.news-item:hover .news-item__title { color: var(--brand-primary); }
.news-empty { text-align: center; padding: 64px 20px; color: var(--brand-gray); }

/* 제품 목차 (앵커 점프) */
.plant-toc {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 22px 24px; background: var(--brand-bg-soft);
  border: 1px solid var(--brand-line); border-radius: var(--radius);
  margin-bottom: 8px;
}
.plant-toc__label { font-weight: 700; font-size: 14px; color: var(--brand-primary); align-self: center; margin-right: 6px; }
.plant-toc a {
  font-size: 14px; font-weight: 500; color: var(--brand-gray);
  padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--brand-line); transition: all .2s ease; white-space: nowrap;
}
.plant-toc a:hover { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }

/* 제품 블록 */
.prod { padding: 64px 0; border-bottom: 1px solid var(--brand-line); }
.prod:last-of-type { border-bottom: 0; }
.prod__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px; }
.prod__no {
  font-family: var(--font-en); font-size: 20px; font-weight: 700;
  color: var(--brand-primary); flex: none; letter-spacing: .02em;
}
.prod__en { font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-gray); margin: 0 0 2px; }
.prod__title { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0; word-break: keep-all; }
.prod__body { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 900px) { .prod__body { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.prod__fig { border-radius: var(--radius); overflow: hidden; background: var(--brand-bg-soft); }
.prod__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod__copy > p { color: var(--brand-gray); font-size: 16px; line-height: 1.8; margin: 0 0 20px; word-break: keep-all; }
.prod__copy > p strong { color: var(--brand-ink); }

/* 사양 칩 */
.chips { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.chips li {
  position: relative; padding: 12px 16px 12px 40px;
  background: var(--brand-bg-soft); border-radius: 8px;
  font-size: 14.5px; color: var(--brand-ink); font-weight: 500; line-height: 1.5;
}
.chips li::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 2px; background: var(--brand-primary);
}

/* 사양 표 */
.spec-table-wrap { overflow-x: auto; margin-top: 28px; border-radius: var(--radius); border: 1px solid var(--brand-line); }
.spec-caption { font-size: 14px; font-weight: 700; color: var(--brand-ink); padding: 16px 20px 0; }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.spec-table caption { text-align: left; font-size: 14px; font-weight: 700; color: var(--brand-ink); padding: 16px 20px 12px; caption-side: top; }
.spec-table th, .spec-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--brand-line); font-size: 14.5px; }
.spec-table thead th { background: var(--brand-bg-soft); font-weight: 700; color: var(--brand-ink); white-space: nowrap; }
.spec-table tbody th { font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.spec-table td { color: var(--brand-gray); }
.spec-table td.num, .spec-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-en); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tr.hl th, .spec-table tr.hl td { background: rgba(36, 97, 192, .05); color: var(--brand-ink); font-weight: 700; }
.spec-note { margin: 14px 2px 0; font-size: 13.5px; color: var(--brand-gray); line-height: 1.7; }
.spec-two { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .spec-two { grid-template-columns: 1fr 1fr; } }

/* 제작 역량 밴드 */
.capa-band { background: var(--brand-dark); color: #fff; }
.capa-band .section-title { color: #fff; text-align: center; }
.capa-facts { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
@media (min-width: 760px) { .capa-facts { grid-template-columns: repeat(3, 1fr); } }
.capa-fact { text-align: center; }
.capa-fact__n { font-family: var(--font-en); font-size: clamp(38px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.capa-fact__n i { font-style: normal; font-size: .5em; font-weight: 700; margin-left: 4px; color: var(--brand-accent); }
.capa-fact__t { margin: 14px 0 8px; font-weight: 700; font-size: 17px; }
.capa-fact__d { margin: 0; color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.7; }