@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --primary-color: #222222; /* 샌님 블랙 */
    --accent-color: #D94925;  /* 포인트 블루 */
    --bg-color: #F9F9F9;      /* 연회색 배경 */
    --white: #FFFFFF;
    --nav-height: 70px;
    --store-color: #03C75A;   /* 네이버 그린 */
}

/* 기본 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body { background-color: var(--bg-color); color: var(--primary-color); line-height: 1.6; padding-top: var(--nav-height); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* 1. 상단 네비게이션 */
header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
    background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid #E0E0E0;
    z-index: 1000; backdrop-filter: blur(5px);
}
.nav-container {
    max-width: 1200px; margin: 0 auto; height: 100%;
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
}
/* 1. 로고 전체(이미지+글자)를 감싸는 틀 - 새로 추가 */
.logo { 
    display: flex;         /* 이미지와 글자를 가로로 나란히 */
    align-items: center;   /* 이미지와 글자의 높이 중앙 맞춤 */
    gap: 12px;             /* 이미지와 글자 사이 간격 */
    text-decoration: none; /* 글자 밑줄 제거 */
}

/* 2. 로고 이미지 - 기존 내용을 유지하며 틀에 맞춤 */
.logo-img { 
    height: 40px; 
    width: auto; 
    display: block; 
}

/* 3. 로고 옆에 새로 생길 글자 스타일 - 새로 추가 */
.logo-text { 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--primary-color); 
    letter-spacing: -1px; 
}
html {
    /* 스크롤바가 없어도 항상 스크롤바 자리를 확보하여 메인과 정렬 기준을 맞춤 */
    overflow-y: scroll;
}
.nav-menu { display: flex; gap: 40px; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link { font-size: 16px; font-weight: 600; color: #666; transition: color 0.3s; padding: 10px 0; }
.nav-link:hover { color: var(--primary-color); }

/* 드롭다운 */
.dropdown {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    background: var(--white); border: 1px solid #E0E0E0;
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 180px; opacity: 0; visibility: hidden; transition: all 0.3s;
    padding: 10px 0; display: flex; flex-direction: column;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; top: 50px; }
.dropdown a { padding: 12px 20px; font-size: 14px; color: #666; text-align: center; }
.dropdown a:hover { background-color: #f5f5f5; color: var(--primary-color); }

/* 2. 섹션 공통 */
section { max-width: 1200px; margin: 0 auto; padding: 100px 20px; }
.section-title { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 40px; letter-spacing: -1px; }
.section-desc { text-align: center; color: #666; margin-bottom: 60px; font-size: 18px; }

/* 3. 히어로 섹션 (캐릭터 배치용 Flex) */
.hero-container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; max-width: 1000px; margin: 0 auto;
}
.hero-text { flex: 1; text-align: left; }
.hero-text h1 { font-size: 48px; font-weight: 800; margin-bottom: 24px; line-height: 1.2; }
.hero-text p { font-size: 18px; color: #555; margin-bottom: 40px; }
.hero-img { flex: 1; max-width: 400px; animation: float 3s ease-in-out infinite; }

/* 둥둥 떠있는 애니메이션 효과 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 4. 버튼 & 카드 */
.btn {
    display: inline-block; padding: 16px 48px; border-radius: 50px;
    font-weight: 700; font-size: 18px; transition: all 0.2s; cursor: pointer; text-align: center;
}
.btn-primary { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); }
.btn-primary:hover { background-color: #000; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-store { background-color: var(--store-color); color: var(--white); width: 100%; border-radius: 8px; font-size: 16px; padding: 14px; }
.btn-store:hover { background-color: #02b351; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card {
    background: var(--white); border-radius: 20px; padding: 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04); transition: transform 0.3s; cursor: pointer;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.card h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; margin-top: 10px; }
.card p { color: #666; font-size: 16px; line-height: 1.6; }

/* 태그 스타일 */
.tag { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; display: inline-block; }
.tag.popular { background: #E8F3FF; color: #4A90E2; }
.tag.new { background: #E9F7EF; color: #03C75A; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .hero-container { flex-direction: column-reverse; text-align: center; }
    .hero-text { text-align: center; }
    .hero-img { max-width: 250px; margin-bottom: 20px; }
    .nav-menu { display: none; } /* 추후 햄버거 메뉴 추가 */
}

footer { text-align: center; padding: 60px 0; color: #999; font-size: 14px; border-top: 1px solid #eee; background: #fff; }

/* ... (기존 CSS 코드 유지) ... */

/* [다이어트 버전] 부담 없는 사이즈로 조정 */
.slider-section {
    background-color: #F7F7F7;
    padding: 60px 0; /* 상하 여백도 조금 줄여서 컴팩트하게 */
    overflow: hidden;
}

.slider-track {
    display: flex;
    /* (가로 280px + 마진 20px) * 10장 = 3000px */
    width: 3000px; 
    animation: scroll 35s linear infinite; /* 사이즈가 작아졌으니 속도도 약간 올림 */
}

.slide {
    flex: 0 0 280px; /* 강제 고정 */
    width: 280px;
    height: 405px;   /* 702:1016 비율을 유지한 축소값 */
    margin: 0 10px;  /* 이미지 사이 간격 20px (좌우 각 10px) */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 애니메이션 리셋 지점: (280 + 20) * 5장 = 1500px */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1500px); } 
}

/* 단어 단위 줄바꿈 방지 */
.keep-all {
    word-break: keep-all;
    overflow-wrap: break-word; /* 안전장치 */
}

/* 기본적으로 모바일 줄바꿈은 숨김 (PC 버전) */
.mobile-br {
    display: none;
}

/* 모바일 화면(768px 이하)에서 설정 */
@media (max-width: 768px) {
    .mobile-br {
        display: block; /* 모바일에서만 줄바꿈 활성화 */
    }
    
    .hero-text h1 {
        font-size: 1.5rem; /* 모바일에서 글자가 너무 크면 줄바꿈 빈도가 높아지므로 살짝 축소 */
        line-height: 1.4;  /* 줄 간격을 여유 있게 주어 가독성 확보 */
    }
}

/* ... (기존 CSS 내용 유지) ... */

/* [분석 페이지 전용] 강제 2열 배치 스타일 */
.grid-2-col {
    grid-template-columns: 1fr 1fr !important; /* 화면이 넓어도 무조건 2개씩 */
    max-width: 1000px; /* 카드가 너무 퍼지지 않게 전체 폭 제한 */
    margin: 0 auto;
}

/* 카드 내 이미지 영역 스타일 */
.card-img-wrapper {
    width: 100%;
    height: 250px; /* 이미지 높이 통일 (조절 가능) */
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #eee;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 박스를 꽉 채움 */
    object-position: top; /* 이미지의 윗부분을 우선적으로 보여줌 */
}

/* 모바일 대응: 모바일에서는 1줄로 변경 */
@media (max-width: 768px) {
    .grid-2-col {
        grid-template-columns: 1fr !important; /* 모바일은 1개씩 */
    }
}

/* ========================================= */
/* [분석 페이지 전용] 이미지 자동 조절 시스템 */
/* ========================================= */

/* 1. 레이아웃: PC에서는 무조건 2열, 최대 폭 1200px 유지 */
.grid-2-col {
    grid-template-columns: 1fr 1fr !important; 
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. 이미지 액자(프레임): 높이를 고정하여 모바일 일렁임 방지 */
.card-img-wrapper {
    width: 100%;
    height: 300px; /* PC/모바일 모두 300px 높이로 고정 (필요시 숫자 조절) */
    background: #f8f9fa; /* 이미지가 닿지 않는 여백은 깔끔한 연회색 처리 */
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #eee;
    
    /* 이미지를 중앙에 예쁘게 놓기 위한 플렉스 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. 이미지: 비율 유지하며 액자 안에 쏙 들어가게 (짤림 없음) */
.card-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;     /* 강제 늘림 방지 */
    height: auto;    /* 강제 늘림 방지 */
    object-fit: contain; /* 핵심: 비율 유지하며 전체 표시 */
}

/* 4. 모바일 대응: 작은 화면에서는 한 줄에 1개씩 */
@media (max-width: 768px) {
    .grid-2-col {
        grid-template-columns: 1fr !important; /* 모바일은 1열 */
    }
    
    /* 모바일에서 액자가 너무 크면 조금 줄임 (선택 사항) */
    .card-img-wrapper {
        height: 250px; 
    }
}

/* ========================================= */
/* [분석 페이지 전용] 버튼 색상 및 여백 조정 */
/* ========================================= */

/* 공통 버튼 여백 조정: 설명 글과 버튼 사이를 넉넉하게 띄움 */
.btn-store {
    margin-top: 30px !important; /* 기존보다 훨씬 넓어진 여백 */
    display: block; /* 버튼이 한 줄을 다 차지하도록 */
}

/* 1. 신년운세 (오렌지) */
.btn-year {
    background-color: #FD6F22 !important;
    border: 1px solid #FD6F22 !important;
}
.btn-year:hover {
    background-color: #e55e1b !important; /* 마우스 올렸을 때 살짝 진해짐 */
}

/* 2. 결혼운 (레드) */
.btn-wedding {
    background-color: #ED1C24 !important;
    border: 1px solid #ED1C24 !important;
}
.btn-wedding:hover {
    background-color: #d0181f !important;
}

/* 3. 궁합 (핑크/마젠타) */
.btn-couple {
    background-color: #F92484 !important;
    border: 1px solid #F92484 !important;
}
.btn-couple:hover {
    background-color: #d61c6f !important;
}

/* ========================================= */
/* [분석 페이지] 2버튼 시스템 & 준비중 카드 스타일 */
/* ========================================= */

/* 버튼 그룹: 위아래 간격 조정 */
.btn-group {
    margin-top: 30px;
    display: flex;
    flex-direction: column; /* 위아래로 쌓음 */
    gap: 10px; /* 버튼 사이 간격 */
}

/* 기본 버튼 (온라인) 스타일 재정의 */
.btn-store {
    margin-top: 0 !important; /* 그룹 안에서는 개별 마진 제거 */
    width: 100%;
    text-align: center;
}

/* 배송 버튼 (Outline 스타일) - 배경색 없이 테두리만 */
.btn-outline {
    background-color: transparent !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
}
/* 마우스 올렸을 때 */
.btn-outline:hover {
    background-color: #f9f9f9 !important;
    color: #333 !important;
    border-color: #ccc !important;
}


/* [테마별 배송 버튼 색상 포인트] */

/* 신년운세 (오렌지) */
.btn-year.btn-outline { color: #FD6F22 !important; border-color: #FD6F22 !important; }
.btn-year.btn-outline:hover { background-color: #fff5f0 !important; }

/* 결혼운 (레드) */
.btn-wedding.btn-outline { color: #ED1C24 !important; border-color: #ED1C24 !important; }
.btn-wedding.btn-outline:hover { background-color: #fdf0f1 !important; }

/* 궁합 (핑크) */
.btn-couple.btn-outline { color: #F92484 !important; border-color: #F92484 !important; }
.btn-couple.btn-outline:hover { background-color: #fdf0f5 !important; }


/* [준비중 카드 스타일] */
.coming-soon {
    opacity: 0.7;
    pointer-events: none; /* 클릭 방지 */
    background-color: #f9f9f9;
}
.btn-disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    cursor: not-allowed;
}