/* =====================================================================
   한국탄산화학㈜ — 공통 레이아웃·컴포넌트
   단일 블루 브랜드 / 레드 포인트 / 다크 푸터 / 실사진 기반
   ===================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden; /* 모바일 가로 오버플로 방지 */
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
/* 대형 화면은 JS 비율 확대(zoom)로 16인치 디자인을 그대로 확대 — 컨테이너 폭은 고정 유지 */
section { scroll-margin-top: 84px; }

/* ===== 공통 타이포 유틸 ===== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--eyebrow);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--eyebrow);
}

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .56rem 1.35rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .94rem; line-height: 1.2; transition: var(--transition);
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--green-800); color: #fff; }
.btn--primary:hover { background: var(--green-900); }
.btn--light { background: #fff; color: var(--green-800); }
.btn--light:hover { background: var(--green-50); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { background: transparent; border-color: var(--border-strong); color: var(--primary); }
.btn--outline:hover { border-color: var(--primary); background: var(--green-50); }
.btn--lg { padding: .72rem 1.6rem; font-size: 1rem; }
/* 히어로 CTA: 진한 네이비 채움 / 흰색 + 화살표 */
.btn--navy { background: #1c3d6e; color: #fff; }
.btn--navy:hover { background: #16305a; }
.btn--arrow { display: inline-flex; align-items: center; gap: .55em; }
.btn__arrow { font-weight: 600; transition: transform .2s ease; }
.btn--arrow:hover .btn__arrow { transform: translateX(3px); }
.hero__actions .btn--light { border: 1px solid rgba(28,61,110,.28); color: #1c3d6e; }
.hero__actions .btn--light:hover { background: #fff; border-color: #1c3d6e; }
.btn--sm { padding: .42rem 1rem; font-size: .86rem; }

/* =====================================================================
   헤더 / 네비게이션
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; gap: var(--space-6); height: 90px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: var(--space-6); }
.brand__logo { height: 42px; width: auto; }
.brand__text { position: relative; display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand__name { font-size: 1.370rem; line-height: 1; font-weight: 800; color: var(--slate-900); letter-spacing: .06em; white-space: nowrap; }
.brand__en { position: absolute; top: calc(100% + 1.6mm); left: 0; font-size: .57rem; line-height: 1; letter-spacing: .16em; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: var(--space-7); flex: 1; }
/* 메인 메뉴: 헤더 중앙 정렬(여백 auto로 안전하게) */
.nav__menu { display: flex; gap: 7rem; margin-inline: auto; }
.nav__link {
  position: relative; font-weight: 600; font-size: .98rem; color: var(--text);
  padding: .4rem 0; white-space: nowrap;
}
/* 메뉴 hover 언더라인: KLCC 블루 3px, 왼→오 0.2s */
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  background: #1c5fc0; transition: width .2s ease;
}
.nav__link:hover { color: var(--primary); }
.nav__link:hover::after,
.nav__link.is-current::after,
.nav__item:hover > .nav__link::after { width: 100%; }

/* ===== 상단 메뉴 드롭다운(하위 메뉴) ===== */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__sub {
  /* 드롭다운 상단을 헤더 하단에 맞춤: 헤더 높이 90px 기준 중앙에서 45px 아래 */
  position: absolute; left: 50%; top: calc(50% + 45px);
  transform: translateX(-50%) translateY(-6px);
  min-width: 124px; padding: var(--space-2);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: var(--transition); z-index: 60;
}
/* hover 시 메뉴↔서브 사이 여백을 유지해 마우스가 빠지지 않도록(헤더 하단까지 연결) */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -42px; height: 42px; }
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__sub li { list-style: none; }
.nav__sub a {
  display: block; white-space: nowrap; text-align: center;
  font-size: .9rem; font-weight: 600; color: var(--text);
  padding: .55rem .7rem; border-radius: var(--radius-sm); transition: var(--transition);
}
.nav__sub a:hover { background: var(--surface-2); color: var(--primary); }

/* 앵커 이동 시 sticky 헤더에 가리지 않도록 여백 확보 */
section[id] { scroll-margin-top: 88px; }

.toolbar { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

/* 언어 드롭다운 */
.lang-dropdown { position: relative; }
.lang-dropdown__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; color: var(--text);
  padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
  transition: var(--transition);
}
.lang-dropdown__toggle:hover { border-color: var(--green-300); color: var(--primary); }
.lang-caret { width: 14px; height: 14px; transition: var(--transition); }
.lang-dropdown.is-open .lang-caret { transform: rotate(180deg); }
.lang-dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 156px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--transition); z-index: 60;
}
.lang-dropdown.is-open .lang-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown__menu button {
  display: block; width: 100%; text-align: left;
  font-size: .88rem; font-weight: 600; color: var(--text);
  padding: .55rem .7rem; border-radius: var(--radius-sm); transition: var(--transition);
}
.lang-dropdown__menu button:hover { background: var(--surface-2); color: var(--primary); }
.lang-dropdown__menu button.is-active { background: var(--primary); color: #fff; }

/* 모바일 햄버거 (균일한 표준 3줄) */
.nav-toggle { display: none; width: 42px; height: 42px; position: relative; }
.nav-toggle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 2px; background: var(--text); border-radius: 2px;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px;
  background: var(--text); border-radius: 2px;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

/* =====================================================================
   히어로 — 실사진 배경 + 네이비 오버레이
   ===================================================================== */
.hero {
  position: relative; color: var(--hero-text); overflow: hidden;
  display: flex; align-items: flex-start;
  /* 배경 이미지(약 2.49:1, 하단 바닥면만 크롭)가 전부 보이도록 히어로 높이를 이미지 비율에 맞춤 */
  aspect-ratio: 1876 / 754; min-height: 500px;
  /* 레퍼런스: 콘텐츠(제목·버튼)를 상단에서 시작(상단 정렬), 카드는 아래에서 크게 겹침 */
  padding-block: clamp(48px, 7vw, 84px) clamp(24px, 3.5vw, 44px);
}
.hero > .container { width: 100%; }
/* 히어로 배경 슬라이드(3장 자동 전환) */
.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.4s ease; will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slides::after { content: ""; position: absolute; inset: 0; background: transparent; }
.hero > .container, .hero__scroll { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }
.hero__kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: calc(var(--fs-eyebrow) * 1.2); font-weight: 700; letter-spacing: .1em;
  color: #6a7683; margin-bottom: var(--space-5);
}
.hero__kicker::before { content: ""; width: 26px; height: 2px; background: #6a7683; }
/* 히어로 배경 슬라이드 전환 인디케이터 (좌측 하단) */
.hero__nav { display: flex; align-items: center; gap: 14px; margin-top: var(--space-6); }
.hero__navdot { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .82rem; letter-spacing: .06em; color: rgba(20,59,99,.45); transition: color .3s ease; }
.hero__navdot.is-active { color: #143b63; }
.hero__navbar { position: relative; width: 60px; height: 2px; background: rgba(20,59,99,.25); overflow: hidden; }
.hero__navbar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 50%; background: #143b63; transition: transform .4s ease; }
.hero__nav[data-active="1"] .hero__navbar-fill { transform: translateX(100%); }
/* 스크롤 안내 인디케이터 (마우스 아이콘 + SCROLL) */
.hero__scroll {
  position: absolute; right: var(--space-10); bottom: var(--space-8);
  display: inline-flex; flex-direction: column; align-items: center; gap: .55em;
  color: #fff; text-decoration: none; z-index: 3;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.hero__scroll-mouse {
  width: 24px; height: 38px; border: 2px solid #fff; border-radius: 14px; position: relative;
}
.hero__scroll-mouse::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  background: #fff; border-radius: 2px; transform: translateX(-50%);
  animation: heroScrollWheel 1.6s ease-in-out infinite;
}
.hero__scroll-text { font-size: .72rem; font-weight: 700; letter-spacing: .2em; }
@keyframes heroScrollWheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 13px); }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll-mouse::before { animation: none; } }

/* ===== 전역 고정 스크롤 인디케이터 (배경 밝기에 따라 색 자동 전환) ===== */
.scroll-fab {
  position: fixed; right: var(--space-8); bottom: var(--space-8);
  display: inline-flex; flex-direction: column; align-items: center; gap: .5em;
  color: #fff; text-decoration: none; z-index: 40;
  transition: color .3s ease, opacity .3s ease, transform .3s ease, filter .3s ease;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
/* 밝은(흰) 배경 위 — 브랜드 색으로 전환 */
.scroll-fab.is-dark { color: var(--primary); filter: none; }
/* 페이지 맨 아래(푸터 근처)에서는 숨김 */
.scroll-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.scroll-fab__mouse {
  width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; position: relative;
}
.scroll-fab__mouse::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  background: currentColor; border-radius: 2px; transform: translateX(-50%);
  animation: heroScrollWheel 1.6s ease-in-out infinite;
}
.scroll-fab__text { font-size: .68rem; font-weight: 700; letter-spacing: .2em; }
@media (prefers-reduced-motion: reduce) { .scroll-fab__mouse::before { animation: none; } }
@media (max-width: 680px) { .scroll-fab { right: var(--space-5); bottom: var(--space-5); } }
.hero__title { font-size: calc(var(--fs-display) * 0.94); font-weight: 800; letter-spacing: -.015em; margin-bottom: var(--space-5); color: #143b63; }
.hero__title .hl { box-shadow: inset 0 -.32em 0 rgba(205,31,38,.5); }
/* 제목 아래 구분선 — 타 해더(gas-banner__rule)와 통일 */
.hero__title::after { content: ""; display: block; width: clamp(44px, 5vw, 68px); height: 2px; margin-top: var(--space-4); background: #2b6cb8; }
.hero__lead { font-size: var(--fs-lead); max-width: 560px; color: #274a66; font-weight: 500; margin-bottom: var(--space-7); }
/* 밝은 히어로 이미지 위 — 외곽선 버튼 남색으로 (흰 이미지에서 흰 테두리 사라짐 방지) */
.hero .btn--ghost { border-color: rgba(20,59,99,.45); color: #143b63; }
.hero .btn--ghost:hover { background: rgba(20,59,99,.08); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); margin-top: var(--space-8);
  padding-top: var(--space-5); border-top: 1px solid rgba(20,59,99,.2); max-width: 660px;
}
.hero__trust-item { display: flex; flex-direction: column; }
.hero__trust-num { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 800; color: #143b63; line-height: 1.05; letter-spacing: -.01em; }
.hero__trust-num small { color: #2c6788; font-size: .58em; margin-left: .12em; font-weight: 800; }
.hero__trust-label { font-size: .85rem; color: #46617a; font-weight: 600; margin-top: 5px; }

/* =====================================================================
   사업 하이라이트 — 히어로 하단에 겹치는 3컷 실사진
   ===================================================================== */
.highlight { background: var(--surface-2); padding-bottom: var(--space-16); }
.highlight__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-top: calc(-1 * var(--space-12)); position: relative; z-index: 2;
}
.photo-card {
  display: block; background: #fff; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md); transition: var(--transition);
}
.photo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.photo-card__img { aspect-ratio: 16 / 11; width: 100%; object-fit: cover; }
.photo-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.photo-card__tag { font-size: calc(var(--fs-eyebrow) * 1.1); font-weight: 700; color: var(--eyebrow); letter-spacing: .04em; }
.photo-card__title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: .3rem 0 .4rem; }
.photo-card__text { font-size: var(--fs-sm); color: var(--text-muted); }

/* =====================================================================
   섹션 공통
   ===================================================================== */
.section { padding-block: calc(var(--space-6) * 0.7); }
.section--soft { background: var(--surface-2); border-block: 1px solid var(--border); }
.section--brand { background: linear-gradient(180deg, var(--surface-brand), var(--surface-2)); }
.section__head { max-width: 680px; margin-bottom: var(--space-2); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; margin-top: var(--space-3); color: var(--text); }
.section__lead { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--fs-lead); }

/* 지표(stats) */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.stat { text-align: center; padding: var(--space-8) var(--space-5); border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; }
.stat__num { font-size: var(--fs-stat); font-weight: 800; color: var(--brand); line-height: 1; letter-spacing: -.02em; }
.stat__num small { font-size: .42em; color: var(--accent); font-weight: 700; margin-left: .15em; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-3); }

/* 아이콘 카드 그리드 */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.feature {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-7);
  box-shadow: var(--shadow-sm); transition: var(--transition); overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: var(--transition);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.feature:hover::before { transform: scaleX(1); }
.feature__index {
  display: inline-block; font-size: 1rem; font-weight: 800; color: var(--brand);
  letter-spacing: .06em; margin-bottom: var(--space-5);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--green-200);
}
.feature__icon { display: block; width: 64px; height: 64px; object-fit: contain; margin-bottom: var(--space-4); }
.feature--media { padding: 0; }
.feature--media .feature__title { margin-left: var(--space-7); margin-right: var(--space-7); }
.feature--media .feature__text { margin: 0 var(--space-7) var(--space-7); }
.feature__img { display: block; width: 100%; height: 180px; object-fit: cover; margin-bottom: var(--space-6); }
/* 클릭 토글 카드: 클릭 시 텍스트 숨기고 사진을 가득 채움 */
.feature--toggle { cursor: pointer; }
.feature--toggle .feature__img { transition: height .35s ease; }
.feature--toggle.is-photo .feature__img { height: 360px; margin-bottom: 0; }
.feature--toggle.is-photo .feature__title,
.feature--toggle.is-photo .feature__text { display: none; }
.feature__title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: var(--space-3); }
.feature__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }

/* 거래처 로고 그리드 (셀형 레이아웃) */
.logo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--border);
  gap: 1px;
}
.logo-grid__cell {
  display: grid; place-items: center; min-height: 120px; padding: var(--space-6);
  background: #fff; color: var(--slate-500); font-weight: 700; font-size: 1rem;
  text-align: center; transition: var(--transition);
}
.logo-grid__cell:hover { background: var(--surface-2); }
.logo-grid__cell img { max-height: 26.5px; max-width: 39.2%; width: auto; object-fit: contain; }

/* 연락처 밴드 (푸터 위) — 실사진 배경 + 녹색 오버레이 */
.contact-band {
  color: #fff;
  background:
    linear-gradient(100deg, rgba(26,54,88,.78) 0%, rgba(32,66,102,.52) 40%, rgba(40,82,122,.26) 66%, rgba(48,92,134,.14) 100%),
    url("../images/site/contact-bg.jpg?v=20260916");
  background-size: cover; background-position: center;
  padding-block: var(--space-12);
}
.contact-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-10); flex-wrap: wrap;
}
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: #fff; }
.contact-band__title { font-size: var(--fs-h2); font-weight: 800; margin: var(--space-3) 0; }
.contact-band__lead { color: #dcecf6; max-width: 560px; }

/* 좌측: 강점 3종 (구분선으로 분리) */
.contact-band__feats {
  list-style: none; margin: var(--space-7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
}
.contact-band__feats > li { display: flex; align-items: center; gap: .7em; position: relative; }
.contact-band__feats > li + li { padding-left: var(--space-6); }
.contact-band__feats > li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 34px; background: rgba(255,255,255,.28);
}
.contact-band__feat-ic { flex: none; width: 30px; height: 30px; color: #cfe6f6; }
.contact-band__feat-ic svg { width: 100%; height: 100%; }
.contact-band__feat-tx { display: flex; flex-direction: column; line-height: 1.3; }
.contact-band__feat-tx b { color: #fff; font-weight: 700; font-size: .98rem; }
.contact-band__feat-tx small { color: rgba(220,236,246,.82); font-size: .8rem; }

/* 우측: 대표전화 + 견적문의 버튼 */
.contact-band__action { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); min-width: 340px; }
.contact-band__phone { display: flex; align-items: center; gap: var(--space-4); justify-content: flex-end; }
.contact-band__phone-ic { flex: none; width: 54px; height: 54px; object-fit: contain; display: block; }
.contact-band__phone-tx { display: flex; flex-direction: column; line-height: 1.15; }
.contact-band__phone-tx small { font-size: var(--fs-sm); color: #fff; letter-spacing: .04em; }
.contact-band__phone-tx a { font-size: clamp(1.89rem, 3.15vw, 2.47rem); font-weight: 800; color: #fff; letter-spacing: -.01em; margin: .1rem 0; }
.contact-band__phone-tx em { font-style: normal; font-size: .82rem; color: rgba(200,222,238,.85); }

.contact-band__btn2 {
  display: flex; align-items: center; gap: var(--space-4);
  background: #2f7fd6; color: #fff; border-radius: var(--radius-md);
  padding: 1em 1.4em; box-shadow: 0 12px 28px rgba(20,60,110,.35);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-band__btn2:hover { background: #2871c2; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20,60,110,.45); }
/* 버튼 너비를 위쪽 전화번호와 동일하게(아이콘 폭 54px + 간격만큼 들여써 번호와 좌·우 정렬) */
.contact-band__btn2 { margin-left: calc(54px + var(--space-4)); }
.contact-band__btn2-ic { flex: none; width: 34px; height: 34px; color: #fff; }
.contact-band__btn2-ic svg { width: 100%; height: 100%; }
.contact-band__btn2-tx { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.contact-band__btn2-tx b { font-weight: 700; font-size: 1.15rem; }
.contact-band__btn2-tx small { font-size: .82rem; color: rgba(255,255,255,.85); }
.contact-band__btn2-arrow { flex: none; width: 22px; height: 22px; color: rgba(255,255,255,.9); }
.contact-band__btn2-arrow svg { width: 100%; height: 100%; }

@media (max-width: 760px) {
  .contact-band__action { align-items: stretch; min-width: 0; width: 100%; }
  .contact-band__btn2 { margin-left: 0; }
  .contact-band__phone { justify-content: flex-start; }
  .contact-band__feats { gap: var(--space-4); }
  .contact-band__feats > li + li { padding-left: var(--space-4); }
}

/* =====================================================================
   푸터 (다크)
   ===================================================================== */
.site-footer {
  background: linear-gradient(180deg, var(--navy-deep), var(--footer-bg));
  color: var(--footer-text); padding-block: var(--space-12) var(--space-6);
  border-top: 3px solid var(--accent);
}
.site-footer a { transition: var(--transition); }
.site-footer a:hover { color: var(--blue-200); }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: var(--space-10);
  padding-bottom: var(--space-8); border-bottom: 1px solid var(--footer-border);
}
/* 브랜드 열 전체를 오른쪽으로 살짝 이동 */
.footer__grid > .footer__col:nth-child(1) { padding-left: var(--space-6); }
/* 메뉴·사업장 안내 열을 오른쪽으로 50px 이동 */
.footer__grid > .footer__col:nth-child(2),
.footer__grid > .footer__col:nth-child(3) { padding-left: 50px; }
/* 열 사이 세로 구분선 (브랜드↔메뉴, 메뉴↔사업장 안내) */
.footer__grid > .footer__col:nth-child(2),
.footer__grid > .footer__col:nth-child(3) { position: relative; }
.footer__grid > .footer__col:nth-child(2)::before,
.footer__grid > .footer__col:nth-child(3)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--space-10) / -2);
  width: 1px; background: var(--footer-border);
}
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.footer__brand img { height: 50px; filter: brightness(0) invert(1); opacity: .92; }
.footer__brand-name { color: var(--footer-heading); font-weight: 800; font-size: 1.4rem; }
.footer__desc { font-size: calc(var(--fs-sm) * 1.2); font-weight: 700; line-height: 1.7; }
.footer__slogan { font-size: var(--fs-sm); line-height: 1.7; color: rgba(196,219,233,.7); margin-top: var(--space-2); }
/* 태그라인을 로고 내 'KLCC' 글자 중 L 위치와 일직선으로 정렬(로고 폭 102px의 약 44%) */
.footer__desc, .footer__slogan { margin-left: 45px; }
@media (max-width: 560px) { .footer__desc, .footer__slogan { margin-left: 0; } }
.footer__col h4 { color: var(--footer-heading); font-size: calc(var(--fs-sm) * 1.2); margin-bottom: var(--space-4); font-weight: 700; }
.footer__col li { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
/* 메뉴 링크 폰트를 '전문기업' 문구와 동일 크기로 */
.footer__grid > .footer__col:nth-child(2) li { font-size: calc(var(--fs-sm) * 1.2); }
.footer__sites li { margin-bottom: var(--space-4); }
.footer__sites b { color: #c4dbe9; font-weight: 600; display: block; font-size: .9rem; }
/* 사업장 안내: 주소 앞 위치 핀 아이콘 */
.footer__sites--pin li { position: relative; padding-left: 1.7em; }
.footer__sites--pin li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background: currentColor; color: var(--blue-200); opacity: .85;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.3 7-12a7 7 0 1 0-14 0c0 5.7 7 12 7 12z'/><circle cx='12' cy='9' r='2.5'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.3 7-12a7 7 0 1 0-14 0c0 5.7 7 12 7 12z'/><circle cx='12' cy='9' r='2.5'/></svg>");
}
.footer__bottom {
  padding-top: var(--space-5); font-size: .82rem; opacity: .8;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}

/* =====================================================================
   페이지 공통 — 서브 히어로(내부 페이지 상단)
   ===================================================================== */
.page-hero {
  background:
    linear-gradient(115deg, rgba(52,127,166,.96), rgba(21,42,56,.92)),
    url("../images/site/hero-factory.jpg");
  background-size: cover; background-position: center;
  color: #fff; padding-block: var(--space-12);
}
/* 페이지 배너(자체 텍스트 포함 이미지) — 5.5:1, 잘림 없이 전체 표시 */
.page-banner { line-height: 0; }
.page-banner img { display: block; width: 100%; height: auto; }

/* 배경 이미지 + 왼쪽 텍스트/아이콘 오버레이 배너 */
.page-banner--overlay { position: relative; overflow: hidden; }
.page-banner--overlay .page-banner__bg { display: block; width: 100%; height: auto; }
/* 왼쪽 텍스트 가독성용 화이트톤 그라데이션 오버레이 (참고 이미지) */
.page-banner__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(237,240,244,1) 0%, rgba(237,240,244,0.98) 32%, rgba(237,240,244,0.75) 54%, rgba(237,240,244,0) 76%); }
.page-banner--overlay .gas-banner { z-index: 2; }
/* 좌측 상단 라이트 레이 장식 (오버레이 위·텍스트 아래) */
.page-banner__rays { position: absolute; top: 0; left: 0; width: clamp(260px, 34%, 520px); height: auto; z-index: 1; pointer-events: none; opacity: .8; }
.ice-banner {
  position: absolute; inset: 0; line-height: 1.4;
  display: flex; align-items: center;
}
.ice-banner__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-6);
}
/* 드라이아이스 히어로: DRY ICE 아이브로우(참고 이미지) */
.ice-banner__eyebrow {
  display: block; font-size: clamp(11px, 1.1vw, 15px); font-weight: 700;
  letter-spacing: 0.18em; color: #6a7683; margin: 0 0 clamp(4px, 0.5vw, 8px);
}
.ice-banner__title {
  font-size: clamp(28px, 4.4vw, 60px); font-weight: 800; letter-spacing: 0.04em;
  color: #17457f; margin: 0;
}
/* 드라이아이스 히어로: 제품 유형 영문 리스트(참고 이미지) */
.ice-banner__list {
  list-style: none; margin: clamp(22px, 3vw, 40px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(4px, 0.6vw, 7px);
}
.ice-banner__list li {
  font-size: clamp(10px, 0.95vw, 13px); font-weight: 700; letter-spacing: 0.12em;
  color: #9aa6b2;
}
/* 배너 높이(약 322px)에 맞춰 콘텐츠가 넘치지 않도록 축소 */
.ice-banner:has(.ice-banner__list) .ice-banner__title { font-size: clamp(23px, 3vw, 44px); line-height: 1.14; }
.ice-banner:has(.ice-banner__list) .ice-banner__sub { font-size: clamp(13px, 1.5vw, 21px); line-height: 1.3; margin-top: clamp(12px, 1.6vw, 22px); }
.ice-banner__sub {
  font-size: clamp(13px, 1.5vw, 21px); font-weight: 500; color: #3a4654;
  margin: clamp(6px, 0.8vw, 12px) 0 0;
}
.ice-banner__rule {
  display: block; width: clamp(48px, 5vw, 72px); height: 2px;
  background: #2b6cb8; margin: clamp(10px, 1.4vw, 20px) 0 clamp(14px, 1.8vw, 26px);
}
.ice-banner__points {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(18px, 3vw, 46px);
}
.ice-point { text-align: center; }
.ice-point__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(34px, 4vw, 58px); height: clamp(34px, 4vw, 58px);
  border-radius: 50%; background: #2b6cb8; color: #fff;
}
.ice-point__icon svg { width: 54%; height: 54%; }
.ice-point__label {
  display: block; margin-top: clamp(5px, 0.8vw, 10px);
  font-size: clamp(11px, 1.15vw, 16px); font-weight: 700; letter-spacing: 0.02em;
  color: #1c5fc0;
}
.ice-point__desc {
  display: block; margin-top: 2px;
  font-size: clamp(10px, 1vw, 14px); font-weight: 700; color: #45505c;
}
@media (max-width: 640px) {
  .ice-banner__rule { display: none; }
  .ice-banner__points { gap: 12px; }
  .ice-point__desc { display: none; }
}

/* 산업용가스 배너 — 배경 이미지 + 왼쪽 문구/아이콘 오버레이 */
.gas-banner {
  position: absolute; inset: 0; line-height: 1.35;
  display: flex; align-items: center;
}
.gas-banner__wrap {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-6);
}
.gas-banner__col { max-width: min(780px, 62%); }
/* 회사소개 히어로: ABOUT US 아이브로우(참고 이미지) */
.gas-banner__eyebrow {
  display: block; font-size: clamp(11px, 1.1vw, 15px); font-weight: 700;
  letter-spacing: 0.18em; color: #6a7683; margin: 0 0 clamp(8px, 1vw, 16px);
}
.gas-banner--const .gas-banner__eyebrow { text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85); }
.gas-point__label, .gas-point__desc { white-space: nowrap; }
.gas-banner__title {
  font-size: clamp(28px, 4.4vw, 60px); font-weight: 800; line-height: 1.2;
  color: #17457f; margin: 0; letter-spacing: 0.04em;
}
.gas-banner__title b { color: #1c5fc0; font-weight: 800; }
/* 2줄 한글 헤드라인(시설·시공): 헤더 높이에 맞게 축소, 진한 본문 + 파란 강조 */
.gas-banner__title--multi {
  font-size: clamp(19px, 2.7vw, 38px); line-height: 1.18; color: #1a2733;
}
/* 시설·시공: 배경(수평선·도로)이 복잡해 텍스트 가독성 보강 + 간격 축소 */
.gas-banner--const .gas-banner__title,
.gas-banner--const .gas-banner__sub,
.gas-banner--const .gas-point__label,
.gas-banner--const .gas-point__desc {
  text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85);
}
.gas-banner--const .gas-banner__rule { margin: clamp(8px,1.1vw,15px) 0 clamp(10px,1.3vw,18px); }
/* 강조어(가스저장탱크·가스공급설비) 색을 DRY ICE 타이틀 색과 동일하게 */
.gas-banner--const .gas-banner__title b { color: #17457f; }

/* 고객지원: 헤드셋 아이콘 + 제목 인라인 배치(참고 이미지) */
.sup-title { display: flex; align-items: center; gap: 0.32em; }
.sup-title__icon { width: 0.92em; height: 0.92em; color: #17457f; flex: none; }
.gas-banner__sub {
  font-size: clamp(13px, 1.5vw, 21px); font-weight: 500; color: #3a4654;
  margin: clamp(4px, 0.6vw, 9px) 0 0;
}
.gas-banner__sub b { color: #1c5fc0; font-weight: 700; }
/* 태그라인 아래 보조 설명 문단(참고 이미지: 용기검사) */
.gas-banner__desc {
  font-size: clamp(11px, 1.1vw, 15px); font-weight: 400; color: #55606c;
  line-height: 1.5; margin: clamp(6px, 0.9vw, 12px) 0 0;
}
/* 용기검사: 타이틀+태그라인+설명+아이콘을 헤더 높이에 맞게 축소·간격 압축 */
.gas-banner--supply .gas-banner__title { font-size: clamp(24px, 3.6vw, 46px); }
.gas-banner--supply .gas-banner__sub { font-size: clamp(12px, 1.35vw, 18px); }
.gas-banner--supply .gas-banner__desc { margin-top: clamp(4px, 0.6vw, 8px); line-height: 1.45; }
.gas-banner--supply .gas-banner__rule { margin: clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 16px); }
.gas-banner__rule {
  display: block; width: clamp(44px, 5vw, 68px); height: 2px;
  background: #2b6cb8; margin: clamp(10px, 1.4vw, 20px) 0 clamp(14px, 1.8vw, 26px);
}
.gas-banner__points {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(18px, 3vw, 46px);
}
/* 가스제품 히어로: 제품군 영문 리스트(참고 이미지) */
.gas-banner__list {
  list-style: none; margin: clamp(18px, 2.6vw, 34px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(6px, 0.9vw, 12px);
}
.gas-banner__list li {
  font-size: clamp(12px, 1.35vw, 18px); font-weight: 700; letter-spacing: 0.12em;
  color: #9aa6b2;
}
.gas-banner--const .gas-banner__list li { text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85); }
/* 가스제품 히어로: 배너 높이(약 322px)에 맞춰 콘텐츠가 넘치지 않도록 크기 축소 */
.gas-banner:has(.gas-banner__list) .gas-banner__eyebrow { margin-bottom: clamp(4px, 0.5vw, 8px); }
.gas-banner:has(.gas-banner__list) .gas-banner__title { font-size: clamp(23px, 3vw, 44px); line-height: 1.14; }
.gas-banner:has(.gas-banner__list) .gas-banner__sub { font-size: clamp(13px, 1.5vw, 21px); line-height: 1.3; margin-top: clamp(12px, 1.6vw, 22px); }
.gas-banner:has(.gas-banner__list) .gas-banner__list { margin-top: clamp(22px, 3vw, 40px); gap: clamp(4px, 0.6vw, 7px); }
.gas-banner:has(.gas-banner__list) .gas-banner__list li { font-size: clamp(10px, 0.95vw, 13px); }
.gas-point { text-align: center; }
.gas-point__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(34px, 4vw, 58px); height: clamp(34px, 4vw, 58px);
  border-radius: 50%; background: #2b6cb8; color: #fff;
}
.gas-point__icon svg { width: 54%; height: 54%; }
.gas-point__icon--img { background: none; border-radius: 0; width: clamp(31px, 3.6vw, 52px); height: clamp(31px, 3.6vw, 52px); }
.gas-point__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 가스제품 히어로: 라벨만 있는 큰 포인트 + 항목 사이 구분선 (참고 이미지) */
.gas-banner:has(.gas-banner__points--lg) .gas-banner__eyebrow { margin: 0 0 clamp(2px, 0.3vw, 5px); font-size: clamp(10px, 0.95vw, 12.8px); letter-spacing: 0.202em; text-indent: -0.09em; }
.gas-banner:has(.gas-banner__points--lg) .gas-banner__rule { margin-top: clamp(9px, 1.1vw, 15px); margin-bottom: clamp(9px, 1.1vw, 15px); }
.gas-banner:has(.gas-banner__points--lg) .gas-banner__sub { margin-top: clamp(3px, 0.42vw, 6px); }
.gas-banner__points--lg { gap: clamp(28px, 4.2vw, 65px); align-items: flex-start; }
.gas-banner__points--lg .gas-point { position: relative; }
.gas-banner__points--lg .gas-point:not(:last-child)::after {
  content: ""; position: absolute; top: clamp(14px, 1.9vw, 26px);
  right: calc(-1 * clamp(14px, 2.1vw, 32px)); width: 1px; height: clamp(34px, 4vw, 56px);
  background: rgba(23, 69, 127, 0.18);
}
.gas-banner__points--lg .gas-point__icon--img { width: clamp(27px, 3.23vw, 43px); height: clamp(27px, 3.23vw, 43px); }
/* 계열사 히어로: 가스제품 헤더와 동일 폰트/색상/간격 (포인트 없음) */
.gas-banner--net .gas-banner__eyebrow { margin: 0 0 clamp(2px, 0.3vw, 5px); font-size: clamp(8px, 0.81vw, 11px); letter-spacing: 0.202em; text-indent: -0.09em; }
.gas-banner--net .gas-banner__title.gas-banner__title--multi { font-size: clamp(22px, 2.95vw, 40px); }
.gas-banner--net .gas-banner__sub { margin-top: clamp(3px, 0.42vw, 6px); font-size: clamp(11px, 1.29vw, 18px); }
/* SVG 아이콘(시설·시공): 옅은 원 + 파란 아이콘으로 통일 */
.gas-banner__points--lg .gas-point__icon:not(.gas-point__icon--img) { width: clamp(27px, 3.23vw, 43px); height: clamp(27px, 3.23vw, 43px); background: #eef4fb; color: var(--brand); }
.gas-banner__points--lg .gas-point__icon:not(.gas-point__icon--img) svg { width: 54%; height: 54%; }
.gas-banner__points--lg .gas-point__label {
  margin-top: clamp(5px, 0.7vw, 9px); font-size: clamp(9.5px, 0.95vw, 13.3px);
  font-weight: 800; color: #17457f;
}
.gas-banner__points--desc .gas-point__desc { display: block; margin-top: 3px; font-size: clamp(10px, 0.95vw, 13px); font-weight: 600; color: #5a6875; letter-spacing: 0; white-space: nowrap; }
/* 제품 히어로 텍스트 축소 (가스제품·드라이아이스·시설시공·용기검사 공통) */
.gas-banner:has(.gas-banner__points--lg) .gas-banner__eyebrow { font-size: clamp(8px, 0.81vw, 11px); }
.gas-banner:has(.gas-banner__points--lg) .gas-banner__title { font-size: clamp(24px, 3.76vw, 51px); }
.gas-banner:has(.gas-banner__points--lg) .gas-banner__sub { font-size: clamp(11px, 1.29vw, 18px); }
.ice-banner:has(.ice-banner__points--lg) .ice-banner__eyebrow { font-size: clamp(8px, 0.81vw, 11px); }
.ice-banner:has(.ice-banner__points--lg) .ice-banner__title { font-size: clamp(24px, 3.76vw, 51px); }
.ice-banner:has(.ice-banner__points--lg) .ice-banner__sub { font-size: clamp(11px, 1.29vw, 18px); }
/* 고객지원 헤더: 타 제품 헤더와 텍스트 통일(아이브로우·타이틀·서브·구분선) */
.gas-banner--sup .gas-banner__eyebrow { margin: 0 0 clamp(2px, 0.3vw, 5px); font-size: clamp(10px, 0.95vw, 12.8px); letter-spacing: 0.202em; text-indent: -0.09em; }
.gas-banner--sup .gas-banner__title { font-size: clamp(24px, 3.76vw, 51px); }
.gas-banner--sup .gas-banner__sub { font-size: clamp(11px, 1.29vw, 18px); margin-top: clamp(3px, 0.42vw, 6px); line-height: 1.4; }
.gas-banner--sup .gas-banner__rule { margin-top: clamp(9px, 1.1vw, 15px); margin-bottom: clamp(9px, 1.1vw, 15px); }
/* 드라이아이스 히어로: 가스 히어로와 동일 구조/스타일로 통일 */
.ice-banner__eyebrow { margin: 0 0 clamp(2px, 0.3vw, 5px); font-size: clamp(10px, 0.95vw, 12.8px); letter-spacing: 0.202em; text-indent: -0.09em; }
.ice-banner__sub { margin-top: clamp(3px, 0.42vw, 6px); }
.ice-banner__rule { margin-top: clamp(9px, 1.1vw, 15px); margin-bottom: clamp(9px, 1.1vw, 15px); }
.ice-banner__points--lg { gap: clamp(28px, 4.2vw, 65px); align-items: flex-start; }
.ice-banner__points--lg .ice-point { position: relative; }
.ice-banner__points--lg .ice-point:not(:last-child)::after {
  content: ""; position: absolute; top: clamp(14px, 1.9vw, 26px);
  right: calc(-1 * clamp(14px, 2.1vw, 32px)); width: 1px; height: clamp(34px, 4vw, 56px);
  background: rgba(23, 69, 127, 0.18);
}
.ice-banner__points--lg .ice-point__icon { width: clamp(27px, 3.23vw, 43px); height: clamp(27px, 3.23vw, 43px); background: #eef4fb; color: var(--brand); }
.ice-banner__points--lg .ice-point__icon--img { background: none; }
.ice-banner__points--lg .ice-point__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ice-banner__points--lg .ice-point__label { margin-top: clamp(5px, 0.7vw, 9px); font-size: clamp(9.5px, 0.95vw, 13.3px); font-weight: 800; color: #17457f; letter-spacing: 0; }
.gas-point__label {
  display: block; margin-top: clamp(5px, 0.8vw, 10px);
  font-size: clamp(11px, 1.15vw, 16px); font-weight: 700; color: #1c5fc0;
}
.gas-point__desc {
  display: block; margin-top: 2px;
  font-size: clamp(10px, 1vw, 14px); font-weight: 700; color: #45505c;
}
@media (max-width: 720px) {
  .gas-banner__col { max-width: 92%; }
  .gas-banner__rule { display: none; }
  .gas-point__desc { display: none; }
  .gas-banner__desc { display: none; }
  .gas-banner__points { gap: 12px; }
}
.page-hero h1 { font-size: var(--fs-h1); font-weight: 800; }
.page-hero p { color: #dcecf6; margin-top: var(--space-3); max-width: 620px; }
.breadcrumb { font-size: var(--fs-sm); color: var(--green-300); margin-bottom: var(--space-3); }
.breadcrumb a:hover { color: #fff; }

/* 현재 페이지 메뉴 강조 */
.nav__link.is-current { color: var(--primary); }
.nav__link.is-current::after { width: 100%; }

/* 인사말 */
.greeting { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
.greeting__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
/* CEO 메시지 배너: 배경 이미지(우측 인물) + 좌측 텍스트 오버레이 */
.cmsg { position: relative; isolation: isolate; }
/* 전체 이미지를 크롭 없이 사이즈 맞춰 배치(contain), 우측 정렬
   가장자리 블렌딩: 왼쪽(텍스트 쪽)은 강하게 흰 배경으로 페이드, 오른쪽(인물 쪽)은 저강도로만 적용 */
.cmsg__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; z-index: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 84%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.82) 0, #000 8%, #000 90%, rgba(0,0,0,0.82) 100%);
  -webkit-mask-composite: source-in; -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 84%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.82) 0, #000 8%, #000 90%, rgba(0,0,0,0.82) 100%);
  mask-composite: intersect; mask-repeat: no-repeat;
}
/* 좌측 텍스트 가독성용 흰색 스크림(왼→오 페이드) */
.cmsg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.55) 56%, rgba(255,255,255,0) 70%);
}
/* CEO MESSAGE 텍스트 좌측선을 다른 페이지 섹션(OVERVIEW·AFFILIATES) 아이브로우와 동일하게 = 컨테이너 기본 좌측(패딩 0) */
.cmsg__body { position: relative; z-index: 2; max-width: 56%; padding: clamp(28px, 4vw, 60px); padding-left: 0; word-break: keep-all; }
/* 위쪽 여백: 카드 내부 상단 패딩이 더해지는 만큼 섹션 상단 패딩을 줄여
   CEO MESSAGE 아이브로우 세로 위치를 OVERVIEW 섹션과 동일하게 맞춤 */
#greeting.section { padding-top: var(--space-8); }
@media (max-width: 860px) {
  .cmsg__bg { object-position: 78% center; }
  .cmsg::after { background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.85) 100%); }
  .cmsg__body { max-width: 100%; padding: clamp(20px, 5vw, 32px); padding-left: 0; }
  .cmsg__body .section__title { font-size: 1.4rem; }
}

/* =====================================================================
   회사소개 페이지 리디자인 — 인트로 / 경영이념 / 가로 연혁 / 생산시설
   ===================================================================== */
/* 회사소개 인트로(좌 텍스트 + 우 사진) */
.about2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-12); align-items: center; }
.about2__lead { color: var(--text-muted); line-height: 1.9; margin: var(--space-5) 0 var(--space-6); }
.about2__dl { display: inline-flex; align-items: center; gap: .5em; margin-bottom: var(--space-8); }
.about2__dl svg { width: 18px; height: 18px; }
.about2__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; aspect-ratio: 16 / 11; object-fit: cover; }
.introfeats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.introfeat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.introfeat__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-brand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.introfeat__ic svg { width: 22px; height: 22px; }
.introfeat b { font-size: .8rem; letter-spacing: .05em; color: var(--text); }
.introfeat small { font-size: .82rem; color: var(--text-muted); }
@media (max-width: 900px) { .about2 { grid-template-columns: 1fr; gap: var(--space-8); } .introfeats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
/* 홈 ABOUT US: 아이콘 상단 세로 카드형 */
.about-home__feats { gap: var(--space-4); }
.about-home__feats .introfeat { align-items: center; justify-content: center; text-align: center; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-2); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-home__feats .introfeat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.about-home__feats .introfeat__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-brand); color: var(--brand); margin-bottom: var(--space-2); }
.about-home__feats .introfeat__ic svg { width: 20px; height: 20px; }
.about-home__feats .introfeat__ic--img { width: 48px; height: 48px; background: transparent; }
.about-home__feats .introfeat__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.about-home__feats .introfeat b { font-size: .86rem; letter-spacing: 0; color: var(--text); margin-bottom: 2px; word-break: keep-all; }
.about-home__feats .introfeat small { font-size: .74rem; color: var(--text-muted); line-height: 1.4; word-break: keep-all; }

/* 경영이념 3카드 */
.phil3 { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.phil { display: flex; align-items: center; gap: var(--space-6); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-8); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.phil:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.phil__ic { flex: none; width: 58px; height: 58px; color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; }
.phil__ic svg { width: 54px; height: 54px; }
.phil__body { min-width: 0; }
.phil__cat { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: var(--eyebrow); }
.phil__title { display: block; font-size: 1.12rem; font-weight: 800; color: var(--text); margin: var(--space-1) 0 var(--space-2); line-height: 1.35; word-break: keep-all; }
.phil__desc { color: var(--text-muted); line-height: 1.6; font-size: .88rem; word-break: keep-all; }
@media (max-width: 860px) { .phil3 { grid-template-columns: 1fr; } }

/* 가로 연혁 타임라인 */
.htimeline { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.htimeline::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--border); }
.htl { position: relative; padding-right: var(--space-5); }
.htl__dot { display: block; position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); margin-bottom: var(--space-5); }
.htl:last-child .htl__dot { background: var(--brand); box-shadow: 0 0 0 5px var(--surface-brand); }
.htl__year { display: block; font-size: var(--fs-h3); font-weight: 800; color: var(--brand); margin-bottom: var(--space-2); }
.htl__text { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
@media (max-width: 860px) {
  .htimeline { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-6); }
  .htimeline::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .htl { padding: 0 0 0 var(--space-8); }
  .htl__dot { position: absolute; left: 0; top: 2px; margin: 0; }
}

/* 생산시설 및 강점(좌 사진 + 우 통계/설명) */
.fac2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-12); align-items: center; }
/* 생산시설: 사진 좌측(넓게), 카드(지표) 우측 정사각 2×2 */
/* 생산시설: 풀와이드 사진 배경 + 지표 글래스 카드 오버레이 */
.facshow { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.facshow__media { position: absolute; inset: 0; }
.facshow__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.facshow__media .ice-slideshow { display: block; height: 100%; }
.facshow__media .ice-slideshow__frame { aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; }
.facshow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(9,26,58,0) 55%, rgba(9,26,58,.22) 100%); pointer-events: none; z-index: 2; }
/* 참고 이미지 카드 삽입형 */
.facshow__cards { position: absolute; z-index: 3; top: 50%; left: var(--space-8); transform: translateY(-50%); width: min(19.4%, 193px); height: auto; display: block; }
@media (max-width: 768px) { .facshow__cards { position: static; transform: none; width: 100%; max-width: 340px; margin: var(--space-5) auto 0; right: auto; } }
.facshow__stats { position: absolute; z-index: 3; top: 50%; right: var(--space-8); transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); width: min(27%, 258px); }
/* 생산시설 지표 카드(HTML) — 사진 좌측 오버레이 */
.faccards { position: absolute; z-index: 3; top: 50%; left: 62px; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 10px); width: min(30%, 300px); pointer-events: none; }
/* 좌측 카드가 이전 화살표를 가리지 않도록 화살표를 위로 올림 */
.facshow .ice-slideshow__arrow { z-index: 4; }
.faccard { display: flex; align-items: center; gap: clamp(8px, 0.9vw, 12px); background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 6px 18px rgba(9,26,58,.15); padding: clamp(7px, 0.8vw, 11px) clamp(10px, 1vw, 14px); }
.faccard__ic { flex: none; width: clamp(40px, 4.2vw, 54px); height: auto; }
.faccard__ic img { width: 100%; height: auto; display: block; }
.faccard__body { min-width: 0; }
.faccard__label { display: block; font-size: clamp(.72rem, 0.92vw, .84rem); font-weight: 700; color: var(--text); line-height: 1.2; }
.faccard__num { display: block; font-size: clamp(1.05rem, 1.55vw, 1.4rem); font-weight: 800; color: #1c5fc0; line-height: 1.15; margin: 1px 0; white-space: nowrap; }
.faccard__desc { display: block; font-size: clamp(.62rem, 0.76vw, .74rem); color: var(--text-muted); line-height: 1.2; }
@media (max-width: 768px) {
  .faccards { position: static; transform: none; width: auto; max-width: 420px; margin: var(--space-5) auto 0; }
}
/* 아이콘 좌측 + 라벨/숫자/설명 우측(시안형) */
.facstat.facstat--row { aspect-ratio: auto; display: flex; flex-direction: row; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-4) var(--space-5); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 26px rgba(9,26,58,.16); }
.facstat--row .facstat__ic { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 50%; background: var(--surface-brand); color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; }
.facstat--row .facstat__ic svg { width: 28px; height: 28px; }
.facstat--row .facstat__txt { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: 1px solid var(--border); min-width: 0; }
.facstat--row .facstat__top { font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.facstat--row b { font-size: 1.32rem; font-weight: 800; color: var(--eyebrow); line-height: 1.15; margin: 1px 0; white-space: nowrap; }
.facstat--row b .facstat__u { font-size: .62em; }
.facstat--row b sup { color: var(--brand); font-size: .58em; }
.facstat--row small { font-size: .72rem; color: var(--text-muted); }
@media (max-width: 768px) {
  .facshow { aspect-ratio: auto; display: flex; flex-direction: column; }
  .facshow__media { position: relative; aspect-ratio: 16 / 10; }
  .facshow::after { display: none; }
  .facshow__stats { position: static; transform: none; width: auto; grid-template-columns: 1fr; padding: var(--space-4); background: var(--surface-2); }
  .facstat.facstat--row { background: var(--surface); border-color: var(--border); }
}
/* 계열사·사업장 카드 그리드 */
.affgrid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.affcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.affcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.affcard__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.affcard:hover .affcard__media img { transform: scale(1.05); }
.affcard__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.affcard__sector { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--brand); text-transform: uppercase; }
.affcard__name { font-size: 1.2rem; font-weight: 800; color: var(--text); margin: var(--space-2) 0 var(--space-3); }
.affcard__desc { color: var(--text-muted); font-size: .9rem; line-height: 1.65; margin-bottom: var(--space-4); word-break: keep-all; }
.affcard__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.affcard__list li { display: flex; gap: var(--space-3); font-size: .9rem; color: var(--text); line-height: 1.5; }
.affcard__list b { flex: none; width: 3.4em; color: var(--text-muted); font-weight: 700; }
.affcard__map { margin-top: auto; font-size: .88rem; font-weight: 700; color: var(--accent-hover); }
@media (max-width: 780px) { .affgrid { grid-template-columns: 1fr; } }
/* 그룹 관계도(조직도형) — 직영=남색(--eyebrow) / 계열사=청록(#1a9e91) 색상 구분 */
.netchart { --net-teal: #1a9e91; --net-teal-tint: rgba(26,158,145,.1); --net-navy-tint: rgba(27,65,149,.07); --net-line: #cdd8ea; margin-top: var(--space-8); display: flex; flex-direction: column; align-items: center; }
/* 루트 박스(로고 배지 + 이름) */
.netchart__root { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: #2b6cb8; color: #fff; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-12); box-shadow: var(--shadow-md); }
.netchart__root-top { display: inline-flex; align-items: center; gap: .55em; }
.netchart__logo { height: 24px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.netchart__root b { font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; }
.netchart__root-sub { font-size: .92rem; opacity: .85; }
.netchart__branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); position: relative; padding-top: calc(2 * var(--space-6)); width: 100%; max-width: 900px; }
.netchart__branches::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-6); background: var(--net-line); }
.netchart__group { position: relative; display: flex; flex-direction: column; align-items: center; }
.netchart__group::before { content: ""; position: absolute; top: calc(-1 * var(--space-6)); left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-6); background: var(--net-line); }
.netchart__group::after { content: ""; position: absolute; top: calc(-1 * var(--space-6)); height: 2px; background: var(--net-line); }
.netchart__group:first-child::after { left: 50%; right: calc(-0.5 * var(--space-12)); }
.netchart__group:last-child::after { right: 50%; left: calc(-0.5 * var(--space-12)); }
/* 그룹 헤드: 왼쪽 원형 배지 + 밝은 pill */
.netchart__grouphead { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-3); background: #2b6cb8; color: #fff; font-weight: 800; font-size: 1.02rem; padding: 4px var(--space-8) 4px 4px; border-radius: 999px; margin-bottom: var(--space-6); }
.netchart__gh-ic { flex: none; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: #2b6cb8; border: 2.5px solid #2b6cb8; display: inline-flex; align-items: center; justify-content: center; margin: -22px var(--space-1) -22px -24px; box-shadow: 0 2px 8px rgba(43,108,184,.2); }
.netchart__gh-ic svg { width: 30px; height: 30px; }
.netchart__gh-ic--img img { width: 48px; height: 48px; object-fit: contain; display: block; }
.netnode__ic--img img { width: 42px; height: 42px; object-fit: contain; display: block; }
.netchart__group--aff .netchart__grouphead { background: var(--net-teal); color: #fff; }
.netchart__group--aff .netchart__gh-ic { background: #fff; color: var(--net-teal); border-color: var(--net-teal); }
/* 노드: 그룹당 카드 2개 가로 배열 */
.netchart__nodes { list-style: none; margin: 0; padding: var(--space-7) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); width: 100%; position: relative; }
/* 가로 연결선 양 끝을 실제 노드 중심(2열·gap 보정)에 맞춤: 노드 중심 = 25% - gap/4 */
.netchart__nodes::before { content: ""; position: absolute; top: 0; left: calc(25% - 0.25 * var(--space-4)); right: calc(25% - 0.25 * var(--space-4)); height: 2px; background: var(--net-line); }
.netchart__nodes::after { content: ""; position: absolute; top: calc(-1 * var(--space-6)); left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-6); background: var(--net-line); }
.netchart__nodes li { position: relative; display: flex; align-items: center; gap: var(--space-4); background: #fff; border: 1px solid rgba(43,108,184,.22); border-radius: var(--radius-lg); padding: var(--space-5); text-align: left; box-shadow: var(--shadow-sm); }
.netchart__nodes li::before { content: ""; position: absolute; top: calc(-1 * var(--space-7)); left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-7); background: var(--net-line); }
.netchart__group--aff .netchart__nodes li { border-color: rgba(26,158,145,.28); }
.netnode__ic { flex: none; color: #2b6cb8; display: inline-flex; }
.netnode__ic svg { width: 38px; height: 38px; }
.netchart__group--aff .netnode__ic { color: var(--net-teal); }
.netnode__tx b { display: block; font-weight: 800; color: var(--text); font-size: .98rem; }
.netnode__tx small { display: block; font-weight: 600; color: var(--text-muted); font-size: .8rem; margin-top: 2px; }
@media (max-width: 700px) { .netchart__branches { grid-template-columns: 1fr; gap: var(--space-8); } .netchart__branches::before, .netchart__group::before, .netchart__group::after { display: none; } }
@media (max-width: 460px) { .netchart__nodes { grid-template-columns: 1fr; } .netchart__nodes::before, .netchart__nodes::after, .netchart__nodes li::before { display: none; } }
/* 계열사 페이지 중앙 헤더: 대시 없는 eyebrow + 제목 밑줄 */
#affiliates .section__head--center .eyebrow::before,
#aff-network .section__head--center .eyebrow::before { display: none; }
#affiliates .section__head--center .section__title,
#aff-network .section__head--center .section__title { position: relative; padding-bottom: var(--space-4); }
#affiliates .section__head--center .section__title::after,
#aff-network .section__head--center .section__title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 46px; height: 3px; border-radius: 2px; background: var(--brand); }
/* 소개문 한 줄 표현 */
#affiliates .section__head { max-width: none; }
#affiliates .section__lead { white-space: nowrap; }
@media (max-width: 1000px) { #affiliates .section__lead { white-space: normal; } }
.fac2__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.fac2__body .section__head { margin-bottom: var(--space-6); }
.fac2__eyebrow { display: inline-flex; margin-bottom: var(--space-3); }
.fac2__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: 0 0 var(--space-3); }
.fac2__desc { color: var(--text-muted); line-height: 1.8; margin: var(--space-6) 0; }
.fac2__desc--top { margin: 0 0 var(--space-8); max-width: 80ch; font-size: var(--fs-lead); }
.facstats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.facstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-2); text-align: center; }
.facstat__ic { color: var(--brand); display: block; margin: 0 auto var(--space-2); }
.facstat__ic svg { width: 26px; height: 26px; }
.facstat b { display: block; font-size: 1.22rem; font-weight: 800; color: #143b63; line-height: 1.1; }
.facstat b .facstat__u { font-size: .62em; font-weight: 700; }
.facstat b sup { color: var(--accent); font-size: .55em; }
.facstat small { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 980px) { .fac2 { grid-template-columns: 1fr; gap: var(--space-8); } }
@media (max-width: 560px) { .facstats { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   회사개요 카드 그리드 + 조직도(신규)
   ===================================================================== */
.ovcards { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ovcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: 5px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ovcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.ovcard__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-brand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.ovcard__ic svg { width: 24px; height: 24px; }
.ovcard__label { font-size: .95rem; font-weight: 700; color: var(--text); }
.ovcard__val { font-size: .84rem; color: var(--text-muted); line-height: 1.6; word-break: keep-all; }
@media (max-width: 900px) { .ovcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ovcards { grid-template-columns: 1fr; } }

/* 조직도 */
.orgchart { margin-top: var(--space-9); }
.orgchart__top { display: flex; flex-direction: column; align-items: center; }
/* 대표이사 카드: 작은 사진(좌) + 텍스트(우) 컴팩트 가로형(레퍼런스 비율) */
.orgceo { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-7) var(--space-3) var(--space-3); box-shadow: var(--shadow-md); }
.orgceo__photo { width: 76px; height: 84px; border-radius: var(--radius-sm); object-fit: cover; object-position: center 18%; border: 0; flex: none; display: block; }
.orgceo__txt { display: flex; flex-direction: column; justify-content: center; text-align: left; line-height: 1.3; padding: 0; }
.orgceo__txt b { display: block; color: var(--brand); font-size: .88rem; font-weight: 700; margin-bottom: 3px; }
.orgceo__txt span { font-size: 1.2rem; font-weight: 800; color: var(--text); letter-spacing: .04em; }
.orgchart__vline { width: 2px; height: var(--space-6); background: var(--brand); }
/* 총괄전무: 흰색 박스 */
.orgevp { background: var(--surface); color: var(--brand); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-weight: 800; border-radius: var(--radius-md); padding: var(--space-4) clamp(36px, 5vw, 64px); font-size: 1.05rem; }
.orgchart__teams { margin-top: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); position: relative; padding-top: calc(2 * var(--space-6)); }
/* 총괄전무 → 버스 중앙 세로선 (브랜드 블루) */
.orgchart__teams::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-6); background: var(--brand); }
.orgteam { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4) var(--space-6); box-shadow: var(--shadow-sm); }
/* 각 팀 위 가로 버스: 카드폭 + 갭 절반씩 그려 이어붙임(양 끝은 카드 중심에서 끝나 밖으로 안 삐져나감) */
.orgteam::after { content: ""; position: absolute; top: calc(-1 * var(--space-6)); left: calc(-0.5 * var(--space-3)); right: calc(-0.5 * var(--space-3)); height: 2px; background: var(--brand); }
.orgteam:first-child::after { left: 50%; }
.orgteam:last-child::after { right: 50%; }
/* 각 팀 세로 스텁: 버스 → 카드 (버스와 동일 높이라 정확히 정렬) */
.orgteam::before { content: ""; position: absolute; top: calc(-1 * var(--space-6)); left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-6); background: var(--brand); }
.orgteam__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.orgteam__ic { width: 62px; height: 62px; border-radius: 50%; background: var(--surface-brand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.orgteam__ic svg { width: 30px; height: 30px; }
.orgteam__head b { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.orgteam__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.orgteam__list li { font-size: .92rem; color: var(--text-muted); padding: 5px 0 5px 14px; position: relative; }
.orgteam__list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) {
  .orgchart__teams { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding-top: var(--space-6); }
  .orgchart__teams::before, .orgteam::before, .orgteam::after { display: none; }
}
@media (max-width: 480px) { .orgchart__teams { grid-template-columns: 1fr; } }
/* 핵심 가치 아이콘(안전·품질·신뢰·기술혁신) */
.greeting__values {
  list-style: none; margin: var(--space-7) 0 0; padding: var(--space-6) 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 30px);
}
.gval { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 62px; }
.gval__icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface-brand); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.gval__icon svg { width: 23px; height: 23px; }
.gval__ko { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.gval__en { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--text-muted); }
/* 하단 인용 문구 바 */
.greeting-quote {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-10); padding: var(--space-7) var(--space-8);
  background: var(--green-deep); color: #fff; border-radius: var(--radius-lg);
}
.greeting-quote__mark { font-family: Georgia, 'Times New Roman', serif; font-size: 3rem; line-height: .6; color: var(--accent); flex: 0 0 auto; }
.greeting-quote__text { margin: 0; font-size: var(--fs-lead); font-weight: 600; line-height: 1.5; }
@media (max-width: 720px) { .greeting-quote { flex-direction: column; text-align: center; gap: var(--space-3); } }
.greeting__p { color: var(--text-muted); margin-top: var(--space-6); line-height: 1.95; }
.greeting__sign { margin-top: var(--space-5); font-size: 1.2em; font-weight: 700; color: var(--text); }
/* 대표이사 이름: 손글씨 필체 + 앞 간격 */
.greeting__sign .sign-name { margin-left: 1.1em; font-family: 'Nanum Pen Script', 'Yomogi', cursive; font-weight: 400; font-size: 2.04em; letter-spacing: .3em; line-height: 1; color: var(--slate-900); }
/* 대표이사 자필 서명 이미지(실제 필체) */
.greeting__sign .sign-img { display: inline-block; height: 2.98em; width: auto; margin-left: 1em; vertical-align: middle; }
/* 영문: 회사명 줄 아래에 이름을 회사명 중앙 기준으로 배치 */
html[lang="en"] .greeting__sign { display: inline-block; }
html[lang="en"] .greeting__sign .sign-name { display: block; margin-left: 0; margin-top: .25em; text-align: center; }

/* 회사 개요 (정의 목록) */
.overview {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-sm);
}
.overview__row { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--border); }
.overview__row:first-child { border-top: 0; }
.overview__row dt {
  background: var(--surface-2); padding: var(--space-5) var(--space-6);
  font-weight: 700; color: var(--text); border-right: 1px solid var(--border);
}
.overview__row dd { padding: var(--space-5) var(--space-6); color: var(--text-muted); }

/* 연혁 타임라인 */
.timeline { position: relative; margin-left: 8px; padding-left: var(--space-7); }
.timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--green-200); }
.timeline__item { position: relative; display: flex; gap: var(--space-5); padding: var(--space-3) 0; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-7) - 4px); top: 12px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--green-200);
}
.timeline__year { flex: 0 0 64px; font-weight: 800; color: var(--brand); }
.timeline__text { color: var(--text); }

/* 조직도 (트리형) */
.orgc { width: 100%; }
.orgc__head { display: flex; flex-direction: column; align-items: center; }
.orgc__node {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .55rem 1.8rem; border-radius: 12px; box-shadow: var(--shadow-sm);
}
.orgc__node small { font-size: .6rem; letter-spacing: .18em; font-weight: 700; }
.orgc__node b { font-size: 1.05rem; }
.orgc__node--ceo { background: var(--green-deep); color: #fff; }
.orgc__node--ceo small { color: #8fb0cc; }
.orgc__node--evp { background: #fff; border: 2px solid var(--green-500); color: var(--text); }
.orgc__node--evp small { color: var(--green-600); }
.orgc__line { width: 2px; height: 24px; background: var(--green-300); }
/* 부서 행 + 버스 커넥터 */
.orgc__depts { display: flex; justify-content: center; align-items: flex-start; }
.orgc__dept { position: relative; padding: 24px var(--space-3) 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.orgc__dept::before { /* 세로 드롭 */
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 24px;
  background: var(--green-300); transform: translateX(-1px);
}
.orgc__dept::after { /* 가로 버스 */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--green-300);
}
.orgc__dept:first-child::after { left: 50%; }
.orgc__dept:last-child::after { right: 50%; }
.orgc__box {
  min-width: 130px; padding: var(--space-4); text-align: center; font-weight: 700; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.orgc__group {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 150px;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; box-shadow: var(--shadow-sm); text-align: center;
}
.orgc__gtitle { font-weight: 700; color: var(--text); margin-bottom: var(--space-1); }
.orgc__pill {
  font-size: .85rem; font-weight: 600; color: var(--green-700);
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: 8px; padding: .4rem .3rem;
}
/* 관계사 */
.orgc__divider { border-top: 1px dashed var(--border-strong); margin: var(--space-8) 0 var(--space-6); }
.orgc__aff-label { font-size: .9rem; color: var(--text); margin-bottom: var(--space-4); }
.orgc__aff-label b { color: var(--green-600); letter-spacing: .12em; margin-right: var(--space-2); }
.orgc__aff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.orgc__aff-item {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px dashed var(--green-300); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); background: var(--surface-brand);
}
.orgc__aff-item i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); flex: 0 0 auto; }
.orgc__aff-item b { font-size: 1rem; color: var(--text); }
@media (max-width: 860px) {
  .orgc__depts { flex-wrap: wrap; gap: var(--space-4); }
  .orgc__dept { padding-top: 0; flex: 1 1 140px; }
  .orgc__dept::before, .orgc__dept::after { display: none; }
  .orgc__aff-grid { grid-template-columns: 1fr; }
}

/* 계열사 탭 전환(상단 탭 클릭 → 하단 상세) — 참고: 삼정가스그룹 계열사 페이지 */
.afftabs {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: var(--space-8);
}
.afftab {
  flex: 1 1 200px; min-width: 160px; padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
  background: #fff; border: 0; cursor: pointer; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  border-right: 1px solid var(--border); border-top: 1px solid var(--border);
  transition: var(--transition);
}
/* 탭 아이콘 (조직도 아이콘 재사용) */
.afftab__ic { flex: none; display: inline-flex; }
.afftab__ic img { width: 26px; height: 26px; object-fit: contain; display: block; }
.afftab.is-active .afftab__ic img { filter: brightness(0) invert(1); }
/* 첫 줄 상단선·좌측 첫 칸 정리 */
.afftab:hover { background: var(--surface-2); color: var(--text); }
.afftab.is-active { background: var(--green-800); color: #fff; }
/* 탭 활성색: 직영(화성·시화)=남색, 계열사(부성·신라)=청록 */
.afftab.is-active[data-aff="hwaseong"], .afftab.is-active[data-aff="sihwa"] { background: #2b6cb8; }
.afftab.is-active[data-aff="busung"], .afftab.is-active[data-aff="sinla"] { background: #1a9e91; }
/* 지도 버튼도 각 그룹색으로 통일 */
#aff-hwaseong .affpanel__map, #aff-sihwa .affpanel__map { background: #2b6cb8; }
#aff-hwaseong .affpanel__map:hover, #aff-sihwa .affpanel__map:hover { background: #245a99; }
#aff-busung .affpanel__map, #aff-sinla .affpanel__map { background: #1a9e91; }
#aff-busung .affpanel__map:hover, #aff-sinla .affpanel__map:hover { background: #15837a; }
.affpanels { position: relative; }
.affpanel { display: none; }
.affpanel.is-active { display: block; animation: affFade .3s ease; }
@keyframes affFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.affpanel__name { font-size: var(--fs-h2); font-weight: 700; color: var(--text); margin: 0; word-break: keep-all; }
.affpanel__eyebrow { display: inline-block; margin-top: var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.affpanel__cat { margin: var(--space-2) 0 0; font-size: var(--fs-lead); font-weight: 700; color: var(--eyebrow); }
.affpanel__desc { margin: var(--space-3) 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text-muted); word-break: keep-all; }
.affpanel__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.affpanel__list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body); color: var(--text); }
.affpanel__ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-brand); color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; }
.affpanel__ic svg { width: 18px; height: 18px; }
.affpanel__list li > div { display: flex; flex-direction: column; }
.affpanel__list li b { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.affpanel__muted { color: var(--text-muted); font-style: italic; }
.affpanel__map { margin-top: var(--space-7); }
.affpanel__map svg { width: 18px; height: 18px; }
/* 화성공장·시화영업소: 사진이 와이드(1.68)라 정보 영역을 사진 높이에 맞춰 늘리고
   지도 버튼을 하단으로 밀어 버튼 하단을 사진 하단과 일직선으로 맞춤(문구 길이와 무관) */
#aff-hwaseong .affpanel__info, #aff-sihwa .affpanel__info, #aff-busung .affpanel__info, #aff-sinla .affpanel__info { align-self: stretch; display: flex; flex-direction: column; }
#aff-hwaseong .affpanel__list, #aff-sihwa .affpanel__list, #aff-busung .affpanel__list, #aff-sinla .affpanel__list { margin-top: var(--space-3); gap: var(--space-3); }
#aff-hwaseong .affpanel__map, #aff-sihwa .affpanel__map, #aff-busung .affpanel__map, #aff-sinla .affpanel__map { margin-top: auto; align-self: flex-start; }
/* 계열사 패널: 정보 + 사진 2단 배열 */
.affpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.affpanel__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
/* 전 사업장/계열사: 와이드 크롭 비율(1448:862) 통일 */
#aff-hwaseong .affpanel__media img, #aff-sihwa .affpanel__media img, #aff-busung .affpanel__media img, #aff-sinla .affpanel__media img { aspect-ratio: 1448 / 862; }
@media (max-width: 700px) { .affpanel__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .afftab { flex: 1 1 50%; } }

/* 오시는 길 — 지도 링크 */
.loc__map {
  display: inline-flex; align-items: center; gap: .3em; margin-top: var(--space-4);
  font-weight: 700; font-size: .9rem; color: var(--primary);
}
.loc__map::after { content: "→"; }
.loc__map:hover { color: var(--primary-hover); }

/* 오시는 길 — 본사·시흥공장 전경 사진 + 정보 */
.loc-hq__media img { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.loc-hq__info { margin-top: var(--space-7); }
.loc-hq__info .feature__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.loc-hq__info .feature__text { color: var(--text-muted); line-height: 1.7; }

/* 매출 성장 라인 차트 (참고: 네이버웹툰 MAU 스타일) */
.growth-chart { width: 100%; max-width: 960px; margin: 0 auto; }
.growth-chart svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); overflow: visible; }
.gc-arrow { filter: drop-shadow(0 6px 10px rgba(30,150,70,.22)); }
.gc-val text { font-size: 30px; font-weight: 800; fill: #1f2937; }
.gc-val .gc-val--peak { font-size: 37px; fill: #12873a; }
.gc-year text { font-size: 22px; font-weight: 700; fill: #64748b; }
/* 선이 왼쪽→오른쪽으로 그려지며 반복 (그리기 → 유지 → 사라짐 → 다시 그리기) */
@media (prefers-reduced-motion: no-preference) {
  .gc-line { stroke-dasharray: 832; animation: gcDraw 4.2s ease-in-out infinite; }
  @keyframes gcDraw {
    0%   { stroke-dashoffset: 832; opacity: 1; }   /* 숨김(왼쪽부터 시작) */
    45%  { stroke-dashoffset: 0;   opacity: 1; }   /* 왼→오 그리기 완료 */
    82%  { stroke-dashoffset: 0;   opacity: 1; }   /* 잠시 유지 */
    94%  { stroke-dashoffset: 0;   opacity: 0; }   /* 서서히 사라짐 */
    95%  { stroke-dashoffset: 832; opacity: 0; }   /* 숨긴 채 초기화 */
    100% { stroke-dashoffset: 832; opacity: 0; }
  }
}

/* 제품: 4열 카드 + 분할 레이아웃 */
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
/* 단독 카드(드라이아이스 너겟·블록) — 중앙 정렬 */
.cards--solo { grid-template-columns: minmax(0, 460px); justify-content: center; }
.cards--solo + .cards { margin-top: var(--space-8); }

/* 섹션 내 소제목(드라이아이스 상품 소개 등) */
.subhead { font-size: 1.4rem; font-weight: 800; color: var(--slate-900); margin: var(--space-10) 0 var(--space-6); }
.subhead:first-child { margin-top: 0; }
.ice-intro { max-width: 860px; }
.ice-intro p { color: var(--text-muted); line-height: 1.8; margin-bottom: var(--space-4); }
/* 너겟 이미지 슬라이드쇼 (좌측 정렬 프레임 + 우측 캡션) */
.ice-slideshow { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: var(--space-8); align-items: center; }
.ice-slideshow__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-2); }
/* 하단 도트 가독성용 은은한 스크림 */
.ice-slideshow__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 68px; background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0)); pointer-events: none; z-index: 1; }
.ice-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.ice-slide.is-active { opacity: 1; }
.ice-slideshow__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(15,26,37,.5); color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: var(--transition);
}
.ice-slideshow__arrow:hover { background: rgba(15,26,37,.72); }
.ice-slideshow__arrow--prev { left: 12px; }
.ice-slideshow__arrow--next { right: 12px; }
.ice-slideshow__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.ice-slideshow__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.45); cursor: pointer; transition: var(--transition); }
.ice-slideshow__dots button.is-active { width: 22px; border-radius: 5px; background: #fff; }
.ice-slideshow__cap .feature__title { margin-bottom: var(--space-3); }
.ice-slideshow__cap .feature__text { margin-bottom: var(--space-3); }
@media (max-width: 860px) { .ice-slideshow { grid-template-columns: 1fr; gap: var(--space-6); } }

/* 드라이아이스 제품 라인업 상세 */
/* 너겟 탭 오른쪽 경계를 좌측 이미지(560px) 오른쪽 라인과 일치시킴(nav 좌측 인셋 6px 보정) */
#ice .prodlineup__nav { display: grid; grid-template-columns: minmax(0, 554px) 1fr; }
#ice .ice-slideshow { align-items: stretch; }
#ice .prodlineup__panel .ice-slideshow__frame { aspect-ratio: auto; height: 100%; }
#ice .iceline__detail { min-height: 486px; }
.iceline__title { font-size: 1.6rem; font-weight: 800; color: var(--text); margin: 0 0 var(--space-2); }
.iceline__title em { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-left: .3em; }
.iceline__lead { color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--space-4); word-break: keep-all; }
.iceline__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.iceline__rows > li { display: grid; grid-template-columns: 40px 48px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.iceline__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; }
.iceline__ic svg { width: 20px; height: 20px; }
/* 원형 배경이 포함된 아이콘 이미지 — 컨테이너 자체 원형 배경 제거 */
.iceline__ic:has(img) { width: 40px; height: 40px; background: none; }
.iceline__ic img { width: 40px; height: 40px; object-fit: contain; }
.iceline__featic img { width: 48px; height: 48px; object-fit: contain; display: block; }
.iceline__label { font-size: .9rem; font-weight: 700; color: var(--text); }
.iceline__rtx { display: flex; flex-direction: column; gap: 2px; }
.iceline__main { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.5; word-break: keep-all; }
.iceline__sub { font-size: .82rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.iceline__feats { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.iceline__feats > li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-4) var(--space-3); background: var(--surface-brand); border: 1px solid var(--border); border-radius: var(--radius-md); }
.iceline__featic { grid-row: 1 / 3; color: var(--brand); }
.iceline__featic svg { width: 38px; height: 38px; }
.iceline__feats b { font-size: .9rem; font-weight: 800; color: var(--brand); }
.iceline__feats > li > span:last-child { font-size: .78rem; color: var(--text-muted); line-height: 1.45; word-break: keep-all; }
.iceline__note { margin: var(--space-4) 0 0; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 620px) { .iceline__feats { grid-template-columns: 1fr; } }

/* 제품 규격 표 + 치수 도면 */
.spec-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.spec-wrap { max-width: 720px; }
.spec-note { margin-top: var(--space-4); font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.spec-note b { color: var(--brand); }
.spec-figure { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.spec-figure img { width: 100%; display: block; }
.spec-figure figcaption { margin-top: var(--space-3); text-align: center; font-size: .85rem; color: var(--text-muted); }
@media (max-width: 860px) { .spec-layout { grid-template-columns: 1fr; } }

/* 제품 특성·주요 용도 — 왼쪽 이미지 + 오른쪽 콘텐츠 */
.ice-overview { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-10); align-items: start; }
.ice-overview__media { position: sticky; top: 100px; }
.ice-overview__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.ice-overview__body .subhead:first-child { margin-top: 0; }
.ice-overview .ice-intro { max-width: none; }
.ice-use-cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .ice-overview { grid-template-columns: 1fr; gap: var(--space-8); }
  .ice-overview__media { position: static; max-width: 480px; }
}
@media (max-width: 560px) { .ice-use-cards { grid-template-columns: 1fr; } }

/* 시설시공 — 왼쪽 시공 현장 사진 + 오른쪽 카드 3개(세로) */
.const-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-10); align-items: start; }
.const-layout__media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.const-cards { grid-template-columns: 1fr; gap: var(--space-5); }
@media (max-width: 960px) {
  .const-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .const-layout__media { max-width: 640px; }
}
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-12); align-items: center; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* 산업용·의료용 가스 — 왼쪽 실린더 이미지 + 오른쪽 제목·카드 2열 */
.gas-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-10); align-items: center; }
.gas-layout__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.gas-layout__body .section__head { margin-bottom: var(--space-7); }
.gas-cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) {
  .gas-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .gas-layout__media { max-width: 560px; }
}
@media (max-width: 560px) { .gas-cards { grid-template-columns: 1fr; } }

/* 제품 카테고리 라인업 (산업용가스: 용도별 5분류) */
/* 제품 라인업 — 좌 카테고리 사이드바 + 우 제품 카드 */
.prodlineup { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-8); align-items: start; margin-top: var(--space-8); }
.prodlineup__nav { display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 108px; }
.prodlineup__btn { text-align: left; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.prodlineup__btn:hover { border-color: var(--green-200); color: var(--brand); }
.prodlineup__btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.prodlineup__title { font-size: var(--fs-h2); font-weight: 800; color: var(--text); }
.prodlineup__desc { color: var(--text-muted); margin: var(--space-2) 0 var(--space-6); line-height: 1.7; }
.prodlineup__panel[hidden] { display: none; }
.prodlineup__panel { animation: gasFade .35s ease; }
.prodlineup .prodgrid { grid-template-columns: repeat(4, 1fr); margin-top: 0; gap: var(--space-3); }
@media (max-width: 900px) {
  .prodlineup { grid-template-columns: 1fr; gap: var(--space-6); }
  .prodlineup__nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .prodlineup__btn { flex: 1 1 auto; text-align: center; }
  .prodlineup .prodgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .prodlineup .prodgrid { grid-template-columns: 1fr; } }

.prodcat { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.prodcat__card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-7);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prodcat__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.prodcat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface-brand); color: var(--brand); margin-bottom: var(--space-5);
}
.prodcat__icon svg { width: 26px; height: 26px; }
.prodcat__title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: var(--space-3); }
.prodcat__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; flex: 1; }
.prodcat__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-5); }
.prodcat__tag {
  font-size: 12px; font-weight: 600; color: var(--green-700);
  background: var(--surface-3); border-radius: var(--radius-pill); padding: 4px 11px;
}

/* 공급 흐름 다이어그램 */
.flow { display: flex; align-items: stretch; gap: var(--space-2); }
.flow__node {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.flow__step {
  align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: var(--brand); padding: .2rem .6rem; border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.flow__title { font-size: 1.05rem; color: var(--text); margin-bottom: var(--space-2); }
.flow__text { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }
.flow__node--split { background: transparent; border: 0; border-top: 0; box-shadow: none; padding: 0; gap: var(--space-2); }
.flow__node--split .flow__step { margin-bottom: var(--space-2); }
.flow__sub { background: var(--surface-brand); border: 1px solid var(--green-200); border-radius: var(--radius-md); padding: var(--space-4); }
.flow__sub h4 { font-size: .95rem; color: var(--primary); margin-bottom: .2rem; }
.flow__sub p { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.flow__arrow { flex: 0 0 auto; align-self: center; color: var(--green-400); }
.flow__arrow::after { content: "→"; font-size: 1.6rem; font-weight: 800; }
.flow-note {
  margin-top: var(--space-5); display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
}
.flow-note strong { color: var(--primary); }
.flow-note span { color: var(--text-muted); font-size: .92rem; }
@media (max-width: 860px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); }
}

/* 공급 방식 — 번호 + 단계 + 이미지 리스트 */
.supply-list { display: flex; flex-direction: column; }
.supply-step {
  display: grid; grid-template-columns: 70px 1fr 300px;
  gap: var(--space-7); align-items: center;
  padding-block: var(--space-6); border-top: 1px solid var(--border);
}
.supply-step:first-child { border-top: 0; }
.supply-step__num { font-size: 1.7rem; font-weight: 800; color: var(--slate-300); line-height: 1; }
.supply-step__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.supply-step__title { font-size: 1.45rem; font-weight: 800; color: var(--text); margin: var(--space-2) 0 var(--space-3); }
.supply-step__text { color: var(--text-muted); line-height: 1.7; max-width: 560px; }
.supply-step__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-1); }
.supply-sub__title { font-weight: 700; color: var(--primary); margin-bottom: .2rem; }
.supply-sub__text { color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.supply-step__media img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.supply-usebox {
  aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-brand); border: 1px solid var(--green-200); border-radius: var(--radius-md);
}
.supply-badges { display: inline-flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.badge { padding: .35rem .9rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; }
.badge--dark { background: var(--green-deep); color: #fff; }
.badge--green { background: var(--green-600); color: #fff; }
.supply-usebox__cap { font-weight: 700; color: var(--brand); }

@media (max-width: 860px) {
  .supply-step { grid-template-columns: 40px 1fr; }
  .supply-step__num { font-size: 1.4rem; }
  .supply-step__media { grid-column: 1 / -1; }
  .supply-step__cols { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* 고객 저장설비 공급 다이어그램 */
.diagram-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-8); overflow-x: auto;
}
.diagram {
  display: grid;
  grid-template-columns: auto auto auto 36px auto auto 150px auto 162px auto auto auto auto;
  grid-template-rows: auto auto;
  align-items: center; justify-items: center;
  column-gap: 8px; row-gap: 22px; min-width: 1040px;
}
.dia-fork { width: 36px; height: 100%; align-self: stretch; }
.dia-box { width: 100%; }
.dia-tanker { flex: 0 0 auto; text-align: center; width: 150px; }
.dia-tanker img { width: 150px; height: 100px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.dia-tanker b { display: block; margin-top: .4rem; font-size: .95rem; color: var(--text); }
.dia-tanker span { font-size: .7rem; letter-spacing: .12em; color: var(--text-muted); }
.dia-tank {
  flex: 0 0 auto; width: 132px; height: 96px; border: 2px solid var(--green-500);
  border-radius: var(--radius-md); background: linear-gradient(180deg, var(--green-50), #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.dia-tank small { font-size: .62rem; letter-spacing: .12em; color: var(--green-600); font-weight: 700; }
.dia-tank b { font-size: 1.05rem; color: var(--text); }
.dia-tank span { font-size: .72rem; color: var(--text-muted); }
.dia-paths { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.dia-row { display: flex; align-items: center; gap: var(--space-2); }
.dia-arrow { flex: 0 0 auto; position: relative; color: var(--slate-500); font-weight: 800; }
.dia-arrow::after { content: "→"; font-size: 1.1rem; }
.dia-arrow--g { color: var(--green-500); }
.dia-arrow--supply::before {
  content: attr(data-label); position: absolute; top: -1.3em; left: 50%; transform: translateX(-50%);
  font-size: .72rem; color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.dia-badge { flex: 0 0 auto; padding: .35rem .75rem; border-radius: 8px; font-weight: 700; font-size: .85rem; }
.dia-badge--green { background: var(--green-600); color: #fff; }
.dia-badge--dark { background: var(--green-deep); color: #fff; }
.dia-box {
  flex: 0 0 auto; min-width: 116px; padding: .55rem .8rem; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.dia-box b { font-size: .85rem; font-weight: 700; color: var(--text); }
.dia-ic { display: block; margin: 0 auto .35rem; }
.dia-ic--bars { width: 12px; height: 14px; background: repeating-linear-gradient(90deg, var(--green-600) 0 3px, #fff 3px 6px); }
.dia-ic--dots {
  width: 16px; height: 4px; background:
    radial-gradient(circle 2px at 2px 2px, var(--green-600) 99%, transparent 100%),
    radial-gradient(circle 2px at 8px 2px, var(--green-600) 99%, transparent 100%),
    radial-gradient(circle 2px at 14px 2px, var(--green-600) 99%, transparent 100%);
}
.dia-ic--diamond { width: 11px; height: 11px; background: var(--green-600); transform: rotate(45deg); }
.dia-ic--pill { width: 18px; height: 8px; border-radius: 999px; background: var(--green-300); }
.dia-customer {
  position: relative; width: 132px; text-align: center; padding: .7rem .6rem .8rem;
  border: 2px solid var(--slate-900); border-top: 0; border-radius: 0 0 12px 12px;
}
.dia-customer::before {
  content: "▲ ▲ ▲"; position: absolute; top: -1.05em; left: 0; right: 0;
  font-size: .7rem; letter-spacing: 2px; color: var(--slate-900);
}
.dia-customer b { display: block; font-size: 1.05rem; color: var(--text); }
.dia-customer span { display: block; font-size: .72rem; color: var(--text-muted); }
.dia-bars { display: flex; justify-content: center; gap: 4px; margin-top: .45rem; }
.dia-bars i { width: 8px; height: 14px; background: #facc15; border-radius: 2px; }

/* 품질: 규격 표 */
.spec-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.spec-table th, .spec-table td { padding: var(--space-4) var(--space-5); text-align: left; border-top: 1px solid var(--border); font-size: .95rem; }
.spec-table thead th { background: var(--primary); color: #fff; border-top: 0; font-weight: 700; }
.spec-table tbody tr:nth-child(even) { background: var(--surface-2); }
.spec-table td:last-child { font-weight: 700; color: var(--brand); }

/* FAQ */
/* FAQ 헤더: 좌측 타이틀 + 우측 안내 문구 */
.faq__head.section__head { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.faq__note { margin-left: auto; }
.faq__note { color: var(--text-muted); font-size: .82rem; margin: 0; text-align: right; }
/* FAQ 카드(아코디언): 질문만 보이고, 화살표 클릭 시 답변이 아래로 펼쳐짐 */
.faq { display: flex; flex-direction: column; gap: var(--space-4); }
.faq__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(20,40,70,.05); transition: box-shadow .2s ease, border-color .2s ease; overflow: hidden; }
.faq__item:hover { box-shadow: 0 4px 14px rgba(20,40,70,.09); border-color: var(--green-200); }
.faq__row { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.faq__badge { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #1c5fc0; color: #fff; font-weight: 800; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; }
.faq__q { flex: 1 1 auto; font-weight: 700; color: var(--text); }
.faq__chevron { flex: none; width: 20px; height: 20px; color: #9aa6b2; transition: transform .25s ease; }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__panel { display: none; padding: 0 var(--space-5) var(--space-5); }
.faq__item.is-open .faq__panel { display: block; }
.faq__a { margin: 0 0 0 calc(34px + var(--space-4)); color: var(--text-muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 720px) {
  .faq__a { margin-left: 0; }
}

/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width: 960px) {
  .highlight__grid { grid-template-columns: 1fr; margin-top: calc(-1 * var(--space-10)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > .footer__col:nth-child(3)::before { display: none; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .org__depts { grid-template-columns: repeat(3, 1fr); }
  .greeting, .split { grid-template-columns: 1fr; gap: var(--space-7); }
  .overview__row { grid-template-columns: 130px 1fr; }
}
/* 헤더: 가로 메뉴가 좁아져 겹치기 전에 햄버거로 전환 */
/* 중간 화면(14인치 노트북 등): 전체 메뉴 유지하되 간격·글자 컴팩트하게 */
@media (max-width: 1080px) and (min-width: 821px) {
  .site-header__inner { gap: var(--space-4); }
  .brand { margin-right: var(--space-3); }
  .brand__name { font-size: 1.15rem; letter-spacing: .04em; }
  .nav { gap: var(--space-4); }
  .nav__menu { gap: clamp(1.4rem, 3.4vw, 4.5rem); }
  .nav__link { font-size: .92rem; }
  .toolbar { gap: var(--space-3); }
  .toolbar .btn { padding: .6em 1.15em; font-size: .86rem; }
  .lang-dropdown__toggle { padding: .35rem .6rem; font-size: .78rem; }
}

@media (max-width: 820px) {
  .nav__menu {
    display: none; margin: 0;
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border); padding: var(--space-3);
    box-shadow: var(--shadow-md);
  }
  .nav__menu.is-open { display: flex; }
  .nav__link { padding: .8rem .4rem; }
  .nav__link::after { display: none; }
  .nav-toggle { display: block; }
  /* 모바일: 하위 메뉴를 접힌 상태로 두고 상위 메뉴 탭하면 펼침 */
  .nav__item { display: block; width: 100%; }
  .nav__sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 var(--space-2) var(--space-5);
    display: none;
  }
  .nav__sub::before { display: none; }
  .nav__item.is-open .nav__sub { display: block; }
  .nav__sub a { padding: .5rem .4rem; font-weight: 500; color: var(--text-muted); text-align: left; }
  /* 로고 + 회사명은 왼쪽, 언어·햄버거는 오른쪽 */
  .nav { gap: var(--space-2); flex: 0 0 auto; margin-left: auto; }
  .toolbar { gap: var(--space-2); }
  .toolbar .btn { display: none; }
  .lang-dropdown__toggle { padding: .35rem .55rem; font-size: .76rem; }
  .brand { gap: 8px; margin-right: 0; }
  .site-header__inner { gap: var(--space-3); }
}

@media (max-width: 680px) {
  .brand__en { display: none; }
  .brand__name { font-size: .95rem; }
  .brand__logo { height: 30px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .footer__grid > .footer__col:nth-child(2)::before,
  .footer__grid > .footer__col:nth-child(3)::before { display: none; }
  .cta { padding: var(--space-10) var(--space-6); }
  .hero { padding-block: var(--space-16) var(--space-20); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid__cell { min-height: 96px; font-size: .9rem; }
  .org__depts { grid-template-columns: repeat(2, 1fr); }
  .org__affiliate { flex-direction: column; align-items: flex-start; }
  /* 모바일 히어로: 폰트 축소로 가로 넘침 방지 */
  .hero__title { font-size: 1.85rem; }
  .hero__lead { font-size: 1rem; max-width: 100%; }
  .hero__trust { gap: var(--space-5); }
  .hero__trust-num { font-size: 1.3rem; }
}

/* =====================================================================
   홈 리뉴얼 섹션 (회사소개·팩토리·Why6·사업영역·제품슬라이드)
   ===================================================================== */
/* ② 회사소개 */
.about-home { display: block; text-align: left; }
.about-home__body .section__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); text-wrap: balance; }
.about-home__media { margin-top: var(--space-9); }
.about-home__media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.about-home__lead { color: var(--text-muted); line-height: 1.9; margin: var(--space-5) 0 var(--space-6); max-width: 72ch; }
.about-home__feats { margin: var(--space-6) 0 var(--space-7); }
.about-home__more { display: inline-flex; align-items: center; gap: .5em; }
/* 주요제품: 5개 카테고리 카드 */
.prodcats { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
.prodcats__item > a { display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.prodcats__item > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--cyan-line, #bcd6ea); }
.prodcat__media { display: block; aspect-ratio: 1 / 1; background: #eef2f6; overflow: hidden; }
.prodcat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.prodcat__media--foodbev img { object-position: 14% center; }
.prodcats__item > a:hover .prodcat__media img { transform: scale(1.05); }
.prodcat__body { padding: var(--space-4) var(--space-3) var(--space-5); text-align: center; border-top: 1px solid var(--border); }
.prodcat__name { display: block; font-size: 1rem; font-weight: 700; color: var(--text); word-break: keep-all; }
.prodcat__desc { display: block; margin-top: 6px; font-size: .78rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
@media (max-width: 900px) { .prodcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prodcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 브레드크럼 */
.breadcrumb { border-bottom: 1px solid var(--border); background: var(--surface); }
.breadcrumb__inner { display: flex; justify-content: center; align-items: center; gap: .5em; padding: var(--space-4) 0; font-size: .84rem; color: var(--text-muted); }
.breadcrumb__inner a { color: var(--text-muted); display: inline-flex; }
.breadcrumb__inner svg { width: 15px; height: 15px; }
.breadcrumb__inner .sep { opacity: .5; }
.breadcrumb__inner .cur { color: var(--text); font-weight: 600; }

/* 고객지원 CONTACT: 회사정보 + 오시는 길(정적 지도) */
.contact2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-10); align-items: stretch; }
.cinfo { display: flex; flex-direction: column; }
.cinfo__title, .cmap__title { font-size: var(--fs-h3); font-weight: 800; color: var(--text); margin: 0 0 var(--space-5); }
.cinfo__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cinfo__row { display: grid; grid-template-columns: 128px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.cinfo__k { font-size: .88rem; font-weight: 700; color: var(--brand); }
.cinfo__v { font-size: .92rem; color: var(--text); word-break: keep-all; }
.cinfo__v a { color: var(--text); }
.cinfo__tbd { color: var(--text-muted); }
.cmap__box { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.cmap__box img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #eef2f6; }
.cmap__cta { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: .8rem; font-weight: 700; color: #fff; background: var(--brand); padding: 6px 13px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
.cmap__box:hover .cmap__cta { background: var(--primary-hover); }
.cmap__addr { margin: var(--space-3) 0 0; font-size: .86rem; color: var(--text-muted); }
@media (max-width: 860px) { .contact2 { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } .cinfo__list { flex: none; display: block; } }

/* =====================================================================
   회사소개 종합 페이지 — 번호형 섹션, 회사개요 그리드, 핵심 경쟁력
   ===================================================================== */
.secnum { margin-bottom: var(--space-6); }
.secnum__no { display: block; font-size: .95rem; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.secnum__title { display: block; font-size: 1.4rem; font-weight: 800; color: var(--text); margin-top: 2px; line-height: 1.25; }
/* 02 회사개요: 좌 헤더 + 우 정보 그리드 */
.ovsec { display: grid; grid-template-columns: .82fr 2.05fr; gap: var(--space-10); align-items: start; }
.ovsec__title { font-size: var(--fs-h2); font-weight: 800; color: var(--text); line-height: 1.3; }
.ovsec__lead { color: var(--text-muted); line-height: 1.8; margin-top: var(--space-3); }
.ovgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-7); }
.ovitem { display: flex; gap: var(--space-4); align-items: flex-start; }
.ovitem__ic { flex: none; width: 42px; height: 42px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.ovitem__ic svg { width: 30px; height: 30px; }
.ovitem__k { display: block; font-size: .9rem; font-weight: 700; color: var(--brand); }
.ovitem__v { display: block; font-size: .86rem; color: var(--text); line-height: 1.55; margin-top: 3px; word-break: keep-all; }
@media (max-width: 900px) { .ovsec { grid-template-columns: 1fr; gap: var(--space-6); } .ovgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ovgrid { grid-template-columns: 1fr; } }
/* 04 핵심 경쟁력 */
.strhead { text-align: center; font-size: var(--fs-h2); font-weight: 800; color: var(--text); margin: 0 0 var(--space-8); }
.strengths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.strcard { text-align: center; padding: var(--space-6) var(--space-4); }
.strcard__ic { width: 56px; height: 56px; margin: 0 auto var(--space-4); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.strcard__ic--img { width: 78px; height: 78px; }
.strcard__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 검사 장비 및 기술력 4×1 카드 */
.capcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.capcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7) var(--space-4); text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.capcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.capcard__ic { width: 88px; height: 88px; margin: 0 auto var(--space-4); display: inline-flex; align-items: center; justify-content: center; }
.capcard__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.capcard b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--text); margin-bottom: var(--space-3); }
.capcard p { margin: 0; font-size: .86rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
@media (max-width: 900px) { .capcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .capcards { grid-template-columns: 1fr; } }
/* 검사 장비 및 기술력: 좌 사진 + 우 1×4 카드 */
.capsplit { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-8); align-items: stretch; margin-top: var(--space-8); }
.capsplit__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 360px; }
.capsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.capcards--col { grid-template-columns: 1fr; gap: var(--space-4); margin-top: 0; }
.capcard--row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; text-align: left; padding: var(--space-5); }
.capcard--row .capcard__ic { width: 62px; height: 62px; margin: 0; flex: none; }
.capcard--row .capcard__tx b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.capcard--row .capcard__tx p { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.capsplit--rev { grid-template-columns: 1fr 1.4fr; }
.capsplit--wide { grid-template-columns: 4fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
#gas-quality .capcard:hover { transform: none; box-shadow: var(--shadow-sm); }
#gas-quality .capcard { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); }
#gas-quality .capcard .svccard__ic { margin: 0; }
#gas-quality .capcard__tx b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
#gas-quality .capcard__desc { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-muted); text-align: left; word-break: keep-all; }
#gas-quality .capsplit__media { align-self: start; aspect-ratio: 2 / 1; min-height: 0; }
#service .capcards--col { grid-template-columns: 1fr 1fr; }
#service .capcard--row { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-3); }
#service .capcard--row .svccard__ic--img { width: 66px; height: 66px; }
#service .capcard__tx b { font-size: 1.02rem; }
.svccard__ic { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-brand); color: var(--brand); display: grid; place-items: center; }
.svccard__ic svg { width: 28px; height: 28px; }
.svccard__ic--img { background: transparent; width: 62px; height: 62px; }
.svccard__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 820px) { .capsplit { grid-template-columns: 1fr; } .capsplit__media { min-height: 240px; aspect-ratio: 16/9; } .capsplit--rev .capsplit__media { order: -1; } }
.strcard__ic svg { width: 32px; height: 32px; }
.strcard b { display: block; font-size: 1.05rem; color: var(--text); margin-bottom: var(--space-2); }
.strcard p { font-size: .86rem; color: var(--text-muted); line-height: 1.65; word-break: keep-all; }
@media (max-width: 860px) { .strengths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .strengths { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .about-home__media { margin-top: var(--space-7); } .about-home__media img { height: auto; aspect-ratio: auto; } }

/* ⑥ 팩토리 (풀블리드 드론) */
/* 레퍼런스: 가로로 긴 파노라마 비율(약 4.22:1), 텍스트는 세로 중앙 */
.factory { position: relative; overflow: hidden; aspect-ratio: 2168 / 600; min-height: 320px; display: flex; align-items: center; }
.factory__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: center; z-index: 0; }
/* 좌측 텍스트 가독성용 그라데이션 스크림(왼쪽→오른쪽으로 자연스럽게 소멸) */
.factory::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(9,30,54,.86) 0%, rgba(9,30,54,.74) 20%, rgba(9,30,54,.52) 40%, rgba(9,30,54,.26) 58%, rgba(9,30,54,0) 74%); }
.factory__overlay { position: relative; z-index: 2; width: 100%; padding-block: clamp(20px, 3vw, 40px); }
@media (max-width: 768px) { .factory { aspect-ratio: auto; min-height: 380px; } .factory__overlay { padding-block: clamp(48px, 10vw, 72px); } }
.factory__title { font-size: var(--fs-h1); font-weight: 800; color: #fff; margin: var(--space-3) 0 var(--space-4); line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.factory__lead { color: #fff; font-size: var(--fs-lead); max-width: 460px; line-height: 1.7; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.factory__more { margin-top: var(--space-5); }

/* ④ Why 6카드 — 인라인 SVG 아이콘 */
.feature__ic { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--surface-brand); color: var(--brand); margin-bottom: var(--space-4); }
.feature__ic svg { width: 26px; height: 26px; }
#const-link .feature__ic--img { width: 96px; height: 96px; background: transparent; border-radius: 0; }
#const-link .feature__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ③ 사업영역 6 아이콘 */
.bizicon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
.bizicon__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-6) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bizicon__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.bizicon__ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--surface-brand); color: var(--brand); transition: transform .25s ease; }
.bizicon__item:hover .bizicon__ic { transform: scale(1.08); }
.bizicon__ic svg { width: 27px; height: 27px; }
.bizicon__item b { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
@media (max-width: 900px) { .bizicon { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .bizicon { grid-template-columns: repeat(2, 1fr); } }

/* ⑤ 제품 가로 슬라이드 */
.prodslide { position: relative; margin-top: var(--space-8); }
.prodslide__track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding: var(--space-2) max(var(--space-6), calc((100% - var(--container)) / 2 + var(--space-6))) var(--space-6); -webkit-overflow-scrolling: touch; }
.prodslide__track::-webkit-scrollbar { height: 6px; }
.prodslide__track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.prodcard { flex: 0 0 clamp(280px, 34%, 400px); scroll-snap-align: start; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease; }
.prodcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prodcard__media { overflow: hidden; }
.prodcard__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.prodcard:hover .prodcard__media img { transform: scale(1.06); }
.prodcard__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.prodcard__title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: var(--space-2); }
.prodcard__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; flex: 1; }
.prodcard__more { margin-top: var(--space-5); font-size: var(--fs-sm); font-weight: 700; color: var(--accent-hover); letter-spacing: .08em; }
.prodcard__more::after { content: " →"; }
.prodslide__nav { display: flex; justify-content: flex-end; gap: var(--space-3); max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.prodslide__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: var(--transition); }
.prodslide__btn:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }

/* ⑤ 제품 풀와이드 지그재그 섹션 */
.prodfull { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 104px); margin-top: var(--space-10); }
.prodfull__row { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.prodfull__row:nth-child(even) .prodfull__media { order: 2; }
.prodfull__media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.prodfull__media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .6s ease; }
.prodfull__row:hover .prodfull__media img { transform: scale(1.04); }
.prodfull__num { display: inline-block; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .14em; color: var(--brand); margin-bottom: var(--space-3); }
.prodfull__title { font-size: var(--fs-h1); font-weight: 800; color: var(--text); margin-bottom: var(--space-4); letter-spacing: -.01em; }
.prodfull__text { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.8; margin-bottom: var(--space-6); }
.prodfull__more { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .08em; color: var(--accent-hover); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.prodfull__more::after { content: "→"; }
@media (max-width: 860px) {
  .prodfull__row { grid-template-columns: 1fr; gap: var(--space-6); }
  .prodfull__row:nth-child(even) .prodfull__media { order: 0; }
}

/* =====================================================================
   홈 시안 반영 — 헤더 전화, 통계카드, 사업분야 타일, 제품 5종, Why 6열
   ===================================================================== */
/* 헤더 전화 */
.header-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.header-tel__ic { width: 18px; height: 18px; color: var(--brand); flex: none; }
.header-tel__txt { display: flex; flex-direction: column; line-height: 1.12; }
.header-tel__txt b { font-size: .95rem; font-weight: 800; color: #143b63; white-space: nowrap; }
.header-tel__txt small { font-size: .68rem; color: var(--text-muted); }
@media (max-width: 1180px) { .header-tel { display: none; } }

/* 신뢰 지표 흰색 카드(히어로에 겹침) */
/* 통계 카드를 히어로 이미지 위로 크게 겹치게(레퍼런스: 카드 하단≈이미지 하단) */
.herostat-band { position: relative; z-index: 3; margin-top: calc(-1 * clamp(56px, 7.5vw, 96px)); }
/* 레퍼런스: 카드 폭 ≈85% */
.herostat-band > .container { max-width: var(--container); }
/* 레퍼런스: 카드를 더 납작하게(≈7.5:1) — 세로 패딩 축소 */
.herostat { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(8px, 1vw, 14px) clamp(16px, 2.2vw, 30px); }
.herostat__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: clamp(2px, 0.4vw, 6px) var(--space-4); border-right: 1px solid var(--border); }
.herostat__item:last-child { border-right: 0; }
.herostat__ic { color: var(--brand); margin-bottom: 6px; }
.herostat__ic svg { width: 30px; height: 30px; }
.herostat__ic--img { display: inline-flex; align-items: center; justify-content: center; }
.herostat__ic--img img { width: 42px; height: 42px; object-fit: contain; }
.herostat__num { font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 800; color: #143b63; line-height: 1; }
.herostat__num sup { font-size: .48em; color: var(--accent); vertical-align: super; }
.herostat__label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--text); margin-top: 5px; }
.herostat__sub { font-size: .76rem; color: var(--text-muted); }
@media (max-width: 720px) { .herostat { grid-template-columns: repeat(2, 1fr); }
  .herostat__item:nth-child(2n) { border-right: 0; } .herostat__item:nth-child(-n+2){ border-bottom: 1px solid var(--border);} }

/* 섹션 헤드 변형 + 공통 */
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.section__more { font-weight: 700; font-size: var(--fs-sm); color: var(--accent-hover); white-space: nowrap; }
.section__more::after { content: " →"; }
.section__foot { text-align: center; margin-top: var(--space-9, 2.75rem); }
.btn--outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--green-deep); background: var(--green-deep); color: #fff; }

/* 사업분야 5 사진 타일 */
.biztile { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.biztile__item { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.biztile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; z-index: 0; filter: saturate(.72) brightness(.9); }
/* 레퍼런스: 중립 회색톤 오버레이 */
.biztile__item::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(34,38,44,.82) 0%, rgba(38,43,50,.5) 48%, rgba(44,50,58,.42) 100%); }
.biztile__item:hover .biztile__img { transform: scale(1.07); }
.biztile__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-5); color: #fff; text-align: center; }
.biztile__ic { color: #fff; opacity: .92; } .biztile__ic svg { width: 34px; height: 34px; }
.biztile__title { font-size: var(--fs-h3); font-weight: 700; }
.biztile__desc { font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.5; max-width: 15em; }
@media (max-width: 900px) { .biztile { grid-template-columns: repeat(2, 1fr); } .biztile__item { aspect-ratio: 4/3; } }
/* 사업영역: 사진 카드 + 아이콘 배지 오버레이 + 자세히 보기 */
.bizfeat { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.bizfeat__card > a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bizfeat__card > a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.bizfeat__media { position: relative; aspect-ratio: 4 / 3; }
.bizfeat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bizfeat__card > a:hover .bizfeat__media img { transform: scale(1.06); }
.bizfeat__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,26,58,0) 45%, rgba(9,26,58,.45) 100%); }
.bizfeat__ic { position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--eyebrow); border: 1px solid var(--border); box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center; }
.bizfeat__ic svg { width: 27px; height: 27px; }
.bizfeat__body { padding: calc(27px + var(--space-5)) var(--space-4) var(--space-6); }
.bizfeat__title { display: block; font-size: 1.12rem; font-weight: 800; color: var(--text); word-break: keep-all; }
.bizfeat__desc { display: block; margin-top: var(--space-2); font-size: .86rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.bizfeat__more { display: inline-block; margin-top: var(--space-4); font-size: .84rem; font-weight: 700; color: var(--brand); }
@media (max-width: 900px) { .bizfeat { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-5); } }
@media (max-width: 480px) { .bizfeat { grid-template-columns: 1fr; } }

/* Why 6열 */
.whycards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.whycards .feature { padding: var(--space-6) var(--space-4); text-align: center; }
.whycards .feature__ic { margin: 0 auto var(--space-3); width: 46px; height: 46px; }
.whycards .feature__ic svg { width: 23px; height: 23px; }
/* WHY KLCC: 레퍼런스처럼 라인 아이콘(배경 원형 제거·확대) + 아이브로우 대시 숨김 */
#why .section__head { max-width: 760px; }
#why .whycards .feature__ic { background: none; border-radius: 0; width: auto; height: auto; margin: 0 auto var(--space-3); }
#why .whycards .feature__ic svg { width: 40px; height: 40px; }
#why .whycards .feature__ic--img { height: 56px; display: inline-flex; align-items: center; justify-content: center; }
#why .whycards .feature__ic--img img { height: 56px; width: auto; max-width: 72px; object-fit: contain; display: block; }
/* 홈 3개 섹션(WHY·BUSINESS·PRODUCTS) 높이를 레퍼런스처럼 컴팩트하게 축소 */
#why, #business, #product-showcase { padding-block: 1.7rem; }
#why .section__head, #business .section__head, #product-showcase .section__head { margin-bottom: var(--space-6); }
#business .biztile, #product-showcase .prodgrid, #product-showcase .prodstrip { margin-top: var(--space-6); }
/* PRODUCTS 제품 타일: 밝은 카드 + 용기 상단부(투명 PNG) 6열 가로 배열 */
.prodstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.prodstrip .prodtile { display: flex; }
.prodstrip .prodtile > a { flex: 1; }
.prodstrip .prodtile a { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 208px; padding: var(--space-5) var(--space-2) 0; background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-align: center; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.prodstrip .prodtile a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prodtile__tx { position: relative; z-index: 2; }
.prodtile__formula { display: block; font-size: 1.9rem; font-weight: 800; color: var(--eyebrow); line-height: 1; letter-spacing: -.01em; }
.prodtile__formula--sm { font-size: 1.2rem; letter-spacing: .01em; }
.prodtile__formula sub { font-size: .55em; font-weight: 700; }
.prodtile__name { display: block; margin-top: .3rem; font-size: .82rem; color: var(--text-muted); }
.prodtile__cyl { margin-top: auto; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.prodtile__cyl img { width: auto; height: 132px; object-fit: contain; object-position: bottom center; display: block; }
.prodtile--ice .prodtile__cyl { padding: 0 var(--space-2); }
.prodtile--ice .prodtile__cyl { padding: 0; height: 150px; overflow: hidden; }
.prodtile--ice .prodtile__cyl img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transform: scale(1.28); transform-origin: 50% 22%;
  -webkit-mask-image: radial-gradient(ellipse 88% 90% at 50% 46%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 88% 90% at 50% 46%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 30%);
  mask-composite: intersect; }
@media (max-width: 900px) { .prodstrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .prodstrip { grid-template-columns: repeat(2, 1fr); } }
/* 가스제품 라인업: 6종 가스 카드(사진+형식 오버레이+국문/영문명+배지) */
/* 실린더 이미지 카드 (상단 이미지 / 하단 설명) — 산업용·의료용 공용 */
/* 카드를 탭 바 전체 폭에 맞춰 좌우 정렬(모든 탭 동일) */
.prodlineup .prodgrid.prodgrid--cyl { grid-template-columns: 1fr 1fr; }
.prodgrid--cyl .pgcard__media img { aspect-ratio: 3 / 2; object-fit: contain; background: #fff; }
.prodgrid--cyl .pgcard__text--gases,
.prodgrid--3 .pgcard__text--gases { font-size: 1.05rem; font-weight: 600; color: var(--text); text-align: center; letter-spacing: .01em; margin: var(--space-5) var(--space-5) var(--space-6); word-break: keep-all; }
@media (max-width: 720px) { .prodlineup .prodgrid.prodgrid--cyl { grid-template-columns: 1fr; } }
/* 특수·혼합가스: 3열 카드 */
.prodlineup .prodgrid.prodgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .prodlineup .prodgrid.prodgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prodlineup .prodgrid.prodgrid--3 { grid-template-columns: 1fr; } }
/* 식음료가스: 단일 실사진 카드 */
.prodlineup .prodgrid.prodgrid--cyl.prodgrid--food { grid-template-columns: 1fr; }
.prodgrid--food .pgcard__media img { object-fit: contain; background: #fff; }
/* 흰 배경 실린더 합성 이미지(라벨 전체 노출) */
.pgcard--cyl .pgcard__media img { object-fit: contain; background: #fff; }
/* 제품 라인업: 상단 가로 탭(세그먼트) 레이아웃 (참고이미지) */
.prodlineup--top { display: block; margin-top: var(--space-4); }
.prodlineup--top .prodlineup__nav { flex-direction: row; position: static; top: auto; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 5px; margin-bottom: var(--space-4); }
.prodlineup--top .prodlineup__btn { flex: 1; text-align: center; border: none; border-radius: 8px; background: transparent; padding: 0.55rem var(--space-3); }
.prodlineup--top .prodlineup__btn:hover { background: rgba(0,0,0,.04); color: var(--brand); }
.prodlineup--top .prodlineup__btn.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.prodlineup--top .prodlineup__title, .prodlineup--top .prodlineup__desc { display: none; }
.prodlineup__note { margin-top: var(--space-6); text-align: center; font-size: .82rem; color: var(--text-muted); }
@media (max-width: 640px) { .prodlineup--top .prodlineup__nav { flex-wrap: wrap; } .prodlineup--top .prodlineup__btn { flex: 1 1 calc(33.333% - 4px); } }
/* 제품 라인업 탭 아이콘 */
.prodlineup--top .prodlineup__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; }
.prodlineup--top .prodlineup__btn > svg { width: 18px; height: 18px; flex: none; }
.prodlineup__ic { width: 22px; height: 22px; flex: none; object-fit: contain; display: block; }
/* 활성 탭(파란 배경)에서는 파란 아이콘을 흰색으로 반전 */
.prodlineup--top .prodlineup__btn.is-active .prodlineup__ic { filter: brightness(0) invert(1); }
/* 산업용가스: 소제목형 카드(고압가스/액화가스) */
.pgcard--titled .pgcard__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.pgcard--titled .pgcard__head--center { align-items: center; }
.pgcard--titled .pgcard__ic { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; }
.pgcard--titled .pgcard__ic svg { width: 26px; height: 26px; }
.pgcard--titled .pgcard__ic--img { width: 48px; height: 48px; background: none; border-radius: 0; }
.pgcard--titled .pgcard__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pgcard__name { display: block; font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.pgcard__lead { display: block; font-size: .84rem; color: var(--text-muted); line-height: 1.5; margin-top: 3px; word-break: keep-all; }
.pgcard--titled .pgcard__media { margin-top: var(--space-4); }
.pgcard--titled .pgcard__text--gases { margin-bottom: var(--space-3); }
.pgcard__use { font-size: .86rem; color: var(--text-muted); text-align: center; line-height: 1.6; margin: 0 var(--space-5) var(--space-6); word-break: keep-all; }
/* 식음료 카드: 물·기포 배경 이미지(전체 표시) */
.prodlineup .pgcard.pgcard--foodbg { background: #f4fafe url("../images/site/gas-foodbev-bg.jpg?v=20260910e") center/contain no-repeat; justify-content: space-between; }
/* 배경 위에 용기 이미지(투명 배경)가 보이도록 */
.pgcard--foodbg .pgcard__media { background: none; }
.prodgrid--food .pgcard--foodbg .pgcard__media img,
.pgcard--foodbg .pgcard__media img { object-fit: contain; background: none; }
/* 제품 라인업: 탭 전환 시 카드 사진 높이 통일 */
.prodlineup .pgcard__media { height: 300px; }
.prodlineup .pgcard__media img { width: 100%; height: 100%; aspect-ratio: auto; }
/* 모든 탭 카드 세로높이 동일(짧은 탭은 콘텐츠를 세로 가운데로) */
.prodlineup .pgcard { min-height: 505px; justify-content: center; }
/* 제품 라인업 카드: hover 애니메이션 제거 */
.prodlineup .pgcard:hover { transform: none; box-shadow: none; }
.prodlineup .pgcard:hover .pgcard__media img { transform: none; }
.prodlineup .pgcard__text { flex: none; }
/* 가스 공급 프로세스: 원형 아이콘 5단계 + 화살표 */
.procflow { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.procstep { flex: 1; max-width: 190px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.procstep__ic { width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.procstep__ic svg { width: 42px; height: 42px; }
.procstep__ic--img { border: none; background: transparent; padding: 0; }
.procstep__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.procstep--active .procstep__ic { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(65,144,190,.35); }
.procstep--active .procstep__num { color: var(--brand); }
.procstep__num { font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 5px; }
.procstep__ic { position: relative; }
.procstep__badge { position: absolute; top: -2px; left: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--eyebrow); color: #fff; font-size: .74rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(27,65,149,.3); }
.procstep__title { font-size: 1.02rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.procstep__desc { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.procflow__arrow { align-self: flex-start; margin-top: 32px; color: var(--brand); font-size: 1.5rem; opacity: .45; }
/* 시공 프로세스: 화살표(→)를 드라이아이스 프로세스와 동일한 셰브론(>) 형태로 */
#const-process .procflow__arrow { font-size: 0; align-self: flex-start; margin-top: 38px; opacity: 1; }
#const-process .procflow__arrow::before { content: ""; display: block; width: 14px; height: 14px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg); opacity: .55; }
@media (max-width: 760px) { .procflow { flex-wrap: wrap; gap: var(--space-6); } .procflow__arrow { display: none; } .procstep { flex: 1 1 40%; max-width: none; } }
/* 품질과 안전: 좌 사진 + 우 4특징(2×2) */
.qualsafe { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--space-8); align-items: center; margin-top: var(--space-8); }
.qualsafe__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3.4; }
.qualsafe__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qualsafe__feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); list-style: none; padding: 0; margin: 0; }
.qualsafe__feats li { text-align: center; display: flex; flex-direction: column; align-items: center; }
.qualsafe__feats .qs-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.qualsafe__feats .qs-ic svg { width: 30px; height: 30px; }
.qualsafe__feats b { font-size: .92rem; font-weight: 800; letter-spacing: .03em; color: var(--text); margin-bottom: 6px; }
.qualsafe__feats p { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 800px) { .qualsafe { grid-template-columns: 1fr; gap: var(--space-6); } }
/* 드라이아이스 — 제품 규격 및 포장형태 (참고 디자인) */
.specpkg__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-4); padding: 10px var(--space-6); background: var(--eyebrow); color: #fff; border-radius: 999px; font-size: .92rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.specpkg__badge svg { width: 18px; height: 18px; flex: none; }
.spec2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.specpanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-6) var(--space-7); }
.specpanel__title { font-size: 1.2rem; font-weight: 800; color: var(--text); border-left: 4px solid var(--brand); padding-left: var(--space-3); }
.specpanel__desc { color: var(--text-muted); font-size: .88rem; margin: var(--space-2) 0 var(--space-5); line-height: 1.5; padding-left: calc(4px + var(--space-3)); }
.specpanel__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: var(--space-5); background: #eef2f6; }
.specpanel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.specrows { width: 100%; border-collapse: collapse; }
.specrows th, .specrows td { text-align: left; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); font-size: .88rem; vertical-align: top; }
.specrows tr:last-child th, .specrows tr:last-child td { border-bottom: none; }
.specrows th { width: 34%; color: var(--eyebrow); font-weight: 700; background: var(--surface-2); border-radius: 6px 0 0 6px; }
.specrows td { color: var(--text); }
.specrows td span { color: var(--text-muted); font-size: .82em; }
.specpkg__foot { margin-top: var(--space-12); }
.specpkg__lead { color: var(--text-muted); margin: var(--space-2) 0 var(--space-6); line-height: 1.6; }
.pkgunits { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.pkgunit { text-align: center; }
.pkgunit__tag { display: block; background: var(--eyebrow); color: #fff; font-weight: 800; font-size: .92rem; padding: 8px 4px; border-radius: 8px 8px 0 0; }
.pkgunit__tag em { font-style: normal; font-weight: 500; font-size: .78em; opacity: .85; }
.pkgunit__media { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-top: none; background: #f2f5f8; }
.pkgunit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkgunit__cap { display: block; margin-top: var(--space-2); font-size: .8rem; color: var(--text-muted); }
.specpkg__note { margin: var(--space-6) 0 0; text-align: center; font-size: .85rem; color: var(--eyebrow); font-weight: 600; }

/* 제품 규격 및 포장형태 (너겟·블록 상세 패널) */
.icespec2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); align-items: start; }
.icespec2--bottom { margin-top: var(--space-6); }
.icespec-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-6) var(--space-7); }
.specpanel__title em { font-style: normal; font-weight: 600; font-size: .78em; color: var(--brand); margin-left: 6px; letter-spacing: .02em; }
.icespec-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0 var(--space-5); }
/* 블록 제품 규격 표 + 1P 포장 박스 규격(참고 이미지 2카드 구성) */
/* 오른쪽 컬럼(원래 표 자리): 단일 카드 안에 두 섹션 */
.blkspec2-col { display: flex; flex-direction: column; min-width: 0; }
.blkspec2-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(12px, 1.3vw, 16px); display: flex; flex-direction: column; }
.blkspec2-sec { }
/* 두 섹션 사이 구분선(카드 간 여백 없이 하나의 카드로) */
.blkspec2-sec--pkg { border-top: 1px solid var(--border); margin-top: clamp(8px, 1vw, 12px); padding-top: clamp(8px, 1vw, 12px); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.blkspec2-sec--pkg .blkspec2__head { margin-bottom: 0; }
.blkspec2-sec--pkg .pkgbox2 { flex: 1 1 auto; min-height: 0; margin-top: -20px; }
/* 1P 박스 본문(단일 열: 박스 이미지) */
.blkspec2-col .pkgbox2 { grid-template-columns: 1fr; gap: var(--space-3); }
.blkspec2__head { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.blkspec2__ic { flex: none; width: 22px; height: 22px; color: #1c5fc0; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; }
.blkspec2__ic svg { width: 100%; height: 100%; }
/* 제목 폰트: 너겟 탭 '포장 상세정보'(pkgspec__infotitle)와 통일 */
.blkspec2__title { font-size: 1rem; font-weight: 800; color: var(--text); margin: 0; line-height: 1.3; }
.blkspec2__sub { margin: 2px 0 0; color: var(--text-muted); font-size: .84rem; }
.blkspec2__note { margin: var(--space-3) 0 0; text-align: right; color: var(--text-muted); font-size: .8rem; }
.blktbl__ic { display: inline-flex; width: 18px; height: 18px; color: #1c5fc0; vertical-align: -3px; margin-right: .35em; }
.blktbl__ic svg { width: 100%; height: 100%; }
/* 표 공통 */
/* 래퍼에 테두리+라운드, 표는 collapse로 선이 끊김 없이 이어짐 */
.blktbl-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.blktbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.blktbl thead th { background: #eef4fb; color: var(--text); font-weight: 700; padding: 5px 8px; text-align: center; white-space: nowrap; }
.blktbl thead th:first-child { text-align: left; padding-left: 12px; }
.blktbl tbody th { background: #eef4fb; color: var(--text); font-weight: 700; text-align: left; padding: 5px 12px; white-space: nowrap; }
.blktbl tbody th small, .blktbl thead th small { color: var(--text-muted); font-weight: 600; }
.blktbl tbody td { padding: 5px 8px; text-align: center; color: #2f3d4c; white-space: nowrap; }
/* 모든 셀 사이 구분선(collapse로 모서리까지 이어짐) */
.blktbl th, .blktbl td { border: 1px solid var(--border); }
.blktbl tr > *:first-child { border-left: 0; }
.blktbl tr > *:last-child { border-right: 0; }
.blktbl thead tr > * { border-top: 0; }
.blktbl tbody tr:last-child > * { border-bottom: 0; }
/* 1P 포장 박스 규격 본문: 좌 미니표 + 우 박스 이미지 */
.pkgbox2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: start; }
.pkgbox2__tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; font-size: clamp(.82rem, 1vw, .95rem); }
.pkgbox2__tbl th { background: #eef4fb; color: var(--text); font-weight: 700; text-align: left; padding: 14px 16px; white-space: nowrap; width: 42%; vertical-align: middle; }
.pkgbox2__tbl th small { color: var(--text-muted); font-weight: 600; }
.pkgbox2__tbl td { padding: 14px 16px; color: #2f3d4c; word-break: keep-all; }
.pkgbox2__tbl tr + tr th, .pkgbox2__tbl tr + tr td { border-top: 1px solid var(--border); }
.pkgbox2__tbl th { border-right: 1px solid var(--border); }
.pkgbox2__media img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .pkgbox2 { grid-template-columns: 1fr; gap: var(--space-5); } }
.icespec-figs__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 2 / 1; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.icespec-figs__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icespec-figs__photo--contain { background: #fff; }
.icespec-figs__photo--contain img { object-fit: contain; }
.icespec-figs__dim { margin: 0; align-self: start; aspect-ratio: 1.85 / 1; background: var(--surface-brand); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: var(--space-4) var(--space-5); overflow: hidden; }
.icespec-figs__dim img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: 0 auto; mix-blend-mode: multiply; }
.boxspec { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
.boxspec__note { margin: var(--space-2) 0 0; font-size: .78rem; color: var(--text-muted); }
/* 우측 '박스 규격' 제목을 상단 설명문(specpanel__desc) 라인에 맞춰 위로 올림 */
.boxspec { margin-top: -41px; }
/* 표 줄간격 축소 + 캡션 위로 이동 → 표 하단을 좌측 이미지 하단과 일직선 정렬 */
.boxspec .pkgdetail__key, .boxspec .pkgdetail__val { padding-top: 4px; padding-bottom: 4px; }
.boxspec .pkgspec__dim--in .icespec-figs__dimnote { margin-top: -13px; padding-top: 0; }
.boxspec__note--in { margin: 2px 0 0; text-align: right; }
/* 블록 탭: 좌측 '블록 성형 규격' 카드를 우측 표(pkgcard)와 상·하단 일직선 정렬 */
/* 블록 탭: 좌측 이미지는 기존 고정(339px) */
.prodlineup__panel[data-cat="spec-block"] .icespec-figs__dim--titled { margin-top: 0; aspect-ratio: auto; height: 339px; }
/* 우측 카드 컬럼 높이를 좌측 이미지에 맞추고, 박스 이미지를 남는 공간에 맞춰 축소 */
.blkspec2-col { height: 339px; }
.blkspec2-col .blkspec2-card { height: 100%; }
.blkspec2-col .pkgbox2__media { height: 100%; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.blkspec2-col .pkgbox2__media img { max-width: 264px; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
/* 주석을 카드 하단에 고정(박스와 분리), 위치 살짝 아래 */
.blkspec2-sec--pkg .blkspec2__note { margin-top: auto; position: relative; top: 4px; }
.icespec-figs__dimtitle { font-size: 1.02rem; font-weight: 800; color: var(--eyebrow); margin: 0 0 var(--space-2); }
.icespec-figs__dimtitle em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-left: .25em; }
.icespec-figs__dimnote { display: block; margin-top: auto; padding-top: var(--space-2); text-align: right; font-size: .74rem; color: var(--text-muted); }
.icespec-figs__dim--titled { position: relative; }
.icespec-figs__dim--titled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; mix-blend-mode: normal; }
/* 완성 이미지(제목·치수 포함)는 크롭 없이 전체 표시 */
.icespec-figs__dim--full { background: #fff; }
.icespec-figs__dim--full img { object-fit: cover; }
.icespec-figs__dim--titled .icespec-figs__dimtitle,
.icespec-figs__dim--titled .icespec-figs__dimnote { position: relative; z-index: 1; }
.specrows--cols th, .specrows--cols td { width: auto; text-align: center; border-radius: 0; }
.specrows--cols thead th { background: var(--eyebrow); color: #fff; border-bottom: none; font-size: .82rem; padding: var(--space-2) var(--space-2); }
.specrows--cols thead th:first-child { border-radius: 6px 0 0 0; }
.specrows--cols thead th:last-child { border-radius: 0 6px 0 0; }
.specrows--cols tbody td { background: var(--surface); color: var(--text); font-size: .84rem; padding: var(--space-3) var(--space-2); }
.specrows--cols tbody td:last-child { text-align: left; color: var(--text-muted); }
.icespec__subhead { margin: var(--space-6) 0 var(--space-1); font-size: 1.02rem; font-weight: 800; color: var(--eyebrow); }
.icespec__subhead span { font-weight: 600; font-size: .8em; color: var(--brand); }
/* 제목 앞 세로 바(브랜드 컬러) — '블록' 제목(specpanel__title)과 동일 스타일 */
.icespec__subhead--bar { border-left: 4px solid var(--brand); padding-left: var(--space-3); }
/* 소제목을 위 제목의 글자 시작선(바+패딩)에 맞춰 정렬 */
.icespec__subhead--bar + .icespec__sublead { padding-left: calc(4px + var(--space-3)); }
.icespec__sublead { margin: 0 0 var(--space-4); font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.proc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.proc4__step { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.proc4__media { aspect-ratio: 4 / 3; overflow: hidden; background: #f2f5f8; }
.proc4__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proc4__step b { display: flex; align-items: center; gap: 6px; padding: var(--space-3) var(--space-3) 4px; font-size: .84rem; color: var(--text); }
.proc4__n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--eyebrow); color: #fff; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.proc4__step p { margin: 0; padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 26px); font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.handling-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-1); }
.handling-head .specpanel__title { margin-bottom: 0; }
.handling-head .icespec__sublead { margin: 0; }
.handling { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); list-style: none; padding: 0; margin: 0; }
.handling li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.handling__ic { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.handling__ic svg { width: 24px; height: 24px; }
.handling__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.handling b { font-size: .9rem; color: var(--text); font-weight: 800; }
.handling p { margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
/* 규격·포장 탭 구조 */
.icespec-tabs { margin-top: var(--space-4); }
.icespec-tabs .icespec-col { border: none; box-shadow: none; padding: var(--space-2) 0 0; }
.icespec-tabs .icespec-figs { grid-template-columns: 1.08fr 1fr; gap: var(--space-3); }
.icespec-tabs .icespec-figs--single { grid-template-columns: 1fr; max-width: 540px; }
/* 48P 포장 사진: 전체 이미지가 잘리지 않도록 자연 비율로 표시 */
.icespec-figs__photo--full { aspect-ratio: auto; background: #fff; }
.icespec-figs__photo--full img { height: auto; object-fit: contain; }
/* 48P 포장 규격: 사진(좌)+표(우) 2단 배치 */
.pkgspec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin: var(--space-5) 0; }
.pkgspec__photo { position: relative; align-self: start; height: 350px; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.pkgspec__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
.pkgspec__table { margin: 0; }
.pkgspec { align-items: stretch; }
.pkgspec__head { position: relative; border-left: none; padding-left: var(--space-3); line-height: 1.25; }
/* 바(네모)를 제목 한 줄만 감싸 '너겟 (NUGGET)' 제목 바와 동일하게 */
.pkgspec__head::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 4px; height: 1.15em; background: var(--brand); }
.pkgspec__head span { display: block; margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.pkgspec__infotitle { font-size: 1rem; font-weight: 800; color: var(--text); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.pkgspec__infoic { flex: none; width: 22px; height: 22px; color: #1c5fc0; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; }
.pkgspec__infoic svg { width: 100%; height: 100%; }
.pkgspec__titles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: end; margin: var(--space-6) 0 var(--space-4); }
.pkgspec__titles .pkgspec__head { margin: 0; }
.pkgspec__titles .pkgspec__infotitle { margin: 0; }
.pkgspec { margin-top: 0; }
.pkgcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.pkgdetail { list-style: none; margin: 0; padding: 0; }
.pkgdetail__row { display: grid; grid-template-columns: 42% 1fr; align-items: center; border-bottom: 1px solid var(--border); }
.pkgdetail__key { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface-brand); border-right: 1px solid var(--border); }
.pkgdetail__ic { color: var(--brand); display: grid; place-items: center; flex: none; }
.pkgdetail__ic svg { width: 24px; height: 24px; }
.pkgdetail b { font-size: .8rem; font-weight: 700; color: var(--text); word-break: keep-all; }
.pkgdetail__unit { font-style: normal; font-weight: 500; font-size: .82em; color: var(--text-muted); margin-left: .15em; }
.pkgdetail__val { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: var(--space-2) var(--space-4); background: #fff; font-size: .8rem; font-weight: 400; color: var(--text); word-break: keep-all; }
.pkgdetail__val--1line { flex-direction: row; align-items: baseline; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
.pkgdetail__mut { font-weight: 500; color: var(--text-muted); font-size: .74rem; margin-left: .3em; }
.pkgdetail__mut--block { display: block; margin: 2px 0 0; }
/* 절단규격 구분 헤더(전체 폭) */
.pkgdetail__row--sub { grid-template-columns: 1fr; }
.pkgdetail__subhead { padding: var(--space-2) var(--space-4); background: var(--surface-brand); font-size: .8rem; font-weight: 800; color: var(--brand); }
.pkgspec__dim { margin: 0; text-align: center; }
.pkgspec__dim--in { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); }
.pkgspec__dim img { max-width: 220px; width: 100%; display: block; margin-inline: auto; }
.pkgspec__dimcap { margin: -20px 0 0; font-size: .78rem; color: var(--text-muted); text-align: right; }
@media (max-width: 640px) { .pkgspec { grid-template-columns: 1fr; } .pkgdetail__row { grid-template-columns: 44% 1fr; } }
/* 제품 규격 스펙 카드 4종 */
.specfacts { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.specfact { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-left: 1px solid var(--border); }
.specfact:first-child { border-left: none; }
.specfact__ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.specfact__ic img { width: 100%; height: 100%; object-fit: contain; }
.specfact__tx { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.specfact__tx b { margin-top: auto; }
.specfact__val { margin-top: auto; }
.specfact__tx b { display: block; font-size: .9rem; font-weight: 800; color: var(--brand); margin-bottom: -3px; line-height: 1.05; }
.specfact__val { font-size: .78rem; font-weight: 400; color: var(--text-muted); line-height: 1.3; word-break: keep-all; }
.specfact__val em { font-style: normal; font-size: .9em; font-weight: 400; color: var(--text-muted); margin-left: .3em; }
@media (max-width: 860px) { .specfacts { grid-template-columns: repeat(2, 1fr); } .specfact:nth-child(3), .specfact:nth-child(4) { border-top: 1px solid var(--border); } .specfact:nth-child(3) { border-left: none; } }
@media (max-width: 480px) { .specfacts { grid-template-columns: 1fr; } .specfact { border-left: none; border-top: 1px solid var(--border); } .specfact:first-child { border-top: none; } }
.icespec-col--wide { margin-top: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.icespec-col--wide .specpanel__title { margin-bottom: var(--space-5); }
.handling--wide { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .icespec2 { grid-template-columns: 1fr; } .handling--wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .icespec-figs { grid-template-columns: 1fr; } .proc4 { grid-template-columns: repeat(2, 1fr); } .handling, .handling--wide { grid-template-columns: 1fr; } }

/* 주요 적용분야 */
.applyfields { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.applyfield { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-3) var(--space-5); text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.applyfield:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.applyfield__ic { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--eyebrow); margin-bottom: var(--space-4); }
.applyfield__ic svg { width: 32px; height: 32px; }
.applyfield__ic--img { width: 92px; height: 92px; background: none; border-radius: 0; }
.applyfield__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.applyfield__title { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: var(--space-2); }
.applyfield__desc { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 980px) { .applyfields { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .applyfields { grid-template-columns: repeat(2, 1fr); } }

/* 생산·공급 프로세스 (사진 원형 플로우) */
.iceflow { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.iceflow__step { position: relative; text-align: center; padding: 0 var(--space-2); }
.iceflow__step:not(:last-child)::after { content: ""; position: absolute; top: 60px; right: -10px; width: 18px; height: 18px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); opacity: .8; }
.iceflow__media { width: 120px; height: 120px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; }
.iceflow__media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.iceflow__label { margin: 0 0 var(--space-1); font-size: 1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; }
.iceflow__num { color: var(--brand); font-weight: 800; }
.iceflow__desc { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 900px) { .iceflow { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-3); } .iceflow__step:nth-child(3)::after { display: none; } }
@media (max-width: 560px) { .iceflow { grid-template-columns: repeat(2, 1fr); } .iceflow__step:nth-child(3)::after { display: block; } .iceflow__step:nth-child(2n)::after { display: none; } .iceflow__media { width: 104px; height: 104px; } .iceflow__step::after { top: 52px; } }

/* CO₂ 리커버리 시스템 */
#recovery { --rec-green: #3a9d63; --rec-green-dark: #2e7d4f; }
.co2rec-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-10); align-items: start; }
.co2rec-hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); align-self: stretch; min-height: 340px; }
.co2rec-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co2rec-hero__title { font-size: var(--fs-h2); font-weight: 800; color: var(--text); line-height: 1.15; margin: 0 0 var(--space-4); }
.co2rec-hero__co2 { color: var(--rec-green-dark); }
.co2rec-hero__sub { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 800; color: var(--text); line-height: 1.4; margin: 0 0 var(--space-5); }
.co2rec-hero__sub em { font-style: normal; color: var(--rec-green); }
.co2rec-hero__text { color: var(--text-muted); font-size: .95rem; line-height: 1.65; margin: 0 0 var(--space-3); }
.co2rec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.co2rec-card { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-3); }
.co2rec-card__ic { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--eyebrow); }
.co2rec-card__ic--green { color: var(--rec-green); }
.co2rec-card__ic svg { width: 40px; height: 40px; }
.co2rec-card__ic--img { width: 96px; height: 96px; border: none; border-radius: 0; }
.co2rec-card__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.co2rec-card__tx b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: var(--space-2); }
.co2rec-card__tx p { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.55; }
.co2rec-flow { margin-top: var(--space-12); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); }
.co2rec-flow__title { font-size: 1.1rem; font-weight: 800; color: var(--eyebrow); margin: 0 0 var(--space-5); }
.co2rec-flow__head { margin: 0 0 var(--space-6); }
.co2rec-flow__lead { margin: var(--space-2) 0 0; font-size: var(--fs-lead); font-weight: 800; color: var(--text); line-height: 1.35; }
/* Total Solution 카드: 아이콘 옆 제목 + 컴팩트 */
.co2rec-flow .cards--2 { gap: var(--space-4); }
.co2rec-flow .feature { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); text-align: left; }
.co2rec-flow .feature__ic--img { grid-row: 1 / span 2; align-self: center; width: 78px; height: 78px; margin: 0; }
.co2rec-flow .feature__title { margin: 0 0 3px; font-size: 1.05rem; }
.co2rec-flow .feature__text { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.co2rec-flow .feature .pgcard__more { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: var(--space-3); margin-left: calc(-1 * var(--space-2)); }
.co2rec-flow__steps { display: flex; align-items: stretch; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.recstep { position: relative; flex: 1; display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.recstep:not(:last-child) { margin-right: 20px; }
.recstep:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); }
.recstep__ic { flex: none; width: 40px; height: 40px; color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; }
.recstep__ic svg { width: 32px; height: 32px; }
.recstep__ic--img { width: 52px; height: 52px; }
.recstep__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.recstep--green .recstep__ic { color: var(--rec-green); }
.recstep__tx b { display: block; font-size: .92rem; font-weight: 800; color: var(--text); }
.recstep__tx span { display: block; font-size: .74rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.co2rec-banner { margin-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; background: #eef6f0; border: 1px solid #d6e8dc; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7); }
.co2rec-banner__lead { display: flex; align-items: center; gap: var(--space-4); flex: 1 1 440px; }
.co2rec-banner__leaf { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid #cfe6d7; color: var(--rec-green); display: inline-flex; align-items: center; justify-content: center; }
.co2rec-banner__leaf svg { width: 30px; height: 30px; }
.co2rec-banner__lead p { margin: 0; font-size: .92rem; color: var(--rec-green-dark); font-weight: 600; line-height: 1.6; }
.co2rec-tags { display: flex; gap: var(--space-6); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.co2rec-tags li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--rec-green-dark); text-align: center; }
.co2rec-tags li span { color: var(--rec-green); }
.co2rec-tags svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
  .co2rec-hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .co2rec-cards { grid-template-columns: 1fr; }
  .co2rec-flow__steps { flex-wrap: wrap; }
  .recstep { flex: 1 1 45%; }
  .co2rec-banner { justify-content: center; }
}
@media (max-width: 560px) {
  .co2rec-flow__steps { flex-direction: column; }
  .recstep { flex: 1 1 auto; margin-right: 0 !important; }
  .recstep:not(:last-child)::after { top: auto; bottom: -16px; right: 50%; transform: translateX(50%) rotate(135deg); }
  .recstep:not(:last-child) { margin-bottom: 20px; }
}

@media (max-width: 820px) { .spec2 { grid-template-columns: 1fr; } .pkgunits { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (max-width: 460px) { .pkgunits { grid-template-columns: repeat(2, 1fr); } }
/* 드라이아이스 — 첫 섹션: 가스제품 KLCC GAS와 동일 스타일(klccgas, 이미지 아이콘) */
/* 용기검사 — 검사 대상 용기: 4장 사진 카드 (참고 디자인) */
.inspcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.inspcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.inspcard__media { aspect-ratio: 4 / 3; overflow: hidden; }
.inspcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 01 고압가스 용기: O₂(산소) 용기가 더 보이도록 좌측 정렬 */
.inspcards .inspcard:first-child .inspcard__media img { object-position: 28% center; }
/* 검사 대상 용기: 라벨·설명 가로 중앙 정렬(전체 통일) */
.inspcard__label,
.inspcard__desc { text-align: center; }
.inspcard__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.inspcard__label { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; }
.inspcard__num { color: var(--brand); font-weight: 800; margin-right: 4px; }
.inspcard__desc { margin: var(--space-2) 0 0; font-size: .85rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
@media (max-width: 860px) { .inspcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .inspcards { grid-template-columns: 1fr; } }
/* 용기검사 — 4단계 검사 프로세스: 가로 카드 + 화살표 */
.proccards { display: flex; align-items: stretch; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.proccard { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.proccard__head { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-4) var(--space-3); }
.proccard__num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--eyebrow); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; }
.proccard__head b { font-size: .96rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.proccard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.proccard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proccard__desc { margin: 0; padding: var(--space-4); font-size: .8rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
.proccards__arrow { align-self: center; flex: none; color: var(--brand); font-size: 1.4rem; opacity: .5; }
@media (max-width: 860px) { .proccards { flex-wrap: wrap; gap: var(--space-4); } .proccards__arrow { display: none; } .proccard { flex: 1 1 calc(50% - var(--space-4)); } }

/* 주요 검사 설비: 내압시험 설비(1번) 사진 5% 확대 */
#equipment .facilcard:first-child .facilcard__media img { transform: translateY(8px) scale(1.155); }
/* 쇼트설비(2번): 5% 확대 + 위로 이동 */
#equipment .facilcard:nth-child(2) .facilcard__media img { transform: translateY(-8px) scale(1.05); }
/* 도장설비(3번): 10% 확대 + 위로 이동 */
#equipment .facilcard:nth-child(3) .facilcard__media img { transform: translateY(-26px) scale(1.274); }
/* 건조설비(4번): 5% 확대 + 아래로 이동 */
#equipment .facilcard:nth-child(4) .facilcard__media img { transform: translateY(8px) scale(1.05); }
/* 품질과 안전을 최우선으로(좌 사진 / 우 2x2 카드+CTA) */
.qualsafe { display: grid; grid-template-columns: 1.16fr 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-4); }
.qualsafe__media { position: relative; min-height: 300px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.qualsafe__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.qualsafe__tagline { position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 1; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .14em; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.qualsafe__right { display: flex; flex-direction: column; }
.qualsafe__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--space-3); flex: 1; }
.qscard { position: relative; display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); }
.qscard__num { position: absolute; top: var(--space-4); right: var(--space-4); font-size: .95rem; font-weight: 800; color: #c3cddb; }
.qscard__ic { flex: none; width: 56px; height: 56px; }
.qscard__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qscard__tx { min-width: 0; }
.qscard__tx b { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.qscard__tx p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.qualsafe__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.qualsafe__brand { font-size: .76rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); opacity: .55; }
@media (max-width: 900px) {
  .qualsafe { grid-template-columns: 1fr; }
  .qualsafe__media { min-height: 260px; }
}
@media (max-width: 560px) {
  .qualsafe__grid { grid-template-columns: 1fr; }
  .qualsafe__foot { flex-direction: column; align-items: flex-start; }
}
/* 신뢰할 수 있는 검사 서비스(좌 2x2 카드+CTA / 우 사진) */
.svchead { display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.svchead__tt .section__title { margin: 0; }
.svchead__lead { margin: 0 0 6px; font-size: .95rem; color: var(--text-muted); word-break: keep-all; }
.svcsplit { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-6); align-items: stretch; }
.svcsplit__left { display: flex; flex-direction: column; }
.svcgrid { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); flex: 1; }
.svcitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-4); text-align: center; display: flex; flex-direction: column; justify-content: center; }
.svcitem__ic { display: block; width: 52px; height: 52px; margin: 0 auto var(--space-3); }
.svcitem__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.svcitem__title { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.svcitem__desc { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.svcsplit__left .btn { align-self: flex-start; }
.svcsplit__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.svcsplit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1080px) { .svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .svcsplit { grid-template-columns: 1fr; }
  .svcsplit__media { min-height: 260px; order: -1; }
}
@media (max-width: 520px) { .svcgrid { grid-template-columns: 1fr; } }

/* 검사 프로세스: 6단계 아이콘 카드 흐름 */
.inspflow { display: flex; align-items: stretch; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.inspstep { flex: 1; min-width: 0; position: relative; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-3) var(--space-5); }
.inspstep__num { position: absolute; top: 12px; left: 14px; font-size: .85rem; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.inspstep__ic { display: block; width: 52px; height: 52px; margin: var(--space-3) auto var(--space-4); color: var(--brand); }
.inspstep__ic svg { width: 100%; height: 100%; }
.inspstep__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inspstep__title { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.inspstep__desc { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.inspflow__arrow { flex: none; align-self: center; width: 11px; height: 11px; border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: rotate(45deg); opacity: .45; }
@media (max-width: 960px) { .inspflow:not(.inspflow--8) { flex-wrap: wrap; gap: var(--space-3); } .inspflow:not(.inspflow--8) .inspflow__arrow { display: none; } .inspflow:not(.inspflow--8) .inspstep { flex: 1 1 calc(33.333% - var(--space-3)); } }
@media (max-width: 620px) { .inspflow:not(.inspflow--8) .inspstep { flex: 1 1 calc(50% - var(--space-3)); } }

/* 검사 프로세스 8단계: 4열 x 2행 그리드 + 열 사이 화살표 */
.inspflow--8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }
.inspflow--8 .inspstep:not(:nth-child(4n))::after { content: ""; position: absolute; top: 84px; right: calc(-1 * var(--space-5) / 2); width: 10px; height: 10px; border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: translate(50%, -50%) rotate(45deg); opacity: .45; }
@media (max-width: 900px) { .inspflow--8 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .inspflow--8 .inspstep::after { display: none; } }
@media (max-width: 520px) { .inspflow--8 { grid-template-columns: 1fr; } }
/* 생산·공급 시설: 다크 오버레이 사진 카드 4열 (참고이미지) */
.facilcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.facilcards--4 { grid-template-columns: repeat(4, 1fr); }
/* 블록 포장 프로세스 외곽 프레임(보관·취급 안내와 동일) */
.blockproc-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-6); margin-top: var(--space-4); }
.blockproc-frame .blockproc { margin-top: 0; }
/* 블록 포장 프로세스 흐름(번호 배지 + 화살표 + 라운드 이미지) */
.proc-eyebrow { font-weight: 700; font-size: .7rem; color: var(--text-muted); letter-spacing: .1em; margin-left: .5rem; }
.icespec__subhead .proc-eyebrow { color: var(--text-muted); }
.blockproc { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.blockproc__item { position: relative; text-align: center; }
.blockproc__mediawrap { position: relative; }
.blockproc__media { border-radius: var(--radius-lg); overflow: hidden; }
.blockproc__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blockproc__num { position: absolute; top: 10px; left: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-size: .9rem; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
/* 사진 사이 화살표(사진 세로 중앙) */
.blockproc__item:not(:last-child) .blockproc__mediawrap::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-8) / 2); width: 12px; height: 12px; border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: translate(50%, -50%) rotate(45deg); opacity: .55; }
.blockproc__title { display: block; margin: var(--space-4) 0 4px; font-size: .82rem; font-weight: 700; color: var(--text); }
.blockproc__desc { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 720px) { .blockproc { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .blockproc__item:nth-child(2) .blockproc__mediawrap::after { display: none; } }
.facilcard { display: flex; flex-direction: column; background: none; border: none; box-shadow: none; }
.facilcard__media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.facilcard__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.facilcards .facilcard:nth-child(5) .facilcard__media img { object-position: 18% center; }
.facilcard__tx { padding: var(--space-4) var(--space-2) 0; color: var(--text); text-align: center; }
.facilcard__title { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.facilcard__desc { font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 1080px) { .facilcards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .facilcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .facilcards { grid-template-columns: 1fr; } }
/* 가스별 특성 및 용도: 가로 탭 + 좌 상세/우 사진 (참고이미지) */
.gasinfo { margin-top: var(--space-4); }
.gasinfo__nav { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 5px; margin-bottom: var(--space-4); }
.gasinfo__btn { flex: 1; text-align: center; border: none; border-radius: 8px; background: transparent; padding: 0.45rem var(--space-2); font-weight: 700; font-size: .92rem; color: var(--text); cursor: pointer; transition: background .2s ease, color .2s ease; }
.gasinfo__btn span { font-weight: 500; color: var(--text-muted); }
.gasinfo__btn:hover { background: rgba(0,0,0,.04); color: var(--brand); }
.gasinfo__btn.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.gasinfo__btn.is-active span { color: rgba(255,255,255,.85); }
.gasinfo__panel[hidden] { display: none; }
.gasinfo__panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; align-items: stretch; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; animation: gasFade .35s ease; }
.gasinfo__detail { padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.gasinfo__title { display: flex; align-items: baseline; gap: .4em; font-size: 1.6rem; font-weight: 800; color: var(--text); }
.gasinfo__formula { font-size: 2.4rem; font-weight: 800; color: var(--eyebrow); line-height: 1; letter-spacing: -.01em; }
.gasinfo__formula sub { font-size: .55em; }
.gasinfo__title em { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.gasinfo__desc { color: var(--text-muted); line-height: 1.6; margin: var(--space-3) 0 var(--space-4); word-break: keep-all; }
.gasinfo__rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.gasinfo__rows li { display: grid; grid-template-columns: 26px 84px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.gasinfo__rows li:last-child { border-bottom: none; }
.gasinfo__ic { color: var(--brand); display: inline-flex; }
.gasinfo__ic svg { width: 20px; height: 20px; }
.gasinfo__rows b { font-size: .86rem; font-weight: 700; color: var(--text); }
.gasinfo__rows li > span:last-child { font-size: .86rem; color: var(--text-muted); word-break: keep-all; }
.gasinfo__photo { min-height: 340px; }
.gasinfo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) { .gasinfo__panel { grid-template-columns: 1fr; } .gasinfo__photo { min-height: 0; aspect-ratio: 16 / 9; order: -1; } .gasinfo__nav { flex-wrap: wrap; } .gasinfo__btn { flex: 1 1 calc(33.33% - 4px); } }
/* KLCC GAS 개요: 4 스탯 카드 + 우측 시설 사진 */
.klccgas { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5); align-items: stretch; margin-top: var(--space-4); }
.klccgas__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.klccgas__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-3); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; }
.klccgas__ic { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: var(--space-3); }
.klccgas__ic svg { width: 40px; height: 40px; }
.klccgas__ic--img { width: 92px; height: 92px; }
.klccgas__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 아이콘 시각 크기를 가스 섹션 기준으로 통일 (아트워크 여백 차이 보정) */
#ice-why .klccgas__ic--img { width: 84px; height: 84px; }
.klccgas__num { font-size: 1.55rem; font-weight: 800; color: var(--eyebrow); line-height: 1.1; }
.klccgas__num--sm { font-size: 1.1rem; }
.klccgas__num .klccgas__u { font-size: .62em; font-weight: 700; margin-left: 1px; }
.klccgas__num sup { font-size: .6em; }
.klccgas__label { margin-top: var(--space-2); font-size: .9rem; font-weight: 700; color: var(--text); word-break: keep-all; }
.klccgas__label small { display: block; margin-top: 3px; font-size: .76rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.klccgas__sub { margin-top: 2px; font-size: .76rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.klccgas__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.klccgas__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .klccgas { grid-template-columns: 1fr; } .klccgas__stats { grid-template-columns: repeat(2, 1fr); } .klccgas__photo { aspect-ratio: 16 / 9; } }
@media (max-width: 480px) { .klccgas__stats { grid-template-columns: 1fr 1fr; } }

/* KLCC GAS 개요: 좌측 사진(캡션) + 우측 2×2 카드 (참고 이미지) */
.klccgas2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-5); }
.klccgas2__photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 0; }
.klccgas2__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.klccgas2__cap { position: absolute; left: var(--space-5); bottom: var(--space-5); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.klccgas2__cap b { display: block; font-size: 1.05rem; font-weight: 700; }
.klccgas2__cap span { display: inline-block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.6); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.klccgas2__cap--img img { position: static; inset: auto; display: block; width: clamp(140px, 16.8vw, 224px); height: auto; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.klccgas2__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.klccard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.klccard__num { position: absolute; top: var(--space-3); right: var(--space-4); font-size: 1.05rem; font-weight: 800; color: #b9c6d6; letter-spacing: .02em; }
.klccard__ic { width: 52px; height: 52px; border-radius: 50%; background: #eef4fb; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); }
.klccard__ic svg { width: 30px; height: 30px; }
.klccard__ic--img { width: 58px; height: 58px; border-radius: 0; background: none; }
.klccard__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.klccard__title { display: block; margin: var(--space-3) 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.klccard__value { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 800; color: var(--brand); }
/* 드라이아이스 경쟁력: 카드 컴팩트화로 사진 가로 비율 확대·섹션 높이 축소 */
/* 가스 KLCC 섹션: 사진 비율 약 2:1로 보이도록 카드 컴팩트화·섹션 높이 축소 */
#gas-intro .klccard, #about-home .klccard { padding: 12px var(--space-4); }
#gas-intro .klccard__ic--img, #about-home .klccard__ic--img { width: 44px; height: 44px; }
#gas-intro .klccard__title, #about-home .klccard__title { margin: 7px 0 4px; font-size: 1rem; }
#gas-intro .klccard__desc, #about-home .klccard__desc { font-size: .83rem; line-height: 1.45; }
/* 회사소개(About Us) — 더보기 버튼 가운데 정렬 */
#about-home .about-home__foot { text-align: center; margin-top: var(--space-6); }
/* 시설·시공 개요: 가스 KLCC 섹션과 동일 (사진 비율·높이 일치) */
#intro .klccard { padding: 12px var(--space-4); }
#intro .klccard__ic--img { width: 44px; height: 44px; }
#intro .klccard__title { margin: 7px 0 4px; font-size: 1rem; }
#intro .klccard__desc { font-size: .83rem; line-height: 1.45; }
#intro .klccgas2__cap--img img { width: auto; height: 33px; }
#intro .klccgas2__photo img { object-position: center 60%; }
#quality-intro { padding-bottom: calc(var(--space-6) * 0.7 * 2.2); }
#qc-process { padding-bottom: calc(var(--space-6) * 0.7 * 2.2); }
/* 품질·인증 카드: 왼쪽 큰 아이콘 + 오른쪽 내용(번호·값·제목·구분선·설명) 상세형 (참고 이미지) */
#quality-intro .klccgas2__photo { aspect-ratio: 703 / 380; }
#quality-intro .klccgas2__cap--img img { width: auto; height: 33px; }
#quality-intro .klccard { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; padding: var(--space-5); text-align: left; }
#quality-intro .klccard__ic--img { grid-column: 1; grid-row: 1; align-self: center; }
#quality-intro .klccard__title { grid-column: 2; grid-row: 1; align-self: center; }
#quality-intro .klccard__desc { grid-column: 1 / 3; grid-row: 2; }
#quality-intro .klccard__num { display: block; position: absolute; top: var(--space-4); right: var(--space-5); font-size: 1.05rem; font-weight: 800; color: #b9c6d6; letter-spacing: .02em; }
#quality-intro .klccard__ic--img { flex: none; width: 66px; height: 66px; }
#quality-intro .klccard__value { display: block; margin: 0; font-size: 1.7rem; font-weight: 800; color: #143b63; line-height: 1.1; letter-spacing: -0.01em; }
#quality-intro .klccard__title { display: block; margin: 5px 0 0; font-size: 1rem; font-weight: 800; color: var(--brand); }
#quality-intro .klccard__desc { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .83rem; line-height: 1.45; color: var(--text-muted); white-space: normal; }
#intro .section__lead, #quality-intro .section__lead { max-width: none; white-space: nowrap; }
@media (max-width: 760px) { #intro .section__lead, #quality-intro .section__lead { white-space: normal; } }
#about-home .section__lead { max-width: none; }
#ice-why .klccgas2__cards, #quality-intro .klccgas2__cards { gap: var(--space-3); }
#ice-why .klccard { padding: 9px var(--space-4); }
#ice-why .klccard__ic--img { width: 40px; height: 40px; }
#ice-why .klccard__title { margin: 5px 0 1px; font-size: .98rem; }
#ice-why .klccard__value { margin-bottom: 2px; font-size: .88rem; }
#ice-why .klccard__desc { font-size: .82rem; line-height: 1.4; }
#ice-why .klccgas2__cap--img img { width: auto; height: 33px; }
.klccard__desc { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-muted); word-break: keep-all; }
@media (max-width: 900px) { .klccgas2 { grid-template-columns: 1fr; } .klccgas2__photo { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 480px) { .klccgas2__cards { grid-template-columns: 1fr; } }
#business .section__foot { margin-top: var(--space-6); }
#business .section__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
#why .section__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
/* PRODUCTS 제품카드 이미지: 레퍼런스처럼 와이드 크롭으로 세로 축소 */
#product-showcase .pgcard__media img { aspect-ratio: 5 / 2; }
/* 용기검사 05 검사 장비 및 기술력: split 내부 경쟁력 카드 2열·좌측 정렬 */
#capability .strengths { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
#capability .strcard { text-align: left; padding: 0; }
#capability .strcard__ic { margin: 0 0 var(--space-2); }
/* 프로세스: 사진 대신 아이콘 박스 (시설·시공 / 드라이아이스 제조공정 / 품질관리) */
#const-process .supply-usebox, #ice-process .supply-usebox, #qc-process .supply-usebox { gap: var(--space-2); }
#const-process .supply-usebox svg, #ice-process .supply-usebox svg, #qc-process .supply-usebox svg { width: 46px; height: 46px; color: var(--brand); }
/* 품질 개요 지표 밴드 하단 여백 */
#quality-intro .facstats { margin-bottom: 0; }
/* 품질 첫 섹션 카드를 가스제품 klccgas 카드 크기와 동일하게 */
#quality-intro .facstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-height: 210px; padding: var(--space-6) var(--space-3); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#quality-intro .facstat__ic--img { width: 92px; height: 92px; margin: 0 auto var(--space-3); color: unset; }
#quality-intro .facstat__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 고순도 제조 역량: 설비별 좌우 교차(split) 개별 행 */
#purity .split + .split { margin-top: var(--space-12); }
#purity .split__body .subhead { margin: var(--space-2) 0 var(--space-3); }
.split--reverse { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 900px) { .split--reverse { grid-template-columns: 1fr; } }
/* 드라이아이스 생산 지표 밴드 하단 여백 */
#ice-product .facstats { margin-bottom: var(--space-12); }
/* 드라이아이스 너겟·블록 특성/용도 리스트 */
.ice-facts { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ice-facts li { position: relative; padding-left: var(--space-4); font-size: .9rem; color: var(--text); line-height: 1.65; word-break: keep-all; }
.ice-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.ice-facts b { color: var(--brand); margin-right: .35em; }
/* 시설·시공 개요: split 본문 내 highlights는 2열 */
#intro .introfeats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
#intro .introfeat { align-items: center; text-align: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-3); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
#intro .introfeat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
#intro .introfeat__ic--img { width: 66px; height: 66px; border-radius: 0; background: transparent; margin-bottom: var(--space-2); }
#intro .introfeat__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
#intro .introfeat b { letter-spacing: .04em; }

/* 고객지원: 무엇을 도와드릴까요 (4 도움 카드) */
.helpcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-8); list-style: none; padding: 0; }
.helpcard a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); height: 100%; padding: var(--space-7) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.helpcard a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.helpcard__ic { width: 60px; height: 60px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.helpcard__ic svg { width: 44px; height: 44px; }
.helpcard__ic--img { width: 88px; height: 88px; }
.helpcard__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.helpcard b { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: var(--space-2); }
.helpcard p { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 820px) { .helpcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .helpcards { grid-template-columns: 1fr; } }

/* 고객지원: 사업장 안내 (사진 카드) */
.officecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.officecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.officecard__media { position: relative; flex: none; height: 160px; background: #eef2f6; }
.officecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.officecard__badge { position: absolute; left: var(--space-5); bottom: -24px; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.officecard__badge svg { width: 26px; height: 26px; }
.officecard__badge--img img { width: 34px; height: 34px; object-fit: contain; display: block; }
.officecard__body { padding: var(--space-7) var(--space-6) var(--space-5); flex: 1; display: flex; flex-direction: column; }
.officecard__body h3 { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0 0 var(--space-2); }
.officecard__addr { font-size: .88rem; color: var(--text-muted); margin: 0 0 var(--space-3); line-height: 1.5; }
.officecard__addr--nowrap { white-space: nowrap; letter-spacing: -0.04em; font-size: .8rem; }
.officecard__row { font-size: .88rem; color: var(--text); margin: 3px 0; }
.officecard__row b { color: var(--eyebrow); font-weight: 700; margin-right: 8px; }
.officecard .btn { margin-top: var(--space-4); align-self: flex-start; }
@media (max-width: 1100px) { .officecards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .officecards { grid-template-columns: 1fr; } }

/* 용기검사 전문검사기관 (좌 사진 + 우 회사정보표 + 하단 4스탯) */
.inspartner { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-4); }
.inspartner__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 320px; }
.inspartner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inspartner__media img.inspartner__badge { inset: auto auto var(--space-2) var(--space-2); width: 35%; max-width: 214px; height: auto; object-fit: contain; z-index: 2; }
.inspartner__body .section__title { margin-top: var(--space-3); }
.inspartner__table { width: 100%; border-collapse: collapse; margin-top: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.inspartner__table th, .inspartner__table td { text-align: left; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.inspartner__table tr:last-child th, .inspartner__table tr:last-child td { border-bottom: 1px solid var(--border); }
.inspartner__table tr:first-child th, .inspartner__table tr:first-child td { border-top: 1px solid var(--border); }
.inspartner__table th { width: 30%; background: transparent; color: var(--eyebrow); font-weight: 700; white-space: nowrap; border-right: 1px solid var(--border); vertical-align: middle; }
.inspartner__table td { vertical-align: middle; }
.ipt-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--brand); vertical-align: middle; margin-right: var(--space-2); position: relative; top: -1px; }
.ipt-ic svg { width: 100%; height: 100%; display: block; }
.inspartner__table td { color: var(--text); }
.inspstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.inspstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); text-align: left; display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
.inspstat__ic { flex: none; width: 54px; height: 54px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.inspstat__ic svg { width: 32px; height: 32px; }
.inspstat__ic--img { width: 56px; height: 56px; }
.inspstat__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inspstat__tx { display: flex; flex-direction: column; min-width: 0; }
.inspstat b { font-size: 1.05rem; font-weight: 800; color: var(--eyebrow); letter-spacing: .02em; }
.inspstat small { font-size: .8rem; color: var(--text-muted); margin-top: 5px; line-height: 1.4; word-break: keep-all; }
@media (max-width: 900px) { .inspartner { grid-template-columns: 1fr; gap: var(--space-6); } .inspstats { grid-template-columns: repeat(2, 1fr); } }

/* 식품첨가물 탄산가스 품질 (좌 사진 + 우 스탯) */
.co2quality { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: stretch; margin-top: var(--space-5); }
.co2quality__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.co2quality__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.co2quality__body { margin-top: -7px; }
.co2quality__body .section__title { margin-top: var(--space-3); }
.co2stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-6) 0; }
.co2stats li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-2); text-align: center; }
.co2stats__ic { display: block; width: 46px; height: 46px; margin: 0 auto var(--space-2); }
.co2stats__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.co2stats b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--eyebrow); line-height: 1.1; }
.co2stats b span { font-size: .52em; font-weight: 700; margin-left: 2px; }
.co2stats small { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 6px; line-height: 1.35; word-break: keep-all; }
.co2quality__foot { margin-top: var(--space-2); }
@media (max-width: 900px) { .co2quality { grid-template-columns: 1fr; gap: var(--space-6); } .co2stats { grid-template-columns: repeat(2, 1fr); } }

/* 고순도 제조 역량 (사진 카드 + 하단 오버레이) */
/* 가스분석실 히어로(배경 사진 + 좌측 반투명 패널 + 분석 카드) */
.qlab { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-top: var(--space-4); background: #eef2f6; }
.qlab__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; transform: scale(0.85); transform-origin: right center; z-index: 0; }
/* 사진(넓은 배너 크롭) + 좌측 텍스트 오버레이 */
.qlab--imgonly { position: relative; width: 70%; margin: var(--space-4) auto 0; aspect-ratio: 2.55 / 1; border-radius: var(--radius-lg); overflow: hidden; background: none; box-shadow: none; }
.qlab--imgonly .qlab__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; margin: 0; border-radius: 0; box-shadow: none; }
.qlab--imgonly .qlab__panel { width: min(60%, 460px); min-height: 100%; padding: var(--space-7); justify-content: flex-start; }
.qlab__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); }
.qlab__eyebrow::after { content: ""; width: 22px; height: 2px; background: var(--eyebrow); }
/* 가스분석실 완성 시안 이미지 */
.qlab--full { width: 100%; margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; background: none; box-shadow: none; }
.qlab--full img { width: 100%; height: auto; display: block; }
/* 가스분석실 히어로(우측 사진 + 좌측 웨이브 패널 + 하단 3개 항목) */
.qlab--hero { margin-top: var(--space-4); aspect-ratio: 2.547 / 1; }
.qlab--hero .qlab__bg { transform: none; object-position: center; }
.qlab--hero .qlab__panel { width: min(52%, 600px); min-height: 100%; padding: clamp(var(--space-4), 4vw, var(--space-8)); justify-content: center; background: none; }
.qlab--hero .qlab__feats { list-style: none; margin: auto 0 0; padding: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.qlab--hero .qlab__feat { text-align: center; padding: 0 var(--space-2); border-left: 1px solid rgba(30,60,100,.14); }
.qlab--hero .qlab__feat:first-child { border-left: none; }
.qlab--hero .qlab__ic { width: 52px; height: 52px; margin: 0 auto var(--space-2); }
.qlab--hero .qlab__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qlab--hero .qlab__feat b { display: block; font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.qlab--hero .qlab__feat p { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 820px) {
  .qlab--hero { display: flex; flex-direction: column; }
  .qlab--hero .qlab__bg { position: relative; height: 200px; }
  .qlab--hero .qlab__panel { width: 100%; min-height: 0; }
}
@media (max-width: 820px) {
  .qlab--imgonly { width: 100%; aspect-ratio: auto; }
  .qlab--imgonly .qlab__panel { width: 100%; }
}
.qlab__panel { position: relative; z-index: 1; width: min(52%, 500px); min-height: 340px; padding: var(--space-8) var(--space-8) var(--space-7); background: linear-gradient(100deg, rgba(243,247,252,.98) 62%, rgba(243,247,252,.82) 82%, rgba(243,247,252,0) 100%); display: flex; flex-direction: column; justify-content: center; }
.qlab__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.qlab__title { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-h2); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.qlab__sub { margin: 0 0 var(--space-3); font-size: 1.12rem; font-weight: 700; color: var(--text); line-height: 1.45; }
.qlab__desc { margin: 0 0 var(--space-5); font-size: var(--fs-lead); line-height: 1.65; color: var(--text-muted); word-break: keep-all; }
.qlab__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.qlab__card { display: flex; align-items: center; gap: var(--space-3); background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); }
.qlab__ic { flex: none; width: 38px; height: 38px; color: var(--brand); display: grid; place-items: center; }
.qlab__ic svg { width: 24px; height: 24px; }
.qlab__tx { flex: 1; min-width: 0; }
.qlab__tx b { display: block; font-size: .95rem; font-weight: 800; color: var(--text); }
.qlab__tx p { margin: 2px 0 0; font-size: .78rem; color: var(--text-muted); }
.qlab__arrow { flex: none; width: 9px; height: 9px; border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: rotate(45deg); opacity: .5; }
.qlab__foot { margin-top: var(--space-6); font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--brand); opacity: .7; }
.qlab__hand { position: absolute; right: var(--space-7); bottom: var(--space-6); z-index: 1; text-align: right; font-size: 1.15rem; font-weight: 800; color: var(--brand); line-height: 1.4; transform: rotate(-5deg); text-shadow: 0 1px 8px rgba(255,255,255,.6); }
@media (max-width: 820px) {
  .qlab__panel { width: 100%; max-width: none; min-height: 0; background: rgba(243,247,252,.96); }
  .qlab__bg { position: relative; height: 220px; }
  .qlab { display: flex; flex-direction: column; }
  .qlab__hand { display: none; }
}

.puritycards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.puritycard { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-md); }
.puritycard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.puritycard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(38,40,44,.92) 8%, rgba(38,40,44,.6) 38%, rgba(38,40,44,0) 66%); }
.puritycard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-6) var(--space-6) var(--space-6); color: #fff; }
.puritycard__title { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 var(--space-2); }
.puritycard__desc { font-size: .9rem; color: rgba(255,255,255,.9); line-height: 1.55; margin: 0 0 var(--space-4); word-break: keep-all; }
.puritycard__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.puritycard__tags li { font-size: .78rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 13px; }
@media (max-width: 820px) { .puritycards { grid-template-columns: 1fr; } .puritycard { aspect-ratio: 16 / 9; } }

/* 시공 범위 (사진 카드) */
.scopecards { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
.scopecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.scopecard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.scopecard__media { aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f6; }
.scopecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.scopecard:hover .scopecard__media img { transform: scale(1.05); }
.scopecard__body { padding: var(--space-4) var(--space-4) var(--space-5); }
.scopecard__num { display: block; font-size: .82rem; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.scopecard__title { font-size: 1rem; font-weight: 800; color: var(--text); margin: 2px 0 var(--space-2); word-break: keep-all; }
.scopecard__desc { margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
@media (max-width: 1080px) { .scopecards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .scopecards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .scopecards { grid-template-columns: 1fr; } }

/* 주요 공급설비 카드(사진 + 아이콘·제목 + 설명) */
.mainfacil { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.mainfacil__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.mainfacil__media { aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f6; }
.mainfacil__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mainfacil__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.mainfacil__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 8px; }
.mainfacil__ic { flex: none; height: 30px; color: var(--brand); display: flex; align-items: center; }
.mainfacil__ic svg { width: 30px; height: 30px; }
.mainfacil__ic img { height: 100%; width: auto; display: block; }
.mainfacil__title { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--text); }
.mainfacil__desc { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
@media (max-width: 900px) { .mainfacil { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mainfacil { grid-template-columns: 1fr; } }

/* 안전·품질·인허가: 좌 사진 + 우 카드(2×2) */
.safetysplit { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-8); }
.safetysplit__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; }
.safetysplit__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.safetysplit .cards { margin-top: 0; }
.safetylist { list-style: none; padding: 0; margin: 0; align-self: center; display: flex; flex-direction: column; gap: var(--space-5); }
.safetylist li { position: relative; padding-left: 44px; font-size: 1.12rem; font-weight: 600; color: var(--text); line-height: 1.5; word-break: keep-all; }
.safetylist li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .82rem; font-weight: 800; display: grid; place-items: center; }
@media (max-width: 900px) { .safetysplit { grid-template-columns: 1fr; gap: var(--space-6); } .safetylist { align-self: start; } }

/* 안전·품질·인허가: 사진 프레임(기업소개 생산시설 스타일) + 우측 텍스트 오버레이 */
.safetyband { position: relative; aspect-ratio: 1619 / 971; max-width: 780px; margin: var(--space-8) auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.safetyband__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.safetyband__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,28,32,0) 30%, rgba(28,28,32,.4) 52%, rgba(28,28,32,.78) 100%); z-index: 1; }
.safetyband__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(16px, 2.5vw, 30px) 0 var(--space-6); }
.safetyband__panel { max-width: 460px; color: #fff; }
.safetyband__title { font-size: var(--fs-h2); font-weight: 800; color: #fff; margin: var(--space-3) 0 var(--space-6); }
.safetylist--light li { color: #fff; }
.safetylist--light li::before { background: #fff; color: var(--brand); }
@media (max-width: 760px) {
  .safetyband { aspect-ratio: 3 / 4; }
  .safetyband__scrim { background: linear-gradient(180deg, rgba(28,28,32,.32) 0%, rgba(28,28,32,.8) 55%); }
  .safetyband__inner { align-items: flex-end; justify-content: flex-start; padding: 0 var(--space-6) var(--space-6); }
  .safetyband__panel { max-width: 100%; }
}

/* 안전·품질·인허가 재구성(SAFETY & COMPLIANCE) */
.safecompl { display: grid; grid-template-columns: 0.95fr 1.05fr 1.15fr; align-items: stretch; gap: 0; margin-top: var(--space-6); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.safecompl__intro { padding: var(--space-7); display: flex; flex-direction: column; justify-content: center; }
.safecompl__ic-lg { width: 46px; height: 46px; color: var(--brand); margin-bottom: var(--space-4); }
.safecompl__ic-lg svg, .safecompl__ic-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.safecompl__title { margin: 0 0 var(--space-3); font-size: 1.18rem; font-weight: 800; color: var(--brand); line-height: 1.45; }
.safecompl__desc { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--text-muted); word-break: keep-all; }
.safecompl__list { list-style: none; margin: 0; padding: var(--space-7) var(--space-7) var(--space-7) var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); border-left: 1px solid var(--border); }
.safecompl__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.safecompl__ic { width: 34px; height: 34px; color: var(--brand); flex: none; }
.safecompl__ic svg, .safecompl__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.safecompl__tx b { display: block; font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.safecompl__tx p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.safecompl__media { position: relative; min-height: 260px; }
.safecompl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.safecompl__hand { position: absolute; top: var(--space-5); right: var(--space-5); z-index: 1; text-align: right; font-size: 1.05rem; font-weight: 800; color: var(--brand); line-height: 1.4; transform: rotate(-6deg); text-shadow: 0 1px 6px rgba(255,255,255,.8); }
@media (max-width: 980px) {
  .safecompl { grid-template-columns: 1fr 1fr; }
  .safecompl__media { grid-column: 1 / -1; min-height: 220px; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .safecompl { grid-template-columns: 1fr; }
  .safecompl__list { border-left: none; border-top: 1px solid var(--border); }
}
.whycards .feature__title { font-size: 1rem; margin-bottom: var(--space-2); }
.whycards .feature__text { font-size: .8rem; line-height: 1.6; }
@media (max-width: 980px) { .whycards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .whycards { grid-template-columns: repeat(2, 1fr); } }

/* 주요 제품 5종 카드 */
.prodgrid { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.pgcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.pgcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pgcard__media { display: block; overflow: hidden; }
.pgcard__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.pgcard:hover .pgcard__media img { transform: scale(1.06); }
.pgcard__title { display: block; font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: var(--space-5) var(--space-5) var(--space-2); }
.pgcard__title em { font-style: normal; color: var(--accent-hover); }
.pgcard__text { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.6; margin: 0 var(--space-5); flex: 1; }
.pgcard__more { display: block; margin: var(--space-4) var(--space-5) var(--space-5); font-size: .82rem; font-weight: 700; color: var(--accent-hover); }
.pgcard__more::after { content: " →"; }
/* 가스제품 라인업: '자세히 보기' 링크 제거로 인한 카드 하단 여백 보완 */
#gas .pgcard__text { margin-bottom: var(--space-6); }
/* 회사소개 01: 참고이미지형 — 제목 강조색 + 인용 박스 + 우측(사진+원형 하이라이트 6) */
.tx-brand { color: var(--eyebrow); letter-spacing: 0.075em; }
.about2__rule { display: block; width: 60px; height: 2px; background: var(--eyebrow); border-radius: 2px; margin: var(--space-5) 0 var(--space-7); }
#intro .about2 { align-items: stretch; grid-template-columns: 1fr 1.12fr; }
/* 우측 사진: 상단은 제목 라인, 하단은 왼쪽 텍스트 마지막 줄에 일직선 정렬. 초과 바닥면은 object-fit으로 크롭 */
#intro .about2__right { position: relative; margin-top: 0; }
#intro .about2__media { position: absolute; top: var(--space-12); left: 0; right: 0; bottom: 0; }
#intro .section__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
#intro .section__title--md { font-size: var(--fs-h2); }
#intro .secnum, #overview .secnum, #history .secnum { display: flex; align-items: baseline; gap: .55em; margin-bottom: var(--space-6); }
#intro .secnum__no, #overview .secnum__no, #history .secnum__no { font-size: 1.5rem; }
#intro .secnum__title, #overview .secnum__title, #history .secnum__title { font-size: .82rem; margin-top: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--brand); align-self: center; }
#intro .about2__media img { height: 100%; aspect-ratio: auto; object-fit: cover; }
#intro .about2__lead { margin: 0 0 var(--space-4); }
#intro .about2__lead:last-child { margin-bottom: 0; }
/* 03 연혁: 공장 전경 배경 이미지(오파시티 50%) */
#history { position: relative; overflow: hidden; padding-block: 3rem 6rem; }
#history::before { content: ""; position: absolute; inset: 0; background: url("../images/site/history-bg.jpg?v=20260826") center/cover no-repeat; opacity: .2; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%); }
#history > .container { position: relative; z-index: 1; }
/* 연혁 가로 타임라인(시안형): 중앙 헤더 + 7개 마일스톤 + 2022·2025 강조카드 + 하단 배너 */
.hist2__head { margin-bottom: var(--space-14, 5rem); }
.hist2__head--center { text-align: center; }
.hist2__head--center .eyebrow { justify-content: center; }
.hist2__head--center .section__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-top: var(--space-2); }
.hist2__head--center .hist2__sub { margin-inline: auto; }
.hist2__sub { max-width: 70ch; margin: var(--space-3) 0 0; color: var(--text-muted); line-height: 1.6; font-size: var(--fs-lead); }
.hist2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); align-items: start; }
.hist2__item { position: relative; text-align: center; }
.hist2__item--card::before { content: ""; position: absolute; inset: calc(-1 * var(--space-4)) 0 calc(-1 * var(--space-5)); background: var(--surface-brand); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--border); z-index: 0; }
.hist2__year { position: relative; z-index: 2; display: block; color: var(--eyebrow); font-size: 1.3rem; font-weight: 800; margin-bottom: var(--space-4); letter-spacing: .02em; }
.hist2__rail { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: var(--space-5); }
.hist2__rail::before { content: ""; position: absolute; top: 50%; left: calc(var(--space-3) / -2); right: calc(var(--space-3) / -2); height: 2px; background: var(--border-strong); transform: translateY(-50%); z-index: 1; }
.hist2__item:first-child .hist2__rail::before { left: 50%; }
.hist2__item:last-child .hist2__rail::before { right: 50%; }
.hist2__ic { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--eyebrow); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 14px rgba(27, 65, 149, .28); }
.hist2__ic svg { width: 26px; height: 26px; }
.hist2 .nowrap { white-space: nowrap; }
.hist2__ic--img { width: 68px; height: 68px; background: transparent; box-shadow: none; }
.hist2__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 아이콘 hover 확대 애니메이션(연도 숫자도 함께 확대) */
.hist2__ic, .hist2__year { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hist2__ic { cursor: pointer; }
.hist2__ic:hover { transform: scale(1.18); }
.hist2__item:has(.hist2__ic:hover) .hist2__year { transform: scale(1.18); }
/* 아이콘 hover 시 하단 제목·설명 텍스트 검정으로 */
.hist2__body { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hist2__title { position: relative; transition: color .25s ease; }
.hist2__title::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; background: var(--brand); border-radius: 2px; transform: translateX(-50%); transition: width .3s ease; }
.hist2__desc { transition: color .25s ease; }
.hist2__item:has(.hist2__ic:hover) .hist2__body { transform: translateY(-5px); }
.hist2__item:has(.hist2__ic:hover) .hist2__title { color: var(--eyebrow); }
.hist2__item:has(.hist2__ic:hover) .hist2__title::after { width: 30px; }
.hist2__item:has(.hist2__ic:hover) .hist2__desc { color: var(--text); }
.hist2__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-5); padding: 0 var(--space-2); }
.hist2__entry + .hist2__entry { padding-top: var(--space-4); border-top: 1px dashed var(--border-strong); }
.hist2__title { display: block; font-size: .98rem; font-weight: 800; color: var(--text); line-height: 1.35; word-break: keep-all; }
.hist2__desc { margin: var(--space-2) 0 0; font-size: .82rem; color: var(--text-muted); line-height: 1.55; word-break: keep-all; }
.hist2__banner { display: flex; align-items: center; gap: var(--space-4); width: max-content; max-width: 100%; margin: var(--space-10) auto 0; padding: var(--space-4) var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); }
.hist2__banner-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--eyebrow); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hist2__banner-ic svg { width: 20px; height: 20px; }
.hist2__banner-tx { color: var(--eyebrow); font-weight: 700; line-height: 1.5; }
@media (max-width: 992px) {
  .hist2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .hist2__rail::before { display: none; }
  .hist2__item--card::before { inset: calc(-1 * var(--space-4)); }
}
@media (max-width: 560px) {
  .hist2 { grid-template-columns: 1fr; }
  .hist2__banner { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
}
/* 조직도 재구성(시안형): 중앙 헤더 + 대표이사·총괄전무 + 8팀 카드 + 하단 배너 */
.org2__head { margin-bottom: var(--space-10); }
.org2__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: var(--space-2) 0 0; text-align: center; }
.org2__sub { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--fs-lead); }
.org2__top { display: flex; flex-direction: column; align-items: center; }
.org2__ceo { width: 128px; height: 128px; border-radius: 50%; border: 3px solid var(--eyebrow); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--shadow-sm); }
.org2__ceo-ic { color: var(--eyebrow); }
.org2__ceo-ic svg { width: 26px; height: 26px; }
.org2__ceo-role { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.org2__ceo-name { font-size: .85rem; color: var(--text-muted); }
.org2__vline, .org2__bus { width: 2px; background: var(--border-strong); }
.org2__vline { height: var(--space-7); }
.org2__bus { height: var(--space-8); }
.org2__evp { display: inline-flex; align-items: center; gap: .5em; background: var(--eyebrow); color: #fff; font-weight: 700; padding: var(--space-3) var(--space-8); border-radius: 999px; box-shadow: var(--shadow-sm); }
.org2__evp-ic { display: inline-flex; }
.org2__evp-ic svg { width: 20px; height: 20px; }
.org2__teams { list-style: none; margin: 0; padding: var(--space-7) 0 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-3); position: relative; }
/* 가로 연결선 양 끝을 실제 팀 칸 중심(8칸·gap 보정)에 맞춤: 칸 중심 = 6.25% - (7/16)*gap */
.org2__teams::before { content: ""; position: absolute; top: 0; left: calc(6.25% - 0.4375 * var(--space-3)); right: calc(6.25% - 0.4375 * var(--space-3)); height: 2px; background: var(--border-strong); }
.org2team { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.org2team::before { content: ""; position: absolute; top: calc(-1 * var(--space-7)); left: 50%; transform: translateX(-50%); width: 2px; height: var(--space-7); background: var(--border-strong); }
.org2team__ic { width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.org2team__ic svg { width: 28px; height: 28px; }
.org2team__name { display: block; margin: var(--space-3) 0 var(--space-4); font-size: 1rem; font-weight: 800; color: var(--text); }
.org2team__list { list-style: none; margin: 0; padding: var(--space-4) var(--space-3); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); flex: 1; width: 100%; box-sizing: border-box; }
.org2team__list li { position: relative; padding-left: 12px; font-size: .8rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.org2team__list li + li { margin-top: 7px; }
.org2team__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
/* 조직도 하단 배너(시안형: 아이콘 원형 + 구분선 + 헥사곤 데코) */
.orgbnr { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-12); padding: var(--space-7) var(--space-8); background: linear-gradient(110deg, var(--surface-brand) 0%, var(--surface) 55%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.orgbnr__ic { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--eyebrow); color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.orgbnr__ic svg { width: 40px; height: 40px; }
.orgbnr__tx { position: relative; z-index: 1; padding-left: var(--space-6); border-left: 1px solid var(--border-strong); }
.orgbnr__title { display: block; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; color: var(--text); line-height: 1.4; word-break: keep-all; }
.orgbnr .tx-brand { color: var(--eyebrow); letter-spacing: normal; font-weight: 700; }
.orgbnr__sub { display: block; margin-top: var(--space-2); font-size: .92rem; color: var(--text-muted); line-height: 1.6; word-break: keep-all; }
.orgbnr__deco { position: absolute; right: var(--space-6); top: 50%; transform: translateY(-50%); color: var(--eyebrow); opacity: .14; pointer-events: none; }
.orgbnr__deco svg { width: 150px; height: 90px; }
@media (max-width: 640px) {
  .orgbnr { flex-direction: column; text-align: center; gap: var(--space-4); }
  .orgbnr__tx { padding-left: 0; border-left: 0; }
  .orgbnr__deco { display: none; }
}
@media (max-width: 992px) {
  .org2__teams { grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-3); }
  .org2__teams::before, .org2team::before { display: none; }
}
@media (max-width: 560px) {
  .org2__teams { grid-template-columns: repeat(2, 1fr); }
  .org2__banner { flex-direction: column; text-align: center; }
}
/* 주요 사업 영역 — 02 회사개요 하위 블록(동일 배경), 6개 사진 카드 */
.bizarea__wrap { margin-top: var(--space-7); }
.bizarea__head { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-7); }
.bizarea__rule { flex: 1; height: 1px; background: var(--border); }
.bizarea__title { font-size: .98rem; font-weight: 700; letter-spacing: .08em; color: var(--eyebrow); white-space: nowrap; }
.bizarea { list-style: none; margin: 0 0 var(--space-9); padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
.bizcard { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bizcard__media { aspect-ratio: 1 / 1; overflow: hidden; }
.bizcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bizcard__media img[src*="biz-1-gas"] { object-position: 8% center; }
.bizcard__media img[src*="biz-3-tank"] { object-position: 62% 22%; }
.bizcard__media img[src*="biz-facility"] { object-position: 30% center; }
.bizcard__title { display: block; margin: var(--space-3) var(--space-3); font-size: .9rem; font-weight: 500; color: var(--eyebrow); word-break: keep-all; }
.bizcard__desc { margin: 0; padding: 0 var(--space-4) var(--space-10); font-size: .82rem; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.bizarea__banner { display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-6) var(--space-8); background: var(--eyebrow); border-radius: var(--radius-lg); color: #fff; }
.bizarea__banner-ic { flex: none; display: inline-flex; }
.bizarea__banner-ic svg { width: 34px; height: 34px; }
.bizarea__banner-tx { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 992px) { .bizarea { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (max-width: 560px) { .bizarea { grid-template-columns: repeat(2, 1fr); } .bizarea__banner { flex-direction: column; text-align: center; padding: var(--space-5); } .bizarea__banner-tx { font-size: .95rem; } }
.bizarea--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .bizarea--4 { grid-template-columns: repeat(2, 1fr); } }
/* 비전 문구 — 대형 타이포 인용(박스 제거, 중앙 정렬 에디토리얼) */
.about2__quote { position: relative; margin: var(--space-10) 0 0; padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--border); text-align: center; }
.about2__quote-mark { position: absolute; top: 0; left: 50%; transform: translate(-50%, -28%); background: transparent; padding: 0 var(--space-4); font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 1; color: var(--eyebrow); opacity: .85; pointer-events: none; }
.about2__quote-text { margin: 0 auto; color: var(--text); font-weight: 600; font-size: clamp(0.9rem, 1.92vw, 1.35rem); line-height: 1.5; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 720px) { .about2__quote-text { white-space: normal; word-break: keep-all; font-size: 1.05rem; line-height: 1.55; } }
.about2__quote-text strong { color: var(--eyebrow); font-weight: 800; }
.introhl { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.introhl__item { text-align: center; }
.introhl__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-brand); border: 1px solid var(--green-200); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
.introhl__ic svg { width: 28px; height: 28px; }
.introhl__t { display: block; font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.45; word-break: keep-all; }
@media (max-width: 900px) { #intro .about2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .introhl { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
/* 홈 ABOUT US 하단 하이라이트 스트립 */
.about-home__hl { margin-top: var(--space-10); padding-top: var(--space-9); border-top: 1px solid var(--border); }
/* 회사개요 3단: 소개+지표 / 회사정보 카드 / 사업정보 카드 */
.ovsec2 { display: grid; grid-template-columns: 0.72fr 2fr; gap: var(--space-8); align-items: stretch; }
.ovsec2__intro { display: flex; flex-direction: column; }
.ovsec2__intro .ovsec__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--text); line-height: 1.3; margin-top: var(--space-2); }
.ovsec2__intro .tx-brand { letter-spacing: normal; }
.ovsec2__intro .ovsec__lead { color: var(--text-muted); line-height: 1.7; margin-top: var(--space-3); }
.ovstats { display: flex; flex-direction: column; flex: 1; margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.ovstat { flex: 1; display: flex; align-items: center; gap: var(--space-7); }
.ovstat + .ovstat { border-top: 1px solid var(--border); }
.ovstat__ic { flex: none; align-self: center; color: var(--eyebrow); display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.ovstat__ic svg { width: 40px; height: 40px; }
.ovstat__ic--img img { width: 60px; height: 60px; object-fit: contain; display: block; }
.ovstat__num { font-size: 1.35rem; font-weight: 800; color: var(--eyebrow); line-height: 1.1; white-space: nowrap; }
.ovstat__label { font-size: .9rem; color: var(--text-muted); margin-left: calc(-1 * var(--space-5)); }
.ovcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr 1fr; }
/* 02 큰 정보 카드는 정적(hover 이동 해제) */
.ovsec2 .ovcard { transition: none; }
.ovsec2 .ovcard:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
.ovcard__col { display: flex; flex-direction: column; }
.ovcard__col + .ovcard__col { border-left: 1px solid var(--border); }
.ovrow { flex: 1; display: grid; grid-template-columns: 22px 92px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.ovrow:first-child { border-top: 0; }
.ovrow__ic { color: var(--brand); display: inline-flex; margin-top: 1px; }
.ovrow__ic svg { width: 20px; height: 20px; }
.ovrow__k { font-size: .9rem; font-weight: 700; color: var(--brand); }
.ovrow__v { font-size: .9rem; color: var(--text); line-height: 1.55; word-break: keep-all; }
.ovrow__v a { color: inherit; }
.ovrow__v--tight { letter-spacing: -0.03em; }
.ovrow__v ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ovrow__v li { position: relative; padding-left: 12px; }
.ovrow__v li::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
@media (max-width: 980px) { .ovsec2 { grid-template-columns: 1fr; } .ovcard { grid-template-columns: 1fr; } .ovcard__col + .ovcard__col { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 560px) { .ovrow { grid-template-columns: 20px 78px 1fr; } .ovstat { padding: 0 var(--space-4); } }
@media (max-width: 980px) { .prodgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .prodgrid { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   홈 시안 — CEO 메시지, 연혁, 인증/수상
   ===================================================================== */
/* CEO 메시지 + 방침 */
.ceohome { display: grid; grid-template-columns: 1.08fr 0.96fr 1.12fr; gap: var(--space-7); align-items: center; }
/* CEO 섹션 배경(파도 워터마크) + 사진 없는 2열 구성(메시지 중앙정렬 + 우측 카드) */
.ceo-section { position: relative; background: #f4f8fd; padding-block: clamp(18px, 2vw, 30px); }
.ceo-section > .ceohome { position: relative; z-index: 1; }
.ceo-section::before { content: ""; position: absolute; inset: 0; background: url("../images/site/ceo-bg.jpg?v=20260914b") center/cover no-repeat; z-index: 0; }
.ceohome--nophoto { grid-template-columns: 1.55fr 1fr; gap: var(--space-8); align-items: center; }
.ceohome--nophoto .ceohome__msg { align-items: center; text-align: center; }
.ceohome--nophoto .ceohome__msg .eyebrow { justify-content: center; }
.ceohome--nophoto .ceohome__desc { margin-inline: auto; max-width: 620px; }
.ceohome--nophoto .ceohome__sign { justify-content: center; }
@media (max-width: 980px) { .ceohome--nophoto { grid-template-columns: 1fr; } }
.ceohome__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); align-self: center; }
/* 레퍼런스: 가로형 사진 비율(16:10), 인물 중앙 프레이밍 */
.ceohome__photo img { width: 100%; height: auto; aspect-ratio: 1.32 / 1; object-fit: cover; object-position: 48% 22%; display: block; }
.ceohome__msg { display: flex; flex-direction: column; justify-content: center; }
.ceohome__quote { font-size: var(--fs-h2); font-weight: 800; color: var(--text); line-height: 1.32; margin: var(--space-2) 0 var(--space-3); white-space: nowrap; word-break: keep-all; }
.ceohome__quote b { color: #1c5fc0; font-weight: 800; }
.ceohome__desc { color: var(--text-muted); line-height: 1.65; }
.ceohome__sign { margin-top: var(--space-4); font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 1.4em; }
.ceohome__sign .sign-img { height: 2.3em; width: auto; }
.ceohome__policy { display: flex; flex-direction: column; gap: var(--space-4); }
/* CEO 섹션 우측 경영이념 카드(세로 스택, 컴팩트) */
.ceohome__phil { display: flex; flex-direction: column; gap: var(--space-4); }
.ceohome__phil .phil { padding: 0.65rem var(--space-6); gap: var(--space-5); background: var(--surface); }
.ceohome__phil .phil__ic { width: 48px; height: 48px; }
.ceohome__phil .phil__ic svg { width: 44px; height: 44px; }
.ceohome__phil .phil__ic--img { width: 56px; height: 56px; }
.ceohome__phil .phil__ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 레퍼런스: 아이콘과 텍스트 사이 세로 구분선 */
.ceohome__phil .phil__body { border-left: 1px solid var(--border); padding-left: var(--space-5); }
.ceohome__phil .phil__title { font-size: 1rem; }
.ceohome__phil .phil__desc { font-size: .8rem; }
/* 레퍼런스: 아이콘 좌측 + 텍스트 우측(가로형) */
.policycard { flex: 1; display: flex; flex-direction: row; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.policycard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.policycard__ic { width: 48px; height: 48px; border-radius: 0; background: transparent; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.policycard__ic svg { width: 40px; height: 40px; }
.policycard__txt { display: flex; flex-direction: column; }
.policycard__txt small { color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.policycard__txt b { display: block; font-size: var(--fs-h3); color: var(--text); margin: 3px 0 var(--space-2); }
.policycard__more { font-size: .8rem; font-weight: 700; color: var(--accent-hover); }
.policycard__more::after { content: " →"; }
@media (max-width: 980px) { .ceohome { grid-template-columns: 1fr; } .ceohome__policy, .ceohome__phil { flex-direction: row; } .ceohome__photo { max-width: 640px; margin-inline: auto; } }
@media (max-width: 560px) { .ceohome__policy, .ceohome__phil { flex-direction: column; } .ceohome__photo img { aspect-ratio: 3 / 2; } .ceohome__quote { white-space: normal; } }

/* 연혁 */
.histlist { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-12); }
.histlist li { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.hist__year { font-size: var(--fs-h3); font-weight: 800; color: var(--brand); flex: 0 0 auto; min-width: 3em; }
.hist__text { color: var(--text); line-height: 1.5; }
@media (max-width: 700px) { .histlist { grid-template-columns: 1fr; } }

/* 인증/수상 */
.certlist { list-style: none; margin: var(--space-8) 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
.cert { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.cert:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cert__ic { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-brand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.cert__ic svg { width: 26px; height: 26px; }
.cert b { font-size: .9rem; color: var(--text); }
.certlist__note { text-align: center; font-size: .78rem; color: var(--text-muted); margin: 0; }
@media (max-width: 860px) { .certlist { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .certlist { grid-template-columns: repeat(2, 1fr); } }


/* =====================================================================
   홈 인터랙션 — 스크롤 리빌, 가스 종류 탭
   ===================================================================== */
/* 콘텐츠 스크롤 리빌(자연스럽게 올라오기) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
/* 배경 패럴랙스 대상 — 이동 여유를 위해 살짝 오버사이즈 */
.hero__slides, .factory__bg { will-change: transform; }
/* 배경을 히어로와 정확히 동일 크기로 채워 이미지(약 2.5:1) 전체가 잘림 없이 보이게 함(레퍼런스와 동일 비율) */
.hero__slides { inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__slides, .factory__bg { transform: none !important; }
}

/* 가스 종류 클릭 전환 */
.gastabs { margin-top: var(--space-8); }
.gastabs__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.gastab { padding: .7rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.gastab:hover { border-color: var(--green-300); color: var(--text); }
.gastab.is-active { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.gaspanel { display: none; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.gaspanel.is-active { display: grid; animation: gasFade .45s ease; }
@keyframes gasFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gaspanel__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.gaspanel__media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.gaspanel__title { font-size: var(--fs-h1); font-weight: 800; color: var(--text); margin-bottom: var(--space-4); letter-spacing: -.01em; }
.gaspanel__text { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.8; margin-bottom: var(--space-7); }
@media (max-width: 820px) { .gaspanel.is-active { grid-template-columns: 1fr; } }