/* usung-r38.css — 260817 모바일/태블릿 레이아웃 보정
 * 승연 지시: 「모바일 최적화 안된부분 캡쳐로 전달했어 첨부파일들 확인해보고 최적화 부탁해」
 * 첨부 3장 = ① 시공갤러리 필터바 ② 기술력 360° SWING 챕터 ③ 제품소개
 * ③ 은 393px 실측에서 구조적 파손이 없었다(가로 넘침 0, 가로레일은 의도된 캐러셀).
 *   → 억지로 바꾸지 않는다. 이 파일은 ①②만 건드린다.
 * ------------------------------------------------------------------ */

/* ── ① 기술력 챕터: 영상이 컨테이너를 뚫고 본문을 덮는다 (521~980px) ──
 *
 * .bs-media 는 `display:grid` + `height` 고정인데 **grid-template-rows 가 없다.**
 * 그러면 암시적 행이 `auto` 가 되고, 자식 .bs-vid 안의 <video> 가
 * `height:100%`(usung-r8.css:635) 라 부모 높이가 확정되지 않아
 * 내재 크기(640×1138 세로영상)로 튄다. 결과가 아래 실측값이다.
 *
 *   폭    미디어박스h   영상박스        넘침      본문(.bs-copy) 덮인 넓이
 *   1440    480      323×480         0        없음
 *   1153    480      309×480         0        없음
 *    900    430      543×892      +462px     543×418  ← 본문 거의 전부
 *    768    430      458×753      +323px     458×279
 *    640    430      374×619      +189px     374×145
 *    560    430      332×501       +71px     332×27
 *    393    330      220×336        +6px      없음
 *
 * 승연 캡처의 「었」 한 글자는 덮인 본문이 .bs-vid 와 .bs-shots 사이
 * 16px 거터로 비쳐 나온 것이다. 캡처의 글자 x=735/1153=0.637,
 * 900px 에서 잰 거터 중심 x=575/900=0.639 — 일치한다.
 *
 * ★ usung-r16-tech.css:47 이 같은 병을 **.bs-shots 에만** 고쳤다
 *   (`grid-auto-rows:minmax(0,1fr)`). 정작 부모인 .bs-media 자신의 행은
 *   안 고쳐서 남았다. 여기서 그 짝을 채운다.
 * ★ height 를 auto 로 푸는 해법은 금지 — usung-r13-tech-b.css:143 주석 참조.
 *   부모 높이가 사라지면 자식 height:100% 가 다시 내재 크기로 튄다.
 * ★ 명시도: r13-tech-b / r16-tech 가 `html .r8x:not(#_r8_)` (1,3,1) 이므로
 *   같은 형태로 쓰고 로드 순서를 뒤에 둬서 이긴다.
 * ★ 1440/1153px 데스크톱은 이미 넘침 0 → 이 규칙을 적용해도 델타 0 이다.
 *   (라이브에서 <style> 주입으로 7개 폭 전수 확인함) */
html .r8x:not(#_r8_) .bs-media{grid-template-rows:minmax(0,1fr)}
html .r8x:not(#_r8_) .bs-vid{min-height:0}

/* ── ② 시공갤러리 필터바: 칩이 줄바꿈되면 CTA 가 마지막 칩 옆에 낀다 ──
 *
 * #gal-tabs 는 flex-wrap:wrap 이고 문의 CTA(.r9gcta)가 그 안 마지막 자식이다
 * (usung-r9-excel.js:172 가 append, MutationObserver 로 재부착).
 * usung-r15-type.css:79 의 `margin-left:auto` 는 한 줄일 때 오른쪽 정렬용인데,
 * 칩이 접히면 **마지막 줄 오른쪽**으로 가 버려 아래 꼴이 된다.
 *
 *   폭      필터바 줄 구성
 *   1440   한 줄: 전체·클래식·모던·프리미엄·레트로 … [CTA]      ← 정상
 *   1024   1줄 칩 전부 / 2줄 [CTA] 단독                      ← 정상
 *    900   1줄 전체·클래식·모던·프리미엄 / 2줄 레트로 … [CTA]   ← ★ 캡처의 그 화면
 *    768   1줄 3개 / 2줄 프리미엄·레트로 [CTA]                ← ★ CTA 가 꽉 낌
 *    700   3줄, CTA 단독이지만 오른쪽에 붕 뜸
 *    640↓  CTA 폭 100% (usung-r15-type.css:85 가 이미 처리)
 *
 * → 641~1024px 도 640px 이하와 같게 **CTA 를 제 줄에 눕힌다.**
 *   1025px 이상은 손대지 않는다(그 위는 이미 정상이라 델타 0).
 * ★ usung-r10-redesign.css:32 가 `margin:0 !important` 라 !important + html 필요. */
@media (max-width:1024px){
  html #page-gallery .r9gcta{margin-left:0 !important;width:100%}
}