/* usung-r11.css — 260803 화면검토 * ② 기술력: 인증 아이콘 6종(#th-badges) 삭제 + 섹션 리듬·정렬 재정비 * ③ 메인 첫 페인트에 원본(이전) 내용이 스쳐 보이는 문제 차단 * * index_v6.html 불변. 런타임 오버레이만 사용한다. * * usung-r8.css 는 usung-r8-mount.js 가 에 append 하므로 소스 순서에서 * 이 정적 를 항상 이긴다. 따라서 .r8x 를 겨냥한 규칙은 !important 가 * 필요하고, 앞에 html 을 붙여 r8 자체 스코프(.r8x:not(#_r8_) X = 1,2,0)보다 * 높은 명시도(1,2,1)를 확보한다. * ★ background 단축 속성 금지 — background-clip:text 를 리셋해 글자가 사라진다. */ /* ── ② 인증 아이콘 6종 삭제 ─────────────────────────────────────────── */ html .r8x:not(#_r8_) .th-badges{display:none !important;} /* ② 국내최초 카드 4장 — 제목이 2줄인 카드가 하나뿐이라 "자세히 보기" 기준선이 * 21px 어긋난다(1줄 21px vs 2줄 42px). 제목 높이를 2줄로 고정해 맞춘다. */ html .r8x:not(#_r8_) .tf-title{min-height:2.5em !important;} /* ② 섹션 리듬 통일. * 뱃지 줄(margin 34 + height 168 = 202px)이 빠지면서 인증서와 통계 사이가 * 20+16=36px 로 붙는다. 96 / 56 / 96 스케일로 다시 잡는다. */ html .r8x:not(#_r8_) .th-cert{padding:96px 0 0 !important;} html .r8x:not(#_r8_) .th-stats{margin:56px 0 0 !important;} html .r8x:not(#_r8_) .th-sites{padding:96px 0 96px !important;} /* ② 헤더 정렬 통일 — 히어로·브랜드스토리·설치현장이 모두 좌측 정렬인데 * 인증 섹션만 가운데였다. */ html .r8x:not(#_r8_) .th-cert{text-align:left !important;} @media (max-width:900px){ html .r8x:not(#_r8_) .th-cert{padding:64px 0 0 !important;} html .r8x:not(#_r8_) .th-stats{margin:40px 0 0 !important;} html .r8x:not(#_r8_) .th-sites{padding:64px 0 68px !important;} } @media (max-width:520px){ html .r8x:not(#_r8_) .th-cert{padding:48px 0 0 !important;} html .r8x:not(#_r8_) .th-stats{margin:32px 0 0 !important;} html .r8x:not(#_r8_) .th-sites{padding:48px 0 52px !important;} } /* ── ③ 첫 페인트 잔상 ("캐시값") ─────────────────────────────────────── * api/inject.js 가 defer 스크립트 ~61개를 붙이는 사이 브라우저는 원본 마크업을 * 먼저 그린다. 1440px 실측: 옛 3D 캔버스 81~812ms, 옛 USE CASE 문구 208~812ms. * (내비는 r10 게이트가 이미 81~902ms 를 가리고 있어 추가 조치 불필요.) */ @keyframes r11-reveal{to{visibility:visible;}} /* CORE TECHNOLOGY 카드 — usung-r6-main.js 가 #hood-3d-wrap 을 지우는 순간 * :has() 가 풀리며 즉시 드러난다. 타이머가 없는 자기 시점형이라 정상 경로에서는 * 대기가 0이고, r6 가 아예 안 돌면 1.1s 페일세이프로 원본을 되살린다. * 카드 전체를 가려야 우측 01~04 옛 카피까지 같이 막힌다. */ div:has(> #hood-3d-wrap){ visibility:hidden; animation:r11-reveal .01s linear 1.1s forwards; } /* USE CASE 3카드 버튼 — 원본 문구(갤럭시 시리즈 추천 / 스파이럴 + 통합 / * 맞춤형 환기 시스템)가 i18n 갱신 전까지 보인다. 문구는 그대로 남고 텍스트만 * 바뀌므로 :has() 로는 시점을 잡을 수 없어 r10 게이트를 그대로 빌려 쓴다. * 버튼은 display:flex 전체폭이라 가려도 레이아웃이 밀리지 않는다. */ #page-home button:has(> [data-i18n^="www_case"][data-i18n$="_btn"]){ visibility:hidden; animation:r11-reveal .01s linear 1.1s forwards; } /* 백그라운드 탭은 문서 타임라인이 t=0 에 멈춰 키프레임이 진행되지 않는다. * usung-r10.js 의 클래스는 setTimeout 이라 그때도 도착하므로 두 경로를 병행한다. */ html.r10-navok #page-home button:has(> [data-i18n^="www_case"][data-i18n$="_btn"]){ visibility:visible; animation:none; }