/* 1. 기본 초기화 및 폰트 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Nanum Myeongjo', serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* 2. 풀페이지 스냅 컨테이너 */
.container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

.container::-webkit-scrollbar {
    display: none;
}

/* 3. 섹션 공통 스타일 */
section {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

/* 4. 섹션 1: 히어로 (메인) */
#hero {
    background: url('assets/hero_bg.jpg') no-repeat center/cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px;
}

.logo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 90px;
    pointer-events: none;
}

.main-logo-text {
    font-family: 'Digital-7 Mono', sans-serif;
    font-size: 1.72rem;
    color: #F47A20;
    line-height: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    letter-spacing: -0.02em;
    text-shadow: 0 0 10px rgba(244, 122, 32, 0.4);
}

.logo-subtitle {
    font-size: 0.52rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
    margin-top: 2px;
    color: #F47A20;
    opacity: 0.5;
}

.text-content.bottom-left {
    text-align: left;
    margin-bottom: 25vh;
    margin-left: 10%;
}

.sub-text-korean {
    font-size: 0.9rem;
    opacity: 0.5;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.main-title-english {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.5;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-left: 5.5rem;
}

/* 5. 섹션 공통 분할 레이아웃 (액자 스타일) */
.split-layout {
    display: flex;
    width: 100%;
    height: 100%;
}

.split-layout.reverse {
    flex-direction: row-reverse;
}

.image-container {
    flex: 1;
    padding: 60px;
    display: flex;
}

.image-area {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.text-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 100px 5% 0 5%;
}

/* 6. 타이틀 스타일 */
.creative-title {
    line-height: 0.7;
    margin-bottom: 60px;
    text-align: center;
}

.serif-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    display: block;
}

.brush-text {
    font-family: 'Caveat', cursive;
    font-size: 2.2rem;
    margin-top: -5px;
    display: block;
}

/* 7. 텍스트 정보 박스 */
.info-wrapper {
    width: 100%;
    max-width: 400px;
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    transform: translateY(-50px);
}

.desc-group p {
    font-size: 1.1rem;
    line-height: 2.2;
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: 15px;
}

/* Section 3 Book Info Override */
#book .desc-group p {
    font-size: 0.66rem;
    margin-bottom: 0;
}

/* Section 2 (Workspace) 텍스트 개별 조정 (데스크탑) */
#workspace .desc-group {
    margin-top: 90px;
    /* 데스크탑에서는 여백 유지 */
    text-align: center;
    width: 100%;
}

#workspace .desc-group p {
    font-size: 0.77rem;
}

/* 8. 구매 버튼 스타일 (Section 3) - 위치 조정 (데스크탑) */
.purchase-group {
    margin-top: 130px;
    /* 데스크탑에서는 여백 크게 유지 */
}

.purchase-title {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 15px;
    font-weight: 700;
}

.shop-btns {
    display: flex;
    gap: 10px;
}

.shop-btn {
    background: #000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.75rem;
    transition: 0.3s;
}

#book .shop-btn {
    background: #332F2C;
}

.shop-btn:hover {
    opacity: 0.8;
}

/* 9. Contact 디테일 (Section 4) */
.contact-item {
    margin-bottom: 30px;
}

.label {
    font-weight: 700;
    opacity: 0.5;
    margin-right: 10px;
}

/* Desktop: 하단 중앙 고정 (사용자 요청 3번 해결) */
.collab-tag {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    opacity: 0.5;
    margin: 0;
    /* 마진 제거 중요 */
    text-transform: uppercase;
    width: auto;
    /* 너비 자동 */
}

/* 10. 각 섹션 배경 및 이미지 */
#workspace {
    background-color: #332F2C;
}

#workspace .image-area {
    background-image: url('assets/workspace_bg.jpg');
}

#book {
    background-color: #F4F1EA;
}

#book .image-area {
    background-image: url('assets/book_bg.jpg');
}

#book .text-area {
    color: #332F2C;
}

#contact {
    background-color: #1a1a1a;
}

#contact .image-area {
    background-image: url('assets/contact_bg.jpg');
}

/* Desktop: 하단 중앙 고정 (사용자 요청 1번의 데스크탑 버전) */
.work-with-me {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 5px;
    margin: 0;
}

/* 11. 반응형 설정 (모바일 문제 해결 핵심) */
@media (max-width: 768px) {

    .split-layout,
    .split-layout.reverse {
        flex-direction: column;
    }

    .image-container {
        height: 45vh;
        padding: 30px;
    }

    /* 모바일 텍스트 영역 */
    .text-area {
        height: 55vh;
        padding: 40px 20px;
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .info-wrapper {
        max-width: 100%;
        transform: none;
        text-align: center;
    }

    .creative-title {
        position: static;
        margin-bottom: 20px;
        /* 타이틀 아래 여백 축소 */
    }

    /* 문제 1 해결: 모바일에서 Section 2 텍스트 여백 유동적 조정 */
    #workspace .desc-group {
        margin-top: 5vh;
        text-align: center;
    }

    /* 문제 1 해결: 모바일에서 WORK WITH ME 흐름 배치 */
    .work-with-me {
        position: static;
        /* 절대 위치 해제 */
        transform: none;
        margin-top: auto;
        /* 가능한 아래로 밀기 */
        margin-bottom: 20px;
        align-self: center;
    }

    /* 문제 2 해결: 모바일에서 Section 3 구매 버튼 여백 유동적 조정 */
    .purchase-group {
        margin-top: 5vh;
    }

    .shop-btns {
        justify-content: center;
    }

    /* 문제 3 해결: 모바일에서 Section 4 문구 흐름 배치 */
    .collab-tag {
        position: static;
        /* 절대 위치 해제 */
        transform: none;
        left: auto;
        margin-top: 40px;
        text-align: center;
    }

    /* Section 3 (Book) Mobile Alignment Fixes */
    #book .info-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #book .info-wrapper .desc-group {
        display: block;
        text-align: left;
        width: fit-content;
        margin-bottom: 20px;
        /* Spacing between Book Info and CTA */
    }

    #book .purchase-group {
        display: block;
        text-align: left;
        width: fit-content;
        margin-top: 20px;
    }

    #book .purchase-group .shop-btns {
        justify-content: flex-start;
    }

    /* Section 4 (Contact) Mobile Alignment Fixes */
    #contact .info-wrapper .desc-group {
        display: inline-block;
        text-align: left;
    }
}