/* CSS カスタムプロパティ（変数）定義 */
:root {
    /* カラー定義 */
    --primary-color: #3A7BC8;  /* WCAG AA準拠（コントラスト比 4.53:1） */
    --bg-color-light: #f5f5f5;
    --bg-color-white: #ffffff;  /* Phase 2: カテゴリカード背景色で使用予定 */
    --bg-color-dark: #333;
    --text-color-primary: #333;  /* Phase 2: カード内テキストで使用予定 */
    --text-color-secondary: #666;  /* Phase 2: カード説明テキストで使用 */
    --text-color-light: white;
    
    /* フォント定義 */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    --font-size-h1: 1.75rem;  /* 28px */
    --font-size-h2: 1.25rem;  /* 20px - カードタイトル */
    --font-size-base: 0.875rem;  /* 14px - 本文・リンク */
    --font-size-icon: 3rem;  /* 48px - カードアイコン */
    
    /* スペーシング定義 */
    --spacing-xs: 0.5rem;      /* 8px */
    --spacing-base: 0.625rem;  /* 10px */
    --spacing-sm: 0.9375rem;   /* 15px */
    --spacing-md: 1.25rem;     /* 20px */
    --spacing-lg: 1.5rem;      /* 24px */
    
    /* シャドウ定義 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* ボーダー定義 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    
    /* レイアウト定義 */
    --max-width-content: 1200px;
    --card-min-width: 300px;
    --breakpoint-mobile: 768px;
    
    /* アニメーション定義 */
    --transform-hover: translateY(-4px);
}

/* リセット・基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--bg-color-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ヘッダー - 既存画面と統一したスタイル */
header {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

header h1 {
    font-size: var(--font-size-h1);
}

/* メインコンテンツエリア */
main {
    flex: 1;
    max-width: var(--max-width-content);
    margin: var(--spacing-md) auto;
    padding: var(--spacing-md);
    width: 100%;
}

/* フッター */
footer {
    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    text-align: center;
    padding: var(--spacing-sm);
    margin-top: auto;
}

/* スキップリンク（アクセシビリティ） */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-150%);
    transition: transform 0.2s ease-in-out;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--spacing-sm);
    z-index: 1000;
    text-decoration: none;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* カテゴリカードコンテナ */
.category-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

/* カテゴリカード */
.category-card {
    background-color: var(--bg-color-white);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    transform: var(--transform-hover);
    box-shadow: var(--shadow-card-hover);
}

.card-icon {
    font-size: var(--font-size-icon);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.card-title {
    font-size: var(--font-size-h2);
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-base);
    text-align: center;
    font-weight: bold;
}

.card-description {
    font-size: var(--font-size-base);
    color: var(--text-color-secondary);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.screen-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.screen-links li {
    margin: var(--spacing-xs) 0;
}

.screen-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-size-base);
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
}

.screen-links a:hover {
    background-color: var(--bg-color-light);
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .category-container {
        grid-template-columns: 1fr;
    }
}

/* 注: メディアクエリでCSS変数は使用できません。
   ブラウザがメディアクエリを解析する時点では、CSS変数はまだ評価されていないため、
   ブレークポイント値は直接記述する必要があります。
   --breakpoint-mobile は他の用途（JavaScript等）での参照用として保持しています。 */