@charset "utf-8";
/* ==========================================================================
   BMTECH — 품질인증 페이지 폴리시 (content/quality.php)
   --------------------------------------------------------------------------
   archive 클론이 아니라 레거시 섹션 2개(.full_img 생산라인 밴드 / .p_box
   포스터)의 구성 remap 이다 — bmtech-editorial.css 와 같은 성격.
   bmtech-base.css · bmtech-editorial.css 다음에 로드해 덮는다.

   고친 것:
     1. .full_img > .factory_head 에 컨테이너 폭이 없어 2000px 풀블리드를
        그대로 물려받았다 — 좌측 정렬 전환 후 일반 모니터(1440)에서 제목이
        화면 왼쪽 밖(-280px)에서 시작했다. min(1280px,100vw)로 잡는다
        (editorial.css §9 의 .full_img 자식 목록에 factory_head 가 빠져 있었다).
     2. 생산라인 밴드에 surface-alt 배경 + 섹션 리듬 부여, 캡션은
        번호(01/02, DM Sans) + 상단 헤어라인의 좌측 정렬 라벨로.
     3. 포스터: 레거시 브로슈어 톤(연녹 그라데이션·보라 제목 / 파랑 채움 +
        남색·노랑 캡션 박스) → 흰 카드 + 헤어라인 보더 + 토큰 타이포.
        컬러 채움은 이미지(스캔 콜라주)와 이중 소음이었다.
     4. 포스터 섹션 제목이 display 46px 에서 単어 중간 개행("생/산라인") —
        회사명 풀네임을 .wd-q-eyebrow 로 내리고 keep-all.
   ========================================================================== */

/* .wd-q-eyebrow 스타일은 bmtech-type.css 의 역할 E 가 소유한다 */

/* ==========================================================================
   1. 생산라인 밴드 (.full_img.wd-qfactory)
   ========================================================================== */

.wd-qfactory {
  padding: var(--bmt-sec-pb) 0;
  background-color: var(--bmt-surface-alt);
}

/* 풀블리드(2000px) 안의 헤더를 컨테이너 폭으로 — editorial.css §9 와 동일 수법 */
.wd-qfactory .factory_head {
  width: min(1600px, 100vw);
  margin: 0 auto var(--bmt-title-gap);
  padding: 0 var(--bmt-gutter);
  box-sizing: border-box;
  text-align: left;
}

.wd-qfactory .factory_head .caption {
  margin: 0;
  font-size: var(--bmt-fs-h2);
  line-height: var(--bmt-lh-heading);
  letter-spacing: var(--bmt-ls-heading);
  word-break: keep-all;
}

.wd-qfactory .factory_grid {
  counter-reset: wd-qf;
  gap: 40px;
}

.wd-qfactory .factory_grid_item img {
  border: 1px solid var(--bmt-line-soft);
  border-radius: var(--bmt-radius);
  box-sizing: border-box;
}

/* 캡션: 번호 + 상단 헤어라인, 좌측 정렬 */
.wd-qfactory .factory_grid_item p {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--bmt-line);
  text-align: left;
  color: var(--bmt-ink);
  font-size: var(--bmt-fs-base);
  font-weight: var(--bmt-fw-semi);
  letter-spacing: var(--bmt-ls-body);
}

.wd-qfactory .factory_grid_item p::before {
  counter-increment: wd-qf;
  content: "0" counter(wd-qf);
  flex-shrink: 0;
  color: var(--bmt-accent);
  font-family: var(--bmt-font-num);
  font-size: var(--bmt-fs-sm);
  font-weight: var(--bmt-fw-semi);
  letter-spacing: .04em;
}

/* ==========================================================================
   2. GE Certified Line 포스터 (.p_box.wd-qline)
   ========================================================================== */

/* 밴드 배경 다음이라 위 간격을 여기서 한 번만 센다 (.p_box 는 아래만 있다) */
.wd-qline { padding-top: var(--bmt-block-gap); }

.wd-qline .s_tit_wrap { margin-bottom: var(--bmt-title-gap); }

.wd-qline .s_tit_wrap .caption {
  margin-bottom: 0;
  max-width: none;
  word-break: keep-all;
}

.wd-qline .poster_row { gap: 40px; align-items: stretch; }

/* 카드: 컬러 채움 → 흰 카드 + 헤어라인 */
.wd-qline .poster,
.wd-qline .poster--a,
.wd-qline .poster--b {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: var(--bmt-surface);
  border: var(--bmt-border);
  border-radius: var(--bmt-radius-lg);
  box-sizing: border-box;
}

.wd-qline .poster_num {
  margin: 0 0 10px;
  color: var(--bmt-accent);
  font-family: var(--bmt-font-num);
  font-size: var(--bmt-fs-sm);
  font-weight: var(--bmt-fw-semi);
  letter-spacing: .04em;
}

.wd-qline .poster_tit,
.wd-qline .poster--a .poster_tit,
.wd-qline .poster--b .poster_tit {
  margin: 0 0 28px;
  text-align: left;
  color: var(--bmt-ink);
  font-size: var(--bmt-fs-h4);
  font-weight: var(--bmt-fw-bold);
  line-height: var(--bmt-lh-heading);
  letter-spacing: var(--bmt-ls-heading);
  word-break: keep-all;
}

.wd-qline .poster img {
  margin: auto 0 0;             /* 제목 줄 수가 달라도 이미지 상단을 맞춘다 */
  border: 1px solid var(--bmt-line-soft);
  border-radius: var(--bmt-radius);
  box-sizing: border-box;
}

/* 캡션: 남색 채움 박스 → 헤어라인 위 본문 텍스트 */
.wd-qline .poster_cap {
  margin: 18px 0 0;
  padding: 14px 0 0;
  background: transparent;
  border-top: 1px solid var(--bmt-line);
  text-align: left;
  color: var(--bmt-body);
  font-size: var(--bmt-fs-sm);
  line-height: var(--bmt-lh-body);
  letter-spacing: var(--bmt-ls-body);
}

.wd-qline .poster_cap b {
  color: var(--bmt-accent);
  font-weight: var(--bmt-fw-semi);
}

/* ===== Responsive ===== */
@media (max-width: 800px) {
  .wd-qfactory .factory_grid,
  .wd-qline .poster_row { flex-direction: column; }

  .wd-qline .poster,
  .wd-qline .poster--a,
  .wd-qline .poster--b { padding: 24px; }
}

/* 카드 1장 — 2026-09-30 고객 요청으로 02 카드 삭제.
   세로 카드 1장을 가운데 두면 양옆이 비어 허전하다(대표 검수) → 전폭 가로 카드:
   왼쪽 제목(역할 C) · 오른쪽 콜라주. 원본 콜라주가 500px 이라 이미지 폭은 560 에서 묶는다 */
.wd-qline .poster_row--single .poster {
  flex: 1 1 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 60px;
}
.wd-qline .poster_row--single .poster { background: var(--bmt-accent-tint); border-color: transparent; }
.wd-qline .poster_row--single .poster_txt { flex: 1 1 0; max-width: 560px; }
.wd-qline .poster_row--single .poster_tit { margin: 0; }
.wd-qline .poster_row--single .poster_sub { margin: var(--bmt-title-gap) 0 0; }
.wd-qline .poster_row--single .poster img {
  flex: 0 1 560px;
  width: 100%;
  max-width: 560px;
  margin: 0;
}
@media (max-width: 1080px) {
  .wd-qline .poster_row--single .poster { flex-direction: column; align-items: stretch; gap: 28px; padding: 40px; }
  .wd-qline .poster_row--single .poster_txt { max-width: none; }
  .wd-qline .poster_row--single .poster img { flex: none; max-width: none; }
}
@media (max-width: 800px) {
  .wd-qline .poster_row--single .poster { padding: 24px; }
}