/*
 * Hephaestusによるアーカイブ神殿の美の法典 Ver. 2.0 (真・完全無欠・自己完結版)
 */

/* ============================================= */
/* 0. 導入とコンテナ                            */
/* ============================================= */
.archive-intro { max-width: 700px; margin: 0 auto 40px auto; }
.archive-intro .commentary img { width: 60px; height: auto; }
.archive-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: stretch; /* カードの高さを揃えるための準備 */
}

/* ============================================= */
/* 1. カード（一覧ページ）                        */
/* ============================================= */
.archive-card-link { text-decoration: none; color: inherit; display: flex; }
.archive-card {
    background-color: #fff; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    overflow: hidden; width: 100%; display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.archive-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.archive-card-img-wrapper {
    width: 100%; padding-top: 56.25%; position: relative;
    background-color: #f7fafc; border-bottom: 1px solid #edf2f7;
}
.archive-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.no-image .no-image-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: #cbd5e0;
}
.archive-card-content {
    padding: 20px 25px; display: flex; flex-direction: column; flex-grow: 1;
}
.archive-card-date { font-size: 0.9em; color: #718096; margin-bottom: 8px; font-weight: bold; }
.archive-card h3 { font-size: 1.35em; color: var(--primary-color); margin: 0 0 auto 0; line-height: 1.5; font-weight: bold; padding-bottom: 15px;}
.read-more {
    display: inline-block; align-self: flex-end; font-weight: bold;
    color: var(--secondary-color); transition: color 0.2s; margin-top: 15px;
}
.archive-card-link:hover .read-more { color: var(--accent-color); }


/* ============================================= */
/* 2. 記事ページ                               */
/* ============================================= */
.article-container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 30px 40px 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.article-header { text-align: center; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid #e2e8f0;}
.article-date { color: #718096; font-weight: bold; margin-bottom: 5px; }
.article-header h1 { font-size: 2.2em; color: var(--primary-color); margin: 0 0 15px 0; line-height: 1.5; }
.breadcrumb { font-size: 0.9em; color: #a0aec0; }
.breadcrumb a { color: var(--secondary-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.article-featured-image { margin: 0 0 30px 0; }
.article-featured-image img { width: 100%; height: auto; border-radius: 8px; }

.article-content { font-size: 1.1em; line-height: 2.1; color: #2d3748; }
.article-content h3 { font-size: 1.6em; color: var(--primary-color); margin: 45px 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #eaf2fa; }
.article-content p { margin-bottom: 25px; }
.article-content .commentary { margin: 35px 0; }
.article-content .commentary img { width: 50px; height: auto; }
.article-content .bubble h4 { font-size: 1.2em; margin:0 0 12px 0; padding-bottom: 10px; border-bottom: 2px solid; }
.article-content .correct-comment .bubble h4 { border-bottom-color: #e2e8f0; color: #4a5568;}
.article-content .chisamaru-comment .bubble h4 { border-bottom-color: #bee3f8; color: #2c5282;}

.back-to-archive { text-align: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #e2e8f0; }