/* css/pages/sitemap.css — 사이트맵 페이지 전용
 *
 * 원본(PASS_CODE=76)의 본문은 메뉴 항목을 전부 이미지로 찍어 놓은 구조였다.
 * 그런데 그 이미지들(sitemap_*.jpg · sub_sitemap.jpg · subleft_site.jpg ·
 * subleft_s1.jpg / subleft_s1_on.jpg)이 원본 서버에 존재하지 않아
 * 정답 스크린샷(_shots/…-2-{d,m}.png)에도 전부 엑박으로 찍혀 있다
 * (미러 자산 583건 어디에도 없음 = 원본 시점부터 404. 그래서 본문 텍스트 LEN 도 548).
 *
 * 원본 테이블 구조·행 배치·간격은 그대로 두고, 죽은 img 자리만 그 img 의
 * alt 문자열을 텍스트로 세운다(R2 엑박 금지 · R1 단일 텍스트 노드 리프).
 * 타이포는 헤더 GNB 실측(nanumR / 17px / 700)과 원본 카테고리·항목 위계를 따른다.
 */

/* 본문 좌측 서브 내비 — 원본 subleft_site.jpg(제목) + subleft_s1.jpg(항목) 대체 */
/* 원본 실측: 파란 칩이 아니라 16px 텍스트 한 줄(밴드 y=311..342). */
.subleft-title {
  width: 220px;
  margin: 0;
  padding: 0;
  background: none;
  color: #333;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -0.02em;
}

.subleft-link {
  display: block;
  width: 220px;
  box-sizing: border-box;
  padding: 0;
  background: none;
  color: #535353;
  font-size: 13px;
  line-height: 16px;
  text-decoration: none;
}

.subleft-link:hover,
.subleft-link.is-current {
  color: #0053c3;
  font-weight: 700;
}

/* 좌측 서브 내비 customer.jpg 셀 — quirks strut 제거(GLOBAL r4 #LAYER_MENU 와 동일 원인).
 * 원본은 doctype 이 없어 BackCompat 이라 이미지 전용 셀의 라인박스가 죽는다:
 * 행 높이 = img 높이 157. 표준모드인 우리 산출물은 디센더 4px 가 붙어 161 이 되고
 * 표 전체가 204 → 208 로 부푼다(16+16+15+157 = 204 가 원본 실측).
 * line-height:0 이면 img 가 inline 을 유지한 채 157 로 떨어진다
 * (display:block 은 box 차원 계약을 깨므로 금지 — r4 실증). */
.sitemap-aside > table > tbody > tr > td:has(> img) {
  line-height: 0;
}

/* 본문 제목 — 원본도 엑박 alt 한 줄(밴드 h=15). 밑줄·24px 대제목 없음. */
.sub-heading {
  margin: 0;
  padding: 0;
  border: 0;
  color: #333;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 대메뉴 — 정답샷 픽셀 실측 반영: 행 피치 16px · 밴드 15px · 칩 배경 없음(R16). */
.sitemap-cat {
  width: 160px;
  margin: 0;
  padding: 0;
  background: none;
  color: #333;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -0.02em;
}

/* 하위 항목 — 원본 sitemap_N_M.jpg 대체 */
.sitemap-item {
  display: block;
  width: 160px;
  box-sizing: border-box;
  padding: 0;
  color: #535353;
  font-size: 13px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.sitemap-item:hover {
  color: #0053c3;
  text-decoration: underline;
}

/* 반응형(R3) — 원본은 1078px 고정 테이블 4열이라 좁은 화면에서 넘친다.
 * 셀을 블록으로 풀어 세로로 흘리고, 스페이서 셀은 접는다. */
@media screen and (max-width: 1080px) {
  .sitemap-grid,
  .sitemap-grid > tbody,
  .sitemap-grid > tbody > tr,
  .sitemap-grid > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  .sitemap-grid > tbody > tr > td[width="50"],
  .sitemap-grid > tbody > tr > td[width="70"] {
    display: none;
  }

  .sitemap-grid > tbody > tr > td > table {
    width: 100%;
    margin-bottom: 28px;
  }

  /* 컬럼 사이 81px 스페이서 행은 세로 배치에선 과하다 */
  .sitemap-grid td[height="81"] {
    height: 28px !important;
  }

  .sitemap-cat,
  .sitemap-item {
    width: 100%;
  }
}

@media screen and (max-width: 860px) {
  /* 원본 본문 셸은 좌 220px + 본문 847px 2열 테이블이다.
   * 좁은 화면에선 두 열을 위아래로 흘려 본문이 눌리지 않게 한다. */
  .sitemap-shell,
  .sitemap-shell > tbody,
  .sitemap-shell > tbody > tr,
  .sitemap-shell > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  /* 열 사이 14px 스페이서 셀 */
  .sitemap-shell > tbody > tr > td[width="14"] {
    display: none;
  }

  .sitemap-shell > tbody > tr > td > table {
    width: 100%;
  }

  /* 좌측 서브 내비 220px 고정 해제 */
  .subleft-title,
  .subleft-link {
    width: 100%;
  }

  .sitemap-aside {
    margin-bottom: 30px;
  }
}