/* タブ4: ストレッチ管理CSS */

#tab4Content {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* ストレッチタイプボタン */
.stretch-type-btn {
    transition: all 0.2s ease;
}

.stretch-type-btn:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* 強度ボタン */
.intensity-btn {
    transition: all 0.2s ease;
}

.intensity-btn:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* 部位ボタン */
.body-part-btn {
    transition: all 0.2s ease;
}

.body-part-btn:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* タイマー */
#stretchTimer {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 開始・終了ボタン */
#startStretchBtn, #endStretchBtn {
    transition: all 0.3s ease;
}

#startStretchBtn:hover, #endStretchBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 統計エリア */
#stretchStatsArea div {
    transition: transform 0.2s ease;
}

#stretchStatsArea div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .stretch-type-btn,
    .intensity-btn,
    .body-part-btn {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    #startStretchBtn,
    #endStretchBtn {
        font-size: 12px;
        padding: 8px 16px;
    }
    
    #stretchTimer {
        font-size: 16px;
    }
}