/* 共通ボタンスタイル - 計算、リセット、作成、RESETボタン用 */

/* プライマリボタン（計算・作成ボタン） */
.btn-calculate,
.btn-create {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
}

.btn-calculate:hover,
.btn-create:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-calculate:focus,
.btn-calculate:focus-visible,
.btn-create:focus,
.btn-create:focus-visible {
    background: linear-gradient(135deg, #0056b3, #004085) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3) !important;
    border: none !important;
}

/* セカンダリボタン（RESETボタン） */
.btn-reset {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
}

.btn-reset:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-reset:focus,
.btn-reset:focus-visible {
    background: linear-gradient(135deg, #c82333, #a71e2a) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3) !important;
    border: none !important;
}