/* 첫 화면 라이브 계근 장면 — 3D 캔버스(야간 계근장) 위의 중량 표시 · 기사앱 화면 재현이 든 폰 · 흐름.
 *
 * ★★폰 안은 캡처가 아니라 **HTML 로 다시 그린 기사앱 화면**이다(partials/hero_phone.html).
 *   옛 캡처에 이름 변경 전의 «ScaleWay» 와 빨간 경고창이 찍혀 있어서다 — 캡션도 «화면 재현».
 *   장면 상태(data-state)에 맞는 조각(data-on)만 보인다. 스크립트가 없으면 HTML 에 적힌
 *   exit(원장 확정) 장면이 그대로 보인다.
 * ★폰 화면은 기기 폭의 360분의 1(= 앱의 1dp)을 단위로 그린다 — 컨테이너 쿼리 단위(cqw).
 *   폰이 커지고 작아져도 앱 화면의 비례가 그대로다. 1dp = .2778cqw.
 * ★3D 가 그려지기 전·못 그릴 때는 정지 그림(hero-scene*.webp)이 장면 자리를 채운다.
 */
.hero-live {
  position: relative;
  z-index: 2;
  height: clamp(560px, 56vw, 760px);
  margin-top: clamp(70px, 9vw, 120px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, #05080e 0%, #0c131d 42%, #1b2029 58%, #121416 100%);
  box-shadow: 0 50px 160px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6);
}
/* 장면 · 정지 그림 · 비네트는 무대 전체를 덮는다. 트럭을 왼쪽으로 비키는 일은 카메라가 한다
   (hero3d.js 의 setViewOffset) — 캔버스를 옮기면 오른쪽 끝에 하늘이 잘린 이음매가 생긴다. */
.hero-live .hero__scene,
.hero-live .hero__vignette,
.hero-live__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-live .hero__scene { opacity: 1; filter: none; z-index: 1; }
.hero-live__poster { z-index: 0; }
/* ★3D 가 그려진 뒤에도 정지 그림을 치우지 않는다 — 캔버스가 불투명하게 덮고, 캔버스가 서서히
   나타나는(opacity) 동안 밑에 그림이 있어야 검은 빈칸이 번쩍이지 않는다. */
.hero-live__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-live .hero__vignette {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3,5,8,.86) 0%, rgba(3,5,8,.5) 22%, transparent 42%, transparent 66%, rgba(3,5,8,.55) 100%),
    linear-gradient(180deg, rgba(3,5,8,.35), transparent 30%, transparent 70%, rgba(3,5,8,.62));
}
.hero-live__label,
.hero-live__weight,
.hero-live__phone,
.hero-live__phone-cap,
.hero-live__flow { z-index: 3; }
.hero-live__label {
  position: absolute; top: 28px; left: 30px; display: flex; align-items: center; gap: 8px;
  color: #b8b8bd; font-size: 11px; font-weight: 650; letter-spacing: .12em;
}
.hero-live__label i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 14px #34d399; }
.hero-live__weight {
  position: absolute; left: clamp(28px, 4vw, 54px); top: 92px; display: grid;
  width: min(42%, 440px);
}
.hero-live__weight > span { color: #2997ff; font-size: 14px; font-weight: 650; }
.hero-live__weight strong { display: flex; align-items: baseline; margin-top: 10px; font-variant-numeric: tabular-nums; }
.hero-live__weight strong b {
  color: #fff; font-size: clamp(52px, 5.6vw, 80px); line-height: .95; letter-spacing: -.05em;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.hero-live__weight strong small { margin-left: 9px; color: #9a9aa0; font-size: 17px; font-weight: 600; }
.hero-live__weight em { max-width: 250px; margin-top: 18px; color: #b0b0b6; font-size: 14px; font-style: normal; line-height: 1.5; }

/* ── 폰 — 얇은 베젤의 안드로이드. 금속 테두리 · 측면 버튼 · 유리 반사 · 바닥 그림자 ── */
.hero-live__phone {
  position: absolute; right: clamp(30px, 4.6vw, 64px); top: 50%; width: clamp(214px, 19.5vw, 272px);
  aspect-ratio: 360 / 760; padding: 6px;
  border-radius: 36px;
  background: linear-gradient(115deg, #9aa1a6, #3a4045 6%, #15181b 45%, #4b5258 93%, #b7bdc1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 3px #0b0d0f,
    14px 22px 0 -10px #1b1f23, 30px 50px 80px rgba(0,0,0,.72), 0 0 60px rgba(41,151,255,.12);
  transform: translateY(-50%) perspective(1400px) rotateY(-9deg) rotateZ(.8deg);
}
.hero-live__phone::before {
  content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 44px;
  border-radius: 0 3px 3px 0; background: linear-gradient(#8a939a, #353b41); box-shadow: 0 -58px 0 #59626a;
}
/* 유리 반사 — 화면 위 비스듬한 빛 한 줄. 화면을 가리지 않게 아주 옅다. */
.hero-live__phone::after {
  content: ""; position: absolute; inset: 6px; border-radius: 30px; pointer-events: none; z-index: 2;
  background: linear-gradient(118deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 30%, transparent 31%, transparent 78%, rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ── 기사앱 화면 재현 ── 색은 실제 앱(GyegeuniTheme.kt · HomeFormatting.kt)의 값 그대로. */
.dphone {
  position: relative; height: 100%; overflow: hidden; border-radius: 30px;
  container-type: inline-size;
  background: #071014; color: #e8f0f2;
  font-family: var(--font, "Pretendard Variable", Pretendard, sans-serif);
  letter-spacing: -.01em; line-height: 1.3;
}
.dphone svg { display: block; flex: none; }
.dphone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3.4cqw 6cqw 1.2cqw 7cqw; font-size: 3.4cqw; font-weight: 600;
}
.dphone__status svg { width: 9.5cqw; height: auto; color: #e8f0f2; }
/* 펀치홀 카메라 */
.dphone__status::after {
  content: ""; position: absolute; left: 50%; top: 2.6cqw; width: 3.6cqw; height: 3.6cqw; margin-left: -1.8cqw;
  border-radius: 50%; background: #020304; box-shadow: inset 0 0 0 .6cqw #0d1418;
}
.dphone__bar {
  display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 5cqw; background: #0f1b1f;
}
.dphone__who { flex: 1; min-width: 0; }
.dphone__who strong { display: block; font-size: 5.8cqw; font-weight: 800; letter-spacing: -.02em; }
.dphone__who small { display: block; font-size: 3.3cqw; color: #a8b8bc; letter-spacing: .04em; }
.dphone__route {
  padding: 1.4cqw 2.6cqw; border-radius: 1.8cqw; background: #173c35; color: #62d7b5;
  font-size: 3.1cqw; font-weight: 600; white-space: nowrap;
}
.dphone__dot { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #34d399; }
.dphone__head {
  display: flex; align-items: center; justify-content: space-between; padding: 4.4cqw 5cqw 2.8cqw;
}
.dphone__head strong { font-size: 6.6cqw; font-weight: 700; letter-spacing: -.03em; }
.dphone__head svg { width: 6cqw; color: #e8f0f2; }
.dphone__card {
  margin: 0 4cqw; padding: 4.2cqw 4.4cqw; border-radius: 4cqw;
  background: #0f1b1f; border: 1px solid #1c2b30;
}
.dphone__link { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.8cqw; font-weight: 600; }
.dphone__link svg { width: 4.2cqw; color: #62d7b5; }
/* 7-세그먼트 숫자 — 꺼진 획이 뒤에 깔린다. 두 겹이 같은 칸에 오른쪽 정렬로 겹친다. */
.dphone__seg {
  display: inline-grid; margin: 2.2cqw 0 .6cqw;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  font-size: 13.6cqw; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dphone__seg > * { grid-area: 1 / 1; text-align: right; }
.dphone__ghost { color: rgba(98,215,181,.07); }
.dphone__seg b { color: #62d7b5; text-shadow: 0 0 3cqw rgba(98,215,181,.45); transition: color .3s ease, text-shadow .3s ease; }
.dphone__stab { font-size: 4.2cqw; font-weight: 700; color: #62d7b5; }
.hero-live[data-state="weigh"] .dphone__seg b { color: #ffc857; text-shadow: 0 0 3cqw rgba(255,200,87,.4); }
.hero-live[data-state="weigh"] .dphone__stab { color: #ffc857; }
.dphone__stages {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw;
  margin-top: 2.6cqw; padding-top: 2.6cqw; border-top: 1px solid #40534d;
}
.dphone__stages > div { display: grid; justify-items: end; align-content: start; gap: .4cqw; }
.dphone__stages em { font-style: normal; font-size: 3.2cqw; color: #c5d1cd; }
.dphone__stages b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 4.3cqw; font-weight: 700; }
.dphone__stages small { font-size: 3cqw; color: #c5d1cd; }
.dphone__cam { display: flex; align-items: center; gap: 1cqw; }
.dphone__cam::before {
  content: ""; width: 3.2cqw; height: 2.4cqw; border-radius: .5cqw; background: #c5d1cd;
  -webkit-mask: radial-gradient(circle at 50% 55%, transparent .7cqw, #000 .8cqw);
          mask: radial-gradient(circle at 50% 55%, transparent .7cqw, #000 .8cqw);
}
.dphone__net { margin-top: 2cqw; font-size: 4.1cqw; font-weight: 700; color: #62d7b5; }
.dphone__step { margin-top: 2.6cqw; padding-top: 2.6cqw; border-top: 1px solid #40534d; }
.dphone__step strong { display: flex; align-items: center; gap: 1.6cqw; font-size: 4cqw; font-weight: 600; }
.dphone__step strong::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #34d399; }
.dphone__step[data-tone="warn"] strong::before { background: #fbbf24; }
.dphone__step span { display: block; margin-top: .8cqw; font-size: 3.2cqw; color: #c5d1cd; line-height: 1.45; }
.dphone__btn {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  margin: 3.4cqw 4cqw 0; height: 12.4cqw; border-radius: 99px;
  background: #62d7e8; color: #071014; font-size: 4.1cqw; font-weight: 700;
}
.dphone__btn svg { width: 4.4cqw; }
.dphone__btn.is-pending { background: #17262b; color: #8fa3a8; box-shadow: inset 0 0 0 1px #2b3d42; }
.dphone__btn.is-pending svg { opacity: .5; }
/* 가까운 계근대 — 화면 아래로 이어지는 목록. 아래 탭 막대에 잘려 «스크롤되는 화면» 으로 읽힌다. */
.dphone__near { padding: 4.6cqw 4cqw 0; }
.dphone__near > strong { display: block; margin: 0 1cqw 2.4cqw; font-size: 5cqw; font-weight: 700; }
.dphone__site {
  display: flex; align-items: center; gap: 3cqw; margin-bottom: 2.4cqw; padding: 3.2cqw 4cqw;
  border-radius: 3.2cqw; background: #0f1b1f; border: 1px solid #22323a;
}
.dphone__site.is-on { background: #173c44; border-color: #62d7e8; }
.dphone__site i { flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; box-shadow: inset 0 0 0 .7cqw #61757a; }
.dphone__site.is-on i { box-shadow: inset 0 0 0 .7cqw #62d7e8, inset 0 0 0 1.6cqw #173c44; background: #62d7e8; }
.dphone__site span { flex: 1; min-width: 0; }
.dphone__site b { display: block; font-size: 4.2cqw; font-weight: 700; }
.dphone__site small { display: block; font-size: 3.2cqw; color: #a8b8bc; }
.dphone__site em { font-style: normal; font-size: 3.8cqw; font-weight: 700; }
.dphone__nav {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 2.6cqw 3cqw 5.4cqw; background: #0f1b1f; font-size: 3.1cqw; color: #a8b8bc;
}
.dphone__nav span { display: grid; justify-items: center; gap: 1cqw; }
.dphone__nav svg { width: 5.6cqw; }
.dphone__nav i { display: grid; place-items: center; width: 14cqw; height: 7.6cqw; border-radius: 99px; background: #4a350b; color: #f5b942; }
.dphone__nav .is-on { color: #e8f0f2; }
/* 홈 표시줄 */
.dphone__nav::after {
  content: ""; position: absolute; left: 50%; bottom: 1.6cqw; width: 28cqw; height: 1cqw; margin-left: -14cqw;
  border-radius: 99px; background: rgba(232,240,242,.5);
}

/* 상태에 맞는 조각만 남긴다. ★`display: revert` 로 켜지 않는다 — 작성자 스타일까지 지워 버린다.
   대신 «맞지 않는 것» 을 끈다. */
.hero-live[data-state="enter"] .dphone [data-on]:not([data-on~="enter"]),
.hero-live[data-state="weigh"] .dphone [data-on]:not([data-on~="weigh"]),
.hero-live[data-state="stable"] .dphone [data-on]:not([data-on~="stable"]),
.hero-live[data-state="complete"] .dphone [data-on]:not([data-on~="complete"]),
.hero-live[data-state="exit"] .dphone [data-on]:not([data-on~="exit"]) { display: none !important; }

.hero-live__phone-cap {
  position: absolute; right: clamp(30px, 4.6vw, 64px); top: 28px;
  color: #a1a1a6; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.hero-live__flow { position: absolute; left: 30px; bottom: 27px; display: flex; gap: 20px; color: #7a7a80; font-size: 11px; font-weight: 600; }
/* ★«03 원장 확정» 은 exit 에서만 켠다. complete 는 폰이 아직 «계량 접수됨 · 반영 대기» 를 말하는
   단계라, 여기서 원장 확정을 켜면 접수와 확정의 구분(A-7-2 · A-15)이 무너진다. */
.hero-live__flow span { position: relative; padding-top: 10px; }
.hero-live__flow span::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.14);
}
.hero-live[data-state="enter"] .hero-live__flow span:nth-child(1),
.hero-live[data-state="weigh"] .hero-live__flow span:nth-child(2),
.hero-live[data-state="stable"] .hero-live__flow span:nth-child(2),
.hero-live[data-state="complete"] .hero-live__flow span:nth-child(2),
.hero-live[data-state="exit"] .hero-live__flow span:nth-child(3) { color: #f5f5f7; }
.hero-live[data-state="enter"] .hero-live__flow span:nth-child(1)::before,
.hero-live[data-state="weigh"] .hero-live__flow span:nth-child(2)::before,
.hero-live[data-state="stable"] .hero-live__flow span:nth-child(2)::before,
.hero-live[data-state="complete"] .hero-live__flow span:nth-child(2)::before,
.hero-live[data-state="exit"] .hero-live__flow span:nth-child(3)::before { background: #2997ff; box-shadow: 0 0 10px rgba(41,151,255,.7); }
.hero-live .hero__scene canvas { opacity: 0; transition: opacity 1.2s ease; }
.hero-live.is-ready .hero__scene canvas { opacity: 1; }

/* ── 좁은 화면 — 위: 중량, 가운데: 장면 띠, 아래: 폰 ── */
@media (max-width: 760px) {
  .hero-live { height: 940px; margin-top: 70px; border-radius: 24px; background: #05070b; }
  .hero-live .hero__scene,
  .hero-live__poster { top: 150px; height: 330px; }
  .hero-live .hero__vignette {
    /* ★장면 띠(150~480px)의 위아래 가장자리를 무대 바탕색으로 녹인다. 끊어 두면 캔버스 윗변이
       칼로 자른 선처럼 보였다. */
    background: linear-gradient(180deg, #05070b 0, #05070b 150px, rgba(5,7,11,0) 215px, rgba(5,7,11,0) 410px, #05070b 480px);
  }
  .hero-live__weight { top: 60px; left: 22px; width: calc(100% - 44px); }
  .hero-live__weight strong { margin-top: 6px; }
  .hero-live__weight strong b { font-size: 50px; }
  .hero-live__weight em { display: none; }
  .hero-live__phone { right: 50%; top: auto; bottom: 74px; width: 200px; border-radius: 30px; transform: translateX(50%); }
  .dphone { border-radius: 25px; }
  .hero-live__phone::after { border-radius: 25px; }
  .hero-live__phone-cap { right: 0; top: auto; bottom: 48px; width: 100%; text-align: center; }
  .hero-live__label { top: 22px; left: 22px; }
  .hero-live__flow { left: 0; bottom: 18px; width: 100%; justify-content: center; gap: 14px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live__phone { transform: translateY(-50%); }
  .dphone__seg b { transition: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero-live__phone { transform: translateX(50%); }
}