/* 1280:800でも絶対にスクロールさせない設計 */
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 画面全体のスクロールを強制禁止 */
    font-family: "Helvetica Neue", Arial, "Meiryo", sans-serif;
    /* 基準サイズを80%相当（1.3vh）まで落とします */
    font-size: clamp(10px, 1.3vh, 12px); 
}

body { 
    display: flex; 
    flex-direction: column; 
    background: #003366; 
}

header { 
    padding: 0.2vh 0; 
    text-align: center; 
    color: white; 
    flex-shrink: 0; 
}
h1 { font-size: 1.3rem; margin: 0.2vh 0; }

.tabs { 
    display: flex; 
    justify-content: center; 
    gap: 4px; 
    flex-wrap: wrap; 
    margin-bottom: 0.2vh;
}
.tabs button { 
    padding: 1px 8px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1); 
    color: white; 
    cursor: pointer; 
    font-size: 0.7rem;
}

#slider {
    flex-grow: 1; 
    display: flex;
    overflow: hidden;
    width: 100%;
}

.card {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 30px; /* 左右の余白を少し詰めて横幅を稼ぐ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.card h2 { 
    font-size: 1.1rem; 
    margin: 0.2vh 0 0.5vh 0; 
    color: white; 
}

/* ★1280:800最適化の要：高さをさらに圧縮★ */
.content-box {
    background: white;
    border-radius: 10px;
    padding: 0.5vh 12px; 
    width: 96%; /* 横に広げることで縦の伸びを抑える */
    max-width: 1200px;
    box-sizing: border-box;
    /* 縦がはみ出るのを防ぐため、68vhまで下げます */
    max-height: 68vh; 
    display: flex;
    flex-direction: column;
}

/* グリッド（1級・2級などのリスト） */
.grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 4px; /* 隙間を最小限に */
    overflow-y: auto; 
    padding-right: 5px;
}

.column h3 { 
    font-size: 0.75rem; 
    color: white; 
    margin: 0 0 3px 0; 
    padding: 2px; 
    border-radius: 3px; 
    position: sticky; 
    top: 0;
}

/* 行のデザイン（限界まで薄くする） */
.app-row { 
    display: flex; 
    align-items: center; 
    background: #f4f4f4; 
    margin-bottom: 1px; /* 1pxまで詰める */
    padding: 1px 4px; 
    border-radius: 3px;
}

.btn { 
    width: 22px; /* さらに小型化 */
    height: 22px; 
    line-height: 22px; 
    background: #333; 
    color: white; 
    text-decoration: none; 
    border-radius: 3px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 0.75rem; 
    flex-shrink: 0;
}

.app-name { 
    margin-left: 6px; 
    font-size: 0.7rem; 
    font-weight: bold; 
    color: #333; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

footer { 
    color: rgba(255,255,255,0.7); 
    text-align: center; 
    padding: 0.2vh; 
    font-size: 0.6rem; /* アンケート行を極小に */
    flex-shrink: 0; 
    line-height: 1.1;
}

footer a {
    color: #ffff00; 
    text-decoration: underline;
    margin: 0 4px;
    font-weight: bold;
}

/* スクロールバー */
.grid::-webkit-scrollbar { width: 3px; }
.grid::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; }