/**
 * Mobile Refactored P1 - 터치 타겟 & 레이아웃
 * 작성일: 2025-11-24
 * 목적: Phase 2 P1 - 터치 타겟과 레이아웃 !important 제거
 */

/* ========================================
   1. 터치 타겟 시스템 (iOS/Android 가이드라인)
   ======================================== */

/* 기본 터치 타겟 */
.touch-target {
    min-height: var(--mobile-touch-ideal);  /* 48px - Android Material */
    min-width: var(--mobile-touch-ideal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* 작은 터치 타겟 (iOS 최소 기준) */
.touch-target--small {
    min-height: var(--mobile-touch-min);  /* 44px - iOS HIG */
    min-width: var(--mobile-touch-min);
}

/* 터치 영역 확장 (실제 요소보다 터치 영역을 크게) */
.touch-target--expand::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}

/* 모든 인터랙티브 요소에 터치 타겟 적용 */
@media (max-width: 768px) {
    /* 버튼 */
    button:not(.no-touch-target),
    .btn:not(.no-touch-target),
    [type="button"]:not(.no-touch-target),
    [type="submit"]:not(.no-touch-target),
    [role="button"]:not(.no-touch-target) {
        min-height: var(--mobile-touch-min);
        min-width: var(--mobile-touch-min);
    }

    /* 링크 */
    a.touch-interactive,
    .nav-link,
    .mobile-link {
        min-height: var(--mobile-touch-min);
        display: inline-flex;
        align-items: center;
        padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    }

    /* 폼 요소 */
    input:not([type="hidden"]),
    select,
    textarea {
        min-height: var(--mobile-touch-min);
        padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
        font-size: 16px;  /* iOS 자동 줌 방지 */
    }
}

/* ========================================
   2. 레이아웃 시스템 (가로 스크롤 방지)
   ======================================== */

/* 기본 컨테이너 */
.mobile-container {
    max-width: 100vw;
    overflow-x: hidden;
    padding: var(--mobile-spacing-md);
}

@media (max-width: 768px) {
    /* body 스크롤 제어 */
    body.mobile-optimized {
        overflow-x: hidden;
        max-width: 100vw;
        width: 100%;
    }

    /* 메인 컨테이너 */
    .container,
    .wrapper,
    main,
    section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* 박스 사이징 */
    .mobile-box,
    .mobile-card,
    .mobile-panel {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* ========================================
   3. Flex 레이아웃 시스템
   ======================================== */

/* 모바일 Flex 컨테이너 */
.mobile-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mobile-spacing-sm);
}

.mobile-flex--nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-flex--column {
    flex-direction: column;
}

.mobile-flex--center {
    align-items: center;
    justify-content: center;
}

/* 갭 변형 */
.mobile-flex--gap-xs {
    gap: var(--mobile-spacing-xs);
}

.mobile-flex--gap-sm {
    gap: var(--mobile-spacing-sm);
}

.mobile-flex--gap-md {
    gap: var(--mobile-spacing-md);
}

.mobile-flex--gap-lg {
    gap: var(--mobile-spacing-lg);
}

/* ========================================
   4. Grid 레이아웃 시스템
   ======================================== */

/* 모바일 그리드 */
.mobile-grid {
    display: grid;
    gap: var(--mobile-spacing-md);
}

.mobile-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.mobile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.mobile-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 반응형 그리드 */
@media (max-width: 768px) {
    .mobile-grid--responsive {
        grid-template-columns: 1fr;
    }

    .mobile-grid--2-responsive {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .mobile-grid--3-responsive {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

/* ========================================
   5. 버튼 시스템 (P2 준비)
   ======================================== */

/* 모바일 버튼 베이스 */
.mobile-btn {
    min-height: var(--btn-height-md);  /* 48px */
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-lg);
    font-size: var(--mobile-text-base);
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-spacing-xs);
}

/* 버튼 크기 */
.mobile-btn--sm {
    min-height: var(--btn-height-sm);  /* 40px */
    padding: var(--mobile-spacing-xs) var(--mobile-spacing-md);
    font-size: var(--mobile-text-sm);
}

.mobile-btn--lg {
    min-height: var(--btn-height-lg);  /* 56px */
    padding: var(--mobile-spacing-md) var(--mobile-spacing-xl);
    font-size: var(--mobile-text-lg);
}

/* 버튼 스타일 */
.mobile-btn--primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.mobile-btn--secondary {
    background: var(--card-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.mobile-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* 버튼 상태 */
.mobile-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.mobile-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.mobile-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 카테고리/필터/태그 버튼 */
.category-btn,
.filter-btn,
.tag-btn {
    white-space: nowrap;
    padding: var(--mobile-spacing-xs) var(--mobile-spacing-sm);
    font-size: var(--mobile-text-sm);
    min-width: auto;
    width: auto;
    display: inline-flex;
    align-items: center;
}

/* ========================================
   6. 폼 요소 시스템
   ======================================== */

/* 입력 필드 */
.mobile-input {
    min-height: var(--mobile-touch-ideal);  /* 48px */
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    font-size: 16px;  /* iOS 자동 줌 방지 중요! */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}

/* 텍스트 영역 */
.mobile-textarea {
    min-height: 120px;
    resize: vertical;
    padding: var(--mobile-spacing-md);
    font-size: 16px;
    line-height: 1.5;
}

/* 선택 박스 */
.mobile-select {
    min-height: var(--mobile-touch-ideal);
    padding-right: var(--mobile-spacing-xl);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.2em;
}

/* ========================================
   7. 텍스트 반응형 처리
   ======================================== */

@media (max-width: 768px) {
    /* 텍스트 줄바꿈 */
    .mobile-text,
    .mobile-paragraph {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* 제목 크기 조정 */
    h1.mobile-heading {
        font-size: var(--mobile-text-xl);
    }

    h2.mobile-heading {
        font-size: var(--mobile-text-lg);
    }

    h3.mobile-heading {
        font-size: var(--mobile-text-base);
    }

    /* 본문 텍스트 */
    p.mobile-text,
    .mobile-body {
        font-size: var(--mobile-text-base);
        line-height: 1.6;
    }
}

/* ========================================
   8. 이미지 반응형 처리
   ======================================== */

/* 콘텐츠 이미지 (프로필/레벨 제외) */
.content-image,
.article-image,
.post-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 썸네일 이미지 */
.thumbnail-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* 배경 이미지 */
.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========================================
   9. 명시도 우선순위 제어
   ======================================== */

/* 모바일 전용 명시도 증가 */
@media (max-width: 768px) {
    /* 페이지별 컨텍스트 */
    .page-mobile button.mobile-btn {
        /* 명시도: 0-2-1 = 21점 */
        /* Tailwind .w-14 (0-1-0 = 10점)보다 우선 */
    }

    .page-mobile input.mobile-input {
        /* 명시도 증가로 !important 불필요 */
    }

    /* 컴포넌트별 컨텍스트 */
    .mobile-menu .touch-target {
        /* 모바일 메뉴 내 터치 타겟 */
    }

    .mobile-form .mobile-input {
        /* 모바일 폼 내 입력 필드 */
    }
}

/* ========================================
   END OF FILE

   통계:
   - !important 사용: 0개
   - CSS 변수 활용: 100%
   - 터치 타겟: 44px/48px 준수
   - iOS 자동 줌 방지: font-size 16px

   다음 작업:
   - P2: 버튼/폼 스타일 완성
   - overrides-temporary.css에서 관련 코드 제거
   - 템플릿에 mobile-* 클래스 적용
   ======================================== */