/* ===== Design Tokens ===== */
:root{
    --color-bg:#ffffff;
    --color-text:#111111;
    --color-text-muted:#555555;
    --color-border:#e5e5e5;
    --color-border-light:#eeeeee;
    --color-table-header:#000000;
    --color-table-stripe:#fafafa;
    --color-accent:#4179E1;
    --font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --spacing-unit:8px;
    --transition-fast:0.2s ease;
}

/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:var(--color-bg);
    font-family:var(--font-family);
    color:var(--color-text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.page-wrap{max-width:1600px;margin:0 auto}

/* ===== Page Header ===== */
.page-header{
    padding:80px 40px 60px;
    text-align:center;
    background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
}
.page-header h1{
    font-size:clamp(32px,5vw,56px);
    font-weight:400;
    font-style:italic;
    letter-spacing:2px;
    margin-bottom:24px;
}
.page-header p{
    font-size:clamp(14px,1.2vw,18px);
    line-height:1.7;
    color:var(--color-text-muted);
    max-width:900px;
    margin:0 auto;
}

/* ===== Back to Top Button ===== */
.back-to-top{
    position:fixed;
    bottom:32px;
    right:32px;
    width:48px;
    height:48px;
    background:var(--color-text);
    color:#fff;
    border:none;
    border-radius:50%;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:all 0.3s ease;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.back-to-top:hover{
    background:#333;
    transform:translateY(-2px);
}
.back-to-top:focus{
    outline:3px solid var(--color-text-muted);
    outline-offset:2px;
}
.back-to-top:disabled,.back-to-top[disabled]{
    background:#ccc;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ===== Bike Block ===== */
.bike-block{
    display:grid;
    grid-template-columns:minmax(300px,1fr) minmax(400px,1.2fr);
    align-items:start;
    gap:64px;
    padding:64px 40px;
    border-bottom:1px solid var(--color-border-light);
    transition:background var(--transition-fast);
}
.bike-block:hover{background:#fafafa}
.bike-block:last-child{border-bottom:none}

.bike-pic{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    transition:box-shadow 0.3s ease;
}
.bike-block:hover .bike-pic{
    box-shadow:0 8px 32px var(--color-accent);
}
.bike-pic img{
    width:100%;
    height:auto;
    display:block;
    transition:transform 0.4s ease;
    content-visibility:auto;
}
.bike-block:hover .bike-pic img{transform:scale(1.02)}
.bike-pic::after{
    content:'';
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    pointer-events:none;
}

.size-content{width:100%}

/* ===== Titles ===== */
.model-main{
    font-size:clamp(24px,3vw,40px);
    font-weight:700;
    text-align:center;
    margin-bottom:4px;
}
.model-sub{
    font-size:clamp(16px,1.5vw,24px);
    font-weight:400;
    color:var(--color-text-muted);
}
.size-guide-title{
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--color-text-muted);
    text-align:center;
    margin:12px 0 28px;
    padding-bottom:12px;
    border-bottom:1px solid var(--color-border-light);
}

/* ===== Table with Sticky Header ===== */
.table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--color-border) transparent;
    border-radius:8px;
    background:#fff;
    position:relative;
}
.table-scroll::-webkit-scrollbar{height:6px}
.table-scroll::-webkit-scrollbar-track{background:transparent}
.table-scroll::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}

.size-table{
    width:100%;
    min-width:360px;
    border-collapse:separate;
    border-spacing:0;
    font-variant-numeric:tabular-nums;
    caption-side:bottom;
}
.size-table caption{
    padding:8px 12px;
    font-size:12px;
    color:var(--color-text-muted);
    text-align:left;
    caption-side:bottom;
}
.size-table thead th{
    background:var(--color-table-header);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:16px 12px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:1.3;
    position:sticky;
    top:0;
    z-index:10;
}
.size-table thead th:first-child{border-top-left-radius:8px}
.size-table thead th:last-child{border-top-right-radius:8px}

.size-table tbody tr{
    transition:background var(--transition-fast);
}
.size-table tbody tr:hover{
    background:var(--color-table-stripe);
}
.size-table tbody tr:hover td{
    box-shadow:0 4px 12px var(--color-accent);
}
.size-table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}
.size-table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}

.size-table td{
    font-size:15px;
    padding:14px 12px;
    text-align:center;
    border-bottom:1px solid var(--color-border-light);
}
.size-table td:first-child{
    font-weight:600;
    color:var(--color-text);
}

/* Focus visible for keyboard navigation */
:focus-visible{
    outline:3px solid var(--color-text-muted);
    outline-offset:2px;
}
button:focus:not(:focus-visible){
    outline:none;
}

/* ===== Note Text ===== */
.note-text{
    margin-top:16px;
    font-size:13px;
    text-align:center;
    color:var(--color-text-muted);
    line-height:1.5;
    padding:12px 16px;
    background:#fafafa;
    border-radius:6px;
    border-left:3px solid var(--color-text);
}

/* ===== Responsive ===== */
@media(max-width:1024px){
    .page-header{padding:60px 24px 48px}
    .bike-block{
        grid-template-columns:1fr;
        gap:32px;
        padding:48px 24px;
    }
    .bike-pic{max-width:500px;margin:0 auto}
    .model-main{text-align:center}
    .size-guide-title{text-align:center}
    .back-to-top{bottom:20px;right:20px}
}

@media(max-width:640px){
    .page-wrap{padding:0}
    .page-header{padding:48px 20px 36px}
    .page-header h1{font-size:28px;margin-bottom:16px}
    .page-header p{font-size:14px;text-align:left}
    .bike-block{gap:24px;padding:36px 20px}
    .bike-pic{border-radius:6px}
    .model-main{font-size:24px}
    .model-sub{font-size:16px}
    .size-guide-title{font-size:11px;margin:8px 0 20px}
    .size-table thead th,.size-table td{padding:12px 8px;font-size:13px}
    .note-text{font-size:12px;padding:10px 12px}
    .back-to-top{width:40px;height:40px}
}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ===== Print Styles ===== */
@media print{
    .page-header{padding:20px}
    .bike-block{
        grid-template-columns:1fr;
        gap:20px;
        padding:20px;
        page-break-inside:avoid;
    }
    .bike-pic{display:none}
    .back-to-top{display:none}
    .table-scroll{border:none}
    .size-table thead th{background:#333 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .size-table tbody tr:hover{background:none}
    .note-text{background:#f0f0f0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    body{font-size:12px}
    .model-main{font-size:18px}
    .size-table{font-size:11px}
    .size-table th,.size-table td{padding:8px 6px}
}