/*====================================================================

 役割: メインレイアウト構造、マップ領域、背景雰囲気演出、Leaflet標準UIカスタマイズ、フローティングボタンのスタイル管理
 担当UI: 地図コンテナ、背景グラデーション、Leafletコントロール、現在地フローティングボタン
 関連HTML: <div id="map">, <div class="mapAtmosphere">, <div class="utilityRail">, <button id="currentLocationBtn">, Leafletコントロール要素 (.leaflet-*)

====================================================================*/

/*====================================================================

 Main Layout

====================================================================*/

html,body{position:fixed;inset:0;overflow:hidden}

#map{

    position:fixed;

    inset:0;

    width:100vw;

    min-width:100%;

    height:100vh;

    height:100dvh;

    z-index:1;

}



.mapAtmosphere{

    position:fixed;

    inset:0;

    z-index:5;

    pointer-events:none;

    background:

        radial-gradient(

            circle at top right,

            rgba(73,183,255,.14),

            transparent 40%

        ),

        radial-gradient(

            circle at bottom left,

            rgba(255,142,134,.10),

            transparent 45%

        );

}

.searchCenterIndicator{

    position:fixed;

    top:50%;

    left:50%;

    z-index:720;

    display:flex;

    flex-direction:column;

    align-items:center;

    pointer-events:none;

    transform:translate(-50%,-50%);

}

.searchCenterIndicator span{

    width:16px;

    height:16px;

    border:4px solid #fff;

    border-radius:50%;

    background:var(--coral);

    box-shadow:0 3px 12px rgba(23,58,97,.28);

}

.searchCenterIndicator em{

    margin-top:7px;

    padding:4px 8px;

    border:1px solid rgba(23,58,97,.12);

    border-radius:999px;

    background:rgba(255,253,248,.94);

    box-shadow:0 5px 14px rgba(23,58,97,.12);

    color:var(--navy);

    font-size:9px;

    font-style:normal;

    font-weight:900;

    white-space:nowrap;

}



/*====================================================================

 Leaflet

 Leaflet標準UIの調整

====================================================================*/

.leaflet-container{

    background:#dff4ff;

    font-family:inherit;

}



.leaflet-control-attribution{

    background:

        rgba(255,255,255,.85)!important;

    border-radius:12px!important;

    padding:4px 8px!important;

    font-size:11px!important;

}



.leaflet-control-zoom{

    border:none!important;

    box-shadow:

        var(--shadow)!important;

}



.leaflet-control-zoom a{

    width:46px!important;

    height:46px!important;

    line-height:46px!important;

    border:none!important;

    font-size:22px!important;

}



/*====================================================================

 Floating Button

 GoogleMap風現在地ボタン

====================================================================*/

.utilityRail{

    position:absolute;

    right:18px;

    bottom:230px;

    z-index:950;

}



.mapButton{

    width:62px;

    height:62px;

    border-radius:50%;

    border:3px solid #fff;

    background:var(--navy);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow-lg);

    color:white;

    font-size:23px;

    transition:.25s;

}



.mapButton:hover{

    transform:scale(1.08);

}



.mapButton.primary{

    background:var(--navy);

    color:white;

}