/* 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: #FFFDF3; 
}

header { 
    padding: 0.2vh 0; 
    text-align: center; 
    /* メイン文字色：ネイビー */
    color: #1C2A38; 
    flex-shrink: 0; 
    /* 上部に少しアクセント（オレンジ）のラインを入れて引き締める */
    border-top: 3px solid #E67E22;
}
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(28, 42, 56, 0.2);
    background: rgba(28, 42, 56, 0.05); 
    color: #1C2A38; 
    cursor: pointer; 
    font-size: 0.7rem;
    transition: all 0.2s;
}
/* タブがアクティブのとき、またはホバー時にアクセントのオレンジを適用 */
.tabs button:hover {
    background: #E67E22;
    color: #FFFDF3;       /* 文字色を白からクリーム色に変更して配色を統一 */
    border-color: #E67E22;
}

#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: #1C2A38; 
}

/* ★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;
    /* 枠線を少し上品な色合いに */
    border: 1px solid rgba(28, 42, 56, 0.1);
    box-shadow: 0 2px 8px rgba(28, 42, 56, 0.04);
}

/* グリッド（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: #FFFDF3; /* 文字色を白からクリーム色に変更して馴染みを良く */
    margin: 0 0 3px 0; 
    padding: 2px; 
    /* アクセント：オレンジ */
    background: #E67E22;
    border-radius: 3px; 
    position: sticky; 
    top: 0;
    text-align: center;
}

/* 行のデザイン（限界まで薄くする） */
.app-row { 
    display: flex; 
    align-items: center; 
    /* 白いボックスに映える薄いクリーム・ベージュ系の行背景 */
    background: #FAF8F0; 
    margin-bottom: 1px; /* 1pxまで詰める */
    padding: 1px 4px; 
    border-radius: 3px;
    border: 1px solid rgba(28, 42, 56, 0.03);
}

/* アプリの番号ボタン：メインカラーのネイビーでスタイリッシュに */
.btn { 
    width: 22px; /* さらに小型化 */
    height: 22px; 
    line-height: 22px; 
    /* メイン文字色：ネイビー */
    background: #1C2A38; 
    color: #FFFDF3; /* 文字色を白からクリーム色に変更 */
    text-decoration: none; 
    border-radius: 3px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 0.75rem; 
    flex-shrink: 0;
    transition: background 0.2s;
}
.btn:hover {
    /* ホバー時はオレンジに変化 */
    background: #E67E22;
}

.app-name { 
    margin-left: 6px; 
    font-size: 0.7rem; 
    font-weight: bold; 
    /* 文字色：ネイビー */
    color: #1C2A38; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

footer { 
    /* フッターの文字もネイビーの不透明度調整で上品に */
    color: rgba(28, 42, 56, 0.7); 
    text-align: center; 
    padding: 0.2vh; 
    font-size: 0.6rem; /* アンケート行を極小に */
    flex-shrink: 0; 
    line-height: 1.1;
}

footer a {
    /* リンク部分：アクセントのオレンジ */
    color: #E67E22; /* より統一感を出すため #D35400 から指定のアクセントカラーに変更 */
    text-decoration: underline;
    margin: 0 4px;
    font-weight: bold;
}

/* スクロールバーもネイビー系に馴染むように調整 */
.grid::-webkit-scrollbar { width: 3px; }
.grid::-webkit-scrollbar-thumb { background: rgba(28, 42, 56, 0.3); border-radius: 10px; } /* 透過の記述を標準的なrgbaに変更 */