@charset "utf-8";
/* ==========================================================================
   BMTECH — 에디토리얼 레이어 (구성 remap)
   --------------------------------------------------------------------------
   bmtech-base.css 다음, 제일 마지막에 로드된다.

   1단계(tokens+base)는 '값'을 통일했다. 색·타이포·여백은 맞았는데
   레퍼런스(carbonomy.net)와 거리가 남은 이유는 값이 아니라 '구성'이었다.

     레퍼런스                        기존 비엠텍
     ─────────────────────────────  ──────────────────
     좌측 정렬 + 105px 들여쓰기      전부 중앙 정렬
     본문 컬럼 525px (뷰포트 36%)    1280px 꽉 채움
     섹션 제목 46.5px                34px
     섹션 여백 210/90                140/100
     표는 헤어라인 구분선            파란 채움 헤더
     풀블리드 다크 밴드으로 마감      전부 흰 배경

   이 파일은 그 구성 차이만 좁힌다. 마크업은 건드리지 않는다
   (플로팅 CTA 하나만 예외 — inc/bmtech-cta.php).

   되돌리려면 head.sub.php 의 이 파일 link 한 줄만 지우면 1단계 상태로 돌아간다.
   ========================================================================== */

:root {
  /* 여백을 레퍼런스 쪽으로 더 민다 (기존 140/100 → 190/120) */
  --bmt-sec-pt:    190px;
  --bmt-sec-pb:    120px;
  --bmt-block-gap: 130px;
  --bmt-title-gap: 44px;

  /* 본문 컬럼 상한 — 카보노미 실측 525px */
  --bmt-measure:   560px;
  /* 레퍼런스의 좌측 들여쓰기 105px 대비, 1280 컨테이너에서 자연히 80px 확보된다 */
}

@media (max-width: 1080px) {
  :root {
    --bmt-sec-pt:    110px;
    --bmt-sec-pb:    72px;
    --bmt-block-gap: 80px;
    --bmt-title-gap: 28px;
  }
}

/* ==========================================================================
   1. 정렬 — 중앙 → 좌측
   이 한 가지가 레퍼런스와의 인상 차이 대부분을 만든다.
   ========================================================================== */

.m_tit_wrap,
.s_tit_wrap,
.factory_head,
.ge_collab_head,
.feat_head,
.rnd_stat_head {
  text-align: left;
}

.tit { text-align: left; }

/* 제목을 레퍼런스 크기로. 34px → 46px */
.s_tit_wrap .caption,
.m_tit_wrap .caption,
.tit {
  font-size: var(--bmt-fs-display);
  line-height: var(--bmt-lh-display);
  max-width: 22ch;
  text-wrap: balance;
}

/* 리드 문단은 좁은 컬럼으로. 꽉 찬 1280px 본문이 '조밀한 제조사 사이트' 인상의 실체였다 */
.m_tit_wrap .txt,
.s_tit_wrap .txt,
.factory_head .txt {
  max-width: var(--bmt-measure);
  margin-left: 0;
  margin-right: 0;
}

/* 제목과 리드 사이를 띄운다 */
.m_tit_wrap .caption,
.s_tit_wrap .caption { margin-bottom: 20px; }

/* 중앙 정렬을 유지해야 자연스러운 곳은 되돌린다 —
   격자 셀 안의 짧은 라벨, 원형 요소, 표 안. */
.feat_icon_cell,
.step_flow_item,
.feat_circle,
.strategy_flow_step,
.market_panel_head,
.poster_tit,
.jr_card_head,
.jr_card_caption,
.jr_uni_item,
.godm_grid_item,
.tip_item,
.factory_grid_item p,
.roadmap_pill,
.market_oval,
.collab_side,
.collab_circle,
.beauluv_intro,
.ge_collab_body { text-align: center; }

/* ==========================================================================
   2. 구분선 — 세로 막대 → 좌측 헤어라인
   레거시 .s_bar 는 중앙에 96px 세로선을 긋는다. 좌측 정렬 구성에선 맞지 않는다.
   ========================================================================== */

.s_bar { height: auto; margin: 0 0 var(--bmt-block-gap); }
.s_bar:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--bmt-line);
}

/* ==========================================================================
   3. 표 — 채움 헤더 → 헤어라인
   카보노미에는 색으로 채운 표 헤더가 없다. 굵은 상단선과 1px 구분선으로만 센다.
   ========================================================================== */

.tb2 { border-top: 2px solid var(--bmt-ink); }
.tb2 thead th {
  background-color: transparent;
  border-left: 0;
  border-bottom: 1px solid var(--bmt-ink);
  padding-top: 16px;
  padding-bottom: 16px;
}
.tb2 thead th p {
  color: var(--bmt-ink);
  font-size: var(--bmt-fs-sm);
  font-weight: var(--bmt-fw-bold);
  letter-spacing: .06em;
}
/* 구분선은 th·td 에 같이 건다 — td 에만 걸면 라벨 칸 아래가 끊겨 보인다 */
.tb2 tbody th   { background-color: transparent; text-align: left; padding-left: 0;
                  padding-top: 24px; padding-bottom: 24px;
                  border-bottom: 1px solid var(--bmt-line-soft); }
.tb2 tbody th p { color: var(--bmt-ink); font-weight: var(--bmt-fw-semi); }
.tb2 tbody td   { border: 0; border-bottom: 1px solid var(--bmt-line-soft);
                  padding-top: 24px; padding-bottom: 24px; }
.tb2 tbody tr   { border-bottom: 0; }

.s_tb table { border: 0; border-top: 2px solid var(--bmt-ink); }
.s_tb th,
.s_tb th:nth-child(even) {
  background-color: transparent;
  border-right: 0;
  border-bottom: 1px solid var(--bmt-ink);
}
.s_tb th p { color: var(--bmt-ink); font-size: var(--bmt-fs-sm); font-weight: var(--bmt-fw-bold);
             letter-spacing: .06em; }
.s_tb td   { border-right: 0; border-bottom: 1px solid var(--bmt-line-soft); }

/* ==========================================================================
   4. 브레드크럼 — 조용하게
   카보노미 내비는 11.25px DM Sans 600. 페이지 상단이 시끄러우면 히어로가 죽는다.
   ========================================================================== */

.route_wrap { background-color: transparent; border-top: 0; }
.route_con .route {
  font-family: var(--bmt-font-num);
  font-size: 12px;
  font-weight: var(--bmt-fw-semi);
  letter-spacing: .04em;
  color: var(--bmt-muted);
}
.route_wrap .home a,
.route_con .route { border-color: var(--bmt-line-soft); }

/* ==========================================================================
   5. 서브 탭 — 채움 → 밑줄
   ========================================================================== */

.s_tab .dep1_wrap { border-bottom: 1px solid var(--bmt-line); }
.s_tab .dep1 {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--bmt-muted);
  font-weight: var(--bmt-fw-semi);
  position: relative;
}
.s_tab .dep1_con.active .dep1,
.s_tab .dep1_con:hover .dep1 {
  background-color: transparent;
  border-color: transparent;
  color: var(--bmt-ink);
}
.s_tab .dep1_con.active .dep1:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background-color: var(--bmt-accent);
}

/* ==========================================================================
   7. 상시 CTA — 플로팅 UI 클론으로 교체됨
   마크업은 inc/bmtech-cta.php, 스타일은 bmtech-floating.css
   (a2_ucube_floating-ui_expand-pill-inquiry-top 클론)
   ========================================================================== */

/* ==========================================================================
   8. 히어로 — 텍스트를 아래로 내려 사진이 숨 쉬게
   ========================================================================== */

.sv .txt_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 64px;
}
.sv .txt_wrap .caption,
.sv .txt_wrap .txt1 { margin-bottom: 10px; }
.sv .txt_wrap .txt { max-width: var(--bmt-measure); }


/* ==========================================================================
   9. 좌측 정렬 후 드러난 것들
   레거시가 중앙 정렬이라 가려져 있던 문제들. 정렬을 바꾸니 노출됐다.
   ========================================================================== */

/* .ad_num_wrap 은 .s_wrap 밖에 있어 컨테이너가 없다.
   중앙 정렬일 땐 티가 안 났지만 좌측 정렬에선 뷰포트 왼쪽 끝에 붙는다.
   법정 고지문이라 본문 흐름과 분리하는 게 맞으므로 중앙 정렬을 유지하고 폭만 준다. */
.ad_num_wrap {
  width: 100%;
  max-width: var(--bmt-container);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--bmt-gutter);
  box-sizing: border-box;
  text-align: center;
}
.ad_num_wrap .caption { max-width: none; margin-left: auto; margin-right: auto; }
.ad_num_wrap .txt     { max-width: none; }

/* 표는 컨테이너를 꽉 채우고 좌측 기준으로 선다 (기존 1140/950px 중앙 배치) */
.tb2, .s_tb { width: 100%; margin-left: 0; margin-right: 0; }

/* margin:0 auto 로 중앙에 놓이던 내부 블록들 — 제목이 좌측이면 같이 좌측이어야 한다 */
.rnd_stat            { text-align: left; }
.rnd_stat_bars,
.rnd_stat_links      { margin-left: 0; margin-right: 0; }
.rnd_stat_note       { text-align: left; }

/* .full_img 는 left:50%/width:2000px 짜리 풀블리드 블록이다. 그 안의 제목을
   좌측 정렬로 바꾸는 순간 글이 화면 왼쪽 바깥(-280px 부근)에서 시작한다.
   가운데 정렬이던 시절엔 우연히 맞아 보였을 뿐이다. 컨테이너 폭으로 잡아준다. */
.full_img > .s_tit_wrap,
.full_img > .m_tit_wrap,
.full_img > .ge_collab_head,
.full_img > .ge_collab_body {
  /* --bmt-container 는 1320px 이하에서 100% 가 된다 — 그러면 부모의 2000px 을
     그대로 물려받아 다시 잘린다. 뷰포트 폭으로 직접 잡는다. */
  width: min(1600px, 100vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bmt-gutter);
  padding-right: var(--bmt-gutter);
  box-sizing: border-box;
}

/* ==========================================================================
   9. 서브페이지 도입부 — 페이지 헤드 (.page_head)
   --------------------------------------------------------------------------
   원본: webdot-blueprints/03_about/ceo-message/_code/
         a1_hmst_ceo-message_fullwidth-photo (HD현대마린솔루션테크 인사말)

   서브페이지마다 첫 타이틀 블록의 생김새가 제각각이었다 — 어디는 설명문이
   있고 어디는 없고, 굵기·크기·여백이 페이지별로 달랐다. 이 블록은 그
   도입부 하나만 원본 헤더 구성으로 통일한다.

     .eyebrow  ← inc/nav.php 의 $ntit1 (1depth 카테고리). 파란 라벨
     .caption  ← 페이지 제목. 최대 64px 까지 커지는 clamp
     .txt      ← 설명문 (없는 페이지도 있다 — 그대로 비운다)

   좌측 정렬이라 위 1번 규칙(본문 좌측)과 어긋나지 않는다.
   제목이 64px 까지 커지는 만큼 설명문은 짧아야 한다 — 각 페이지 .txt 를
   2문장 이내로 줄여 뒀다. 새 페이지를 만들 때도 같은 분량을 지킨다.

   원본 클래스 매핑: .wd-ceo__header→.page_head / __eyebrow→.eyebrow
                    / __title→.caption / __message→.txt
   ========================================================================== */

.m_tit_wrap.page_head,
.s_tit_wrap.page_head {
  width: 100%;
  margin: 0;
  padding: 150px var(--bmt-gutter) 80px;
  box-sizing: border-box;
  text-align: left;
  word-break: keep-all;
}

/* 원본은 헤더 아래가 바로 사진이라 80px 이 그 간격이다.
   여기선 뒤따르는 .s_bar 가 또 130px 을 밀어 간격이 두 번 세진다 → 한 번만 센다.
   헤어라인도 긋지 않는다 — margin 0 이라 뒤따르는 카드·이미지의 상단 보더와
   겹쳐 테두리가 깨진 것처럼 보인다 (SONP 카드·제품 목록·GE_ODM 사진). */
.page_head + .s_bar { margin-bottom: 0; }
.page_head + .s_bar:before { display: none; }

/* --- Eyebrow: 파란 라벨 --- */
.page_head .eyebrow {
  margin: 0 0 28px;
  color: var(--bmt-accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Title --- */
.m_tit_wrap.page_head .caption,
.s_tit_wrap.page_head .caption {
  margin: 0 0 28px;
  max-width: none;
  color: var(--bmt-ink);
  font-size: clamp(40px, 4.15vw, 64px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.045em;
}

/* --- Description --- */
.m_tit_wrap.page_head .txt,
.s_tit_wrap.page_head .txt {
  margin: 0;
  max-width: 640px;
  color: var(--bmt-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

/* .caption 바깥에 떠 있는 강조문(FROZENN NEO) */
.page_head > .blue { color: var(--bmt-accent); }

@media (max-width: 1024px) {
  .m_tit_wrap.page_head,
  .s_tit_wrap.page_head { padding: 92px var(--bmt-gutter) 56px; }
}

@media (max-width: 640px) {
  .m_tit_wrap.page_head,
  .s_tit_wrap.page_head { padding: 72px var(--bmt-gutter) 44px; }

  .page_head .eyebrow { margin-bottom: 20px; font-size: 15px; }

  .m_tit_wrap.page_head .caption,
  .s_tit_wrap.page_head .caption { font-size: 34px; line-height: 1.25; }

  .m_tit_wrap.page_head .txt,
  .s_tit_wrap.page_head .txt { font-size: 16px; line-height: 1.72; }
}

/* 헤더 하나에 페이지 내용이 통째로 들어 있던 곳(CT·Mammography·X-Ray·FROZENN NEO)의
   상세 서술. 리드는 .page_head 에 두 문장으로 남기고 나머지는 여기로 내렸다 —
   제목이 64px 로 커진 만큼 헤더에 문단이 쌓이면 화면이 무너진다. */
.page_body {
  max-width: 720px;
  margin: 0 0 var(--bmt-block-gap);
  padding: 0 var(--bmt-gutter);
  box-sizing: border-box;
  word-break: keep-all;
}
.page_body p {
  margin: 0 0 18px;
  color: var(--bmt-body);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.02em;
}
.page_body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. 풀블리드 폭 — 2000px 고정 → 100vw
   레거시 .full_img 는 width:2000px 고정이라 뷰포트가 2000px 을 넘는 와이드
   모니터에서 배경이 중간에 끊긴다 (2026-08-26 대표 지적, 전 서브페이지 30곳).
   wd-ceo 가 이미 쓰는 100vw 방식으로 통일한다. §9 의 자식 컨테이너 픽스
   (min(1280px,100vw))는 그대로 유효하다.
   ========================================================================== */
.full_img {
  width: 100vw;
  margin: 0 0 0 -50vw;
}