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

 役割: 画面下部ボトムシート、開閉ハンドル、シートヘッダー、メッセージエリアのスタイル管理
 担当UI: ボトムシートパネル、シートハンドル、シートヘッダー、件数バッジ、メッセージ領域
 関連HTML: <section id="sheet">, <button id="sheetHandle" class="sheetHandle">, <div class="sheetHeader">, <div class="sheetSubTitle">, <h2>, <div id="spotCount">, <div id="messageArea">

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

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

 Bottom Sheet

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

#sheet{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:1000;

    height:36vh;

    min-height:240px;

    background:

        rgba(255,253,248,.97);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.9);

    border-bottom:0;

    border-radius:30px 30px 0 0;

    box-shadow:

        0 -15px 40px rgba(0,0,0,.10);

    display:flex;

    flex-direction:column;

}



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

 Handle

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

.sheetHandle{

    width:100%;

    height:44px;

    min-height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.sheetHandle span{

    width:64px;

    height:6px;

    border-radius:999px;

    background:#c8dce7;

}



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

 Header

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

.sheetHeader{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:

        0 22px

        14px;

    border-bottom:

        1px solid var(--line);

}



.sheetSubTitle{

    color:var(--coral-dark);

    font-size:11px;

    letter-spacing:.18em;

    font-weight:700;

}



.sheetHeader h2{

    margin-top:4px;

    font-size:28px;

    font-weight:900;

}



.spotCount{

    min-width:58px;

    height:34px;

    border-radius:999px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        var(--cream);

    color:var(--navy);

    font-weight:700;

}



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

 Message Area

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

#messageArea{

    padding:

        10px

        18px;

}
#messageArea {
    color: var(--sub);
    font-size: 12px;
    line-height: 1.45;
}

.dataNotice{

    display:flex;

    gap:9px;

    margin:0 16px 6px;

    padding:9px 11px;

    border:1px solid #f2e3ca;

    border-radius:14px;

    background:#fffaf0;

    color:#705f4b;

    font-size:10px;

    line-height:1.45;

}

.dataNoticeIcon{

    display:grid;

    flex:0 0 20px;

    width:20px;

    height:20px;

    place-items:center;

    border-radius:50%;

    background:var(--cream);

    color:var(--navy);

    font-weight:900;

}

.dataNotice strong{color:var(--navy)}

#messageArea:empty {
    display: none;
}

.facility-loading {
    display: flex;
    min-height: 130px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sub);
    text-align: center;
}

.facility-loading-icon {
    margin-bottom: 8px;
    font-size: 32px;
}