/* 時間選択UI用の共通スタイル（スマホ対応） */

/* カスタムチェックボックスのスタイル */
input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* スマホ対応：タッチ領域を大きく */
@media (max-width: 768px) {
    .day-schedule-new label {
        padding: 15px !important;
        margin: -15px !important;
    }
    
    .time-select {
        font-size: 16px !important; /* iOS zoomを防ぐ */
    }
    
    .add-time-btn, .remove-time-btn {
        min-height: 48px !important; /* タッチ領域を確保 */
    }
    
    .time-range-item {
        flex-wrap: wrap;
    }
    
    .time-range-item select {
        min-width: calc(50% - 25px);
    }
}

/* タッチデバイス用の改善 */
@media (hover: none) and (pointer: coarse) {
    /* タッチデバイスの場合 */
    .add-time-btn, .remove-time-btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }
}