/* ============================================================
   GreenLeaf (theme/28) - 보조 CSS (Tailwind 유틸 보완 전용)
   친환경 기업 리브랜딩
   ============================================================ */

:root { scroll-behavior: smooth; }
body { word-break: keep-all; }

/* ---- 아이콘 정렬 고정 (밀림 방지) ---- */
[data-lucide] { display: inline-block; vertical-align: middle; stroke-width: 2; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-22 { width: 22px; height: 22px; }
.icon-28 { width: 28px; height: 28px; }

/* ---- 헤더: 히어로 위 투명 → 스크롤 시 흰 배경 ---- */
#header { color: #fff; }
#header .logo-text { color: #fff; }
#header.scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 18px rgba(0,0,0,.08);
    color: #1B2A22;
    backdrop-filter: saturate(1.2) blur(4px);
}
#header.scrolled .logo-text { color: #1B2A22; }
#header.scrolled #navOpen { border-color: rgba(0,0,0,.15); }
.nav-link { position: relative; transition: color .2s; }
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 0; height: 2px; background: #2DBC83; transition: width .25s;
}
.nav-link:hover { color: #2DBC83; }
.nav-link:hover::after { width: 100%; }
#header.scrolled .nav-link:hover { color: #1FA463; }

/* ---- 드로어 링크 ---- */
.drawer-link {
    display: block; padding: 15px 22px; font-size: 16px; font-weight: 600;
    color: #1B2A22; border-bottom: 1px solid #f3f4f6; transition: background .2s, color .2s;
}
.drawer-link:hover { background: #f0faf4; color: #1FA463; }

/* ---- 히어로 버튼 ---- */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 50px; padding: 0 28px; border-radius: 999px;
    background: #1FA463; color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 22px rgba(31,164,99,.35); transition: transform .2s, background .2s, box-shadow .2s;
}
.btn-primary:hover { background: #157347; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(21,115,71,.4); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    height: 50px; padding: 0 26px; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; font-size: 15px;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-ghost:hover { background: #fff; color: #157347; border-color: #fff; }

/* ---- 히어로 Swiper 높이 체인 (collapse 방지) ---- */
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: 100%; }

/* ---- 히어로 슬라이드 줌 ---- */
.hero-zoom { transform: scale(1.08); transition: transform 6s ease-out; }
.swiper-slide-active .hero-zoom { transform: scale(1); }

/* ---- 히어로 페이지네이션 (01/02) ---- */
.hero-pagination .swiper-pagination-bullet {
    width: auto; height: auto; background: transparent; opacity: .5;
    color: #fff; border-radius: 0; font: inherit; margin: 0 !important;
}
.hero-pagination .swiper-pagination-bullet::before { content: attr(data-num); }
.hero-pagination .swiper-pagination-bullet-active { opacity: 1; border-bottom: 2px solid #2DBC83; padding-bottom: 2px; }

/* ---- 카드 그림자 ---- */
.shadow-card { box-shadow: 0 10px 30px rgba(16,35,26,.08); }

/* ---- 갤러리 캡션 ---- */
.gallery-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
    font-size: 14px; font-weight: 600; color: #fff;
    background: linear-gradient(to top, rgba(16,35,26,.85), transparent);
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.group:hover .gallery-cap { opacity: 1; transform: translateY(0); }

/* ---- 리프 탭 버튼 ---- */
.leaf-tab {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px; border-radius: 10px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-weight: 600; font-size: 15px; text-align: left;
    transition: background .2s, transform .2s;
}
.leaf-tab .num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 24px; border-radius: 999px;
    background: rgba(21,115,71,.85); color: #fff; font-size: 12px; font-weight: 700;
}
.leaf-tab:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.leaf-tab.is-active { background: #fff; color: #157347; }
.leaf-tab.is-active .num { background: #1FA463; }

/* ---- 라인 클램프 보조 ---- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- 그리드 최소폭 0 (CDN 버그 회피) ---- */
.grid > * { min-width: 0; }

/* ---- 모바일 안전: 가로 overflow 차단 ---- */
html, body { overflow-x: hidden; max-width: 100%; }

/* 리프 섹션 배경 (스크롤 동작 안정 위해 scroll 고정) */
.leaf-bg { background-attachment: scroll; }

/* select 옵션 가독성 (다크 배경 보정) */
#familySite option, #relatedSite option { color: #1B2A22; }