/* Basic layout */
:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,Arial}
html,body{height:100%;margin:0}
main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:#f5f7fa}

/* Map container (acts as the map background) */
.map{position:relative;width:1024px;height:576px;background:linear-gradient(180deg,#e6f2ff,#ffffff);box-shadow:0 6px 18px rgba(20,30,50,0.12);border-radius:8px;overflow:hidden}
.map::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);background-size:40px 40px;opacity:0.6;pointer-events:none}

/* Marker buttons */
.marker{position:absolute;transform:translate(-50%,-100%);border:0;background:#ff5a5f;color:#fff;padding:8px 10px;border-radius:18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.15);font-weight:600}
.marker:hover{outline:3px solid rgba(255, 255, 255, 0.25)}

/* Popup */
.popup{position:absolute;min-width:220px;max-width:320px;background:#fff;border-radius:8px;padding:12px 14px;box-shadow:0 12px 30px rgba(10,20,40,0.18);z-index:20}
.popup h3{margin:0 0 6px 0;font-size:16px}
.popup p{margin:0;font-size:14px;color:#333}
.popup .close{position:absolute;top:6px;right:8px;background:transparent;border:0;color:#666;font-size:18px;cursor:pointer;}
.popup .close:hover{background-color: #ccc;border-radius: 25%;}

/* Visually hidden (for accessibility) */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Responsive */
@media (max-width:960px){.map{width:100%;height:60vh}}