/* style.css */
:root {
  --bg-sand: #F5F2EE;;
  --ink: #161616;
  --gold: #cfc4ac;
  --olive: #6c6c42;
  --serif: "Noto Serif Display", serif;
  --sans: "Noto Sans", sans-serif;
  --wrap: 800px;
}

body { margin: 0; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.bc { background: var(--bg-sand); }
.bc-wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
img { max-width: 100%; height: auto; display: block; }

/* * [Hero Section]
 * 텍스트가 이미지 중앙에 정확히 오도록 Flexbox 정렬 적용
 * 텍스트 가독성을 위해 Veil(어두운 막) 및 폰트 사이즈 조정
 */
.bc-hero { position: relative; background: #fff; overflow: hidden; }
.bc-hero__media { position: relative; }
.bc-hero__media img { width: 100%; height: min(80vh, 500px); object-fit: cover; }
.bc-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.4)); pointer-events: none; z-index: 1; }

.bc-hero__inner { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    z-index: 2; 
    text-align: center;
    padding: 20px;
}

/* Hero Title: 크기 확대 및 자간 조정 */
.bc-hero__title { 
    font-family: var(--serif); 
    font-weight: 400; 
    color: #fff; 
    font-size: clamp(36px, 5vw, 60px); 
    text-transform: uppercase; 
    margin-bottom: 24px; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Hero Subtitle */
.bc-hero__subtitle { 
    font-family: var(--sans); 
    color: rgba(255,255,255,0.95); 
    font-size: 14px; 
    letter-spacing: 0.25em; 
    text-transform: uppercase; 
    margin: 0 0 24px 0; 
    font-weight: 500; 
}

/* Hero Desc: 너무 퍼지지 않게 max-width 설정 */
.bc-hero__desc { 
    font-family: var(--sans); 
    color: rgba(255,255,255,0.9); 
    font-size: clamp(15px, 1.5vw, 18px); 
    max-width: 760px; 
    line-height: 1.6; 
    margin: 0 auto; 
}


/* * [Promo Section]
 */
.bc-promo-section { padding: 100px 0; background: #fff; }
.bc-grid-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; margin-bottom: 100px; }
/* 마지막 요소 마진 제거 */
.bc-grid-layout:last-child { margin-bottom: 0; }
.bc-grid-layout.reverse { grid-template-columns: .9fr 1.1fr; }
.bc-grid-layout.reverse .bc-grid-media { order: 2; }
.bc-grid-layout.reverse .bc-grid-copy { order: 1; }

.bc-title { font-family: var(--serif); font-weight: 400;  margin: 0 0 20px; font-size: 32px; color: var(--ink); color: #cfc4ac; }
.bc-grid-copy p{font-size: 14px; color: #21211c;}
.bc-list { margin: 24px 0 32px; padding-left: 20px; line-height: 1.8;  font-weight: 300; font-size: 15px; }
.bc-btn { display: inline-block; background: var(--olive); color: #fff; text-decoration: none; padding: 14px 28px; border-radius: 2px; font-size: 10px; letter-spacing: .1em; transition: background-color 0.3s; text-transform: uppercase; }
.bc-btn:hover { background-color: #6a6b46; }
.bc-btn.small { padding: 12px 24px; }


/* * [Common Sections]
 * 여백을 충분히 주어 고급스러운 느낌 (padding: 100px 0)
 */
.bc-section { padding: 100px 0; background: #fff; }
.bc-section.beige { background: var(--bg-sand); }
.bc-section.olive { background: var(--olive); color: #fff; }

.bc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 100px; }
.bc-two-col p {color: #fff; font-size: 14px;  }

.bc-two-col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 100px; }
.bc-two-col2 p {color: #6c6c42;}

/* Section Title & Text */
.bc-copy h2 { font-family: var(--serif); font-weight: 400; margin: 0 0 24px; font-size: clamp(28px, 3.5vw, 30px); line-height: 1.2; }
.bc-copy p { font-size: 14px; line-height: 1.7; margin-bottom: 0;  }


/* * [Collection Cards]
 */
.bc-collection { display: grid; gap: 80px; }
.bc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bc-card.reverse .bc-card__copy { order: 2; }
.bc-card.reverse .bc-card__media { order: 1; }
.bc-card__copy h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 16px; font-size: 30px; letter-spacing: 0.02em; color: #6c6c42; }
.bc-card__copy p { font-size: 14px; line-height: 1.6; margin-bottom: 30px; color: #6c6c42;  }


/* * [Bottom Grid]
 */
.bc-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bc-bottom-right h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin-bottom: 20px; color: #6c6c42; }
.bc-bottom-right p { font-size: 14px; line-height: 1.6; margin-bottom: 32px; color: #6c6c42; }


/* * [Interest Section]
 */
.bc-interest { padding: 80px 0; background: #fff; text-align: center; border-top: 1px solid #eee; }
.bc-interest__title { font-family: var(--serif); opacity: .6; margin-bottom: 40px; font-size: 20px; font-style: italic; color: #6c6c42;}
.bc-interest__grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.bth-slide { width: 260px; background: #000; color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.bth-slide img { width: 100%; height: 160px; object-fit: cover; opacity: .8; transition: opacity .4s, transform .6s; }
.bth-slide:hover img { opacity: .5; transform: scale(1.05); }
.bth-slide span { position: absolute; bottom: 0; left: 0; width: 100%; padding: 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; z-index: 2; text-align: center; font-weight: 500; }


/* Footer Texture */
.bc-footer-img img { width: 100%; height: 280px; object-fit: cover; }


/* * [Utilities & Animation]
 */
.text-olive { color: var(--olive); }

[data-animate] { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-animate].is-in { opacity: 1; transform: translateY(0); }

/*  Bottom Banner */
.cont-banner-bottom {
    position: relative;
    width: 95%;          
    margin: 10PX auto;  
    padding: 140px 150px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
}

.cont-banner-bottom::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.1); 
    z-index: 1;
}



.cont-banner-bottom h3 {
    font-family: var(--serif);
    position: relative; /* z-index 적용을 위해 필수 */
    z-index: 2;         /* 배경 오버레이(z-index:1)보다 위로 올려서 선명하게 표시 */
    font-size: 2.1rem; 
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}


@media (max-width: 1024px) {
  .bc-wrap { width: min(var(--wrap), 100% - 32px); }
  
  /* [1] 모든 그리드 레이아웃을 세로 한 줄(Flex Column)로 통합 변경 */
  .bc-grid-layout,
  .bc-two-col,
  .bc-two-col2,
  .bc-card,
  .bc-bottom-grid { 
    display: flex !important;
    flex-direction: column !important; 
    gap: 40px; 
  }
  
  /* [2] 텍스트와 이미지 순서 강제 조정: 텍스트(1) -> 이미지(2) */
  /* 일반 카드 및 그리드 */
  .bc-card__copy, .bc-grid-copy, .bc-copy, .bc-bottom-right { order: 1 !important; }
  .bc-card__media, .bc-grid-media, .bc-media, .bc-bottom-left { order: 2 !important; }

  /* [3] 텍스트 및 버튼 중앙 정렬 */
  .bc-card__copy, .bc-grid-copy, .bc-copy, .bc-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* [4] 버튼 스타일: 늘어나지 않게 설정 */
  .bc-btn {
    width: fit-content !important;
    min-width: 200px;
    margin: 20px auto 0 !important;
    padding: 12px 40px;
    display: inline-flex;
    justify-content: center;
  }

  /* 히어로 및 기타 요소 유지 */
  .bc-hero__media img { height: 60vh; }
  .bc-hero__title { font-size: 32px; }
  .cont-banner-bottom { width: 90%; height: 400px; padding: 0 20px; display: flex; align-items: center; }

  .cont-banner-bottom{margin-top: 0px; min-height: 600px;}
}