/* usung-r15-tech.css — 기술력 하단 공란 제거 · 클로징 박스화 · 블루 그라디언트 (260803 5차 ①②③④) * * ★ 명시도 — usung-r8.css 는 usung-r8-mount.js 가 에 append 하므로 inject.js 의 * 정적 를 항상 이긴다. `html .r8x:not(#_r8_)` (1,3,1) 로 올린다. * r13/r14 와 같은 명시도면 나중에 로드되는 이 파일이 이긴다 → inject.js 에서 맨 뒤에 둘 것. * * ★ 그라디언트 텍스트에 `background:` 단축을 쓰지 말 것 — background-clip 이 초기화되어 * 글자가 통째로 사라진다. 여기서는 **롱핸드 4종을 전부 명시**해 r8 의 clip 선언에 * 의존하지 않는다(-webkit-background-clip · background-clip · -webkit-text-fill-color · color). */ /* ── ① 하단 공란 — 실측 270px(bs-close 110 + page 80 + footer margin 80) ───── */ /* 페이지 자체 아래여백은 페이지 스코프라 안전하게 0. 푸터 margin 80 은 전 페이지 * 공용이라 건드리지 않고, 대신 ③ 의 블루 띠로 마지막 섹션을 채워 빈 띠 인상을 없앤다. */ html #page-tech{padding-bottom:0 !important} /* 남은 80px 는 `footer{mt-20}` 이다. 푸터는 body 직속(형제 = main)이라 페이지 * 스코프 셀렉터로 좁힐 수 없어서 :has() 로 기술력이 켜져 있을 때만 없앤다. * 전 페이지 공용 마진을 건드리면 나머지 10개 페이지가 같이 붙는다. * (Chrome 105+ / Safari 15.4+ / Firefox 121+. 미지원 브라우저는 지금과 동일.) */ html body:has(#page-tech.active) footer{margin-top:0} /* ── ②③ 클로징 — 블루 그라디언트 띠 + 흰 박스 ─────────────────────────── */ html .r8x:not(#_r8_) .bs-close{ background-color:#eef3fd; background-image: radial-gradient(900px 420px at 12% -10%,rgba(96,165,250,.30) 0%,rgba(96,165,250,0) 62%), radial-gradient(760px 400px at 92% 108%,rgba(37,99,235,.20) 0%,rgba(37,99,235,0) 60%), linear-gradient(180deg,#f5f8ff 0%,#e9f0fd 52%,#e2ebfc 100%); padding:104px 0 !important; } html .r8x:not(#_r8_) .bs-close .wrap{ max-width:1080px;background:#fff;border-radius:32px; padding:64px 60px 60px;text-align:left; border:1px solid rgba(37,99,235,.10); box-shadow:0 1px 2px rgba(16,24,40,.04),0 28px 64px -24px rgba(37,99,235,.28); } html .r8x:not(#_r8_) .bs-cl-lines{align-items:flex-start;margin-bottom:30px} html .r8x:not(#_r8_) .bs-cl-body{max-width:820px;margin-left:0;margin-right:0} /* 서명 — 블루 3단 그라디언트. 롱핸드만 쓴다(단축 금지). * ★ background-image 는 !important 라야 한다 — usung-r10-tone.css:54 가 **같은 명시도** * (1,3,1)로 `#BFDBFE→#fff 62%` 를 !important 로 잡는다. 어두운 배경 전제의 배색이라 * 흰 박스 위에서는 글자 뒷부분이 흰색으로 사라진다(라이브 실측: "Success wi" 에서 끊김). * 같은 !important 끼리는 명시도로만 갈리므로 이쪽도 !important 로 맞받는다. */ html .r8x:not(#_r8_) .bs-sign{ background-image:linear-gradient(100deg,#1D4ED8 0%,#2563EB 46%,#60A5FA 100%) !important; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; margin-top:46px; } html .r8x:not(#_r8_) .bs-sign-s{color:#2563EB} /* ── ③ 히어로 · 구획 강조에 블루 그라디언트 ──────────────────────────── */ html .r8x:not(#_r8_) .th-hero{ background-color:#fff; background-image:linear-gradient(180deg,#eef3fd 0%,#f7f9fe 58%,#fff 100%); } /* ★ .hl 2종도 !important 다 — usung-r10-tone.css:49·53 이 같은 명시도(1,3,1)로 * `#60A5FA→#BFDBFE` / `#BFDBFE→#fff 72%` 를 !important 로 잡는다. 어두운 배경 전제라 * 흰 바탕 위에서는 뒷글자가 지워진다. 같은 !important 는 명시도로만 갈리므로 맞받는다. */ html .r8x:not(#_r8_) .th-h1 .hl{ background-image:linear-gradient(100deg,#1D4ED8 0%,#2563EB 48%,#60A5FA 100%) !important; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent !important; } html .r8x:not(#_r8_) .bs-h .hl{ background-image:linear-gradient(100deg,#1D4ED8 0%,#2563EB 48%,#60A5FA 100%) !important; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent !important; } /* 통계 랩 — 회색 판을 옅은 블루 판으로 */ html .r8x:not(#_r8_) .th-stats .wrap{ background-image:linear-gradient(135deg,#f2f6fe 0%,#eaf1fd 100%); border:1px solid rgba(37,99,235,.10); } /* ── ④ 국내최초 4카드 — 사진을 크고 시원하게 ───────────────────────── * ★ 실측: 카드 564×392 · 글상자가 왼쪽 292px 까지 → 오른쪽 여유 230px. * ★ 원본 tf_*.png 는 96~124px 짜리 합성 일러스트라 더 큰 소스가 없다(A-16). * 그대로 키우면 뭉개지므로 **자산 자체를 Lanczos 2.4배 + 언샵으로 재생성**했다 * (230×379 ~ 298×386). 렌더 높이 230px 이면 2배 DPR 에서도 1.1~1.2배 확대에 * 그친다(이전: 96px 소스를 2.9배로 늘려 씀). * ★ r13-tech.css:99 가 `max-width:150px` 를 같은 명시도로 잡으므로 여기서 * `max-width:none` 으로 풀어야 높이 지정이 산다. */ html .r8x:not(#_r8_) .tf-card{ min-height:392px;padding:46px 42px;position:relative;overflow:hidden; } html .r8x:not(#_r8_) .tf-card:before{ content:"";position:absolute;right:-40px;bottom:-60px;width:340px;height:340px; border-radius:50%;pointer-events:none; background-image:radial-gradient(circle,rgba(37,99,235,.13) 0%,rgba(37,99,235,0) 68%); transition:transform .5s cubic-bezier(.28,.11,.32,1); } html .r8x:not(#_r8_) .tf-card:hover:before{transform:scale(1.08)} html .r8x:not(#_r8_) .tf-txt{width:52%;position:relative;z-index:1} html .r8x:not(#_r8_) .tf-hood{ right:32px !important;bottom:30px; height:230px;width:auto;max-width:none;max-height:none;z-index:1; filter:drop-shadow(0 18px 30px rgba(16,24,40,.16)); } html .r8x:not(#_r8_) .tf-card:hover .tf-hood{transform:scale(1.06)} @media (max-width:980px){ html .r8x:not(#_r8_) .bs-close{padding:80px 0 !important} html .r8x:not(#_r8_) .bs-close .wrap{padding:48px 40px 46px;border-radius:26px} html .r8x:not(#_r8_) .bs-sign{margin-top:36px} html .r8x:not(#_r8_) .tf-card{min-height:356px;padding:36px 32px} html .r8x:not(#_r8_) .tf-hood{height:186px;right:22px !important;bottom:24px} html .r8x:not(#_r8_) .tf-card:before{width:250px;height:250px;right:-34px;bottom:-50px} } @media (max-width:520px){ html .r8x:not(#_r8_) .bs-close{padding:54px 0 !important} html .r8x:not(#_r8_) .bs-close .wrap{padding:34px 22px 32px;border-radius:20px} html .r8x:not(#_r8_) .bs-sign{margin-top:26px} /* 사진이 absolute 라 카드가 짧으면 overflow:hidden 에 잘린다 → 최소 높이 확보 */ html .r8x:not(#_r8_) .tf-card{min-height:196px;padding:28px 24px} html .r8x:not(#_r8_) .tf-txt{width:60%} html .r8x:not(#_r8_) .tf-hood{height:138px;right:16px !important;bottom:18px} html .r8x:not(#_r8_) .tf-card:before{width:180px;height:180px;right:-30px;bottom:-40px} }