/* 나와라보험 - 공통 스타일 (100vh 풀페이지 레이아웃) */

/* CSS 변수 - 모바일 뷰포트 높이 (JavaScript에서 설정) */
:root {
    --vh: 1vh;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
    color: #333;
    background-color: #2563EB;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, select, button {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   100vh 풀페이지 레이아웃
   - 모바일 브라우저 주소창 대응
   - dvh: 동적 뷰포트 높이 (최신 브라우저)
   - --vh: JavaScript fallback (구형 브라우저)
   ======================================== */
.page-wrapper {
    /* Fallback: JavaScript로 계산된 높이 */
    height: calc(var(--vh, 1vh) * 100);
    /* Modern browsers: dvh 지원 시 사용 */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh 5vw;
    background-color: #fff;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: clamp(28px, 3.5vh, 48px);
    width: auto;
}

.phone-btn {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.5vw, 10px);
    padding: clamp(8px, 1.2vh, 16px) clamp(14px, 2vw, 32px);
    background-color: #2563EB;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(16px, 2vh, 26px);
}

.phone-btn .phone-icon {
    width: clamp(16px, 2vh, 28px);
    height: clamp(16px, 2vh, 28px);
}

/* Main Content */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Footer */
.footer {
    background-color: #F9FAFB;
    padding: clamp(12px, 1.5vh, 40px) 5vw;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.footer-logo {
    margin-bottom: clamp(8px, 1vh, 20px);
}

.footer-logo img {
    height: clamp(20px, 2.5vh, 40px);
}

.footer-divider {
    height: 1px;
    background-color: #E5E7EB;
    margin-bottom: clamp(8px, 1vh, 20px);
}

.footer-info {
    font-size: clamp(9px, 1.1vh, 14px);
    color: #6B7280;
    line-height: 1.6;
}

.footer-info p {
    margin-bottom: 1px;
}

/* Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* ========================================
   반응형 - 공통
   ======================================== */

/* PC/태블릿 - 100vh 최소 높이, 필요시 스크롤 */
@media (min-width: 769px) {
    html, body {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page-wrapper {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: visible;
        min-height: 0;
    }
}

/* PC 가로 화면 최적화 */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
    .footer {
        padding: clamp(10px, 1.2vh, 30px) 10vw;
    }
}

/* QHD / 4K */
@media (min-width: 2560px) {
    .header {
        padding: 2vh 8vw;
    }

    .footer {
        padding: 1.5vh 8vw;
    }
}

/* 아주 짧은 화면 */
@media (max-height: 600px) {
    .footer {
        padding: 8px 5vw;
    }

    .footer-logo {
        margin-bottom: 6px;
    }

    .footer-divider {
        margin-bottom: 6px;
    }
}

/* 모바일 세로 */
@media (max-width: 480px) {
    .header {
        padding: 1.5vh 4vw;
    }

    .footer {
        padding: 1.2vh 4vw;
    }

    .footer-info p {
        font-size: 9px;
    }
}

/* 모바일 - 100dvh 유지하면서 필요시 스크롤 */
@media (max-width: 768px) {
    html {
        height: 100%;
        overflow: hidden;
        background-color: #F9FAFB !important;
    }

    body {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
        background-color: #F9FAFB !important;
    }

    .page-wrapper {
        min-height: 100dvh;
        min-height: calc(var(--vh, 1vh) * 100);
        height: auto;
        overflow: visible;
    }

    main {
        flex: 1;
        overflow: visible;
        min-height: 0;
    }

    .footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}