/*
 * [Round 3 R3-2] 모바일 반응형 강화
 * 2026-05-22
 * 
 * 목표:
 * 1. iOS Safari 자동 줌 방지 (input font-size >= 16px)
 * 2. 터치 스크롤 최적화 (overscroll-behavior)
 * 3. 320~480px 초소형 디바이스 대응
 * 4. 안전영역 (notch / home indicator) 대응
 */

/* === 1. iOS 자동 줌 방지 ===
 * input/textarea의 font-size가 16px 미만이면 iOS Safari가 
 * 포커스 시 자동으로 페이지를 확대함. 16px 강제. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* === 2. 터치 스크롤 최적화 === */
html, body {
    -webkit-overflow-scrolling: touch;
}

/* 사이드바, 모달 등 스크롤 컨테이너의 overscroll chain 방지 */
.app-sidebar,
.modal-content,
.modal-body,
.notes-grid,
#notesGrid {
    overscroll-behavior: contain;
}

/* === 3. 320~480px 초소형 디바이스 === */
@media (max-width: 480px) {
    /* 패딩 축소 */
    .note-card { padding: 12px !important; }
    
    /* 헤더 검색창이 화면을 다 차지하지 않도록 */
    .header-search-input,
    #headerSearchInput {
        font-size: 16px;       /* 16px 줌 방지 */
        max-width: 100%;
    }
    
    /* 액션 버튼 영역 좌우 패딩 */
    .note-actions { gap: 6px !important; }
    
    /* 모달이 화면 가득 차지 */
    .modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
}

@media (max-width: 360px) {
    /* 갤럭시 폴드 등 초협소 화면 */
    body { font-size: 14px; }
    .note-title { font-size: 15px !important; }
    .note-preview { font-size: 12px !important; }
    
    /* 아이콘만 표시, 라벨 숨김 */
    .btn-label-mobile-hidden { display: none !important; }
}

/* === 4. iOS Notch / Android 안전영역 === */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .app-header,
    .app-sidebar {
        padding-top: env(safe-area-inset-top);
    }
    
    .floating-action-button,
    .fab {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* === 5. 터치 타겟 최소 44x44px (Apple HIG / Material Design) === */
@media (max-width: 768px) {
    button:not(.inline-btn),
    .btn:not(.btn-inline),
    a.button,
    [role="button"]:not(.inline-action) {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 인라인 텍스트 액션은 예외 (e.g. 본문 내 링크) */
    a.inline-action,
    .ce-toolbar__plus,
    .ce-toolbar__settings-btn {
        min-height: auto;
        min-width: auto;
    }
}