/* Interフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* 全体のスタイル */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f7f9fb; 
}

/* プライマリボタンのスタイル */
.btn-primary { 
    background-color: #4f46e5;
    transition: transform 0.1s; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover { 
    background-color: #4338ca;
}
.btn-primary:active { 
    transform: translateY(1px);
}

/* タブのスタイル */
.template-tab { 
    transition: all 0.2s;
}
.tab-active { 
    background-color: #ffffff !important;
    color: #4f46e5 !important; 
    /* border-b-2 border-indigo-500; はTailwindなので残します */
}

/* 入力グループのフォーカス時のラベルアニメーション */
.input-group label { 
    transition: all 0.2s;
}
.input-group:focus-within label { 
    color: #4f46e5; 
    transform: translateX(4px);
}

/* スコアラジオボタンのグループとチェック済みスタイル */
.score-radio-group { 
    display: flex; 
    gap: 8px;
}
.score-radio-group input[type="radio"]:checked + label {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.score-radio-group label {
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.15s;
    flex-grow: 1;
    text-align: center;
}