/* ==========================================================
   Garage Memo Design System
   Component : GM Table
   File      : GM_Table.css
   Status    : Official Component (Growing)
   ========================================================== */

/* GM Table v1.0 Prototype */

.gm-table-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1.5rem;
padding-bottom:1rem;
border-bottom:1px solid var(--gm-border);
}

.gm-table--premium{
border-radius:16px;
overflow:hidden;
}

.gm-table th{
letter-spacing:.03em;
font-weight:700;
}

.gm-table td{
transition:background .25s;
}

.gm-table tbody tr:hover td{
background:#f7f2ea;
}

.gm-cell-title{
font-weight:700;
text-align:left;
white-space:nowrap;
}

.gm-cell-price,
.gm-cell-percent{
text-align:right;
font-variant-numeric:tabular-nums;
}

.gm-cell-rating{
text-align:center;
color:var(--gm-gold);
letter-spacing:.08em;
}

.gm-table-footer{
margin-top:1rem;
padding-top:1rem;
border-top:1px solid var(--gm-border);
text-align:center;
font-size:.9rem;
color:var(--gm-text-light);
}

@media(max-width:768px){
.gm-table-toolbar .gm-flex{
flex-direction:column;
align-items:stretch;
}
}

/* ==================================================
   STEP1：セルの余白アップグレード
================================================== */

.gm-table th{
    padding:20px 24px;
}

.gm-table td{
    padding:18px 24px;
}

/* ==================================================
   STEP2：ヘッダーに存在感を出す
================================================== */

.gm-table thead th{
    padding:24px 24px;
}

/* ==================================================
   STEP6：プレミアムホバー
================================================== */

.gm-table tbody tr{
    transition: all .25s ease;
}

.gm-table tbody tr:hover td{
    background:#f8f2ea;
}

.gm-table tbody tr:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}
/* ==================================================
   STEP4：数値を右揃え
================================================== */

.gm-table td:nth-child(2),
.gm-table td:nth-child(3),
.gm-table td:nth-child(4),
.gm-table td:nth-child(5){
    text-align:center;
    font-variant-numeric:tabular-nums;
}

/* ==================================================
   STEP5：金額を強調
================================================== */

.gm-table td:nth-child(2),
.gm-table td:nth-child(5){
    color: var(--bronze2);
    font-weight: 700;
    letter-spacing: .02em;
}

/* ==================================================
   STEP6：行の区切り線を上品に
================================================== */

.gm-table td{
    border-bottom:1px solid rgba(92,63,45,.08);
}

.gm-table tbody tr:last-child td{
    border-bottom:none;
}

/* ==================================================
   STEP8：セルの角丸をきれいに見せる
================================================== */

.gm-table{
    overflow:hidden;
    border-radius:22px;
}

/* ==================================================
   STEP9：Premium Header Gradient
   テーマ：ヘッダーに高級感を追加する

   【目的】
   ・ヘッダーを単色からプレミアムな質感へ変更する
   ・比較表の第一印象を向上させる

   【効果】
   ・立体感が生まれる
   ・金融サイト・高級ブランドのような雰囲気になる
   ・文字の視認性を維持したまま質感をアップ
================================================== */

.gm-table thead th{
    background:linear-gradient(
        180deg,
        #7b5a47 0%,
        #6a4b3a 100%
    );
}

/* ==================================================
   STEP10：Premium Header Border
   テーマ：ヘッダーに締まりを与える

   【目的】
   ・ヘッダーと本文の境界を美しく見せる
   ・比較表全体に高級感を追加する

   【効果】
   ・ヘッダーの輪郭が引き締まる
   ・データ部分との区切りが明確になる
   ・落ち着いたプレミアム感が出る
================================================== */

.gm-table thead th{
    border-bottom:3px solid rgba(255,255,255,.15);
}

/* ==================================================
   STEP12：Scroll Hint
   テーマ：横スクロールできることを分かりやすくする

   【目的】
   ・横スクロール可能であることを自然に伝える
   ・スマホ・タブレットの操作性を向上させる

   【効果】
   ★★★★★（体感しやすい）
================================================== */

.gm-table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.gm-table-wrapper::-webkit-scrollbar{
    height:10px;
}

.gm-table-wrapper::-webkit-scrollbar-track{
    background:#f3ece3;
    border-radius:999px;
}

.gm-table-wrapper::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #cfa454 0%,
        #9b6f2b 100%
    );
    border-radius:999px;
}

/* ==================================================
   STEP13：Sticky Header
   テーマ：スクロールしても見出しを固定する

   【目的】
   ・長い比較表でも項目名を見失わないようにする
   ・比較しやすさを向上させる
   ・Garage Memoの代表機能にする

   【確認方法】
   ・テーブルの行数を増やす
   ・下へスクロールする
   ・ヘッダーが上部に残れば成功

   【効果】
   ★★★★★（体感しやすい）
================================================== */

.gm-table thead th{
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(
        180deg,
        #7b5a47 0%,
        #6a4b3a 100%
    );
}

/* ==================================================
   STEP14：Sticky First Column
   テーマ：車種列を固定する

   【目的】
   ・横スクロールしても車種名を見失わないようにする
   ・比較表の操作性を向上させる
   ・Excelの「ウィンドウ枠の固定」のような使い勝手を実現する

   【確認方法】
   ・ブラウザ幅を狭くする
   ・横スクロールする
   ・「車種」列が左側に固定されたままなら成功

   【効果】
   ★★★★★（体感しやすい）
================================================== */

.gm-table th:first-child,
.gm-table td:first-child{
    position: sticky;
    left: 0;
    z-index: 5;
    background: #ffffff;
    box-shadow: 2px 0 8px rgba(0,0,0,.08);
}

/* ヘッダー左上セルは最前面 */

.gm-table thead th:first-child{
    z-index: 20;
    background: linear-gradient(
        180deg,
        #7b5a47 0%,
        #6a4b3a 100%
    );
}