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

 役割: トースト通知、モーダルオーバーレイ、モーダルカード、各種操作ボタン、ローディング画面のスタイル管理
 担当UI: トーストポップアップ、ナビ選択モーダル、施設詳細モーダル、ローディング画面
 関連HTML: <div id="toast">, <div id="routeModal" class="modal">, <div id="facilityModal" class="modal">, <div class="modalCard">, <button class="modalButton">, <button class="modalCancel">, <div id="loadingScreen">, <div class="loadingCard">, <div class="spinner">

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

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

 Toast

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

#toast{

    position:fixed;

    left:50%;

    bottom:130px;

    transform:translateX(-50%);

    background:#223548;

    color:white;

    padding:

        14px

        22px;

    border-radius:999px;

    font-size:14px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:5000;

}



#toast.show{

    opacity:1;

}



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

 Modal

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

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(8px);

    z-index:4000;

}



.modal.open{

    display:flex;

}



.modalCard{

    width:min(92%,420px);

    padding:28px;

    border-radius:30px;

    background:white;

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

}



.modalCard h2{

    font-size:28px;

    margin-bottom:10px;

}



.modalCard p{

    line-height:1.7;

    color:var(--sub);

}



.modalButton{

    width:100%;

    height:52px;

    margin-top:16px;

    border-radius:14px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--mint)

    );

    color:white;

    font-size:16px;

    font-weight:700;

}



.modalCancel{

    width:100%;

    height:46px;

    margin-top:10px;

    border-radius:14px;

    background:#eef4f8;

}



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

 Loading

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

#loadingScreen{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:6000;

}

.loadingBrand{

    width:132px;

    height:132px;

    margin:-18px auto -8px;

    overflow:hidden;

}

.loadingBrand img{

    width:100%;

    height:100%;

    object-fit:contain;

}



.loadingCard{

    text-align:center;

}



.loadingCard h2{

    margin-top:18px;

    font-size:24px;

}



.loadingCard p{

    margin-top:8px;

    color:var(--sub);

}



.spinner{

    width:64px;

    height:64px;

    border-radius:50%;

    border:6px solid #d8eefb;

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}