/* layout */
.hero-wrap { display: flex; gap: 20px; max-width: 1400px; margin: 40px auto; padding: 0 20px; align-items: stretch !important; }

/* slider-left (400px 고정) */
.hero { flex: 2.2; height: 400px !important; position: relative; overflow: hidden; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.hero-slider, .hero-track, .hero-slide { width: 100%; height: 100%; position: relative; }
.hero-track { display: flex; transition: transform 0.7s ease-in-out; }
.hero-slide { flex-shrink: 0; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 1; }

.hero-content { position: absolute; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 5; width: 90% !important; 
                color: #fff !important; text-align: center !important; }
.hero-content h1 { font-size: 2.8rem !important; font-weight: 800 !important; margin-bottom: 15px !important; text-shadow: 0 3px 15px rgba(0,0,0,0.6) !important; }
.hero-content p { font-size: 1.4rem !important; font-weight: 500 !important; line-height: 1.6 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }

/* slider-btn */
.hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: #fff; 
                         border: none; font-size: 24px; width: 50px; height: 50px; cursor: pointer; border-radius: 50%; z-index: 10; }
.hero-prev { left: 20px; } .hero-next { right: 20px; }

/* banner-right */
.hero-side { flex: 1; display: flex; flex-direction: column; gap: 15px; height: 400px !important; }

/* consult */
.consult-banner { flex: 2.5 !important; border-radius: 25px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
.consult-banner img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

/* blog */
.blog-banner { flex: 1 !important; background: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 25px !important; display: flex !important; 
               flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; text-decoration: none !important; 
               transition: all 0.3s ease !important; overflow: hidden !important; position: relative !important; }

/* blog-icon */
.blog-banner img { width: 32px !important; height: auto !important; max-width: none !important; max-height: none !important; object-fit: contain !important; display: block !important; }

/* blog-text style */
.blog-banner span { font-size: 1.1rem !important; font-weight: 700 !important; color: #333333 !important; letter-spacing: -0.5px !important; white-space: nowrap !important; }
.blog-banner:hover, .consult-banner:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important; background-color: #fcfcfc !important; }
.blog-banner:hover span { color: #03c75a !important; }

/* search */
.search-section { display: flex !important; justify-content: center !important; margin: 60px auto 40px !important; padding: 0 20px !important; }

.search-card { background: #fff !important; padding: 45px 30px !important; border-radius: 35px !important; box-shadow: 0 15px 45px rgba(0,0,0,0.06) !important; 
               width: 100% !important; max-width: 800px !important; text-align: center !important; }
.search-card h3 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 1.5rem !important; font-weight: 700 !important; 
                  margin-bottom: 12px !important; color: #333 !important; white-space: nowrap !important; }
.search-card p { color: #777 !important; margin-bottom: 30px !important; font-size: 1rem !important; }

.search-group { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; max-width: 550px !important; margin: 0 auto !important; align-items: stretch !important; }

.search-group input { flex: 1 !important; height: 55px !important; padding: 0 20px !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; outline: none !important; 
                      font-size: 1rem !important; box-sizing: border-box !important; }

.search-group button { width: 110px !important; height: 55px !important; background-color: #2d5a27 !important; color: #fff !important; border: none !important;  border-radius: 12px !important; font-weight: 700 !important; 
                       font-size: 1rem !important; cursor: pointer !important; transition: all 0.3s ease !important; white-space: nowrap !important; box-sizing: border-box !important; display: flex !important; 
                       align-items: center !important; justify-content: center !important; }

.search-group button:hover { background-color: #1e3d1a !important; transform: translateY(-2px) !important; box-shadow: 0 5px 15px rgba(45,90,39,0.2) !important; }

.result-display { margin-top: 25px !important; font-size: 1rem !important; }

/* card */
.menu-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important; max-width: 1000px !important; margin: 50px auto 100px !important; padding: 0 20px !important; }

.menu-item { background: #fff !important; padding: 40px 20px !important; border-radius: 25px !important; border: 1px solid #f2f2f2 !important; transition: all 0.4s ease !important; cursor: pointer !important; display: flex !important;
             flex-direction: column !important; align-items: center !important; justify-content: center !important; aspect-ratio: 1 / 1.1 !important; min-height: 250px !important; }

.menu-item .icon { font-size: 40px !important; margin-bottom: 20px !important; line-height: 1 !important; }

.menu-item h4 { font-size: 1.35rem !important; font-weight: 800 !important; color: #2d5a27 !important; margin-bottom: 12px !important; text-align: center !important; }

.menu-item p { font-size: 0.95rem !important; color: #666 !important; line-height: 1.5 !important; text-align: center !important; max-width: 180px !important; margin: 0 !important; word-break: keep-all !important; }

.menu-item:hover { transform: translateY(-10px) !important; border-color: #2d5a27 !important; box-shadow: 0 15px 35px rgba(45,90,39,0.1) !important; }

.menu-grid a { text-decoration: none !important; color: inherit !important; display: block !important; }

.menu-grid a:hover { text-decoration: none !important; }

.menu-grid a:hover .menu-item h4 { color: #2d5a27 !important; }

/* 반응형 웹 */

@media (max-width: 1024px) {
    html, body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

    .hero-wrap, .search-section, .menu-grid { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 20px !important; margin: 0 auto !important; box-sizing: border-box !important;
        float: none !important; position: relative !important; left: 0 !important; transform: none !important; }

    .hero { display: block !important; width: 100% !important; height: 240px !important; margin: 15px 0 !important; border-radius: 20px !important; overflow: hidden !important; }
    .hero-slide { display: block !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; }
    .hero-content h1 { font-size: 1.3rem !important; line-height: 1.3 !important; }
    .hero-content p { font-size: 0.9rem !important; max-width: 200px !important; margin: 0 auto !important; word-break: keep-all; }

    .hero-side { display: block !important; width: 100% !important; margin: 0 !important; }
    .consult-banner { display: block !important; width: 100% !important; min-height: 170px !important; margin-bottom: 12px !important; border-radius: 20px !important; }
    .consult-banner img { width: 100% !important; height: auto !important; object-fit: cover; }
    .blog-banner { display: flex !important; min-height: 65px !important; margin-bottom: 35px !important; background: #fff !important; border-radius: 12px !important; }

    .search-card { width: 100% !important; padding: 35px 15px !important; border-radius: 25px !important; text-align: center !important; margin: 0 auto !important; box-sizing: border-box !important; }
    .search-card p { font-size: 0.9rem !important; line-height: 1.6 !important; max-width: 240px !important; margin: 0 auto 20px !important; word-break: keep-all !important; }
    .search-group { display: flex !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; }
    .search-group input { flex: 1 !important; height: 50px !important; min-width: 0; }
    .search-group button { width: 90px !important; height: 50px !important; flex-shrink: 0; }

    .menu-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 30px auto 60px !important; }
    .menu-item { min-height: 110px !important; padding: 15px 5px !important; border-radius: 18px !important; box-sizing: border-box !important; }
    .menu-item h4 { font-size: 0.85rem !important; white-space: nowrap; }
    .menu-item p { display: none !important; } }