/* =======================================================
   style.css: Cosmos Hiker Custom Styles
   역할: Tailwind CSS로 커버되지 않는 커스텀 스타일 및 애니메이션 정의
   ======================================================= */


/* --- 1. 배경 및 애니메이션 --- */

/* 1.1. 전체 페이지 배경 이미지 설정 (body 태그에 적용) 섹션은 제거되었습니다. */


/* 1.2. 히어로 섹션 배경 이미지 설정 */
/* 메인 헤더 영역(Hero Section)에만 배경 이미지를 적용하는 코드입니다. */
#hero-section {
    /* 수직 중앙 정렬 개선: 화면 전체 높이(100vh)를 차지하도록 설정하여, 네비게이션 바 높이의 영향을 상쇄하고 시각적 중앙에 위치시킵니다. */
    min-height: 50vh;

    background-image: url('web_images/prague_tram_watercolor_crop.png');
    background-size: cover;
    /* 이미지가 컨테이너를 가득 채우도록 */
    background-position: center;
    /* 이미지가 중앙에 오도록 */
    /* background-attachment: fixed; */
    /* 이 컨테이너에서는 fixed 대신 스크롤 되도록 주석 처리 */
    background-color: #f0f0f0;
    /* 이미지가 로드되지 않을 경우 대비 색상 */
}


/* 상세 보기 로드 시 부드러운 애니메이션 효과 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


/* --- 2. Ghost CMS 컨텐츠 스타일링 (.gh-content) --- */

/* 콘텐츠 기본 설정 */
.gh-content {
    color: #374151;
    line-height: 1.8;
}

.gh-content p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* 제목 태그 스타일 */
.gh-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #111;
    font-family: 'Playfair Display', serif;
}

.gh-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
    font-family: 'Playfair Display', serif;
}

/* 링크 스타일 */
.gh-content a {
    color: #3b82f6;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 인용구 스타일 */
.gh-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* 이미지 스타일 */
.gh-content img {
    border-radius: 0.75rem;
    margin: 2.5rem auto;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}