/* usung-r31.css — 260812_홈페이지_수정_r2 S06 · S18
 * usung-r8.css 가 런타임에 로드되므로 그쪽 선언을 덮어야 하는 규칙은 !important 와
 * 선행 `html ` 이 필요하다(usung-r10-redesign.css 와 같은 이유).
 */

/* ════════ S18 — 시공갤러리 칩 줄 왼쪽 안내 패널 ════════
 * 「원하는 디자인을 빠르게 찾아보세요」 를 별도 헤더가 아니라 칩 줄의 첫 flex 아이템으로
 * 둔다. .gal-tabs 는 이미 flex-wrap 이라 좁아지면 저절로 아래로 접힌다.
 * .gal-find(원래 전폭 헤더)는 r10 이 감춘 상태 그대로 둔다 — 되살리면 헤더가 두 번 나온다.
 */
html .r8x:not(#_r8_) #gal-tabs .gf-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 6px 0 0;
  padding: 0 16px 0 0;
  border-right: 1px solid var(--line);
  align-self: stretch;
}
/* ★ r32 / r3 덱 s5 — 「…빠르게 찾아보세요**만 키우고, 스타일별 삭제**」.
 * 15 → 17.5px. 더 키우지 않는 이유: #gal-tabs 는 `position:sticky` 라 여기서 늘어난
 * 높이가 스크롤 내내 화면을 먹는다(r31fix 회귀와 같은 함정). 문구는 <br> 로 2줄이라
 * 17.5×1.32×2 ≈ 46px — 옆 칩(패딩 포함 ≈38px)보다 8px 큰 선에서 멈춘다.
 * 같이 있던 「스타일별」 라벨(.gf-k)은 지시대로 마크업에서 뺐고(usung-r8-gal.js:36)
 * 여기 있던 .gf-k 규칙도 함께 지웠다. 되살리려면 두 곳을 같이 되돌릴 것. */
html .r8x:not(#_r8_) #gal-tabs .gf-lead b {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.32;
  color: var(--navy);
  letter-spacing: -.015em;
  word-break: keep-all;
}

/* ★ 모바일에서는 이 패널을 아예 뺀다 — 처음엔 전폭으로 떨어뜨려 글자·여백만 줄였는데,
 * 그게 회귀였다. #gal-tabs 는 `position:sticky; top:58px` 이라 여기서 늘린 높이는
 * 스크롤 내내 화면을 먹는다. 문구에 <br> 이 박혀 있어 전폭 배치는 반드시 두 줄이 되고,
 * 줄 높이(13px×1.3×2) + 여백 + .gal-tabs 의 `gap:10px` 가 행간격으로 붙어 약 54px 이
 * 고정 영역에 더해진다. 아이폰15(852px) 기준 고정 바가 화면의 약 44% 까지 커졌다.
 * S18 의 의도(칩 줄 왼쪽 인라인 강조)는 가로폭이 있어야 성립하므로 좁은 화면에선 포기한다.
 * ── 되살리려면: display:none 을 지우고 한 줄로 접어야 한다. 그러려면 usung-r8-gal.js 의
 *    GAL_FIND 에서 <br> 을 빼고 두 <span> + 공백으로 바꿔야 하는데, r16 사전이 두 문구를
 *    각각 한 행으로 갖고 있어 텍스트 노드가 둘로 유지되는지 먼저 확인해야 한다.
 * 폭 기준을 560px 으로 잡은 건 usung-r10-redesign.css:45 가 .gal-tabs 를 top:58px 로
 * 낮추는 지점과 같게 맞추려는 것이다(720px 은 어느 기존 구간과도 맞지 않았다).
 * ★ r32(s5)에서 「스타일별」 칩을 빼서 패널이 **가로로는** 짧아졌지만, 같은 지시로 문구를
 *   15→17.5px 키웠기 때문에 **세로는 오히려 늘었다**(43.8 → 46.2px). 모바일 숨김을 풀
 *   근거가 되지 못한다 — 그대로 둔다. */
@media (max-width: 560px) {
  html .r8x:not(#_r8_) #gal-tabs .gf-lead { display: none; }
}

/* ════════ S06 — 제품 상세 모달: 색상표를 부품 구성 앞으로 ════════
 * 순서 교체는 usung-r19-parts.js 가 한다. 여기서는 구분선만 따라 옮긴다.
 * .r19-cc 의 border-top 은 '위의 부품 그리드와 나를 가르는 선' 이었다. 맨 위로 오면
 * .m-parts 자체의 8px 테두리와 겹쳐 줄이 두 개로 보인다 → 첫 자식일 때만 지운다.
 */
html .r8x:not(#_r8_) .m-parts .r19-cc:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
/* 지운 구분선은 이제 뒤따르는 「부품 구성」 제목이 진다. */
html .r8x:not(#_r8_) .m-parts .r19-cc + h4 {
  margin-top: 30px !important;
  padding-top: 26px !important;
  border-top: 1px solid var(--line) !important;
}
/* 이 구간은 usung-r19.css:95 의 @media (max-width:520px) 를 그대로 따라간다.
 * r19 는 그 폭에서 .r19-cc 를 30/26 → 24/20 으로 줄인다. 옮겨 붙인 구분선도 같은
 * 지점에서 같은 값이 돼야 한다 — 폭이 어긋나면 521~720px 구간만 간격이 달라진다. */
@media (max-width: 520px) {
  html .r8x:not(#_r8_) .m-parts .r19-cc + h4 {
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
}