/* h8-overlay.css — 신규 스타일 오버레이 (R5 v1)
 *
 * 원본 CSS(front.css · mainbanner.css · nv.css)는 그대로 반입했고 수정하지 않는다.
 * 여기에만 새로 쓴다 — 캐스케이드로 이긴다(head 정본이 이 파일을 항상 맨 뒤에 링크).
 *
 * 이 파일에 담기는 것:
 *   ① 접근성 skip-nav 표준(R23)
 *   ② 반응형 보강(R3) — 원본은 1080px 고정폭 테이블 레이아웃에 viewport 메타조차 없다
 *   ③ 원본 인라인 스크립트를 걷어내며 CSS 로 옮긴 전환(퀵메뉴 추종)
 *
 * ⚠ 원본 헤더는 고정도 스크롤 전환도 하지 않는다
 *   (analyze 실측: 전 페이지 headerScrolledNoChange=true · headerTop.position=relative).
 *   fixed/sticky 를 임의로 넣지 말 것 — R12② 대상이 아니다.
 */

/* ------------------------------------------------------------------
 * ① skip-nav (R23) — 평시 화면 밖, 포커스 시 좌상단 노출
 * ------------------------------------------------------------------ */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #0053c3;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.skip-nav:focus {
  left: 0;
}

/* ------------------------------------------------------------------
 * ③ 퀵메뉴 #LAYER_MENU — 원본 jQuery animate({top},300) 을 transition 으로
 *    (main.js 가 top 만 갱신한다)
 * ------------------------------------------------------------------ */
#LAYER_MENU {
  transition: top 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  #LAYER_MENU {
    transition: none;
  }
}

/* 퀵메뉴 높이 154 → 160 (전 18페이지 동일, GLOBAL-parity-r4)
 *
 * 원본은 doctype 이 없어 quirks(BackCompat) 로 렌더된다. quirks 는 이미지만 든
 * 셀에서 인라인 strut 를 죽이므로 img 높이가 곧 행 높이다 — 미러 실측:
 * 105 / 40 / 9 → 합 154(원본 rect 도 154).
 * 우리 산출물은 doctype 이 있어 표준모드라 같은 셀에 line box 가 서고,
 * 마지막 9px 이미지 행이 9 → 15(디센더 +6)로 부푼다: 105+40+15 = 160.
 * (105·40 행은 이미지가 line-height 보다 커서 표시가 안 날 뿐 같은 원인)
 *
 * 마크업(align="absmiddle") 은 원본 계약이라 건드리지 않고 CSS 로만 잡는다.
 * 4안 실측(1440, useinfo — 9px행 / #LAYER_MENU / img display):
 *   va:top/bottom → 15 / 160 / inline  ← 무효(⑧ 해법 C 가 여기선 안 듣는다.
 *     ⑧ 은 img baseline 정렬이 원인이지만 여기 디센더는 셀의 라인박스 strut 발)
 *   display:block → 9 / 154 / block    ← 기하 O 이나 원본 computed 는 inline
 *     이라 ⑧ round-3 과 같은 box 결함이 새로 생긴다 → 기각
 *   td{line-height:0} → 9 / 154 / inline ← 양쪽 동시 충족(채택)
 * 퀵메뉴 셀은 이미지 전용(텍스트 없음)이라 line-height:0 부작용이 없다.
 * 결과: 154(원본 154, 오차 0) · w138 · x1262 불변 · 전 페이지 154, 로고셀
 * inline/76 및 ⑧ subimg inline/175 계약 무영향(셀렉터가 #LAYER_MENU 내부).
 */
#LAYER_MENU td {
  line-height: 0;
}

/* ------------------------------------------------------------------
 * ② 반응형 보강 (R3)
 *
 * 원본은 width="1080" 고정 테이블 레이아웃이고 viewport 메타가 없어서
 * 모바일에서 데스크톱 폭으로 축소 렌더된다. 산출물은 viewport 를 부여했으므로
 * 좁은 화면에서 가로 스크롤이 나지 않도록 여기서 리플로우를 보강한다.
 *
 * 원칙: 원본 마크업·클래스는 건드리지 않고 폭 제약만 푼다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  /* 퀵메뉴는 1080 컨테이너 바깥(left:1082px)에 놓여 좁은 화면에서 넘친다 */
  #LAYER_MENU {
    display: none;
  }
}

/* 퀵메뉴 가로 넘침 — 1121~1359px 사각지대 (COMMON 승격, 직렬 Commit 단계)
 *
 * 퀵메뉴는 1080 컨테이너(#divGSBody, 가운데 정렬) 바깥에 left:1082px; width:138px
 * 로 놓인다. 컨테이너 왼쪽 여백이 (100vw-1080)/2 이므로 퀵메뉴 오른쪽 끝은
 * (100vw-1080)/2 + 1220 이고, 이게 100vw 를 넘지 않으려면 100vw >= 1360px 이어야 한다.
 * 즉 1121~1359px 구간 전체가 넘침이다(실측 1280px=40px · 1200px=80px).
 * 위 max-width:1120px 규칙은 이 구간을 못 덮는다.
 *
 * #LAYER_MENU 는 공유 partials/header.html 소관이라 전 페이지에서 동일하게 재현된다
 * — index 유닛이 css/pages/index.css 에 같은 보정을 넣었으나 나머지 35페이지가 남아
 * 여기(공용 오버레이)로 승격했다. 숨기지 않고 컨테이너 안쪽 오른쪽 끝에 붙여
 * 넘침만 없앤다(부모 #divGSBody 가 position:relative 라 right:0 이 컨테이너 기준).
 */
@media screen and (min-width: 1121px) and (max-width: 1359px) {
  #LAYER_MENU {
    left: auto !important;
    right: 0;
  }
}

@media screen and (max-width: 1120px) {
  html {
    overflow-x: clip;   /* clip: 가로 넘침만 차단, 세로는 뷰포트가 처리(overflow-y auto 강제 안함) → 세로 이중·가로넘침 동시 해결 (2026-08-21) */
  }

  #divGSBody {
    width: 100% !important;
  }

  /* 고정폭 테이블·이미지가 뷰포트를 넘지 않게 */
  table {
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* 스페이서 gif 는 1x1 폭을 유지해야 레이아웃이 안 무너진다 */
  img[src$="spacer.gif"] {
    max-width: none;
  }
}

/* ------------------------------------------------------------------
 * 공용 푸터(partials/footer.html) 리플로우 — COMMON 에스컬레이션 처리
 *
 * 증상(실측): 390px 뷰포트에서 카피라이트 셀이 **1080px 폭 그대로** 렌더돼
 *   오른쪽 690px 이 잘려 나간다(상호/사업자번호/주소/전화 전부 판독 불가).
 *   index·product·support 전 페이지 동일 = 페이지 결함이 아니라 공유 조각 소관.
 *
 * 원인: 푸터는 width="1080"/"1078"/"1060" **HTML 속성** 고정폭 중첩 테이블이다.
 *   위 ② 의 `table{max-width:100%}` 로는 못 이긴다 — 속성 폭이 테이블의
 *   intrinsic minimum 을 1080 으로 못박아 max-width 가 걸려도 내용이 넘친다.
 *   그래서 폭 속성 자체를 무력화하고(width:auto) 셀을 흐르게 바꾼다.
 *
 * ⚠ docSW 는 위 overflow-x:hidden 때문에 390 으로 읽혀 게이트를 통과했다(거짓 통과).
 *   판정은 요소 getBoundingClientRect().right 로 했다.
 * 원본 마크업 그대로 — 훅은 원본 속성 bgcolor="#f4f4f4"(원본 정본값)로 잡는다.
 * (종전 창작 class .site-footer 는 원본 푸터가 classless 라 parity 키를 TABLE→TABLE.site-footer 로
 *  갈라 전 18페이지에서 [extra] TABLE.site-footer 를 냈다 — 클래스 제거하고 셀렉터를 속성으로 이관.)
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  /* 고정폭 해제 + 3단(고객센터/하단메뉴/카피라이트)을 세로로 쌓는다 */
  table[bgcolor="#f4f4f4"] table,
  table[bgcolor="#f4f4f4"] tbody,
  table[bgcolor="#f4f4f4"] tr,
  table[bgcolor="#f4f4f4"] td {
    display: block;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* height 속성(92/46/20…)은 1080 가로배치 전제 수치 — 쌓으면 내용이 넘쳐 겹친다 */
  table[bgcolor="#f4f4f4"] td[height] {
    height: auto !important;
  }

  table[bgcolor="#f4f4f4"] td {
    text-align: center !important;
  }

  /* 카피라이트 본문 — 좌우 여백 + 한글 단어 단위 줄바꿈 */
  table[bgcolor="#f4f4f4"] .td01 {
    padding: 0 14px;
    line-height: 1.7;
    word-break: keep-all;
  }

  table[bgcolor="#f4f4f4"] img {
    max-width: 100%;
    height: auto;
  }

  /* 세로 구분선(line.jpg)은 가로 3단 배치 전제라 쌓이면 의미가 없다 */
  table[bgcolor="#f4f4f4"] img[src$="line.jpg"] {
    display: none;
  }

  /* 하단 메뉴(회사소개·개인정보취급방침…) 이미지 링크 나열 — 줄바꿈 허용 */
  table[bgcolor="#f4f4f4"] td.lm01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 2px;
    padding: 8px 10px;
  }
}

/* ------------------------------------------------------------------
 * ②-b 헤더 고정폭 해제 (NavWalk iter2 — 390px GNB 도달 불가 수선)
 *
 * 증상: 390px 에서 GNB 대메뉴 5개가 left=530/654/778/902/1010 로 전부 화면 밖.
 *   `overflow-x:hidden` 탓에 maxScrollX=0 이라 가로스크롤로도 못 닿는다 = 모바일 내비 전멸.
 * 원인: 헤더 중첩 `table[width="1078"]`/`td[width="1078"]` 의 HTML width 속성이
 *   intrinsic minimum 을 1078 로 못박아 `#divGSBody{width:100%!important}` 를 무력화한다.
 *   (푸터가 겪은 것과 동일한 함정 — 푸터는 `table[bgcolor="#f4f4f4"]` 훅으로 이미 해결됐고 헤더엔 그 대칭 조치가 누락됐다.)
 *   기존 640px GNB flex-wrap 규칙이 효과가 없던 것도 조상 폭이 1078 로 남아 ul 이 left=499 에서 시작했기 때문이다.
 * 조치: 푸터와 같은 "고정폭 해제(width:auto!important) + 세로 리플로우".
 *   ⚠ 원본에 햄버거/드로어 트리거가 없으므로(uaBranch=false·mobileHtml 없음) 발명하지 않는다(R24⑦).
 *      메뉴는 원본 그대로 직접 노출하되 폭만 풀어 화면 안으로 되돌린다.
 * ⚠ 판정은 snap overflowPx 로 하지 말 것 — overflow-x:hidden 이 docSW 를 390 으로 읽혀 거짓 통과시킨다.
 *    getBoundingClientRect() + maxScrollX 로 볼 것.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  /* 1080 고정 컨테이너 — 뷰포트를 넘지 않게 */
  #divGSBody {
    width: auto !important;
    max-width: 100%;
  }

  /* 폭 속성이 박힌 헤더 중첩 테이블(1080/1078)의 intrinsic minimum 해제 */
  #divGSBody table[width="1080"],
  #divGSBody table[width="1078"],
  #divGSBody td[width="1078"] {
    width: auto !important;
    max-width: 100%;
  }

  /* 좌우 1px 라인 셀은 가로 3단 배치 전제 — 폭이 풀리면 의미가 없다 */
  #divGSBody > table td[width="1"] {
    display: none;
  }

  /* 헤더는 580px 고정 + float:right + padding-left:150px (mainbanner.css) —
     좁은 화면에선 전부 풀어 로고 아래 전폭 블록으로 내린다 */
  #header {
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
    height: auto !important;
  }

  /* 로고 셀(width=220, rowspan=2)과 GNB 셀을 세로로 쌓는다 */
  #divGSBody table[width="1078"] > tbody,
  #divGSBody table[width="1078"] > tbody > tr {
    display: block;
    width: auto !important;
  }

  #divGSBody table[width="1078"] > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
  }

  /* 상단 유틸(사이트맵·즐겨찾기·오픈마켓 7종) 아이콘 줄바꿈 허용 */
  #divGSBody table[width="1078"] > tbody > tr > td[align="right"] {
    text-align: center !important;
  }

  #divGSBody img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 860px) {
  /* GNB 서브메뉴가 화면 밖으로 나가지 않게 */
  #header .top .top_menu li ul[class^="sub_menu"] {
    left: auto;
    right: 0;
  }
}

@media screen and (max-width: 640px) {
  /* 상단 유틸/GNB 줄바꿈 허용 — 원본은 한 줄 강제였다 */
  #header .top .top_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #header .top .top_menu > li {
    float: none;
  }

  /* menu1~5 의 padding-left/right(10~30px)은 1행 가로배치 전제 — 줄바꿈 시 간격만 남긴다 */
  #header .top .top_menu > li[class^="menu"] {
    height: auto !important;
    padding: 6px 10px !important;
  }

  /* 서브메뉴는 position:absolute + left 음수(-10~-30px) 라 좁은 화면에서 화면 밖으로 나간다.
     ⚠ li 기준 중앙정렬(left:50%+translateX(-50%))로는 양끝 메뉴를 못 구한다 — 실측상
       menu1 은 left=-12(왼쪽 잘림), menu5 는 right=430(오른쪽 넘침)이 남았다.
     → 기준을 li 가 아니라 GNB 컨테이너(.top)로 올려 화면 안에 가둔다.
       .top 을 position:relative 로 만들면 absolute 서브가 li 가 아닌 .top 을 기준으로 잡는다. */
  #header .top {
    position: relative;
  }

  #header .top .top_menu li ul[class^="sub_menu"] {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 서브 항목의 width:130px 고정도 같이 푼다(li 안쪽 float:left 나열 전제) */
  #header .top .top_menu li ul[class^="sub_menu"] li {
    float: none !important;
    width: auto !important;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
 * 원본 결함 보정 — 체크박스 체크표시 이미지가 원본 서버에 없다(404)
 *
 * front.css 의 input[type=checkbox]:checked::after 가 content:url() 로
 * 버튼 폴더의 check 이미지를 쓰는데, 그 파일이 원본 서버에 존재하지 않는다
 * (미러 응답 관찰·자산 인벤토리 어디에도 없음 = 원본 시점부터 404).
 * 원본 CSS 는 R5 대로 보존하고 여기서 깨진 참조만 무력화한다 —
 * 이미지 대신 CSS 로 체크표시를 그린다(엑박 방지).
 * ------------------------------------------------------------------ */
input[type="checkbox"]:checked::after {
  content: "";
  width: 17px;
  height: 17px;
  background: #fff;
  background-image: linear-gradient(45deg, transparent 40%, #333 40%, #333 52%, transparent 52%),
                    linear-gradient(-45deg, transparent 55%, #333 55%, #333 67%, transparent 67%);
  background-size: 100% 100%;
  background-position: -2px 2px, 1px 0;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
 * ⑦ 전역 파리티 보정 (round 1) — #content 래퍼 박스 제거
 * ------------------------------------------------------------------
 * partials/header.html 이 여는 <div id="content"> 는 원본에 없는 우리 창작 래퍼다
 * (미러 _pages/* 전수 `id="content"` 0건). 그 결과 전 18페이지에서
 *   [extra] DIV#content  +  [missing] CENTER (경로가 BODY>CENTER → BODY>DIV#content>CENTER 로 밀림)
 * 가 쌍으로 계상됐다.
 *
 * 그러나 이 요소는 죽은 마크업이 아니라 두 계약을 지고 있어 **삭제 불가**다:
 *   ① header.html 의 skip-nav `href="#content"` 앵커 타깃(R23 접근성)
 *   ② css/pages/*.css 21개 파일 · 418개 셀렉터가 `#content …` 로 키잉됨
 *      (company-location / useinfo / support-board-* / product-* 반응형 전체)
 * 따라서 요소는 남기고 **박스만** 없앤다 — display:contents 는 자식을 부모(BODY)의
 * 직계처럼 배치하므로 렌더 박스트리에서 래퍼가 사라져 CENTER 의 경로가 원본과 같아지고,
 * id 앵커와 위 418 셀렉터의 매칭은 그대로 유지된다(셀렉터는 박스가 아니라 DOM 을 본다).
 */
#content {
  display: contents;
}

/* ------------------------------------------------------------------
 * ⑧ 전역 파리티 보정 (round 2) — 서브배너 인라인 이미지 베이스라인 4px 제거
 * ------------------------------------------------------------------
 * 위임 2건(U_DS_userpageview_0001-2, templates-skin-body-user_page-map)이 공통으로
 * "TABLE height 195→199 (4px) = partials/header.html 발 전역 오프셋" 을 올렸다.
 * 원인을 _trees/*.src.json 기하로 특정했다 — 원본 서브배너 스트립(subbg 테이블)은
 *   TR[0,116,1440,175] > TD 175 > IMG 175 (= 이미지 높이와 셀 높이가 정확히 동일)
 * 인데 우리는 TD 가 179 였다. subimg.jpg 가 display:inline / vertical-align:baseline
 * 로 렌더되어 **라인박스 디센더 4px** 이 셀에 붙은 것이다(원본엔 이 갭이 없다).
 *
 * 실측 검증(1440, sitemap.html): 해당 img 에 display:block 을 주면
 *   TD 179 → 175 (원본 175, 오차 0) · 스트립 TABLE 199 → 195 (원본 195)
 *   · 스페이서행 y 295 → 291 (원본 291) · 본문 CENTER 시작 315 → 311 (원본 311).
 * 즉 18개 파리티 페이지 전부에 상수로 깔려 있던 4px 오프셋과 그 전파
 * (그룹간격 87 vs 83 등)가 한 선언으로 동시 해소된다.
 *
 * 셀렉터는 이 배너 이미지 1장으로 좁힌다(전역 `img{display:block}` 은 헤더 아이콘·
 * 본문 인라인 이미지의 라인 배치를 깨뜨린다). 이 src 는 산출물 전체에서
 * partials/header.html:145 단 1곳이라 오매칭이 없다.
 *
 * [round 3 개정] display:block 은 4px 기하를 잡았지만 **원본 computed display 는
 * `inline`** 이라 parity box 차원에서 새 결함이 됐다(18/18 페이지 impact 57,
 * rect_src == rect_tgt == [180,116,970,175] — 기하는 완벽하고 속성만 불일치).
 * 위임 3건(map#2, -3#2, -4#2)이 공통으로 올린 건이며 그중 하나가 해법까지 제시했다.
 * 단순 원복은 순손실이라 기각 — 대신 `inline` 을 되돌리되 디센더의 실제 원인인
 * **baseline 정렬만** 무력화한다(vertical-align:top). 라인박스 아래 디센더 공간은
 * baseline 정렬 때문에 생기므로 top 정렬이면 inline 이어도 갭이 0 이다.
 *
 * 3-way 실측(1440, useinfo/sitemap):
 *   A display:block          → TD 175 (기하 O) / display block  (box 결함 57)
 *   B inline+baseline(원복)  → TD 179 (4px 재발) / display inline  ← 순손실
 *   C inline+vertical-align:top → TD 175 · strip 175 · CENTER top 311 · docH 1061
 *                                 + display inline  ← 양쪽 동시 충족(채택)
 * sitemap 동일 페이지에서 나머지 img 34장의 좌표·높이 지문 A/C 완전 동일(부작용 0).
 */
img[src$="/images/images/subimg.jpg"] {
  display: inline;
  vertical-align: top;
}

/* ------------------------------------------------------------------
 * ⑩ quirks 단위 없는 인라인 padding 복원 (round 4 — 18파일 전역)
 * ------------------------------------------------------------------
 * 원본은 doctype 이 없어 quirks(BackCompat) 라 `style="padding:10"` 처럼
 * **단위 없는 길이를 px 로 해석**한다(미러 실측: padding:10 → computed 10px 4면).
 * 우리 산출물은 doctype 이 있어 표준모드 — 같은 선언이 **무효로 버려져 0px** 이다
 * (실측 대조, support/faq.html: 동일 12개 요소가 전부 0px).
 * 그만큼 표 안쪽 여백이 통째로 사라져 행/열이 좁아진다.
 *
 * 이 증상은 18개 HTML 전역이라(support-board-notice-list 유닛이 자기 페이지에만
 * 같은 보정을 넣고 나머지를 GLOBAL 로 인계했다) 여기서 한 번에 처리한다.
 * 인라인 style 을 손대면 원본 마크업이 훼손되므로 CSS 로만 복원한다 —
 * 인라인은 무효라 캐스케이드상 이 규칙이 이긴다.
 *
 * 값은 창작이 아니라 원본이 실제로 쓰는 닫힌 집합 그대로(R16):
 *   padding:10(28) padding-left:10(37) padding-right:10(20) padding:5(3)
 *   padding-top:6(2) padding-left:25(2) padding-top:5(1) padding-bottom:5(1)
 *   padding-bottom:3(1)
 * 뒤에 `"` 나 `;` 가 오는 경우만 잡아 `padding:100` 류 오매칭을 막는다.
 */
[style*="padding:10;"], [style$="padding:10"] { padding: 10px; }
[style*="padding:5;"], [style$="padding:5"] { padding: 5px; }
[style*="padding-left:10;"], [style$="padding-left:10"] { padding-left: 10px; }
[style*="padding-left:25;"], [style$="padding-left:25"] { padding-left: 25px; }
[style*="padding-right:10;"], [style$="padding-right:10"] { padding-right: 10px; }
[style*="padding-top:6;"], [style$="padding-top:6"] { padding-top: 6px; }
[style*="padding-top:5;"], [style$="padding-top:5"] { padding-top: 5px; }
[style*="padding-bottom:5;"], [style$="padding-bottom:5"] { padding-bottom: 5px; }

/* ------------------------------------------------------------------
 * ⑪ 서브페이지 타이틀바 아이콘 베이스라인 4px 제거 (round 5/stylefix r2 — 전역)
 * ------------------------------------------------------------------
 * ⑧ 과 **완전히 같은 원인의 다른 이미지**다. 서브페이지 공통 타이틀바
 *   <table height="30" background=".../sbt_bg_01.gif">
 *     <td width="30"><img src=".../sbt_icon_01.gif"></td>   ← 30x30 아이콘
 *     <td class="td01">…제목…</td> <td class="navi">홈 &gt; …</td>
 * 에서 아이콘이 display:inline / vertical-align:baseline 로 렌더돼
 * **라인박스 디센더 4px** 이 셀에 붙는다. 원본은 doctype 이 없어 quirks 라
 * 이 갭이 없다.
 *
 * stylediff 실측(1440): 원본 td.td01 / td.navi = **30px**(= 아이콘 높이이자
 * table height 속성값)인데 우리는 둘 다 **34px**. 드리프트 17페이지 중
 * 이 타이틀바를 쓰는 전 페이지에 상수로 깔려 있던 결함이다.
 *
 * 3-way 실측(1440, terms.html — td01 / navi / 아이콘 computed display):
 *   A td{line-height:0}          → 30 / 30 / inline  ← 기하 O 이나 원본 computed
 *     `line-height:18px`(td.td01 실측)을 0 으로 덮어써 본문 18px 행까지 오염 → 기각
 *   B img{vertical-align:middle} → 30 / 30 / **inline 유지**  ← 채택
 *   C img{display:block}         → 30 / 30 / block   ← ⑧ round-3 과 동일한 box 결함
 *     (원본 computed display 는 inline)이 새로 생김 → 기각
 *
 * ⑧ 은 top 정렬이었지만 여기는 아이콘이 셀 높이와 같은 30px 이라 top/middle 이
 * 동일 기하이고, 원본이 이 아이콘을 세로 중앙에 두는 의도(table height=30 =
 * 아이콘 높이)에 middle 이 더 부합한다. verticalAlign 은 스펙 캡처 PROPS 에
 * 없으므로 computed 대조상 새 결함이 생기지 않는다.
 *
 * 셀렉터는 이 아이콘 1장으로 좁힌다(전역 img 규칙은 본문 인라인 이미지를 깨뜨린다).
 */
img[src$="/images/title/sbt_icon_01.gif"] {
  vertical-align: middle;
}

/* ------------------------------------------------------------------
 * ⑫ 게시판 목록 헤더 구분선 베이스라인 6px 제거 (stylefix r2 — 게시판 5페이지)
 * ------------------------------------------------------------------
 * ⑧·⑪ 과 동일 원인(quirks→표준모드 인라인 이미지 디센더)의 세 번째 이미지.
 * 게시판 목록 헤더행
 *   <tr align="center" valign="middle" class="td01">
 *     <td width="39" height="32">번호</td>
 *     <td width="1" height="32"><img src=".../list_post_01.gif"></td>  ← 1x35 세로 구분선
 *     …
 * 에서 구분선 이미지가 baseline 정렬이라 디센더가 붙는다. 구분선은 **35px 로
 * 셀(height=32)보다 크기 때문에** 갭이 그대로 행 높이를 밀어올린다.
 *
 * stylediff 실측(1440): 원본 `tbody>tr.td01>td` = **35px**(= 바깥 table height="35"
 * 이자 구분선 이미지 높이)인데 우리는 **41px**. 드리프트 목록 중 최다 클러스터
 * (23건) 였고 게시판 5페이지(notice/qna/order/report/catalogue) 전역이다.
 * 마크업은 원본과 바이트 동일 — CSS 로만 잡는다.
 *
 * 실측(1440, board-notice-list — 행높이 / 구분선 computed display):
 *   baseline(현행) → 41 / inline   ← 결함
 *   vertical-align:top    → **35** / inline  ← 채택
 *   vertical-align:middle → 35 / inline (동일 기하)
 * 구분선은 행 전체를 세로로 가르는 용도(35 = 행 높이)라 top 정렬이 원본 의도에
 * 부합한다(⑧ 과 같은 선택). display 는 inline 유지라 box 결함이 생기지 않는다.
 */
img[src$="/list_post_01.gif"] {
  vertical-align: top;
}

/* ------------------------------------------------------------------
 * ⑬ 공지 롤링(marquee) 셀 베이스라인 6px 제거 (stylefix r2 — 전역 헤더 롤링리스트)
 * ------------------------------------------------------------------
 * ⑧·⑪·⑫ 와 같은 계열이지만 대상이 img 가 아니라 **marquee**(inline-block) 다.
 *   <td class="rollist01" style="padding:10">
 *     <marquee direction="up" scrollamount="2" width="100%" height="50"> … </marquee>
 *   </td>
 * marquee 가 inline-block / baseline 이라 셀 라인박스에 디센더 6px 이 붙는다.
 *
 * stylediff 실측(1440, terms.html): 원본 td.rollist01 = **70px**
 * (= padding-top 10 + marquee height 50 + padding-bottom 10, 스펙 pt/pb 10px 실측 일치)
 * 인데 우리는 **76px**. marquee 자체 높이는 이미 50px 로 정확했다 —
 * 남는 6px 은 전부 베이스라인 디센더다.
 *
 * 실측(1440 — td 높이 / marquee 높이 / marquee computed display):
 *   baseline(현행)        → 76 / 50 / inline-block  ← 결함
 *   vertical-align:top    → **70** / 50 / inline-block  ← 채택(원본 70 과 오차 0)
 *   vertical-align:middle → 70 / 50 / inline-block (동일 기하)
 * marquee 는 `direction="up"` 세로 롤링이라 셀 상단 기준(top)이 원본 의도에 부합한다.
 * padding·line-height·display 는 그대로 두어 원본 computed 계약을 유지한다.
 */
td.rollist01 > marquee {
  vertical-align: top;
}
[style*="padding-bottom:3;"], [style$="padding-bottom:3"] { padding-bottom: 3px; }