/* Template Dog Friendly Lodge - Common Styles */

/* CSS 커스텀 프로퍼티 (변수) 정의 */
:root {
    --brand-color-primary: rgb(96, 83, 71); /* 주요 브랜드 컬러 */
}

/* 전체 레이아웃 overflow 방지 */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    background-color: #f7f0e5; /* 부드러운 베이지색 배경 */
}

* {
    box-sizing: border-box;
}

/* 폰트 페이스 정의 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Miamo';
    src: url('../fonts/Miamo Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Miamo';
    src: url('../fonts/Miamo SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'Gyrotrope';
    src: url('../fonts/gyrotrope.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('../fonts/Cafe24Ssurround-v2.0.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24SsurroundAir';
    src: url('../fonts/Cafe24SsurroundAir-v1.1.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* 기본 폰트 설정 */
* {
    font-family: 'Lato', 'Pretendard', sans-serif;
}

/* data-property-name 요소 폰트 통일 */
/* 주석 처리 - 개별 스타일 허용
[data-property-name] {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
}
*/

/* 반응형 컨테이너 */
.responsive-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .responsive-container {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) {
    .responsive-container {
        padding: 0 3rem;
    }
}

/* 브랜드 로고 스타일 */
.brand-logo {
    font-family: 'Playfair Display', 'Noto Sans KR', serif;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.brand-logo .hero-logo-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.brand-logo .hero-logo-subtitle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* 히어로 텍스트 */
.hero-text {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.3px;
}

/* 영문 제목 폰트 (큰글씨/제목) */
.en-title {
    font-family: 'Miamo', 'Gyrotrope', 'Lato', serif;
    font-weight: 400;
}

/* 한글 제목 폰트 (큰글씨/제목) */
.ko-title {
    font-family: 'Cafe24SsurroundAir', 'Pretendard', sans-serif;
    font-weight: 400;
    letter-spacing: -0.5px;
}

/* 영문 본문 폰트 (작은글씨) */
.en-body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* 한글 본문 폰트 (작은글씨) */
.ko-body {
    font-family: 'Cafe24SsurroundAir', 'Pretendard', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

/* UI 요소 폰트 (헤더, 푸터, 버튼) */
.ui-font {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
}

/* 공통 애니메이션 */
.floating-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-4 { animation-delay: 0.4s; }

/* 스크롤 애니메이션 */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.scroll-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* 반응형 제목 크기 */
.responsive-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
}

.responsive-subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
}

@media (min-width: 768px) {
    .responsive-subtitle {
        font-size: 2.5rem;
        line-height: 3rem;
    }
}

@media (min-width: 1024px) {
    .responsive-subtitle {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

/* Empty Image Placeholder Styles - 모든 페이지 공통 */

/* img 태그에 적용되는 empty placeholder */
img.empty-image-placeholder {
    border: 2px dashed #9ca3af;
    border-radius: 0.75rem;
    /* background 제거 - SVG 이미지가 보이도록 */
    min-height: 20rem;
    display: block;
    width: 100%;
    object-fit: cover;
    opacity: 0.8;
    position: relative;
}

/* img 태그용 아이콘 */
img.empty-image-placeholder::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect x='0' y='0' width='96' height='96' rx='8' ry='8' fill='none' stroke='%23374151' stroke-width='3'/%3E%3Ccircle cx='28' cy='28' r='6' fill='%23374151'/%3E%3Cpolyline points='96,84 68,56 0,84' fill='none' stroke='%23374151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3 !important; /* SVG 아이콘을 가장 위에 표시 */
}

/* 깨진 이미지 아이콘 숨기기 - 모든 페이지 공통 */
img.empty-image-placeholder {
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    /* 깨진 이미지 아이콘 완전히 숨기기 */
    font-family: monospace !important;
    line-height: 0 !important;
    text-shadow: none !important;
    background-color: transparent !important;
}

/* 깨진 이미지 아이콘을 완전히 덮는 배경 추가 - 모든 페이지 공통 */
img.empty-image-placeholder::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* 깨진 이미지 완전히 덮기 */
    background: #d1d5db !important;
    border: 2px dashed #9ca3af !important;
    z-index: 1 !important; /* 깨진 이미지 위에 표시 */
}

/* 브라우저별 깨진 이미지 아이콘 숨기기 */
img.empty-image-placeholder {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    pointer-events: none !important;
}

img.empty-image-placeholder::-moz-broken {
    -moz-force-broken-image-icon: 0 !important;
}

/* background-image가 있는 div 요소들에 적용되는 empty placeholder */
.empty-image-placeholder {
    border: 2px dashed #9ca3af !important;
    border-radius: 0.75rem !important;
    background: #d1d5db !important;
    background-color: #d1d5db !important;
    opacity: 0.8 !important;
    position: relative;
    min-height: 200px;
}

/* background-image 요소들에 아이콘 추가 */
.empty-image-placeholder::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect x='0' y='0' width='96' height='96' rx='8' ry='8' fill='none' stroke='%23374151' stroke-width='3'/%3E%3Ccircle cx='28' cy='28' r='6' fill='%23374151'/%3E%3Cpolyline points='96,84 68,56 0,84' fill='none' stroke='%23374151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

/* 빈 이미지 깜빡임 방지 - src가 비어있거나 없는 이미지 완전히 숨김 */
img[src=""],
img:not([src]) {
    display: none !important;
}

/* Wave Banner Section Styles - 공통 스타일 */
.wave-bg-section {
    position: relative;
    overflow: hidden;
    margin-bottom: 0; /* Remove bottom margin */
}

.wave-bg {
    position: relative;
    width: 100%;
    height: 800px; /* Increased from 650px */
}

@media (max-width: 768px) {
    .wave-bg {
        height: 550px; /* Increased from 450px */
    }

    .wave-bg-section {
        margin-bottom: 0; /* Remove bottom margin on mobile */
    }

    .wave-bg-section .absolute {
        clip-path: url(#wave-clip-mobile);
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
    }

    .banner-title {
        font-size: 2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .banner-description {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    /* 모바일에서 히어로 섹션 제목 중앙 정렬 */
    #section1 .absolute.bottom-8 {
        left: 50% !important;
        transform: translateX(-50%);
        text-align: center;
    }

    #section1 .absolute.bottom-8 h1 {
        text-align: center !important;
    }

    #section1 .absolute.bottom-8 div[class*="w-["] {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Wave Banner Animations */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.animate-fade-in-up-delay-1 {
    animation: fadeInUp 1s ease-out 1s forwards;
}

.animate-fade-in-up-delay-2 {
    animation: fadeInUp 1s ease-out 1.5s forwards;
}

.banner-content {
    position: relative;
}

.banner-content h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-content h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================================================ */
/* 공통 애니메이션 클래스 */
/* ============================================================================ */

/* Slide-in animations */
.slide-in-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease-out;
}

.slide-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
}

.slide-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-line {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 1.2s ease-out;
}

.slide-in-line.animate {
    opacity: 1;
    transform: scaleX(1);
}

/* Fade animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.fade-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scale {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-in-scale.animate {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.fade-in-line {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.fade-in-line.animate {
    opacity: 1;
    transform: translateY(0);
}

/* About Section Styles - Moved from main.css for reuse in multiple pages */
.main-image-container {
    position: relative;
}

.main-image-wrapper {
    position: relative;
    overflow: visible;
}

.main-image-wrapper img {
    border-radius: 0 0 0 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: translateY(0);
    transition: all 1.5s ease-out;
}

.main-image-wrapper.fade-in-scale.animate img {
    opacity: 1;
    transform: translateY(0);
}

.main-image-wrapper img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.about2-section .main-image-wrapper.fade-in-scale.animate img {
    opacity: 1;
    transform: translateY(0);
}

/* Main page specific placeholder override - 크기와 고정 border-radius */
.main-image-wrapper img.empty-image-placeholder {
    /* 모바일 기본 크기 */
    width: 300px !important;
    height: 240px !important;
    min-height: auto !important;
    /* 고정된 대각선 둥근 모서리 */
    border-radius: 60px 0 60px 0 !important;
}

/* 반응형 크기 유지 */
@media (min-width: 768px) {
    .main-image-wrapper img.empty-image-placeholder {
        width: 500px !important;
        height: 20rem !important; /* h-80 = 20rem */
        border-radius: 80px 0 80px 0 !important;
    }
}

@media (min-width: 1024px) {
    .main-image-wrapper img.empty-image-placeholder {
        width: 700px !important;
        height: 24rem !important; /* h-96 = 24rem */
        border-radius: 120px 0 120px 0 !important;
    }
}

@media (min-width: 1280px) {
    .main-image-wrapper img.empty-image-placeholder {
        width: 900px !important;
        height: 400px !important; /* h-[400px] */
        border-radius: 120px 0 120px 0 !important;
    }
}

/* About2 Section Empty Placeholder - about2 섹션 placeholder 스타일 */
.about2-section .main-image-wrapper img.empty-image-placeholder {
    border-radius: 0 60px 0 60px !important;
}

@media (min-width: 768px) {
    .about2-section .main-image-wrapper img.empty-image-placeholder {
        border-radius: 0 80px 0 80px !important;
    }
}

@media (min-width: 1024px) {
    .about2-section .main-image-wrapper img.empty-image-placeholder {
        border-radius: 0 120px 0 120px !important;
    }
}

/* Border-radius animations for main.html and reservation.html about-sections */
/* Main.html용 about 섹션 - 대각선 둥근 모서리 애니메이션 */
.about-section .main-image-wrapper img {
    animation: alternatingCorners 8s ease-in-out infinite;
}

/* About2 섹션 - 반대 대각선 애니메이션 */
.about2-section .main-image-wrapper img {
    animation: alternatingCornersReverse 8s ease-in-out infinite;
}

/* 대각선 둥근 모서리 애니메이션 키프레임 */
@keyframes alternatingCorners {
    0%, 100% {
        border-radius: 60px 0 60px 0;
    }
    25% {
        border-radius: 0 60px 0 60px;
    }
    50% {
        border-radius: 60px 0 60px 0;
    }
    75% {
        border-radius: 0 60px 0 60px;
    }
}

/* 반대 대각선 애니메이션 */
@keyframes alternatingCornersReverse {
    0%, 100% {
        border-radius: 0 60px 0 60px;
    }
    25% {
        border-radius: 60px 0 60px 0;
    }
    50% {
        border-radius: 0 60px 0 60px;
    }
    75% {
        border-radius: 60px 0 60px 0;
    }
}

/* 반응형 애니메이션 - 768px 이상 */
@media (min-width: 768px) {
    @keyframes alternatingCorners {
        0%, 100% {
            border-radius: 80px 0 80px 0;
        }
        25% {
            border-radius: 0 80px 0 80px;
        }
        50% {
            border-radius: 80px 0 80px 0;
        }
        75% {
            border-radius: 0 80px 0 80px;
        }
    }

    @keyframes alternatingCornersReverse {
        0%, 100% {
            border-radius: 0 80px 0 80px;
        }
        25% {
            border-radius: 80px 0 80px 0;
        }
        50% {
            border-radius: 0 80px 0 80px;
        }
        75% {
            border-radius: 80px 0 80px 0;
        }
    }
}

/* 반응형 애니메이션 - 1024px 이상 */
@media (min-width: 1024px) {
    @keyframes alternatingCorners {
        0%, 100% {
            border-radius: 120px 0 120px 0;
        }
        25% {
            border-radius: 0 120px 0 120px;
        }
        50% {
            border-radius: 120px 0 120px 0;
        }
        75% {
            border-radius: 0 120px 0 120px;
        }
    }

    @keyframes alternatingCornersReverse {
        0%, 100% {
            border-radius: 0 120px 0 120px;
        }
        25% {
            border-radius: 120px 0 120px 0;
        }
        50% {
            border-radius: 0 120px 0 120px;
        }
        75% {
            border-radius: 120px 0 120px 0;
        }
    }
}

/* Hero Section 모바일 대응 - 이미지 비율 유지 (모든 페이지 공통) */
@media (max-width: 768px) {
    #section1 {
        height: 60vh !important;
        min-height: 60vh !important;
    }

    #hero-image-container {
        position: relative !important;
        height: 60vh !important;
        min-height: 60vh !important;
    }

    #hero-image-container img {
        position: relative !important;
        width: 100% !important;
        height: 60vh !important;
        min-height: 60vh !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* 텍스트 오버레이 중앙 정렬 */
    #section1 .absolute.bottom-8 {
        position: absolute !important;
        bottom: 2rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }

    /* 그라데이션 오버레이도 조정 */
    #section1 .bg-gradient-to-t {
        position: absolute !important;
        inset: 0 !important;
    }
}