@charset "utf-8";

:root {
    --alt-gold: #cfc4ac;
    --alt-text: #21211C;
    --alt-light-text: #666;
    --font-serif: "Noto Serif Display", serif;
    --font-sans: "Noto Sans", sans-serif;
    --alt-bg-soft: #f6f2ea;
    --alt-olive: #6C6C42;
}

body { margin: 0; padding: 0; background: #fff; color: var(--alt-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Layout & Typography */
.alt-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.alt-section { padding: 100px 0; }
.alt-h2 { font-family: var(--font-serif); font-size: 48px; line-height: 1.25; font-weight: 500; margin-bottom:  100px ;  color: #cfc4ac; width: 100%; }
.alt_w-h2  { font-family: var(--font-serif); font-size: 48px; line-height: 1.25; font-weight: 500; margin: 0 auto;  color: #fff; width: 60%; }
.alt-h3 { font-family: var(--font-serif); font-size: 32px; font-weight: 500; margin-bottom: 20px; color: #cfc4ac; }
.alt-h3--gold { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 48px); color: #c5b08d; font-weight: 300; line-height: 1.1; margin-bottom: 30px; }
.alt-p  { font-size: 16px; color: var(--alt-light-text); line-height: 1.8; margin-bottom: 30px; }


/* ------------------------------------------------------------
   [핵심 수정] 스플릿 섹션 레이아웃 통합 및 위치/사이즈 조정
   ------------------------------------------------------------ */

/* 1. 모든 스플릿 섹션 공통 (미디어 1.4 : 텍스트 0.6) */
.alt-split, 
.alt-media-split { 
    display: grid !important; 
    grid-template-columns: 1.4fr 0.6fr !important; 
    gap: 80px !important; 
    align-items: center !important; 
   
    width: 100% !important;
    min-height: auto !important; /* 불필요한 높이 제한 제거 */
}

/* 2. [위치 반전] 첫 번째(3rd section)와 네 번째(7th section) 섹션 */
/* 텍스트를 왼쪽(0.6), 미디어를 오른쪽(1.4)으로 배치 */
section:nth-of-type(3) .alt-split,
section:nth-of-type(7) .alt-section .alt-split,
section:nth-of-type(7) .alt-split {
    grid-template-columns: 0.6fr 1.4fr !important;
}

/* 첫 번째 스플릿 (Capturing Beauty) */
section:nth-of-type(3) .alt-split > div:nth-child(1),
section:nth-of-type(3) .alt-media-split > div:nth-child(1) { order: 2 !important; } /* 미디어 오른쪽 */
section:nth-of-type(3) .alt-split > div:nth-child(2),
section:nth-of-type(3) .alt-media-split > div:nth-child(2) { order: 1 !important; } /* 텍스트 왼쪽 */

/* 네 번째 스플릿 (Design Your Bed) */
section:nth-of-type(7) .alt-split > div:nth-child(1) { order: 2 !important; }
section:nth-of-type(7) .alt-split > div:nth-child(2) { order: 1 !important; }

/* 3. 미디어 사이즈 동일화 (두 번째 섹션 이미지 비율 3:2에 맞춤) */
.alt-split__media img,
.alt-split__media video,
.alt-media-split__media img,
.alt-media-split__media video,
.alt-split-video,
.alt-video { 
    width: 100% !important; 
    aspect-ratio: 3 / 2 !important; /* BI-COMFORT 이미지 비율로 강제 통일 */
    object-fit: cover !important; 
    display: block !important;
    height: auto !important;
}

.alt-split__text,
.alt-media-split__text {
    width: 100% !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   기타 컴포넌트 스타일
   ------------------------------------------------------------ */

/* Hero */
/* Hero 섹션 전체 설정 */
/* Hero 섹션 전체 */
/* Hero 섹션 전체 설정 */
.alt-hero { 
    position: relative; 
    height: 100vh; 
    min-height: 600px; 
    display: flex; 
    flex-direction: column; /* 요소들을 세로로 나열 */
    align-items: center; 
    justify-content: center; 
    justify-content: flex-end;
    text-align: center; 
    color: #fff; 
    overflow: hidden; 
}

/* 배경 이미지 레이어 */
.alt-hero__bg { 
    position: absolute; 
    inset: 0; 
    z-index: 1; /* 이미지는 가장 아래 레이어 */
}

.alt-hero__bg img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    /
}

/* 텍스트 컨텐츠 레이어 */
.alt-hero__content { 
    position: relative; 
    z-index: 10; /* 이미지(1)보다 확실히 위로 올림 */
    padding: 0 20px;
    width: 100%;
    margin-bottom: 200px;
}

/* 개별 라벨 텍스트 스타일 */
.alt-hero__content .alt-label, .alt-full-banner__content .alt-label{
    display: block;
    color: #fff !important; /* 글자색 흰색 강제 */
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    z-index: 11;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.alt-hero__title { 
    position: relative;
    z-index: 11;
    width: 60%;
    font-family: var(--font-serif); 
    font-size: clamp(30px, 5vw, 60px); 
    font-weight: 500; 
    line-height: 1.2; 
    margin: 0 auto;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 좀 더 짙은 그림자로 가독성 확보 */
}
/* Tiles */
.alt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.alt-tile { display: grid; grid-template-columns: 1fr 1fr; background: var(--alt-bg-soft); overflow: hidden; }
.alt-tile__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.alt-tile__title { font-family: var(--font-serif); font-size: 32px; font-weight: 400; margin-bottom: 20px; color: #21211C; }
.lt-tile__desc{font-size: 16px; color: var(--alt-light-text); line-height: 1.8; margin-bottom: 30px; }
.alt-tile__body { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.alt-tile__link {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-decoration: none;
    color: var(--alt-text);
    /* 이미지와 같은 금색 라인 생성 */
    border-bottom: 2px solid var(--alt-gold); 
    width: fit-content;
    padding-bottom: 8px; /* 텍스트와 라인 사이의 간격 */
    display: inline-block;
    transition: 0.3s;
}

.alt-tile__link:hover {
    opacity: 0.7;
    padding-bottom: 12px; /* 마우스 올렸을 때 애니메이션 효과 (선택 사항) */
}

/* Banner & Living */
/* 1. 배너 섹션 설정 (높이 700px 고정 및 기준점 설정) */
.alt-full-banner, 
.alt-full-banner--soft { 
    position: relative !important;
    height: 700px !important;
    min-height: 700px !important;
    padding: 0 !important;
    margin-top: 100px 0 !important;
    overflow: hidden !important; /* 넘치는 비디오 부분 숨김 */
    background-color: #000; /* 비디오 로딩 전 배경 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
 
}

/* 2. 비디오 위치 및 크기 정밀 조정 (핵심 수정) */
.alt-full-banner video,
.alt-full-banner--soft video,
.alt-full-banner__bg video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 비디오를 정중앙으로 이동 */
    min-width: 100% !important; 
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover !important; /* 비율 유지하며 꽉 채움 */
    z-index: 1 !important;
}

/* 3. 비디오 위 텍스트 컨텐츠 설정 */
.alt-full-banner__content {
    position: relative !important;
    z-index: 10 !important; /* 비디오보다 위로 */
    width: 100% !important;
    text-align: center !important;
    color: #fff !important;
}

/* Journal */
.alt-journal {
    width: 1200px !important; 
    max-width: 100% !important;
    margin: 80px auto !important; /* 위아래 여백 확보 및 가로 중앙 정렬 */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 5:5 비율로 꽉 채움 */
    gap: 0 !important; /* 이미지 사이의 틈을 없애거나 최소화하여 넓어 보이게 설정 */
    padding: 0 !important;
}

/* 2. 카드 레이아웃: 높이를 동일하게 맞추는 핵심 설정 */
.alt-journal__card {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    margin: 0 10px; /* 카드 사이 미세한 간격 (이미지가 너무 붙지 않게) */
}

/* 3. 카드 이미지: 정사각형 비율 유지 */
.alt-journal__img {
    width: 100% !important;
    overflow: hidden !important;
}

.alt-journal__img img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4. 텍스트 박스: 높이를 강제로 동일하게 일치(flex-grow) */
.alt-journal__body { 
    background: #7d8461 !important; /* 이미지와 일치하는 올리브 톤 */
    color: #fff !important; 
    padding: 50px 40px !important; /* 내부 여백을 넓혀 고급스럽게 표현 */
    flex-grow: 1 !important; /* 본문 양에 관계없이 부모 높이만큼 꽉 채움 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* 5. 타이틀 및 본문 스타일 */
.alt-journal__title { 
    font-family: var(--font-serif) !important; 
    font-size: 30px !important;
    font-weight: 500 !important; 
    margin: 0 0 20px 0 !important; 
    color: #fff !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.alt-journal__desc { 
    font-size: 15px !important; 
    line-height: 1.7 !important; 
    margin-bottom: 35px !important; 
    opacity: 0.95 !important; 
    font-weight: 300 !important;
    color: #fff !important;
    word-break: keep-all !important;
}

/* 6. VIEW 링크: 진한 글씨 + 금색 라인 (이미지 기반 정밀 수정) */
.alt-journal__body .alt-tile__link {
    color: #21211C !important; /* 요청하신 진한 색상 */
    border-bottom: 2px solid var(--alt-gold) !important; /* 두툼한 금색 하단 라인 */
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-bottom: 5px !important;
    width: fit-content !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Button */
.alt-btn-outline {
    display: inline-block;
    margin-top: 26px;
    padding: 14px 34px;
    border: 1px solid #d8d1c5;
    color: var(--alt-text);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.2em;
    font-weight: 500;
    transition: 0.3s;
}
.alt-btn-outline:hover { background: #cfc4ac; color: #fff; border-color: #1a1a1a; }
.alt-label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 20px !important; /* 기존 10px에서 20px로 변경 */
    text-transform: uppercase;
}
.hero-btn-outline {
    z-index: 50;
     font-family: var(--font-sans); 
    display: inline-block;
    margin-top: 50px;
    padding: 14px 34px;
    background: #cfc4ac; 
    border: 1px solid #d8d1c5;
    color: #212111;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: 500;
    transition: 0.3s;
}
.hero-btn-outline:hover { background: #fff;  border-color:  #cfc4ac;; }
.alt-label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 20px !important; /* 기존 10px에서 20px로 변경 */
    text-transform: uppercase;
}

.alt-full-banner, 
.alt-full-banner--soft { 
    position: relative !important;
    height: 700px !important; /* 요청하신 700px 설정 */
    padding: 0 !important; /* 높이 고정을 위해 패딩 제거 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
}

/* 1. 리빙 스페이스 섹션 레이아웃 */
.alt-living {
    position: relative !important;
    height: 700px !important; /* 고정 높이 700px */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #111 !important;
}

/* 2. 배경 영상 레이어 (가장 아래 배치) */
.alt-living__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important; /* 배경 레이어 1 */
    width: 100% !important;
    height: 100% !important;
}

.alt-living__bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.6) !important; /* 텍스트 가독성을 위해 배경을 어둡게 설정 */
}

/* 3. 텍스트 컨텐츠 레이어 (영상 위로 배치) */
.alt-living__content {
    position: relative !important;
    z-index: 10 !important; /* 영상(1)보다 높은 10으로 설정하여 위로 올림 */
    text-align: center !important;
    color: #fff !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 4. 개별 텍스트 스타일 및 여백 */
.alt-living__content .alt-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 20px !important; /* 요청하신 20px 여백 적용 */
    position: relative !important;
    z-index: 11 !important;
}

.alt-living__title {
    font-family: var(--font-serif) !important;
    font-size: clamp(34px, 5vw, 64px) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #fff !important;
    position: relative !important;
    z-index: 11 !important;
}

.alt-header--center {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 60px !important;
}

/* 상단 메인 문구: 색상 #6c6c42 및 중앙 정렬 */
.alt-section--compact .alt-h2 {

    color: #7d8056 !important;
    font-weight: 500;
    text-align: center !important;
    margin-bottom: 20px !important; /* 하단 설명문과의 간격 조정 */
    width: 100% !important;
}

/* 하단 설명 문구: 중앙 정렬 */
.alt-section--compact .alt-label {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #999 !important;
}
.alt-section--compact{background-color: #F4F1ED; padding-top: 150px;}

/* style.css 하단에 추가 */

/* 링크 영역이 카드 전체를 채우도록 설정 */
.alt-journal__link-overlay {
    display: block;      /* <div>처럼 작동하게 하여 레이아웃 유지 */
    text-decoration: none;
    color: inherit;      /* 텍스트 색상 유지 */
    height: 100%;
}

/* 이미지나 텍스트에 포인터 중복 방지 */
.alt-journal__card {
    cursor: default !important; 
    padding: 0;          /* 링크가 꽉 차도록 패딩 조정 필요시 */
}

/* 마우스 올렸을 때 전체적인 호버 효과 (선택사항) */
.alt-journal__link-overlay:hover .alt-tile__link {
    background: #c9bca0;
    color: #fff;

       
}
/* 링크 태그가 카드 전체 영역을 차지하게 하여 레이아웃 유지 */
.alt-tile__anchor {
    display: block !important;    /* 인라인을 블록으로 변경하여 레이아웃 무너짐 방지 */}
    /* style.css 맨 하단에 추가 */

/* 카드 전체에 마우스 포인터 표시 */
.alt-tile {
    cursor: pointer;
}              
                                                       


/* 이미지 살짝 확대 효과 (선택 사항) */
.alt-tile:hover .alt-tile__media img {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}
.alt-tile__media { overflow: hidden; }


/* ------------------------------------------------------------
   반응형 대응 (모바일: 1024px 이하)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* 1. 컨테이너 및 섹션 기본 여백 */
    .alt-container { 
        padding: 0 20px !important; 
    }
    .alt-section {
        padding: 60px 0 !important;
    }
}

    /* style.css 하단 미디어 쿼리 부분 */
@media (max-width: 1024px) {

    /* 1. 히어로 섹션 높이 확보 */
    .alt-hero {
        /* 이미지의 가로세로 비율을 고려하여 높이를 충분히 줍니다. */
        height: 90vh !important; /* 화면 높이의 60% 정도 사용 */
        min-height: 450px !important; 
        justify-content: center !important;                  
    }

    /* 2. 이미지 노출 기준 조정 (핵심) */
    .alt-hero__bg img {
        width: 100% !important;
        height: 100% !important; transform: scale(1.2);   /* 1.1~1.3 사이에서 조절 */
        transform-origin: center center;
      }

      .alt-hero__content {  margin-bottom: 0 !important;}

    /* 3. 텍스트가 이미지를 너무 많이 가리지 않도록 사이즈 재조정 */
    .alt-hero__title {
        font-size: 26px !important; /* 이미지를 더 보여주기 위해 폰트 살짝 축소 */
        width: 90% !important;
       
    }
    .hero-btn-outline{margin-top: 0px;}

    /* 3. 텍스트가 이미지를 너무 많이 가리지 않도록 사이즈 재조정 */
    .alt-hero__title {
        font-size: 28px !important; /* 이미지를 더 보여주기 위해 폰트 살짝 축소 */
        width: 90% !important;
        margin-bottom: 20px !important;
    }

    /* 풀 배너 및 리빙 섹션: 히어로와 동일한 중앙 정렬 방식 적용 */
    .alt-full-banner, 
    .alt-living {
        height: 720px !important;
        min-height: 720px !important;
        margin: 40px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    /* 배너 내부 콘텐츠 박스 너비 조정 */
    .alt-full-banner__content,
    .alt-living__content {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. 모바일 텍스트 사이즈 통합 관리 */
    /* 히어로, h2, 리빙 타이틀 모두 42px */
    .alt-hero__title, .alt_w-h2, 
    .alt-living__title { 
        font-size: 42px !important; 
        line-height: 1.2 !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        word-break: keep-all !important; /* 한글 잘림 방지 */
    }

    /* h3 사이즈 */
    .alt-h3, .alt-h2,
    .alt-journal__title { 
        font-size: 32px !important; 
        line-height: 1.3 !important;
    }
    .alt-heade{margin-top: 20px;}

    /* 본문, VIEW, 버튼 폰트 14px */
    .alt-p, 
    .alt-journal__desc,
    .alt-tile__link,
    .alt-btn-outline { 
        font-size: 14px !important; 
        line-height: 1.6 !important;
    }

    /* 4. 버튼 중앙 정렬 및 가로 확장 */
    .alt-btn-outline {
        display: inline-block !important; /* width 자동 조절 */
        margin: 30px auto 0 auto !important;
        padding: 14px 44px !important; /* 좌우 10px씩 총 20px 추가 */
        text-align: center !important;
        border: 1px solid #d8d1c5 !important;
    }

    /* 5. 스플릿 섹션: 텍스트(위) -> 미디어(아래) 배치 */
    .alt-split, 
    .alt-media-split { 
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .alt-split__text,
    .alt-media-split__text {
        order: 1 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .alt-split__media, 
    .alt-media-split__media {
        order: 2 !important;
        width: 100% !important;
    }

    /* PC 반전 로직 무효화 */
    section:nth-of-type(3) .alt-split > div,
    section:nth-of-type(7) .alt-split > div {
        order: unset !important;
    }
    section:nth-of-type(3) .alt-split .alt-split__text,
    section:nth-of-type(7) .alt-split .alt-split__text { order: 1 !important; }
    section:nth-of-type(3) .alt-split .alt-media-split__media,
    section:nth-of-type(7) .alt-split .alt-media-split__media { order: 2 !important; }

    /* 6. 저널 및 타일 섹션 1열 정렬 */
    .alt-tiles
    { 
        grid-template-columns: 1fr !important; 
        width: 100% !important;
        gap: 8px !important;
    }
    /* 6. 저널 섹션 중앙 정렬 */
    .alt-journal { 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 내부 카드들을 가로 중앙으로 정렬 */
        grid-template-columns: 1fr !important; 
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .alt-journal__card {
        width: 100% !important;
        margin: 0 auto 30px auto !important; /* 상하 여백 유지 및 가로 중앙 정렬 */
        float: none !important;
    }
    .alt-tile { 
        grid-template-columns: 1fr !important; 
    }

    
    .alt-journal__img{margin: 0 auto;}
    }
    .alt-journal__title{
      font-size: 28px !important; /* 기존 30px에서 26px로 수정 */
    font-weight: 500 !important;
    }

    @media (max-width: 768px) {
    .alt-btn-outline {
        display: block !important;    /* 한 줄을 다 차지하게 변경 */
        width: fit-content !important; /* 글자 크기에 딱 맞춤 */
        margin: 0 auto !important;     /* 상하 0, 좌우 자동(중앙) */
        text-align: center !important;
    }
}