/* common.css - QcDa Project Standard */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: #F8FAFC; /* slate-50 */
    color: #334155; /* slate-700 */
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

/* ボタンの共通スタイル */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}
.btn-primary { background-color: #3B82F6; color: white; }
.btn-primary:hover { background-color: #2563EB; }
.btn-secondary { background-color: #E2E8F0; color: #475569; }
.btn-secondary:hover { background-color: #CBD5E1; }
.btn-outline { border: 2px solid #3B82F6; color: #3B82F6; background-color: transparent; }
.btn-outline:hover { background-color: #EFF6FF; }
.btn-danger { background-color: #EF4444; color: white; }

/* フォームの共通スタイル */
.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ヘッダーとメニュー */
header {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ハンバーガーメニュー関連 */
#menu-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; opacity: 0; transition: opacity 0.3s;
}
#menu-overlay.show { display: block; opacity: 1; }
#side-menu {
    position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: #ffffff;
    z-index: 101; transform: translateX(100%); transition: transform 0.3s ease-in-out;
    box-shadow: -4px 0 15px rgba(0,0,0,0.1); overflow-y: auto; padding-bottom: 2rem;
}
#side-menu.open { transform: translateX(0); }

.menu-item {
    display: block; padding: 1rem 1.5rem; color: #334155; font-weight: 500; text-decoration: none; border-bottom: 1px solid #F1F5F9;
}
.menu-item:hover { background-color: #F8FAFC; }
.menu-divider { height: 1px; background-color: #E2E8F0; margin: 1rem 0; }
.menu-sub-item {
    display: block; padding: 0.5rem 1.5rem 0.5rem 2.5rem; color: #64748B; font-size: 0.875rem; text-decoration: none;
}
.menu-sub-item:hover { color: #3B82F6; }

/* フッター */
footer {
    background-color: #1E293B; color: #94A3B8; text-align: center; padding: 1.5rem; font-size: 0.875rem; margin-top: auto;
}

/* モーダル */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; justify-content: center; align-items: center;
}
.modal-backdrop.show { display: flex; }
.modal-content {
    background: white; border-radius: 0.75rem; padding: 2rem; width: 90%; max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* ローディング */
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3B82F6; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }