/* §34-3 해외 플랫폼·그 나라 말(.hb-world · 11-05 사장님 "쇼피파이 통으로 · 모션 똑같이") — 그쪽 '글로벌 무대로 확장하세요' 구간 결 · 겉 결·움직임 숫자만
   그쪽 실측(1440 · scratchpad/shopify/mo/timing.json): 제목 56/330 · 판 1260×596 · 둥글기 12 · 바탕 #061a1c · 국기 칸 64(틈 12 · 다섯 칸 · 가운데 켜짐)
   카드 = perspective(50px) translate3d(x, 0, z) · 앞 236×310(0, 0) · 옆 ±118 · z −10(0.833배) · 뒤 z −20 숨김 · 0.7s ease-in-out · 5초마다
   알약 48 높이(4 24 4 4 · 원 40) · 나갈 때 0.5s 아래로 40 + 흐려짐 · 들어올 때 0.5s 뒤 1s 아래에서 올라옴(cubic-bezier(.4,0,.2,1))
   점 지도 = js/am-earth.js 땅 자료(손으로 적은 윤곽) · 메르카토르 · 6px 간격 · 그쪽 그림·자료 0 · 화면 밖·모션 줄이기 = 첫 나라(미국) 그대로 */
.hb.hb-world { position: relative; padding: 120px 0 128px; background: #02090a; color: #fff; }
.wld-wrap { width: min(1260px, calc(100% - 2 * var(--am-gutter, 40px))); margin: 0 auto; }
.wld-t { margin: 0 0 48px; font-family: var(--font); font-size: 56px; font-weight: 330; line-height: 1.08; letter-spacing: -.03em; color: #fff; word-break: keep-all; text-wrap: balance; }
.wld-pan { position: relative; border-radius: 12px; overflow: hidden; isolation: isolate; background: radial-gradient(60% 85% at 10% 28%, rgba(40, 92, 90, .5), rgba(40, 92, 90, 0) 72%), linear-gradient(90deg, #092221, #061a1c 46%, #071c1e); }
.wld-stage { position: relative; height: 596px; }
.wld-map { position: absolute; right: 0; top: 0; width: 60%; height: 100%; -webkit-mask: linear-gradient(90deg, transparent, #000 22%); mask: linear-gradient(90deg, transparent, #000 22%); }
.wld-map canvas { display: block; width: 100%; height: 100%; }
.wld-pin { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #a8f5da; box-shadow: 0 0 12px rgba(168, 245, 218, .8); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.wld-pin.is-on { opacity: 1; }
.wld-pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(168, 245, 218, .7); opacity: 0; }

/* 국기 줄(왼쪽 · 세로 다섯 칸 · 가운데 켜짐) */
.wld-flags { position: absolute; left: 44px; top: 42%; width: 64px; height: 0; z-index: 3; }
.wld-flag { position: absolute; left: 0; top: -32px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255, 255, 255, .07); transform: translateY(calc(var(--o, 0) * 76px)); opacity: var(--op, 1); transition: transform .7s ease-in-out, opacity .7s ease-in-out, background-color .7s ease-in-out; }
.wld-flag.is-on { background: rgba(226, 240, 238, .3); }
.wld-flag:nth-child(1) { --o: 0; --op: 1; }
.wld-flag:nth-child(2) { --o: 1; --op: .62; }
.wld-flag:nth-child(3) { --o: 2; --op: .3; }
.wld-flag:nth-child(4) { --o: -3; --op: 0; }
.wld-flag:nth-child(5) { --o: -2; --op: .3; }
.wld-flag:nth-child(6) { --o: -1; --op: .62; }
.wld-flag:first-child:not([style]) { background: rgba(226, 240, 238, .3); }
.wld-flag svg, .wld-pill .fl svg { display: block; width: 36px; height: 24px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* 카드 돌림(가운데 · 3D) */
.wld-cards { --wld-side: 118px; position: absolute; left: 323px; top: 62px; width: 236px; height: 310px; z-index: 4; }
.wld-card { position: absolute; inset: 0; padding: 16px; border-radius: 8px; background: #fff; color: #17191b; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65); transform: perspective(50px) translate3d(var(--x, 0px), 0, var(--z, -20px)); opacity: var(--op, 0); z-index: var(--zi, 0); transition: transform .7s ease-in-out, opacity .2s ease-in-out; }
.wld-card:first-child { --x: 0px; --z: 0px; --op: 1; --zi: 30; --dim: 0; }
.wld-card:nth-child(2) { --x: var(--wld-side); --z: -10px; --op: 1; --zi: 10; }
.wld-card:last-child { --x: calc(-1 * var(--wld-side)); --z: -10px; --op: 1; --zi: 20; }
.wld-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(6, 26, 28, .5); opacity: var(--dim, 1); transition: opacity .2s ease-in-out; pointer-events: none; }
.wld-shot { position: relative; height: 210px; padding: 12px; border-radius: 4px; background: var(--g, #efe9df); overflow: hidden; }
.wld-shot .u { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .01em; color: rgba(23, 25, 27, .55); }
.wld-shot .t { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #15171a; }
.wld-shot .b { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: rgba(23, 25, 27, .14); }
.wld-shot .im { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 70px; border-radius: 4px; background: var(--im, linear-gradient(135deg, #c99a6b, #8a5a38)); }
.wld-btn { display: flex; align-items: center; justify-content: center; height: 56px; margin: 12px 0 0; border-radius: 4px; background: linear-gradient(180deg, #2b4a4c, #1d3537); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }
.wld-ja, .wld-card[lang="ja"], .wld-card [lang="ja"], .wld-pill [lang="ja"], .wld-list [lang="ja"] { font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, sans-serif; }

/* 알약(요청서 언어) */
.wld-pill { position: absolute; left: 512px; top: 226px; z-index: 6; display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 4px 24px 4px 4px; border-radius: 999px; background: #fff; color: #17191b; font-size: 16px; font-weight: 450; white-space: nowrap; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .6); transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.4, 0, .2, 1); }
.wld-pill .fl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eef1f1; overflow: hidden; }
.wld-pill .fl svg { width: 30px; height: 20px; border-radius: 2px; }
.wld-pill.is-out { opacity: 0; transform: translateY(40px); transition-duration: .5s; }

/* 신고 양식 목록(흰 판) + 요청 순서(지도 위) */
.wld-list { position: absolute; left: 790px; top: 320px; z-index: 5; width: 196px; padding: 6px; border-radius: 6px; background: #fff; color: #17191b; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6); }
.wld-list .h { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 6px 8px 8px; font-size: 11px; font-weight: 700; }
.wld-ex, .wld-card-ex { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid #bcc6c5; background: #fff; font-family: var(--font); font-size: 10.5px; font-weight: 600; line-height: 18px; color: #374342; white-space: nowrap; }
.wld-stage > .wld-ex { position: absolute; top: 16px; right: 16px; z-index: 8; }
.wld-card-ex { position: absolute; left: 26px; bottom: 96px; z-index: 1; height: 23px; border-color: rgba(255, 255, 255, .35); background: #173b37; color: #fff; font-size: 12.6px; line-height: 21px; }
.wld-list ul { margin: 0; padding: 0; list-style: none; }
.wld-list li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border-radius: 4px; font-size: 10.5px; color: #2b3134; transition: background-color .5s ease; }
.wld-list li > i { width: 11px; height: 13px; border-radius: 2px; border: 1.3px solid #9aa4a6; }
.wld-list li > em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #6b7678; }
.wld-list li.is-on { background: #e4f1fb; }
.wld-list li.is-on > em { color: #1f5f99; }
.wld-chk { position: absolute; right: 32px; top: 300px; z-index: 5; width: 150px; margin: 0; padding: 0; list-style: none; font-size: 10.5px; color: rgba(236, 246, 244, .86); }
.wld-chk li { display: flex; align-items: center; gap: 8px; height: 24px; }
.wld-chk li.h { gap: 6px; font-weight: 600; color: rgba(236, 246, 244, .62); }
.wld-chk li > i { position: relative; width: 12px; height: 12px; border-radius: 3px; background: rgba(236, 246, 244, .86); flex: none; }
.wld-chk li > i::after { content: ""; position: absolute; left: 3.4px; top: 2.2px; width: 5px; height: 2.6px; border-left: 1.5px solid #082022; border-bottom: 1.5px solid #082022; transform: rotate(-45deg); }
.wld-chk li.off { opacity: .4; }
.wld-chk li.off > i { background: transparent; box-shadow: 0 0 0 1.3px rgba(236, 246, 244, .86) inset; }
.wld-chk li.off > i::after { display: none; }
.wld-chk li.now > span { height: 20px; padding: 0 8px; border-radius: 999px; background: #fff; color: #17191b; font-weight: 600; line-height: 20px; }

/* 아래 왼쪽 글(판 안) */
.wld-cap { position: absolute; left: 32px; bottom: 32px; z-index: 6; max-width: 650px; }
.wld-h { margin: 0; font-size: 18px; font-weight: 500; line-height: 26px; color: #fff; }
.wld-p { margin: 8px 0 0; font-size: 16px; font-weight: 420; line-height: 24px; color: rgba(225, 233, 232, .66); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  html.anim .hb-world.is-vis .wld-pin.is-on::after { animation: wld-ping 1.8s cubic-bezier(.2, .6, .3, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .wld-flag, .wld-card, .wld-card::after, .wld-pill, .wld-list li { transition: none; } }
html.am-hold .hb-world :is(*, *::before, *::after) { animation-play-state: paused !important; }
@keyframes wld-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ── 좁은 데스크톱(≤1180): 지도 위 판 둘 자리 당김 ── */
@media (max-width: 1180px) {
  .wld-t { font-size: 48px; }
  .wld-list { left: auto; right: 24px; }
  .wld-chk { display: none; }
}
@media (max-width: 1240px) { .wld-chk { display: none; } }
/* ── 태블릿(≤1023): 판 높이 그대로 · 목록 숨김 ── */
@media (max-width: 1023px) {
  .hb.hb-world { padding: 96px 0 96px; }
  .wld-t { font-size: 44px; }
  .wld-list { display: none; }
  .wld-cards { left: 50%; top: 82px; margin-left: -118px; }
  .wld-pill { left: 50%; top: 422px; translate: -50% 0; }
  .wld-flags { left: 32px; }
  .wld-cap { max-width: 520px; }
}
/* ── 폰(≤767): 국기 = 위 가로 줄 · 카드 가운데 · 알약 카드 아래 · 지도 뒤 · 글 = 판 아래쪽 흐름(그쪽 폰 결) ── */
@media (max-width: 767px) {
  .hb.hb-world { padding: 72px 0 72px; }
  .wld-wrap { width: calc(100% - 2 * var(--am-gutter, 12px)); }
  .wld-t { margin-bottom: 32px; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
  .wld-stage { height: 452px; }
  .wld-map { width: 100%; -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent); opacity: .7; }
  .wld-flags { left: 50%; top: 22px; width: 0; height: 52px; }
  .wld-flag { left: -26px; top: 0; width: 52px; height: 52px; border-radius: 10px; transform: translateX(calc(var(--o, 0) * 62px)); }
  .wld-flag svg { width: 30px; height: 20px; }
  .wld-cards { --wld-side: 84px; left: 50%; top: 100px; width: 190px; height: 250px; margin-left: -95px; }
  .wld-card { padding: 12px; }
  .wld-card-ex { left: 22px; bottom: 80px; }
  .wld-shot { height: 164px; padding: 10px; }
  .wld-shot .t { font-size: 13px; }
  .wld-shot .im { height: 52px; }
  .wld-btn { height: 46px; margin-top: 10px; font-size: 12.5px; }
  .wld-pill { left: 50%; top: 372px; height: 44px; margin-left: 0; padding-right: 18px; font-size: 14px; }
  .wld-pill .fl { width: 36px; height: 36px; }
  .wld-list, .wld-chk { display: none; }
  .wld-cap { position: static; padding: 4px 20px 24px; }
  .wld-h { font-size: 16px; line-height: 22px; }
  .wld-p { font-size: 14px; line-height: 20px; }
}