/* ============================================================
   HERO SHOWREEL — 메인 첫 화면 소개 모션 (2026-10-12)
   - 1장면 = 메인 배너(H1·버튼). 페이지 로드 시 애니메이션 없이 바로 보임(LCP/SEO)
   - 이후 장면이 자동으로 넘어가고 반복. 영상 파일 없이 HTML/CSS 로 렌더링
   - 디자인 토큰은 redesign.css(:root --rd-*) 를 그대로 사용
   - 게이트: .sr-ready(JS 동작) 일 때만 장면 애니메이션. JS 없으면 1장면이 정적으로 보임
   - .sr-static: prefers-reduced-motion → 애니메이션 없이 장면 버튼으로만 전환
   - 크기: .sr-frame 기준 컨테이너 쿼리 단위(cqi). 작은 글씨는 max() 로 최소 크기 보장
============================================================ */
.sr-hero { position: relative; }
.sr-stage {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--rd-navy); color: #fff;
}
/* 기존 히어로와 같은 그리드 패턴 */
.sr-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 70% 0%, #000 30%, transparent 75%);
}
.sr-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(20px); }
.sr-glow--blue { top: -160px; right: -80px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(26,79,214,.34) 0%, transparent 68%); }
.sr-glow--gold { bottom: -260px; left: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(216,168,42,.12) 0%, transparent 66%); }
.sr-stage:not(.sr-static) .sr-glow--blue { animation: sr-drift 14s ease-in-out infinite alternate; }
.sr-stage:not(.sr-static) .sr-glow--gold { animation: sr-drift 18s ease-in-out infinite alternate-reverse; }

/* 내용 프레임: 다른 섹션(.rd-container)과 같은 폭·여백 */
.sr-frame {
  --sr-pad: var(--rd-gutter);
  position: relative; max-width: var(--rd-container); margin: 0 auto;
  height: clamp(580px, calc(100svh - 140px), 680px);
  container-type: inline-size; container-name: sr;
  font-size: 16px;
}

/* ---- 장면 ---- */
.sr-scene {
  position: absolute; inset: 0;
  padding: 4.5cqi var(--sr-pad) 9cqi;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
}
/* 1장면은 마크업에 is-on 이 있어 JS 없이도 보임 */
.sr-scene.is-on { opacity: 1; visibility: visible; }
.sr-scene.is-out { opacity: 0; visibility: visible; transform: translateY(-1.5cqi); }
/* 전환 효과는 플레이어 초기화 뒤에만 (스타일 첫 적용 때 장면이 겹쳐 보이는 것 방지) */
.sr-ready .sr-scene { transition: opacity .6s var(--rd-ease-quint), transform .6s var(--rd-ease-quint), visibility 0s linear .6s; }
.sr-ready .sr-scene.is-on { transition: opacity .6s var(--rd-ease-quint) .15s, visibility 0s; }

.sr-ready .sr-a { opacity: 0; }
.sr-ready .sr-scene.is-on .sr-a { animation: sr-in .8s var(--rd-ease-quint) var(--d, 0s) both; }
.sr-ready .sr-scene.is-on .sr-a--pop { animation-name: sr-pop; animation-duration: .7s; }
.sr-ready .sr-scene.is-on .sr-a--left { animation-name: sr-left; }
.sr-ready .sr-scene.is-out .sr-a { opacity: 1; }
/* 첫 로드의 1장면: 진입 애니메이션 없이 바로 노출 (한 바퀴 돈 뒤 돌아올 때는 애니메이션) */
.sr-ready .sr-scene.is-first .sr-a { opacity: 1; animation: none; }
.sr-static .sr-a { opacity: 1 !important; animation: none !important; }
/* 일시정지: 무대 안의 모든 CSS 애니메이션 정지 */
.sr-stage.is-paused *, .sr-stage.is-paused *::before, .sr-stage.is-paused *::after { animation-play-state: paused !important; }

.sr-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5cqi; align-items: center; }
.sr-kicker { margin: 0; font-size: max(11.5px, 1.05cqi); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-gold); }
.sr-title { margin: 1.4cqi 0 0; font-size: max(26px, 4.1cqi); line-height: 1.16; font-weight: 800; letter-spacing: -.035em; word-break: keep-all; text-wrap: balance; color: #fff; }
.sr-title em { font-style: normal; color: var(--rd-blue-light); }
.sr-sub { margin: 1.6cqi 0 0; font-size: max(15px, 1.55cqi); line-height: 1.6; color: #AEBED8; word-break: keep-all; max-width: 46cqi; }

/* 1) 메인 배너 */
.sr-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; font-size: max(12.5px, 1.02cqi); font-weight: 600; color: #BFD0F0; }
.sr-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-gold); }
/* font-family: 레거시 default.css 의 h1{Noto Sans KR} 를 끊고 본문(Pretendard)과 맞춤 — 다른 장면 제목과 같은 글꼴 */
.sr-h1 { font-family: inherit; margin: 2.2cqi 0 0; font-size: max(34px, 5.2cqi); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; word-break: keep-all; text-wrap: balance; color: #fff; }
.sr-h1 .accent { color: var(--rd-blue-light); }
.sr-lead { margin: 2cqi 0 0; font-size: max(15.5px, 1.48cqi); line-height: 1.65; color: #AEBED8; max-width: 46cqi; word-break: keep-all; }
.sr-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 3cqi; }

/* 연결 다이어그램 (장식) */
.sr-net { position: relative; width: min(100%, 36cqi); aspect-ratio: 1; margin-left: auto; }
.sr-net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sr-net line { stroke: rgba(127,166,240,.45); stroke-width: .35; stroke-dasharray: 1.2 1.8; }
.sr-net-orbit { fill: none; stroke: rgba(255,255,255,.1); stroke-width: .25; stroke-dasharray: .6 1.6; transform-box: fill-box; transform-origin: center; }
.sr-stage:not(.sr-static) .sr-scene--hero.is-on .sr-net line { animation: sr-flow 1.4s linear infinite; }
.sr-stage:not(.sr-static) .sr-scene--hero.is-on .sr-net-orbit { animation: sr-spin 60s linear infinite; }
.sr-net-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 31%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqi;
  background: radial-gradient(circle at 30% 25%, var(--rd-blue-bright), var(--rd-blue) 60%, #1238A3);
  box-shadow: 0 0 0 1cqi rgba(26,79,214,.18), 0 2cqi 5cqi -1cqi rgba(26,79,214,.6);
}
.sr-net-core b { font-size: max(15px, 1.8cqi); font-weight: 800; letter-spacing: -.02em; }
.sr-net-core small { font-size: max(8px, .72cqi); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #CFDcF7; }
.sr-net-pulse { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(127,166,240,.6); transform: translate(-50%, -50%) scale(1); opacity: 0; }
.sr-stage:not(.sr-static) .sr-scene--hero.is-on .sr-net-pulse { animation: sr-pulse 2.8s ease-out infinite; }
.sr-net-node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .7cqi; white-space: nowrap;
  padding: .75cqi 1.25cqi; border-radius: 10cqi;
  background: rgba(11,27,59,.88); border: 1px solid rgba(255,255,255,.16);
  font-size: max(12px, 1.08cqi); font-weight: 600; color: #DCE6F7;
  box-shadow: 0 1cqi 2.4cqi -1cqi rgba(0,0,0,.5);
}
.sr-net-node i { color: var(--rd-gold-2); font-size: 1.1em; }
.sr-stage:not(.sr-static) .sr-scene--hero.is-on .sr-net-node { animation: sr-node-hi 6s ease-in-out calc(var(--k) * 1s) infinite; }

/* 2) 한 팀 — 흐름선 */
.sr-flow { position: relative; list-style: none; margin: 5.2cqi 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.sr-flow::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 3cqi; height: 2px;
  background: linear-gradient(90deg, var(--rd-gold), var(--rd-blue-light));
  transform-origin: left; transform: scaleX(1);
}
.sr-ready .sr-flow::before { transform: scaleX(0); }
.sr-ready .sr-scene.is-on .sr-flow::before { animation: sr-draw 2.2s var(--rd-ease-quart) .9s both; }
.sr-static .sr-flow::before { transform: scaleX(1); animation: none; }
.sr-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3cqi; }
.sr-node {
  width: 6cqi; height: 6cqi; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-navy-2); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 .7cqi var(--rd-navy);
  font-size: 2.2cqi; color: var(--rd-blue-light);
}
.sr-flow li:last-child .sr-node { background: var(--rd-blue); border-color: var(--rd-blue); color: #fff; }
.sr-flow b { font-size: max(14px, 1.45cqi); font-weight: 700; letter-spacing: -.02em; }
.sr-flow small { display: block; margin-top: .3cqi; font-size: max(12px, 1.05cqi); color: var(--rd-fttext); font-weight: 500; }

/* 3) 2010 */
.sr-year { margin-top: 1cqi; font-size: 13cqi; line-height: .95; font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #fff; }
.sr-year span { background: linear-gradient(180deg, #fff 30%, var(--rd-blue-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqi; }
.sr-chips li {
  display: flex; align-items: center; gap: 1.4cqi;
  padding: 1.4cqi 2cqi; border-radius: 1.2cqi;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: max(14px, 1.6cqi); font-weight: 700; letter-spacing: -.02em;
}
.sr-chips i { width: 3.4cqi; height: 3.4cqi; min-width: 28px; min-height: 28px; border-radius: .9cqi; display: flex; align-items: center; justify-content: center; font-size: max(13px, 1.6cqi); background: rgba(216,168,42,.14); color: var(--rd-gold-2); }

/* 4) MICE */
.sr-mice { margin-top: 4cqi; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqi; }
.sr-mice > div { position: relative; padding-top: 2cqi; border-top: 1px solid rgba(255,255,255,.14); }
.sr-mice > div::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--rd-gold); transform-origin: left; }
.sr-ready .sr-mice > div::before { transform: scaleX(0); }
.sr-ready .sr-scene.is-on .sr-mice > div::before { animation: sr-draw .9s var(--rd-ease-quart) calc(var(--d, 0s) + .25s) both; }
.sr-static .sr-mice > div::before { transform: scaleX(1); animation: none; }
.sr-mice .l { display: block; font-size: 9cqi; line-height: .9; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(232,188,69,.85); }
.sr-mice .en { display: block; margin-top: 1.4cqi; font-size: max(11px, 1cqi); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-gold); }
.sr-mice .ko { display: block; margin-top: .5cqi; font-size: max(15px, 1.75cqi); font-weight: 700; letter-spacing: -.02em; }

/* 5) 동시통역 */
.sr-scene--phone .sr-split { grid-template-columns: 1fr 1fr; }
.sr-phone-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.sr-phone {
  position: relative; width: 13.5cqi; aspect-ratio: 9 / 18.5; border-radius: 2.4cqi;
  background: linear-gradient(180deg, #13284F, #0C1D3D); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 3cqi 6cqi -2cqi rgba(0,0,0,.5);
  padding: 2.3cqi 1.5cqi; display: flex; flex-direction: column; gap: 1.4cqi;
}
.sr-phone-top { display: flex; align-items: center; justify-content: space-between; font-size: .9cqi; font-weight: 700; color: #BFD0F0; }
.sr-live { display: inline-flex; align-items: center; gap: .5cqi; color: #FF8A8A; }
.sr-live::before { content: ''; width: .7cqi; height: .7cqi; border-radius: 50%; background: #FF5D5D; }
.sr-ready:not(.sr-static) .sr-scene.is-on .sr-live::before { animation: sr-blink 1.2s ease-in-out infinite; }
.sr-wave { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4cqi; }
.sr-wave i { width: .5cqi; height: 6.5cqi; border-radius: 1cqi; background: linear-gradient(180deg, var(--rd-blue-light), var(--rd-blue)); transform: scaleY(.3); }
.sr-ready:not(.sr-static) .sr-scene.is-on .sr-wave i { animation: sr-wave 1.1s ease-in-out infinite; }
.sr-wave i:nth-child(2n)   { animation-delay: -.25s !important; }
.sr-wave i:nth-child(3n)   { animation-delay: -.55s !important; }
.sr-wave i:nth-child(4n+1) { animation-delay: -.8s !important; }
.sr-lines { display: grid; gap: .7cqi; }
.sr-lines span { display: block; padding: .8cqi .9cqi; border-radius: .7cqi; background: rgba(255,255,255,.07); font-size: .92cqi; line-height: 1.45; color: #DCE6F7; }
.sr-lines span:last-child { background: rgba(26,79,214,.4); color: #fff; }
.sr-hello {
  position: absolute; padding: .8cqi 1.5cqi; border-radius: 10cqi;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: max(12px, 1.3cqi); font-weight: 600; white-space: nowrap; color: #E4ECFA;
}
.sr-ready .sr-hello { opacity: 0; }
.sr-ready:not(.sr-static) .sr-scene.is-on .sr-hello { animation: sr-pop .7s var(--rd-ease-quint) var(--d, 0s) both, sr-float 4s ease-in-out calc(var(--d, 0s) + .7s) infinite alternate; }
.sr-static .sr-hello { opacity: 1; }

/* 6) 고객사 */
.sr-logos { list-style: none; margin: 3.6cqi 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1cqi; }
.sr-logos li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 5.4cqi; min-height: 44px; padding: 0 1cqi; border-radius: 1.1cqi;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  font-size: max(13px, 1.3cqi); font-weight: 700; letter-spacing: -.02em; color: #DCE6F7;
  word-break: keep-all; overflow-wrap: anywhere; line-height: 1.25;
}

/* 7) 문의 */
.sr-scene--cta { align-items: center; text-align: center; }
.sr-scene--cta .sr-sub { max-width: 52cqi; margin-left: auto; margin-right: auto; }
.sr-cta-actions { margin-top: 3.2cqi; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqi; }
.sr-cta-actions .rd-btn { font-size: max(14px, 1.3cqi); padding: max(12px, 1.2cqi) max(20px, 2.2cqi); }
.sr-contact-line { margin-top: 2.4cqi; font-size: max(13px, 1.15cqi); color: var(--rd-fttext); }
.sr-contact-line b { color: #fff; font-weight: 700; }

/* ---- 하단 컨트롤 (재생/일시정지 + 장면 진행 바) ---- */
.sr-bar {
  position: absolute; left: var(--sr-pad); right: var(--sr-pad); bottom: 3cqi; z-index: 3;
  display: flex; align-items: center; gap: 1.6cqi;
}
.sr-play {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 13px; cursor: pointer; transition: background .2s ease;
}
.sr-play:hover { background: rgba(255,255,255,.2); }
.sr-play:focus-visible, .sr-step:focus-visible { outline: 2px solid var(--rd-gold); outline-offset: 3px; }
.sr-stage:not(.sr-ready) .sr-bar { display: none; }
.sr-steps { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .8cqi; }
.sr-step {
  appearance: none; background: none; border: 0; padding: 8px 0 0; margin: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: max(11.5px, .95cqi); font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease;
}
.sr-step:hover, .sr-step.is-on { color: #fff; }
.sr-step-track { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; margin-bottom: 8px; }
.sr-step-fill { display: block; height: 100%; background: var(--rd-gold); transform-origin: left; transform: scaleX(0); }

/* ---- keyframes ---- */
@keyframes sr-in    { from { opacity: 0; transform: translateY(2.4cqi); } to { opacity: 1; transform: none; } }
@keyframes sr-left  { from { opacity: 0; transform: translateX(-3cqi); } to { opacity: 1; transform: none; } }
@keyframes sr-pop   { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes sr-draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sr-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sr-drift { from { transform: translate(0, 0); } to { transform: translate(-6%, 8%); } }
@keyframes sr-wave  { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes sr-float { from { transform: translateY(0); } to { transform: translateY(-1cqi); } }
@keyframes sr-blink { 50% { opacity: .25; } }
@keyframes sr-flow  { to { stroke-dashoffset: -6; } }
@keyframes sr-spin  { to { transform: rotate(360deg); } }
@keyframes sr-pulse { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); } }
@keyframes sr-node-hi {
  0%, 22%, 100% { border-color: rgba(255,255,255,.16); background: rgba(11,27,59,.88); }
  8%, 14% { border-color: var(--rd-gold); background: rgba(40,46,52,.95); }
}

/* ---- 태블릿(프레임 폭 1000 이하): 배너 장면은 한 단으로, 다이어그램 숨김 (H1 첫 줄이 한 줄에 들어가게) ---- */
@container sr (max-width: 1000px) {
  .sr-scene--hero .sr-split { grid-template-columns: 1fr; }
  .sr-scene--hero .sr-net { display: none; }
  .sr-h1 { font-size: max(34px, 6cqi); }
  .sr-lead { max-width: 64cqi; }
}

/* ---- 모바일(프레임 폭 760 이하): 세로 배치. 글씨는 min() 으로 큰 폰·소형 태블릿에서 과하게 커지지 않게 ---- */
@container sr (max-width: 760px) {
  .sr-scene { padding: 9cqi var(--sr-pad) 18cqi; }
  .sr-split { grid-template-columns: 1fr; gap: 6cqi; }
  .sr-kicker { font-size: min(2.8cqi, 12px); }
  .sr-title { font-size: min(7.6cqi, 33px); margin-top: min(2.4cqi, 10px); }
  .sr-sub { font-size: min(3.9cqi, 17px); max-width: none; margin-top: min(3cqi, 13px); }

  .sr-badge { font-size: min(3cqi, 12.5px); padding: 6px 12px; }
  .sr-h1 { font-size: min(9.6cqi, 42px); margin-top: min(5cqi, 22px); }
  .sr-lead { font-size: min(4.1cqi, 17.5px); margin-top: min(4.4cqi, 19px); max-width: none; }
  .sr-hero-actions { margin-top: min(6.4cqi, 28px); gap: 10px; }
  .sr-hero-actions .rd-btn { flex: 1 1 auto; justify-content: center; }
  /* 모바일 H1: 강제 줄바꿈 대신 "성공적인 비즈니스를 / 위한 스마트한 연결" 로 자연스럽게 */
  .sr-h1 { font-size: min(8.8cqi, 40px); }
  .sr-h1 br { display: none; }
  /* 연결 다이어그램은 작게 텍스트 아래에 */
  .sr-scene--hero .sr-split { gap: min(7cqi, 30px); }
  .sr-scene--hero .sr-net { display: block; width: min(66cqi, 290px); margin: 0 auto; }
  .sr-net-core b { font-size: min(3.6cqi, 15px); }
  .sr-net-core small { font-size: min(1.6cqi, 7px); }
  .sr-net-node { font-size: min(2.9cqi, 12px); padding: min(1.3cqi, 5px) min(2.3cqi, 10px); gap: min(1.3cqi, 5px); }

  .sr-flow { margin-top: min(8cqi, 34px); grid-template-columns: 1fr; gap: min(3.4cqi, 15px); }
  .sr-flow::before { left: min(6cqi, 26px); right: auto; top: 2cqi; bottom: 2cqi; width: 2px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--rd-gold), var(--rd-blue-light)); }
  .sr-ready .sr-flow::before { transform: scaleY(0); }
  .sr-ready .sr-scene.is-on .sr-flow::before { animation-name: sr-draw-y; }
  .sr-static .sr-flow::before { transform: scaleY(1); }
  .sr-flow li { flex-direction: row; text-align: left; gap: min(4cqi, 17px); }
  .sr-node { width: min(12cqi, 52px); height: min(12cqi, 52px); font-size: min(4.6cqi, 20px); flex-shrink: 0; box-shadow: 0 0 0 min(1.4cqi, 6px) var(--rd-navy); }
  .sr-flow b { font-size: min(4cqi, 17px); }
  .sr-flow small { font-size: min(3cqi, 13px); margin-top: 2px; }

  .sr-year { font-size: min(26cqi, 112px); }
  .sr-chips { grid-template-columns: 1fr 1fr; gap: min(2.4cqi, 10px); }
  .sr-chips li { font-size: min(3.7cqi, 16px); padding: min(3cqi, 13px) min(3.2cqi, 14px); border-radius: min(2.4cqi, 10px); gap: min(2.4cqi, 10px); }
  .sr-chips i { width: min(7cqi, 30px); height: min(7cqi, 30px); min-width: 0; min-height: 0; font-size: min(3.4cqi, 15px); border-radius: min(1.8cqi, 8px); }

  .sr-mice { grid-template-columns: 1fr 1fr; gap: min(6cqi, 26px) min(4cqi, 17px); margin-top: min(7cqi, 30px); }
  .sr-mice > div { padding-top: min(3.4cqi, 15px); }
  .sr-mice .l { font-size: min(15cqi, 64px); }
  .sr-mice .en { font-size: min(2.6cqi, 11.5px); margin-top: min(2.4cqi, 10px); }
  .sr-mice .ko { font-size: min(4.3cqi, 18.5px); margin-top: 4px; }

  .sr-scene--phone .sr-split { grid-template-columns: 1fr; gap: min(5cqi, 22px); }
  .sr-phone { width: min(32cqi, 138px); border-radius: min(5cqi, 22px); padding: min(4.4cqi, 19px) min(3cqi, 13px); gap: min(2.6cqi, 11px); }
  .sr-phone-top { font-size: min(2.3cqi, 10px); }
  .sr-live::before { width: min(1.6cqi, 7px); height: min(1.6cqi, 7px); }
  .sr-wave { gap: min(1cqi, 4px); }
  .sr-wave i { width: min(1.2cqi, 5px); height: min(11cqi, 48px); }
  .sr-lines span { font-size: min(2.3cqi, 10px); padding: min(1.8cqi, 8px) min(2cqi, 9px); border-radius: min(1.6cqi, 7px); }
  .sr-hello { font-size: min(3cqi, 13px); padding: min(1.6cqi, 7px) min(3cqi, 13px); }
  .sr-hello.h-far { display: none; }

  .sr-logos { grid-template-columns: repeat(3, 1fr); gap: min(2cqi, 8px); margin-top: min(6cqi, 26px); }
  .sr-logos li { height: min(12cqi, 50px); min-height: 0; padding: 0 6px; border-radius: min(2.4cqi, 10px); font-size: min(3.2cqi, 13.5px); }

  .sr-cta-actions { margin-top: min(6cqi, 26px); flex-direction: column; align-items: stretch; gap: min(2.6cqi, 11px); }
  .sr-cta-actions .rd-btn { font-size: 15px; padding: 14px 20px; justify-content: center; }
  .sr-contact-line { font-size: min(3.3cqi, 14px); margin-top: min(5cqi, 22px); }

  .sr-bar { bottom: min(7cqi, 30px); gap: min(3cqi, 13px); }
  .sr-step { font-size: 0; padding: 8px 0; }
  .sr-step-track { margin: 0; height: 4px; }
}

@media (max-width: 760px) {
  .sr-frame { height: clamp(600px, 172vw, 760px); }
  .sr-glow--blue { width: 420px; height: 420px; top: -140px; right: -160px; }
  .sr-glow--gold { width: 360px; height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-stage *, .sr-stage *::before, .sr-stage *::after { animation: none !important; }
  .sr-ready .sr-a, .sr-ready .sr-hello { opacity: 1; }
}