@charset "utf-8";
.sec-vision {
    position: relative;
    width: 100%;
    height: 100vh; /* 화면 전체를 채움 */
    background-color: transparent ; /* 기본 검은 배경 */  
	z-index:2;
}
.sec-vision:after{ content:"";display:block;width:100%; height:100%;position:absolute; z-index:-1; background:rgba(0,0,0,0.0);}
.clip-layer1{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
	 filter: brightness(50%);
	 display:none;
}
.clip-layer2{ 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; background-attachment: fixed;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    /* [초기 상태] 정중앙에 크기 0%인 원형으로 숨겨둠 
    clip-path: circle(0% at 50% 50%); 
    -webkit-clip-path: circle(0% at 50% 50%);*/
}



 /* ================= 공통 레이아웃 ================= */
.page-brand { background-color: #faf9f7; /* 전체적으로 따뜻한 베이지 톤 배경 */ color: #111;   }
.brand-container { padding-bottom:  0px; }

/* GSAP Fade Up 초기 상태 */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    /* GSAP가 제어하므로 transition 속성은 넣지 않습니다 */
}

/* ================= 1. 카운터 섹션 (슬롯머신 롤링) ================= */
.sec-counter {
    text-align: center;
    padding:  50px 0 150px;
}
.sec-counter .page-title {
    font-size: 70px; font-weight: 700; margin-bottom: 60px; color: #111;
}

.counter-box {
    color: #a78864; /* 브라운 톤 포인트 컬러 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- SINCE -> KIM YOUNG MO 텍스트 슬라이드 --- */
.prefix-wrap {
    position: relative;
    height: 125px; /* 폰트 사이즈에 맞게 박스 높이 고정 */
    overflow: hidden; /* 영역 밖으로 나가는 글씨 숨김 */
    margin-bottom: 20px;
    width: 100%;
}
.prefix {
    font-size: 90px;
    letter-spacing: 2px;
    position: absolute;
    width: 100%;
    left: 0;
}
.old-txt { top: 0; }
.new-txt { top: 100%; opacity: 0; } /* 아래에 대기하고 있다가 올라옴 */

/* --- 연도 슬롯머신 롤링 --- */
.year-wrap {
    display: flex;
    justify-content: center;
    font-size: 100px; /* 초기 폰트 사이즈 */
    height: 1em; /* [핵심] 폰트 크기(1em)만큼만 보여지게 높이 제한 */
    line-height: 1em;
    font-weight: 300;
    letter-spacing: -3px;
    overflow: hidden; /* 위아래로 나열된 숫자 숨김 */
    transform-origin: center top; 
}
.digit-col {
    display: flex;
    flex-direction: column;
    /* GSAP에서 translateY를 제어하여 위로 끌어올림 */
}
.num {
	color:#000;
    height: 1em; /* 하나의 숫자 높이 */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================= 2. 워터마크 & 소개 섹션 ================= */
.sec-intro {
    position: relative;
    padding:  00px 0 200px;
}

.watermark-wrap {
    position: sticky;
    top: 50vh; /* 화면 세로의 정확히 절반(정중앙) 위치에 고정 */
    height: 0; /* 높이를 0으로 주어 아래쪽 실제 빵 이미지 컨텐츠를 밀어내지 않게 함 */
    z-index: 1; /* 사진과 텍스트(z-index:2) 뒤로 숨김 */
    pointer-events: none; /* 클릭이나 마우스 간섭 방지 */
}

/* 실제 워터마크 텍스트 디자인 */
.bg-watermark {
    position: absolute; /* sticky 래퍼를 기준으로 앱솔루트 띄움 */
    top: 0; 
    left: 50%;
    transform: translate(-50%, -50%); /* 텍스트의 중심점을 정중앙으로 보정 */
    font-size: 110px; 
    line-height: 0.9;
    color: rgba(0, 0, 0, 0.03);
    white-space: nowrap; 
    text-align: center;
}


.intro-grid {
    position: relative; z-index: 2; /* 워터마크 위로 */
}
.intro-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px; /* 행 사이 간격 */
}
.intro-row.center {
    justify-content: center;
}
.intro-col {
    width: 45%; /* 좌우 45%씩 분할하여 가운데 10% 여백 생성 */
}
.intro-col_right {
   width: 45%; /* 좌우 45%씩 분할하여 가운데 10% 여백 생성 */
}

.intro-col .title { 
position:sticky; top:50%; 
transform:translateY(-50%);
    font-size: 62px; font-weight: 300; line-height: 1.4; color: #111;
}
.intro-col .title strong {
    font-weight: 700;
}

.intro-col .title1 { 
 
    font-size: 62px; font-weight: 300; line-height: 1.4; color: #111;
}
.intro-col .title1 strong {
    font-weight: 700; padding-bottom:50px;display:block;
}


.intro-col .desc {
    font-size: 20px; color: #000; line-height: 1.8;
}

.intro-content {
    display: flex; justify-content: space-between; align-items: center; gap: 80px;
    position: relative; z-index: 2; /* 워터마크 위로 올라오게 */
}
.intro-content .img-box { width: 50%; }
.intro-content .img-box img { width: 100%; border-radius: 20px; display: block; }
.intro-content .txt-box { width: 50%; padding-left: 5%; }
.intro-content .title { font-size: 36px; font-weight: 300; margin-bottom: 40px; line-height: 1.4; }
.intro-content .title strong { font-weight: 700; }
.intro-content .desc { font-size: 16px; color: #555; line-height: 1.8; }


/* 둥근 이미지 공통 속성 */
.img-radius {
    max-width: 100%; border-radius: 20px; display: block;
}
.img-center {
    width: 60%; /* 중앙 이미지는 전체의 60% 크기 */
    border-radius: 20px; display: block;
}


/* ================= 3. 비전 (배경이미지 + 겹치는 텍스트) ================= */
.sec-vision {
    position: relative;
    width: 100%;
}
.vision-bg {
    width: 100%;
    height: 100%; /* 섹션 높이 */
 
    display: flex; align-items: center;
    position: relative;
	z-index:3;
}
/* 어두운 오버레이 */
.vision-bg::after {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.5); z-index: 1;
	
}
.vision-bg .inner-wrap { position: relative; z-index: 2; }
.vision-text { color: #fff; }
.vision-text h4 { font-size: 62px; font-weight: 300; margin-bottom: 30px; line-height: 1.3; }
.vision-text h4 strong { font-weight: 700; }
.vision-text p { font-size: 20px; color: #ddd; line-height: 1.8; }

/* [핵심] 겹치는 큰 텍스트 */
.overlap-text {
    position: absolute;
    bottom: -120px; /* 배경 밖으로 절반쯤 튀어나오게 */
    right: 5%;
    font-size: 180px;
    color: rgba(167, 136, 100, 0.5); /* 반투명 브라운 컬러 */
    z-index: 10;
    pointer-events: none;
}

/* ================= 4. 히스토리 (텍스트 + 이미지) ================= */
.sec-history {
    width: 100%; /* 브라우저 100% 꽉 차게 */
    background-color: #f3efe9; /* 연한 베이지 톤 배경 */
    padding: 150px 0; /* 위아래 여백 */
	height:100vh; position:relative;z-index:1;
}
.sec-history > div {top:50%;transform:translateY(-50%); position:relative;}

.history-row {
    display: flex; align-items: center; gap: 40px;
}
.history-row .txt-box { width: 50%; }
.history-row .title { font-size: 62px; font-weight: 300; margin-bottom: 30px; line-height: 1.4; color: #111; }
.history-row .title strong { font-weight: 700; }
.history-row .desc { font-size: 20px; color: #555; line-height: 1.8; }
.history-row .img-box { width: 50%; }
.history-row .img-box img { width: 100%; border-radius: 20px; display: block; }

/* ================= 5. 아웃트로 (텍스트 + 로고) ================= */
.sec-outro {
    text-align: center;
      position:relative; 
	  padding:150px 0;
}
.sec-outro > div { position:relative;}
.sec-outro .title { font-size: 62px; font-weight: 700; margin-bottom: 25px; line-height: 1.4; }
.sec-outro .desc { font-size: 15px; color: #888; line-height: 1.6; margin-bottom: 50px; }
.sec-outro .logo-box img { width: 250px; /* 로고 가로폭 */ height: auto; }