/* 앱 다운로드: 흰 바탕 거리. 스포츠카·트럭이 들어오고, 고르면 가게 앞까지 간다. */
body { background: #ffffff; color: #111111; }
.stage { position: relative; width: 100%; height: 100vh; min-height: 640px; overflow: hidden; background: #ffffff; }

.world { position: absolute; top: 0; left: 0; width: 300%; height: 100%; transform: translateX(-33.3333%); }
.world.go { transition: transform 2.6s cubic-bezier(.65,0,.35,1); }

.car { position: absolute; z-index: 2; }
.car .body { position: relative; display: block; }
.car .body img { display: block; width: 100%; user-select: none; }
.moving .body { animation: bob .16s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-2px) rotate(-.5deg) } }
.spoke { position: absolute; transform: translate(-50%,-50%); aspect-ratio: 1; opacity: 0; background: linear-gradient(#111,#111) center/100% 3px no-repeat, linear-gradient(#111,#111) center/3px 100% no-repeat; transition: opacity .2s; }
.moving .spoke { opacity: 1; animation: spin .22s linear infinite; }
@keyframes spin { from { transform: translate(-50%,-50%) rotate(0) } to { transform: translate(-50%,-50%) rotate(360deg) } }
.bubble { all: unset; box-sizing: border-box; position: absolute; left: 50%; bottom: calc(100% + 22px); white-space: nowrap; background: #fff; border: 2.5px solid #111; border-radius: 24px; padding: 13px 22px; font-family: var(--font); font-weight: 800; font-size: 15px; color: #111; cursor: pointer; box-shadow: 3px 4px 0 #111; transform: translateX(-50%); animation: bubbleIn .5s cubic-bezier(.34,1.56,.64,1) both; transition: box-shadow .15s, translate .15s; }
.bubble[hidden] { display: none; }
/* 꼬리: 테두리 화살표 대신 그림자 색 작은 삼각형이 그림자 자리(오른쪽 아래로 밀린 곳)에 붙는다. */
.bubble::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: -9px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #111; }
.bubble:hover { translate: 0 -3px; box-shadow: 3px 7px 0 #111; }
.bubble:active { translate: 0 1px; box-shadow: 2px 2px 0 #111; }
.bubble:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.truck .bubble { animation-delay: .18s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6) } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) } }
.back { all: unset; cursor: pointer; font-size: 13px; color: #111; border-bottom: 1px solid #111; padding: 4px 0; }
.back:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.sports { z-index: 1; }
.truck { z-index: 3; }
.sports .bubble { bottom: calc(100% + 54px); left: 42%; }
.truck .bubble { bottom: calc(100% + 18px); left: 84%; }

.obj { position: absolute; }
.obj img { position: relative; display: block; width: 100%; user-select: none; }
.shd { position: absolute; left: 6%; right: 6%; bottom: -12px; height: 28px; opacity: .42; pointer-events: none; background: radial-gradient(circle,#4a5fc1 0 1.15px,transparent 1.7px) 0 0/5px 5px; -webkit-mask: radial-gradient(closest-side,#000 35%,transparent 100%); mask: radial-gradient(closest-side,#000 35%,transparent 100%); }
.shd::after { content: ""; position: absolute; inset: 0; transform: translate(3px,2px); background: radial-gradient(circle,#e8708f 0 .9px,transparent 1.4px) 2px 2px/5px 5px; opacity: .55; }
.car .shd { bottom: -10px; left: 4%; right: 2%; height: 30px; }
.shd.house { left: -4%; right: -14%; bottom: -16px; height: 40px; }
.pet .shd { left: 0; right: 0; bottom: -8px; height: 20px; }
.pet img { transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.cat img { animation-duration: 3.4s; }
.dog img { animation: none; }
@keyframes breathe { 0%,100% { transform: scale(1,1) } 50% { transform: scale(1.01,1.025) } }

.qrb { position: absolute; z-index: 6; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 10px; background: #fff; border: 2.5px solid #111; border-radius: 22px; box-shadow: 3px 4px 0 #111; opacity: 0; transform: translateX(-50%) translateY(14px) scale(.6); transform-origin: 50% 100%; pointer-events: none; transition: opacity .25s, transform .25s; color: #111; text-decoration: none; }
.qrb::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: -9px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #111; }
.qrb.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; transition: opacity .3s, transform .55s cubic-bezier(.34,1.56,.64,1); }
.qrb img { display: block; width: 140px; height: 140px; object-fit: contain; }
.qrb p { margin: 0; font-size: 13px; font-weight: 800; }
.qrb .enter { display: none; color: #111; text-decoration: none; }
/* 아직 문을 안 연 가게: QR 대신 한 줄 */
.qrb.soon { gap: 8px; padding: 14px 18px 12px; }
.qrb.soon p { max-width: 190px; white-space: normal; text-align: center; line-height: 1.5; }

/* 자리: 왼쪽 3분의 1이 구글 가게, 오른쪽 3분의 1이 애플 가게 */
.shop-google { left: calc(16.6667% - 150px); bottom: calc(26% + 84px); width: 250px; z-index: 1; }
.dog { left: calc(16.6667% - 290px); bottom: calc(26% + 4px); width: 120px; z-index: 4; }
#qrGoogle { left: calc(16.6667% - 25px); bottom: calc(26% + 344px); }
.shop-apple { left: calc(83.3333% - 40px); bottom: calc(26% + 96px); width: 260px; z-index: 1; }
.cat { left: calc(83.3333% + 250px); bottom: calc(26% - 50px); width: 150px; z-index: 4; }
#qrApple { left: calc(83.3333% + 90px); bottom: calc(26% + 366px); }

/* 폰: QR 대신 가게로 들어가는 링크 */
@media (max-width: 767px) {
  .bubble { padding: 10px 16px; font-size: 13px; }
  .sports .bubble { bottom: calc(100% + 30px); left: 68%; }
  .truck .bubble { bottom: calc(100% + 18px); left: 50%; }
  .car .shd { bottom: -7px; height: 18px; }
  .shd.house { bottom: -10px; height: 24px; }
  .pet .shd { bottom: -6px; height: 12px; }
  .qrb { display: block; white-space: nowrap; padding: 11px 18px; font-weight: 800; font-size: 14px; }
  .qrb img, .qrb p, .qrb .back { display: none; }
  .qrb .enter { display: inline; }
  .qrb.soon { display: flex; }
  .qrb.soon p { display: block; max-width: 160px; }
  .shop-google { left: calc(16.6667% - 92px); bottom: calc(30% + 50px); width: 150px; }
  .dog { left: calc(16.6667% - 176px); bottom: calc(30% + 2px); width: 72px; }
  #qrGoogle { left: calc(16.6667% - 17px); bottom: calc(30% + 222px); }
  .shop-apple { left: calc(83.3333% - 24px); bottom: calc(30% + 56px); width: 156px; }
  .cat { left: calc(83.3333% + 98px); bottom: calc(30% - 44px); width: 90px; }
  #qrApple { left: calc(83.3333% + 54px); bottom: calc(30% + 234px); }
  .qrb.show:hover { translate: 0 -3px; box-shadow: 3px 7px 0 #111; }
  .qrb.show:active { translate: 0 1px; box-shadow: 2px 2px 0 #111; }
}