/* ヘッダーとフッター */
header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
header h1 { margin: 0; font-size: 2.5em; color: var(--primary-color); }
footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); color: #888; }

/* ▼▼▼ [修正] calculator-containerのスタイル ▼▼▼ */
/* display: flex は削除し、上下の余白(padding)で中央配置を表現します */
.calculator-container {
    padding: 40px 0; /* 上下に余白を追加 */
}
/* ▲▲▲ ここまで ▲▲▲ */

.calculator-box {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /* 左右中央に配置 */
}

.calculator-box h2 { margin-top: 0; color: var(--primary-color); }
.calculator-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
#date-calculator-input { font-size: 1.1em; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }

#date-calculator-btn {
    font-size: 1.1em;
    padding: 11px 20px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    /* ▼▼▼ [修正] transitionプロパティのコロンをスペースに修正 ▼▼▼ */
    transition: background-color 0.2s ease;
}
#date-calculator-btn:hover { background-color: var(--accent-color); }

#date-calculator-result { margin-top: 20px; font-size: 2em; font-weight: bold; color: var(--accent-color); min-height: 1.5em; }
#date-calculator-result .days-figure { font-weight: bold; }