@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* 기본 레이아웃 기본값 정의 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; background-color: #000000; color: #ffffff; line-height: 1.7; overflow-x: hidden; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 네비게이션 바 */
.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 70px; display: flex; align-items: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.nav-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: 4px; color: #fff; }

/* 🎬 대문 배경 및 가독성 확보 스타일 */
.hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #000; overflow: hidden; }
.hero-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-image-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; /* 강아지 선명도를 높이되 은은하게 설정 */ }

/* 🌟 중요: 숲속 사진 위에 검은 그라데이션 커튼을 쳐서 글씨 가독성 완벽 확보 */
.hero-image-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

.hero-section .container { position: relative; z-index: 2; color: #ffffff; }
.brand-sub { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 5px; color: #fff; margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.brand-title { font-family: 'Montserrat', sans-serif; font-size: 56px; font-weight: 900; letter-spacing: 14px; margin-bottom: 24px; text-shadow: 0 4px 15px rgba(0,0,0,0.8); }
.brand-desc { font-size: 16px; font-weight: 300; max-width: 700px; margin: 0 auto 40px auto; color: rgba(255,255,255,0.9); word-break: keep-all; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }

/* 와디즈 버튼 */
.btn-main { display: inline-block; background-color: #ffffff; color: #000000; padding: 16px 48px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255,255,255,0.1); }
.btn-main:hover { background-color: #e5e5e5; transform: translateY(-2px); }

/* 콘텐츠 섹션 공통 */
.fullscreen-section { min-height: 100vh; display: flex; align-items: center; }
.normal-section { padding: 140px 0; background-color: #0b0b0b; }
.section-badge { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 6px 16px; border-radius: 4px; margin-bottom: 24px; text-transform: uppercase; }
.section-title { font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; margin-bottom: 60px; }

/* 모듈러 그리드 레이아웃 */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 20px; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card { background: #121212; padding: 40px 30px; border-radius: 8px; border: 1px solid #1f1f1f; transition: all 0.4s ease; }
.why-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-5px); }
.why-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #fff; }
.why-card p { font-size: 14px; color: #888; font-weight: 300; text-align: justify; line-height: 1.6; }

/* 파츠 레이아웃 */
.part-section { background-color: #000000; border-bottom: 1px solid #111; }
.part-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 768px) { .part-layout { grid-template-columns: 1fr 1fr; } }
.part-text-box { padding-right: 40px; }
.part-text-box h3 { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; }
.part-benefit { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 20px; }
.part-desc { font-size: 15px; color: #888; font-weight: 300; word-break: keep-all; }
.part-img-box { width: 100%; height: 450px; background: #111; border-radius: 8px; overflow: hidden; border: 1px solid #222; }
.part-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* 퓨처 비전 프로필 */
.profile-section { background-color: #0b0b0b; }
.profile-box { max-width: 800px; margin: 0 auto; text-align: center; }
.profile-box h2 { font-size: 32px; font-weight: 700; margin-bottom: 32px; letter-spacing: -0.5px; }
.profile-text { font-size: 16px; color: #aaa; font-weight: 300; line-height: 1.8; margin-bottom: 40px; word-break: keep-all; }
.expert-badge { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.4); }

/* 하단 */
.footer { background: #000; padding: 40px 0; text-align: center; border-top: 1px solid #111; }
.footer p { font-size: 13px; color: #555; font-family: 'Montserrat', sans-serif; }

/* ✨ 스크롤 인터랙션 하이엔드 애니메이션 스타일 */
.scroll-trigger { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-trigger.is-active { opacity: 1; transform: translateY(0); }
.fade-element { opacity: 0; transform: translateY(20px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-trigger.is-active .fade-element { opacity: 1; transform: translateY(0); }
/* 순차 딜레이 부여 */
.scroll-trigger.is-active .why-card:nth-child(1) { transition-delay: 0.1s; }
.scroll-trigger.is-active .why-card:nth-child(2) { transition-delay: 0.2s; }
.scroll-trigger.is-active .why-card:nth-child(3) { transition-delay: 0.3s; }
.scroll-trigger.is-active .why-card:nth-child(4) { transition-delay: 0.4s; }