:root { --red:#ed1b24; --content:1500px; }
* { box-sizing:border-box; }
html, body { width:100%; margin:0; padding:0; overflow:hidden; background:transparent; }
body { font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif; }
.map-only-page { width:100%; margin:0; padding:0; }
.map-section { position:relative; width:min(100%,var(--content)); aspect-ratio:16/9; margin:0 auto; overflow:hidden; overflow:clip; contain:paint; background:#9f9892; }
.map-frame { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:#9f9892; overflow:hidden; }
.fullscreen-button { position:absolute; z-index:4000; right:30px; bottom:30px; display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(255,255,255,.55); border-radius:12px; color:#fff; background:rgba(20,24,31,.78); box-shadow:0 5px 16px rgba(0,0,0,.28); cursor:pointer; backdrop-filter:blur(5px); transition:background .2s ease,transform .2s ease; }
.fullscreen-button:hover { background:var(--red); transform:translateY(-2px); }
.fullscreen-button:focus-visible { outline:3px solid #ffe600; outline-offset:3px; }
.fullscreen-button svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.map-section:fullscreen { width:100vw; max-width:none; height:100vh; margin:0; aspect-ratio:auto; background:#9f9892; }
.map-section:fullscreen .fullscreen-button { position:fixed; }
.map-section.is-mobile-fullscreen { width:100vw; max-width:none; height:100dvh; min-height:100dvh; margin:0; aspect-ratio:auto; background:#9f9892; }
@media (max-width:768px) {
  html, body, .map-only-page { width:100%; height:100%; }
  .map-section { width:100%; height:100dvh; min-height:100dvh; aspect-ratio:auto; }
  .fullscreen-button { right:30px; bottom:30px; width:42px; height:42px; border-radius:10px; }
  html.map-mobile-fullscreen, body.map-mobile-fullscreen { width:100%; height:100%; overflow:hidden; }
  .map-section:fullscreen, .map-section.is-mobile-fullscreen { position:fixed; inset:0; z-index:99999; width:100vw; max-width:none; height:100dvh; min-height:100dvh; margin:0; overflow:hidden; contain:none; }
  .map-section:fullscreen .map-frame, .map-section.is-mobile-fullscreen .map-frame { width:100vw; height:100dvh; max-width:none; }
  .map-section:fullscreen .fullscreen-button, .map-section.is-mobile-fullscreen .fullscreen-button { position:fixed; right:30px; bottom:30px; }
}