/* 세계산책 (walkworld) — 스타일 (flyworld 톤 계승) */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:#0a1020; color:#dfe9ff; font-family:'Noto Sans KR', sans-serif;
  touch-action:manipulation; overscroll-behavior:none; }

.btn { background:#16305acc; border:1px solid #3a6ea8; border-radius:10px; color:#dfe9ff;
  padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn:active { background:#2456a0; }
.btn.big { font-size:14px; padding:9px 14px; }
.btn.wide { width:100%; margin-top:8px; }
.btn.preset { font-size:12px; padding:7px 9px; }
.pill { background:#0b1830aa; border:1px solid #294b7e; border-radius:12px; padding:5px 10px;
  font-size:12px; color:#bcd6ff; white-space:nowrap; }
.pill.gold { background:#6b551acc; border-color:#e3c071; color:#ffe9b0; font-weight:700; }
.pill.big { font-size:14px; padding:7px 13px; color:#fff; }
.cta { display:block; width:100%; text-align:center; background:#1a5c3a; border:1px solid #3ec27f;
  color:#dff5e8; border-radius:11px; padding:12px 0; font-size:15px; font-weight:800; cursor:pointer; margin-top:6px; }
.sub { color:#8fb0dd; font-size:12.5px; line-height:1.6; }

/* ── 탐색 화면 ── */
#ww-home { min-height:100%; display:flex; flex-direction:column; }
#ww-top { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#0e2142;
  border-bottom:1px solid #294b7e; position:sticky; top:0; z-index:5; }
#ww-top b { font-size:16px; white-space:nowrap; }
#ww-q { flex:1; min-width:0; background:#0b1830; border:1px solid #3a6ea8; border-radius:10px;
  color:#dfe9ff; padding:7px 10px; font-size:13px; }
#ww-tabs { display:flex; gap:6px; align-items:center; padding:10px 12px 4px; flex-wrap:wrap; }
.chip { border:1px solid #3a6ea8; border-radius:15px; padding:5px 13px; font-size:13px;
  color:#bcd6ff; cursor:pointer; user-select:none; }
.chip.on { background:#2456a0; color:#fff; font-weight:700; }
#ww-country { background:#0b1830; border:1px solid #3a6ea8; border-radius:10px; color:#bcd6ff;
  padding:5px 8px; font-size:12.5px; max-width:150px; }
#ww-list { padding:10px 12px; display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:9px; }
.ww-card { background:#12274a; border:1px solid #2c4c7f; border-radius:12px; padding:10px; cursor:pointer; }
.ww-card:active { background:#1a3560; }
.ww-card b { font-size:13.5px; display:block; margin-bottom:4px; line-height:1.4; }
.ww-card small { font-size:11px; color:#9cb8e0; display:block; line-height:1.5; }
#ww-more-wrap { padding:0 12px 22px; }
#ww-more-wrap .btn { display:none; }

/* ── 모달 공통 ── */
.modal-wrap { position:fixed; inset:0; z-index:60; background:#000a; display:none;
  align-items:flex-end; justify-content:center; }
.modal-wrap.on { display:flex; }
.modal-box { width:min(460px, 96vw); max-height:86vh; overflow:auto; background:#10233f;
  border:1px solid #3a6ea8; border-radius:16px 16px 0 0; padding:16px; }
.modal-box.center { text-align:center; }
.modal-box h2 { font-size:18px; margin-bottom:6px; }
.modal-box p { font-size:13px; color:#a9c4e8; line-height:1.7; margin:8px 0; }
.sumbox { background:#12274a; border:1px solid #2c4c7f; border-radius:12px; padding:12px;
  font-size:13.5px; line-height:2; margin:8px 0; text-align:left; }
.sumbox b { color:#ffd34d; }
ul.help { padding-left:18px; font-size:13px; color:#bcd6ff; line-height:1.9; }
.rec-row { background:#12274a; border:1px solid #2c4c7f; border-radius:10px; padding:8px 11px;
  font-size:12px; display:flex; justify-content:space-between; gap:8px; color:#bcd6ff; margin-top:6px; }

/* ── 워킹 화면 ── */
#ww-walk { position:fixed; inset:0; z-index:40; background:#05080f; display:none; }
#ww-walk.on { display:block; }
#ww-pano, #ww-rv, #ww-rv2 { position:absolute; inset:0; display:none; }
/* 카카오 크로스페이드: 두 로드뷰를 겹쳐 두고 opacity로 녹아들게 */
#ww-rv, #ww-rv2 { transition:opacity .4s ease; }
#ww-walk-top { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center;
  gap:8px; padding:9px 12px; background:linear-gradient(#0b1830e8, #0b183000); pointer-events:none; }
#ww-w-name { flex:1; min-width:0; font-size:14px; font-weight:800; text-shadow:0 1px 4px #000;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ww-walk-bot { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:10px;
  background:linear-gradient(#0b183000, #0b1830e0 60%); display:flex; flex-direction:column; gap:8px; align-items:center; }
#ww-walk-bot .stats { display:flex; gap:7px; }
#ww-walk-bot .speed { display:flex; gap:6px; align-items:center; }
#ww-walk-bot .rowbtn { display:flex; gap:7px; }
/* 갈림길 화살표 */
#ww-arrows { position:absolute; left:0; right:0; bottom:150px; z-index:4; display:none;
  flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
#ww-arrows.on { display:flex; }
#ww-arrows .cap { background:#0b1830dd; border:1px solid #ffd34d; border-radius:12px;
  color:#ffe9b0; font-size:13px; font-weight:700; padding:6px 14px; }
#ww-arrows .arr-row { display:flex; gap:10px; }
#ww-arrows button { pointer-events:auto; width:58px; height:58px; border-radius:50%;
  background:#16305add; border:2px solid #ffd34d; color:#ffe9b0; font-size:24px; cursor:pointer; }
#ww-arrows button small { display:block; font-size:9px; }

/* ── 🗺 루트 만들기 ── */
#ww-route { position:fixed; inset:0; z-index:50; background:#0a1020; display:none; flex-direction:column; }
#ww-route.on { display:flex; }
#ww-r-top { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#0e2142; border-bottom:1px solid #294b7e; }
#ww-r-top b { font-size:15px; white-space:nowrap; }
#ww-r-q { flex:1; min-width:0; background:#0b1830; border:1px solid #3a6ea8; border-radius:10px; color:#dfe9ff; padding:7px 10px; font-size:13px; }
#ww-rmap { flex:1; min-height:0; }
#ww-r-bot { padding:9px 12px; background:#0e2142; border-top:1px solid #294b7e; display:flex; flex-direction:column; gap:8px; }
#ww-r-bot .rowbtn { display:flex; gap:7px; align-items:stretch; }
.chip.route { border-color:#e3c071; color:#ffe9b0; }
.chip.star { border-color:#d67ab8; color:#ffd9ef; }
#ww-shared-body .rec-row b { font-size:13px; }

/* 토스트/로딩 */
#ww-toast { position:fixed; left:50%; bottom:24vh; transform:translateX(-50%); z-index:90;
  background:#0e2142ee; border:1px solid #3a6ea8; border-radius:12px; color:#dfe9ff;
  font-size:13.5px; font-weight:700; padding:10px 16px; opacity:0; pointer-events:none;
  transition:opacity .25s; max-width:88vw; text-align:center; }
#ww-toast.on { opacity:1; }
#ww-loading { position:fixed; inset:0; z-index:95; background:#0a1020dd; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:14px; }
#ww-loading.on { display:flex; }
#ww-loading .spin { width:42px; height:42px; border:4px solid #294b7e; border-top-color:#ffd34d;
  border-radius:50%; animation:wwspin 0.9s linear infinite; }
@keyframes wwspin { to { transform:rotate(360deg); } }
#ww-load-msg { font-size:14px; color:#bcd6ff; }

/* 구글 워터마크 가리지 않게: 하단 HUD는 중앙 정렬, 모서리 비움(약관) */
@media (max-width:640px){
  #ww-top b { font-size:14px; }
  .btn.big { font-size:12.5px; padding:8px 10px; }
  #ww-walk-bot .speed .pill.big { font-size:12.5px; }
}