@charset "utf-8";

/* --- [기본 스타일] --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- [0. 최상단 네비게이션 (탑바)] --- */
.top-nav {
    width: 100%; background-color: #03221E; color: #fff;
    font-size: 0.8rem; font-weight: 700; padding: 12px 0;
    position: relative; z-index: 100;
}
.top-nav-content { display: flex; justify-content: center; align-items: center; }
.top-nav a { color: #fff; margin: 0 20px; letter-spacing: 0.5px; transition: opacity 0.3s; }
.top-nav a:hover { opacity: 0.7; }
.top-nav .bar { font-size: 0.6rem; opacity: 0.4; margin-top: -2px; }

/* --- [1. 헤더 레이아웃] --- */
header { width: 100%; font-size: 0; line-height: 0; }

/* === 상단 영역 === */
.hero-upper-section {
    position: relative; width: 100%; height: 55vh; overflow: hidden; z-index: 1;
}
.hero-swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.upper-content {
    position: relative; z-index: 10; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    padding-top: 40px;
}
.logo { width: 100px; }
.text-top-area {
    width: 100%; max-width: 1200px; padding: 0 20px;
    display: flex; justify-content: flex-start !important;
    padding-left: 40px !important; padding-bottom: 20px;
}
.txt-img-top {
    width: 85%; max-width: 800px; height: auto;
    margin-left: 0 !important; margin-right: auto !important;
}

/* === 하단 영역 === */
.hero-lower-section {
    background-color: #D4E0B2; position: relative; z-index: 2;
    margin-top: -5px; padding-top: 20px; padding-bottom: 80px;
    font-size: 1rem; line-height: 1.6;
}
.text-bottom-area {
    width: 100%; margin-bottom: 40px;
    display: flex; justify-content: flex-start !important;
    padding-left: 40px !important;
}
.txt-img-bottom {
    width: 85%; max-width: 800px; height: auto;
    margin-left: 0 !important; margin-right: auto !important;
}
.hero-desc {
    font-size: 1.1rem; line-height: 1.8; color: #333; font-weight: 500;
    text-align: left; padding-left: 40px;
}

/* --- [2. SERVICE 섹션] --- */
.section-service { display: flex; flex-wrap: wrap; }
.service-box {
    width: 50%; height: 280px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 20px; text-align: center;
}
.service-box.title-area { background-color: #FCDCA6; }
.service-box.pink { background-color: #F9CDCD; }
.service-box.beige { background-color: #F5E6D3; }
.service-box.blue { background-color: #D6EFED; }
.service-box h3 { font-size: 2.2rem; margin-bottom: 15px; font-weight: 900; letter-spacing: -1px; color: #222; }
.service-box p { font-size: 1.25rem; color: #333; line-height: 1.5; font-weight: 500; }
.svc-title-img { width: 320px; }
@media (max-width: 768px) {
    .service-box { width: 100%; height: auto; min-height: 300px; padding: 40px 20px; }
}

/* --- [3. JEJU PRODUCT 섹션] --- */
.section-product { padding: 120px 0; text-align: center; background-color: #fff; }
.prd-title-img { width: 300px; margin: 0 auto 70px; }
.product-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 860px !important; margin: 0 auto; gap: 40px 15px;
}
.product-item { text-align: center; }
.product-item img {
    width: 75%; max-width: 180px; aspect-ratio: 1/1; border-radius: 50%;
    object-fit: cover; margin: 0 auto 15px; transition: transform 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.product-item:hover img { transform: scale(1.05); }
.product-name { font-weight: 700; font-size: 1.2rem; color: #222; }

/* --- [4. UNION (농부 슬라이드) 섹션] --- */
.section-union { padding: 0; position: relative; background-color: #fff; }
.union-header { position: absolute; top: 60px; left: 5%; z-index: 10; margin: 0; }
.union-title-img { width: 250px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
.farmer-swiper { width: 100%; height: 600px; padding-bottom: 0; }
.farmer-swiper .swiper-slide { text-align: center; background: #fff; }
.farmer-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swiper-button-next, .swiper-button-prev { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 2.5rem !important; font-weight: bold; }
.swiper-pagination { bottom: 30px !important; text-align: center; }
.swiper-pagination-bullet { background: #fff; opacity: 0.6; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { background: #fff; opacity: 1; }
@media (max-width: 768px) {
    .farmer-swiper { height: 400px; }
    .union-header { top: 30px; }
}

/* --- [5. 하단 정보 영역 (푸터)] --- */
.section-footer-info {
    /* ★ 수정: 흰색 여백 제거 (농부 사진과 붙음) */
    margin-top: 0; 
    
    padding: 80px 0;
    background-color: #D6EFED; 
    text-align: center; 
}

.footer-layout {
    display: flex; align-items: flex-start; flex-wrap: nowrap;
    justify-content: center; gap: 0;
    position: relative; max-width: 1000px; margin: 0 auto; text-align: left;
}
.footer-left { flex-shrink: 0; }
.insta-feed-box img {
    width: 25vw; max-width: 300px; min-width: 180px;
    height: auto; aspect-ratio: 1/1; object-fit: cover;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s;
}
.insta-feed-box:hover img { transform: scale(1.02); }

/* PC/Tablet 아이콘 위치 */
.footer-center {
    margin-left: -25px; margin-right: 50px; margin-top: -15px;
    flex-shrink: 0; position: relative; z-index: 10;
}
.icon-insta-big {
    width: 6vw; max-width: 70px; min-width: 45px;
    height: auto; transition: transform 0.3s;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1));
}
.icon-insta-big:hover { transform: rotate(15deg) scale(1.1); }

/* 텍스트 정보 */
.footer-right {
    margin-left: 0; text-align: left;
    display: flex; flex-direction: column; gap: 40px; padding-top: 10px; flex-shrink: 0;
}
.footer-menu { display: flex; flex-direction: column; gap: 3px; }
.menu-link { font-size: 1.2rem; font-weight: 800; color: #000; letter-spacing: -0.5px; }
.menu-link:hover { color: #2E5A36; text-decoration: underline; }
.family-area { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.family-title { color: #8EB8B6; font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.family-link img { height: 32px; width: auto; opacity: 0.9; transition: opacity 0.3s; }
.family-link:hover img { opacity: 1; }
.family-link:last-child img { height: 55px; margin-top: 5px; }


/* ★ [카피라이트 그레이 바 스타일] */
.copyright-bar {
    background-color: #EAEAEA; 
    color: #666;
    font-size: 0.8rem;
    text-align: center !important; 
    padding: 15px 0;
    width: 100%;
    margin-top: 0;
}
/* 비상용 */
footer p:last-child, .footer-bottom, .copyright {
    text-align: center !important;
    display: block; width: 100%; margin: 0 auto;
}


/* --- [모바일 전용 레이아웃] (700px 이하) --- */
@media (max-width: 700px) {
    .footer-layout {
        position: relative; 
        flex-direction: column; align-items: center; gap: 0; margin-bottom: 40px;
    }
    /* 이미지 크기 고정 */
    .insta-feed-box img { width: 260px; height: 260px; max-width: 80vw; }
    
    /* [모바일] 아이콘 공중 부양 (겹침 문제 해결) */
    .footer-center {
        position: absolute; 
        top: 0; left: 50%; 
        margin-left: 90px; /* 중앙에서 오른쪽으로 90px 이동 (우측 상단 모서리) */
        margin-top: -15px; /* 위로 살짝 돌출 */
        margin-right: 0; 
    }

    .footer-right {
        margin-top: 30px; /* 흐름이 꼬이지 않게 마진 리셋 */
        align-items: center; text-align: center; width: 100%;
    }
    .family-area { align-items: center; }
    .product-grid {
        grid-template-columns: repeat(4, 1fr) !important; gap: 20px 5px !important;
    }
    .product-name {
        font-size: 0.75rem !important; letter-spacing: -1px; white-space: nowrap;
    }
}

/* [레터박스 복구] */
@media (min-width: 1201px) {
    html {
        background-color: #F7F7F7; display: flex; justify-content: center;
    }
    body {
        width: 100%; max-width: 1200px; margin: 0 auto;
        background-color: #fff; min-height: 100vh;
        box-shadow: 0 0 30px rgba(0,0,0,0.05); 
    }
}