hyungyunlim_obsidian-korean-grammar-assistant/styles/responsive.css

/* styles/responsive.css */

@supports (padding-top: env(safe-area-inset-top)) {
    #correctionPopup {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

@media (max-width: 768px) {
    #correctionPopup {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        box-sizing: border-box;
    }

    #correctionPopup .kga-popup-content {
        /* 화면 전체를 가득 채움 */
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        min-height: auto;
        border-radius: 0;
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
        /* Flex 레이아웃 조정 - 콘텐츠 영역 확대 */
        display: flex;
        flex-direction: column;
    }
    
    #correctionPopup .kga-header {
        /* 상단 safe area + 최소 패딩만 적용 */
        padding: 8px 16px 8px 16px;
        padding-top: max(8px, env(safe-area-inset-top, 0px) + 8px);
        padding-left: max(16px, env(safe-area-inset-left, 0px) + 16px);
        padding-right: max(16px, env(safe-area-inset-right, 0px) + 16px);

        /* 헤더 고정 높이로 공간 절약 */
        flex-shrink: 0;
    }
    
    #correctionPopup .kga-header h2 {
        font-size: 16px;
    }
    
    #correctionPopup .kga-content {
        /* 콘텐츠 영역 확대 - 남은 공간 모두 사용 */
        flex: 1;
        padding: 8px 16px 0;
        padding-left: max(16px, env(safe-area-inset-left, 0px) + 16px);
        padding-right: max(16px, env(safe-area-inset-right, 0px) + 16px);

        /* 스크롤 가능하도록 설정 */
        overflow-y: auto;
        min-height: 0; /* flex 항목이 축소될 수 있도록 */
    }
    
    #correctionPopup .kga-preview-section {
        /* 미리보기 영역 컴팩트화 */
        padding: 8px;
        margin-bottom: 8px;
    }
    
    #correctionPopup .kga-preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px; /* 8px에서 4px로 줄임 */
    }
    
    #correctionPopup .kga-color-legend {
        order: 1;
        align-self: flex-start;
        margin-left: 0;
        margin-top: 2px; /* 6px에서 2px로 줄임 */
        gap: 8px;
        font-size: 10px;
        padding: 3px 6px;
        background: var(--background-secondary);
        border-radius: 4px;
    }
    
    #correctionPopup .kga-preview-label {
        order: 0;
    }
    
    #correctionPopup .kga-color-legend-dot {
        width: 8px;
        height: 8px;
    }
    
    #correctionPopup .kga-pagination-controls {
        order: 2;
        align-self: flex-end;
    }
    
    #correctionPopup .kga-pagination-btn {
        padding: 8px 12px;
        font-size: 14px;
        min-height: 36px;
        min-width: 60px;
    }

    #correctionPopup .kga-pagination-btn.small {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
        min-width: 50px;
    }
    
    #correctionPopup .kga-page-info {
        font-size: 14px;
        min-width: 60px;
    }

    #correctionPopup .kga-page-info.small {
        font-size: 12px;
        min-width: 50px;
    }
    
    #correctionPopup .kga-error-item {
        padding: 10px;
        margin-bottom: 10px;
    }

    #correctionPopup .kga-error-original {
        font-size: 14px;
        padding: 6px 10px;
    }

    #correctionPopup .kga-suggestion-option {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
        display: flex;
        align-items: center;
        border-radius: 16px;
    }
    
    #correctionPopup .kga-button-area {
        /* 버튼 영역 최소화 - 하단 safe area + 최소 패딩만 */
        flex-shrink: 0;
        gap: 10px;
        padding: 8px 16px 8px 16px;
        padding-left: max(16px, env(safe-area-inset-left, 0px) + 16px);
        padding-right: max(16px, env(safe-area-inset-right, 0px) + 16px);
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px) + 8px);
    }
    
    #correctionPopup .kga-cancel-btn,
    #correctionPopup .kga-apply-btn {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px;
        border-radius: 8px;
        flex: 1;
    }
    
    .kga-clickable-error {
        padding: 4px 2px;
        margin: 0 1px;
        border-radius: 3px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }
    
    #correctionPopup .kga-preview-text {
        font-size: 14px;
        line-height: 1.6;
        min-height: 120px; /* 미리보기 최소 높이 줄임 */
        -webkit-overflow-scrolling: touch;
    }
    
    #correctionPopup .kga-error-summary:not(.collapsed) .kga-error-summary-content {
        /* 전체 화면에 맞게 오류 상세 영역 확대 */
        height: 320px;
        max-height: 40vh; /* 뷰포트 높이의 40%까지 사용 */
    }
    
    #correctionPopup .kga-error-suggestions {
        gap: 8px;
    }
    
    #correctionPopup .kga-error-summary {
        /* 상단 여백 줄임 */
        margin-top: 8px;
        padding-top: 8px;
    }
    
    #correctionPopup .kga-close-btn-header {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    /* AI 분석 버튼 모바일 최적화 */
    #correctionPopup .kga-ai-analyze-btn {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    @media (max-height: 700px) {
        /* 작은 화면에서 오류 상세 영역 높이 조정 */
        #correctionPopup .kga-error-summary:not(.collapsed) .kga-error-summary-content {
            height: 250px;
            max-height: 35vh;
        }
        
        #correctionPopup .kga-preview-text {
            min-height: 100px;
        }
    }

    @media (max-width: 896px) and (orientation: landscape) {
        /* 가로 모드에서 더 컴팩트한 레이아웃 */
        #correctionPopup .kga-header {
            padding: 6px 16px 6px 16px;
            padding-top: max(6px, env(safe-area-inset-top, 0px) + 6px);
        }
        
        #correctionPopup .kga-content {
            padding: 6px 16px 0;
        }

        #correctionPopup .kga-button-area {
            padding: 6px 16px 6px 16px;
            padding-bottom: max(6px, env(safe-area-inset-bottom, 0px) + 6px);
        }
        
        #correctionPopup .kga-error-summary:not(.collapsed) .kga-error-summary-content {
            height: 200px;
            max-height: 30vh;
        }
    }
    
    #correctionPopup .kga-error-item-compact {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    #correctionPopup .kga-error-original-compact {
        font-size: 12px;
        padding: 3px 6px;
        min-width: 50px;
    }
    
    #correctionPopup .kga-suggestion-compact {
        font-size: 12px;
        padding: 4px 8px;
        min-height: 32px;
        border-radius: 16px;
        display: flex;
        align-items: center;
    }
    
    #correctionPopup .kga-error-help-compact {
        font-size: 11px;
        padding: 5px 9px;
        min-height: 22px;
    }
}