/* ───────────────────────────────────────────────────────────
   INTERZERO SYSTEM — premium brand stylesheet
   Brand: lime-green signature on warm charcoal / off-white
   ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%}
html{overflow-x:clip;overflow-y:auto}
body{overflow:visible}
body{
  font-family:'Noto Sans KR','Inter',sans-serif;
  font-weight:400;color:#1a1d23;background:#ffffff;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  letter-spacing:-.005em;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

:root{
  /* brand */
  --brand:#a8c808;          /* signature lime */
  --brand-dark:#8aa600;     /* hover / pressed */
  --brand-soft:#e9f0c2;     /* tinted bg */
  --brand-glow:rgba(168,200,8,.18);

  /* neutrals — warm slightly-green grays */
  --ink:#0f1115;            /* near black */
  --ink-2:#2a2e36;          /* body text */
  --ink-3:#5a5f6a;          /* secondary */
  --ink-4:#8a8f99;          /* tertiary */
  --line:#e8e8e2;           /* warm hairline */
  --line-strong:#d4d4cc;
  --bg:#ffffff;             /* page background — pure white */
  --bg-soft:#f2f2ec;        /* card / section */
  --bg-dark:#0f1115;        /* dark surfaces */
  --bg-dark-2:#181b22;

  /* type */
  --serif:'Cormorant Garamond','Noto Serif KR',serif;
}

/* ─────────── Top nav (shared) ─────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* flex + brand.margin-right:auto → brand 좌측 밀착, menu·nav-r 우측 정렬
     남는 여백은 brand ↔ menu 사이 gap으로 흡수 */
  display:flex;align-items:center;justify-content:flex-end;gap:0;
  padding:14px 24px;color:#0f1115;background:rgba(250,250,247,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:.25s ease;
}
.brand{display:flex;align-items:center;gap:14px;justify-self:start}
.brand img{height:42px;width:auto;display:block}
.brand .b-txt{font-family:'Inter';font-weight:700;font-size:17px;letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--ink)}
.brand .b-txt b{font-weight:800;letter-spacing:.04em}
.brand .b-txt span{font-weight:400;color:var(--ink-3);margin-left:6px;letter-spacing:.18em;font-size:11px;text-transform:uppercase}

/* flex 레이아웃: brand를 왼쪽으로 밀고 나머지는 오른쪽 */
.nav > .brand{margin-right:auto}
.nav > .mega{position:absolute;left:0;right:0}
.menu{display:flex;gap:0;margin-right:48px;font-family:'Inter','Noto Sans KR',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.14em;white-space:nowrap}
.menu-item{
  position:relative;padding:24px 22px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  /* 기본: 라벨 폭만큼 좁게 우측에 모여 있음 → 메뉴 hover(mega-open) 시 서브메뉴 폭으로 펼쳐짐 */
  flex:0 0 var(--w-open,var(--w-closed,auto));width:var(--w-open,var(--w-closed,auto));
  transition:flex-basis .42s cubic-bezier(.2,.7,.2,1), width .42s cubic-bezier(.2,.7,.2,1);
}
.nav.mega-open .menu-item{flex-basis:var(--w-open,auto);width:var(--w-open,auto)}
@media (prefers-reduced-motion: reduce){.menu-item{transition:none}}
.menu-item > a{display:block;transition:.2s;color:var(--ink);text-align:center;font:inherit;letter-spacing:inherit}
.menu-item:hover > a{color:var(--brand-dark)}
.menu-item.current > a{color:var(--brand-dark)}
.menu-item.current::after{
  content:"";position:absolute;bottom:16px;height:2px;background:var(--brand);
  left:calc(50% - var(--w-txt,60px)/2);right:calc(50% - var(--w-txt,60px)/2);
}

/* mega dropdown */
.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);
  min-width:220px;padding:10px 0;
  box-shadow:0 20px 50px -10px rgba(15,17,21,.18), 0 4px 12px rgba(15,17,21,.06);
  opacity:0;pointer-events:none;transition:.22s cubic-bezier(.2,.7,.2,1);
  font-family:'Noto Sans KR','Inter',sans-serif;letter-spacing:normal;
}
.submenu::before{
  /* invisible hover-bridge to prevent submenu from closing while mouse moves down from menu item */
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:transparent;
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.submenu a{
  display:block;padding:11px 24px;font-size:13.5px;font-weight:400;color:var(--ink-2);white-space:nowrap;
  transition:.15s;position:relative;
}
.submenu a::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;background:var(--brand);opacity:0;transition:.15s;
}
.submenu a:hover{background:var(--bg-soft);color:var(--ink);padding-left:30px}
.submenu a:hover::before{opacity:1;left:18px}
.submenu a.current{color:var(--brand-dark);font-weight:600;padding-left:30px}
.submenu a.current::before{opacity:1;left:18px}

/* ─── Mega dropdown (하위 페이지 공용: nav 전체 hover 시 7컬럼 통합 패널) ─── */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(250,250,247,.98);  /* nav와 같은 크림톤 → 통합된 하나의 블록 */
  color:var(--ink-2);
  backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid rgba(0,0,0,.04);
  box-shadow:0 12px 28px -8px rgba(15,17,21,.14);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .22s ease, transform .22s ease;
  font-family:'Noto Sans KR','Inter',sans-serif;font-weight:400;letter-spacing:normal;
  z-index:1;
}
/* mega가 열려있는 동안 nav 배경이 mega와 자연스럽게 이어지도록 하단 경계선 제거 */
.nav.mega-open{border-bottom-color:transparent}
.mega-inner{
  display:grid;grid-template-columns:repeat(6,1fr);
  max-width:none;padding:14px 48px 22px;gap:0;
}
.mega-col{padding:0 12px;position:relative;text-align:center}
.mega-col::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%) scaleX(0);
  transform-origin:center;width:56px;height:2px;background:var(--brand);
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.mega-col a{
  display:block;padding:6px 6px;font-size:14px;font-weight:400;color:var(--ink-3);
  transition:.15s;line-height:1.4;white-space:nowrap;
}
.mega-col a:hover{color:var(--brand-dark)}
.mega-col a.current{color:var(--ink);font-weight:600}
/* 카테고리 라벨 (클릭 불가) — Test Equipment 같은 그룹 헤더 */
.mega-col .mega-cat{
  display:block;padding:10px 6px 4px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  line-height:1.4;white-space:nowrap;cursor:default;user-select:none;
}
.mega-col .mega-cat + a{padding-top:2px}
/* 두 번째 이후 카테고리 라벨 — 그룹 간 구분감 */
.mega-col a + .mega-cat{padding-top:26px;margin-top:14px;border-top:1px solid rgba(0,0,0,.06)}
/* PRODUCT 그룹: 그룹명만 노출, hover 시 하위 메뉴 펼침 */
.mega-col .mega-group + .mega-group{margin-top:2px}
.mega-col a.mega-group__head{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);padding:6px 6px;display:inline-flex;align-items:center;gap:6px;
}
.mega-col a.mega-group__head::after{
  content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s ease;opacity:.55;
}
.mega-group__list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
.mega-group__list > div{overflow:hidden;min-height:0}
.mega-group__list a{opacity:0;transition:opacity .2s ease}
.mega-group:hover .mega-group__list,
.mega-group:focus-within .mega-group__list{grid-template-rows:1fr}
.mega-group:hover .mega-group__list a,
.mega-group:focus-within .mega-group__list a{opacity:1}
.nav .mega .mega-col .mega-group:hover a.mega-group__head,
.nav .mega .mega-col .mega-group:focus-within a.mega-group__head,
.nav .mega .mega-col .mega-group.has-current a.mega-group__head{color:var(--brand-dark)}
.mega-group:hover .mega-group__head::after,
.mega-group:focus-within .mega-group__head::after{transform:rotate(225deg) translate(-1px,-1px)}
.mega-group__list > div{padding-bottom:0;transition:padding .28s}
.mega-group:hover .mega-group__list > div{padding-bottom:6px}
.mm-sub .mm-cat{display:block;padding:12px 8px 4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:default}
.nav:hover .mega .mega-col:hover::before,
.nav:focus-within .mega .mega-col:focus-within::before,
.nav .mega .mega-col.is-active::before{transform:translateX(-50%) scaleX(1)}
.nav:hover .mega .mega-col:hover a,
.nav:focus-within .mega .mega-col:focus-within a,
.nav .mega .mega-col.is-active a{color:var(--ink-2)}
.nav .mega .mega-col.is-active a.current{color:var(--ink)}
.nav .mega .mega-col.is-active a:hover,
.nav .mega .mega-col a:hover{color:var(--brand-dark)}
/* 열림 트리거: JS mega-open 클래스 (fallback: nav hover/focus) */
.nav.mega-open .mega{transition-delay:.12s}
.nav.mega-open .mega{opacity:1 !important;pointer-events:auto !important;transform:translateY(0) !important}

.nav-r{display:flex;gap:18px;align-items:center;justify-self:end}
.icon-btn{width:22px;height:22px;opacity:.65;transition:.2s;color:var(--ink);
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn svg{width:22px;height:22px;display:block}
.icon-btn:hover{opacity:1;color:var(--brand-dark)}
.icon-btn,.icon-btn svg{flex:0 0 22px}
/* 모바일 메뉴 내 언어 전환 */
.mm-lang{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 14px;border-bottom:1px solid #e6e8ec}
.mm-lang__lbl{font:600 11px/1 'Inter',sans-serif;letter-spacing:.16em;color:#8a929c}
.mm-lang__seg{display:inline-flex;border:1px solid #d6dade;border-radius:999px;padding:3px}
.mm-lang .lang-item{width:auto;padding:9px 16px;border-radius:999px;font:600 12px/1 'Inter',sans-serif;letter-spacing:.08em;color:#5a6472;background:none}
.mm-lang .lang-item::before{display:none}
.mm-lang .lang-item.current{background:#0f1115;color:#fff}

/* ── language switch dropdown ── */
.lang-switch{position:relative}
.lang-switch .lang-toggle[aria-expanded="true"]{opacity:1;color:var(--brand-dark)}
.lang-switch .lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:120px;
  background:#fff;border:1px solid rgba(15,23,32,.08);
  border-radius:10px;
  box-shadow:0 10px 28px -12px rgba(15,23,32,.22), 0 2px 8px -2px rgba(15,23,32,.08);
  padding:6px;
  display:none;
  z-index:1000;
}
.lang-switch.open .lang-menu{display:block; animation:langMenuIn .16s ease-out}
@keyframes langMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;padding:9px 12px;
  font:600 12.5px/1 'Inter','Noto Sans KR',sans-serif;letter-spacing:.14em;
  color:var(--ink-2, #374151);text-align:left;border-radius:6px;cursor:pointer;
  transition:background .15s, color .15s;
}
.lang-item:hover{background:rgba(15,23,32,.05);color:var(--ink)}
.lang-item.current{color:var(--brand-dark);background:rgba(168,200,8,.08)}
.lang-item.current::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--brand, #a8c808);
}

/* ─────────── Page hero (sub) — 통일 규격: 240px 짙은 검정, 좌측 정렬 ─────────── */
.page-hero{
  position:relative;
  height:240px;
  background:#0d0d0d;
  color:#fff;overflow:hidden;
  display:flex;align-items:center;
}
.page-hero .ph-inner{
  position:relative;z-index:2;
  max-width:1280px;width:100%;margin:0 auto;
  padding:0 56px 0 108px;
  text-align:left;
}
@media(max-width:880px){
  .page-hero{height:200px}
  .page-hero .ph-inner{padding:0 22px 0 22px}
}
.page-hero .ph-eyebrow{
  font-family:'Inter';font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:#b6e300;margin-bottom:14px;font-weight:600;
  display:block;
}
.page-hero h1{
  font-family:'Noto Sans KR';font-weight:800;
  font-size:clamp(30px, 3vw, 40px);letter-spacing:-.02em;
  line-height:1.15;margin:0;color:#fff;
}
.page-hero h1 b{font-weight:800;color:#fff;}
.page-hero .ph-sub{display:none}
/* 은은한 fade-up 등장 (0.6~0.7s) */
@keyframes phFadeUp{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to  {opacity:1;transform:none}
}
.page-hero .ph-eyebrow,
.page-hero h1{
  opacity:0;transform:translate3d(0,16px,0);
  animation:phFadeUp .65s cubic-bezier(.2,.7,.2,1) forwards;
}
.page-hero .ph-eyebrow{animation-delay:.10s}
.page-hero h1{animation-delay:.22s}
@media (prefers-reduced-motion: reduce){
  .page-hero .ph-eyebrow,
  .page-hero h1{opacity:1;transform:none;animation:none}
}

/* ─────────── Breadcrumb ─────────── */
.crumb-bar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:100px;z-index:40;backdrop-filter:blur(8px)}
.crumb{max-width:1280px;margin:0 auto;padding:0 56px;display:flex;align-items:center;gap:14px;height:52px;font-size:13px;color:var(--ink-3)}
.crumb a{transition:.2s}
.crumb a:hover{color:var(--brand-dark)}
.crumb .home{width:14px;height:14px}
.crumb .sep{color:var(--line-strong);font-family:'Inter'}
.crumb .here{color:var(--ink);font-weight:500}

/* ─────────── Breadcrumb Sub-nav (홈 · 상위카테고리▾ · 현재페이지▾) ─────────── */
.crumb-nav{
  background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:99px;z-index:39;   /* nav height(≈99px) 바로 아래에 sticky */
  font-family:'Noto Sans KR','Inter',sans-serif;
}
.crumb-inner{
  max-width:1400px;margin:0 auto;padding:0 24px;
  display:flex;align-items:stretch;gap:0;height:52px;
}
.crumb-home{
  display:flex;align-items:center;justify-content:center;
  width:52px;border-right:1px solid var(--line);
  color:var(--ink-3);transition:color .15s;
}
.crumb-home:hover{color:var(--brand-dark)}
.crumb-sep{width:1px;background:var(--line);flex:0 0 1px}
.crumb-drop{position:relative;display:flex}
.crumb-btn{
  display:flex;align-items:center;gap:10px;
  padding:0 22px 0 20px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;
  min-width:180px;text-align:left;transition:color .15s, background .15s;
  height:52px;
}
.crumb-btn > span{flex:1}
.crumb-btn > svg{opacity:.6;transition:transform .2s, opacity .2s}
.crumb-btn:hover{color:var(--ink);background:var(--bg-soft)}
.crumb-drop.open .crumb-btn > svg{transform:rotate(180deg);opacity:1;color:var(--brand-dark)}
.crumb-drop.open .crumb-btn{color:var(--ink);background:var(--bg-soft)}
.crumb-menu{
  position:absolute;top:100%;left:-1px;right:-1px;min-width:calc(100% + 2px);
  background:#fff;border:1px solid var(--line);border-top:0;
  box-shadow:0 12px 24px -8px rgba(15,17,21,.12);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .18s, transform .18s;
  padding:6px 0;
}
.crumb-drop.open .crumb-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.crumb-menu a{
  display:block;padding:10px 20px;font-size:13.5px;color:var(--ink-2);
  transition:.12s;white-space:nowrap;
}
.crumb-menu a:hover{background:var(--bg-soft);color:var(--brand-dark)}
.crumb-menu a.current{color:var(--brand-dark);font-weight:600;background:var(--bg-soft)}
@media(max-width:880px){
  .crumb-inner{padding:0 12px;height:44px}
  .crumb-home{width:44px}
  .crumb-btn{min-width:120px;padding:0 14px;height:44px;font-size:12.5px}
  .crumb-nav{top:56px}
}

/* ─────────── Sub-tabs ─────────── */
.sub-tabs{
  border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:100px;z-index:39;backdrop-filter:blur(10px) saturate(1.2);
  margin-bottom:60px;   /* 서브탭 ↔ 본문 사이 안전 여백 */
}
/* 배너/hero로 시작하는 페이지: 서브탭 ↔ 배너 사이 흰 공백 제거
   서브탭 아래 60px 마진 제거. hvac/test 배너는 main.page{padding-top:100px}가 유지되어
   서브탭 원래 자리(y=0~63) 아래인 y=163에서 배너가 시작하므로 서브탭과 겹치지 않음.
   회사소개/지속가능경영 hero는 페이지 자체에서 main.page{padding:0}이라 hero가 y=63부터 시작해
   서브탭 sticky(y=100~163)과 시각적으로 겹치므로, hero 상단에 100px 패딩을 추가로 확보 */
body:has(.hook-banner, .dr-banner, .ceo-msg, .sust-hero, .esg-hero, .safety-hero) .sub-tabs{ margin-bottom:0 !important }
/* hero가 서브탭 뒤로 들어가지 않도록 hero 자체를 문서 흐름상 서브탭 원래 자리(y=0~63) 아래에서
   시작시켜 sticky 서브탭(y=100~163)에 가려지지 않게 함. main.page{padding:0} 페이지 전용 처리 */
body:has(.ceo-msg, .sust-hero, .esg-hero, .safety-hero) main.page{
  padding-top:100px !important;
}
/* 서브탭: 항목 수와 무관하게 동일 너비(960px) 컨테이너 안에서 가운데 정렬
   auto 폭 + 균등 좌우 padding: 라벨끼리 시각적 간격이 항상 동일. */
.sub-tabs-inner{
  width:100%;max-width:1080px;margin:0 auto;padding:0 24px;
  display:flex;justify-content:center;align-items:stretch;gap:0;
  overflow-x:auto;
}
.sub-tabs a{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:20px 22px;font-size:14px;font-weight:500;color:var(--ink-3);white-space:nowrap;
  transition:.2s;
}
.sub-tabs a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--brand);
  transition:.25s cubic-bezier(.2,.7,.2,1);
}
.sub-tabs a:hover{color:var(--ink)}
.sub-tabs a.current{color:var(--ink);font-weight:600}
.sub-tabs a.current::after{left:22px;right:22px}

/* ─────────── Page container ─────────── */
.page{padding:100px 56px 140px;background:var(--bg)}
.page-inner{max-width:1240px;margin:0 auto}

.section-head{margin-bottom:56px;text-align:center}
.section-head .eyebrow{
  font-family:'Inter';font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--brand-dark);font-weight:600;margin-bottom:18px;
  display:inline-flex;align-items:center;gap:14px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after{
  content:"";width:24px;height:1px;background:var(--brand);
}
.section-head h2{
  font-weight:300;font-size:clamp(30px,3.2vw,44px);line-height:1.25;letter-spacing:-.025em;color:var(--ink);
}
.section-head h2 b{font-weight:700;color:var(--ink);
  background:linear-gradient(180deg, transparent 60%, var(--brand-soft) 60%);
  padding:0 4px;
}
.section-head .lead{margin-top:20px;color:var(--ink-3);font-size:15.5px;max-width:720px;margin-left:auto;margin-right:auto;line-height:1.85}

/* generic prose */
.prose{font-size:15.5px;color:var(--ink-2);line-height:1.9}
.prose p+p{margin-top:16px}
.prose h3{margin:40px 0 14px;font-weight:600;color:var(--ink);font-size:20px;letter-spacing:-.01em;position:relative;padding-left:16px}
.prose h3::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--brand)}
.prose ul{margin:12px 0 12px 4px;list-style:none}
.prose ul li{position:relative;padding-left:20px;margin:8px 0}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--brand);transform:rotate(45deg)}
.prose ol{margin-left:18px}
.prose ol li{margin:8px 0;padding-left:6px}
.prose strong{color:var(--ink);font-weight:600}

/* ─────────── Cards ─────────── */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  position:relative;background:#fff;border:1px solid var(--line);
  padding:32px 28px;transition:.3s cubic-bezier(.2,.7,.2,1);overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:.4s cubic-bezier(.2,.7,.2,1);
}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(15,17,21,.15)}
.card:hover::before{transform:scaleX(1)}
.card .ic{
  width:48px;height:48px;background:var(--ink);color:var(--brand);
  display:grid;place-items:center;margin-bottom:20px;font-family:'Inter';font-weight:600;font-size:14px;letter-spacing:.04em;
  transition:.3s;
}
.card:hover .ic{background:var(--brand);color:var(--ink)}
.card h3{font-weight:600;font-size:18px;margin-bottom:10px;color:var(--ink);letter-spacing:-.01em}
.card p{font-size:14px;color:var(--ink-3);line-height:1.75}

/* ─────────── Table ─────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line)}
.tbl th,.tbl td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left}
.tbl thead th{background:var(--ink);color:#fff;font-weight:600;font-size:13px;letter-spacing:.04em;border-bottom:0}
.tbl thead th:first-child{position:relative}
.tbl thead th:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.tbl tbody tr:hover{background:var(--bg-soft)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .center{text-align:center}

/* ─────────── Image placeholder ─────────── */
.placeholder{
  position:relative;width:100%;aspect-ratio:16/9;background:
    repeating-linear-gradient(135deg, #f2f2ec 0 14px, #e8e8e2 14px 28px);
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-3);font-family:'Inter';font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.placeholder span{background:#fff;padding:8px 16px;border:1px solid var(--line);font-weight:500;color:var(--ink-2)}

/* ─────────── Buttons ─────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;background:var(--ink);color:#fff;font-weight:500;font-size:14px;
  transition:.25s cubic-bezier(.2,.7,.2,1);letter-spacing:.02em;
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--brand);
  transform:translateX(-100%);transition:.35s cubic-bezier(.2,.7,.2,1);
}
.btn span,.btn .arr{position:relative;z-index:1;transition:.25s}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateX(0)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:#fff}
.btn.brand{background:var(--brand);color:var(--ink)}
.btn.brand::before{background:var(--ink)}
.btn.brand:hover{color:var(--brand)}

/* ─────────── Form ─────────── */
.field-row{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.field-row .lbl{font-weight:600;color:var(--ink);font-size:14px;padding-top:14px;letter-spacing:-.005em}
.field-row .lbl .req{color:var(--brand-dark);margin-left:4px}
.field-row input[type=text],.field-row input[type=email],.field-row input[type=tel],.field-row select,.field-row textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink);transition:.2s;
}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.field-row textarea{min-height:170px;resize:vertical;line-height:1.7}
.field-row .hint{font-size:12.5px;color:var(--ink-4);margin-top:8px;line-height:1.6}

/* ─────────── Badges ─────────── */
.badge{display:inline-block;padding:4px 11px;font-size:11.5px;background:var(--ink);color:var(--brand);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-family:'Inter'}
.badge.brand{background:var(--brand);color:var(--ink)}
.badge.gray{background:var(--bg-soft);color:var(--ink-3)}

/* ─────────── Footer ─────────── */
.footer{background:var(--bg-dark);color:rgba(255,255,255,.65);padding:80px 56px 32px;font-size:13px;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brand) 50%, transparent);
}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,3fr);gap:56px;align-items:start;position:relative;z-index:1}
.footer .ft-brand{display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:24px}
.footer .ft-brand img{height:38px}
.footer .ft-brand b{font-family:'Inter';font-weight:800;font-size:16px;letter-spacing:.04em}
.footer .ft-info p{line-height:2;color:rgba(255,255,255,.55);font-size:13px}
.footer .ft-info p b{color:var(--brand);font-weight:500;margin-right:8px;font-family:'Inter';font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.footer .ft-links{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 24px;color:rgba(255,255,255,.8);font-family:'Noto Sans KR','Inter',sans-serif}
.footer .ft-links > div > b{display:block;font-weight:600;color:var(--brand);margin-bottom:14px;font-size:12px;font-family:'Inter','Noto Sans KR',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.footer .ft-links a{display:block;padding:4px 0;color:rgba(255,255,255,.5);font-size:12.5px;transition:.2s;line-height:1.5;word-break:keep-all}
.footer .ft-links a:hover{color:var(--brand)}
.footer .ft-bottom{max-width:1280px;margin:60px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;color:rgba(255,255,255,.35);font-size:12px;font-family:'Inter';letter-spacing:.02em}

/* ─────────── Mobile menu toggle & overlay ─────────── */
/* 햄버거 버튼: 데스크톱에서는 숨김, 모바일에서만 표시 */
.mobile-menu-toggle{display:none;width:22px;height:22px;position:relative}
.mobile-menu-toggle .ico-open,
.mobile-menu-toggle .ico-close{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s}
.mobile-menu-toggle .ico-close{opacity:0}
.mobile-menu-toggle.active .ico-open{opacity:0}
.mobile-menu-toggle.active .ico-close{opacity:1}

/* 모바일 슬라이드-다운 메뉴 오버레이 */
.mobile-menu{
  position:fixed;top:64px;left:0;right:0;bottom:0;
  background:#fff;
  z-index:98;
  opacity:0;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .28s ease, transform .28s ease;
  overflow-y:auto;
  border-top:1px solid var(--line);
}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mm-inner{padding:24px 22px 60px;max-width:640px;margin:0 auto}
.mm-section{padding:14px 0;border-bottom:1px solid var(--line)}
.mm-section:last-child{border-bottom:none}
.mm-head{
  display:block;font-size:18px;font-weight:600;color:var(--ink);
  padding:12px 4px;letter-spacing:-.01em;
}
.mm-section.current .mm-head{color:var(--brand-dark)}
.mm-sub{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 12px;padding:4px 4px 8px}
.mm-sub a{
  display:block;padding:10px 4px;font-size:14.5px;color:var(--ink-3);
  transition:.15s;
}
.mm-sub a:hover,.mm-sub a.current{color:var(--brand-dark);font-weight:500}

/* ─────────── Responsive ─────────── */
/* 태블릿 이하 (≤1024px): nav 2줄 구조 (상단: 로고+아이콘 / 하단: 메인메뉴 스크롤) */
@media(max-width:1024px){
  /* nav를 2줄 flex-wrap 레이아웃으로 전환 
     - 첫 줄: 로고(좌) + 우측 아이콘들(우)
     - 둘째 줄: 메인메뉴 (가로 스크롤) */
  .nav{
    padding:10px 16px;
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
    row-gap:6px;
  }
  .brand{order:1}
  .nav-r{order:2}
  /* 메인메뉴: nav 두 번째 줄. 6개 항목이 화면에 들어가도록 컴팩트.
     nav 자체의 border-bottom이 이미 서브탭과의 경계를 만들어줌 */
  .menu{
    order:3;
    display:flex !important;flex:1 1 100%;
    justify-content:space-around;gap:0;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:2px -16px 0;padding:0;
  }
  .menu::-webkit-scrollbar{display:none}
  .menu-item{
    width:auto !important;flex:0 0 auto !important;
    padding:8px 6px !important;
    font-size:12px;font-weight:600;letter-spacing:-.03em;
  }
  .menu-item.current > a{color:var(--brand-dark)}
  .menu-item.current::after{left:6px;right:6px;bottom:0;height:2px}
  /* 서브메뉴(hover 드롭다운)는 모바일에서 비활성화 - 해당 대분류 페이지로 바로 이동 */
  .menu-item .submenu{display:none !important}
  /* 데스크톱 메가메뉴는 모바일에서 완전히 숨김 (모바일 하위메뉴 패널과 중복 방지) */
  .nav > .mega,.nav .mega{display:none !important}
  /* 햄버거는 유지하되 필요시에만 사용 */
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* 모바일 2줄 nav 총 높이(~84px)에 맞춰 각 페이지의 상단 padding 재정의 */
  html body main.page{padding-top:84px !important}
  html body:has(.hook-banner,.dr-banner,.ceo-msg,.sust-hero,.esg-hero,.safety-hero) main.page{padding-top:84px !important}
  .crumb-bar{top:64px}
  .crumb{padding:0 22px}
  /* nav 2줄 구조 아래에 sub-tabs가 붙되, 
     서브탭은 연회색 배경 + 상단 여백으로 nav와 시각적으로 분리된 별개 영역처럼 표현 */
  html body .sub-tabs{
    top:84px !important;margin-top:0;
    background:#f6f7f9;
    border-top:0;border-bottom:1px solid var(--line);
  }
  .sub-tabs-inner{padding:0 22px;max-width:100%;justify-content:flex-start;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sub-tabs-inner::-webkit-scrollbar{display:none}
  .sub-tabs a{width:auto;flex:0 0 auto;padding:14px 14px;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .sub-tabs a.current{font-weight:500;color:var(--ink)}
  .sub-tabs a.current::after{left:14px;right:14px}
  .page{padding:56px 22px 80px}
  .field-row{grid-template-columns:1fr;gap:8px}
  .footer{padding:56px 22px 32px}
  .footer-inner{grid-template-columns:1fr;gap:40px}
  .footer .ft-links{grid-template-columns:repeat(2,1fr)}
  .footer .ft-bottom{flex-direction:column;gap:8px;text-align:center}
  /* 섹션 헤더 반응형 */
  .section-head h2{font-size:clamp(24px,5vw,32px)}
  .section-head .lead{font-size:14px}
  /* 카드 그리드 반응형 */
  .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
}
/* 모바일 (≤640px): 폰트/여백 더 축소 */
@media(max-width:640px){
  html,body{font-size:15px}
  .nav{padding:10px 16px}
  .brand img{height:28px}
  .brand .b-txt b{font-size:14px}
  .brand .b-txt span{font-size:9px;margin-left:4px}
  .nav-r{gap:14px}
  .crumb-bar{top:56px}
  /* 640px 이하도 nav 2줄 유지, top 위치는 축소된 nav 높이(~80px)에 맞춤 */
  html body .sub-tabs{top:80px !important}
  html body main.page{padding-top:80px !important}
  html body:has(.hook-banner,.dr-banner,.ceo-msg,.sust-hero,.esg-hero,.safety-hero) main.page{padding-top:80px !important}
  .sub-tabs a{padding:12px 12px;font-size:12px}
  .menu-item{padding:8px 4px !important;font-size:11.5px}
  .page{padding:40px 16px 60px}
  .footer{padding:44px 16px 24px}
  .footer .ft-links{grid-template-columns:1fr;gap:24px}
  .section-head{margin-bottom:32px}
  .section-head h2{font-size:22px;line-height:1.35}
  .section-head .lead{font-size:14px;line-height:1.7}
  /* 모바일 오버레이 메뉴 */
  .mobile-menu{top:56px}
  .mm-inner{padding:18px 16px 40px}
  .mm-head{font-size:16px;padding:10px 4px}
  .mm-sub{grid-template-columns:1fr;gap:0;padding:2px 4px 6px}
  .mm-sub a{padding:9px 8px;font-size:14px}
  /* 카드 & 리스트 */
  .cards{grid-template-columns:1fr;gap:14px}
  /* hook banner 텍스트 */
  .hook-banner{min-height:clamp(320px,55vh,420px)}
  /* 히트마크 지도 등 임베드 iframe */
  iframe{max-width:100%}
  /* 테이블 좌우 스크롤 */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  /* 이미지 좌우 여백 방어 */
  img{max-width:100%;height:auto}
}
/* 매우 좁은 화면 (≤380px) */
@media(max-width:380px){
  .nav{padding:8px 12px}
  .page{padding:32px 12px 48px}
  .brand .b-txt{display:none}  /* 로고 텍스트 숨겨서 공간 확보 */
}

/* ─────────── Shared Impact Banner + section rhythm (HVAC pages) ─────────── */
/* Dark full-bleed hook banner. Per-page image set via `--hb-img`. */
.hook-banner{
  position:relative;
  margin:0 calc(50% - 50vw) 0;
  width:100vw;
  min-height:clamp(420px, 52vh, 580px);
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:center;
  padding:64px 0;
}
.hook-banner::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hb-img, none) no-repeat center/cover;
  transform:scale(1.02);
}
.hook-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* 좌→우: 왼쪽 텍스트 영역만 확실히 어둡게, 오른쪽은 공간이 잘 보이게 풀어줌 */
    linear-gradient(90deg, rgba(6,10,14,.86) 0%, rgba(6,10,14,.62) 26%, rgba(6,10,14,.30) 48%, rgba(6,10,14,.08) 70%, rgba(6,10,14,0) 100%),
    /* 하단은 아래 회색 섹션(#F7F8F9)과 이어지도록 페이드 */
    linear-gradient(180deg, rgba(6,10,14,.16) 0%, rgba(6,10,14,0) 22%, rgba(6,10,14,0) 72%, rgba(247,248,249,.55) 93%, #F7F8F9 100%);
}
/* 하단 경계 부드러운 전환 (아주 미세한 안쪽 그림자) */
.hook-banner{
  box-shadow:0 24px 40px -32px rgba(6,10,14,.35) inset;
}
.hook-banner-inner{
  position:relative;z-index:1;
  width:100%;box-sizing:border-box;
  padding-left:max(56px, calc((100vw - 1240px) / 2));
  padding-right:24px;
  color:#fff;
  text-align:left;
}
.hook-banner .hb-eyebrow{
  font-family:'Inter';font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:#c5db5b;font-weight:600;margin-bottom:24px;
  display:inline-flex;gap:14px;align-items:center;
}
.hook-banner .hb-eyebrow::before{content:"";width:36px;height:1px;background:#c5db5b}
.hook-banner .hb-hook{
  font-size:clamp(38px,4.4vw,68px);font-weight:300;color:#fff;
  letter-spacing:-.025em;line-height:1.2;margin:0;
  max-width:none;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
  text-align:left;
  white-space:nowrap;
}
.hook-banner .hb-hook b{font-weight:700}
/* 라임 강조: 박스 없이 글자만 라임 (회사개요 동일 톤) */
.hook-banner .hb-hook mark{
  background:none;
  color:#c5db5b;
  padding:0;
  font-weight:700;
}
/* hook 내부 두 줄은 각각 블록으로 분리해 stagger 애니메이션 대상이 됨 */
.hook-banner .hb-hook b{display:block}
.hook-banner .hb-hook .line1,
.hook-banner .hb-hook .line2{display:block}

/* ── 배너 등장: 회사개요와 동일한 stagger fade-up ── */
@keyframes hbHeroFadeUp{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to  {opacity:1;transform:none}
}
.hook-banner .hb-eyebrow,
.hook-banner .hb-hook .line1,
.hook-banner .hb-hook .line2,
.hook-banner .hb-hook mark{
  opacity:0;transform:translate3d(0,24px,0);
  animation:hbHeroFadeUp .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.hook-banner .hb-eyebrow      {animation-delay:.00s}
.hook-banner .hb-hook .line1  {animation-delay:.15s}
.hook-banner .hb-hook .line2  {animation-delay:.30s}
.hook-banner .hb-hook mark    {animation-delay:.45s}
/* line2 안에 mark만 있는 경우(line1이 <b>단독)에는 mark가 두 번째 줄 역할이므로 그대로 유지 */

/* 라임 wipe: 글자만 라임색으로 좌→우 채워짐 (박스 아님) */
@keyframes hbLimeWipe{
  from{background-position:100% 0}
  to  {background-position:0 0}
}
.hook-banner .hb-hook mark{
  color:transparent;
  background-image:linear-gradient(90deg, #c5db5b 0 50%, #ffffff 50% 100%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  /* fade-up 이후 wipe: fade-up delay(.45) + duration(.7) = 1.15s */
  animation:
    hbHeroFadeUp .7s cubic-bezier(.2,.7,.2,1) .45s forwards,
    hbLimeWipe 1.1s cubic-bezier(.2,.7,.2,1) 1.15s forwards;
}
@media (prefers-reduced-motion: reduce){
  .hook-banner .hb-eyebrow,
  .hook-banner .hb-hook .line1,
  .hook-banner .hb-hook .line2,
  .hook-banner .hb-hook mark{
    opacity:1;transform:none;animation:none;
  }
  .hook-banner .hb-hook mark{
    color:#c5db5b;background:none;-webkit-background-clip:initial;background-clip:initial;
  }
}

@media(max-width:1024px){
  .hook-banner{min-height:400px;padding:56px 0}
  .hook-banner::after{
    background:
      linear-gradient(180deg, rgba(6,10,14,.72) 0%, rgba(6,10,14,.46) 45%, rgba(6,10,14,.30) 70%, rgba(247,248,249,.55) 92%, #F7F8F9 100%);
  }
  .hook-banner-inner{padding-left:24px;padding-right:24px}
  .hook-banner .hb-hook{white-space:normal;font-size:clamp(30px,5.2vw,46px)}
}
@media(max-width:640px){
  .hook-banner{min-height:340px;padding:44px 0}
  .hook-banner-inner{padding-left:16px;padding-right:16px}
  .hook-banner .hb-eyebrow{font-size:10.5px;letter-spacing:.24em;margin-bottom:16px}
  .hook-banner .hb-eyebrow::before{width:24px}
  .hook-banner .hb-hook{font-size:clamp(24px,7vw,34px);line-height:1.25;letter-spacing:-.015em}
}

/* Overview split: LEFT photo carousel  |  RIGHT text block (mirrors dry-room .dr-top) */
.dr-top{
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
  margin-top:8px;
}
@media(max-width:1024px){ .dr-top{grid-template-columns:1fr;gap:36px} }
.dr-vis{min-width:0}
.dr-carousel{position:relative;width:100%;aspect-ratio:4/3;background:#f2f3ef;overflow:hidden}
.dr-carousel .pc-stage{position:absolute;inset:0}
.dr-carousel .pc-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;pointer-events:none;display:block;background:#f2f3ef;
}
.dr-carousel .pc-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.dr-carousel .pc-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid #dfe2e6;border-radius:50%;
  color:#0a1424;cursor:pointer;z-index:3;
  transition:background .2s, box-shadow .2s, transform .2s, color .2s;
}
.dr-carousel .pc-nav:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;box-shadow:0 10px 24px -12px rgba(15,17,21,.3)}
.dr-carousel .pc-nav:active{transform:translateY(-50%) scale(.94)}
.dr-carousel .pc-prev{left:14px}
.dr-carousel .pc-next{right:14px}
.dr-carousel .pc-count{
  position:absolute;top:14px;right:14px;z-index:3;
  font-family:'Inter';font-size:11px;letter-spacing:.14em;font-weight:600;
  color:#0a1424;background:rgba(255,255,255,.92);border:1px solid #dfe2e6;
  padding:5px 10px;border-radius:999px;
}
.dr-carousel .pc-count .pc-cur{color:var(--brand-dark)}
.dr-vis .pc-thumbs{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:10px}
.dr-vis .pc-thumb{
  position:relative;padding:0;border:2px solid transparent;background:#f2f3ef;cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;transition:border-color .2s, opacity .2s;opacity:.62;
}
.dr-vis .pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dr-vis .pc-thumb:hover{opacity:.9}
.dr-vis .pc-thumb.is-active{border-color:var(--brand);opacity:1}
@media(max-width:1024px){
  .dr-vis .pc-thumbs{grid-template-columns:repeat(5,1fr)}
  .dr-vis .pc-thumb:nth-child(n+6){display:none}
}
@media(max-width:640px){
  .dr-vis .pc-thumbs{grid-template-columns:repeat(4,1fr)}
  .dr-vis .pc-thumb:nth-child(n+5){display:none}
  .dr-carousel .pc-nav{width:38px;height:38px}
  .dr-carousel .pc-prev{left:8px}
  .dr-carousel .pc-next{right:8px}
}
.dr-msg{padding-left:8px}
@media(max-width:1024px){ .dr-msg{padding-left:0} }
.dr-msg .dm-eyebrow{
  font-family:'Inter';font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brand-dark);font-weight:600;margin-bottom:14px;
}
.dr-msg .dm-name{
  font-size:42px;font-weight:700;color:#0a1424;
  letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;
}
.dr-msg .dm-en{
  font-family:'Inter';font-size:13px;letter-spacing:.06em;color:var(--ink-3);
  font-weight:400;margin-bottom:22px;
}
.dr-msg .dm-body{
  color:var(--ink-2);font-size:16px;line-height:1.85;letter-spacing:-.005em;
  margin:0 0 28px;word-break:keep-all;
}
.dr-msg .dm-body b{color:var(--ink);font-weight:700}
.dr-msg .dm-cta{display:flex;gap:10px;flex-wrap:wrap}

/* Full-bleed soft-gray band for alternating section rhythm */
.band-gray{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:max(56px, calc((100vw - 1240px) / 2));
  padding-right:max(56px, calc((100vw - 1240px) / 2));
  padding-top:88px;
  padding-bottom:96px;
  background:#F7F8F9;
}
@media(max-width:1024px){
  .band-gray{
    padding-left:24px;padding-right:24px;
    padding-top:56px;padding-bottom:64px;
  }
}
/* neutralize any child section's own top-margin when it becomes a banded child */
.band-gray > section:first-child{ margin-top:0 !important }
/* TEST EQUIPMENT 상세 페이지: 개요·납품실적 회색 밴드 */
.band-gray > .prod-top{ margin-top:0 !important }
.band-gray > .te-projects{ margin:0 !important }
.band-gray + .section-head{ margin-top:96px }
@media(max-width:1024px){ .band-gray + .section-head{ margin-top:56px } }

/* ── 줄바꿈 전역 규칙: 단어 단위 줄바꿈 + 고아 단어 방지 ── */
body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* ── PRODUCT 메가메뉴: 평소엔 그룹명(HVAC EQUIPMENT / TEST EQUIPMENT)만, 그룹 hover 시 하위 메뉴 펼침 ── */
.nav .mega .mega-group{position:relative}
.nav .mega .mega-col a.mega-group__head{display:inline-flex;align-items:center;gap:6px;cursor:pointer;pointer-events:auto;padding:8px 6px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#0f1a24)}
.nav .mega .mega-col a.mega-group__head::after{display:inline-block;content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s ease;opacity:.55}
.nav .mega .mega-group__list{display:block !important;max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.2,.7,.2,1)}
.nav .mega .mega-group__list > div{overflow:visible;padding:0 0 4px}
.nav .mega .mega-group__list a{opacity:0 !important;transition:opacity .2s ease}
.nav .mega .mega-group:hover .mega-group__list,
.nav .mega .mega-group:focus-within .mega-group__list{max-height:240px}
.nav .mega .mega-group:hover .mega-group__list a,
.nav .mega .mega-group:focus-within .mega-group__list a{opacity:1 !important}
.nav .mega .mega-group:hover .mega-group__head::after,
.nav .mega .mega-group:focus-within .mega-group__head::after{transform:rotate(225deg) translate(-1px,-1px)}
.nav .mega .mega-col .mega-group:hover a.mega-group__head,
.nav .mega .mega-col .mega-group.has-current a.mega-group__head{color:var(--brand-dark,#8aa600)}
.nav .mega .mega-group + .mega-group{margin-top:4px}



/* ═══ 하위 페이지 nav 통일 (메인과 동일한 동작) ═══
   1) 로고 크기·워드마크를 메인과 동일하게
   2) 어두운 첫 배너 위: nav·서브네비 투명 + 흰 글씨 → 배너를 지나면 밝은 nav (site.js initHeroNav) */
.brand img{height:48px}
.brand .b-txt{font-family:'Noto Sans KR','Inter',sans-serif;font-size:18px;font-weight:700;letter-spacing:.02em}
.brand .b-txt b{font-weight:700;letter-spacing:inherit}
.brand .b-txt span{font-size:inherit;font-weight:400;letter-spacing:inherit;text-transform:none;color:inherit;opacity:.85;margin-left:4px}
@media(max-width:880px){.brand img{height:36px}.brand .b-txt{font-size:15px}}
@media(max-width:640px){.brand img{height:28px}.brand .b-txt{font-size:14px}}

@media(min-width:1025px){
  .nav,.crumb-nav{transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
  .nav.nav-hero:not(.mega-open){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#fff}
  .nav.nav-hero:not(.mega-open) .brand .b-txt,
  .nav.nav-hero:not(.mega-open) .menu-item > a,
  .nav.nav-hero:not(.mega-open) .icon-btn{color:#fff}
  .nav.nav-hero:not(.mega-open) .menu-item:hover > a,
  .nav.nav-hero:not(.mega-open) .menu-item.current > a{color:#c5db5b}
  .nav.nav-hero:not(.mega-open) .menu-item.current::after{background:#c5db5b}
  .nav.nav-hero:not(.mega-open) .icon-btn:hover{color:#c5db5b}
  .nav.nav-hero:not(.mega-open) .brand img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}

  body.hero-top .crumb-nav{background:transparent;border-bottom-color:rgba(255,255,255,.14)}
  body.hero-top .crumb-nav .crumb-home,
  body.hero-top .crumb-nav .crumb-btn{color:rgba(255,255,255,.88)}
  body.hero-top .crumb-nav .crumb-home{border-right-color:rgba(255,255,255,.14)}
  body.hero-top .crumb-nav .crumb-sep{background:rgba(255,255,255,.14)}
  body.hero-top .crumb-nav .crumb-home:hover{color:#c5db5b}
  body.hero-top .crumb-nav .crumb-btn:hover,
  body.hero-top .crumb-nav .crumb-drop.open .crumb-btn{background:rgba(255,255,255,.08);color:#fff}
  body.hero-top .crumb-nav .crumb-drop.open .crumb-btn > svg{color:#c5db5b}

  /* 배너 상단: 투명 nav 아래 글씨가 잘 읽히도록 은은한 어둠 */
  .hero-nav-shade{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,10,14,.55) 0%,rgba(6,10,14,.28) 60%,rgba(6,10,14,0) 100%)}
}


/* ═══ 메인 기준 톤 통일 (2026-10-06) ═══
   포인트 연두: 어두운 배경 = #c5db5b, 밝은 배경 글씨 = #8aa600(--brand-dark)
   아이브로우: Inter 12px · 500 · .32em · 앞 선 28px(투명도 .6)
   헤드라인 강조: 600 / 푸터: #14181e  */
:root{--lime:#c5db5b}
html body .hook-banner .hb-eyebrow,
html body .dr-banner .db-eyebrow,
html body .sust-hero .eyb,
html body .esg-hero .eyb,
html body .safety-hero .eyb{
  color:var(--lime);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:14px;
}
html body .hook-banner .hb-eyebrow::before,
html body .dr-banner .db-eyebrow::before,
html body .sust-hero .eyb::before,
html body .esg-hero .eyb::before,
html body .safety-hero .eyb::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
html body .hook-banner .hb-hook mark,
html body .dr-banner .db-hook mark,
html body .sust-hero h1 .hl,
html body .esg-hero .title .hl,
html body .safety-hero h1 .hl{color:var(--lime)}
html body .hook-banner .hb-hook b,
html body .hook-banner .hb-hook mark,
html body .dr-banner .db-hook b,
html body .dr-banner .db-hook mark,
html body .sust-hero h1 b,
html body .sust-hero h1 .hl,
html body .esg-hero .title b,
html body .esg-hero .title .hl,
html body .esg-hero .brand-name,
html body .safety-hero h1 b,
html body .safety-hero h1 .hl{font-weight:600}
html body .footer{background:#14181e}
html body .footer .ft-info p b,
html body .footer .ft-links > div > b{color:var(--lime)}
html body .footer .ft-links a:hover{color:var(--lime)}
html body .footer::before{background:linear-gradient(90deg,transparent,var(--lime) 50%,transparent)}

/* ─── 모바일: 서브네비(crumb-nav)가 2줄 nav 뒤에 가려지지 않도록 실제 nav 높이(--nav-h, site.js) 바로 아래에 고정 ─── */
@media(max-width:1024px){
  html body .crumb-nav{top:var(--nav-h,84px);z-index:90;background:#fff}
  .crumb-inner{overflow-x:auto;scrollbar-width:none}
  .crumb-inner::-webkit-scrollbar{display:none}
  .crumb-drop{position:static}
  .crumb-btn{min-width:0;flex:0 0 auto}
  .crumb-drop .crumb-menu{left:0;right:0;min-width:0;max-height:60vh;overflow-y:auto}
  .crumb-menu a{padding:13px 20px;font-size:14px}
  /* crumb-nav는 문서 흐름상 main 위에 있으므로, 본문 여백 = nav 높이만 확보하면 crumb 바로 아래에서 시작 */
  html body:has(.crumb-nav) main.page{padding-top:var(--nav-h,84px) !important}
}

/* ─────────── Mobile optimization pass ─────────── */
html,body{overflow-x:clip}
@media(max-width:1024px){
  .ceo-grid{grid-template-columns:1fr !important;gap:32px !important}
  .ceo-grid .placeholder{max-width:360px}
}
@media(max-width:640px){
  .prose{min-width:0;overflow-wrap:anywhere}
  td,th{font-size:12.5px}
  input,select,textarea{font-size:16px !important} /* iOS 확대 방지 */
}

/* 노트북 해상도(1025~1440px): 상단 메뉴 여백 확보 */
@media(max-width:1440px) and (min-width:1025px){
  .menu{font-size:12.5px;letter-spacing:.1em;margin-right:28px}
  .brand .b-txt{font-size:16px}
}

/* 하위(mega) 메뉴 여백 — 답답함 완화 */
.nav .mega .mega-inner{padding-top:30px;padding-bottom:40px}
.nav .mega .mega-col a{padding:8px 6px;line-height:1.45}
.nav .mega .mega-col + .mega-col{box-shadow:inset 1px 0 0 rgba(10,20,40,.06)}
.nav .mega .mega-col::before{bottom:calc(100% + 16px)}
@media(max-width:1440px) and (min-width:1025px){
  .nav .mega .mega-col a{font-size:13px;letter-spacing:-.01em}
  .nav .mega .mega-col a.mega-group__head{font-size:10.5px}
}


/* ─── 모바일 푸터 최적화 (2026-10-16) ─── */
.footer .ft-info a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.footer .ft-info a:hover{color:var(--lime,#c5db5b)}
@media(max-width:640px){
  html body .footer{padding:36px 20px calc(24px + env(safe-area-inset-bottom))}
  html body .footer-inner{gap:28px}
  .footer .ft-brand{gap:10px;margin-bottom:16px}
  .footer .ft-brand img{height:28px}
  .footer .ft-brand b{font-size:14px}
  .footer .ft-info p{line-height:1.7;font-size:12.5px;margin:0 0 6px;word-break:keep-all}
  .footer .ft-info p b{display:inline-block;min-width:52px;margin-right:6px;font-size:10px;letter-spacing:.08em}
  .footer .ft-info p.ft-tel{display:flex;flex-wrap:wrap;gap:0 16px}
  .footer .ft-info a{border-bottom:0}
  /* 링크: 2열 그리드, 섹션 간 구분선 */
  html body .footer .ft-links{grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
  .footer .ft-links > div > b{font-size:11px;margin-bottom:8px;letter-spacing:.12em}
  .footer .ft-links a{font-size:12.5px;padding:4px 0;line-height:1.45}
  .footer .ft-bottom{margin-top:28px;padding-top:18px;gap:4px;font-size:10.5px;line-height:1.6;text-align:left !important;align-items:flex-start}
  .footer .ft-bottom span:last-child{color:rgba(255,255,255,.22)}
}


/* ── 언어 전환: 드롭다운 대신 헤더 인라인 KR | EN (메가메뉴와 겹침 방지) ── */
.nav-r .lang-switch .lang-toggle{display:none !important}
.nav-r .lang-switch .lang-menu{position:static !important;display:flex !important;align-items:center;gap:0;min-width:0 !important;padding:0 !important;margin:0;background:none !important;border:0 !important;box-shadow:none !important;opacity:1 !important;visibility:visible !important;transform:none !important;animation:none !important}
.nav-r .lang-switch .lang-menu::before{display:none !important}
.nav-r .lang-switch .lang-item{width:auto;padding:6px 7px;margin:0;border-radius:0;background:none !important;font:600 12px/1 'Inter','Noto Sans KR',sans-serif;letter-spacing:.08em;color:inherit;opacity:.5;transition:opacity .15s,color .15s}
.nav-r .lang-switch .lang-item::before,.nav-r .lang-switch .lang-item::after{display:none !important}
.nav-r .lang-switch .lang-item small{display:none}
.nav-r .lang-switch .lang-item + .lang-item{border-left:1px solid rgba(127,127,127,.45)}
.nav-r .lang-switch .lang-item:hover{opacity:.85}
.nav-r .lang-switch .lang-item.current{opacity:1;color:inherit}
.mm-lang{display:none !important}
/* 구버전 마크업(Korean/English) 대비 */
.nav-r .lang-switch .lang-item:has(small){font-size:0;letter-spacing:0}
.nav-r .lang-switch .lang-item[data-lang="ko"]:has(small)::after{content:"KR";display:inline !important;font-size:12px;letter-spacing:.08em;width:auto;height:auto;background:none;border-radius:0}
.nav-r .lang-switch .lang-item[data-lang="en"]:has(small)::after{content:"EN";display:inline !important;font-size:12px;letter-spacing:.08em;width:auto;height:auto;background:none;border-radius:0}