/* usung-r33.css — 승연 요청 ③ 모바일 기술력 최적화 · ④ 모바일 제품소개 히어로
 *
 * cssLink 맨 끝(usung-r32.css 다음)에 실린다. 여기서 덮는 규칙은 전부
 * `html .r8x:not(#_r8_) …`(명시도 1,2,1) 또는 `html .r8x:not(#_r8_) .a .b …` 형태로
 * **상대와 같은 명시도**를 맞춰 두고 로드 순서로 이긴다. !important 를 쓴 곳은
 * 상대가 !important 인 경우뿐이고 각각 이유를 적었다.
 *
 * 되돌리기: 이 파일 삭제 + api/inject.js 의 cssLink 링크 1줄 삭제.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * ③-A 【핵심 버그】 3번 챕터(PART 03 TENSION)만 모바일에서 2단으로 남는다
 * ═══════════════════════════════════════════════════════════════════════
 * usung-r16-tech.css:40
 *   html .r8x:not(#_r8_) .bs-ch.rev .wrap{grid-template-columns:1.05fr .95fr}
 * 은 **미디어쿼리가 없다.** 명시도 (1,4,1).
 * 모바일 1단 규칙인 usung-r8.css:667
 *   @media(max-width:980px){ .r8x:not(#_r8_) .bs-ch .wrap{grid-template-columns:1fr} }
 * 은 (1,3,0) — 클래스 하나 차이로 진다. 미디어쿼리는 명시도를 더하지 않는다.
 *
 * 결과: `.rev` 가 붙는 챕터(usung-r8-tech.js:123 의 i%2 → BH[1] = PART 03)만
 * 393px 에서도 2단을 유지한다. 실측 158px / 143px — 동영상이 폭 95px 짜리
 * 세로 막대가 되고(.bs-media 는 height 330px 고정), 옆 「TENSION」(34px)은
 * 143px 칸에 못 들어가 .bs-ch{overflow:hidden} 에 조용히 잘린다.
 * ★ 사용자가 「모바일 기술력이 최적화 안됨」 이라고 한 것의 실체가 이것이다.
 *
 * 고치는 법: **같은 명시도(1,4,1)로 다시 선언한다.** 뒤에 실리므로 이긴다.
 * !important 는 쓰지 않는다 — 상대가 !important 가 아니고, 덧씌우면 나중에
 * 데스크톱 값을 조정할 때 이 줄이 먼저 걸린다.
 * ★ 980px 로 끊는 이유: r8:667 과 같은 지점이어야 짝수/홀수 챕터가 같은 폭에서
 *   동시에 1단이 된다. 다른 값을 쓰면 그 사이 구간만 한쪽이 2단으로 남는다.
 */
@media (max-width: 980px) {
  html .r8x:not(#_r8_) .bs-ch.rev .wrap { grid-template-columns: 1fr; }
}

/* ③-B 「TENSION」 같은 영문 대문자 제목이 잘리지 않게 하는 보험.
 * usung-r8.css:611 이 .bs-en 에 `word-break:keep-all` 을 걸어 둬서 영어 단어는
 * 어떤 폭에서도 줄바꿈되지 않는다. A 를 고치면 폭이 345px 가 되어 지금 문구
 * (SWING / TENSION / DUAL DIECASTING)는 전부 들어가지만, 나중에 더 긴 단어가
 * 들어와도 잘리지 않도록 마지막 수단으로만 끊게 해 둔다.
 * ★ .bs-kr(한글)에는 걸지 않는다 — 한글에 anywhere 를 걸면 조사 단위로 끊긴다. */
html .r8x:not(#_r8_) .bs-en { overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════════════════════════════
 * ③-C 「국내 최초」 4카드 — 521~860px 구간에서 글자와 사진이 겹친다
 * ═══════════════════════════════════════════════════════════════════════
 * usung-r13-tech.css:63 이 .th-first 를 **2열**로 잡고, 1열로 되돌리는 건
 * usung-r13-tech.css:185 의 @media(max-width:520px) 뿐이다. 그 사이가 비어 있다.
 *
 * 560px 실측 — .wrap 은 padding 0 24px 이므로 내용폭 512px,
 *   카드 = (512 − gap24) / 2 = 244px, 좌우 패딩 28px(r16:62) → 안쪽 188px.
 *   글 칸 .tf-txt 는 52%(r15:94) = 97.8px.
 *   사진 .tf-hood 는 height 158px(r16:63) · max-width:none(r15:96) 이라
 *   원본 비율대로 96~122px 까지 벌어지고 right:20px → 오른쪽에서 142px 를 먹는다.
 *   188 − 142 = 46px … **글 칸(97.8px)과 46px 넘게 겹친다.**
 * 720px 에서도 13px 겹치고, 약 800px 을 넘어야 비로소 안 겹친다.
 * → 아이패드 세로(768px)가 정확히 이 구간에 있다.
 *
 * 폭을 재분배하는 대신 **1열로 내린다.** 이 구간의 카드는 2열을 감당할 폭이
 * 애초에 없다(안쪽 188~268px). 1열이면 560px 에서 안쪽이 456px 로 넓어져
 * 글 237px · 사진 142px 로 77px 여유가 생긴다. 폭 재분배로는 못 만드는 값이다.
 * ★ 860px 으로 끊는 건 이미 이 리포가 쓰는 구간이고(380/520/560/640/720/860/…),
 *   겹침이 사라지는 실측 지점(~800px)보다 조금 바깥이라 안전 여유가 있다.
 * ★ gap 은 r13:185 의 모바일 값 16px 을 그대로 쓴다.
 */
@media (max-width: 860px) {
  html .r8x:not(#_r8_) .th-first { grid-template-columns: 1fr; gap: 16px; }
}

/* 1열이 되면 옆 카드와 맞출 기준선이 사라지므로 높이 예약(r16:63 의 214px)이
 * 그대로 빈칸이 된다. 이 폭의 글 자연높이는
 *   패딩48 + 뱃지19 + 여백16 + 제목29 + 본문50 ≈ 162px.
 * 그래도 214 → 162 로 다 내리지는 않는다 — .tf-hood 가 absolute(height 158 ·
 * bottom 16)이고 .tf-card 는 overflow:hidden 이라 **174px 이 절대 하한**이다.
 * 190px = 하한 위 16px. 24px 만 걷는다.
 * ★ 반드시 min-width:521px 로 아래를 막는다. 521px 미만에서는 r16-tech.css:69 가
 *   min-height:0(내용 최소)로 이미 내려놨는데, 이 파일이 뒤에 실리므로 구간을
 *   안 막으면 393px 에서 그 0 을 190 으로 되돌려 버린다.
 */
@media (min-width: 521px) and (max-width: 860px) {
  html .r8x:not(#_r8_) .tf-card { min-height: 190px; }
}

/* ③-D 520px 이하 — 글 칸이 사진에 밀려 본문이 3줄로 무너지기 직전이다.
 * 393px 실측 — 내용폭 345px, 카드 패딩 22px(r16:69) → 안쪽 301px.
 *   .tf-txt 는 60%(r15:116) = 180.6px.
 *   .tf-hood 는 height 118px(r16:70) 이고 max-width 가 풀려 있어 원본 비율대로
 *   72~91px. right:14px → 오른쪽에서 86~105px 만 쓴다.
 *   → 남는 120px 중 **29~48px 이 아무것도 없는 죽은 폭**이다.
 * 그런데 .tf-desc 는 <br> 로 2줄이 강제돼 있고 그 줄 길이가 14.5px 기준
 * 약 181px — 가용 180.6px 을 **0.4px 넘긴다**. 지금은 우연히 버티거나 이미
 * 3줄로 접혀 있을 수 있는 상태다(폰트 렌더링 차이로 갈린다).
 *
 * → 죽은 폭을 글 쪽으로 넘긴다. 사진은 조금만 줄인다.
 *   사진 폭 상한을 76px 로 못 박고(비율 유지 · object-fit:contain 은 r8:570),
 *   오른쪽 예약을 right14 + 사진76 + 간격10 = 100px 으로 계산해
 *   .tf-txt 를 calc(100% − 100px) = 201px 로 준다. 180.6 → 201 (+11%).
 *   본문 181px 선을 20px 여유로 넘어선다.
 * ★ 사진 높이를 118 → 104 로 줄여도 카드는 안 짧아진다 — 이 폭에서 카드 높이를
 *   정하는 건 사진(104+12=116)이 아니라 글(≈190px)이다. 즉 손해가 없다.
 * ★ right 는 건드리지 않는다 — r16:70 이 !important 로 잡고 있어 다시 쓰면
 *   r10-redesign:56 의 right:0 !important 와 다시 싸우게 된다.
 */
@media (max-width: 520px) {
  html .r8x:not(#_r8_) .tf-txt  { width: calc(100% - 100px); }
  html .r8x:not(#_r8_) .tf-hood { height: 104px; max-width: 76px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ④ 「모바일 제품소개 히어로 배경화면 조금 잘 보이도록 + 푸른색 그라데이션」
 * ═══════════════════════════════════════════════════════════════════════
 * 대상은 .hero — usung-r8-view.js:8 의 v-main(제품소개) **한 곳뿐**이다.
 * 홈 히어로도, 기술력의 .th-hero 도 아니다. 곁가지 피해가 없다.
 *
 * 지금 배경이 안 보이는 이유는 셋이 곱해진 결과다.
 *  (1) usung-r10-fix.css:71  .hero-bg{filter:blur(10px) brightness(1.12)
 *      saturate(.32) contrast(.82) !important} — 채도를 3분의 1로 깎아 회색이다.
 *  (2) usung-r17.css:103 @media(max-width:960px) 의 .hero-veil 이 393px 의
 *      **승자**다(r10-fix:80 · r8:499 · r17:95 를 전부 이긴다). 값은
 *      linear-gradient(180deg, .97 → .93 62% → .74) — 제일 옅은 데가 74% 다.
 *      즉 화면 어디에도 사진이 드러나는 구간이 없다.
 *  (3) 데스크톱 베일은 100deg 가로 방향이라 오른쪽 78~100% 가 거의 투명한데,
 *      모바일에서 180deg 세로로 뒤집히면서 그 투명 구간이 통째로 사라진다.
 *
 * ── ④-a 베일을 세로로 다시 그린다 ──────────────────────────────────────
 * 모바일 레이아웃은 r8:497 이 .hero .wrap 을 1단 + text-align:center 로 만들고
 * r20:102 가 .hero-visual 을 282px 로 잡는다 → **위가 글, 아래가 제품 사진**이다.
 * 그러니 위는 지금처럼 두껍게 두고 **아래쪽만** 연다. 글 대비는 그대로 지킨다.
 *   0~38%   .95 → .92  (hero-kicker · hero-h1 · hero-sub 구간 — 손대지 않는다)
 *   58%     .78        (hero-feats 흰 알약 · hero-cta 버튼 구간 — 자체 배경이 있다)
 *   84~100% 브랜드 블루 .34 → .28 로 교체 → 사진이 비치고 푸른 기가 돈다
 * 색은 새로 만들지 않고 usung-blue-standard.css 의 #3B82F6 / #93C5FD 계열만 쓴다.
 * ★ .hero-veil 은 z-index:1 이고 .hero .wrap 이 z-index:2 다. 즉 베일은 글자와
 *   제품 컷아웃 **뒤**에만 깔린다 — 아래를 열어도 제품 사진이 흐려지지 않는다.
 * ★ background-image 로 쓰고 !important 를 붙인다. 상대(r17:103)가 같은 명시도
 *   (1,2,1) + !important 라 이것 없이는 못 이긴다. 단축 `background` 는 쓰지 않는다
 *   — r10-fix:80 이 단축 + !important 를 들고 있어 형제 선언을 통째로 날린다(§3 함정2).
 */
@media (max-width: 960px) {
  html .r8x:not(#_r8_) .hero-veil {
    background-image: linear-gradient(180deg,
        rgba(244, 248, 253, .95) 0%,
        rgba(238, 244, 252, .92) 38%,
        rgba(226, 238, 255, .78) 58%,
        rgba(147, 197, 253, .34) 84%,
        rgba(59, 130, 246, .28) 100%) !important;
  }

  /* ── ④-b 베일만 걷으면 회색 안개가 드러난다 ─────────────────────────
   * (1) 의 filter 를 모바일에서만 푼다. blur 10 → 3 · saturate .32 → .85.
   * 완전히 풀지 않는 이유: hero-bg.jpg 는 1600×900 인데 .hero-visual 이 282px
   * 로 눌린 세로 박스에 cover 로 들어가 크게 확대된다. 선명하게 두면 확대 얼룩과
   * 제품 컷아웃이 서로 잡아먹는다. 「조금 잘 보이도록」 이 지시다.
   * ★ transform / animation-name 은 건드리지 않는다 — r10-kenburns 가 돌면서
   *   transform 을 계속 덮어쓰므로 여기서 다시 써 봐야 아무 효과가 없고,
   *   애니메이션 이름을 바꾸면 r10-fix:76 의 @keyframes 와 어긋난다.
   * ★ !important 필수 — r10-fix:71 이 같은 명시도(1,2,1)에 !important 다. */
  html .r8x:not(#_r8_) .hero-bg {
    filter: blur(3px) brightness(1.02) saturate(.85) contrast(.95) !important;
  }
}