.globe-stage {
    position: relative; z-index: 1;
    width: min(46vw, 540px); margin: 0 auto;
    aspect-ratio: 1;
    opacity: 0; animation: globeIn 1s .15s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes globeIn { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
  .globe-stage::before {
    /* 패널 뒤 푸른 후광 */
    content: ''; position: absolute; inset: -10%;
    background: radial-gradient(closest-side, rgba(54,143,255,.26), rgba(54,143,255,.05) 62%, transparent 78%);
    pointer-events: none;
  }
  /* 앱 화면처럼 둥근 사각 패널. 원형으로 자르면 확대했을 때 지도와 핀이 잘린다. */
  .globe-disc {
    position: absolute; inset: 0;
    border-radius: 32px; overflow: hidden;
    background: radial-gradient(circle at 50% 46%, #24406e 0%, #142743 42%, #0B1526 72%);
    box-shadow: 0 34px 74px rgba(29,91,216,.26), 0 6px 18px rgba(35,37,42,.16),
                inset 0 0 0 1px rgba(255,255,255,.10);
    /* 한 손가락으로 지구본을 상하좌우 굴린다 (페이지 스크롤로 넘기지 않음) */
    touch-action: none;
  }
  /* 타일이 다 그려질 때까지는 위의 CSS 구(球)만 보여준다 (흰 화면 번쩍임 방지) */
  #globe { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
  .globe-stage.ready #globe { opacity: 1; }
  #globe canvas { outline: none; }
  /* 확대·축소 버튼 + 처음으로 (앱의 현재위치 버튼과 같은 톤) */
  .globe-disc .mapboxgl-ctrl-group {
    background: rgba(255,253,248,.92); border-radius: 14px;
    box-shadow: 0 4px 14px rgba(11,21,38,.34); overflow: hidden;
  }
  .globe-disc .mapboxgl-ctrl-group button { width: 34px; height: 34px; }
  .globe-disc .mapboxgl-ctrl-bottom-right { margin: 0 12px 12px 0; }
  .globe-reset {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: none; align-items: center; gap: 6px;
    background: rgba(255,253,248,.94); color: var(--deep);
    font-size: 13px; font-weight: 700; white-space: nowrap;
    padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer;
    box-shadow: 0 4px 14px rgba(11,21,38,.34);
    transition: transform .18s cubic-bezier(.2,.8,.2,1);
  }
  .globe-reset:hover { transform: translateY(-1px); }
  .globe-stage.zoomed .globe-reset { display: inline-flex; }
  /* 지도가 뜨기 전에는 어두운 구(球)만 보이고, WebGL이 아예 안 되면 앱 화면으로 대체한다 */
  .globe-fallback { position: absolute; inset: 0; display: none; place-items: center; }
  .globe-fallback .phone { width: min(232px, 58%); opacity: 1; transform: none; animation: none; }
  .globe-stage.failed .globe-fallback { display: grid; }
  .globe-stage.failed .globe-disc,
  .globe-stage.failed .globe-hint { display: none; }
  .globe-stage.failed::before { inset: -4%; }
  /* 앱의 떠 있는 알약 버튼과 같은 톤으로 지도 안쪽 아래에 둔다 */
  .globe-hint {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 3;
    background: rgba(255,253,248,.94); color: var(--muted);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    padding: 9px 16px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(11,21,38,.34);
    transition: opacity .3s ease, transform .3s ease;
  }
  .globe-hint b { color: var(--deep); font-weight: 700; }
  .globe-stage.touched .globe-hint,
  .globe-stage.zoomed .globe-hint { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }

  /* ─── 일기 편지 카드 (앱 LetterModal 재현) ─── */
  .letter-layer { position: fixed; inset: 0; z-index: 90; display: none; }
  .letter-layer.open { display: block; }
  .letter-backdrop {
    position: absolute; inset: 0; background: rgba(20,22,28,.56);
    opacity: 0; transition: opacity .24s ease; border: 0; width: 100%; cursor: pointer;
  }
  .letter-layer.in .letter-backdrop { opacity: 1; }
  .letter-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }
  .letter {
    width: 100%; max-width: 340px; max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #EFE7D6; border-radius: 24px;
    overflow: hidden; box-shadow: 0 30px 70px rgba(20,22,28,.34);
    opacity: 0; transform: scale(.13);
    transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  .letter-layer.in .letter { opacity: 1; transform: none; }
  .letter-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 14px; }
  .letter-meta { font-size: 14px; font-style: italic; color: #8A857C; }
  .letter-title { font-size: 22px; font-weight: 700; color: #37332C; margin-top: 3px; letter-spacing: -0.02em; }
  .letter-close {
    flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: #F0EADF; color: #8A857C; cursor: pointer;
    display: grid; place-items: center; font-size: 15px; line-height: 1;
    transition: background .18s;
  }
  .letter-close:hover { background: #E6DECF; }
  .letter-body { overflow-y: auto; padding: 0 22px 8px; }
  .letter-photo {
    height: 188px; border-radius: 14px; display: grid; place-items: center; gap: 8px;
    align-content: center;
  }
  .letter-photo img { width: 46px; filter: drop-shadow(0 6px 12px rgba(35,37,42,.16)); }
  .letter-photo span { font-size: 15px; font-weight: 600; opacity: .72; }
  .letter-text { font-size: 16px; line-height: 1.85; color: #46433D; margin-top: 16px; }
  .letter-foot { padding: 14px 22px 20px; border-top: 1px solid #F1EEE8; }
  .letter-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; border-radius: 999px; background: var(--soft);
    color: var(--deep); font-size: 16px; font-weight: 700;
    transition: background .18s, transform .18s cubic-bezier(.2,.8,.2,1);
  }
  .letter-cta:hover { background: #DCEAFF; transform: translateY(-1px); }
  .letter-cta:active { transform: scale(.98); }


/* Preserve the map diary identity: one interactive globe, actual app screens. */
.hero-visual{height:auto;min-height:540px;display:grid;place-items:center}
.globe-stage{width:100%;max-width:540px;opacity:1;animation:none}
.globe-stage::before{display:none}.globe-disc{border-radius:32px;box-shadow:0 24px 60px #25374820}
.globe-fallback .phone{position:relative;inset:auto;border:0;box-shadow:0 14px 35px #25374820;border-radius:28px;overflow:hidden}
.globe-fallback .phone img{border-radius:0}.globe-hint{font-size:12px;bottom:18px}
.globe-disc .mapboxgl-ctrl-bottom-right{margin-bottom:52px}.globe-disc .mapboxgl-ctrl-attrib{font-size:10px}
.languages{border:1px solid #25374838;border-radius:999px;padding:4px;gap:2px;background:#fffdf9;align-items:center}
.languages a{padding:7px 9px;border-radius:999px;min-width:32px;text-align:center}
.languages a[aria-current]{background:var(--soft);color:var(--deep)}.languages a:hover{background:#eaf2fc}
.languages-label{font-size:10px;padding-left:8px;margin-right:3px;color:var(--muted)}
.feature-record>img{width:280px;top:218px;border:5px solid #253748;border-radius:30px;transform:translateX(-50%) rotate(-3deg)}
.feature-discover>img{width:240px;top:174px;border:4px solid #253748;border-radius:26px;right:36px}
.gallery-card{flex-basis:246px}.image-open{border-radius:26px;border:4px solid #253748;background:#f4f6f8;box-shadow:0 10px 22px #25374812}
.gallery-card img{aspect-ratio:1206/2622;object-fit:cover}.gallery-card figcaption{padding-inline:4px}
.letter-layer[hidden]{display:none}.letter-center{pointer-events:none}.letter{pointer-events:auto}.letter-photo{flex-shrink:0}.letter-cta{font-size:14px}
@media(max-width:1000px){.hero-visual{min-height:420px}.globe-stage{max-width:460px}.languages-label{display:none}}
@media(max-width:740px){.hero-visual{width:100%;height:auto;min-height:0;padding-block:12px 20px}.globe-stage{width:100%;max-width:470px}.globe-disc{border-radius:24px}.languages{gap:0;padding:3px}.languages a{padding:6px 7px;min-width:28px}.nav-actions{gap:10px}.feature-record>img{width:245px;top:200px}.feature-discover>img{width:230px;right:calc(50% - 115px);top:180px}.gallery-card{flex-basis:240px}.globe-hint{font-size:11px;padding:9px 12px}.globe-reset{font-size:11px}}
@media(prefers-reduced-motion:reduce){.globe-stage,.letter,.letter-backdrop{animation:none;transition:none}}

/* Use the existing cafe diary artwork, showing only its phone screen. */
.feature-record .diary-preview{position:absolute;top:200px;left:50%;width:300px;aspect-ratio:994/2006;overflow:hidden;border-radius:30px 30px 0 0;transform:translateX(-50%) rotate(-3deg);box-shadow:0 15px 30px #25374816}
.diary-preview>img{position:absolute;max-width:none;width:121.33%;height:auto;left:-10.66%;top:-30.31%}
@media(max-width:740px){.feature-record .diary-preview{width:260px;top:186px;border-radius:26px 26px 0 0}}