/* 기본 초기화 및 디자인 토큰(변수) 설정 */
:root {
    --bg-color: #FAF6F0;
    /* 따뜻하고 부드러운 오프화이트/크림색 (종이 느낌) */
    --text-primary: #4A4A4A;
    /* 눈이 편안한 짙은 그레이 (블랙보다 감성적) */
    --text-secondary: #8C8C8C;
    /* 서브 텍스트용 연한 그레이 */
    --accent-color: #D4A373;
    /* 차분한 베이지/브라운 포인트 컬러 */
    --rose-color: #E6A8A8;
    /* 하이라이트를 위한 뮤트 핑크 */
    --font-main: 'Noto Serif KR', serif;
    /* 명조체로 서정적인 무드 연출 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    /* 가로 스크롤 방지 */
    word-break: keep-all;
    /* 한국어 등에서 단어 단위로 줄바꿈 보장 */
    overflow-wrap: break-word;
    /* 긴 텍스트 줄바꿈 방지 */
}

/* =========================================
   공통: 스크롤 페이드인 애니메이션 클래스
========================================= */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    padding: 80px 20px;
    min-height: 100vh;
    /* 각 섹션이 화면을 가득 채우도록 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

.section-title {
    font-size: clamp(1.4rem, 4vw + 0.5rem, 1.8rem);
    /* 최소-유동-최대 화면크기 대응 */
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.section-desc {
    color: var(--text-secondary);
    font-size: clamp(0.85rem, 2vw + 0.5rem, 1rem);
    margin-bottom: 50px;
    text-align: center;
}

/* =========================================
   1. 히어로 섹션
========================================= */
#hero {
    /* 감성적인 배경 이미지 적용을 위한 코드. placeholder 이미지가 없으면 배경색 그라데이션이 보입니다. */
    background: linear-gradient(rgba(250, 246, 240, 0.4), rgba(250, 246, 240, 1)),
        url('./hero-placeholder.jpg') center/cover no-repeat;
    text-align: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-size: clamp(1.8rem, 6vw + 0.5rem, 2.5rem);
    font-weight: 500;
    margin-bottom: 12px;

    em {
        color: var(--rose-color);
        font-style: normal;
    }
}

.subtitle {
    font-size: clamp(0.95rem, 2.5vw + 0.5rem, 1.2rem);
    color: var(--text-secondary);
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.start-date {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
}

/* =========================================
   2. 추억 갤러리 섹션
========================================= */
.polaroid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 20px;
    /* 세로 간격을 조금 더 넓게 */
    padding: 10px;
    max-width: 100%;
}

.polaroid {
    background: white;
    padding: 12px 12px 45px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: rotate(var(--rotation));
    /* HTML 인라인 스타일에서 각도 받아옴 */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 42vw;
    /* 모바일에서 2개씩 배치되도록 설정 */
    max-width: 160px;
}

/* 스크롤하거나 터치할 때 자연스럽게 떠오르는 효과 */
.polaroid:hover,
.polaroid:active {
    transform: rotate(0deg) scale(1.05) translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.polaroid .photo {
    width: 100%;
    height: 42vw;
    /* 정사각형 비율 유지 */
    max-height: 160px;
    object-fit: cover;
    display: block;
}

.caption {
    text-align: center;
    margin-top: 18px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

/* =========================================
   3. 디지털 편지 섹션
========================================= */
#letter {
    justify-content: flex-start;
    padding-top: 120px;
    /* 중앙보다 살짝 위에서 시작하도록 */
}

.letter-content {
    width: 100%;
    max-width: 400px;
    line-height: 2.4;
    text-align: left;
    word-break: keep-all;
    padding: 0 15px;
}

.letter-line {
    margin-bottom: 12px;
    font-size: clamp(0.9rem, 2vw + 0.5rem, 1.05rem);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* 순차적 페이드인을 위한 기본 상태 (편지 뿐 아니라 다른 요소들도 활용) */
.hidden-line,
.hidden-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.visible-line,
.visible-item {
    opacity: 1;
    transform: translateY(0);
}

/* 폴라로이드는 고유의 회전(rotation) 값을 유지해야 하므로 Transform을 덮어씀 */
.polaroid.hidden-item {
    transform: translateY(20px) rotate(var(--rotation));
}

.polaroid.visible-item {
    transform: translateY(0) rotate(var(--rotation));
}

.signature {
    margin-top: 50px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-secondary);
}