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

 役割: 地図上に表示する施設カスタムマーカー、マーカーカラー、およびユーザー現在地ピンのスタイル管理
 担当UI: Leafletカスタムマーカーアイコン、施設種別マーカー、ユーザー現在地ピン
 関連HTML: Leaflet Marker DOM (.markerShell, .facilityMarker, .userMarker, 各種 .marker-*)

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

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

 Leaflet Marker

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

.markerShell{

    background:transparent!important;

    border:none!important;

}



.facilityMarker{

    width:56px;

    height:56px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:white;

    border:4px solid white;

    box-shadow:var(--shadow);

    transition:.25s;

}



.facilityMarker:hover{

    transform:scale(1.12);

}



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

 Marker Color

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

.marker-ice{

    background:#49bfff;

}



.marker-drink{

    background:#34c4d8;

}



.marker-park{

    background:#48ca69;

}



.marker-toilet{

    background:#8873ff;

}



.marker-aed{

    background:#ff5d75;

}



.marker-convenience{

    background:#ffb84d;

}



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

 User Marker

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

.userMarker{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#3daeff;

    border:4px solid white;

    box-shadow:

        0 0 0 10px rgba(61,174,255,.18);

    animation:userPulse 2s infinite;

}

.custom-map-pin{

    border:0!important;

    background:transparent!important;

}

.map-pin{

    --pin-color:var(--primary);

    display:grid;

    width:40px;

    height:40px;

    place-items:center;

    border:3px solid #fff;

    border-radius:50% 50% 50% 12px;

    background:var(--pin-color);

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

    color:#fff;

    font-size:8px;

    font-weight:900;

    transform:rotate(-45deg);

}

.map-pin > span{

    display:grid;

    width:27px;

    height:27px;

    place-items:center;

    transform:rotate(45deg);

}

.map-pin img{

    width:22px;

    height:22px;

    object-fit:contain;

}

.search-area-label{

    padding:3px 8px;

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

    border-radius:999px;

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

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

    color:var(--navy);

    font-size:10px;

    font-weight:900;

    white-space:nowrap;

}

.leaflet-popup-content-wrapper{

    border-radius:18px;

    box-shadow:var(--shadow);

}

.ice-popup{min-width:190px}

.ice-popup-kicker{

    color:var(--coral-dark);

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;

}

.ice-popup strong{

    display:block;

    margin-top:3px;

    color:var(--navy);

    font-size:14px;

}

.ice-popup-meta{

    margin-top:5px;

    color:var(--sub);

    font-size:11px;

}