/* app/static/css/style.css */

/* Google Fonts - Inter for numbers/bold English, Noto Sans JP for Japanese */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* --- Root Variables (Design System) --- */
:root {
    --bg: #ffffff; /* 全体の背景色 */
    --card-bg: #f5f5f7; /* カードや特定セクションの背景色 */
    --text-main: #1d1d1f; /* メインテキスト色 (Appleスタイル ディープブラック) */
    --text-sub: #86868b; /* 補助テキスト色 (グレー) */
    --accent: #007aff; /* 強調色 (青) */
    --radius: 32px; /* 基本の角丸半径 */
    --transition-speed: 0.6s; /* 基本のトランジション速度 */
    --transition-easing: cubic-bezier(0.15, 0, 0.15, 1); /* スムーズなトランジションイージング */
}

/* --- Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 日本語フォントの最適化 - Interは数字や強い英語に、Noto Sans JPは日本語に */
    font-family: 'Inter', 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    background-color: var(--bg);
    color: var(--text-main);
    line-height: 1.6; /* 行の高さ */
    letter-spacing: -0.01em; /* 文字間隔 */
    -webkit-font-smoothing: antialiased; /* フォントレンダリングを滑らかに */
    -moz-osx-font-smoothing: grayscale; /* Firefoxのフォントレンダリングを滑らかに */
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Hero Section --- */
.hero-section {
    padding: 160px 24px 80px; /* 上下余白を広めに */
    max-width: 1100px; /* 最大幅を設定 */
    margin: 0 auto;
    text-align: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800; /* 太めに */
    margin-bottom: 48px;
    letter-spacing: -0.02em;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4.8rem); /* レスポンシブフォントサイズ (最小2.5rem, 最大4.8rem) */
    font-weight: 900; /* 最も太く */
    letter-spacing: -0.05em; /* 字間を狭く */
    line-height: 1.1; /* 行間調整 */
    margin-bottom: 32px;
}

.hero-desc {
    font-size: 1.4rem;
    color: var(--text-sub);
    font-weight: 500;
    margin-bottom: 64px;
    max-width: 800px; /* 説明テキストの幅を制限 */
    margin-left: auto;
    margin-right: auto;
}

/* --- Search Container --- */
.search-container {
    max-width: 600px;
    margin: 0 auto 100px; /* 下部余白を広めに */
}

.search-input {
    width: 100%;
    padding: 24px 32px;
    border-radius: 100px; /* 完全な円形 */
    border: 1px solid #d2d2d7;
    font-size: 1.15rem;
    background: var(--card-bg); /* カード背景色と同じ */
    outline: none; /* フォーカス時のデフォルトアウトラインを削除 */
    transition: all 0.3s ease;
}

.search-input:focus {
    background: #fff; /* フォーカス時背景白 */
    border-color: var(--text-main); /* フォーカス時ボーダー色変更 */
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1); /* フォーカス時シャドウ追加 */
}

/* --- Bento Grid Layout (メインページ & カテゴリリストページ用) --- */
.bento-grid {
    max-width: 1300px; /* グリッド最大幅 */
    margin: 0 auto;
    padding: 0 24px 100px; /* 下部余白を広めに */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 基本2列構造 */
    grid-auto-rows: 450px; /* カードの基本高さ */
    gap: 24px; /* カード間隔 */
}

/* Bento Item Base Style */
.bento-item {
    position: relative;
    background-color: var(--card-bg); /* デフォルトの背景色 */
    border-radius: var(--radius); /* 角丸 */
    text-decoration: none;
    overflow: hidden; /* 画像オーバーフローを隠す */
    display: flex;
    flex-direction: column;
    transition: all var(--transition-speed) var(--transition-easing);
}

.bento-item:hover {
    transform: scale(0.99); /* ホバー時にわずかに縮む効果 */
}

/* Bento Item Size Variations (from site_structure.json) */
.bento-big {
    grid-column: span 2; /* 2列幅 */
    grid-row: span 2;    /* 2行高さ (2x2) */
}
.bento-wide {
    grid-column: span 2; /* 2列幅 (2x1) */
}
.bento-small {
    /* 1x1サイズはデフォルト設定をそのまま使用 */
}

/* --- Image within Bento Item --- */
.item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* テキストの下に配置 */
}

.item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を維持して領域を埋める */
    transition: transform 0.8s ease;
}

.bento-item:hover .item-img img {
    transform: scale(1.05); /* ホバー時に画像を拡大 */
}

/* --- Info/Text within Bento Item (Overlay Style) --- */
.item-info {
    position: relative;
    z-index: 2; /* 画像の上に配置 */
    height: 100%;
    padding: 60px; /* 内部余白 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 텍스트를 하단에 배치 */
}

/* [修正] 画像があるカード (テキスト 흰색) - 強力なオーバーレイを追加 */
.bento-item.has-image .item-info {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 40%, transparent 80%); /* 더 강한 검은색 오버레이 */
}
.bento-item.has-image .item-info h3 {
    font-size: 2.8rem; /* タイトルフォントサイズ */
    font-weight: 800;
    margin-bottom: 16px;
    color: #ffffff; /* 흰색 텍스트 */
    letter-spacing: -0.02em;
}
.bento-item.has-image .item-info p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9); /* 연한 흰색 텍스트 */
    font-weight: 500;
}

/* 画像がないカード (テキスト黒色) */
.bento-item:not(.has-image) {
    background-color: var(--bg); /* 배경색을 흰색으로 변경 */
    border: 1px solid var(--card-bg); /* 테두리 추가 */
}
.bento-item:not(.has-image) .item-info {
    background: none; /* 그라데이션 제거 */
    justify-content: center; /* 텍스트 중앙 정렬 */
    text-align: center;
}
.bento-item:not(.has-image) .item-info h3 {
    font-size: 2.2rem; /* 작은 카드 제목 폰트 크기 */
    font-weight: 800;
    color: var(--text-main); /* 어두운 텍스트 */
}
.bento-item:not(.has-image) .item-info p {
    font-size: 1.1rem;
    color: var(--text-sub); /* 어두운 보조 텍스트 */
    font-weight: 500;
}


/* --- About Section --- */
.about-section {
    background-color: var(--card-bg); /* カード背景色と同じ背景 */
    padding: 140px 24px; /* 上下余白 */
    margin-top: 60px; /* グリッドとの間隔 */
}

.about-container {
    max-width: 1000px;
    margin: 0 auto;
}

.about-header span {
    color: var(--accent); /* 強調色 */
    font-weight: 700;
    display: block;
    margin-bottom: 16px;
    text-align: center;
    font-size: 1.1rem;
}

.about-header h2 {
    font-size: 3.2rem; /* タイトルフォントサイズ */
    font-weight: 900;
    margin-bottom: 60px;
    text-align: center;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.about-content {
    display: flex;
    gap: 40px; /* カラム間隔 */
    margin-bottom: 80px;
}

.about-column {
    flex: 1; /* 同一幅 */
    font-size: 1.25rem;
    color: var(--text-main);
    line-height: 1.8;
}

.about-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* 이 줄을 추가합니다. */
    border-top: 1px solid #d2d2d7; /* 上部区切り線 */
    padding-top: 60px;
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-size: 3.5rem; /* 数字フォントサイズ */
    font-weight: 900;
    margin-bottom: 8px;
    color: var(--text-main);
}

.stat-label {
    color: var(--text-sub);
    font-weight: 600;
    font-size: 1.1rem;
}

/* --- Final Footer --- */
.final-footer {
    padding: 100px 24px;
    text-align: center;
    background-color: var(--bg); /* 本文背景色と同じ */
    border-top: 1px solid var(--card-bg); /* フッター上部に線追加 */
}

.footer-links {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 30px; /* リンク間隔 */
}

.footer-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent); /* ホバー時強調色 */
}

.copyright {
    color: var(--text-sub);
    font-size: 0.95rem;
}


/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr; /* モバイルでは1列 */
        grid-auto-rows: 400px; /* モバイルカード高さ */
        padding-bottom: 80px;
    }
    .bento-big, .bento-wide {
        grid-column: span 1; /* モバイルでは全てのカードが1列 */
        grid-row: span 1;
    }
    .item-info {
        padding: 40px; /* モバイルカード内部余白を削減 */
    }
    .item-info h3 {
        font-size: 2.2rem; /* モバイルタイトルサイズ調整 */
    }
    .hero-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }
    .hero-desc {
        font-size: 1.1rem;
    }

    .about-section {
        padding: 80px 24px;
    }
    .about-header h2 {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }
    .about-content {
        flex-direction: column; /* モバイルではカラムが垂直に積み重ね */
        gap: 20px;
        margin-bottom: 40px;
    }
    .about-column {
        font-size: 1rem;
    }
    .about-stats {
        flex-wrap: wrap; /* スタート項目が複数行に */
        justify-content: center;
        gap: 30px;
        padding-top: 40px;
    }
    .stat-item {
        font-size: 2.5rem;
    }
    .stat-label {
        font-size: 1rem;
    }
}

/* 아래의 표 스타일 코드를 추가합니다. */
.markdown-content table {
    width: 100%;
    border-collapse: collapse; /* 테두리 겹침 방지 */
    margin: 40px 0; /* 위아래 여백 */
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 은은한 그림자 효과 */
    border-radius: var(--radius); /* 모서리 둥글게 */
    overflow: hidden; /* 모서리 둥글게 적용을 위해 */
}
.markdown-content th, 
.markdown-content td {
    border: 1px solid #e5e5e5;
    padding: 16px;
    text-align: left;
    vertical-align: top;
}
.markdown-content th {
    background-color: var(--card-bg); /* 카드 배경색과 통일 */
    font-weight: 700;
    color: var(--text-main);
}
.markdown-content tr:nth-of-type(even) {
    background-color: #fcfcfc; /* 짝수 행에 미세한 배경색 적용 */
}