/* map */



@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{-webkit-box-sizing: border-box; box-sizing: border-box; scrollbar-width: thin; -webkit-font-smoothing: antialiased;}
html{height: 100%; margin: 0; padding: 0; scroll-behavior: smooth;}
body{height: 100%; margin: 0; padding: 0; background: #000; color: #fff; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.4em; overflow: hidden;}
img{display: block; max-width: 100%; height: auto;}
div.mapboxgl-ctrl-top-left div.mapboxgl-ctrl,div.mapboxgl-ctrl-top-right div.mapboxgl-ctrl{margin: 16px;}
div.mapboxgl-ctrl-bottom-left{display: none !important;}
div.mapbox_container{width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: none; scrollbar-gutter: stable;}
div.mapbox{z-index: 2; position: sticky; top: 0; width: 100%; height: 100%; border: none; outline: none;}
div.mapbox_poi{z-index: 4; position: relative; margin-top: -10vh; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; color: #000;}
div.mapbox_poi>div{padding: 30px;}
div.mapbox_poi>div>*:first-child{margin-top: 0 !important;}
div.mapbox_poi>div>*:last-child{margin-bottom: 0 !important;}
div.poi_name{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 30px 0; font-size: clamp(1.375rem, 0.85rem + 1.4vw, 2.25rem); /*600-1600/22-36/16*/ line-height: 1.3em; font-weight: 500;}
div.poi_name>img{-webkit-flex-shrink: 0; flex-shrink: 0; width: 100px; aspect-ratio: 1; margin-right: 20px; border-radius: 10px;}
div.poi_user{max-width: 1000px; margin: 30px auto;}
div.poi_user div.user{margin: 20px 0; padding: 18px; border: 2px solid #ccc; border-radius: 14px;}
div.poi_user div.user div.desc{font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem); /*600-1600/16-20/16*/ line-height: 1.4em;}
div.poi_user div.user div.date{margin-top: 8px; font-style: italic; color: #444;}
@media (max-width: 960px){
div.mapbox_poi>div{padding: 30px 20px;}
}
@media (max-width: 640px){
div.poi_name>img{width: 60px; margin-right: 10px;}
}