/* 8판 여행 지도 — 타이틀 · 지도 · 마을 안(3D 위에 띄우는 팻말 · 말풍선 · 깃발 단추). 토큰은 app.css :root(= DESIGN.md 진법젤리 확장).
   글꼴: 제목 · 지도 이름표만 Jua(둥근 한글, lib/fonts), 나머지 Pretendard · 숫자 Fredoka. 반경 18 · 11 · 끝까지 둥글게.
   3D 자리 단추는 left/top 0 에 두고 JS 가 transform 으로 옮긴다(가운데 맞춤은 translate 속성, 톡 튀는 효과는 scale 속성 → 서로 안 겹침). */
@font-face { font-family: "Jua"; src: url("../lib/fonts/Jua-app.woff2") format("woff2"); font-weight: 400; font-display: swap; }   /* 지도에 쓰는 글자만 남긴 Jua(12KB, 원본 lib/fonts/Jua-Regular.woff 에서 pyftsubset — APP_V8.md). 없는 글자는 Pretendard 로 */

#tc { position: fixed; inset: 0; z-index: 0; display: none; width: 100vw; height: 100dvh; touch-action: none; opacity: 0; transition: opacity .8s var(--ease); }
body[data-tour] #tc { display: block; }
#tc.on { opacity: 1; }
body[data-tour] { background: var(--t16); }
#map, #village, #start { overflow: hidden; -webkit-user-select: none; user-select: none; }   /* 지도를 끌거나 두 번 눌러도 글자가 파랗게 잡히지 않게 */

/* ── 타이틀: 위 하늘에 이름(글자마다 톡톡) + 출발, 아래는 지도 */
.title-card { position: absolute; left: 50%; top: max(20px, env(safe-area-inset-top), 6vh); translate: -50% 0; display: grid; justify-items: center; gap: clamp(14px, 2.6vh, 26px); width: min(100% - 32px, 900px); text-align: center; pointer-events: none; }
.title-card > * { pointer-events: auto; }
.ttl { font: 400 clamp(54px, 8.6vw, 116px)/1.08 Jua, var(--kr); letter-spacing: .02em; color: var(--ink); text-wrap: balance; }
.ttl .tls { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.ttl .tl { --c: var(--v1); display: inline-block; -webkit-text-stroke: .13em #fff; paint-order: stroke fill; text-shadow: 0 .075em 0 var(--c), 0 .16em .32em rgba(59, 50, 82, .2);
  animation: tpop .75s cubic-bezier(.3, 1.6, .5, 1) both, tbob 3.6s ease-in-out infinite; animation-delay: calc(.2s + var(--i) * 85ms), calc(1.3s + var(--i) * 160ms); }
.ttl .tl:nth-child(1) { --c: var(--v1); } .ttl .tl:nth-child(2) { --c: var(--v2); } .ttl .tl:nth-child(4) { --c: var(--v4); } .ttl .tl:nth-child(5) { --c: var(--v8); }
.ttl .tl:nth-child(7) { --c: var(--v16); } .ttl .tl:nth-child(8) { --c: var(--v32); }
.ttl .tgap { display: inline-block; width: .32em; }
@keyframes tpop { 0% { opacity: 0; transform: translateY(-.6em) scale(.3, .5); } 55% { opacity: 1; transform: translateY(.06em) scale(1.12, .88); } 78% { transform: translateY(-.03em) scale(.96, 1.05); } 100% { transform: none; } }
@keyframes tbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.045em; } }
.btn.go { min-width: 240px; min-height: 84px; gap: 12px; padding: 0 44px; font-size: 30px; border-radius: 999px; animation: gopop .6s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
.btn.go .ic { width: 30px; height: 30px; fill: currentColor; }
@keyframes gopop { from { opacity: 0; scale: .6; } }

/* ── 위 막대(지도 · 마을 안): 왼쪽 이름 · 오른쪽 작은 동그란 단추들 */
.tbar { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.tbar > * { pointer-events: auto; }
.tbar .tools { display: flex; gap: 8px; margin-left: auto; }
.tbar .sound { margin: 0; gap: 8px; }
.tbar .btn.icon { border-radius: 50%; background: rgba(255, 253, 249, .9); box-shadow: 0 4px 0 rgba(59, 50, 82, .1), 0 8px 20px rgba(96, 74, 150, .16); }
.tbar .btn.icon:active { box-shadow: 0 1px 0 rgba(59, 50, 82, .1), 0 4px 12px rgba(96, 74, 150, .14); }
.tbar .btn.icon[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tbar .btn.icon[aria-expanded="true"] { background: var(--v4); }
.tbar .btn.howto { gap: 8px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(255, 253, 249, .9); font-size: 18px; box-shadow: 0 4px 0 rgba(59, 50, 82, .1), 0 8px 20px rgba(96, 74, 150, .16); }   /* 10판 [사용법 영상] — 휴대폰은 아이콘만 */
.mark { padding: 8px 20px 10px; border-radius: 999px; background: rgba(255, 253, 249, .88); font: 400 28px/1.1 Jua, var(--kr); color: var(--ink); box-shadow: 0 8px 20px rgba(96, 74, 150, .14); white-space: nowrap; }
.vtitle { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 6px 20px 6px 8px; border-radius: 999px; background: rgba(255, 253, 249, .92); box-shadow: 0 8px 20px rgba(96, 74, 150, .14); font: 800 24px/1.2 var(--kr); }
.vtitle .vno { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 26px var(--num); }
.vtitle .vtt { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; min-width: 0; white-space: nowrap; }
.vtitle .op { color: var(--ink-2); font-weight: 600; }

/* ── 지도 팻말(번호 + 이름 + 진법 알약) — 섬 앞 물 위에 걸린다 */
#mapNav, #flags { position: absolute; inset: 0; pointer-events: none; }
#mapNav .sign { position: absolute; left: 0; top: 0; translate: -50% 0; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px;
  background: var(--card); color: var(--ink); font: 800 20px/1.1 var(--kr); white-space: nowrap; cursor: pointer; pointer-events: auto;
  box-shadow: 0 5px 0 rgba(59, 50, 82, .12), 0 12px 26px rgba(96, 74, 150, .2); transition: scale .3s var(--ease), opacity .3s var(--ease); }
#mapNav .sign::before { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; translate: -50% 0; rotate: 45deg; border-radius: 4px 0 0 0; background: var(--card); }   /* 섬 쪽을 가리키는 꼭지 */
#mapNav .sign:hover { box-shadow: 0 0 0 3px var(--b16), 0 8px 20px rgba(59, 50, 82, .18); }   /* 위치는 JS transform 이라 scale 을 쓰면 팻말이 미끄러짐(10판 촬영 때 발견) → 테두리로 강조 */
#mapNav .sign:active { filter: brightness(.96); }
#mapNav .sign:focus-visible { outline: 4px solid var(--b16); outline-offset: 3px; }
#mapNav .sn { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 28px var(--num); }
#mapNav .sign[aria-current] .sn { background: var(--v1); color: var(--ink); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--v1); }   /* 하나가 있는 마을 */
#mapNav .sp { display: inline-flex; align-items: center; gap: 3px; font-size: 19px; }   /* 알약 흰 글자는 19px 이상(굵은 큰 글자 대비 3:1) */
#mapNav .sp .op { color: var(--ink-2); font: 600 19px var(--num); }
#mapNav .sign.lab { padding: 6px 20px 6px 10px; gap: 10px; background: var(--t2); }
#mapNav .sign.lab::before { background: var(--t2); }
#mapNav .sign.lab .ic { width: 36px; height: 36px; color: var(--b2); }

/* ── 도착 말풍선: 하나 머리 위 */
.bubble { position: absolute; left: 0; top: 0; width: min(320px, calc(100vw - 20px)); padding: 14px 16px 16px; border-radius: 18px; background: linear-gradient(180deg, var(--t2), var(--card) 62%); box-shadow: var(--shadow); transform-origin: var(--tail, 50%) 100%; }
.bubble::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -10px; width: 22px; height: 22px; translate: -50% 0; rotate: 45deg; border-radius: 0 0 5px 0; background: var(--card); }
.bubble[data-side="r"] { transform-origin: 0 var(--tail); }
.bubble[data-side="l"] { transform-origin: 100% var(--tail); }
.bubble[data-side="r"]::after, .bubble[data-side="l"]::after { top: var(--tail); bottom: auto; translate: 0 -50%; }
.bubble[data-side="r"]::after { left: -9px; border-radius: 0 0 0 5px; }
.bubble[data-side="l"]::after { left: auto; right: -9px; border-radius: 0 5px 0 0; }
.bubble.in { animation: bin .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.bubble.pulse { animation: bpulse .5s var(--ease); }
@keyframes bin { from { opacity: 0; scale: .7; } }
@keyframes bpulse { 40% { scale: 1.06; } }
.arh { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 28px/1.15 Jua, var(--kr); }
.arn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--v1); font: 700 24px var(--num); }
.arq { margin: 8px 0 12px; font: 600 19px/1.4 var(--kr); text-wrap: pretty; }
.arb { display: flex; flex-wrap: wrap; gap: 10px; }
.arb .btn { flex: 1 1 auto; }
.arb .btn .ic { width: 24px; height: 24px; fill: currentColor; }

/* ── 마을 안 깃발: 번호 동그라미(초점 · 마우스면 활동 이름표) · 마지막 보물 상자 '정리' */
#flags ol { margin: 0; padding: 0; list-style: none; }
#flags .flag { position: absolute; left: 0; top: 0; translate: -50% -100%; display: grid; justify-items: center; min-width: 64px; min-height: 64px; padding: 4px; color: var(--ink); text-decoration: none; pointer-events: auto;
  animation: fpop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.25s + var(--k, 0) * 70ms); }
@keyframes fpop { from { opacity: 0; scale: .3; } }
#flags .fn { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--card); font: 700 28px var(--num);
  box-shadow: inset 0 0 0 4px var(--ink), 0 5px 0 rgba(59, 50, 82, .14), 0 10px 22px rgba(96, 74, 150, .22); transition: scale .3s var(--ease); }
#flags .flag:hover .fn { scale: 1.1; }
#flags .flag:active .fn { scale: .95; }
#flags .flag:focus-visible { outline: none; }
#flags .flag:focus-visible .fn { outline: 4px solid var(--b16); outline-offset: 3px; }
#flags .ft { position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -50% 4px; display: inline-flex; align-items: center; gap: 4px 6px; padding: 6px 12px; border-radius: 11px;
  background: var(--ink); color: #fff; font: 700 18px/1.2 var(--kr); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), translate .25s var(--ease); }
#flags .ft .op { color: #fff; }
#flags .ft .tagp { font-size: 16px; }
#flags .ft .bpill { font-size: 19px; }
#flags .flag:hover .ft, #flags .flag:focus-visible .ft { opacity: 1; translate: -50% 0; }
#flags .chest .fn { background: var(--v4); box-shadow: inset 0 0 0 4px #fff, 0 5px 0 rgba(59, 50, 82, .14), 0 10px 22px rgba(96, 74, 150, .22); }
#flags .chest .fn .ic { width: 30px; height: 30px; fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
#flags .chest .ft { top: 100%; bottom: auto; translate: -50% 2px; padding: 2px 12px 4px; background: var(--card); color: var(--ink); opacity: 1; box-shadow: 0 4px 12px rgba(96, 74, 150, .18); }   /* 9판: 동그라미 밑에 붙임(깃발마다 같은 높이로 자리 잡게) */

/* ── 오늘 배울 것(마을에 들어올 때 잠깐, 위 책 단추로 다시) */
.gcard { position: absolute; left: max(16px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 80px); width: min(400px, calc(100vw - 32px)); padding: 16px 18px 18px; border-radius: 18px;
  background: linear-gradient(180deg, var(--t2), var(--card) 62%); box-shadow: var(--shadow); animation: rise .45s var(--ease); }
.gcard .gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gcard h2 { font: 400 26px/1.2 Jua, var(--kr); }
.gcard .gclose { width: 64px; min-width: 64px; min-height: 64px; margin: -6px -6px -6px 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(59, 50, 82, .1); }
.glist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.glist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 8px 14px; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px rgba(59, 50, 82, .07); font: 700 20px/1.3 var(--kr); }
.glist .bpill { font-size: 20px; }
.glist .tagp { font-size: 16px; }

/* ── 세로 화면(휴대폰) */
@media (orientation: portrait) {
  .title-card { top: max(16px, env(safe-area-inset-top), 5vh); }
  .ttl { font-size: clamp(48px, 15vw, 96px); }
  .btn.go { min-height: 76px; font-size: 26px; }
  .mark { font-size: 24px; padding: 8px 16px; }
  .vtitle { font-size: 20px; padding-right: 14px; }
  .vtitle .vno { width: 44px; height: 44px; font-size: 24px; }
  .gcard { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: auto; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
  .gcard { padding: 12px 14px 14px; }
  .gcard .gh { margin-bottom: 6px; }
  .gcard h2 { font-size: 22px; }
  .glist { gap: 6px; }
  .glist li { min-height: 48px; padding: 6px 10px; gap: 4px 10px; font-size: 17px; }
  .glist .bpill { font-size: 19px; }
  .glist .gn { width: 28px; height: 28px; font-size: 16px; }
  #mapNav .sign { font-size: 18px; padding-right: 14px; }
  #mapNav .sp { display: none; }
}
@media (max-width: 460px) {   /* 좁은 휴대폰: 단추는 64px 그대로, 이름을 줄이고 마을 안 소리 단추는 지도 · 활동 화면에서만 */
  .tbar { gap: 8px; }
  .tbar .tools, .tbar .sound { gap: 6px; }
  .mark { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 10판: [사용법 영상]이 들어와 좁은 휴대폰 지도에서는 제목을 화면 읽기용으로만(타이틀 화면에 큰 제목) */
  #village .tbar .sound, #village .tbar .howto { display: none; }   /* 10판: 좁은 휴대폰 마을 안은 제목 자리가 모자라 [사용법 영상]도 지도에서만 */
  .tbar .btn.howto { width: 64px; padding: 0; }
  .tbar .howto .hl { display: none; }
  .vtitle .vtt .w { display: none; }
  .vtitle { font-size: 19px; gap: 8px; }
}
#mapNav .sign.far { opacity: 0; pointer-events: none; }
#mapNav .sign.far:focus-visible { opacity: 1; }
.bubble[data-side="b"] { top: auto; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; transform-origin: var(--tail) 0; }
.bubble[data-side="b"]::after { top: -9px; bottom: auto; border-radius: 5px 0 0 0; background: var(--t2); }
#mapNav .sign.lab.edge { padding: 6px; }
#mapNav .sign.lab.edge .st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 9판: 순서대로 진행하기(마을 안 아래 가운데 · 오늘 배울 것 카드 안 · 도착 말풍선의 작은 단추) · 실험 깃발 플라스크 표시 */
.vseq { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; min-height: 72px; padding: 0 30px; border-radius: 999px; font-size: 22px; }
.vseq .ic, #vgSeq .ic, .arb .seq .ic { width: 26px; height: 26px; }
.gcard #vgSeq { margin-top: 12px; width: 100%; }
.arb .btn.sm.seq { min-height: 64px; font-size: 18px; gap: 6px; padding: 0 14px; }
#flags .fn { position: relative; }
#flags .fn .fx { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--v8); box-shadow: 0 0 0 3px #fff; }
#flags .fn .fx .ic { width: 18px; height: 18px; color: var(--ink); }
.bubble[data-side="u"] { transform-origin: var(--tail) 0; }
.bubble[data-side="u"]::after { top: -9px; bottom: auto; border-radius: 5px 0 0 0; background: var(--t2); }
.bubble[data-side="c"]::after { display: none; }   /* 9판: 화면 귀퉁이 카드(옆 섬을 가리지 않게) — 꼭지 없음 */
/* 9판 넓은 가로 화면: 도착 카드 = 위 막대 아래 띠(이름 · 질문 · 단추 한 줄). 지도 맞춤이 위 120px 를 비워 두어 섬을 가리지 않는다 */
.bubble[data-side="t"] { top: calc(max(12px, env(safe-area-inset-top)) + 72px); left: 50%; translate: -50% 0; width: min(940px, calc(100vw - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 10px 12px 10px 14px; transform-origin: 50% 0; }
.bubble[data-side="t"]::after { display: none; }
.bubble[data-side="t"] .arq { margin: 0; }
.bubble[data-side="t"] .arb { flex-wrap: nowrap; }
.bubble[data-side="t"] .arh { white-space: nowrap; }
/* 9판 휴대폰 가로(낮은 화면): 순서대로 단추는 오른쪽 아래, 오늘 배울 것 카드는 안에서 스크롤, 지도 팻말은 이름만 */
@media (orientation: landscape) and (max-height: 500px) {
  .vseq { left: auto; right: max(16px, env(safe-area-inset-right)); translate: none; min-height: 64px; padding: 0 22px; font-size: 20px; }
  .gcard { top: calc(max(12px, env(safe-area-inset-top)) + 72px); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; }
  .glist li { min-height: 48px; padding: 6px 10px; font-size: 17px; }
  #mapNav .sp { display: none; }
  #mapNav .sign { font-size: 18px; padding-right: 14px; }
  #flags .chest .ft { top: 50%; left: 100%; translate: 4px -50%; }   /* 낮은 화면: '정리' 글은 동그라미 옆에 */
  .bubble { width: min(300px, calc(100vw - 20px)); padding: 10px 12px 12px; }
  .arh { font-size: 24px; }
  .arq { margin: 4px 0 8px; font-size: 17px; }
}