/* ===================================================================
   styles.css - STAYFOLIO 메인 페이지 스타일시트
   ===================================================================
   메인 페이지(index.html)의 모든 스타일 정의
   - 네비게이션 바
   - 히어로 슬라이더
   - 검색 바
   - 카테고리 필터
   - 숙소 목록
   - 매거진
   - 푸터
   =================================================================== */

/* ===================================================================
   글로벌 스타일 (전체 페이지 공통)
   =================================================================== */

/* 모든 요소의 기본 여백과 패딩 제거, box-sizing 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* padding과 border를 width에 포함 */
}

/* body 기본 스타일 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #fafafa;  /* 연한 회색 배경 */
    color: #0a0a0a;             /* 거의 검은색 텍스트 */
}

/* 컨테이너 (콘텐츠 최대 너비 제한) */
.container {
    max-width: 1280px;    /* 최대 너비 */
    margin: 0 auto;       /* 중앙 정렬 */
    padding: 0 1.5rem;    /* 좌우 여백 */
}

/* ===================================================================
   히어로 슬라이더
   =================================================================== */

/* 슬라이더 컨테이너 */
.hero-slider {
    position: relative;
    height: 100vh;  /* 뷰포트 전체 높이 */
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 개별 슬라이드 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;  /* 기본적으로 숨김 */
    transition: opacity 1s ease;  /* 부드러운 페이드 효과 */
}

/* 활성화된 슬라이드 */
.slide.active {
    opacity: 1;  /* 표시 */
}

/* 슬라이드 오버레이 (이미지를 어둡게) */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);  /* 반투명 검은색 */
    z-index: 1;
}

/* 슬라이드 이미지 */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 비율 유지하며 영역 채우기 */
}

/* 슬라이드 콘텐츠 (텍스트와 버튼) */
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 정확한 중앙 정렬 */
    text-align: center;
    color: white;
    z-index: 2;  /* 오버레이 위에 표시 */
    width: 100%;
    padding: 0 1rem;
}

/* 슬라이드 부제목 */
.slide-subtitle {
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;  /* 대문자 변환 */
    opacity: 0.9;
    margin-bottom: 1rem;
}

/* 슬라이드 제목 */
.slide-title {
    font-size: 3.0rem;
    font-weight: 300;
    letter-spacing: -0.02em;  /* 약간 좁은 글자 간격 */
    margin-bottom: 2rem;
}

/* 둘러보기 버튼 */
.explore-btn {
    background: white;
    color: #0a0a0a;
    padding: 1rem 2rem;
    border-radius: 9999px;
    border: none;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease;
}

.explore-btn:hover {
    background: #f5f5f5;
}

/* 슬라이더 이전/다음 버튼 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 9999px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slider-btn.prev {
    left: 2rem;
}

.slider-btn.next {
    right: 2rem;
}

/* 슬라이더 도트 인디케이터 */
.slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

/* 개별 도트 */
.slider-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 활성화된 도트 */
.slider-dot.active {
    width: 32px;  /* 가로로 길게 */
    background: white;
}

/* ===================================================================
   검색 바 섹션
   =================================================================== */

.search-section {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
    margin-top: -2rem;  /* 슬라이더와 겹치게 */
}

/* 검색 바 컨테이너 */
.search-container {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);  /* 큰 그림자 */
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 반응형 그리드 */
    gap: 1rem;
}

/* 검색 필드 */
.search-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 검색 필드 레이블 */
.search-field label {
    font-size: 0.75rem;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 입력 필드 래퍼 */
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 아이콘 색상 */
.input-wrapper svg {
    color: #a3a3a3;
    flex-shrink: 0;  /* 줄어들지 않음 */
}

/* 입력 필드 */
.input-wrapper input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.875rem;
}

/* 검색 버튼 */
.search-btn {
    background: #0a0a0a;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.75rem;
    border: none;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: end;  /* 하단 정렬 */
}

.search-btn:hover {
    background: #262626;
}

/* ===================================================================
   카테고리 필터
   =================================================================== */

.categories {
    padding: 4rem 0;
}

/* 카테고리 버튼 컨테이너 */
.category-filters {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;  /* 가로 스크롤 허용 */
    padding-bottom: 0.5rem;
}

/* 개별 카테고리 버튼 */
.category-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    white-space: nowrap;  /* 줄바꿈 방지 */
    background: white;
    color: #525252;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background: #f5f5f5;
}

/* 선택된 카테고리 버튼 */
.category-btn.active {
    background: #0a0a0a;
    color: white;
}

/* ===================================================================
   숙소 목록
   =================================================================== */

.properties {
    padding-bottom: 5rem;
}

/* 숙소 그리드 */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));  /* 반응형 그리드 */
    gap: 2rem;
}

/* 숙소 카드 */
.property-card {
    cursor: pointer;
}

/* 숙소 이미지 컨테이너 */
.property-image {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 4/3;  /* 4:3 비율 유지 */
    margin-bottom: 1rem;
}

/* 숙소 이미지 */
.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;  /* 부드러운 확대 효과 */
}

/* 카드 호버 시 이미지 확대 */
.property-card:hover .property-image img {
    transform: scale(1.1);  /* 1.1배 확대 */
}

/* 좋아요 버튼 */
.like-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.like-btn:hover {
    background: white;
}

/* 좋아요 아이콘 */
.like-btn svg {
    width: 20px;
    height: 20px;
    stroke: #404040;
    fill: none;
    transition: all 0.3s ease;
}

/* 좋아요 활성화 상태 */
.like-btn.liked svg {
    fill: #f43f5e;  /* 분홍색으로 채움 */
    stroke: #f43f5e;
}

/* 숙소 정보 영역 */
.property-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 숙소 헤더 (제목과 별점) */
.property-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 숙소 제목 */
.property-title {
    font-size: 1.125rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.property-card:hover .property-title {
    color: #525252;
}

/* 별점 표시 */
.property-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.property-rating svg {
    width: 16px;
    height: 16px;
    fill: #0a0a0a;
}

.property-rating span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* 위치 정보 */
.property-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #737373;
}

.property-location svg {
    width: 16px;
    height: 16px;
}

/* 가격 정보 */
.property-price {
    padding-top: 0.25rem;
}

.property-price .amount {
    font-size: 1.25rem;
    font-weight: 600;
}

.property-price .period {
    font-size: 0.875rem;
    color: #737373;
}

/* ===================================================================
   매거진 섹션
   =================================================================== */

.magazine {
    background: white;
    padding: 6rem 0;
}

/* 매거진 헤더 */
.magazine-header {
    text-align: center;
    margin-bottom: 4rem;
}

.magazine-label {
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #737373;
    margin-bottom: 0.75rem;
}

.magazine-title {
    font-size: 2.25rem;
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* 매거진 그리드 */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

/* 매거진 아이템 */
.magazine-item {
    cursor: pointer;
}

/* 매거진 이미지 */
.magazine-image {
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 1rem;
}

.magazine-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.magazine-item:hover .magazine-image img {
    transform: scale(1.1);
}

.magazine-item h3 {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.magazine-item p {
    font-size: 0.875rem;
    color: #737373;
}

/* ===================================================================
   푸터
   =================================================================== */

.footer {
    background: #171717;
    color: white;
    padding: 4rem 0;
}

/* 푸터 그리드 */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

/* 푸터 로고 */
.footer-logo {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.footer-desc {
    font-size: 0.875rem;
    color: #a3a3a3;
}

/* 푸터 컬럼 제목 */
.footer-col h4 {
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* 푸터 링크 목록 */
.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 푸터 링크 */
.footer-col a {
    font-size: 0.875rem;
    color: #a3a3a3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: white;
}

/* 푸터 하단 */
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #737373;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: #737373;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}