:root {
  /* 화면 원본 비율 (Figma 프레임 390 x 844) */
  --screen-w: 390;
  --screen-h: 844;
  --green: #22B573;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: #0b0f1a;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  user-select: none;
}

/* 뷰포트: 화면 중앙 정렬 */
#viewport {
  position: fixed; inset: 0;
  overflow: hidden;
}

/* 폰 프레임 — 390×844 논리 좌표 고정. 절대중앙 + translate/scale 로 균일 맞춤.
   모든 자식(이미지+실제 컴포넌트)이 같은 비율로 스케일 → px 기준 픽셀 정확 렌더. */
#phone {
  position: absolute;
  left: 50%; top: 50%;
  width: 390px;
  height: 844px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  background: #000;
  overflow: hidden;
}
/* 데스크톱: 목업 테두리(레이아웃 크기 불변) */
@media (min-width: 440px) and (min-height: 900px) {
  #phone {
    border-radius: 44px;
    box-shadow: 0 0 0 12px #111827, 0 30px 80px rgba(0,0,0,.55);
  }
}

/* 스테이지: 이미지 + 오버레이의 좌표 기준 (390×844) */
#stage { position: absolute; inset: 0; overflow: hidden; }

#screen-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block;
}

#overlay { position: absolute; inset: 0; }

/* 핫스팟: 기본 투명, 디버그 모드에서만 보임 */
.hotspot {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 8px;
}
body.debug .hotspot {
  background: rgba(18,107,252,.28);
  outline: 1.5px solid #126BFC;
}
body.debug .hotspot::after {
  content: attr(data-label);
  position: absolute; left: 2px; top: 2px;
  font-size: 9px; color: #fff; background: #126BFC;
  padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}

/* 실제 타이핑 입력 (call04 이름 모달) — 원본 pill 을 덮도록 동일 스타일 */
.text-input {
  position: absolute;
  text-align: center;
  font-family: inherit; font-weight: 800;
  font-size: clamp(18px, 5.5vw, 26px);
  color: #38E0A5;                 /* 시안의 민트 글씨 */
  background: #141414;            /* 어두운 pill 배경 */
  border: 2.5px solid #38E0A5;    /* 초록 테두리 */
  border-radius: 999px;
  outline: none;
  caret-color: #38E0A5;
}

/* call02 로딩 진행바 (좌→우 초록 점등) */
#loading-bar {
  position: absolute;
  left: 0; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(34,181,115,.0), rgba(34,181,115,.55));
  border-right: 3px solid var(--green);
  pointer-events: none;
  transition: width linear;
}

/* 오버레이 이미지 (예: call03 지도 위 call01 패널) */
.overlay-img { position: absolute; object-fit: fill; }

/* 동적 라벨 (원본 텍스트 위 마스킹) — 클릭은 통과 */
.lbl { position: absolute; pointer-events: none; display: flex; align-items: center; }
.lbl-dest {                       /* call01 도착지 이름 */
  background: #fff; color: #111827;
  font-weight: 800; font-size: clamp(13px, 4vw, 18px);
  justify-content: flex-start; padding-left: 2px; white-space: nowrap; overflow: hidden;
}
.lbl-nametag {                    /* 다독이 이름표 (다크 말풍선 위) */
  background: #16181D; justify-content: center;
}
.lbl-nametag .pill {
  border: 2px solid #38E0A5; border-radius: 7px; color: #38E0A5;
  font-weight: 800; font-size: clamp(11px, 3.4vw, 15px);
  padding: 1px 8px; line-height: 1.25; white-space: nowrap;
}
.lbl-greenbtn {                   /* 버튼 라벨 교체 (도착지 수정 완료) */
  background: #22B573; color: #fff; border-radius: 14px;
  justify-content: center; font-weight: 800; font-size: clamp(14px, 4.2vw, 18px);
}

/* 검색 UI (search01) */
.search-box {
  position: absolute; background: #fff; border-radius: 14px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.search-dot { width: 12px; height: 12px; border-radius: 50%; background: #22C55E; flex: 0 0 auto; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: clamp(14px, 4.3vw, 18px); font-weight: 600; color: #111827;
}
.search-list {
  position: absolute; background: #fff; overflow-y: auto;
  border-top: 1px solid #F1F1F3; -webkit-overflow-scrolling: touch;
}
.search-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border: none; border-bottom: 1px solid #F3F4F6;
  background: #fff; text-align: left; cursor: pointer;
}
.search-row:active { background: #F3F4F6; }
.search-row .s-pin { color: #9CA3AF; font-size: 16px; flex: 0 0 auto; }
.search-row .s-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.search-row .s-main b { font-size: clamp(13px, 4vw, 16px); color: #111827; }
.search-row .s-main small { font-size: clamp(10px, 3.2vw, 13px); color: #9CA3AF; margin-top: 2px; }
.search-row .s-dist { font-size: clamp(11px, 3.4vw, 14px); color: #6B7280; flex: 0 0 auto; }
.search-empty { padding: 24px 16px; text-align: center; color: #9CA3AF; font-size: 14px; }

/* call02 step indicator 로더 — 흰 배경으로 원본 바 마스킹 후 4칸 순차 점등 */
.step-loader {
  position: absolute;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 2.5%;
  padding: 0 1%;
  pointer-events: none;
}
.step-loader .seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #C7C6C6;               /* 회색(비활성) */
  transition: background .35s ease;
}
.step-loader .seg.on { background: #22C55E; }  /* 초록(활성) */

/* 전환 애니메이션 */
#stage.tx-fade #screen-img { animation: fade .28s ease; }
#stage.tx-slide #screen-img { animation: slide .3s ease; }
#stage.tx-up #screen-img { animation: up .32s cubic-bezier(.2,.8,.2,1); }
#stage.tx-cut #screen-img { animation: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { transform: translateX(24px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes up { from { transform: translateY(40px); opacity: .3; } to { transform: none; opacity: 1; } }

/* 점프 메뉴 */
#jump-btn {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(17,24,39,.45); color: #fff;
  font-size: 20px; line-height: 40px; cursor: pointer;
  backdrop-filter: blur(4px);
}
#jump-btn:hover { background: rgba(17,24,39,.8); }
#jump-menu {
  position: fixed; right: 14px; bottom: 62px; z-index: 50;
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  max-height: 60vh; overflow: auto;
}
#jump-menu[hidden] { display: none !important; }
#jump-menu button {
  border: 1px solid #E5E7EB; background: #F9FAFB; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#jump-menu button:hover { background: #EFF6FF; border-color: #126BFC; }
#jump-menu .grp { grid-column: 1 / -1; font-size: 10px; color: #6B7280; margin: 6px 2px 2px; }