/*
 * ASEA METAL — Bootstrap 5 bridge (loads after bootstrap.min.css, before style.css)
 * Brand: navy + crimson accent (existing site tokens)
 */
:root {
  /* 상단 메뉴바 샘플 톤: 짙은 네이비 + 선명한 레드 액센트 */
  --asea-navy: #0d2239;
  --asea-navy-mid: #11263d;
  --asea-accent: #e53e4e;
  --bs-primary: #0d2239;
  --bs-primary-rgb: 13, 34, 57;
  /* transforms (drawer X + wave Y) */
  --asea-header-y: 0%;
}

.site-bootstrap-page {
  font-family: var(--font-ui, 'Inter', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif);
}

/* Contact Us: section headings (Head Office / Factories) in blue */
.page-sub-contact-root .greeting_title {
  color: var(--asea-navy) !important;
}


/* 전체 배경은 흰색(회색 바탕 제거) */
.site-bootstrap-page,
.site-bootstrap-page.site-bootstrap-page--sub {
  background: #ffffff !important;
}

.site-bootstrap-page--sub.bg-light {
  background: #ffffff !important;
}

.site-bootstrap-page .navbar.bg-asea {
  background: linear-gradient(180deg, var(--asea-navy-mid) 0%, var(--asea-navy) 100%) !important;
}

/* 상단바를 "내용 폭"에 맞춰 잘라 보이게 */
.site-bootstrap-header .site-bootstrap-navbar {
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
}

/* 상단 메뉴 줄: 흰색으로 비치지 않도록 bg-asea 와 동일 그라데이션 유지 */
.site-bootstrap-header .site-bootstrap-navbar__inner {
  background: linear-gradient(180deg, var(--asea-navy-mid) 0%, var(--asea-navy) 100%) !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 14px 36px rgba(0, 0, 0, 0.22);
}

.site-bootstrap-page .navbar .nav-link {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}

/* 상단 메뉴 간격(PC에서 살짝 더) */
.site-bootstrap-page .navbar .navbar-nav {
  gap: 0.25rem;
}

@media (min-width: 992px) {
  .site-bootstrap-page .navbar .navbar-nav {
    gap: 0.6rem;
  }

  .site-bootstrap-page .navbar .nav-link {
    padding: 0.55rem 0.9rem;
  }
}

.site-bootstrap-page .navbar .nav-link:hover,
.site-bootstrap-page .navbar .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.site-bootstrap-page .navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* 데스크톱 상단 메뉴: 얇은 액센트 밑줄(프리미엄 터치, 모바일은 햄버거만 사용) */
@media (min-width: 992px) {
  .site-bootstrap-page .navbar .nav-link {
    position: relative;
  }

  .site-bootstrap-page .navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    width: 0;
    height: 2px;
    background: var(--asea-accent, #e53e4e);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 1px;
    pointer-events: none;
  }

  .site-bootstrap-page .navbar .nav-link:hover::after,
  .site-bootstrap-page .navbar .nav-link:focus-visible::after {
    width: calc(100% - 1.5rem);
  }

  .site-bootstrap-page .navbar .nav-link.active::after {
    width: calc(100% - 1.5rem);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .site-bootstrap-page .navbar .nav-link::after {
    transition: none;
  }
}

/* 데스크탑(≥992px): 방식 C — 스크롤 방향에 따라 숨김/등장 + 축소 + 그림자 */
@media (min-width: 992px) {
  .site-bootstrap-header {
    will-change: transform;
    transition: transform 240ms ease, box-shadow 240ms ease;
  }

  .site-bootstrap-header.site-header--pinned {
    transform: translate3d(0, 0, 0);
  }

  .site-bootstrap-header.site-header--unpinned {
    transform: translate3d(0, -110%, 0);
  }

  .site-bootstrap-header.site-header--scrolled {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  }

  /* 축소(shrink): 내부 패딩과 로고 크기만 살짝 줄여 '반응' 느낌 */
  .site-bootstrap-header.site-header--scrolled .site-bootstrap-navbar__inner {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .site-bootstrap-header.site-header--scrolled .navbar-brand img {
    max-height: 40px;
  }
}

/* 데스크탑(≥992px): 헤더를 fixed로 고정(출렁 효과 확실히) + 컨텐츠 상단 여백 */
@media (min-width: 992px) {
  :root {
    /* 홈(index) 상단 헤더 고정 시, 본문 시작 여백(공백) */
    --asea-desktop-header-offset-home: 96px;
  }

  /* 메인(page-home)만 fixed + 여백 적용. 다른 페이지는 기존(sticky-top) 그대로 유지 */
  body.page-home .site-bootstrap-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }

  /* 메인만 헤더 높이만큼 내려서 슬라이드가 가려지지 않게 */
  body.site-bootstrap-page.page-home {
    padding-top: var(--asea-desktop-header-offset-home);
  }

  /* style.css가 body { padding:0 !important }로 덮어씀 → 메인 컨텐츠 래퍼에 간격을 직접 부여 */
  body.site-bootstrap-page.page-home .page-shell--home {
    margin-top: calc(var(--asea-desktop-header-offset-home) + 6px);
  }

  /* legacy topmargin="22" 같은 속성은 데스크탑에서 여백만 키움 → 제거 */
  body[topmargin] {
    margin-top: 0 !important;
  }

  /* 서브페이지: 헤더-본문 간격 과다(bootstrap container-fluid py-3) → 상단 패딩만 축소 */
  .site-bootstrap-page.site-bootstrap-page--sub .container-fluid.flex-grow-1 {
    padding-top: 0.35rem !important;
  }
}

.site-bootstrap-page .navbar-brand img {
  max-height: 44px;
  width: auto;
}

/* 네비 컨테이너: 홈(index)·서브 모두 동일 — 본문 카드(1000px)와 정렬 */
.site-bootstrap-header .container {
  max-width: 1000px;
}

/* 모바일 상단바: 로고 옆 회사명 줄바꿈·크기 — 슬라이드 메뉴 패널 헤더와 동일 토큰 */
@media (max-width: 991.98px) {
  /* Bootstrap 기본 세로 패딩은 내부(.site-bootstrap-navbar__inner)에서 통제 */
  .site-bootstrap-header .navbar {
    --bs-navbar-padding-y: 0;
  }

  .site-bootstrap-header .site-bootstrap-navbar__inner,
  .site-mobile-menu-panel__header {
    --asea-mobile-header-pt: max(0.5rem, env(safe-area-inset-top, 0px));
    --asea-mobile-header-pb: 0.65rem;
    --asea-mobile-header-pl: max(0.65rem, env(safe-area-inset-left, 0px));
    --asea-mobile-header-pr: max(0.65rem, env(safe-area-inset-right, 0px));
  }

  /*
   * 한 줄: [햄버거][로고+ASEA METAL] — flex-wrap 대신 grid로 첫 행 고정
   * (flex만 쓰면 브랜드 블록이 다음 줄로 떨어지는 현상 방지)
   * 패딩·로고·ASEA METAL 글자 크기 = .site-mobile-menu-panel__header 와 동일
   */
  .site-bootstrap-header .site-bootstrap-navbar__inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: 0.12rem;
    row-gap: 0;
    box-sizing: border-box;
    min-height: 0 !important;
    padding-top: var(--asea-mobile-header-pt) !important;
    padding-bottom: var(--asea-mobile-header-pb) !important;
    padding-left: var(--asea-mobile-header-pl) !important;
    padding-right: var(--asea-mobile-header-pr) !important;
  }

  .site-mobile-menu-panel__header {
    padding: var(--asea-mobile-header-pt) var(--asea-mobile-header-pr) var(--asea-mobile-header-pb) var(--asea-mobile-header-pl) !important;
  }

  /* 햄버거: 세 줄만 — 테두리·박스 없음 (터치 영역 유지) */
  .site-bootstrap-header .site-navbar-toggler-mobile {
    grid-column: 1;
    grid-row: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important;
    --bs-border-width: 0 !important;
    --bs-navbar-toggler-border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .site-bootstrap-header .site-navbar-toggler-mobile:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .site-bootstrap-header .site-navbar-toggler-mobile:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
  }

  .site-bootstrap-header .site-navbar-toggler-mobile .navbar-toggler-icon {
    width: 1.35em;
    height: 1.35em;
  }

  .site-bootstrap-header .site-bootstrap-navbar__inner > .navbar-brand {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  /* 메인·슬라이드 메뉴 패널 로고 동일 — style.css에서 max-height:32px !important 보강 */
  .site-bootstrap-header .navbar-brand img {
    height: 32px;
    max-height: 32px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
  }

  /* 로고 옆에 붙이되 약간 간격 — 우측 끝으로 밀지 않음 (패널 브랜드와 동일 크기) */
  .site-bootstrap-header .site-brand-text {
    font-size: clamp(1.2rem, 5vw, 1.75rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * 상위 레이아웃이 <td align="center">(예: sample_top.htm, manual_top.htm)일 때
   * 텍스트 정렬 상속 방지 — 헤더 + 풀스크린 패널 메뉴
   */
  .site-bootstrap-header .navbar-collapse,
  .site-bootstrap-header .mobile-nav-accordion,
  .site-bootstrap-header .mobile-nav-accordion .accordion-body,
  .site-bootstrap-header .mobile-nav-accordion .accordion-button,
  .site-mobile-menu-panel .mobile-nav-accordion,
  .site-mobile-menu-panel .mobile-nav-accordion .accordion-body,
  .site-mobile-menu-panel .mobile-nav-accordion .accordion-button,
  .site-bootstrap-header .mobile-nav-subheading,
  .site-bootstrap-header .mobile-nav-sub,
  .site-bootstrap-header .mobile-nav-sub .list-group-item,
  .site-mobile-menu-panel .mobile-nav-subheading,
  .site-mobile-menu-panel .mobile-nav-sub,
  .site-mobile-menu-panel .mobile-nav-sub .list-group-item {
    text-align: left !important;
  }

  /* 모바일 햄버거: 좌측 사이드바와 동일한 하위 메뉴(아코디언) */
  .mobile-nav-accordion {
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 0.4rem;
  }

  .mobile-nav-accordion .accordion-item {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 10px;
    margin-bottom: 8px;
    /* overflow:hidden 이면 Customer Service 하단 E-CATALOGUE 버튼이 잘림 */
    overflow: visible;
  }

  /* Bootstrap .accordion-collapse 기본 overflow 로 링크가 잘리는 경우 방지 */
  .mobile-nav-accordion .accordion-collapse.collapse.show {
    overflow: visible !important;
  }

  .mobile-nav-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 0.9rem;
    background: #f8fafc;
    color: var(--asea-navy);
    box-shadow: none;
  }

  .mobile-nav-accordion .accordion-button:not(.collapsed) {
    background: #e8eef4;
    color: var(--asea-navy);
    box-shadow: none;
  }

  .mobile-nav-accordion .accordion-button::after {
    filter: brightness(0.35);
  }

  .mobile-nav-subheading {
    /* PRODUCTS: Manufacturing / Outsourcing — 하위 링크(0.9rem−1pt) 이상으로 읽기 쉬운 굵은 소제목 */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    padding: 10px 12px 6px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
  }

  .mobile-nav-accordion .mobile-nav-subheading:first-child {
    border-top: none;
  }

  .mobile-nav-sub .list-group-item {
    font-size: calc(0.9rem - 1pt);
    padding: 0.55rem 0.85rem;
    border-color: #e2e8f0;
    color: #1e293b;
  }

  .mobile-nav-sub .list-group-item.active {
    background: var(--asea-navy);
    border-color: var(--asea-navy);
    color: #fff;
  }

  .mobile-nav-cs {
    font-size: 0.9rem;
    color: #334155;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Customer Service: E-카탈로그 버튼(영문 와인색 / 일문 차콜, 2줄 타이포) */
  .mobile-nav-catalog {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e8f0;
  }

  .mobile-nav-catalog__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 10px;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }

  .mobile-nav-catalog__link--en {
    background: linear-gradient(180deg, #8b2d42 0%, #6b1f32 100%);
  }

  .mobile-nav-catalog__link--en:active {
    filter: brightness(0.95);
  }

  .mobile-nav-catalog__link--jp {
    background: linear-gradient(180deg, #2a2a2a 0%, #141414 100%);
    /* HTML 숫자참조 일본어: EUC-KR 페이지에서도 글리프 표시 */
    font-family: 'Malgun Gothic', 'Meiryo', 'MS PGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
      'Noto Sans JP', sans-serif;
  }

  .mobile-nav-catalog__link--jp:active {
    filter: brightness(0.95);
  }

  .mobile-nav-catalog__link:last-child {
    margin-bottom: 0;
  }

  .mobile-nav-catalog__lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    line-height: 1.2;
  }

  .mobile-nav-catalog__sub {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.92;
  }

  .mobile-nav-catalog__link--jp .mobile-nav-catalog__sub {
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
  }

  .mobile-nav-catalog__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .mobile-nav-catalog__link--jp .mobile-nav-catalog__title {
    letter-spacing: 0.02em;
  }

  .mobile-nav-catalog__pdf {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  }
}

/* CEO Message 레이아웃(데스크톱 2열, 모바일 1열) */
.ceo-message-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}

/* 데스크톱: 좌측 제품 JPG + 서명 PNG */
.ceo-message-media {
  background-color: #f6f6f6;
  padding: 12px;
}

.ceo-message-g-img,
.ceo-message-signhand.ceo-message-signhand--desktop {
  display: block;
  vertical-align: top;
}

@media (max-width: 768px) {
  .ceo-message-layout {
    grid-template-columns: 1fr;
  }

  /* 모바일: 좌측 이미지 블록 전체 숨김 (제품·서명 컷) */
  .ceo-message-media {
    display: none !important;
  }

  /*
   * 모바일 CEO 메시지: ceo_signing_hand 고정 배경 + 어두운 오버레이 + 스크롤 텍스트
   * (fixed 배경이 카드에 잘리지 않도록 page-ceo-message-card)
   */
  .page-ceo-message-card {
    overflow: visible !important;
  }

  .ceo-message-text {
    position: relative;
    isolation: isolate;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding: 0;
    border-radius: 0;
    background-color: #1a1a1a;
    background-image: url(../images/sub_img/ceo_signing_hand.png?v=20260410);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  .ceo-message-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    pointer-events: none;
  }

  .ceo-message-parallax-content {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.93);
    font-size: 15px;
    line-height: 1.75;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  .ceo-message-parallax-content .ceo-message-president-line span {
    color: #fff;
  }

  .ceo-message-parallax-content .ceo-message-signature-img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  }

  .ceo-message-parallax-content .ceo-message-president-photo img {
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  }
}

/* iOS Safari: background-attachment: fixed 불안정 시 스크롤 부착 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .ceo-message-text {
      background-attachment: scroll;
    }
  }
}

/* 서브페이지: 좁은 화면에서 사이드바·본문 세로 스택 */
@media (max-width: 991.98px) {
  tr.sub-layout-row > td.sub-sidebar-cell,
  tr.sub-layout-row > td.sub-sidebar-cell + td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  tr.sub-layout-row > td.sub-sidebar-cell + td[width='10'] {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  tr.sub-layout-row > td.sub-main-cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .sidebar-container {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1rem;
  }
}

/*
 * 서브페이지 카드: card-body 패딩 때문에 width="960" 등이 가용폭보다 넓어
 * 브레드크럼·배너·탭 행이 우측에서 잘림 — 데스크톱에서도 100%로 맞춤
 */
.site-bootstrap-page--sub.site-bootstrap-page .card-body table[width] {
  width: 100% !important;
  max-width: 100% !important;
}

.site-bootstrap-page--sub.site-bootstrap-page .sub-main-cell img[width],
.site-bootstrap-page--sub.site-bootstrap-page .card-body table[width] img[width] {
  max-width: 100% !important;
  height: auto !important;
}

/*
 * Outsourcing 공통: YOUR SINGLE SOURCE 배너(sub_img_2.jpg)
 * Cylindrical Shell 등 모든 아웃소싱 제품 페이지에서 동일한 카드형·모바일 반응형
 */
/* 본문 열 상단: HOME > PRODUCTS > 현재 제품명(strong) — 배너 바로 위 (모바일 목업: 연한 배경·회색 경로·현재만 검정 굵게) */
.page-sub-outsourcing .sub-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 10px 12px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  background: #f1f5f9;
  border-radius: 8px;
  box-sizing: border-box;
}

.page-sub-outsourcing .sub-breadcrumb strong {
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
  text-transform: none;
}

.page-sub-outsourcing tr:has(> td.sub-breadcrumb) + tr > td {
  padding-top: 8px;
}

.page-sub-outsourcing .sub-outsourcing-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 0;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.2);
  background: #0b0f14;
  box-sizing: border-box;
}

.page-sub-outsourcing .sub-outsourcing-banner img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.site-bootstrap-page--sub.site-bootstrap-page .card-body > table > tr:first-child td {
  white-space: normal;
  word-break: break-word;
}

/*
 * 사이드바+본문 3열 테이블: auto 레이아웃이 첫 열을 넓혀(200px 사이드바보다 큼)
 * 좌측 메뉴와 본문 사이 빈 간격이 생김 — FACILITY 등과 동일하게 고정 열폭(PC)
 */
@media (min-width: 992px) {
  /* 좌우 2단(사이드바+본문): 브레드크럼이 바깥 행이거나 없어도 동일 테이블에 적용 */
  .site-bootstrap-page--sub.site-bootstrap-page .card-body > table > tr:nth-child(1) > td > table:has(tr.sub-layout-row),
  .site-bootstrap-page--sub.site-bootstrap-page .card-body > table > tr:nth-child(2) > td > table:has(tr.sub-layout-row) {
    table-layout: fixed !important;
  }

  .site-bootstrap-page--sub.site-bootstrap-page tr.sub-layout-row > td.sub-sidebar-cell {
    width: 200px !important;
    max-width: 200px !important;
    box-sizing: border-box;
  }

  .site-bootstrap-page--sub.site-bootstrap-page tr.sub-layout-row > td.sub-sidebar-cell + td {
    width: 10px !important;
    max-width: 10px !important;
    padding: 0 !important;
  }

  .site-bootstrap-page--sub.site-bootstrap-page tr.sub-layout-row > td.sub-main-cell {
    width: auto !important;
    min-width: 0;
  }
}

/* 레거시 바깥 테이블 제거 후 카드 본문 안 표는 가로 스크롤 유지 */
.site-bootstrap-page .card-body table {
  max-width: 100%;
}

/* 고정 width="960/750" 테이블이 모바일에서 가로로 튀는 문제 방지 */
@media (max-width: 991.98px) {
  /* Contact Us(inquiry_top)는 아래 .page-sub-contact 규칙만 사용 — auto+긴 주소로 폭 팽창 방지 */
  .site-bootstrap-page:not(.page-sub-contact) table[width] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* 제조 공정 다이어그램(데스크 표만): 고정폭+fixed 레이아웃+가로 스크롤 */
  .site-bootstrap-page .card-body .mfg-process-wrap .mfg-process-desktop table {
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  .site-bootstrap-page img[width][height] {
    height: auto !important;
    max-width: 100% !important;
  }

  /* 데스크 공정도 이미지 — 모바일 세로 카드는 제외 */
  .site-bootstrap-page .mfg-process-wrap .mfg-process-desktop img[width][height] {
    max-width: none !important;
    height: auto !important;
    vertical-align: middle;
  }
}

/* 모바일 표: 자동 줄바꿈 + 긴 단어도 깨기 */
@media (max-width: 768px) {
  .site-bootstrap-page table td,
  .site-bootstrap-page table th {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* FACILITY 제조 공정(데스크 표): 캡션이 세로 한 글자씩 깨지지 않도록 */
  .site-bootstrap-page .mfg-process-wrap .mfg-process-desktop table td,
  .site-bootstrap-page .mfg-process-wrap .mfg-process-desktop table th {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* FACILITY Manufacturing Equipment(sub_3_1_3) 장비 스펙 표 — 데스크와 같은 표 형태, 좁은 화면은 가로 스크롤 */
  .site-bootstrap-page .facility-equip-spec-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 6px 0 14px;
    padding-bottom: 6px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .site-bootstrap-page .facility-equip-spec-table {
    width: 740px !important;
    max-width: none !important;
    min-width: 560px;
    table-layout: auto !important;
    font-size: 13px;
  }

  .site-bootstrap-page .facility-equip-spec-table td,
  .site-bootstrap-page .facility-equip-spec-table th {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}

.site-bootstrap-page .table-responsive-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * 모바일에서 “화면이 고정돼서 잘림” 현상 해결
 * - 배치 변환 시 wrapper에 Bootstrap 유틸 `overflow-hidden`이 포함되어 카드가 가로 넘침을 잘라버림
 * - 데이터 표/이미지는 잘리지 말고 가로 스크롤로 보여줘야 함
 */
.site-bootstrap-page .card.overflow-hidden {
  overflow: visible !important;
}

.site-bootstrap-page .card-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* CEO Message (sub_1_1): 모바일에서 이미지 → 텍스트 세로 스택 + 대표 사진 크게 */
@media (max-width: 768px) {
  .site-bootstrap-page img[src*="images/sub_img/g_img."] {
    display: block;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    margin: 0 auto 14px;
    border-radius: 10px;
  }

  .site-bootstrap-page img[src*="images/sub_img/president.jpg"] {
    display: block;
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
    margin: 14px auto 0 !important;
  }

  /* 3열 테이블(240/10/500)에서 텍스트가 이미지 위로 올라오는 현상 방지 */
  .site-bootstrap-page td.con_txt {
    display: block !important;
    width: 100% !important;
  }
}

/* Contact Us (inquiry_top): 모바일 가로 스크롤 방지 — 고정폭 테이블·긴 주소·flex min-width */
html:has(body.page-sub-contact-root),
body.page-sub-contact-root {
  overflow-x: hidden;
  max-width: 100%;
}

.page-sub-contact.min-w-0 {
  min-width: 0;
}

@media (max-width: 991.98px) {
  body.page-sub-contact-root .page-sub-contact > .container-fluid {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.page-sub-contact-root .page-sub-contact .card {
    min-width: 0;
    max-width: 100%;
  }

  body.page-sub-contact-root .page-sub-contact .card-body {
    min-width: 0;
    max-width: 100%;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
  }

  /* 전역(507행) table-layout:auto 가 이 페이지에서만 넓어지는 것 방지 */
  .page-sub-contact table[width] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .page-sub-contact .sub-layout-row td {
    max-width: 100%;
  }

  .page-sub-contact .sidebar-container .btn-download {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .page-sub-contact-root .site-bootstrap-header,
  .page-sub-contact-root .site-bootstrap-header .container {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .page-sub-contact .sub-main-cell td,
  .page-sub-contact .sub-main-cell th {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* 가로로 밀어 스크롤할 때 빈 캔버스가 보이는 현상 완화 */
  html.page-sub-contact-html {
    overscroll-behavior-x: none;
  }

  body.page-sub-contact-root {
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
  }

  .page-sub-contact-root .page-sub-contact {
    overflow-x: clip;
  }

  .page-sub-contact-root .page-sub-contact .card {
    overflow-x: clip;
  }
}

/* Contact Us (inquiry_top): 상단 배너·지도·고객사 이미지 — 모바일에서 비율 유지·한눈에 보이게; 본문 자연스러운 줄바꿈 */
.page-sub-contact .contact-hero-cell {
  width: 100%;
  max-width: 100%;
  padding: 0;
  vertical-align: top;
}

.page-sub-contact .contact-hero-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 0;
  line-height: 0;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #e8edf4;
}

.page-sub-contact .contact-hero-banner img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  vertical-align: top;
  border-radius: 0;
}

.page-sub-contact .sub-main-cell img[width][height] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 문의 폼 Write·List 버튼 GIF — 위 전폭 규칙 제외(한 줄 유지) */
.page-sub-contact .board-write-actions img,
.page-sub-contact .board-write-actions input[type="image"] {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* world map: HTML width=740 남아 있으면 모바일에서 문서 폭이 740px 이상으로 팽창 */
.page-sub-contact img[src*="contact_map"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.page-sub-contact .contact-tagline {
  color: #c00;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.35rem);
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: break-word;
  padding: 10px 4px 14px;
}

@media (max-width: 991.98px) {
  .page-sub-contact .sub-main-cell > table[width="750"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .page-sub-contact .sub-main-cell table[width="730"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .page-sub-contact .sub-main-cell td {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .page-sub-contact .contact-cta-wrap {
    padding: 32px 0 !important;
  }

  .page-sub-contact .contact-cta-box {
    padding: 28px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .page-sub-contact .contact-cta-box h2 {
    font-size: clamp(1.1rem, 4.2vw, 1.35rem) !important;
  }

  .page-sub-contact .contact-mail-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: clamp(0.88rem, 3.6vw, 1.05rem) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 768px) {
  .page-sub-contact .sub-main-cell table td,
  .page-sub-contact .sub-main-cell table th {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/*
 * 반응형 데이터 표(제품 규격·MTC·화학성분 등)
 * - 모바일: 셀 안 테이블은 가로 스크롤(overflow-x) — 화면 밖으로 밀리지 않음
 * - 수동 래퍼: <div class="site-table-scroll">...</div>
 * - 구형 WebKit: -webkit-overflow-scrolling: touch
 */
.site-bootstrap-page .site-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

.site-bootstrap-page .site-table-scroll > table {
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .site-bootstrap-page .sub-main-cell td:has(> table.spec-table),
  .site-bootstrap-page .sub-main-cell td:has(> table.norm-table),
  .site-bootstrap-page .sub-main-cell td:has(> table.chem-table),
  .site-bootstrap-page .sub-main-cell td:has(> table.tech_table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
  }

  .site-bootstrap-page .sub-main-cell td:has(> table.spec-table) > table,
  .site-bootstrap-page .sub-main-cell td:has(> table.norm-table) > table,
  .site-bootstrap-page .sub-main-cell td:has(> table.chem-table) > table,
  .site-bootstrap-page .sub-main-cell td:has(> table.tech_table) > table {
    width: max-content;
    min-width: min(100%, calc(100vw - 32px));
  }
}

/* =============================================================================
 * 모바일 전용 풀스크린 메뉴 — 슬라이드 + 블러 딤 + 메뉴 줄 순차 등장 (scaleX 금지)
 * ============================================================================= */
:root {
  --asea-mobile-drawer-width: 100vw;
  /* site-mobile-menu.js 의 transitionMs 와 동일하게 유지 */
  --asea-mobile-menu-duration: 0.65s;
}

.site-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--asea-mobile-menu-duration) cubic-bezier(0.16, 1, 0.3, 1),
    visibility var(--asea-mobile-menu-duration) cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-mobile-menu-backdrop {
    background: rgba(15, 23, 42, 0.38);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
  }
}

body.site-mobile-menu-open .site-mobile-menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-mobile-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--asea-mobile-drawer-width);
  max-width: var(--asea-mobile-drawer-width);
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    #e8ecf1;
  font-family: var(--font-ui, 'Inter', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    20px 0 56px rgba(0, 0, 0, 0.2);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(-100%, 0, 0);
  transition: transform var(--asea-mobile-menu-duration) cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-sizing: border-box;
}

body.site-mobile-menu-open .site-mobile-menu-panel {
  transform: translate3d(0, 0, 0);
}

.site-mobile-menu-panel__header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.65rem, env(safe-area-inset-right, 0px)) 0.65rem max(0.65rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, var(--asea-navy-mid) 0%, var(--asea-navy) 100%);
  border-bottom: 3px solid var(--asea-accent, #e53e4e);
  box-sizing: border-box;
}

.site-mobile-menu-panel__brand {
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.35rem;
}

.site-mobile-menu-panel__brand .site-brand-logo-img {
  height: 32px;
  width: auto;
  max-height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-mobile-menu-panel__brand .site-brand-text {
  font-size: clamp(1.2rem, 5vw, 1.75rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-mobile-menu-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  margin: 0;
  padding: 0.25rem;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-mobile-menu-close:hover,
.site-mobile-menu-close:focus-visible {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
  outline: none;
}

.site-mobile-menu-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5) !important;
  outline-offset: 2px;
}

.site-mobile-menu-close__glyph {
  display: block;
  font-size: 2.25rem;
  font-weight: 200;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.site-mobile-menu-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.65rem 0.65rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: #e8ecf1;
}

.site-mobile-menu-panel .mobile-nav-accordion {
  margin-top: 0;
  border-top: none;
  padding-top: 0.25rem;
}

body.site-mobile-menu-open {
  overflow: hidden;
}

/* 아코디언 블록 순차 등장(프리미엄 리스트 모션) — 본문 전체 페이드 대신 */
@media (max-width: 991.98px) {
  .site-mobile-menu-panel .accordion-flush > .accordion-item {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
    transition:
      opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(1) {
    transition-delay: 0.08s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(2) {
    transition-delay: 0.13s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(3) {
    transition-delay: 0.18s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(4) {
    transition-delay: 0.23s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(5) {
    transition-delay: 0.28s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(6) {
    transition-delay: 0.33s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(7) {
    transition-delay: 0.38s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(8) {
    transition-delay: 0.43s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(9) {
    transition-delay: 0.48s;
  }

  body.site-mobile-menu-open .site-mobile-menu-panel .accordion-flush > .accordion-item:nth-child(10) {
    transition-delay: 0.53s;
  }

  body:not(.site-mobile-menu-open) .site-mobile-menu-panel .accordion-flush > .accordion-item {
    transition-delay: 0s !important;
    transition-duration: 0.12s;
  }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .site-mobile-menu-panel .accordion-flush > .accordion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .site-mobile-menu-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.52) !important;
  }
}

@media (min-width: 992px) {
  .site-mobile-menu-backdrop,
  .site-mobile-menu-panel {
    display: none !important;
  }
}

/*
 * 메인(index) 모바일: 상단바를 스크롤해도 화면 위에 고정.
 * (.page-shell overflow 등으로 sticky-top 이 동작하지 않을 수 있어 fixed 사용)
 */
@media (max-width: 991.98px) {
  body.page-home .site-bootstrap-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    max-width: none !important;
  }

  body.page-home .page-shell {
    /* 모바일 메인: 헤더 아래 흰 여백 20% 축소 */
    padding-top: calc(env(safe-area-inset-top, 0px) + 2.34rem);
  }
}

/* 모바일(전 페이지): 데스크탑과 같은 "물결"(숨김/등장) 헤더 효과 */
@media (max-width: 991.98px) {
  .site-bootstrap-header {
    will-change: transform;
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .site-bootstrap-header.site-header--pinned {
    transform: translate3d(0, 0, 0);
  }

  .site-bootstrap-header.site-header--unpinned {
    transform: translate3d(0, -110%, 0);
  }

  .site-bootstrap-header.site-header--scrolled {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
  }
}