/* =========================================================
   파일명: /assets/css/final-width-grid.css
   목적: 하위메뉴바와 실제 페이지 콘텐츠 폭을 하나의 기준으로 통일
   기준: 2026-05-21 WIDTH UNIFY CLEAN PATCH
   원칙: 누적 보정 CSS 정리, 폭 제어만 담당
========================================================= */

:root{
  --nb-content-width:min(calc(100vw - 96px), 1440px);
  --nb-page-width:var(--nb-content-width);
  --nb-container:var(--nb-content-width);
  --nb-section-container:var(--nb-content-width);
  --nb-product-width:var(--nb-content-width);
  --nb-final-gap:24px;
}

/* ===== [01] Header / 공통 컨테이너 기준 ===== */
.site-header .header-inner,
.container,
.main-layout,
.main-layout.no-sidebar,
.main-layout.has-sidebar,
body.sub-page .main-layout,
body.sub-page .container.main-layout{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.layout-content,
body.sub-page .layout-content{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}

/* ===== [02] 하위메뉴바 폭 기준 ===== */
.page-section-bar{
  width:100%;
  margin:0;
  padding:0;
  background:#f3f8ff;
  border:0;
  box-shadow:none;
}

.page-section-bar .container,
.page-section-bar__inner{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}

.page-section-bar__inner{
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:#fff;
  border:1px solid #cbdcf0;
  border-radius:6px;
  box-shadow:0 12px 28px rgba(20,70,120,.07);
}

.page-section-bar__links{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  min-width:0;
}

.page-section-bar__current,
.page-section-bar__link{
  min-height:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.page-section-bar__current{flex:0 0 220px;}
.page-section-bar__link{flex:1 1 0;min-width:0;}
.page-section-bar__label{white-space:nowrap;}

/* ===== [03] 서브페이지 실제 콘텐츠 폭 ===== */
body.sub-page .content-card,
body.sub-page .page-content,
body.sub-page .page-intro-card,
body.sub-page .about-modern-hero,
body.sub-page .about-modern-section,
body.sub-page .section-card-stack,
body.sub-page .customer-section-stack,
body.sub-page .customer-overview-intro,
body.sub-page .customer-overview-section,
body.sub-page .notice-page,
body.sub-page .notice-wrap,
body.sub-page .notice-list,
body.sub-page .resource-card,
body.sub-page .notice-card,
body.sub-page .as-card,
body.sub-page .contact-panel,
body.sub-page .nb-customer-page{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* ===== [04] 설비소개 / 제품 페이지 폭 ===== */
body.page-products .equipment-home-hero,
body.page-products .equipment-home-section,
body.page-products .equipment-flow-section,
body[data-sidebar-type="products"] .equipment-home-hero,
body[data-sidebar-type="products"] .equipment-home-section,
body[data-sidebar-type="products"] .equipment-flow-section,
body[data-sidebar-type="products"] .line-automation-hero,
body[data-sidebar-type="products"] .auto-packer-hero,
body[data-sidebar-type="products"] .category-showcase-hero,
body[data-sidebar-type="products"] .line-automation-summary,
body[data-sidebar-type="products"] .auto-packer-summary,
body[data-sidebar-type="products"] .category-showcase-summary,
body[data-sidebar-type="products"] .product-control-panel,
body[data-sidebar-type="products"] .product-view-panel,
body[data-sidebar-type="products"] .product-list-head,
body[data-sidebar-type="products"] .product-series-intro,
body[data-sidebar-type="products"] .product-series-grid,
body[data-sidebar-type="products"] .product-grid,
body[data-sidebar-type="products"] .auto-filter-intro,
body[data-sidebar-type="products"] .line-filter-intro,
body[data-sidebar-type="products"] .category-filter-intro,
body[data-sidebar-type="products"] .filter-groups{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body.page-products .equipment-home-section .equipment-home-grid,
body[data-sidebar-type="products"] .equipment-home-section .equipment-home-grid,
body[data-sidebar-type="products"] .product-grid,
body[data-sidebar-type="products"] .product-series-grid{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

body[data-sidebar-type="products"] .product-grid,
.product-grid.view-many,
.product-grid.view-large{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--nb-final-gap);
}

.product-series-grid,
.product-series-grid.view-many,
.product-series-grid.view-large{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--nb-final-gap);
}

.series-children-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

/* ===== [05] 납품·수리 사례 페이지 폭 ===== */
body[data-sidebar-type="cases"] .case-overview-intro,
body[data-sidebar-type="cases"] .case-video-section,
body[data-sidebar-type="cases"] .case-type-section,
body[data-sidebar-type="cases"] .field-case-archive,
body[data-sidebar-type="cases"] .case-grid,
body.page-cases .case-grid{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body[data-sidebar-type="cases"] .content-card .case-grid,
body.page-cases .content-card .case-grid{
  width:100%;
  max-width:100%;
}

.case-grid.view-many,
body.page-cases .case-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--nb-final-gap);
}

/* ===== [06] 고객센터 / 문의 페이지 폭 ===== */
body[data-sidebar-type="customer"] .main-layout,
body[data-sidebar-type="customer"] .layout-content,
body[data-sidebar-type="customer"] .nb-customer-page,
body[data-sidebar-type="customer"] .customer-overview-intro,
body.page-contact .nb-customer-page.is-inquiry-only,
body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-grid,
body.page-contact .nb-customer-form-card.contact-panel{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
}

/* ===== [07] 메인페이지 폭: Hero / 바로가기 / 시리즈 / 영상 / 사례 / CTA 통일 ===== */
body.home-page{
  --home-width:var(--nb-content-width);
}

body.home-page .nb-home-hero__inner,
body.home-page .nb-home-support-strip__inner,
body.home-page .nb-home-quickbar,
body.home-page .nb-home-product-grid,
body.home-page .nb-home-process__steps,
body.home-page .nb-home-case-grid.case-grid,
body.home-page .nb-home-video-grid,
body.home-page .nb-home-video-note,
body.home-page .nb-home-series,
body.home-page .nb-home-cta{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body.home-page .nb-home-series{
  padding-left:0;
  padding-right:0;
}

body.home-page .nb-home-cases,
body.home-page .nb-home-videos,
body.home-page .nb-home-products,
body.home-page .nb-home-process{
  padding-left:0;
  padding-right:0;
}

body.home-page .nb-home-cta{
  max-width:var(--nb-content-width);
}

/* ===== [08] 반응형 ===== */
@media (max-width:1280px){
  :root{--nb-content-width:calc(100vw - 48px);}

  body[data-sidebar-type="products"] .product-grid,
  .product-grid.view-many,
  .product-grid.view-large,
  .case-grid.view-many,
  body.page-cases .case-grid,
  .series-children-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  :root{--nb-content-width:calc(100vw - 28px);--nb-final-gap:16px;}

  .site-header .header-inner,
  .container,
  .main-layout,
  .main-layout.no-sidebar,
  .main-layout.has-sidebar,
  body.sub-page .main-layout,
  body.sub-page .container.main-layout,
  .page-section-bar .container,
  .page-section-bar__inner,
  body.sub-page .content-card,
  body.sub-page .page-content,
  body.sub-page .page-intro-card,
  body.sub-page .about-modern-hero,
  body.sub-page .about-modern-section,
  body.sub-page .section-card-stack,
  body.sub-page .customer-section-stack,
  body.sub-page .customer-overview-intro,
  body.sub-page .customer-overview-section,
  body.sub-page .notice-page,
  body.sub-page .notice-wrap,
  body.sub-page .notice-list,
  body.sub-page .resource-card,
  body.sub-page .notice-card,
  body.sub-page .as-card,
  body.sub-page .contact-panel,
  body.sub-page .nb-customer-page{
    width:var(--nb-content-width);
    max-width:var(--nb-content-width);
  }

  .page-section-bar{overflow-x:auto;}
  .page-section-bar__inner{min-width:max-content;}
  .page-section-bar__current{flex:0 0 auto;padding:0 18px;}
  .page-section-bar__link{flex:0 0 auto;min-width:140px;padding:0 18px;}

  body[data-sidebar-type="products"] .product-grid,
  .product-grid.view-many,
  .product-grid.view-large,
  .case-grid.view-many,
  body.page-cases .case-grid,
  .series-children-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-series-grid,
  .product-series-grid.view-many,
  .product-series-grid.view-large{
    grid-template-columns:1fr;
  }

  body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-grid{
    display:block;
  }

  body.home-page .nb-home-cases,
  body.home-page .nb-home-videos,
  body.home-page .nb-home-products,
  body.home-page .nb-home-process{
    padding-left:14px;
    padding-right:14px;
  }

  body.home-page .nb-home-series{
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width:560px){
  :root{--nb-content-width:calc(100vw - 24px);}

  body[data-sidebar-type="products"] .product-grid,
  .product-grid.view-many,
  .product-grid.view-large,
  .case-grid.view-many,
  body.page-cases .case-grid,
  .series-children-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   [09] 2026-05-21 v17 REAL WIDTH ALIGNMENT
   기준:
   - 하위메뉴바와 본문 컨텐츠가 같은 --nb-content-width를 사용
   - PC 기준 최대 1440px, 브라우저 폭이 작으면 좌우 여백만 남기고 확장
   - 기존 860/1000/1200 고정폭 잔여 규칙을 마지막 로드 CSS에서 구조적으로 정리
========================================================= */
body.sub-page .page-section-bar .container,
body.sub-page .page-section-bar__inner,
body.sub-page .main-layout,
body.sub-page .main-layout.no-sidebar,
body.sub-page .main-layout.has-sidebar,
body.sub-page .layout-content,
body.sub-page .content-card,
body.sub-page .page-content,
body.sub-page .page-intro-card,
body[data-sidebar-type="products"] .equipment-home-section,
body[data-sidebar-type="products"] .equipment-series-section,
body[data-sidebar-type="products"] .equipment-flow-section,
body[data-sidebar-type="products"] .category-showcase-hero,
body[data-sidebar-type="products"] .product-control-panel,
body[data-sidebar-type="products"] .product-view-panel,
body[data-sidebar-type="products"] .product-series-intro,
body[data-sidebar-type="products"] .product-series-list,
body[data-sidebar-type="products"] .product-series-grid,
body[data-sidebar-type="products"] .product-list-head,
body[data-sidebar-type="products"] .product-grid,
body[data-sidebar-type="cases"] .case-overview-intro,
body[data-sidebar-type="cases"] .case-video-section,
body[data-sidebar-type="cases"] .case-type-section,
body[data-sidebar-type="cases"] .field-case-archive,
body[data-sidebar-type="cases"] .case-grid,
body.page-cases .content-card,
body.page-cases .case-grid,
body[data-sidebar-type="customer"] .nb-customer-page,
body[data-sidebar-type="customer"] .nb-customer-shortcuts,
body[data-sidebar-type="customer"] .nb-customer-grid,
body[data-sidebar-type="customer"] .customer-overview-intro,
body[data-sidebar-type="customer"] .customer-overview-section,
body.page-contact .layout-content > .nb-customer-page{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body.sub-page .content-card,
body[data-sidebar-type="products"] .equipment-home-section,
body[data-sidebar-type="products"] .equipment-series-section,
body[data-sidebar-type="products"] .equipment-flow-section,
body[data-sidebar-type="cases"] .content-card,
body[data-sidebar-type="customer"] .content-card{
  padding-left:clamp(28px,3vw,54px);
  padding-right:clamp(28px,3vw,54px);
}

body[data-sidebar-type="products"] .equipment-home-grid,
body[data-sidebar-type="products"] .equipment-series-list,
body[data-sidebar-type="products"] .product-series-list,
body[data-sidebar-type="products"] .product-series-grid,
body[data-sidebar-type="products"] .product-grid,
body[data-sidebar-type="cases"] .case-grid,
body.page-cases .content-card .case-grid,
body.page-contact .nb-customer-grid{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

body[data-sidebar-type="customer"] .nb-customer-grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

body[data-sidebar-type="customer"] .nb-customer-form-card.contact-panel{
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
}

body[data-sidebar-type="customer"] .nb-customer-side-panel{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  width:100%;
  max-width:100%;
}

body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:28px;
}

body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-form-card.contact-panel{
  grid-column:1 / -1;
  width:100%;
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
}

body.page-contact .nb-customer-page.is-inquiry-only .contact-form.nb-redesign-form,
body.page-contact .nb-customer-page.is-inquiry-only .product-inquiry-box,
body.page-as .layout-content > .contact-panel .contact-form.nb-redesign-form{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

body[data-sidebar-type="products"] .product-series-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-sidebar-type="products"] .product-grid,
body[data-sidebar-type="cases"] .case-grid.view-many,
body.page-cases .case-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:1280px){
  body[data-sidebar-type="products"] .product-grid,
  body[data-sidebar-type="cases"] .case-grid.view-many,
  body.page-cases .case-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  body.sub-page .content-card,
  body[data-sidebar-type="products"] .equipment-home-section,
  body[data-sidebar-type="products"] .equipment-series-section,
  body[data-sidebar-type="products"] .equipment-flow-section,
  body[data-sidebar-type="cases"] .content-card,
  body[data-sidebar-type="customer"] .content-card{
    padding-left:18px;
    padding-right:18px;
  }

  body[data-sidebar-type="customer"] .nb-customer-grid,
  body.page-contact .nb-customer-page.is-inquiry-only .nb-customer-grid,
  body[data-sidebar-type="customer"] .nb-customer-side-panel{
    display:block;
  }

  body[data-sidebar-type="products"] .product-series-grid,
  body[data-sidebar-type="products"] .product-grid,
  body[data-sidebar-type="cases"] .case-grid.view-many,
  body.page-cases .case-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   [V11] PC/MOBILE LAYOUT REBUILD FINAL GUARD
   목적:
   - 이전 hero/header/search 보정 CSS가 남아 있어도 최종 구조를 한 번에 정리
   - mobile-bottom-search.css 로드 제거 후 필요한 하단 검색만 여기서 관리
   - !important 사용 금지
========================================================= */

/* PC: hero와 하위 탭이 겹치지 않도록 흐름 복구 */
.page-hero.page-hero--banner{
  position:relative;
  height:clamp(260px, 18vw, 360px);
  min-height:260px;
  display:flex;
  align-items:center;
  overflow:hidden;
  margin-top:0;
}

.page-hero.page-hero--banner .page-hero-inner{
  position:relative;
  z-index:4;
  padding-top:42px;
  padding-bottom:42px;
  transform:none;
}

.page-hero.page-hero--banner h1{
  font-size:clamp(34px, 3vw, 54px);
  line-height:1.18;
  margin:0 0 14px;
}

.page-hero.page-hero--banner p{
  max-width:780px;
  font-size:clamp(15px, 1vw, 18px);
  line-height:1.65;
}

.page-hero.page-hero--banner .page-hero__right,
.page-hero.page-hero--banner .page-hero__right-img{
  pointer-events:none;
}

.page-section-bar,
.page-quick-menu.page-section-bar{
  position:relative;
  top:auto;
  z-index:40;
  margin-top:0;
  transform:none;
  overflow:visible;
}

.page-section-bar .container,
.page-section-bar__inner{
  position:relative;
  z-index:41;
}

/* 제품 상세 관계 카드: 가로 스크롤/삐져나감 제거 */
.product-relation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
  width:100%;
  max-width:100%;
  overflow:visible;
  box-sizing:border-box;
}

.product-relation-section--series .product-relation-grid{
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  overflow:visible;
  scroll-snap-type:none;
}

.product-relation-card{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* 모바일 */
@media (max-width:768px){
  :root{
    --nb-content-width:calc(100vw - 24px);
  }

  .page-hero.page-hero--banner{
    height:clamp(230px, 52vw, 310px);
    min-height:230px;
    align-items:center;
  }

  .page-hero.page-hero--banner .page-hero-inner{
    padding:30px 0;
  }

  .page-hero.page-hero--banner h1{
    font-size:clamp(30px, 8vw, 42px);
    line-height:1.16;
    margin-bottom:10px;
  }

  .page-hero.page-hero--banner h1 .en{
    font-size:.52em;
  }

  .page-hero.page-hero--banner p{
    font-size:15px;
    line-height:1.55;
  }

  .page-section-bar{
    padding:10px 12px;
    background:#f4f8fc;
    overflow:visible;
  }

  .page-section-bar .container,
  .page-section-bar__inner{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .page-section-bar__inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    border:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }

  .page-section-bar__links{
    display:contents;
  }

  .page-section-bar__current,
  .page-section-bar__link{
    min-width:0;
    width:100%;
    height:48px;
    min-height:48px;
    padding:0 10px;
    border:1px solid #cfe1f4;
    background:#fff;
    font-size:14px;
    font-weight:900;
    box-sizing:border-box;
  }

  body[data-sidebar-type="products"] .product-grid,
  .product-grid.view-many,
  .product-grid.view-large{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .product-card{
    min-width:0;
  }

  .product-thumb{
    aspect-ratio:1 / 1;
  }

  .product-body{
    min-height:0;
    padding:11px 10px 12px;
    gap:6px;
  }

  .product-body h3{
    font-size:13.5px;
    line-height:1.32;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .product-body p,
  .tags{
    display:none;
  }

  .detail-btn{
    width:100%;
    min-height:34px;
    margin-top:6px;
    font-size:12px;
  }

  .product-relation-grid,
  .product-relation-section--series .product-relation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .product-relation-section--required .product-relation-grid,
  .product-relation-section--consumable .product-relation-grid{
    grid-template-columns:1fr;
  }

  .mobile-product-search{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:45000;
    display:block;
    margin:0;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
    background:rgba(238,247,255,.96);
    border-top:1px solid #cddfec;
    box-shadow:0 -8px 22px rgba(11,36,68,.16);
  }

  .mobile-product-search__inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }

  .mobile-product-search__label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }

  .mobile-product-search__field{
    display:grid;
    grid-template-columns:minmax(0,1fr) 86px;
    width:100%;
    background:#fff;
    border:1px solid #cfe1f4;
  }

  .mobile-product-search__field input{
    min-width:0;
    height:50px;
    border:0;
    padding:0 14px;
    font-size:15px;
    font-weight:800;
  }

  .mobile-product-search__field button{
    height:50px;
    border:0;
    background:#0f66bb;
    color:#fff;
    font-weight:900;
  }

  body{
    padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));
  }
}

@media (max-width:420px){
  body[data-sidebar-type="products"] .product-grid,
  .product-grid.view-many,
  .product-grid.view-large{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}


/* =========================================================
   [V14] HEADER / HERO CONSISTENCY REBUILD
   목적:
   - 모든 서브페이지 Hero 글자 크기/위치 공통화
   - Hero 다크 오버레이 제거
   - 설비소개 우측 장비 레이어 확대
   - 고객센터 우측 인물 레이어 복구
   - PC 헤더 좌측 로고 / 메뉴+검색 / 우측 연락처·문의 정렬 고정
   - 신규 !important 사용 금지
========================================================= */
@media (min-width:1025px){
  .page-hero.page-hero--banner,
  body.sub-page .page-hero.page-hero--banner,
  body[data-sidebar-type="products"] .page-hero.page-hero--banner,
  body[data-sidebar-type="cases"] .page-hero.page-hero--banner,
  body[data-sidebar-type="customer"] .page-hero.page-hero--banner{
    position:relative;
    display:flex;
    align-items:center;
    height:330px;
    min-height:330px;
    max-height:330px;
    overflow:hidden;
    margin:0;
    background:#eef6ff;
    border-bottom:1px solid #d7e6f6;
    isolation:isolate;
  }

  .page-hero.page-hero--banner::before,
  body.sub-page .page-hero.page-hero--banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background-image:var(--page-banner-image, var(--page-hero-fallback));
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:none;
    opacity:1;
  }

  .page-hero.page-hero--banner::after,
  body.sub-page .page-hero.page-hero--banner::after,
  .page-hero.page-hero--banner[data-hero-key="product"]::after,
  .page-hero.page-hero--banner[data-hero-key="contact"]::after,
  .page-hero.page-hero--banner[data-hero-key="cases"]::after,
  .page-hero.page-hero--banner[data-hero-key="about"]::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:none;
    pointer-events:none;
  }

  .page-hero.page-hero--banner .page-hero__image{
    display:none;
  }

  .page-hero.page-hero--banner .page-hero-inner,
  body.sub-page .page-hero.page-hero--banner .page-hero-inner,
  .page-hero.page-hero--banner[data-hero-key="product"] .page-hero-inner,
  .page-hero.page-hero--banner[data-hero-key="contact"] .page-hero-inner,
  .page-hero.page-hero--banner[data-hero-key="cases"] .page-hero-inner,
  .page-hero.page-hero--banner[data-hero-key="about"] .page-hero-inner{
    position:relative;
    z-index:4;
    width:var(--nb-content-width);
    max-width:var(--nb-content-width);
    margin-left:auto;
    margin-right:auto;
    padding:0;
    transform:none;
    opacity:1;
    animation:none;
    will-change:auto;
    text-align:left;
  }

  .page-hero.page-hero--banner .eyebrow,
  body.sub-page .page-hero.page-hero--banner .eyebrow{
    display:block;
    margin:0 0 12px;
    color:#37c7ff;
    font-size:13px;
    line-height:1;
    font-weight:950;
    letter-spacing:.18em;
    text-shadow:0 2px 8px rgba(0,0,0,.18);
  }

  .page-hero.page-hero--banner h1,
  body.sub-page .page-hero.page-hero--banner h1,
  .page-hero.page-hero--banner[data-hero-key="product"] h1,
  .page-hero.page-hero--banner[data-hero-key="contact"] h1,
  .page-hero.page-hero--banner[data-hero-key="cases"] h1,
  .page-hero.page-hero--banner[data-hero-key="about"] h1{
    max-width:760px;
    margin:0 0 14px;
    color:#fff;
    font-size:52px;
    line-height:1.12;
    font-weight:950;
    letter-spacing:-.06em;
    text-shadow:0 4px 14px rgba(0,0,0,.28);
  }

  .page-hero.page-hero--banner h1 .en,
  body.sub-page .page-hero.page-hero--banner h1 .en{
    display:inline-block;
    font-size:.46em;
    font-weight:850;
    letter-spacing:-.025em;
    opacity:.9;
  }

  .page-hero.page-hero--banner p,
  body.sub-page .page-hero.page-hero--banner p,
  .page-hero.page-hero--banner[data-hero-key="product"] p,
  .page-hero.page-hero--banner[data-hero-key="contact"] p,
  .page-hero.page-hero--banner[data-hero-key="cases"] p,
  .page-hero.page-hero--banner[data-hero-key="about"] p{
    max-width:760px;
    margin:0;
    color:#fff;
    font-size:18px;
    line-height:1.65;
    font-weight:800;
    text-shadow:0 3px 12px rgba(0,0,0,.24);
  }

  .page-hero.page-hero--banner .page-hero__right-img,
  .page-hero.page-hero--banner.has-page-banner-right .page-hero__right-img{
    display:block;
    position:absolute;
    z-index:3;
    pointer-events:none;
    user-select:none;
    object-fit:contain;
    object-position:right bottom;
    max-width:none;
    opacity:1;
    transform:none;
    animation:none;
    filter:none;
  }

  .page-hero.page-hero--banner[data-hero-key="product"].has-page-banner-right .page-hero__right-img{
    right:clamp(18px,3.5vw,72px);
    bottom:-34px;
    width:min(58vw, 1180px);
    height:126%;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"].has-page-banner-right .page-hero__right-img{
    right:clamp(0px,2vw,42px);
    bottom:-24px;
    width:min(43vw, 760px);
    height:116%;
  }

  .page-hero.page-hero--banner:not([data-hero-key="product"]):not([data-hero-key="contact"]) .page-hero__right-img{
    right:clamp(20px,4vw,80px);
    bottom:0;
    width:min(42vw, 760px);
    height:100%;
  }
}

@media (max-width:1024px){
  .page-hero.page-hero--banner,
  body.sub-page .page-hero.page-hero--banner{
    height:260px;
    min-height:260px;
    max-height:260px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-bottom:1px solid #d7e6f6;
  }

  .page-hero.page-hero--banner::before,
  body.sub-page .page-hero.page-hero--banner::before{
    background-image:var(--page-banner-mobile-image, var(--page-banner-image, var(--page-hero-fallback)));
    background-size:cover;
    background-position:center center;
    filter:none;
    opacity:1;
  }

  .page-hero.page-hero--banner::after,
  body.sub-page .page-hero.page-hero--banner::after{
    background:none;
  }

  .page-hero.page-hero--banner .page-hero-inner,
  body.sub-page .page-hero.page-hero--banner .page-hero-inner{
    width:var(--nb-content-width);
    max-width:var(--nb-content-width);
    margin-left:auto;
    margin-right:auto;
    padding:0;
    text-align:left;
    opacity:1;
    transform:none;
    animation:none;
  }

  .page-hero.page-hero--banner h1,
  body.sub-page .page-hero.page-hero--banner h1{
    font-size:clamp(34px,7.4vw,46px);
    line-height:1.12;
    margin-bottom:10px;
  }

  .page-hero.page-hero--banner p,
  body.sub-page .page-hero.page-hero--banner p{
    font-size:15px;
    line-height:1.55;
  }

  .page-hero.page-hero--banner .page-hero__right-img{
    display:none;
  }
}


/* =========================================================
   [V19] 메인/서브 페이지 전체 래퍼 공통화
   - 메인페이지도 layout.php 공통 흐름을 그대로 사용
   - header-lock.css 제거 후 남은 메인 전용 위치 보정 무력화
========================================================= */
body.home-page .site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
}

body.home-page .container.main-layout,
body.home-page .main-layout.no-sidebar{
  width:var(--nb-content-width);
  max-width:var(--nb-content-width);
  margin-left:auto;
  margin-right:auto;
  padding-top:clamp(28px,2.2vw,48px);
  padding-bottom:clamp(64px,5vw,100px);
  display:block;
}

body.home-page .layout-content{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  display:block;
}

body.home-page .nb-home-support-strip__inner,
body.home-page .nb-home-quickbar,
body.home-page .nb-home-product-grid,
body.home-page .nb-home-process__steps,
body.home-page .nb-home-case-grid.case-grid,
body.home-page .nb-home-video-grid,
body.home-page .nb-home-video-note,
body.home-page .nb-home-series,
body.home-page .nb-home-cta{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}

body.home-page .page-hero.page-hero--banner,
body.sub-page .page-hero.page-hero--banner{
  margin-top:0;
}

/* =========================================================
   [V20] SUB HERO VISUAL DESIGN UNIFY
   목적:
   - 밝은 배너 배경에서도 제목/본문 가독성 확보
   - 설비소개 우측 장비 레이어 확대 및 슬라이드 등장 복구
   - 고객센터 우측 상담원 레이어 슬라이드 등장 복구
   - 모든 서브페이지 hero 높이/텍스트 위치 공통화
========================================================= */
@keyframes nbHeroRightSlideIn{
  from{opacity:0; transform:translateX(68px) scale(.985);}
  to{opacity:1; transform:translateX(0) scale(1);}
}

@media (min-width:1025px){
  .page-hero.page-hero--banner,
  body.sub-page .page-hero.page-hero--banner{
    height:360px;
    min-height:360px;
    max-height:360px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#f3f8ff;
    border-bottom:1px solid #d7e6f6;
    isolation:isolate;
  }

  .page-hero.page-hero--banner::before,
  body.sub-page .page-hero.page-hero--banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background-image:var(--page-banner-image, var(--page-hero-fallback));
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:none;
    opacity:1;
  }

  .page-hero.page-hero--banner::after,
  body.sub-page .page-hero.page-hero--banner::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 33%, rgba(255,255,255,.34) 58%, rgba(255,255,255,0) 78%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(220,235,250,.34) 100%);
    pointer-events:none;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"]::after{
    background:
      linear-gradient(90deg, rgba(11,28,49,.82) 0%, rgba(21,48,76,.64) 37%, rgba(255,255,255,.12) 64%, rgba(255,255,255,0) 100%);
  }

  .page-hero.page-hero--banner .page-hero-inner,
  body.sub-page .page-hero.page-hero--banner .page-hero-inner{
    position:relative;
    z-index:4;
    width:var(--nb-content-width);
    max-width:var(--nb-content-width);
    margin-left:auto;
    margin-right:auto;
    padding:0;
    text-align:left;
    transform:none;
    opacity:1;
    animation:none;
  }

  .page-hero.page-hero--banner .eyebrow,
  body.sub-page .page-hero.page-hero--banner .eyebrow{
    display:block;
    margin:0 0 14px;
    color:#0aa8f0;
    font-size:13px;
    line-height:1;
    font-weight:950;
    letter-spacing:.18em;
    text-shadow:none;
  }

  .page-hero.page-hero--banner h1,
  body.sub-page .page-hero.page-hero--banner h1{
    max-width:760px;
    margin:0 0 16px;
    color:#17345a;
    font-size:56px;
    line-height:1.10;
    font-weight:950;
    letter-spacing:-.07em;
    text-shadow:none;
  }

  .page-hero.page-hero--banner h1 .en,
  body.sub-page .page-hero.page-hero--banner h1 .en{
    display:inline-block;
    color:#126ee2;
    font-size:.46em;
    font-weight:850;
    letter-spacing:-.025em;
    opacity:1;
  }

  .page-hero.page-hero--banner p,
  body.sub-page .page-hero.page-hero--banner p{
    max-width:760px;
    margin:0;
    color:#2f425b;
    font-size:18px;
    line-height:1.72;
    font-weight:800;
    text-shadow:none;
    word-break:keep-all;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"] .eyebrow{
    color:#35c4ff;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"] h1,
  .page-hero.page-hero--banner[data-hero-key="contact"] p{
    color:#fff;
    text-shadow:0 4px 18px rgba(0,0,0,.22);
  }

  .page-hero.page-hero--banner[data-hero-key="contact"] h1 .en{
    color:#62cfff;
  }

  .page-hero.page-hero--banner .page-hero__image{
    display:none;
  }

  .page-hero.page-hero--banner .page-hero__right-img,
  .page-hero.page-hero--banner.has-page-banner-right .page-hero__right-img{
    display:block;
    position:absolute;
    z-index:3;
    pointer-events:none;
    user-select:none;
    object-fit:contain;
    object-position:right bottom;
    max-width:none;
    opacity:1;
    filter:drop-shadow(0 30px 36px rgba(18,54,88,.20));
    animation:nbHeroRightSlideIn .82s cubic-bezier(.18,.84,.24,1) both;
  }

  .page-hero.page-hero--banner[data-hero-key="product"].has-page-banner-right .page-hero__right-img{
    right:clamp(8px,2vw,46px);
    bottom:-54px;
    width:min(64vw,1280px);
    height:138%;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"].has-page-banner-right .page-hero__right-img{
    right:clamp(0px,2vw,40px);
    bottom:-30px;
    width:min(43vw,760px);
    height:120%;
    filter:drop-shadow(0 28px 40px rgba(0,0,0,.20));
  }

  .page-hero.page-hero--banner:not([data-hero-key="product"]):not([data-hero-key="contact"]) .page-hero__right-img{
    right:clamp(20px,4vw,80px);
    bottom:-16px;
    width:min(44vw,780px);
    height:108%;
  }
}

@media (max-width:1024px){
  .page-hero.page-hero--banner,
  body.sub-page .page-hero.page-hero--banner{
    height:260px;
    min-height:260px;
    max-height:260px;
    background:#f3f8ff;
  }

  .page-hero.page-hero--banner::after,
  body.sub-page .page-hero.page-hero--banner::after{
    background:linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.76) 58%, rgba(255,255,255,.18) 100%);
  }

  .page-hero.page-hero--banner[data-hero-key="contact"]::after{
    background:linear-gradient(90deg, rgba(11,28,49,.78) 0%, rgba(21,48,76,.52) 56%, rgba(255,255,255,.06) 100%);
  }

  .page-hero.page-hero--banner h1,
  body.sub-page .page-hero.page-hero--banner h1{
    color:#17345a;
    text-shadow:none;
  }

  .page-hero.page-hero--banner p,
  body.sub-page .page-hero.page-hero--banner p{
    color:#2f425b;
    font-weight:800;
    text-shadow:none;
  }

  .page-hero.page-hero--banner[data-hero-key="contact"] h1,
  .page-hero.page-hero--banner[data-hero-key="contact"] p{
    color:#fff;
    text-shadow:0 3px 12px rgba(0,0,0,.22);
  }
}

/* =========================================================
   [FINAL FIX] page-section-bar active/current text visibility
   기준: 파란 활성 배경에서 글자색이 기존 링크 색/투명도에 덮이는 문제 수정
========================================================= */
.page-section-bar__current,
.page-section-bar__current:link,
.page-section-bar__current:visited,
.page-section-bar__current:hover,
.page-section-bar__current:focus,
.page-section-bar__current.is-section-active,
.page-section-bar__current.has-active-child,
.page-section-bar__current.is-section-active:link,
.page-section-bar__current.is-section-active:visited,
.page-section-bar__current.has-active-child:link,
.page-section-bar__current.has-active-child:visited,
.page-section-bar__current strong,
.page-section-bar__current span,
.page-section-bar__current .page-section-bar__label,
.page-section-bar__link.is-active,
.page-section-bar__link.is-active:link,
.page-section-bar__link.is-active:visited,
.page-section-bar__link.is-active:hover,
.page-section-bar__link.is-active:focus,
.page-section-bar__link.is-active span,
.page-section-bar__link.is-active strong,
.page-section-bar__link.is-active .page-section-bar__label{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
}

.page-section-bar__current,
.page-section-bar__current.is-section-active,
.page-section-bar__current.has-active-child,
.page-section-bar__link.is-active{
  background:#1473e6 !important;
  font-weight:900 !important;
}


/* =========================================================
   [NB TYPOGRAPHY READABILITY SYSTEM v20260525]
   목적: 홈페이지 전체 글씨체/크기/두께/줄간격 가독성 통일
   기준: 과한 두꺼움 제거, 본문 크기 상향, 기업형 선명도 강화
========================================================= */
:root{
  --nb-font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nb-font-size-body: 17px;
  --nb-line-height-body: 1.72;
  --nb-weight-regular: 400;
  --nb-weight-medium: 500;
  --nb-weight-semibold: 650;
  --nb-weight-bold: 720;
  --nb-ink-strong: #10233f;
  --nb-ink-body: #263950;
  --nb-ink-muted: #5f6f82;
}

html, body{
  font-family: var(--nb-font-sans);
  font-size: var(--nb-font-size-body);
  line-height: var(--nb-line-height-body);
  font-weight: var(--nb-weight-regular);
  letter-spacing: -0.018em;
  color: var(--nb-ink-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, button, input, select, textarea{
  font-family: var(--nb-font-sans);
}

p, li, td, th, .content-card p, .section-head p, .page-intro-text p,
.product-card p, .case-card p, .resource-item p, .support-card p,
.series-card p, .home-series-card p, .feature-desc, .desc, .summary{
  font-size: clamp(16px, .92vw, 18px);
  line-height: 1.75;
  font-weight: var(--nb-weight-regular);
  color: var(--nb-ink-body);
  letter-spacing: -0.015em;
}

/* 상단 메뉴: 작고 통통한 느낌 제거 */
.site-nav a,
.gnb a,
.header-nav a,
.main-nav a,
.nav-menu a,
.site-header a,
.header-phone,
.header-cta,
.header-search input,
.search-box input{
  font-size: clamp(15px, .82vw, 17px);
  font-weight: var(--nb-weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* 히어로 타이포: 너무 두꺼운 900계열 느낌 완화 */
.page-hero-title,
.hero-title,
.hero-copy h1,
.page-hero h1,
.page-title{
  font-size: clamp(44px, 3.2vw, 64px);
  line-height: 1.08;
  font-weight: var(--nb-weight-bold);
  letter-spacing: -0.055em;
  color: var(--nb-ink-strong);
}

.page-hero-title small,
.page-hero-title span,
.hero-title small,
.hero-title span,
.page-hero-en,
.hero-en{
  font-weight: var(--nb-weight-semibold);
  letter-spacing: -0.035em;
}

.page-hero-desc,
.hero-desc,
.hero-copy p,
.page-hero p{
  font-size: clamp(17px, 1.02vw, 20px);
  line-height: 1.72;
  font-weight: var(--nb-weight-medium);
  color: #243954;
  letter-spacing: -0.018em;
}

/* 섹션 제목/카드 제목: 굵기는 낮추고 크기와 줄간격으로 계층 정리 */
.section-head h2,
.section-title,
.content-card h2,
.page-intro-text h2{
  font-size: clamp(32px, 2.35vw, 48px);
  line-height: 1.18;
  font-weight: var(--nb-weight-bold);
  letter-spacing: -0.05em;
  color: var(--nb-ink-strong);
}

.product-card h3,
.case-card h3,
.resource-item h3,
.category-card h3,
.series-card h3,
.home-series-card h3,
.card-title,
.quick-card strong{
  font-size: clamp(20px, 1.2vw, 26px);
  line-height: 1.32;
  font-weight: var(--nb-weight-semibold);
  letter-spacing: -0.035em;
  color: var(--nb-ink-strong);
}

/* 버튼/탭: 읽히는 크기와 두께 */
.btn, .button, button,
.page-section-bar a, .page-section-bar button,
.page-quick-menu a, .page-quick-menu button,
.category-tab, .filter-tab, .tab-button, .tabs a{
  font-size: clamp(15px, .86vw, 17px);
  line-height: 1.35;
  font-weight: var(--nb-weight-semibold);
  letter-spacing: -0.012em;
}

/* 파란 활성 탭 글자 가독성 고정 */
.page-section-bar .active,
.page-section-bar .is-active,
.page-section-bar .current,
.page-section-bar [aria-current="page"],
.page-section-bar a.active,
.page-section-bar button.active,
.page-quick-menu .active,
.page-quick-menu .is-active,
.page-quick-menu .current,
.page-quick-menu a.active,
.page-quick-menu button.active,
.category-tab.active,
.filter-tab.active,
.tab-button.active,
.tabs .active{
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none;
}

.page-section-bar .active *,
.page-section-bar .is-active *,
.page-section-bar .current *,
.page-section-bar a.active *,
.page-section-bar button.active *,
.page-quick-menu .active *,
.page-quick-menu .is-active *,
.page-quick-menu .current *,
.page-quick-menu a.active *,
.page-quick-menu button.active *,
.category-tab.active *,
.filter-tab.active *,
.tab-button.active *,
.tabs .active *{
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 카드/본문 전반 선명도 */
.content-card, .product-card, .case-card, .resource-item, .series-card, .home-series-card{
  color: var(--nb-ink-body);
}

.label, .eyebrow, .badge, .series-label, .category-label{
  font-size: clamp(12px, .72vw, 14px);
  font-weight: var(--nb-weight-semibold);
  letter-spacing: .06em;
}

@media (max-width: 768px){
  html, body{font-size:16px;}
  .page-hero-title, .hero-title, .hero-copy h1, .page-hero h1, .page-title{
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.12;
  }
  .page-hero-desc, .hero-desc, .hero-copy p, .page-hero p{
    font-size:16px;
    line-height:1.7;
  }
  .site-nav a, .gnb a, .header-nav a, .main-nav a, .nav-menu a{
    font-size:15px;
  }
  .product-card h3, .case-card h3, .resource-item h3, .series-card h3, .home-series-card h3{
    font-size:21px;
  }
}