@charset "utf-8";
/* ==========================================================================
   BMTECH — 수직 리듬(간격) 잠금 (전 페이지 공통)
   --------------------------------------------------------------------------
   bmtech-type.css 다음, 맨 마지막에 로드한다. 타이포 역할(A~I)과 같은 구도 —
   간격도 "역할 4개 + 밴드 패딩 1개" 스케일에서만 고른다. 임의 px 금지.

   ┌──────┬────────────────────────────┬──────────┬─────────┐
   │ 토큰  │ 용도                        │ PC       │ ~1080px │
   ├──────┼────────────────────────────┼──────────┼─────────┤
   │ sec-pt    │ 페이지 도입부 위 여백        │ 110px    │ 72px    │
   │ sec-pb    │ 페이지 도입부 아래 여백      │ 48px(직접)│ 40px   │
   │ block-gap │ 섹션·블록 사이              │ 80px     │ 56px    │
   │ title-gap │ 제목 → 본문                │ 32px     │ 24px    │
   │ band-pad  │ 풀블리드 밴드 내부 상하      │ 90px     │ 64px    │
   └──────┴────────────────────────────┴──────────┴─────────┘

   왜: 2026-08-26 대표 지적 — CEO 페이지에서 도입부와 본문 사이가 220px+
   (editorial 이 카보노미 실측 따라 190/130 까지 밀어둔 값 + 클론 밴드
   자체 패딩 140 이 '이중으로' 쌓였다). 스케일을 조이고, 밴드가 도입부
   바로 다음에 올 때의 이중 카운트를 여기서 끊는다.

   메인 페이지 밴드 패딩도 제각각(120 / 110 / 64→140)이던 것을 band-pad
   하나로 통일. archive 클론 파일은 원본 유지 — 여기서 덮는다.
   ========================================================================== */

:root {
  --bmt-sec-pt:    110px;
  --bmt-sec-pb:    80px;
  --bmt-block-gap: 80px;
  --bmt-title-gap: 32px;
  --bmt-band-pad:  90px;
}

@media (max-width: 1080px) {
  :root {
    --bmt-sec-pt:    72px;
    --bmt-sec-pb:    56px;
    --bmt-block-gap: 56px;
    --bmt-title-gap: 24px;
    --bmt-band-pad:  64px;
  }
}

/* --- S1. 페이지 도입부 (.page_head) — editorial 150/80 → 110/48 -----------
   좌우 패딩은 0 — 부모 .s_wrap 이 상시 gutter(74)를 갖게 되면서(본문폭 통일)
   여기까지 gutter 를 주면 148px 이중 들여쓰기가 된다 */
.m_tit_wrap.page_head,
.s_tit_wrap.page_head {
  padding: var(--bmt-sec-pt) 0 48px;
}
/* 예외: .full_img 밴드 안의 page_head 는 s_wrap 축 밖(100vw)이라
   자기 컨테이너로 서야 한다. editorial 내부 캐스케이드에서 page_head 의
   width:100% 가 §9 를 이겨 제목이 뷰포트 왼쪽에 붙던 버그 포함 해결 */
.full_img > .m_tit_wrap.page_head,
.full_img > .s_tit_wrap.page_head {
  width: min(1600px, 100vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bmt-gutter);
  padding-right: var(--bmt-gutter);
}
/* editorial 의 모바일 축소를 다시 얹는다 (이 파일이 더 뒤라 base 규칙이
   그쪽 media 를 이겨버리기 때문) */
@media (max-width: 1024px) {
  .m_tit_wrap.page_head,
  .s_tit_wrap.page_head { padding-top: var(--bmt-sec-pt); padding-bottom: 40px; }
}
@media (max-width: 640px) {
  .m_tit_wrap.page_head,
  .s_tit_wrap.page_head { padding-top: 56px; padding-bottom: 32px; }
}

/* 레거시 .s_wrap 상단 35px — 도입부가 자기 여백을 가지므로 0 */
.s_wrap { margin-top: 0; }

/* --- S2. 풀블리드 밴드 내부 상하 = band-pad 통일 --------------------------- */
/* 메인 페이지 */
.wd-intro-cards      { padding-top: var(--bmt-band-pad); padding-bottom: var(--bmt-band-pad); }
.p_box.wd-core-tech  { padding-top: var(--bmt-band-pad); padding-bottom: var(--bmt-band-pad); }
@media (min-width: 1024px) {
  .wd-biz-cards      { padding-top: var(--bmt-band-pad); padding-bottom: var(--bmt-band-pad); }
}
/* 서브 페이지 */
.wd-qfactory         { padding: var(--bmt-band-pad) 0; }
.wd-strength         { padding: var(--bmt-band-pad) 0; }   /* infor: 110px 이던 것 */
.collab_banner       { padding: var(--bmt-band-pad) 0; }   /* RnD: 96/104px 이던 것 */

/* 레거시 잔여 (base.css 미커버분) */
.ge_collab_head { padding: var(--bmt-block-gap) 0 var(--bmt-title-gap); }  /* 80/60 이던 것 */
.ge_collab_body { margin-bottom: var(--bmt-block-gap); }                   /* 80 이던 것 */
.etc            { margin-bottom: var(--bmt-block-gap); }                   /* 100 이던 것 */

/* --- S3. 도입부 바로 다음 밴드 — 이중 카운트 차단 -------------------------- */
/* CEO 밴드(클론 원본 140/160): 위는 도입부 pb 48 이 이미 있으므로 48 만,
   아래는 band-pad. 합계 ≈ 96px — 220px 이던 곳 */
.m_box > .wd-ceo { padding-top: 48px; padding-bottom: var(--bmt-band-pad); }

/* --- S4. 유틸 마진 remap --------------------------------------------------- */
/* reset.css 의 .mt100 이 !important 라 같은 강도로 스케일에 태운다 */
.mt100 { margin-top: var(--bmt-block-gap) !important; }

/* ==========================================================================
   S5. 본문 축 정렬 — 컴포넌트 자체 컨테이너 제거/통일 (2026-08-26)
   --------------------------------------------------------------------------
   축 = max 1600 + gutter 74 (실질 1452). 컴포넌트들이 제각각 들고 있던
   max-width 1240/1440/1584 + padding 20/40 이 제목 축과 어긋난 들여쓰기를
   만들었다 (인증 그리드 등). 규칙:
     · .s_wrap 안 컴포넌트  → 자체 축 전부 제거 (부모가 gutter 제공)
     · 풀블리드 밴드의 inner → 표준 컨테이너(1600+gutter) 하나로 통일
   ========================================================================== */

/* s_wrap 안 — 자체 축 제거 */
.wd-cert { max-width: none; padding-left: 0; padding-right: 0; }
.wd-org__chart { max-width: none; }
.grid4.wd-company-strength { padding-left: 0; padding-right: 0; }

/* 풀블리드 밴드 inner — 표준 컨테이너 */
.wd-core-tech__inner,
.wd-strength__inner,
.wd-biz-cards__inner,
.wd-intro-cards__inner,
.wd-ceo__inner {
  width: 100%;
  max-width: var(--bmt-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bmt-gutter);
  padding-right: var(--bmt-gutter);
  box-sizing: border-box;
}
/* ceo 밴드의 자체 좌우 패딩 20px·본문 래퍼 1194px 는 표준 컨테이너와 중복 */
.m_box > .wd-ceo { padding-left: 0; padding-right: 0; }
.wd-ceo__post { max-width: none; }
/* biz-cards 밴드 좌우 패딩(모바일 20/PC 40)도 inner 가 대신한다 */
.wd-biz-cards { padding-left: 0; padding-right: 0; }
@media (min-width: 1024px) {
  .wd-biz-cards { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   S6. 메인 페이지(#m_area) 레거시 섹션 축 정렬 (2026-08-26)
   --------------------------------------------------------------------------
   m2(제품)·m5(뉴스)는 s_wrap 밖 fullpage 섹션이라 제목이 컨테이너 없이
   뷰포트 왼쪽에 붙고, 콘텐츠는 레거시 고정폭(1250/1137)·float 52%·
   absolute padding-left:1050px 로 흩어져 있었다. 전부 본문 축으로.
   ========================================================================== */

#m_area .m_tit_wrap {
  width: 100%;
  max-width: var(--bmt-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bmt-gutter);
  padding-right: var(--bmt-gutter);
  box-sizing: border-box;
}

.m2 .wrap {
  width: 100%;
  max-width: var(--bmt-container);
  margin: 0 auto;
  padding: 0 var(--bmt-gutter);
  box-sizing: border-box;
}

/* --- m5 뉴스: float/absolute 핵 해체 → 축 위 2컬럼 그리드 --- */
.m5,
.m5 .fp-tableCell { height: auto !important; }

/* fullpage 초기화 전(.m5 직속)과 후(.fp-tableCell) 모두 같은 그리드 */
.m5,
.m5 .fp-tableCell {
  display: grid;
  grid-template-columns: 1fr 480px;
  column-gap: 64px;
  width: 100%;
  max-width: var(--bmt-container);
  margin: 0 auto;
  padding: var(--bmt-band-pad) var(--bmt-gutter);
  box-sizing: border-box;
  align-items: start;
}
/* 초기화 후엔 .m5 가 tableCell 하나만 담는다 — 바깥 그리드는 1칸으로 풀어준다 */
.m5 { display: block; padding: 0; }

#m_area .m5 .m_tit_wrap {
  grid-column: 1 / -1;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.m5 .main-common-box {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  grid-column: 1;
}

.m5 .video {
  position: static;
  padding-left: 0;
  grid-column: 2;
  grid-row: 2;
}
.m5 .video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--bmt-radius);
}

@media (max-width: 900px) {
  .m5 .fp-tableCell { grid-template-columns: 1fr; row-gap: 32px; }
  .m5 .main-common-box, .m5 .video { grid-column: 1; grid-row: auto; }
}

/* --- S7. 메인 히어로(#mv) 모바일 안전망 ------------------------------------
   viewport meta 활성화(2026-08-26) 후 PC 테마가 좁은 화면에서 실제 390px 로
   렌더된다. 레거시 텍스트는 고정 px(85/38px + 슬라이드2 인라인 55/30px)라
   화면을 덮는다. 인라인 스타일은 !important 로만 이긴다. */
@media (max-width: 800px) {
  #mv .txt_wrap,
  #mv .txt_wrap2,
  #mv .txt_wrap3 {
    width: 90% !important;
    left: 5% !important;
    margin-top: 0 !important;
    text-align: center;
  }
  #mv .txt_wrap .txt1 { font-size: 34px !important; line-height: 1.2 !important; margin-bottom: 14px !important; }
  #mv .txt_wrap .txt,
  #mv .txt_wrap3 .txt  { font-size: 16px !important; }
  #mv .txt_wrap2 .txt  { font-size: 15px !important; }
  #mv .txt_wrap2 .txt3 { font-size: 26px !important; line-height: 1.35 !important; padding-top: 6px !important; }
  #mv .txt_wrap2 .txt3 span { font-size: 15px !important; }
  #mv .txt_wrap3 .txt2 { font-size: 36px !important; margin: 10px 0 12px !important; }

  #mv .mv_pager_wrap { width: 100% !important; }
  #mv .mv_pager_con a { height: 44px !important; line-height: 44px !important; font-size: 12px !important;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; box-sizing: border-box; }
  #mv .wheel { display: none; }
}

/* --- S8. 가로 오버플로 차단 (2026-08-26 모바일 우측 여백) --------------------
   원인: 메인 m2 의 .product_wrap 이 1515px 고정폭(레거시 jScrollPane 가로
   스크롤 전제). jsp 가 못 가두면 body 가 1515px 로 늘어나 우측 흰 여백이
   생긴다. ① 모바일에선 제품 리스트를 2열 그리드로 풀고 ② 혹시 남는
   가로 넘침은 #wrapper 에서 잘라 최후 안전망을 친다 (body overflow 는
   fullpage.js 소유라 건드리지 않는다). */
#wrapper { overflow-x: clip; }

@media (max-width: 800px) {
  .m2 .scroll_wrap { position: static; }
  .m2 .scroll-pane,
  .m2 .jspContainer,
  .m2 .jspPane { width: 100% !important; height: auto !important; position: static !important; }
  .m2 .jspVerticalBar, .m2 .jspHorizontalBar { display: none !important; }

  .m2 .product_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    box-sizing: border-box;
  }
  .m2 .product_con { float: none; width: auto; padding: 0; }
  .m2 .product_wrap .thumb img { height: auto; }
  .m2 .product_wrap .subject { height: 42px; line-height: 42px; font-size: 13px; }
}

/* --- S9. 인사말 문단 간격 (2026-09-18) --------------------------------------
   인사말 전문이 2문단 → 8문단으로 늘었다(PPT ver1.3.2). archive 원본 gap 48px 은
   문단 2개 기준이라 8개에선 글이 끊겨 보인다. 제목→본문 간격(title-gap) 한 단으로 줄인다. */
.wd-ceo__info { gap: var(--bmt-title-gap); }
.wd-ceo__info .wd-ceo__eyebrow { margin: 0; }