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

 役割: 画面上部カテゴリフィルターバーおよびフィルターチップボタンのスタイル管理
 担当UI: フィルターバーナビゲーション、フィルターチップボタン
 関連HTML: <nav id="filterBar">, <button class="chip">, <div class="chipIcon">, <span>

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

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

 FILTER BAR

 上部カテゴリ

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

#filterBar{

    position:absolute;

    top:88px;

    left:10px;

    right:10px;

    z-index:1050;

    display:flex;

    gap:7px;

    overflow-x:auto;

    scrollbar-width:thin;

    scrollbar-color:rgba(23,58,97,.28) transparent;

    padding:4px 0;

}

#filterBar::-webkit-scrollbar{

    display:block;

    height:3px;

}

#filterBar::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:rgba(23,58,97,.28);

}



.chip{

    flex:0 0 auto;

    width:auto;

    height:48px;

    min-width:68px;

    padding:0 12px;

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

    border-radius:16px;

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

    backdrop-filter:blur(14px);

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:6px;

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

    transition:.2s;

}



.chip:hover{

    transform:translateY(-2px);

}



.chip.active{

    background:

        linear-gradient(

            135deg,

            var(--navy),

            #245a86

        );

    color:white;

}



.chipIcon{

    min-width:24px;

    font-size:9px;

    font-weight:900;

    letter-spacing:-.02em;

    display:flex;

    justify-content:center;

    align-items:center;

}

.chipIcon img{

    width:24px;

    height:24px;

}



.chip span{

    font-size:11px;

    font-weight:700;

}