/* css/pages/company-history.css — 연혁(회사소개/회사연혁) 전용
 *
 * 원본 본문은 마크업 없이 단일 이미지(회사연혁.png, 904x867) 하나였다.
 * R1(텍스트=단일 텍스트 노드 리프)에 따라 표·연혁 행을 실 요소로 재저작하며,
 * 아래 수치는 그 원본 이미지에서 픽셀 실측한 값이다(눈대중 아님, R16).
 *
 *   표 좌측 시작 x=58 · 우측 끝 x=838      → 폭 780px, 좌여백 58px
 *   라벨 열 x=58~163                        → 폭 105px
 *   라벨 배경 rgb(224,240,237)               = #e0f0ed
 *   바깥 테두리 rgb(83,85,88) 2px            = #535558
 *   행 구분선 rgb(124,128,133) 1px           = #7c8085
 *   행 높이 기본 30px(라인 y 간격 92→123→153→183 …)
 *
 * 정답샷(-4-d.png)에서도 표는 x=438~1218 = 781px 로 이미지 고유폭 그대로다
 * (축소 렌더 아님). 다만 이미지(904px)가 td(847px)보다 넓어 좌측 여백이
 * 실제로는 58px 이 아니라 25px 로 나타난다 — 정답샷 기준으로 맞춘다.
 */

/* 상·하 여백은 정답샷 실측: center top(311) → 프로필 표 상단선(373) = 62px,
 * 연혁 표 하단선(1137) → center bottom(1178) = 41px. */
.ch-doc {
  font-family: "Apple SD Gothic Neo",'nanumR',"Nanum Gothic",Malgun Gothic,"맑은 고딕",Dotum,"돋움", sans-serif;
  color: #000;
  padding-left: 25px;
  padding-top: 26px;
  padding-bottom: 41px;
}

/* 원본 본문 이미지(904px)는 자기 td(width="847")보다 넓어 셀을 밀어냈고,
 * 그 결과 바깥 표가 width="1078" 선언을 넘어 1128.8px 로 렌더된다
 * (parity rect_src TABLE = x 155.6 / w 1128.8). 재저작한 우리 본문은
 * 선언폭을 그대로 지켜 1078px 에 갇혀 있었다(-50.8px, x +25.4px).
 * 원본과 같은 셀 넘침을 만들어 바깥 표 폭·중앙정렬 위치를 되돌린다. */
@media screen and (min-width: 1081px) {
  .ch-doc {
    box-sizing: border-box;
    width: 894px; /* 실측: 이 값에서 TABLE 1118.8 / x 160.6 (원본 1128.8 / 155.6) */
  }
}

/* --- 섹션 제목 (회사 소개 / 회사 연혁) ------------------------------- */
/* 실측(정답샷): 프로필 표 하단선 y=568 → 연혁 표 상단선 y=685 = 117px.
 * 이 구간은 [섹션 간격 + 제목 높이 + 제목 하단 여백] 의 합이다. */
.ch-sect + .ch-sect {
  margin-top: 74px;
}

.ch-head {
  margin: 0 0 10px;
  padding: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.ch-head-ko {
  color: #000;
  letter-spacing: 1px;
}

/* 원본 이미지의 장식 링 글리프(의미 없음 — 순수 장식) */
.ch-head-deco {
  display: inline-block;
  width: 33px;
  height: 32px;
  vertical-align: baseline;
}

.ch-head-en {
  color: #8c9096; /* 실측 rgb(140,144,150) */
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* --- 표 공통 -------------------------------------------------------- */
.ch-table {
  width: 780px;
  max-width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #535558;
  border-bottom: 2px solid #535558;
  /* 실측 근거: 정답샷의 '사업분야' 행 텍스트 잉크 폭 = 443px(x 552~994).
   * 같은 문자열을 Malgun Gothic 으로 재보면 14px=386.2px / 16px=441.4px 라
   * 원본은 16px 이다(종전 14px 은 글리프 높이도 15px→11px 로 작았다).
   * 이 4px 차가 '소재지' 행 줄바꿈(원본 2줄) 유무와 전체 높이차를 만든다. */
  font-size: 16px;
  line-height: 20px;
  table-layout: fixed;
}

/* 행 높이: 정답샷 실측 구분선 간격 30px(프로필 373→404→434→464,
 * 연혁 685→715→746→776 …). font-size 16px·line-height 20px 기준으로
 * 상하 padding 4.5px + 보더 1px = 30px. */
/* ⚠ font-size 는 반드시 th/td 에 직접 준다 — 반입 원본 css/front.css 의
 * 'p, br, body, td, table, tr, …{font-size:9pt}'(=12px)가 요소 셀렉터라
 * .ch-table 에만 주면 각 셀이 9pt 로 되돌아간다(실측 확인). */
.ch-table th,
.ch-table td {
  border-bottom: 1px solid #7c8085;
  padding: 4.5px 10px;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
  word-break: keep-all;
}

.ch-table tr:last-child > th,
.ch-table tr:last-child > td {
  border-bottom: 0;
}

.ch-table th {
  box-sizing: border-box;
  width: 105px;
  background: #e0f0ed;
  text-align: center;
  white-space: nowrap;
}

/* rowspan 라벨(2010.07)은 아래 행 경계선을 넘어 이어진다 */
.ch-table th.ch-rowspan {
  border-bottom: 0;
}

/* 연혁의 연월 라벨은 원본에서 좌측 정렬이다(실측 x=70 부터 글자 시작) */
.ch-history th {
  text-align: left;
  padding-left: 12px;
}

/* --- 반응형(R3) — 원본은 847px 고정 td 안의 780px 표 ----------------- */
@media screen and (max-width: 1080px) {
  .ch-doc {
    padding-left: 0;
  }

  .ch-table {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .ch-head {
    white-space: normal;
    font-size: 18px;
  }

  .ch-table {
    font-size: 13px;
  }

  .ch-table th,
  .ch-table td {
    padding: 6px 6px;
  }

  .ch-table th {
    width: 78px;
  }

  .ch-history th {
    padding-left: 6px;
  }
}

/* 좌측 서브메뉴 표: 인라인 이미지 디센더 4px 제거 (GLOBAL subimg.jpg 건과 동종)
 *
 * 원본 실측(_trees/…-4.src.json): 1행 TR/TD/IMG 가 전부 h=50 으로 동일 —
 * 셀 높이가 이미지 높이와 정확히 일치해 라인박스 갭이 없다.
 * 우리 렌더는 TD 54 vs IMG 50 (+4), customer.jpg 행도 TD 161 vs IMG 157 (+4)
 * → 표 합계 339 → 347 (+8).
 *
 * 갭이 이 두 행에만 있는 이유: 나머지 3행은 <a> 래퍼가 라인박스를 흡수한다.
 * 즉 <a> 없이 td 직속인 img 2장만 baseline 디센더를 셀에 남긴다.
 * 그래서 전역 img{display:block} 대신 해당 두 이미지로 셀렉터를 좁힌다
 * (헤더 아이콘·본문 인라인 이미지의 라인배치를 건드리지 않기 위함). */
center td > img[src$="/images/images/subleft_t1.jpg"],
center td > img[src$="/images/images/customer.jpg"] {
  display: block;
}
