/**
 * 모바일 최적화 CSS
 * 경리업무를잘하는청년들 - wapeople.kr
 * 
 * 목차:
 * 1. CSS 변수 정의
 * 2. 전역 리셋 및 기본 스타일
 * 3. 반응형 미디어 쿼리 (768px 이하)
 * 4. 작은 모바일 (375px 이하)
 * 5. 매우 작은 화면 (320px 이하)
 * 6. 가로 모드
 * 7. iOS Safari 전용
 * 8. 접근성 및 성능
 * 9. 레이어 우선순위
 * 10. 스크롤바 스타일
 * 
 * 최종 수정: 2026-01-12
 */


/* ==========================================================================
   1. CSS 변수 정의
   ========================================================================== */

:root {
    /* 색상 */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-border: #e2e8f0;
    --color-bg: #f8fafc;
    
    /* 간격 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* 터치 타겟 최소 크기 */
    --touch-target-min: 44px;
    
    /* 폰트 크기 */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    
    /* 전환 효과 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    
    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   2. 전역 리셋 및 기본 스타일
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 이미지 반응형 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   3. 반응형 미디어 쿼리 (768px 이하)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* --- 3.1 가로 스크롤 방지 --- */
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl,
    .max-w-3xl, .max-w-2xl, .max-w-xl,
    main, section, footer {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* --- 3.2 터치 타겟 --- */
    button,
    input[type="submit"],
    input[type="button"],
    .btn {
        min-height: var(--touch-target-min);
        touch-action: manipulation;
    }
    
    a {
        min-height: auto;
        min-width: auto;
    }
    
    a.card {
        min-height: var(--touch-target-min);
        touch-action: manipulation;
    }
    
    /* --- 3.3 폼 입력 필드 --- */
    input,
    select,
    textarea {
        font-size: var(--font-size-base) !important; /* iOS 확대 방지 */
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* --- 3.4 이메일 입력 필드 (데스크톱/모바일 분리) --- */
    .hidden.md\:flex { display: none; }
    /* 모바일 이메일 입력만 표시 (메뉴 제외) */
    .md\:hidden:not(#mobileMenu) { display: block; }
    
    /* 모바일 메뉴는 hidden 상태 유지 */
    #mobileMenu.hidden { display: none !important; }
    
    /* --- 3.5 네비게이션 --- */
    nav {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .nav-glass {
        padding-top: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    nav img {
        height: 2.5rem;
    }
    
    nav a[href="#quickDiagnosis"] {
        padding: var(--spacing-sm) 0.75rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    #mobileMenuBtn {
        padding: var(--spacing-sm);
        min-width: 40px;
        min-height: 40px;
    }
    
    /* --- 3.6 카드 스타일 --- */
    .card {
        max-width: 100%;
        overflow: hidden;
    }
    
    .card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .card:hover {
        transform: none;
    }
    
    .card p, .card span, .card h2, .card h3, .card h4 {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    .card .card-arrow {
        display: inline-block;
        font-size: 0.875rem;
        color: #9ca3af;
    }
    
    /* --- 3.7 마진 조정 --- */
    .mb-12, .mb-4 {
        margin-bottom: var(--spacing-md);
    }
    
    .mb-14 {
        margin-bottom: var(--spacing-lg);
    }
    
    /* --- 3.8 Hero 섹션 --- */
    section.min-h-screen {
        padding-top: 5rem;
    }
    
    .inline-flex.items-center.gap-2.bg-blue-50 {
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    /* --- 3.9 고민 카드 하단 텍스트 --- */
    span[class*="text-amber-600"],
    span[class*="text-blue-600"],
    span[class*="text-rose-600"],
    span[class*="text-emerald-600"] {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }
    
    .text-amber-600.text-sm.font-bold,
    .text-blue-600.text-sm.font-bold,
    .text-rose-600.text-sm.font-bold,
    .text-emerald-600.text-sm.font-bold {
        white-space: nowrap;
        font-size: 0.75rem;
    }
    
    /* --- 3.10 제목 크기 --- */
    h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* --- 3.11 섹션 패딩 --- */
    section {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        overflow-x: hidden;
    }
    
    /* --- 3.12 그리드 --- */
    .grid {
        gap: 0.75rem;
    }
    
    /* --- 3.13 버튼 --- */
    button[type="submit"],
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
    }
    
    /* --- 3.14 모달 --- */
    .modal {
        padding: var(--spacing-md);
    }
    
    .modal > div {
        max-width: calc(100vw - 2rem);
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* --- 3.15 FAQ --- */
    .faq-item {
        padding: var(--spacing-md);
    }
    
    /* --- 3.16 패딩 조정 --- */
    .px-6 {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* --- 3.17 솔루션 슬라이드 --- */
    #solutionSlideContainer {
        margin-left: calc(var(--spacing-md) * -1);
        margin-right: calc(var(--spacing-md) * -1);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* --- 3.18 비용 비교 카드 --- */
    .grid.md\:grid-cols-2 > div {
        max-width: 100%;
    }
    
    /* --- 3.19 Footer --- */
    footer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    footer .grid {
        gap: var(--spacing-sm);
    }
    
    /* --- 3.20 텍스트 줄바꿈 --- */
    p, span, div, label, li {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* URL/이메일 강제 줄바꿈 */
    a[href*="http"],
    a[href*="mailto"],
    .email,
    .url {
        word-break: break-all;
    }
    
    /* --- 3.21 체크박스/라디오 --- */
    label.cursor-pointer {
        min-height: auto;
    }
    
    label.cursor-pointer > div {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    label.flex.items-center {
        min-height: 48px;
        padding: 0.75rem;
    }
    
    /* --- 3.22 입력 필드 그리드 --- */
    .grid.md\:grid-cols-2 {
        gap: 0.75rem;
    }
    
    /* --- 3.23 신뢰 배지 --- */
    .flex.flex-wrap.justify-center {
        gap: var(--spacing-sm);
    }
    
    .flex.flex-wrap.justify-center > div {
        font-size: 0.75rem;
    }
    
    /* --- 3.24 스크롤 성능 --- */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* --- 3.25 고민 카드 인터랙션 --- */
    div[onclick*="showSolution"] {
        cursor: pointer;
    }
    
    div[onclick*="showSolution"]:active {
        transform: scale(0.98);
    }
}


/* ==========================================================================
   4. 작은 모바일 (375px 이하) - iPhone SE 등
   ========================================================================== */

@media (max-width: 375px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    button, .btn {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }
    
    input, select, textarea {
        font-size: var(--font-size-sm) !important;
        padding: 0.625rem 0.75rem;
    }
    
    .card { padding: var(--spacing-md); }
    
    nav a[href="#quickDiagnosis"] {
        padding: 0.375rem 0.5rem;
        font-size: 0.625rem;
    }
    
    nav img { height: 2rem; }
    
    .grid { gap: var(--spacing-sm); }
    
    div[onclick*="showSolution"] h3 {
        font-size: 1rem;
    }
    
    .grid.grid-cols-2 {
        gap: 0.375rem;
    }
    
    .grid.grid-cols-2 label > div {
        padding: var(--spacing-sm);
        min-height: 44px;
    }
    
    .grid.grid-cols-2 label > div span.text-2xl {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .grid.grid-cols-2 label > div span.font-semibold {
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   5. 매우 작은 화면 (320px 이하)
   ========================================================================== */

@media (max-width: 320px) {
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.125rem; }
    
    section {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    /* 상담 버튼 숨기고 메뉴에서만 접근 */
    nav a[href="#quickDiagnosis"] {
        display: none;
    }
}


/* ==========================================================================
   6. 가로 모드
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .min-h-screen {
        min-height: auto;
    }
    
    h1 { font-size: 1.5rem; }
}


/* ==========================================================================
   7. iOS Safari 전용
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: var(--font-size-base) !important; /* 줌 방지 */
    }
    
    body {
        overscroll-behavior-y: none; /* bounce 효과 제어 */
    }
    
    nav.fixed {
        position: -webkit-sticky;
        position: sticky;
    }
}


/* ==========================================================================
   8. 접근성 및 성능
   ========================================================================== */

/* 애니메이션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 터치 디바이스 호버 효과 제거 */
@media (hover: none) and (pointer: coarse) {
    .hover\:scale-105:hover,
    .hover\:shadow-2xl:hover,
    .hover\:-translate-y-1:hover,
    .hover\:-translate-y-2:hover {
        transform: none;
        box-shadow: inherit;
    }
    
    .card:hover {
        transform: none;
        border-color: inherit;
    }
    
    /* active 상태로 대체 */
    .card:active,
    a:active,
    button:active {
        opacity: 0.8;
    }
}


/* ==========================================================================
   9. 레이어 우선순위 (z-index)
   ========================================================================== */

nav { z-index: 1000; }
.modal { z-index: 9999; }
#scrollToTop { z-index: 9998; }
footer { position: relative; z-index: 10; }
section { position: relative; z-index: 1; }


/* ==========================================================================
   10. 모바일 메뉴
   ========================================================================== */

#mobileMenu {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
    overflow-x: hidden;
}

#mobileMenu a {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}


/* ==========================================================================
   11. 스크롤바 스타일
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}