/* ============================================
   ECO-BUGS 공통 스타일시트 v3.0
   ============================================ */

/* ── 기본 ──────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
a, button { touch-action: manipulation; }

/* ── 그라디언트 ────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
}
.section-gradient {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

/* ── 카드 호버 ─────────────────────────────── */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

/* ── 스크롤 페이드인 ───────────────────────── */
.scroll-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}
.scroll-fade.active { opacity: 1; transform: none; }

/* ── 스티키 네비게이션 ─────────────────────── */
.nav-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
}

/* ── 제품 탭바 컨테이너 ────────────────────── */
#product-tab-wrap {
    position: sticky;
    top: 0; /* JS가 네비 높이에 맞게 override */
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* ── 탭바 스크롤 래퍼 ──────────────────────── */
.product-tab-bar {
    display: flex;
    overflow-x: auto;
    gap: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-tab-bar::-webkit-scrollbar { display: none; }

/* ── 탭 링크 ───────────────────────────────── */
.product-tab-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
    cursor: pointer;
    /* 터치 최소 영역 */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.product-tab-link:hover {
    color: #059669;
    background: #f0fdf4;
}
.product-tab-link.tab-active {
    color: #059669;
    border-bottom-color: #059669;
    font-weight: 700;
    background: #f0fdf4;
}
@media (min-width: 768px) {
    .product-tab-link {
        font-size: 0.9375rem;
        padding: 0.875rem 1.25rem;
    }
}

/* ── 폼 인풋 ───────────────────────────────── */
.form-input {
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,.2);
}

/* ── 이미지 ────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
img[loading="lazy"] { background: #f1f5f9; }

/* ── 동영상 16:9 ───────────────────────────── */
.video-container {
    position: relative;
    padding-top: 56.25%;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #000;
}
.video-container video,
.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 비교 카드 ─────────────────────────────── */
.comparison-card {
    transition: box-shadow .3s, border-color .3s;
}
.comparison-card:hover {
    box-shadow: 0 8px 24px rgba(5,150,105,.15);
    border-color: #059669;
}

/* ── 접근성 포커스 ─────────────────────────── */
:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* ── 텍스트 선택 ───────────────────────────── */
::selection      { background: #d1fae5; color: #065f46; }
::-moz-selection { background: #d1fae5; color: #065f46; }

/* ── 스크롤바 (PC) ─────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #6ee7b7; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #059669; }

/* ══════════════════════════════════════════════
   모바일 반응형 (640px 이하)
   ══════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* 한글 타이틀 중간 줄바꿈 방지 */
    h1, h2, h3 { word-break: keep-all; }

    /* 히어로 패딩 줄이기 */
    .hero-gradient { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    /* 섹션 상하 패딩 축소 */
    section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section.py-16 { padding-top: 2rem   !important; padding-bottom: 2rem   !important; }

    /* ── 모바일 타이포 스케일 ─────────────── */
    /* h1 */
    h1.text-5xl, h1.text-6xl,
    h2.text-5xl, h2.text-6xl { font-size: 1.625rem  !important; line-height: 1.25 !important; }

    /* h2 메인 섹션 제목 (text-4xl) */
    h2.text-4xl,
    h2.sm\:text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }

    /* h3 소제목 (text-3xl / text-2xl) */
    h3.text-3xl { font-size: 1.25rem !important; }
    h3.text-2xl { font-size: 1.125rem !important; }

    /* h4 카드 제목 (text-2xl / text-xl) */
    h4.text-2xl { font-size: 1rem !important; }
    h4.text-xl  { font-size: 0.9375rem !important; }

    /* 가격 숫자 (text-3xl/4xl) */
    p.text-4xl, p.text-3xl { font-size: 1.5rem !important; }

    /* 본문 p */
    p.text-xl  { font-size: 0.9375rem !important; }
    p.text-lg  { font-size: 0.875rem  !important; }

    /* 그리드 gap 줄이기 */
    .grid { gap: 1rem !important; }

    /* 카드 패딩 */
    .p-8  { padding: 1.25rem !important; }
    .p-12 { padding: 1.25rem !important; }

    /* 탭바 패딩 */
    .product-tab-link { padding: 0.625rem 0.75rem; font-size: 0.8125rem; }
}

/* ── CLS 방지 (이미지 배경) ────────────────── */
img { background-color: #f8fafc; }