/* usung-r13-tech.css — 기술력 페이지(#v-tech) 전면 리디자인 · 1/2 * 대상: 페이지 바탕 · 히어로 · 국내최초 · 인증 · 통계 · 설치현장 * 브랜드스토리(.bs-*)는 usung-r13-tech-b.css 로 나눠 담았다(파일 300줄 상한). * * usung-r12-tech.css 를 대체한다. r12 는 색·굵기만 바꾼 톤 패스여서 * "애플스럽지 않다"는 지적이 그대로였다. 이번엔 구성을 바꾼다. * 히어로 달리는 배경사진·베일·스윕 제거 → 검정 바탕에 큰 활자만 * 국내최초 4열 작은 카드 → 2열 큰 타일 · 링크는 flex 로 바닥 정렬 * 뱃지 그라디언트 알약 → 회색 캡션 텍스트 * 통계 회색 라운드 상자 제거 → 흰 바탕 위 큰 숫자 * 면 그림자·테두리 없음 · 리프트 호버 없음 · 모서리 22~28px * 활자 굵기 600 · 자간 -.03~-.04em · 표제 48~80px * 여백 130 / 110 / 56px 리듬 * * index_v6.html 불변. 런타임 오버레이만 사용한다. * usung-r8.css 는 usung-r8-mount.js 가 에 append 하므로 이 정적 * 를 항상 이긴다 → html 을 붙여 (1,2,1) 이상을 확보하고, r8/r10/r11 이 * !important 로 잡은 자리는 여기서도 !important 를 붙인다(같은 명시도면 * 나중에 로드되는 이 파일이 이긴다 — inject.js 에서 r11·r12 뒤에 싣는다). * * ★ background-clip:text 를 쓰는 곳(.th-h1 .hl)의 background 는 건드리지 않는다. * 단색으로 눕힐 때도 -webkit-text-fill-color 만 덮어쓴다 — 글자가 사라지는 * 회귀 경로(단축 속성이 clip 을 리셋)를 아예 만들지 않기 위해서다. */ /* ── 페이지 바탕 ───────────────────────────────────────────────────── * usung-r8.css:545 의 #v-tech{background:var(--bg)} 가 청회색 #f4f6fa 다. * 자기 배경이 없는 .th-firsts · .th-stats 로 그 색이 비쳐 흰 섹션과 계단이 * 진다(457e649 에서 확인). 바탕을 흰색으로 눕힌다. */ html .r8x:not(#_r8_) #v-tech{background-color:#fff} html .r8x:not(#_r8_) .th-firsts, html .r8x:not(#_r8_) .th-stats{background-color:#fff} /* ── 히어로 ─────────────────────────────────────────────────────────── * 배경사진(cat_led.jpg)이 28~44초 켄번즈로 계속 움직이고 그 위에 베일 2겹과 * 사선 스윕이 얹혀 있었다. 애플의 표제 화면은 정지된 단색 위 활자뿐이다. * 셋을 모두 끄고 활자 크기로만 말한다. */ html .r8x:not(#_r8_) .th-hero{ background-color:#000;background-image:none; padding:150px 0 140px !important;text-align:center; } html .r8x:not(#_r8_) .th-bg, html .r8x:not(#_r8_) .th-veil, html .r8x:not(#_r8_) .th-hero .hero-sweep{display:none !important} html .r8x:not(#_r8_) .th-kick{ font-size:17px;letter-spacing:0;font-weight:600;color:#6e6e73;text-transform:none; } html .r8x:not(#_r8_) .th-h1{ font-size:80px;font-weight:600;letter-spacing:-.04em;line-height:1.05; margin:18px 0 0;color:#f5f5f7; } /* 그라디언트 → 단색. background 는 그대로 두고 글자 채움색만 덮는다. */ html .r8x:not(#_r8_) .th-h1 .hl{-webkit-text-fill-color:#60A5FA;color:#60A5FA !important} html .r8x:not(#_r8_) .th-sub{ margin:26px auto 0;max-width:640px; font-size:21px;line-height:1.5;color:#86868b;font-weight:400; } /* ── 국내최초 ───────────────────────────────────────────────────────── * 4열 368px 카드는 글자·사진 어느 쪽도 크게 놓을 자리가 없었다. 2열로 줄여 * 타일을 키운다. 히어로 위로 118px 겹쳐 올리던 것도 푼다(애플은 겹치지 않는다). */ html .r8x:not(#_r8_) .th-firsts{margin-top:0 !important;padding:130px 0} html .r8x:not(#_r8_) .th-first{grid-template-columns:repeat(2,1fr);gap:24px} html .r8x:not(#_r8_) .tf-card{ display:flex;align-items:stretch; min-height:340px;background:#f5f5f7;border:0;border-radius:28px; box-shadow:none;padding:44px 40px; transition:background-color .35s cubic-bezier(.28,.11,.32,1); } /* 애플은 카드를 들어올리지 않는다 — 면 밝기만 바뀐다. */ html .r8x:not(#_r8_) .tf-card:hover{transform:none;background:#ededf0;box-shadow:none} /* 「자세히 보기」 기준선을 min-height 예약이 아니라 flex 바닥 정렬로 맞춘다. * r11 의 .tf-title{min-height:2.5em!important} 는 이 방식에서 불필요하다 * (제목 1줄 카드에 빈 줄이 생길 뿐이다) → 0 으로 되돌린다. */ html .r8x:not(#_r8_) .tf-txt{width:58%;display:flex;flex-direction:column} /* ★ margin 은 !important 라야 한다 — r10-redesign:61 이 같은 명시도(1,2,1)로 * margin:12px 0 7px 를 !important 로 잡는다. 뒤에 로드돼도 못 이긴다. */ html .r8x:not(#_r8_) .tf-title{ font-size:29px;font-weight:600;letter-spacing:-.028em;line-height:1.22; color:#1d1d1f;margin:12px 0 12px !important;min-height:0 !important; } html .r8x:not(#_r8_) .tf-desc{font-size:16px;line-height:1.55;color:#6e6e73;min-height:0} html .r8x:not(#_r8_) .tf-more{ margin-top:auto;padding-top:22px;font-size:16px;font-weight:500;color:#2563EB; } /* 뱃지 — r10-tone 이 background 단축 + !important 로 블루 그라디언트를 잡고 * 있다. 같은 명시도(1,2,1)라 나중에 로드되는 이 파일이 이긴다. 알약을 벗기고 * 제목 위 회색 캡션으로 눕힌다. */ html .r8x:not(#_r8_) .tf-badge{ background-image:none !important;background-color:transparent !important; box-shadow:none !important;color:#6e6e73; padding:0;border-radius:0;font-size:14px;font-weight:600;letter-spacing:0; } /* proto_assets/tf_*.png 는 원본이 96~124px 밖에 안 된다(잔여업무 A-16). * 타일이 커졌다고 사진까지 키우면 확대가 심해지므로 150px 로 묶어 둔다. * ★ right 는 !important 라야 한다 — r10-redesign:56 이 같은 명시도(1,2,1)로 * right:0 를 !important 로 잡아 사진이 카드 오른쪽 모서리에 붙는다(실측). */ html .r8x:not(#_r8_) .tf-hood{ right:26px !important;bottom:26px;height:auto;width:auto;max-width:150px;max-height:64%; filter:none;transition:transform .5s cubic-bezier(.28,.11,.32,1); } html .r8x:not(#_r8_) .tf-card:hover .tf-hood{transform:scale(1.04)} /* ── 인증 ───────────────────────────────────────────────────────────── * r11 이 .th-cert 의 padding·text-align 을 !important 로 잡았다(24·30행). * 독립 섹션 표제는 가운데로 되돌린다. */ html .r8x:not(#_r8_) .th-cert{ background:#fff;padding:130px 0 0 !important;text-align:center !important; } html .r8x:not(#_r8_) .th-cap-k{ font-size:17px;letter-spacing:0;font-weight:600;color:#6e6e73;text-transform:none; } html .r8x:not(#_r8_) .th-cap-h{ font-size:48px;font-weight:600;letter-spacing:-.032em; color:#1d1d1f !important;margin:8px 0 12px; } html .r8x:not(#_r8_) .th-cap-s{ font-size:19px;line-height:1.5;color:#6e6e73;max-width:680px;margin:0 auto; } html .r8x:not(#_r8_) .cert-row{gap:18px;margin-top:56px} html .r8x:not(#_r8_) .cert-item{ background:#f5f5f7;border:0;border-radius:22px;box-shadow:none;padding:16px; transition:background-color .3s cubic-bezier(.28,.11,.32,1); } html .r8x:not(#_r8_) .cert-item:hover{transform:none;background:#ededf0;box-shadow:none} html .r8x:not(#_r8_) .cert-thumb{background:#fff;border-radius:14px} html .r8x:not(#_r8_) .cert-cap{margin-top:12px;font-size:12.5px;font-weight:500;color:#6e6e73} /* ── 통계 ───────────────────────────────────────────────────────────── * 회색 라운드 상자에 4칸을 가두고 구분선을 그어 두었다. 애플은 숫자를 흰 * 바탕 위에 그대로 크게 놓는다. 상자·테두리·구분선을 모두 없앤다. */ html .r8x:not(#_r8_) .th-stats{margin:110px 0 0 !important} html .r8x:not(#_r8_) .th-stats .wrap{ background-image:none;background-color:transparent;border:0;border-radius:0; box-shadow:none;padding:0 24px;gap:32px; } html .r8x:not(#_r8_) .st-c:not(:last-child):after{display:none} html .r8x:not(#_r8_) .st-n{ font-size:76px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#1d1d1f; } html .r8x:not(#_r8_) .st-n em{font-size:34px;font-weight:600;color:#2563EB} html .r8x:not(#_r8_) .st-l{margin-top:16px;font-size:16px;letter-spacing:0;color:#6e6e73} /* ── 설치 현장 ─────────────────────────────────────────────────────── */ html .r8x:not(#_r8_) .th-sites{ background:#fff;padding:130px 0 130px !important;text-align:center; } html .r8x:not(#_r8_) .site-grid{gap:22px;margin-top:56px;text-align:left} html .r8x:not(#_r8_) .site-c{ background:#f5f5f7;border:0;border-radius:22px;box-shadow:none; transition:background-color .3s cubic-bezier(.28,.11,.32,1); } html .r8x:not(#_r8_) .site-c:hover{transform:none;background:#ededf0;box-shadow:none} html .r8x:not(#_r8_) .site-meta{padding:20px 22px 24px} html .r8x:not(#_r8_) .site-loc{ font-size:18px;font-weight:600;letter-spacing:-.015em;color:#1d1d1f; } html .r8x:not(#_r8_) .site-desc{font-size:14.5px;line-height:1.45;color:#6e6e73} /* ── 반응형 ─────────────────────────────────────────────────────────── */ @media (max-width:980px){ html .r8x:not(#_r8_) .th-hero{padding:96px 0 100px !important} html .r8x:not(#_r8_) .th-h1{font-size:52px} html .r8x:not(#_r8_) .th-kick{font-size:16px} html .r8x:not(#_r8_) .th-sub{font-size:18px} html .r8x:not(#_r8_) .th-firsts{padding:84px 0} html .r8x:not(#_r8_) .tf-card{min-height:352px;padding:34px 30px} html .r8x:not(#_r8_) .tf-title{font-size:24px} html .r8x:not(#_r8_) .tf-hood{max-width:124px;right:20px !important;bottom:20px} html .r8x:not(#_r8_) .th-cert{padding:88px 0 0 !important} html .r8x:not(#_r8_) .th-cap-h{font-size:36px} html .r8x:not(#_r8_) .th-cap-s{font-size:17px} html .r8x:not(#_r8_) .th-stats{margin:76px 0 0 !important} html .r8x:not(#_r8_) .st-n{font-size:56px} html .r8x:not(#_r8_) .th-sites{padding:88px 0 88px !important} } @media (max-width:520px){ html .r8x:not(#_r8_) .th-hero{padding:68px 0 72px !important} html .r8x:not(#_r8_) .th-h1{font-size:36px} html .r8x:not(#_r8_) .th-kick{font-size:14px} html .r8x:not(#_r8_) .th-sub{font-size:16px} html .r8x:not(#_r8_) .th-firsts{padding:56px 0 60px} /* ★ r8:749 의 1열 규칙은 (1,1,1) 이라 위 2열 선언(1,2,1)에 진다. 미디어쿼리는 * 명시도를 더하지 않으므로 여기서 직접 1열로 되돌려야 한다. */ html .r8x:not(#_r8_) .th-first{grid-template-columns:1fr;gap:16px} /* 1열로 쌓이면 옆 카드와 맞출 기준선이 없다 → 높이 예약을 푼다. */ html .r8x:not(#_r8_) .tf-card{min-height:0;padding:28px 24px} html .r8x:not(#_r8_) .tf-txt{width:62%} html .r8x:not(#_r8_) .tf-title{font-size:21px;margin:10px 0 10px !important} html .r8x:not(#_r8_) .tf-desc{font-size:14.5px} html .r8x:not(#_r8_) .tf-more{padding-top:16px;font-size:14.5px} html .r8x:not(#_r8_) .tf-badge{font-size:12.5px} html .r8x:not(#_r8_) .tf-hood{max-width:100px;right:14px !important;bottom:14px} html .r8x:not(#_r8_) .th-cert{padding:60px 0 0 !important} html .r8x:not(#_r8_) .th-cap-h{font-size:28px} html .r8x:not(#_r8_) .th-cap-k{font-size:15px} html .r8x:not(#_r8_) .th-cap-s{font-size:15.5px} html .r8x:not(#_r8_) .cert-row{gap:12px;margin-top:34px} html .r8x:not(#_r8_) .th-stats{margin:52px 0 0 !important} html .r8x:not(#_r8_) .th-stats .wrap{padding:0 16px;gap:26px} html .r8x:not(#_r8_) .st-n{font-size:40px} html .r8x:not(#_r8_) .st-n em{font-size:20px} html .r8x:not(#_r8_) .st-l{margin-top:10px;font-size:14px} html .r8x:not(#_r8_) .th-sites{padding:60px 0 64px !important} html .r8x:not(#_r8_) .site-grid{gap:16px;margin-top:34px} }