:root{
    --bg:#f7f7f8; --ink:#111; --muted:#6b7280; --border:#e5e7eb;
    --accent:#004b87; --cta:#1f2688;
}

/* ===== Base ===== */
html{background:var(--bg); color:var(--ink); height:100%;}
body{background:var(--bg); color:var(--ink); margin:0; min-height:100vh; display:flex; flex-direction:column;}

a{color:var(--accent);}

/* ===== Branding / Header ===== */
.brand{
    font-family:'Anton',system-ui,sans-serif;
    font-size:1.8rem; font-weight:400; letter-spacing:2px; color:var(--accent);
    -webkit-text-stroke:2px #ccc; paint-order:stroke fill; text-transform:uppercase;
}
.site-header{position:sticky; top:0; z-index:1030; background:#fff; border-bottom:1px solid var(--border);}

/* ===== Cards ===== */
.device-card.card{border:1px solid var(--border); background:#fff;}
.device-card{transition:transform .12s ease, box-shadow .12s ease;}
.device-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.device-card a:hover {
    text-decoration: none;
}
.device-thumb{
    height:200px;
    background:#fff;
    /*border:1px solid #e5e7eb;*/
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9ca3af;f
    overflow: hidden;        /* はみ出したら隠す */
}
.device-thumb img{
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
    aspect-ratio: 16/9;   /* 全カードを16:9に統一 */
}


.card-title{
    font-size:1rem;
    margin-bottom:.25rem;
    font-weight: bold;
}
.spec{color:var(--muted); font-size:.9rem;}
.list-group-item{font-size:.9rem;}

/* Footer-as-button */
.card-footer.btn-footer{background:var(--cta); border-top:1px solid var(--border); padding:.6rem 1rem;}
.card-footer.btn-footer .btn-footer-link{display:block; width:100%; text-align:center; color:#fff; text-decoration:none; font-weight:600; letter-spacing:.3px;}
.card-footer.btn-footer:hover{background:#c40000; cursor:pointer;}

/* ===== Layout ===== */
main{flex:1 0 auto;}
.footer{margin-top:auto; margin-bottom:0;}
.navbar{box-shadow:0 0 10px rgba(0,0,0,.0);}

/* ===== Chips ===== */
.chip{background:#eef2f7; border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.85rem;}

/* ===== Tables ===== */
.table-benchmarks th{font-weight:normal;}


.table-variants {
    table-layout: fixed;
    width: 100%;
}

.table-variants th,
.table-variants td {
    vertical-align: middle;
    padding: .12rem .22rem;
    font-size: .9rem;
    line-height: 1.15;
    white-space: nowrap;
}

/* 固定幅カラム */
.table-variants th.ram,
.table-variants td.ram { width: 50px; text-align: center; }
.table-variants td.storage { width: 50px; text-align: center; }
.table-variants th.price,
.table-variants td.price { width: 70px; text-align: right; }
.table-variants th.battery,
.table-variants td.battery { width: 80px; text-align: right; }

/* 可変幅カラム */
.table-variants th.variant-name {
    width: auto;         /* 自動で余りを取る */
    white-space: nowrap; /* 改行防止 */
    overflow: scroll;
}

.table-variants td.soc {
    width: auto;         /* SoCも可変 */
    white-space: nowrap;
    overflow: scroll;
}

/* ===== Tabs (Underline style) ===== */
.tabs-underline{
    --tab-text:#475569;
    --tab-active:#0f172a;
    --tab-line:#e5e7eb;
    --tab-accent:#2563eb;
    gap:.75rem;
    border-bottom:1px solid var(--tab-line);
}
.tabs-underline .nav-link{position:relative; border:0 !important; background:transparent; color:var(--tab-text); padding:.4rem .25rem .7rem; font-weight:600;}
.tabs-underline .nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; transition:background-color .2s ease, transform .2s ease, opacity .2s ease; transform:scaleX(.6); opacity:0;}
.tabs-underline .nav-link:hover{color:var(--tab-active);}
.tabs-underline .nav-link.active{color:var(--tab-active);}
.tabs-underline .nav-link.active::after{background:var(--tab-accent); transform:scaleX(1); opacity:1;}

@media (max-width:576px){
    .tabs-underline{overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .tabs-underline .nav-link{white-space:nowrap;}
}

/* ===== Specs header & Variants tabs ===== */
.specs-header{display:flex; align-items:center; gap:.75rem;}
.specs-header .variants-tabs{margin-left:auto;}

.variants-tabs{
    --tab-bg:#f6f7f9; --tab-active-bg:#fff;
    --tab-text:#334155; --tab-active-text:#111827; --tab-line:#e5e7eb;
    border:0; background:var(--tab-bg); padding:.25rem; gap:.5rem;
}
.variants-tabs .nav-link{border:0 !important; background:transparent; color:var(--tab-text); font-weight:600; line-height:1; padding:.6rem 1.1rem; min-width:88px; white-space:nowrap;}
.variants-tabs .nav-link:hover{background:rgba(17,24,39,.035); color:var(--tab-active-text);}
.variants-tabs .nav-link.active{background:var(--tab-active-bg); color:var(--tab-active-text); box-shadow:0 1px 0 rgba(17,24,39,.03), 0 6px 16px rgba(15,23,42,.08);}

@media (max-width:576px){
    .variants-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.35rem;}
    .variants-tabs .nav-link{white-space:nowrap;}
}

.related-devices .card-title {
    font-size: 0.85rem;  /* 少し小さく */
    font-weight: 600;    /* 太さはそのまま or 調整 */
    margin-bottom: 0;    /* 行間を詰めたい場合 */
    line-height: 1.3;
}

.site-logo{
    width:200px; height:60px;
    background:url("/assets/images/logo-desktop.png") no-repeat center/contain;
}

/* スマホ以下の幅なら別の画像 */
@media (max-width: 576px){
    .site-logo{
        width:100px; height:60px;
        background-image:url("/assets/images/logo-mobile.png");
    }
}