/*
 * Hephaestusによる特殊気象報の美の法典 Ver. 1.0 (真・完全無欠・自己完結版)
 */

/* ヘッダー装飾：警戒と記録をテーマに */
#special-header {
    border-left: 8px solid #ecc94b; /* 警告色である黄色 */
    background: linear-gradient(to right, #fefcbf, #ffffff);
}
#special-header h1 {
    font-family: 'serif';
    font-weight: bold;
    color: #b7791f;
}

/* カードの基本装飾：phenologyの構造をベースに専用のクラス名を付与 */
.special-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 12px;
    overflow: hidden;
    border-left: 5px solid #a0aec0; /* 厳粛なグレー */
}

/* ヘッダー */
.special-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    border-bottom: 1px solid #edf2f7;
    background-color: #f7fafc;
}
.special-card-header h3 {
    font-size: 1.5em;
    color: #4a5568;
    margin: 0;
    font-weight: bold;
}

/* ボディ */
.special-card-body { /* phenology との互換性のため、専用クラスも用意 */
    padding: 25px;
}

/* ボディ内セクション */
.special-card .info-section {
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px dashed #e2e8f0;
}
.special-card .info-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.special-card .info-section h4 { /* 存在しないが、念のため定義 */
    font-size: 1.1em;
    padding-bottom: 8px;
    border-bottom: 2px solid #edf2f7;
    margin-bottom: 15px;
    color: var(--primary-color);
}

/* フッター */
.special-card-footer {
    font-size: 0.9em;
    text-align: right;
    color: #a0aec0;
    padding: 15px 25px;
    background-color: #f7fafc;
    border-top: 1px solid #edf2f7;
}

/* 物語の装飾 (phenology-style.css と同一の定義) */
.commentary{display:flex;align-items:flex-start;gap:15px;margin-bottom:20px}.commentary:last-child{margin-bottom:0}.commentary img{width:50px;height:auto;flex-shrink:0}.commentary .bubble{padding:12px 18px;border-radius:18px;position:relative;line-height:1.7;font-size:1.05em;width:100%}.chisamaru-comment .bubble{background-color:#ebf8ff;color:#2c5282}.chisamaru-comment .bubble::before{content:'';position:absolute;top:15px;left:-8px;width:0;height:0;border:9px solid transparent;border-right-color:#ebf8ff}.correct-comment{flex-direction:row-reverse}.correct-comment .bubble{background-color:#f7fafc;color:#4a5568}.correct-comment .bubble::before{content:'';position:absolute;top:15px;right:-8px;width:0;height:0;border:9px solid transparent;border-left-color:#f7fafc}