@charset "utf-8";
/* ==========================================================================
   sub.css — 서브페이지 공통
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 서브페이지 GNB

   배너 사진이 헤더 뒤까지 깔리므로 헤더는 «투명»으로 둔다 (랜딩과 같다).
   스크롤해 배너를 지나면 common.css 의 .gnb.is-fixed 가 흰 배경을 씌운다.
   is-solid 는 더 이상 쓰지 않지만, 예전 산출물이 열릴 때를 대비해 규칙은 남긴다.
   -------------------------------------------------------------------------- */
.gnb.is-solid { background: var(--c-white); box-shadow: var(--shadow-gnb); }
.gnb.is-solid::before { opacity: 0; }
.gnb.is-solid .logo-white { display: none; }
.gnb.is-solid .logo-color { display: block; }
.gnb.is-solid .gnb-link { color: var(--c-gray-900); }
.gnb.is-solid .gnb-item:hover > .gnb-link,
.gnb.is-solid .gnb-item:focus-within > .gnb-link { color: var(--c-primary); }
.gnb.is-solid .gnb-toggle span,
.gnb.is-solid .gnb-toggle span::before,
.gnb.is-solid .gnb-toggle span::after { background: var(--c-gray-900); }

/* --------------------------------------------------------------------------
   2. 서브 비주얼
   -------------------------------------------------------------------------- */
/* 사진이 헤더까지 덮는다 (랜딩 히어로·삼원파워텍과 같은 구조).
   margin-top 으로 헤더 아래로 밀지 않고, 헤더 높이만큼 «키워서» 그 아래로 깐다.
   제목은 padding-top 으로 헤더를 피해 내려온다. */
.sub-visual {
  position: relative;
  height: calc(340px + var(--gnb-h));
  padding-top: var(--gnb-h);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--c-primary-deep);
  padding-block-end: 0;
}
.sub-visual-bg { position: absolute; inset: 0; }
/* <picture> 는 인라인이라 높이가 0 이다 — 블록으로 펴야 img 의 height:100% 가
   340px 배너 높이를 기준으로 잡힌다. 그래야 object-position 이 실제로 먹는다. */
.sub-visual-bg picture { display: block; width: 100%; height: 100%; }
.sub-visual-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 배너 오버레이 — 색을 입히지 않고 «어둡게만» 한다.
   남색을 깔면 사진마다 다른 색이 전부 파랗게 물들어 톤이 단조로워진다.
   왼쪽(제목이 놓이는 쪽)을 더 진하게 해 글자 가독성을 확보한다. */
.sub-visual-bg::after {
  content: ''; position: absolute; inset: 0;
  /* 제목이 놓이는 왼쪽만 충분히 어둡게(흰 글자 대비 4.5:1 확보),
     오른쪽은 옅게 두어 사진이 살아 있게 한다 */
  background: linear-gradient(90deg,
              rgba(12,14,18,.82) 0%, rgba(12,14,18,.68) 38%, rgba(12,14,18,.34) 100%);
}
.sub-visual .container { position: relative; z-index: 2; }

.sub-label {
  font-size: 14px; font-weight: 700; letter-spacing: .2em;
  color: var(--c-primary-light); margin-bottom: 14px;
}
.sub-title {
  font-size: 44px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.25; color: var(--c-white);
}
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.7);
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: '›'; opacity: .6; }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb [aria-current] { color: var(--c-white); font-weight: 500; }

@media (max-width: 1023px) { .sub-visual { height: 280px; } .sub-title { font-size: 34px; } }
@media (max-width: 767px)  { .sub-visual { height: 220px; } .sub-title { font-size: 26px; } .breadcrumb { font-size: 13px; margin-top: 14px; } }

/* --------------------------------------------------------------------------
   3. 서브 탭 (형제 페이지 이동)
   -------------------------------------------------------------------------- */
.sub-tab { border-bottom: 1px solid var(--c-gray-300); background: var(--c-white); }
.sub-tab ul { display: flex; }
.sub-tab li { flex: 1 1 0; }
.sub-tab a {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 12px; text-align: center;
  font-size: 16px; color: var(--c-gray-600);
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sub-tab a:hover { color: var(--c-primary); }
.sub-tab a[aria-current] { color: var(--c-primary); font-weight: 700; border-bottom-color: var(--c-primary); }

@media (max-width: 767px) {
  .sub-tab ul { overflow-x: auto; scrollbar-width: none; }
  .sub-tab ul::-webkit-scrollbar { display: none; }
  .sub-tab li { flex: none; }
  .sub-tab a { min-height: 52px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   4. 본문 공통
   -------------------------------------------------------------------------- */
.sub-body { padding-block: 100px; }
@media (max-width: 1023px) { .sub-body { padding-block: 70px; } }
@media (max-width: 767px)  { .sub-body { padding-block: 48px; } }

.sub-head { margin-bottom: 44px; }
.sub-head h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.35; color: var(--c-gray-900);
}
.sub-head h2 em { font-style: normal; color: var(--c-primary); }
.sub-head p { margin-top: 14px; }
@media (max-width: 767px) { .sub-head { margin-bottom: 28px; } .sub-head h2 { font-size: 23px; } }

/* 서브페이지 안에서 정보 단위가 바뀌는 모든 지점의 간격 — 한 곳에서만 정한다.
   앞 블록이 .sub-block 이든 인사말·설비요약·공정플로우·안내박스이든 값이 같다.
   새 블록이 생기면 셀렉터만 추가할 것. */
.sub-block + .sub-block,
.ceo-grid + .sub-block,
.spec-list + .sub-block,
.cert-list + .sub-block,
.flow-list + .sub-block,
.rep-pane + .sub-block,
.fac-grid + .sub-block,
.report-notice + .sub-block { margin-top: 140px; }
@media (max-width: 1023px) {
  .sub-block + .sub-block,
  .ceo-grid + .sub-block,
  .spec-list + .sub-block,
  .cert-list + .sub-block,
  .flow-list + .sub-block,
  .rep-pane + .sub-block,
  .fac-grid + .sub-block,
  .report-notice + .sub-block { margin-top: 100px; }
}
@media (max-width: 767px) {
  .sub-block + .sub-block,
  .ceo-grid + .sub-block,
  .spec-list + .sub-block,
  .cert-list + .sub-block,
  .flow-list + .sub-block,
  .rep-pane + .sub-block,
  .fac-grid + .sub-block,
  .report-notice + .sub-block { margin-top: 72px; }
}

/* --- 표 공통 --- */
.data-table { width: 100%; max-width: 100%; table-layout: auto; border-top: 2px solid var(--c-primary-deep); }
.data-table th, .data-table td {
  padding: 16px 18px; font-size: 15px;
  border-bottom: 1px solid var(--c-gray-300);
  vertical-align: middle;
}
.data-table thead th {
  background: var(--c-gray-50);
  font-weight: 700; color: var(--c-gray-900);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 700; color: var(--c-gray-900); }
.data-table td { color: var(--c-gray-600); }
.data-table .is-num { font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: var(--c-primary-tint); }

/* 모바일 카드 전환 */
@media (max-width: 767px) {
  .data-table.is-cardable thead { display: none; }
  /* th 를 빼먹으면 table-cell 로 남아 행 전체가 표 레이아웃으로 계산되고
     가로 오버플로가 발생한다 */
  .data-table.is-cardable,
  .data-table.is-cardable tbody,
  .data-table.is-cardable tr,
  .data-table.is-cardable th,
  .data-table.is-cardable td { display: block; width: 100%; }
  .data-table.is-cardable { border-top: 0; }
  .data-table.is-cardable tr {
    border: 1px solid var(--c-gray-300);
    border-radius: var(--radius-card);
    padding: 8px 14px; margin-bottom: 12px;
  }
  .data-table.is-cardable tr:hover { background: none; }
  .data-table.is-cardable td {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px dashed var(--c-gray-300); text-align: right;
  }
  .data-table.is-cardable tr td:last-child { border-bottom: 0; }

  /* 행 머리(규격)는 카드 제목으로 */
  .data-table.is-cardable tbody th {
    padding: 8px 0 12px; margin-bottom: 4px;
    font-size: 17px; font-weight: 700; text-align: left;
    color: var(--c-primary-deep);
    border-bottom: 1px solid var(--c-gray-300);
  }
  .data-table.is-cardable td::before {
    content: attr(data-label);
    flex: none; font-weight: 700; color: var(--c-gray-900); text-align: left;
  }
}

.table-note { margin-top: 14px; font-size: 14px; color: #9AA3AF; }

/* --------------------------------------------------------------------------
   5. CEO 인사말
   -------------------------------------------------------------------------- */
.ceo-grid { max-width: 1080px; margin-inline: auto; text-align: center; }
.ceo-quote {
  margin-bottom: 32px;
  font-size: 28px; font-weight: 700; line-height: 1.5;
  letter-spacing: -.03em; color: var(--c-gray-900);
}
.ceo-quote em { font-style: normal; color: var(--c-primary); }
.ceo-text p + p { margin-top: 20px; }
.ceo-sign {
  max-width: 320px; margin-inline: auto;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--c-gray-300);
  font-size: 16px; color: var(--c-gray-600);
}
.ceo-sign b { font-size: 21px; font-weight: 700; color: var(--c-gray-900); margin-left: 8px; letter-spacing: -.02em; }


@media (max-width: 1023px) { .ceo-quote { font-size: 23px; } }
/* 지정 줄바꿈은 폭이 좁으면 줄을 더 잘게 쪼개므로, 모바일에선 해제하고 자연 줄바꿈에 맡긴다 */
@media (max-width: 767px) {
  .ceo-text .br-pc { display: none; }
  /* 좁은 화면에선 인용문만 가운데, 본문·서명은 왼쪽 정렬 */
  .ceo-text p:not(.ceo-quote) { text-align: left; }
  .ceo-sign { max-width: none; margin-inline: 0; }
  .ceo-quote { font-size: 20px; margin-bottom: 22px; }
  .ceo-text p + p { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   6. 연혁 타임라인
   -------------------------------------------------------------------------- */
.timeline { position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 2px; margin-left: -1px; background: var(--c-gray-300);
}
.timeline li {
  position: relative; width: 50%; padding: 0 56px 44px 0;
  text-align: right;
}
.timeline li:nth-child(even) {
  margin-left: 50%; padding: 0 0 44px 56px; text-align: left;
}
.timeline li::after {
  content: ''; position: absolute; top: 8px; right: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-gray-300);
}
.timeline li:nth-child(even)::after { right: auto; left: -7px; }

.tl-date { font-size: 22px; font-weight: 700; color: var(--c-primary); letter-spacing: -.02em; line-height: 1.4; }
.tl-desc { margin-top: 6px; font-size: 16px; }
.tl-desc b { font-weight: 700; color: var(--c-gray-900); }

.timeline li.is-key::after { border-color: var(--c-primary); background: var(--c-primary); box-shadow: 0 0 0 5px rgba(40,112,184,.16); }
.timeline li.is-key .tl-date { font-size: 26px; color: var(--c-primary-deep); }

@media (max-width: 767px) {
  .timeline::before { left: 7px; margin-left: 0; }
  .timeline li,
  .timeline li:nth-child(even) {
    width: 100%; margin-left: 0; padding: 0 0 32px 34px; text-align: left;
  }
  .timeline li::after,
  .timeline li:nth-child(even)::after { left: 0; right: auto; }
  .tl-date { font-size: 18px; }
  .timeline li.is-key .tl-date { font-size: 20px; }
  .tl-desc { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   7. 설비 요약 카드
   -------------------------------------------------------------------------- */
/* 카드 개수가 바뀌어도 남는 폭 없이 꽉 채운다 (4개 → 4열, 2개 → 2열) */
.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.spec-card {
  background: var(--c-primary-tint);
  border-radius: var(--radius-card);
  padding: 32px 26px; text-align: center;
}
.spec-card dt { font-size: 16px; font-weight: 500; color: var(--c-gray-600); }
.spec-card dd { margin-top: 10px; }
.spec-num {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-size: 42px; font-weight: 700; color: var(--c-primary-deep);
  letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.spec-num em { font-style: normal; font-size: 19px; color: var(--c-primary); }
.spec-sub { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--c-gray-600); }

@media (max-width: 1023px) { .spec-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .spec-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .spec-card { padding: 22px 14px; } .spec-num { font-size: 30px; } .spec-card dt { font-size: 14px; } .spec-sub { font-size: 12px; } }

/* --------------------------------------------------------------------------
   8. 조직도
   대표이사(원형) → 가로 버스바 → 팀(채움 박스) → 하위 조직(세로 스택)
   -------------------------------------------------------------------------- */
.org { text-align: center; }
.org-box {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 12px 18px;
  border-radius: var(--radius-btn);
  font-size: 16px; font-weight: 500; line-height: 1.3;
  background: var(--c-white); border: 1px solid var(--c-gray-300);
  color: var(--c-gray-900);
}

/* --- 대표이사 : 원형 --- */
.org-top { display: flex; justify-content: center; }
.org-top .org-box {
  width: 148px; height: 148px; min-height: 0; padding: 0;
  border-radius: 50%;
  background: var(--c-white); border: 2px solid var(--c-primary);
  color: var(--c-primary-deep); font-weight: 700; font-size: 20px;
}

/* --- 줄기 · 가로 버스바 --- */
.org-line { width: 2px; height: 36px; margin: 0 auto; background: var(--c-primary-light); }
.org-row {
  display: flex; align-items: flex-start; gap: 20px;
  position: relative; justify-content: center;
}
.org-col {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column;
}
/* 가로 버스바 — 열마다 (자기 너비 + 좌우 gap 절반) 을 그려 이어붙인다.
   양 끝은 중앙에서 시작·끝나므로 첫 열 중심 ~ 마지막 열 중심이 정확히 연결된다. */
.org-col::after {
  content: ''; position: absolute; top: -18px; left: -10px; right: -10px;
  height: 2px; background: var(--c-primary-light);
}
.org-col:first-child::after { left: 50%; }
.org-col:last-child::after  { right: 50%; }
.org-col::before {                  /* 버스바 → 팀 박스 세로 연결 */
  content: ''; position: absolute; top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px; background: var(--c-primary-light);
}

/* --- 팀 : 채움 박스 --- */
.org-col > .org-box {
  background: var(--c-primary); border-color: var(--c-primary);
  color: var(--c-white); font-weight: 700;
}

/* --- 하위 조직 : 가로 배치 + 두 갈래 분기 ---
        [ 생산관리팀 ]
              │          .org-sub::before  (줄기)
          ┌───┴───┐      .org-box::after   (가로 가지, 좌우 절반씩)
          │       │      .org-box::before  (각 팀 위 세로 내림)
       [사출팀] [조립팀]                                            */
.org-sub {
  position: relative;
  display: flex; gap: 10px; padding-top: 34px;
}
.org-sub::before {                  /* 부모 박스 → 분기점 세로 줄기 */
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 20px;    /* 가로 가지(18px 지점)를 2px 넘겨 끊김 없이 잇는다 */
  background: var(--c-primary-light);
}
.org-sub .org-box {
  position: relative; flex: 1 1 0; min-width: 0;
  min-height: 46px; padding: 10px 8px;
  background: var(--c-primary-tint); border-color: var(--c-primary-light);
  color: var(--c-primary-deep);
}
.org-sub .org-box::before,
.org-sub .org-box::after { content: ''; position: absolute; background: var(--c-primary-light); }
.org-sub .org-box::before {         /* 각 팀 중앙으로 내려오는 세로선 */
  top: -16px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 16px;
}
.org-sub .org-box::after { top: -16px; height: 2px; }
/* gap 의 절반(5px)까지만 뻗으면 두 조각이 중앙에서 맞닿지 못해 흰 틈이 생긴다.
   1px 씩 더 넘겨 겹치게 한다. */
.org-sub .org-box:first-child::after { left: 50%; right: -6px; }
.org-sub .org-box:last-child::after  { right: 50%; left: -6px; }
.org-sub .org-box:only-child::after  { display: none; }

@media (max-width: 1023px) {
  .org-row { flex-wrap: wrap; gap: 18px 12px; }
  .org-col::after, .org-col::before { display: none; }
  .org-col { flex: 0 0 calc(33.333% - 8px); }   /* 태블릿 3열 */
  .org-top .org-box { width: 128px; height: 128px; font-size: 18px; }
  .org-line { height: 28px; }
}
@media (max-width: 767px) {
  .org-row { gap: 14px 10px; }
  .org-col { flex: 0 0 calc(50% - 5px); }
  .org-box { min-height: 48px; padding: 10px 12px; }
  .org-top .org-box { width: 112px; height: 112px; font-size: 17px; padding: 0; }
  .org-sub .org-box { min-height: 42px; }
}

/* --------------------------------------------------------------------------
   9. 경영 방침 카드 (CEO 인사말 하단)
   -------------------------------------------------------------------------- */
.policy-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.policy-card {
  padding: 34px 30px;
  border: 1px solid var(--c-gray-300);
  border-top: 3px solid var(--c-primary);
  border-radius: var(--radius-card);
  background: var(--c-white);
}
.policy-card h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: var(--c-gray-900); margin-bottom: 16px;
}
.policy-card li {
  position: relative; padding-left: 16px;
  font-size: 16px; line-height: 2;
}
.policy-card li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary-light);
}
@media (max-width: 1023px) { .policy-list { grid-template-columns: 1fr; gap: 14px; } .policy-card { padding: 26px 24px; } }

/* --------------------------------------------------------------------------
   10. 약관·방침 문서 (개인정보처리방침 등)
   -------------------------------------------------------------------------- */
.legal { max-width: 900px; margin-inline: auto; }

.legal-intro {
  padding: 24px 28px; margin-bottom: 44px;
  background: var(--c-primary-tint); border-radius: var(--radius-card);
  font-size: 15px; line-height: 1.85;
}
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(40,112,184,.2);
  font-size: 14px; color: var(--c-gray-600);
}
.legal-meta b { font-weight: 700; color: var(--c-primary-deep); }

.legal-toc {
  padding: 24px 28px; margin-bottom: 52px;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-card);
}
.legal-toc h2 { font-size: 15px; font-weight: 700; color: var(--c-gray-900); margin-bottom: 14px; }
.legal-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.legal-toc a { font-size: 15px; color: var(--c-gray-600); }
.legal-toc a:hover { color: var(--c-primary); text-decoration: underline; }

.legal-art { padding-top: 8px; }
.legal-art + .legal-art { margin-top: 48px; }
.legal-art > h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.4;
  color: var(--c-gray-900);
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--c-primary-deep);
}
.legal-art h3 { margin-top: 24px; font-size: 16px; font-weight: 700; color: var(--c-gray-900); }
.legal-art p { font-size: 16px; line-height: 1.9; }
.legal-art p + p { margin-top: 12px; }

.legal-list { margin-top: 12px; }
.legal-list > li {
  position: relative; padding-left: 24px;
  font-size: 16px; line-height: 1.9;
}
.legal-list > li + li { margin-top: 8px; }
.legal-list > li > .n {
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--c-primary);
}
.legal-list ul { margin-top: 6px; }
.legal-list ul > li {
  position: relative; padding-left: 14px; font-size: 15px; line-height: 1.85;
  color: var(--c-gray-600);
}
.legal-list ul > li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-gray-300);
}

.legal .data-table { margin-top: 16px; }
.legal .data-table th, .legal .data-table td { font-size: 15px; }

.legal-note {
  margin-top: 18px; padding: 16px 20px;
  background: var(--c-gray-50); border-left: 3px solid var(--c-primary-light);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  font-size: 15px; line-height: 1.8;
}

/* 회사 확정 전 플레이스홀더 */
.todo-mark {
  padding: 1px 7px; border-radius: 3px;
  background: #FFF3DC; color: #A9700A; font-weight: 700;
  font-size: .95em; white-space: nowrap;
}

@media (max-width: 767px) {
  .legal-intro { padding: 18px 20px; margin-bottom: 32px; font-size: 14px; }
  .legal-toc { padding: 18px 20px; margin-bottom: 36px; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-art + .legal-art { margin-top: 36px; }
  .legal-art > h2 { font-size: 18px; }
  .legal-art p, .legal-list > li { font-size: 15px; }
}


/* --------------------------------------------------------------------------
   12. 품질·ESG
   -------------------------------------------------------------------------- */

/* --- 인증 카드 --- */
/* 인증현황 — 인증서 이미지 한 장 + 제목. 한 줄에 «최대 3개» (서연이화 방식)

   서연이화(seoyoneh.com/company/awards)는 부트스트랩 `col-lg-4 col-6` 을 쓴다 —
   데스크톱 3열 · 그 아래 2열이고, 마지막 줄이 덜 차도 **왼쪽부터 채우고 그대로 둔다.**

   ── 가운데로 모으지 않는 이유 (2026-09-04 변경) ──────────────────────
   예전에는 카드가 2장일 때 `:has()` 로 2열 66% 폭으로 «가운데에 모았다». 그러면
   인증이 2종뿐인 지금 카드가 필요 이상으로 커지고, 세 번째 인증이 등록되는 순간
   레이아웃이 통째로 바뀐다. 칸 수를 3으로 고정하고 왼쪽부터 채우면 인증이 늘어도
   자리만 채워질 뿐 나머지는 그대로다. */
.cert-list {
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 카드 테두리는 두지 않는다 — 인증서 이미지와 제목만 놓인다 */
.cert-card {
  display: flex; flex-direction: column;
  text-align: center;
}
/* 인증서는 세로형(A4)이라 3:4 로 자리를 잡는다.
   contain 이라 이미지가 잘리지 않고 안에 온전히 들어간다. */
.cert-fig { margin: 0; padding: 0; }
.cert-fig img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: contain; object-position: center;
}
/* 이미지가 아직 없을 때만 자리를 알 수 있게 점선을 남긴다 */
.cert-fig.is-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; margin: 0; padding: 0; border-radius: 8px;
  border: 1px dashed var(--c-gray-300); background: var(--c-gray-50);
  font-size: 14px; color: #9AA3AF;
}
.cert-body { padding: 20px 4px 0; }
.cert-date {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--c-primary); margin-bottom: 8px;
}
.cert-card h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.4; color: var(--c-gray-900);
}
.cert-kind { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--c-gray-600); }
.cert-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #9AA3AF; }
.cert-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #9AA3AF; }

/* 인증 상세 표 — 9열이라 좁은 화면에서는 가로로 스크롤한다.
   페이지 전체가 옆으로 밀리지 않도록 «표만» 감싸서 스크롤시킨다. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cert-table { min-width: 1000px; }
.cert-table th, .cert-table td { white-space: nowrap; }
/* 설명은 길어질 수 있으니 이 칸만 줄바꿈을 허용한다 */
.cert-table td:nth-child(3) { white-space: normal; min-width: 200px; }
.cert-table tbody th { font-weight: 700; color: var(--c-gray-900); text-align: left; }

/* 모바일은 표가 «카드»로 바뀐다(.is-cardable) — 가로 스크롤과 nowrap 을 되돌린다 */
@media (max-width: 767px) {
  .table-scroll { overflow-x: visible; }
  .cert-table { min-width: 0; }
  .cert-table th, .cert-table td,
  .cert-table td:nth-child(3) { white-space: normal; min-width: 0; }
  /* 카드 제목이 되는 인증명은 왼쪽, 나머지는 라벨과 값이 좌우로 */
  .cert-table tbody th { color: var(--c-primary-deep); }
}

/* 태블릿 — 3열은 좁아서 인증서가 작아진다. 2열로 줄인다(서연이화도 같다). */
@media (max-width: 1023px) {
  .cert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* --- 스텝 플로우 --- */
.flow-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flow-list.is-compact { grid-template-columns: repeat(4, 1fr); }
.flow-step {
  position: relative; padding: 30px 26px;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-card);
  background: var(--c-white);
}
.flow-num {
  display: block; margin-bottom: 12px;
  font-size: 26px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--c-primary-light);
  font-variant-numeric: tabular-nums;
}
.flow-step h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  color: var(--c-gray-900); margin-bottom: 10px;
}
.flow-step p { font-size: 15px; line-height: 1.75; color: var(--c-gray-600); }

/* --- 방침 카드 보조 --- */
.policy-lead {
  margin: -8px 0 14px; padding-bottom: 14px;
  font-size: 15px; line-height: 1.7; color: var(--c-gray-600);
  border-bottom: 1px solid var(--c-gray-300);
}
.policy-card:has(ul:empty) .policy-lead { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.policy-en {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--c-primary);
}

/* --- 신문고 --- */
.report-notice {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px; margin-bottom: 48px;   /* 아래 폼과 충분히 띄운다 */
  border-radius: var(--radius-card);
  background: var(--c-primary-tint);
  color: var(--c-primary-deep);
}
.report-notice svg { width: 26px; height: 26px; flex: none; color: var(--c-primary); }
.report-notice p { font-size: 16px; line-height: 1.7; }
.report-notice b { font-weight: 700; }
.report-ch { border: 1px solid var(--c-gray-300); border-radius: var(--radius-card); }

@media (max-width: 1023px) {
  .flow-list, .flow-list.is-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* 모바일은 1열 — 인증서는 글자가 작아 2열로 두면 읽기 어렵다 */
  .cert-list { grid-template-columns: 1fr; gap: 16px; }
  .cert-card h3 { font-size: 18px; }
  .cert-body { padding: 16px 4px 0; }
  .flow-list, .flow-list.is-compact { grid-template-columns: 1fr; gap: 12px; }
  .flow-step { padding: 22px 20px; }
  .report-notice { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; margin-bottom: 32px; }
  .report-notice p { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   13. 공지사항 (고객지원)
   -------------------------------------------------------------------------- */
.notice-list { border-top: 2px solid var(--c-primary-deep); }
.notice-item { border-bottom: 1px solid var(--c-gray-300); }

.notice-q {
  display: flex; align-items: center; gap: 24px;
  width: 100%; padding: 26px 8px; text-align: left;
  transition: background-color .2s var(--ease);
}
.notice-q:hover { background: var(--c-gray-50); }

.notice-meta { display: flex; align-items: center; gap: 10px; flex: none; width: 150px; }
.notice-pin {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 12px; background: var(--c-primary); color: var(--c-white);
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.notice-meta time { font-size: 15px; color: #9AA3AF; font-variant-numeric: tabular-nums; }

.notice-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--c-gray-900);
}
.notice-q[aria-expanded="true"] .notice-title { color: var(--c-primary); font-weight: 700; }

.notice-arrow {
  flex: none; width: 10px; height: 10px; margin-right: 10px;
  border-right: 2px solid var(--c-gray-600);
  border-bottom: 2px solid var(--c-gray-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease), border-color .2s var(--ease);
}
.notice-q[aria-expanded="true"] .notice-arrow {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--c-primary);
}

.notice-a { background: var(--c-primary-tint); }
.notice-a-inner {
  padding: 28px 32px; font-size: 16px; line-height: 1.9; color: var(--c-gray-600);
}
.notice-empty { padding: 60px 0; text-align: center; color: #9AA3AF; }

@media (max-width: 767px) {
  .notice-q { flex-wrap: wrap; gap: 8px 12px; padding: 20px 4px; }
  .notice-meta { width: auto; order: 1; }
  .notice-arrow { order: 2; margin: 0 0 0 auto; }
  .notice-title { order: 3; flex: 0 0 100%; font-size: 16px; }
  .notice-a-inner { padding: 20px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   13-2. ESG · 안전보건 드롭다운 — «글 + 이미지 한 장»
   공지사항(.notice-*)과 같은 생김새·동작. 내용이 고정이라 빌드 시 HTML 로 박는다.
   -------------------------------------------------------------------------- */
.acc-list { border-top: 2px solid var(--c-primary-deep); }
.acc-item { border-bottom: 1px solid var(--c-gray-300); }

.acc-q {
  display: flex; align-items: center; gap: 24px;
  width: 100%; padding: 26px 8px; text-align: left;
  transition: background-color .2s var(--ease);
}
.acc-q:hover { background: var(--c-gray-50); }

.acc-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--c-gray-900);
}
.acc-title .policy-en {
  margin-left: 8px; font-size: 14px; font-weight: 500;
  letter-spacing: .04em; color: #9AA3AF;
}
.acc-q[aria-expanded="true"] .acc-title { color: var(--c-primary); }
.acc-q[aria-expanded="true"] .acc-title .policy-en { color: var(--c-primary); opacity: .7; }

.acc-arrow {
  flex: none; width: 10px; height: 10px; margin-right: 10px;
  border-right: 2px solid var(--c-gray-600);
  border-bottom: 2px solid var(--c-gray-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease), border-color .2s var(--ease);
}
.acc-q[aria-expanded="true"] .acc-arrow {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--c-primary);
}

.acc-a { background: var(--c-primary-tint); }
/* 글은 왼쪽, 이미지 한 장은 오른쪽. 좁아지면 이미지가 아래로 내려간다. */
.acc-a-inner {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 32px; align-items: start;
  padding: 32px;
}
.acc-lead {
  margin-bottom: 16px;
  font-size: 17px; font-weight: 500; line-height: 1.7; color: var(--c-gray-900);
}
.acc-text ul { display: grid; gap: 10px; }
.acc-text li {
  position: relative; padding-left: 18px;
  font-size: 16px; line-height: 1.75; color: var(--c-gray-600);
}
.acc-text li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary);
}

/* 사진을 누르면 확대 모달이 뜬다 — 버튼이지만 사진처럼 보이게 한다 */
.acc-fig { margin: 0; }
.acc-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; border-radius: 10px; overflow: hidden;
}
.acc-zoom img { transition: transform .3s var(--ease); }
.acc-zoom:hover img { transform: scale(1.03); }
/* 돋보기 표시 — 누를 수 있다는 걸 알린다 */
.acc-zoom::after {
  content: ''; position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17,24,39,.55) center / 17px 17px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='white' stroke-width='2' stroke-linecap='round'%3E\
%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .2s var(--ease);
}
.acc-zoom:hover::after, .acc-zoom:focus-visible::after { opacity: 1; }
.acc-zoom:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.acc-fig img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; background: var(--c-white);
}
/* 이미지가 아직 없을 때 — 자리를 잡아두어 나중에 넣어도 배치가 흔들리지 않는다 */
/* 이미지가 아직 없을 때 — 자리를 잡아두고, 눌러서 확대 모달을 볼 수 있다 */
.acc-zoom.is-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; border-radius: 10px;
  border: 1px dashed var(--c-gray-300); background: var(--c-white);
  font-size: 14px; color: #9AA3AF;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.acc-zoom.is-empty:hover { border-color: var(--c-primary); color: var(--c-primary); }

@media (max-width: 1023px) {
  .acc-a-inner { grid-template-columns: 1fr; gap: 24px; }
  .acc-fig { max-width: 480px; }
}
@media (max-width: 767px) {
  .acc-q { padding: 20px 4px; gap: 12px; }
  .acc-title { font-size: 17px; }
  .acc-title .policy-en { display: block; margin: 4px 0 0; font-size: 12px; }
  .acc-a-inner { padding: 22px 20px; }
  .acc-lead { font-size: 16px; }
  .acc-text li { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   14. 제품소개 — 부품 위치 도면 + 부위별 페이지
   -------------------------------------------------------------------------- */
.prd-map {
  position: relative; margin-bottom: 48px;
  background: var(--c-white);
}
.prd-map img { display: block; width: 100%; height: auto; }

/* 도면 라벨 위에 얹는 링크 — 좌표가 % 라 화면 크기와 무관하게 맞는다 */
/* --- 제품 목록 --- */
.prd-panel-en {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--c-primary); margin-bottom: 10px;
}
/* 제품 목록 — 카드 한 장 = «사진 + 이름». 한 줄에 최대 4개. */
.prd-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* 카드 테두리는 두지 않는다 — 사진과 이름만 놓인다 */
.prd-card { background: none; }
/* 제품 사진 — 4:3. contain 이라 부품이 잘리지 않고 온전히 들어간다. */
.prd-fig { margin: 0; }
.prd-fig img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; object-position: center;
}
/* 사진을 누르면 확대 모달이 뜬다 — 버튼이지만 사진처럼 보이게 한다.
   ESG·안전보건의 .acc-zoom 과 같은 규칙이다(확대 커서·돋보기 표시·포커스 링).

   ── 돋보기를 «가운데» 에 두는 이유 ──────────────────────────────────
   제품 사진은 object-fit: contain 이라 부품이 잘리지 않는 대신 4:3 상자 안에
   좌우(또는 위아래) 여백이 남는다. .acc-zoom 처럼 우하단에 배지를 두면
   세로로 긴 부품에서 «사진 밖 흰 여백» 에 배지가 떠 버린다(실제로 그랬다).
   상자 가운데는 사진이 어떤 비율이든 반드시 사진 위이므로 여기에 둔다. */
.prd-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; border-radius: 8px; overflow: hidden;
}
.prd-zoom img { transition: transform .3s var(--ease); }
.prd-zoom:hover img { transform: scale(1.04); }
.prd-zoom::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(17,24,39,.62) center / 21px 21px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='white' stroke-width='2' stroke-linecap='round'%3E\
%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .2s var(--ease);
}
.prd-zoom:hover::after, .prd-zoom:focus-visible::after { opacity: 1; }
.prd-zoom:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
/* 손가락으로 쓰는 화면에는 hover 가 없다. 가운데 배지를 늘 띄우면 사진을 가리므로
   확대 효과만 끄고 배지는 두지 않는다 — 탭하면 그대로 확대된다. */
@media (hover: none) {
  .prd-zoom:hover img { transform: none; }
}
.prd-fig.is-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  /* 사방을 점선으로 — 아래만 그으면 «자리» 로 보이지 않는다.
     인증현황 자리표시(.cert-fig.is-empty)와 같은 규칙으로 맞춘다. */
  border: 1px dashed var(--c-gray-300); border-radius: 8px;
  background: var(--c-gray-50);
  font-size: 13px; color: #9AA3AF;
}
.prd-card h3 {
  padding: 16px 4px 0;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.5; text-align: center; color: var(--c-gray-900);
  word-break: keep-all;
}

.prd-todo {
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--c-gray-300); border-radius: var(--radius-card);
  background: var(--c-gray-50); color: var(--c-gray-600); line-height: 1.8;
}
.prd-todo-code {
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  color: var(--c-primary); margin-bottom: 12px;
}
.prd-todo a { color: var(--c-primary); font-weight: 500; text-decoration: underline; }

.prd-back { margin-top: 40px; font-size: 15px; text-align: center; }
.prd-back a { color: var(--c-gray-600); }
.prd-back a:hover { color: var(--c-primary); text-decoration: underline; }

@media (max-width: 1199px) {
  .prd-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .prd-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
  .prd-map { margin-bottom: 28px; }
  .prd-card h3 { padding: 12px 2px 0; font-size: 14px; }

  .prd-todo { padding: 40px 18px; }
}


/* --------------------------------------------------------------------------
   설비 현황 — 공장 내부 / 설비 사진 2단 (2026-09-10)

   왼쪽 사진 «아래» 에 기타설비를 붙인다. 사출성형기·취출로봇 숫자 카드는
   두지 않는다 — 바로 아래 «보유 현황» 표가 규격별 대수를 이미 보여 주므로
   같은 값을 두 곳에서 세면 표와 어긋날 위험만 생긴다.
   -------------------------------------------------------------------------- */
.fac-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: start;
}
.fac-col { display: flex; flex-direction: column; }

.fac-fig { margin: 0; }
.fac-fig picture,
.fac-fig .fac-ph {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  border-radius: var(--radius-card); overflow: hidden;
}
.fac-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fac-fig figcaption {
  /* CEO 인사말 본문과 같은 크기 — 값이 아니라 «같은 변수» 를 쓴다 */
  margin-top: 14px; font-size: var(--fs-body); font-weight: 700;
  color: var(--c-gray-900); letter-spacing: -.02em;
  text-align: center;              /* 사진 폭 기준 가운데 (2026-09-10) */
}

/* 사진을 아직 못 받은 자리 — 비어 보이되 «빠졌다» 는 게 분명해야 한다.
   푸터의 .is-todo 와 같은 뜻이며, 파일이 오면 <picture> 로 바꾼다.
   사진과 «같은 크기» 를 차지해야 나중에 갈아 끼워도 배치가 흔들리지 않는다. */
.fac-ph {
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: var(--c-gray-50);
  border: 1px dashed var(--c-gray-300);
  color: #9AA3AF; font-size: 15px; line-height: 1.6; text-align: center;
}
.fac-ph svg { width: 40px; height: 40px; stroke-width: 1.3; }

/* 기타설비 — 사진 «두 장 아래» 를 가로로 가득 채운다.
   좁은 칼럼 안에 두면 라벨과 수량이 붙어 답답하고, 반대로 넓은 폭에서
   세로로 쌓으면 라벨(왼쪽)과 수량(오른쪽)이 너무 멀어져 눈이 따라가기 힘들다.
   그래서 폭은 전체, 항목은 «가로 3칸» 으로 둔다. */
.fac-etc {
  grid-column: 1 / -1;
  margin-top: 20px;          /* .fac-grid 의 row-gap(32px) 에 더해진다 = 52px */
  padding: 26px 32px;
  background: var(--c-primary-tint); border-radius: var(--radius-card);
}
.fac-etc-title {
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(40,112,184,.18);
  font-size: var(--fs-body); font-weight: 700; color: var(--c-primary-deep);
  letter-spacing: -.02em;
}
/* 항목 수가 바뀌어도 한 줄에 고르게 — auto-fit 이 빈 칸을 접는다 */
.fac-etc-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fac-etc-row {
  display: flex; align-items: baseline; gap: 12px;
  padding-inline: 24px;
}
.fac-etc-row:first-child { padding-left: 0; }
/* 칸 사이를 가는 선으로 나눈다 — 넓은 폭에서 어디까지가 한 항목인지 보이게 */
.fac-etc-row + .fac-etc-row { border-left: 1px solid rgba(40,112,184,.18); }
.fac-etc-row dt { font-size: var(--fs-body); color: var(--c-gray-600); }
/* 수량(3대·1대·2대)만 본문보다 2px 크게 — 한눈에 숫자가 먼저 읽히도록 */
.fac-etc-row dd {
  font-size: calc(var(--fs-body) + 2px); font-weight: 700; color: var(--c-gray-900);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .fac-grid { gap: 24px; }
  .fac-etc { padding: 22px 24px; margin-top: 16px; }
  .fac-etc-row { padding-inline: 18px; }
}
@media (max-width: 767px) {
  /* 좁아지면 «공장 사진 → 설비 사진 → 기타설비» 순서로 쌓인다 */
  .fac-grid { grid-template-columns: 1fr; gap: 28px; }
  .fac-fig figcaption { margin-top: 10px; }
  .fac-etc { margin-top: 0; padding: 20px 22px; }
  .fac-etc-title { margin-bottom: 14px; padding-bottom: 12px; }
  /* 3칸으로 쪼개기엔 좁다 — 세로로 쌓고 수량을 오른쪽 끝에 붙인다 */
  .fac-etc-rows { grid-template-columns: 1fr; }
  .fac-etc-row {
    justify-content: space-between; padding: 0; border-left: 0;
  }
  .fac-etc-row + .fac-etc-row {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(40,112,184,.15);
  }
}