/* ==========================================================================
   Mobile Responsiveness Styling (Smartphones & Small Tablets)
   ========================================================================== */
@media (max-width: 600px) {
    /* 모바일: flex 센터링 해제 → 컨테이너가 진짜 100% 너비로 */
    html, body {
        display: block !important;
        padding: 0 !important;
        background-color: #f0f0f0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 모바일: 컨테이너 풀스크린 + 상단 여백 */
    .container {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        min-height: calc(100dvh - 32px) !important;
        margin: 12px 10px 0 10px !important;
    }

    /* Slightly reduce padding to maximize screen width on mobile */
    .content {
        padding: 20px 15px !important;
    }

    /* Stack labels and inputs vertically for a comfortable typing experience */
    .input-row, .input-col {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    /* Labels take 100% width above the inputs on mobile */
    .label {
        flex: none !important;
        width: 100% !important;
        font-size: 15px !important;
        margin-bottom: 2px;
    }

    /* Make input fields fill 100% of the stacked layout */
    .input-field {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
        border-width: 1.5px !important;
    }

    /* 모바일 헤더: 상단+하단 모두 라운드 */
    .top-bar {
        padding: 18px 20px !important;
        border-radius: 12px 12px 16px 16px !important;
    }

    /* Reduce main title margins to prevent vertical scrolling */
    .main-title {
        font-size: 20px !important;
        margin-bottom: 18px !important;
    }

    /* ★ margin-top:auto 무력화 → 버튼이 내용 바로 아래에 붙도록 */
    .btn-group {
        margin-top: 20px !important;
        padding-top: 0 !important;
    }
    
    .btn {
        padding: 12px !important;
        font-size: 15px !important;
    }

    /* ★ 활동 리스트 3컬럼 유지, 카드 높이 압축 */
    .activity-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    /* 카드 높이 고정으로 3*3 느낌 유지 */
    .activity-list > div {
        padding: 6px 5px !important;
        min-height: 0 !important;
    }

    /* Shorter canvas for mobile signatures to prevent scrolling */
    canvas {
        height: 120px !important;
    }

    /* ★ 시간 선택창 모바일 소형화 - 오른쪽 잘림 방지 */
    .time-select {
        padding: 6px 2px !important;
        font-size: 12px !important;
        width: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
        border-width: 1.5px !important;
    }
}