/* usung-r18.css — 260804 화면검토 8차 (① ② ③) * ① 브랜드스토리 헤더 재배치 * r17 의 'USUNG ACE / PAJU · KOREA' 씰을 없애고, * BRAND STORY + SINCE 1979 를 줄 오른쪽으로 밀어 배치한다. * 왼쪽 빈자리는 그라디언트 레일 + 다이아 마크가 채운다. * (마크업 변경은 usung-r17.js — MARK 를 레일 1개로 줄이고 래퍼 맨 앞에 넣는다) * ② 브랜드스토리 챕터 표제 SWING / TENSION / DUAL DIECASTING 을 파란 그라디언트로 * ③ 제품소개 하단 빈 공간 제거 (실측 176px = 페이지 padding-bottom 96 + 푸터 margin-top 80) * * 명시도 메모 * · usung-r8.css 는 usung-r8-mount.js 가 런타임에 로 append 하므로 * api/inject.js 의 정적 를 소스 순서에서 항상 이긴다. * → .r8x 대상 규칙은 !important + `html .r8x:not(#_r8_)` (1,3,1) 로 올린다. * · ② 는 usung-r14-tech.css:43 의 `.bs-ch.dark .bs-en{color:#1d1d1f}` (1,4,1) 이 * color 싸움에서 이긴다. 그러나 `-webkit-text-fill-color` 는 color 를 항상 덮으므로 * (1,3,1) 로도 화면은 파랗게 나온다. 그래도 안전하게 .dark 선택자를 같이 적는다. * · ★ ② 에 `background:` 단축을 쓰면 안 된다 — background-clip 이 초기값으로 리셋되어 * 글자가 사라지고 그라디언트만 네모로 남는다. background-image 로 레이어만 교체한다. */ /* ══════════════ ① 브랜드스토리 헤더 우측 배치 ══════════════ */ .r8x .r17-bshead { justify-content: flex-end; gap: 14px; } /* 마크(레일+다이아)는 왼쪽에서 남은 폭을 전부 먹어 두 라벨을 오른쪽으로 민다 */ .r8x .r17-bsmark { margin-left: 0; flex: 1 1 auto; min-width: 0; gap: 13px; } .r8x .r17-rail { flex: 1 1 auto; width: auto; min-width: 0; height: 1px; background-image: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, rgba(37, 99, 235, .22) 42%, rgba(37, 99, 235, .62) 100%); } .r8x .r17-dia { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 2px; transform: rotate(45deg); background-image: linear-gradient(135deg, #1D4ED8, #60A5FA); box-shadow: 0 2px 7px rgba(37, 99, 235, .38); } /* BRAND STORY — 오른쪽 끝에서 존재감이 있어야 한다 */ html .r8x:not(#_r8_) .bs-open .bs-k { font-size: 13px !important; font-weight: 900 !important; letter-spacing: .26em !important; color: #1D4ED8 !important; flex: 0 0 auto; } /* SINCE 1979 — r17 씰의 마감(흰 알약 + 파란 그림자)을 이쪽으로 옮겨 왔다 */ html .r8x:not(#_r8_) .bs-open .bs-since { margin: 0 !important; flex: 0 0 auto; padding: 8px 17px !important; border: 1px solid rgba(37, 99, 235, .26) !important; border-radius: 999px !important; background-color: #fff !important; background-image: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(96, 165, 250, .13)) !important; box-shadow: 0 6px 18px rgba(37, 99, 235, .10) !important; } html .r8x:not(#_r8_) .bs-open .bs-since em { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .22em !important; color: #6B7A90 !important; } html .r8x:not(#_r8_) .bs-open .bs-since b { font-size: 16px !important; font-weight: 900 !important; letter-spacing: -.01em !important; color: #0B1E4D !important; } @media (max-width: 860px) { /* 좁은 화면에서는 본문이 좌측 정렬이라 헤더도 왼쪽으로 되돌린다 */ .r8x .r17-bshead { justify-content: flex-start; gap: 10px; } .r8x .r17-bsmark { margin-top: 0; flex: 0 0 auto; } .r8x .r17-rail { display: none; } html .r8x:not(#_r8_) .bs-open .bs-k { font-size: 11.5px !important; letter-spacing: .2em !important; } html .r8x:not(#_r8_) .bs-open .bs-since { padding: 7px 14px !important; } html .r8x:not(#_r8_) .bs-open .bs-since b { font-size: 14.5px !important; } } /* ══════════════ ② 챕터 표제 파란 그라디언트 ══════════════ */ html .r8x:not(#_r8_) .bs-en, html .r8x:not(#_r8_) .bs-ch.dark .bs-en { width: fit-content; max-width: 100%; color: #1D4ED8 !important; background-image: linear-gradient(100deg, #1D4ED8 0%, #2563EB 46%, #60A5FA 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ══════════════ ③ 제품소개 하단 빈 공간 ══════════════ */ html body #page-products { padding-bottom: 0 !important; } /* 푸터는 body 직속 형제라 페이지 셀렉터로 좁힐 수 없다 → :has() 로 제품소개일 때만. * :has() 미지원 브라우저(Chrome<105 / Safari<15.4 / Firefox<121)에서는 조용히 무효 = 현행 유지. */ html body:has(#page-products.active) footer { margin-top: 0 !important; }