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

 役割: 施設スポットカード、カードリスト容器、施設カテゴリ別スタイル、各種タグ、カードアクションボタン、EmptyState表示のスタイル管理
 担当UI: スポットカード一覧リスト、施設詳細カード、アイコンカラー、タグバッジ、詳細・ナビボタン、空状態表示
 関連HTML: <div id="cardList">, <div class="emptyState">, <div class="facilityCard">, <div class="cardHeader">, <div class="cardLeft">, <div class="cardIcon">, <div class="cardTitle">, <div class="cardCategory">, <div class="cardName">, <div class="cardDistance">, <div class="cardTags">, <span class="tag">, <div class="cardInfo">, <div class="cardButtons">

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

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

 Card List

 app.js がカードを追加する

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

#cardList{

    flex:1;

    overflow-y:auto;

    padding:

        12px

        16px

        30px;

}



/* スクロールバー */

#cardList::-webkit-scrollbar{

    width:8px;

}



#cardList::-webkit-scrollbar-thumb{

    background:#d3e6f2;

    border-radius:999px;

}



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

 Empty State

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

.emptyState{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:var(--sub);

    padding:60px 20px;

}



.emptyState .icon{

    font-size:58px;

    margin-bottom:16px;

}



.emptyState h3{

    font-size:22px;

    margin-bottom:8px;

}



.emptyState p{

    line-height:1.7;

    font-size:14px;

}



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

 Spot Card

 近くのスポットカード

 app.js が生成する

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

.facilityCard{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:16px;

    padding:18px;

    border-radius:26px;

    background:white;

    border:1px solid var(--line);

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

    transition:.25s;

}



.facilityCard:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}



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

 左カラーライン

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

.facilityCard::before{

    content:"";

    position:absolute;

    left:0;

    top:18px;

    bottom:18px;

    width:6px;

    border-radius:999px;

    background:var(--primary);

}



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

 種類別カラー

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

.type-ice::before{

    background:#4fc3ff;

}



.type-drink::before{

    background:#36c7d8;

}



.type-park::before{

    background:#4fd17b;

}



.type-toilet::before{

    background:#9a82ff;

}



.type-aed::before{

    background:#ff5b74;

}



.type-convenience::before{

    background:#ffb84d;

}



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

 Header

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

.cardHeader{

    display:flex;

    justify-content:space-between;

    gap:12px;

}



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

 左側

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

.cardLeft{

    display:flex;

    gap:14px;

}



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

 アイコン

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

.cardIcon{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:white;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--mint)

    );

}



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

 種類別アイコン背景

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

.type-ice .cardIcon{

    background:#49bfff;

}



.type-drink .cardIcon{

    background:#32c4d9;

}



.type-park .cardIcon{

    background:#42c76c;

}



.type-aed .cardIcon{

    background:#ff6078;

}



.type-convenience .cardIcon{

    background:#ffb54c;

}



.type-toilet .cardIcon{

    background:#8d76ff;

}



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

 タイトル

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

.cardTitle{

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.cardCategory{

    font-size:12px;

    color:var(--primary-dark);

    font-weight:700;

    letter-spacing:.08em;

}



.cardName{

    margin-top:4px;

    font-size:19px;

    font-weight:800;

    line-height:1.3;

}



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

 距離

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

.cardDistance{

    text-align:right;

}



.cardDistance .distance{

    font-size:22px;

    font-weight:800;

}



.cardDistance .walk{

    margin-top:4px;

    font-size:13px;

    color:var(--sub);

}



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

 タグ

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

.cardTags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



.tag{

    padding:

        7px

        12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}



/* 営業中 */

.tag.open{

    background:#e9fff4;

    color:#20a24b;

}



/* アイス */

.tag.ice{

    background:#e8f7ff;

    color:#0087d6;

}



/* AED */

.tag.aed{

    background:#ffe7ec;

    color:#d62146;

}



/* 公園 */

.tag.park{

    background:#efffec;

    color:#299f48;

}



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

 詳細

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

.cardInfo{

    display:flex;

    flex-direction:column;

    gap:8px;

    color:var(--sub);

    font-size:14px;

}



.cardInfoRow{

    display:flex;

    gap:10px;

}



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

 ボタン

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

.cardButtons{

    display:flex;

    gap:10px;

}



.cardButtons button{

    flex:1;

    height:48px;

    border-radius:14px;

    font-weight:700;

}



/* 地図 */

.cardButtons .detail{

    background:#eef7fc;

}



/* ナビ */

.cardButtons .route{

    color:white;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--mint)

    );

}

/* Current compact result cards */

.facility-card{

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

    position:relative;

    display:grid;

    grid-template-columns:44px minmax(0,1fr) auto;

    gap:10px;

    align-items:center;

    margin-bottom:10px;

    padding:12px;

    overflow:hidden;

    border:1px solid color-mix(in srgb,var(--facility-color) 13%,#cfaa72);

    border-radius:21px;

    background:

        radial-gradient(

            circle at 100% 0,

            color-mix(in srgb,var(--facility-color) 14%,transparent) 0,

            transparent 46%

        ),

        linear-gradient(

            145deg,

            #fff5df 0%,

            #f8fbfc 54%,

            #edf7f4 100%

        );

    backdrop-filter:blur(12px) saturate(1.08);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.96),

        inset 0 0 0 1px rgba(255,255,255,.34),

        0 12px 28px rgba(23,58,97,.12),

        0 2px 5px rgba(176,130,70,.08);

    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;

}

.facility-card::before{

    position:absolute;

    top:0;

    bottom:0;

    left:0;

    width:5px;

    background:

        linear-gradient(

            180deg,

            #d5ad6f,

            var(--facility-color) 42%,

            color-mix(in srgb,var(--facility-color) 76%,#173a61)

        );

    content:"";

}

.facility-card:hover{

    border-color:color-mix(in srgb,var(--facility-color) 20%,#c9a36b);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.96),

        0 16px 34px rgba(23,58,97,.16),

        0 3px 7px rgba(176,130,70,.10);

    transform:translateY(-2px);

}

.facility-card-icon{

    display:grid;

    width:42px;

    height:42px;

    place-items:center;

    overflow:hidden;

    border-radius:14px;

    border:1px solid color-mix(in srgb,var(--facility-color) 14%,#cfaa72);

    background:

        linear-gradient(

            145deg,

            color-mix(in srgb,var(--facility-color) 12%,#fff1d7),

            #eff9ff

        );

    color:var(--navy);

    font-size:9px;

    font-weight:900;

    letter-spacing:.04em;

}

.facility-card-icon img{

    width:27px;

    height:27px;

    object-fit:contain;

}

.facility-card-body{min-width:0}

.facility-card-kicker{

    display:flex;

    flex-wrap:wrap;

    gap:5px;

    align-items:center;

    margin-bottom:3px;

    color:var(--sub);

    font-size:9px;

    font-weight:800;

    letter-spacing:.08em;

}

.accuracy-chip{

    padding:3px 6px;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-size:8px;

}

.accuracy-chip.likely{

    background:var(--cream);

    color:#8d6132;

}

.accuracy-chip:not(.likely){

    background:#e6f8f1;

    color:#226c55;

}

.facility-card-name{

    overflow:hidden;

    color:var(--navy);

    font-size:15px;

    font-weight:900;

    line-height:1.3;

    letter-spacing:.01em;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.facility-card-meta{

    display:flex;

    gap:7px;

    margin-top:4px;

    overflow:hidden;

    color:var(--sub);

    font-size:10px;

    white-space:nowrap;

}

.facility-card-meta span{

    overflow:hidden;

    text-overflow:ellipsis;

}

.facility-card-distance{

    color:var(--primary-dark);

    font-weight:900;

}

.nav-btn{

    display:flex;

    min-width:58px;

    min-height:42px;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1px;

    padding:6px 9px;

    border:1px solid #cfe8f5;

    border-radius:13px;

    background:#edf8fe;

    color:var(--navy);

    font-size:10px;

    font-weight:900;

}

.nav-btn span:first-child{font-size:15px}

.empty-results{

    display:grid;

    min-height:130px;

    place-items:center;

    padding:22px;

    color:var(--sub);

    text-align:center;

}

.empty-results strong{

    display:block;

    margin:8px 0 4px;

    color:var(--navy);

    font-size:16px;

}

.facility-card-detail{

    overflow:hidden;

    margin-top:5px;

    color:var(--sub);

    font-size:9px;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.facility-source{

    display:inline-block;

    max-width:100%;

    overflow:hidden;

    margin-top:5px;

    color:#315f83;

    font-size:9px;

    font-weight:800;

    text-decoration:underline;

    text-underline-offset:2px;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.facility-card-actions{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.facility-card-actions button{

    min-width:54px;

    min-height:44px;

    border-radius:12px;

    font-size:10px;

    font-weight:900;

}

.facility-card-actions .nav-btn{

    min-height:44px;

    border-color:var(--navy);

    background:linear-gradient(145deg,#214d76,var(--navy));

    color:#fff;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.18),

        0 5px 12px rgba(23,58,97,.18);

}