@import url('https://googleapis.com');

#nature-page { font-family: 'Noto Sans KR', sans-serif !important; color: #333; line-height: 1.8; -webkit-font-smoothing: antialiased; }

.wrapper { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Hero Section */
.nature-hero { padding: 160px 0 120px; background-color: #fdfcf9; text-align: center; }

.main-display-title { font-family: 'Gowun Batang', serif !important; font-size: 46px !important; font-weight: 700 !important; line-height: 1.6 !important;
                      letter-spacing: -1.5px !important; color: #1a1a1a !important; margin-bottom: 25px; word-break: keep-all; }

.sub-intro-text { font-family: 'Noto Sans KR', sans-serif !important; font-size: 16px; color: #999; font-weight: 300; opacity: 0.8; }

.nature-intro-section { padding: 100px 0; background: #fff; }

.intro-card-v2 { max-width: 900px; margin: 0 auto; text-align: center; border: 1px solid #f2f2f2; padding: 70px 40px; border-radius: 20px; background: #fdfdfd; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }

.small-label { display: block; color: #2d5a27; font-size: 13px; font-weight: 700; letter-spacing: 3px; margin-bottom: 20px; }

.intro-card-v2 h3 { font-size: 30px; letter-spacing: -1px; margin-bottom: 40px; color: #111; }

.intro-card-v2 h3 strong { color: #2d5a27; }

.focus-box { background-color: #f4f7f1; padding: 35px; border-radius: 12px; margin: 30px 0; }

.focus-box p { font-size: 21px; color: #2d5a27; font-weight: 700; line-height: 1.6; letter-spacing: -0.5px; }

.caption { color: #aaa; font-size: 14px; }

.nature-benefits-v2 { padding: 100px 0; background-color: #fff; text-align: center; }

.v2-header { margin-bottom: 60px; }

.v2-header h3 { font-size: 32px; font-weight: 700; color: #111; letter-spacing: -1px; }

.v2-header h3 strong { color: #2d5a27; }

.accent-line { width: 35px; height: 2px; background: #2d5a27; margin: 20px auto 0; }

/* card-container */
.v2-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; max-width: 1100px; margin: 0 auto; }

.v2-card { flex: 0 1 calc(33.333% - 20px); min-width: 300px; background: #fff; padding: 55px 35px; border-radius: 20px; border: 1px solid #f0f0f0; 
           text-align: center; box-sizing: border-box; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 5px 15px rgba(0,0,0,0.03); }

.v2-card:hover { transform: translateY(-12px); border-color: #2d5a27; box-shadow: 0 20px 40px rgba(45, 90, 39, 0.1); }

.v2-num { display: block; font-size: 36px; font-weight: 800; color: #e1e8df; margin-bottom: 20px; font-family: 'Gothic A1', sans-serif; }

.v2-card h4 { font-size: 21px; font-weight: 700; color: #222; margin-bottom: 15px; letter-spacing: -0.5px; }

.v2-card p { font-size: 15px; line-height: 1.7; color: #777; word-break: keep-all; }

.final-cta-section { background-color: #f8f8f8; padding: 100px 0; text-align: center; }

.final-cta-section p { font-size: 18px; color: #444; margin-bottom: 35px; }

.btn-hover-arrow { display: inline-block; background-color: #2d5a27; color: #fff; padding: 18px 50px; border-radius: 50px;
                   text-decoration: none; font-size: 18px; font-weight: 600; transition: all 0.3s ease; }

.btn-hover-arrow:hover { background-color: #1a3a18; box-shadow: 0 10px 20px rgba(45, 90, 39, 0.2); }

.moving-arrow { display: inline-block; margin-left: 10px; transition: transform 0.3s ease; }

.btn-hover-arrow:hover .moving-arrow { transform: translateX(8px); }

/* 반응형 웹 */

@media (max-width: 1024px) {
    .wrapper { padding: 0 20px !important; }
    .v2-grid { 
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 20px 0 40px !important;
        gap: 20px !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .v2-card { flex: 0 0 300px !important; scroll-snap-align: center; }
}

@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; width: 100%; }
    #nature-page, .wrapper, .nature-hero, .nature-intro-section {
        width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; }

    .main-display-title { font-size: 24px !important; line-height: 1.6 !important; margin: 0 auto 20px !important; max-width: 180px !important; word-break: keep-all !important; text-align: center !important; }

    .v2-header h3 { font-size: 20px !important; line-height: 1.4 !important; margin-bottom: 25px !important; white-space: nowrap !important; max-width: none !important; display: block !important; text-align: center !important; }

    .intro-card-v2 h3 { font-size: 21px !important; max-width: 175px !important; margin: 0 auto 30px !important; word-break: keep-all !important; }
    .intro-card-v2 > p { font-size: 14px !important; max-width: 200px !important; margin: 0 auto 25px !important; word-break: keep-all !important; }

    .focus-box { padding: 25px 15px !important; margin: 25px auto !important; max-width: 280px !important; }
    .focus-box p { font-size: 15px !important; max-width: 220px !important; margin: 0 auto !important; word-break: keep-all !important; }

    .v2-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; gap: 15px !important; padding: 10px 20px 40px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
    .v2-grid::-webkit-scrollbar { display: none; }
    .v2-card { flex: 0 0 260px !important; scroll-snap-align: start; box-sizing: border-box !important; }

    .final-cta-section p { font-size: 16px !important; max-width: 195px !important; margin: 0 auto 30px !important; word-break: keep-all !important; text-align: center !important; }
}