/* usung-r13-tech-b.css — 기술력 페이지 전면 리디자인 · 2/2
 *   대상: 브랜드스토리 4구간(.bs-open · .bs-ch · .bs-bridge · .bs-close)
 *   1/2 는 usung-r13-tech.css (히어로·국내최초·인증·통계·설치현장).
 *
 * 바꾼 구성
 *   오프닝  2단 + 겹친 사진 콜라주 → 가운데 정렬 1단 + 아래 2장 나란히
 *   챕터    배경의 거대한 유령 숫자(210px) 제거 · 인용 좌측 바 제거
 *   꼬리말  테두리 알약 → 파란 텍스트 링크
 *   브릿지  남색 + 파란 광채 → #f5f5f7 위 큰 문장
 *   클로징  남색 그라디언트 + 광채 → 검정 + 단색 서명
 *
 * ★ background-clip:text 를 쓰는 .bs-h .hl · .bs-sign 은 background 를 건드리지
 *   않고 -webkit-text-fill-color 만 덮어쓴다(글자 사라짐 회귀 차단).
 */

/* ── 오프닝 ─────────────────────────────────────────────────────────── */
html .r8x:not(#_r8_) .bs-open{
  background-image:none;background-color:#000;padding:140px 0 130px;
}
html .r8x:not(#_r8_) .bs-open:before{display:none}
/* 2단 + 겹친 사진 2장(f1/f2, 6px 테두리)은 편집 디자인이지 애플이 아니다.
 * 한 단으로 세우고 사진은 아래에 같은 크기로 나란히 놓는다. */
html .r8x:not(#_r8_) .bs-open .wrap{display:block;text-align:center}
html .r8x:not(#_r8_) .bs-k{font-size:15px;letter-spacing:0;font-weight:600;color:#6e6e73}
html .r8x:not(#_r8_) .bs-k i{display:none}
html .r8x:not(#_r8_) .bs-since{border-color:rgba(255,255,255,.18);margin-top:20px}
html .r8x:not(#_r8_) .bs-since em{font-size:12px;letter-spacing:.1em;font-weight:600;color:#6e6e73}
html .r8x:not(#_r8_) .bs-since b{font-weight:600;font-size:15px}
html .r8x:not(#_r8_) .bs-h{
  font-size:64px;font-weight:600;letter-spacing:-.04em;line-height:1.06;
  max-width:900px;margin:22px auto 0;
}
html .r8x:not(#_r8_) .bs-h .hl{-webkit-text-fill-color:#60A5FA}
html .r8x:not(#_r8_) .bs-lines{align-items:center;max-width:720px;margin:36px auto 0;gap:8px}
html .r8x:not(#_r8_) .bs-lines span{font-size:19px;line-height:1.6;color:#86868b;font-weight:400}
/* 가운데 정렬에서 좌측 바는 축이 어긋나 보인다. */
html .r8x:not(#_r8_) .bs-lines .q{
  color:#f5f5f7 !important;font-weight:500;padding-left:0;border-left:0 !important;
}
html .r8x:not(#_r8_) .bs-stmt{
  max-width:820px;margin:34px auto 0;
  font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.36;
}
html .r8x:not(#_r8_) .bs-ph{position:static;height:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:20px;margin-top:72px}
html .r8x:not(#_r8_) .bs-ph .f1,
html .r8x:not(#_r8_) .bs-ph .f2{
  position:static;left:auto;right:auto;top:auto;bottom:auto;
  width:auto;height:auto;aspect-ratio:4/3;
  border:0;border-radius:28px;box-shadow:none;background:#1d1d1f;
}

/* ── 챕터 ───────────────────────────────────────────────────────────── */
html .r8x:not(#_r8_) .bs-chs{background:#fff}
html .r8x:not(#_r8_) .bs-ch{
  background-image:none;background-color:#fff;color:#1d1d1f;padding:140px 0;
}
html .r8x:not(#_r8_) .bs-ch.dark{background-image:none;background-color:#000;color:#f5f5f7}
/* 배경의 210px 유령 숫자 — 애플에 없는 장식이다. */
html .r8x:not(#_r8_) .bs-ghost{display:none !important}
html .r8x:not(#_r8_) .bs-ch .wrap{gap:72px}
html .r8x:not(#_r8_) .bs-no{
  font-size:15px;letter-spacing:0;font-weight:600;color:#6e6e73 !important;
}
html .r8x:not(#_r8_) .bs-no i{display:none !important}
html .r8x:not(#_r8_) .bs-ch.dark .bs-no{color:#86868b !important}
html .r8x:not(#_r8_) .bs-en{
  font-size:64px;font-weight:600;letter-spacing:-.04em;line-height:1;
  color:#1d1d1f;margin:14px 0 6px;
}
html .r8x:not(#_r8_) .bs-ch.dark .bs-en{color:#f5f5f7}
html .r8x:not(#_r8_) .bs-kr{font-size:17px;font-weight:500;letter-spacing:0;color:#6e6e73}
html .r8x:not(#_r8_) .bs-ch.dark .bs-kr{color:#86868b}
/* 리드는 본문 위계의 일부다 — 파랑은 링크에만 남긴다. */
html .r8x:not(#_r8_) .bs-lead{
  margin:32px 0 0;font-size:24px;font-weight:600;letter-spacing:-.028em;color:#1d1d1f;
}
html .r8x:not(#_r8_) .bs-ch.dark .bs-lead{color:#f5f5f7 !important}
html .r8x:not(#_r8_) .bs-body p{font-size:18px;line-height:1.62;color:#6e6e73;margin:0 0 10px}
html .r8x:not(#_r8_) .bs-ch.dark .bs-body p{color:#a1a1a6}
/* 인용은 좌측 바 없이 큰 활자만으로 세운다. */
html .r8x:not(#_r8_) .bs-q{
  margin:36px 0 0;padding:0;border-left:0 !important;
  font-size:32px;font-weight:600;letter-spacing:-.032em;line-height:1.28;color:#1d1d1f;
}
html .r8x:not(#_r8_) .bs-ch.dark .bs-q{color:#fff}
html .r8x:not(#_r8_) .bs-res{margin:28px 0 0;font-size:18px;line-height:1.6;color:#6e6e73}
html .r8x:not(#_r8_) .bs-res b{color:#1d1d1f !important;font-weight:600}
html .r8x:not(#_r8_) .bs-ch.dark .bs-res{color:#a1a1a6}
html .r8x:not(#_r8_) .bs-ch.dark .bs-res b{color:#f5f5f7 !important}
/* 테두리 알약 → 파란 텍스트 링크 */
html .r8x:not(#_r8_) .bs-tail{
  margin-top:26px;padding:0;border:0;border-radius:0;
  font-size:18px;font-weight:500;letter-spacing:-.02em;color:#2563EB;
}
html .r8x:not(#_r8_) .bs-ch.dark .bs-tail{color:#60A5FA;border:0}
html .r8x:not(#_r8_) .bs-media{gap:16px;height:480px}
html .r8x:not(#_r8_) .bs-vid,
html .r8x:not(#_r8_) .bs-shots figure{border-radius:28px;box-shadow:none;background:#1d1d1f}
html .r8x:not(#_r8_) .bs-vcap i{background:#60A5FA}

/* ── 브릿지 ─────────────────────────────────────────────────────────── */
html .r8x:not(#_r8_) .bs-bridge{
  background-image:none;background-color:#f5f5f7;color:#1d1d1f;padding:130px 0;
}
html .r8x:not(#_r8_) .bs-bridge:before{display:none}
html .r8x:not(#_r8_) .bs-bridge p{
  font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1.32;
  max-width:900px;margin:0 auto;
}
html .r8x:not(#_r8_) .bs-bridge b{color:#2563EB !important}

/* ── 클로징 ─────────────────────────────────────────────────────────── */
html .r8x:not(#_r8_) .bs-close{
  background-image:none;background-color:#000;padding:150px 0;
}
html .r8x:not(#_r8_) .bs-close:before{display:none}
html .r8x:not(#_r8_) .bs-cl-lines{gap:12px;margin-bottom:34px}
html .r8x:not(#_r8_) .bs-cl-lines span{
  font-size:24px;font-weight:500;letter-spacing:-.03em;color:#86868b;
}
html .r8x:not(#_r8_) .bs-cl-body{font-size:19px;line-height:1.7;color:#86868b;max-width:760px}
html .r8x:not(#_r8_) .bs-cl-body b{color:#f5f5f7;font-weight:600}
html .r8x:not(#_r8_) .bs-sign{
  margin-top:56px;font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1.15;
  -webkit-text-fill-color:#f5f5f7;
}
html .r8x:not(#_r8_) .bs-sign-s{
  margin-top:16px;font-size:13px;letter-spacing:.16em;font-weight:600;color:#6e6e73;
}

/* ── 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width:980px){
  html .r8x:not(#_r8_) .bs-open{padding:92px 0 88px}
  html .r8x:not(#_r8_) .bs-h{font-size:42px}
  html .r8x:not(#_r8_) .bs-stmt{font-size:24px}
  html .r8x:not(#_r8_) .bs-ph{margin-top:52px;gap:16px}
  html .r8x:not(#_r8_) .bs-ch{padding:92px 0}
  html .r8x:not(#_r8_) .bs-ch .wrap{gap:44px}
  html .r8x:not(#_r8_) .bs-en{font-size:44px}
  html .r8x:not(#_r8_) .bs-lead{font-size:21px}
  html .r8x:not(#_r8_) .bs-q{font-size:25px}
  /* ★ height:auto 로 두면 안 된다 — .bs-vid video 와 .bs-shots img 가 height:100%
   *   라 부모 높이가 확정되지 않으면 내재 크기(세로 640x1138)로 튄다. */
  html .r8x:not(#_r8_) .bs-media{height:430px}
  html .r8x:not(#_r8_) .bs-bridge{padding:88px 0}
  html .r8x:not(#_r8_) .bs-bridge p{font-size:28px}
  html .r8x:not(#_r8_) .bs-close{padding:96px 0}
  html .r8x:not(#_r8_) .bs-sign{font-size:38px}
}
@media (max-width:520px){
  html .r8x:not(#_r8_) .bs-open{padding:64px 0 60px}
  html .r8x:not(#_r8_) .bs-h{font-size:31px}
  html .r8x:not(#_r8_) .bs-lines span{font-size:16px}
  html .r8x:not(#_r8_) .bs-stmt{font-size:20px}
  html .r8x:not(#_r8_) .bs-ph{grid-template-columns:1fr;margin-top:36px}
  html .r8x:not(#_r8_) .bs-ch{padding:60px 0}
  html .r8x:not(#_r8_) .bs-en{font-size:34px}
  html .r8x:not(#_r8_) .bs-kr{font-size:15px}
  html .r8x:not(#_r8_) .bs-lead{font-size:18px;margin-top:24px}
  html .r8x:not(#_r8_) .bs-body p{font-size:16px}
  html .r8x:not(#_r8_) .bs-q{font-size:21px;margin-top:26px}
  html .r8x:not(#_r8_) .bs-res{font-size:16px}
  html .r8x:not(#_r8_) .bs-media{height:330px}
  html .r8x:not(#_r8_) .bs-tail{font-size:16px}
  html .r8x:not(#_r8_) .bs-bridge{padding:56px 0}
  html .r8x:not(#_r8_) .bs-bridge p{font-size:21px}
  html .r8x:not(#_r8_) .bs-close{padding:68px 0}
  html .r8x:not(#_r8_) .bs-cl-lines span{font-size:18px}
  html .r8x:not(#_r8_) .bs-cl-body{font-size:15.5px}
  html .r8x:not(#_r8_) .bs-sign{font-size:26px}
  html .r8x:not(#_r8_) .bs-sign-s{font-size:11.5px;letter-spacing:.14em}
}