/* --- Google Fonts (推奨) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* --- 🎨 "Clear & Cool" Light Theme --- */
:root {
    --mcc-font: 'Inter', 'Noto Sans JP', sans-serif;
    --mcc-bg: #f8f9fa; /* ページの背景色 */
    --mcc-card-bg: #ffffff; /* コンテナの背景色 */
    --mcc-text-primary: #212529; /* 基本テキスト色 */
    --mcc-text-secondary: #6c757d; /* サブテキスト色 */
    --mcc-border: #dee2e6; /* 境界線 */

    /* カウントボタン (青系) */
    --mcc-count-bg: #0d6efd;
    --mcc-count-hover: #0b5ed7;

    /* リセットボタン (赤系) */
    --mcc-reset-color: #dc3545;
    --mcc-reset-bg-hover: #fdf2f2;

    /* 結果の数値の色 */
    --mcc-result-color: var(--mcc-count-bg); 
    --mcc-result-flash-color: #000; /* 更新時のフラッシュ色 */
}

/* --- ✨ アニメーションの定義 --- */
@keyframes flash {
    0% {
        color: var(--mcc-result-flash-color);
        transform: scale(1.2);
    }
    100% {
        color: var(--mcc-result-color);
        transform: scale(1);
    }
}

/* --- 全体レイアウト --- */
.mcc-container {
    font-family: var(--mcc-font);
    background-color: var(--mcc-card-bg);
    color: var(--mcc-text-primary);
    border-radius: 16px;
    padding: 2em 2.5em;
    margin: 3em auto;
    max-width: 800px;
    border: 1px solid var(--mcc-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.mcc-header h3 {
    margin: 0 0 1.2em 0;
    font-size: 1.6em;
    font-weight: 700;
    text-align: center;
    color: var(--mcc-text-primary);
}

#mcc-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-size: 16px;
    background-color: #fff;
    color: var(--mcc-text-primary);
    border: 1px solid var(--mcc-border);
    border-radius: 8px;
    margin-bottom: 1.5em;
    transition: all 0.3s ease;
}

#mcc-textarea:focus {
    outline: none;
    border-color: var(--mcc-count-bg);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}


/* --- 🚀 ボタンのデザイン --- */
.mcc-actions {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-bottom: 2.5em;
}

.mcc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}
.mcc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* カウントボタン */
#mcc-count-btn {
    background-color: var(--mcc-count-bg);
    color: white;
}
#mcc-count-btn:hover {
    background-color: var(--mcc-count-hover);
}

/* リセットボタン (アウトラインスタイル) */
#mcc-reset-btn {
    background-color: transparent;
    color: var(--mcc-reset-color);
    border-color: var(--mcc-reset-color);
}
#mcc-reset-btn:hover {
    background-color: var(--mcc-reset-bg-hover);
}


/* --- 結果表示テーブル --- */
.mcc-results-wrapper {
    border: 1px solid var(--mcc-border);
    border-radius: 8px;
    overflow: hidden; /* 角丸を効かせるため */
}
.mcc-results-table {
    width: 100%;
    border-collapse: collapse;
}

.mcc-results-table td {
    padding: 16px;
    border-bottom: 1px solid var(--mcc-border);
}
.mcc-results-table tr:last-child td {
    border-bottom: none;
}
.mcc-results-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.mcc-results-table td:first-child {
    color: var(--mcc-text-secondary);
}
.mcc-results-table td:last-child {
    text-align: right;
    font-weight: 700;
    font-size: 1.1em;
    color: var(--mcc-result-color);
}
/* ✨ 更新アニメーション用のクラス */
.mcc-results-table td span.updated {
    animation: flash 0.3s ease-out;
}

/* --- 📱 レスポンシブ対応 --- */
@media (max-width: 768px) {
    .mcc-container {
        padding: 1.5em;
        margin: 1.5em;
        box-shadow: none;
        border: 1px solid var(--mcc-border);
    }
    .mcc-actions {
        flex-direction: column; /* ボタンを縦に並べる */
        gap: 1em;
    }
    .mcc-btn {
        width: 100%;
    }
}