@charset "utf-8";
 /* ================= 공통 설정 ================= */
.page-signature {
    background-color: #fff;
    color: #111;
    overflow-x: hidden;
}

/* ================= 1 & 4. 마스크 텍스트 ================= */
.sec-mask-text {
    text-align: center;
    padding: 150px 0  150px;
}
.mask-title {
    font-size: 200px;
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 30px;
	font-weight:400;
    
    /* 텍스트 투명 및 배경 이미지 클리핑 (핵심 효과) */
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* 스크롤 시 배경이 멈춰있는 패럴랙스 효과 */
}
 
.mask-bg-1 { background-image: url('/theme/basic/img/pdt/baguette_02.png'); }
.mask-bg-2 { background-image: url('/theme/basic/img/pdt/baguette_02.png'); }

.mask-desc {
    font-size: 45px;
    font-weight: 700;
    color: #111;
}

/* ================= 2 & 5. 스케일업 스크롤 배경 ================= */
.sec-scale-bg {
    /* GSAP 핀(Pin) 고정을 위해 영역 높이를 확보 */
    height: 100vh;
    position: relative;
}
.scale-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
}

/* 초기 상태: 작고 흐릿한 오버레이 */
.scale-inner1111 {
    width: 60%;
    height: 60%;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0); 
    

    opacity: 0.3;
	    /* [수정] 초기 투명도 0.3 및 약간의 블러 처리로 흐릿하게 세팅 */
  /*  filter: blur(5px);*/
}
/* 초기 상태: 작고 흐릿한 오버레이 */
.scale-inner {
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
  
	    /* [수정] 초기 투명도 0.3 및 약간의 블러 처리로 흐릿하게 세팅 */
  /*  filter: blur(5px);*/
}


/* 스크롤 시 나타날 텍스트 (초기엔 투명하고 좌측으로 밀려있음) */
.scale-text {
    position: relative;
    z-index: 10;
    color: #111;
   
 
}
.scale-text2 {
    position: relative;
    z-index: 10;
    color: #111;
    margin-left: 10%; /* 좌측 여백 */
    opacity: 0;
    transform: translateX(-50px);
}
.scale-text .t1{font-size:24px;font-weight:700 ;color:#8d6a4d ; line-height:1; margin-bottom:30px; }
.scale-text .t2{font-size:62px;font-weight:700 ;color:#252525 ; line-height:1; margin-bottom:10px; }
.scale-text .t3{font-size:22px;font-weight:700 ;color:#8d6a4d ; line-height:1; margin-bottom:100px; }
.scale-text .t4{font-size:20px;font-weight:400 ;color:#000 ; line-height:1.6; margin-bottom:30px; }


.scale-text h3 {
    font-size: 50px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.scale-text p {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    color: #111;
}

/* ================= 3 & 6. 좌우 컨텐츠 (라인 및 배경 텍스트) ================= */
.sec-lr-content {
    padding: 100px 0;
}


.lr-text {
    width: 50%;
    padding: 0 5%;
    position: relative;
}
.lr-text h4 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}
.lr-text p {
    font-size: 20px;
    line-height: 1.8;
    color: #111;
	white-space:nowrap;
}



.lr-row {
    display: flex;
    align-items: center;
    padding: 20px 0; /* 불필요한 마진/패딩 축소 */
    /* [수정] 위아래 잘못된 border 라인 제거 */
}
.lr-row.reverse {
    flex-direction: row-reverse;
}

/* --- 이미지 및 겹치는 텍스트 --- */
.lr-img {
    width: 50%;
    position: relative; /* 텍스트 겹침을 위한 기준점 */
}
.lr-img img {
    width: 100%;
    display: block;
    border-radius: 15px;
    position: relative;
    z-index: 2; /* 이미지가 배경 텍스트 위로 올지 아래로 갈지에 따라 조정 (현재는 텍스트가 위) */
}

/* 배경 거대 텍스트 (ORIGINALITY 등) */
.bg-typo {
    position: absolute;
    bottom: -60px; /* 이미지 하단으로 살짝 삐져나오게 겹침 */
    left: 50%;
    transform: translateX(-50%); /* 정확히 이미지 가운데 정렬 */
    font-size: 100px;  
    color: #f2e9d7; /* 연한 골드/베이지 톤 */
    pointer-events: none;
    white-space: nowrap;
    z-index: 10; /* 이미지 위로 올라오도록 설정 */
}
.lr-img {
    width: 50%;
}
.lr-img img {
    width: 100%;
    display: block;
    border-radius: 15px;
}


.content-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.0);;
    margin:  100px 0  00px; /* 라인 위아래 간격 */
}