/* ================= Main Visual ================= */
.main-visual {
    position: relative;
    width: 100%;
    height: 100vh; /* 화면에 꽉 차게 */
    display: flex;
    align-items: flex-end; /* 텍스트 하단 배치 */
    padding-bottom: 3vh;
}
.visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 임시 배경 이미지 (실제 빵 이미지로 변경) */
    background: url('/theme/basic/img/main/main_visual_01.jpg') no-repeat center center / cover;
    z-index: -1;
}
/* 이미지 톤다운 오버레이 */
.visual-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.001);
}



.visual-text {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-start;; /* 좌측 영문타이틀, 우측 한글텍스트 양끝 정렬 */
    align-items: flex-end; /* 두 요소의 하단 라인을 맞춤 */
}

.title-wrap {
 
    color: #f4ebd0; /* 이미지에 맞는 아이보리/베이지 톤 */
    line-height: 0.8; /* 위아래 텍스트가 확 밀착되도록 행간 축소 */
}

/* PATISSERIE : 화면 비율에 맞추되 최대 100px */
.sub-title {
    /* 최소 40px, 기본 5vw, 최대 100px */
    font-size: clamp(40px, 5vw, 100px); 
    letter-spacing: 0.05em;
    margin-left: 0.5vw; /* 이미지를 보면 약간 들여쓰기 된 느낌 */
}

/* KIM YOUNG MO : 화면 비율에 맞춰 아주 크게, 최대 200px */
.main-title {
    /* 최소 80px, 기본 12vw, 최대 200px */
    font-size: clamp(80px, 12vw, 200px); 
	font-weight:400;
     
    white-space: nowrap; /* 줄바꿈 방지 */
	line-height:0.8;
	height:140px;
}

/* 우측 한글 텍스트 */
.desc-text {margin-left: 0.5vw; /* 이미지를 보면 약간 들여쓰기 된 느낌 */
    font-size: 24px;
    font-weight: 300; /* Pretendard 얇은 굵기 */
  
    white-space: nowrap;
    margin-bottom: 0; /* 영문 타이틀 베이스라인과 시각적으로 맞추기 위한 미세 조정 */
 
	line-height:1.6;
}





/* ================= Main Section 2 : 명장 김영모 ================= */
.main-master {
    background-color: #faf8f4; /* 지정해주신 배경색 */
    padding: 120px 0; /* 위아래 여백 */
    color: #222; /* 배경이 밝으므로 기본 텍스트 색상을 어둡게 변경 */
    text-align: center;
}

.sec-title-wrap {
    margin-bottom: 70px;
}

.sec-title-wrap .sub-txt {
    display: block;
    color: #8c6a4d; /* 베이지/브라운 톤 포인트 컬러 */
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.sec-title-wrap .main-txt {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #111;
}

/* 갤러리 레이아웃 (Flex 중앙 정렬) */
.master-gallery {
    display: flex;
    justify-content: center;
    align-items: center; /* 양옆 이미지가 가운데 이미지 기준으로 수직 중앙 정렬되도록 함 */
    gap: 50px; /* 이미지 사이 간격 */
	width:1280px; margin:auto;
}

/* 각 아이템 공통 */
.master-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%; /* 가로 폭 비율 설정 */
}

/* 가운데 큰 아이템 */
.master-item.center {
    width: 35%; /* 중앙 아이템을 약간 더 넓게 */
}

/* 이미지 박스 */
.master-item .img-box {
    position: relative;
    width: 100%;
    border-radius: 15px; /* 모서리 둥글게 */
    overflow: hidden;
    height: 500px; /* 양옆 이미지 높이 */
    margin-bottom: 25px; /* 하단 VIEW MORE 버튼과의 간격 */
}

/* 중앙 이미지 박스는 더 높게 설정 */
.master-item.center .img-box {
    height: 600px; 
}

.master-item .img-box img {cursor:pointer;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율을 유지하며 영역을 꽉 채움 */
    transition: transform 0.4s ease;
}

/* 마우스 오버 시 이미지 살짝 확대 효과 (선택사항) */
.master-item:hover .img-box img {
    transform: scale(1.05);
}

/* 이미지 위 텍스트를 위한 어두운 그라데이션 오버레이 */
.master-item .img-box::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 이미지 위 텍스트 (명장의 눈, 신념, 땀) */
.master-item .img-txt {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
}

/* VIEW MORE 버튼 */
.btn-view {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    letter-spacing: 1px;
}

.btn-view span {
    font-weight: normal;
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

/* VIEW MORE 오버 시 화살표 이동 효과 */
.btn-view:hover span {
    margin-left: 10px; 
}

.btn-view2 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
}

.btn-view2 span {
    font-weight: normal;
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

/* VIEW MORE 오버 시 화살표 이동 효과 */
.btn-view2:hover span {
    margin-left: 10px; 
}




/* ================= Main Section 3 : 시그니처 컬렉션 ================= */
.main-signature {
    padding: 150px 0;
    background-color: #ffffff;
}
 
.sig-inner {
    width: 100%;
    max-width: 1460px;
    min-width: 1460px;
    margin: 0 auto;
}

.main-signature .sec-title-wrap {
    text-align: center;
    margin-bottom: 100px;
}

/* --- 지그재그 레이아웃 (Flexbox) --- */
.sig-row {
    display: flex;
    align-items: center; /* 이미지와 텍스트를 수직 중앙 정렬 */
    margin-bottom: 120px; /* 위아래 컨텐츠 간격 */
}

.sig-row:last-child {
    margin-bottom: 0;
}

/* reverse 클래스가 붙으면 좌우 배치를 반전시킴 */
.sig-row.reverse {
    flex-direction: row-reverse;
}

/* --- 이미지 영역 --- */
/* 파란 가이드라인 기준 50% 차지 */
.sig-img {
    width: 50%; 
}

.sig-img img {
    width: 100%;
    display: block;
    border-radius: 20px; /* 이미지 모서리 둥글게 */
    object-fit: cover;
}

/* --- 텍스트 영역 --- */
/* 나머지 50% 공간 차지 */
.sig-text {
    width: 50%;
    display: flex;
    justify-content: center; /* 텍스트 박스를 50% 공간의 중앙에 배치 */
}

/* 실제 텍스트가 담기는 박스 (좌측 정렬 유지) */
.sig-text .text-box {
    width: 70%; /* 50% 공간 내에서 텍스트가 너무 퍼지지 않게 폭 제한 */
    text-align: left;
}

.sig-text h3 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
    color: #000;
    margin-bottom: 25px;
}

.sig-text p {
    font-size: 22px;
    line-height: 1.6;
    font-weight: 400;
    color: #000;
    margin-bottom: 40px;
}


/* ================= Main Section 4 : Product ================= */
.main-product {
    padding: 150px 0;
    background-color: #f8f8f8; /* 살짝 톤 다운된 밝은 회색 배경 */
}

/* 90% / 1460px 가로폭 유지 */
.prod-inner {
    width: 100%;
    max-width: 1460px;
    min-width: 1460px;
    margin: 0 auto;
}

/* 타이틀 좌측 정렬 */
.main-product .sec-title-wrap {
    text-align: left;
    margin-bottom: 60px;
}

/* --- 4단 리스트 갤러리 (Flexbox) --- */
.product-list {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* 이미지 사이 간격 */
    margin-bottom: 70px;
}

/* 개별 아이템 */
.prod-item {
    position: relative; /* 텍스트 위치의 기준점 */
    width: 25%; /* 4개가 균등하게 1/4씩 차지 */
    border-radius: 15px; /* 모서리 둥글게 */
    overflow: hidden; /* 모서리 밖으로 튀어나오는 이미지/오버레이 숨김 */
    display: block;
}

/* 이미지 박스 */
.prod-item .img-box {
    width: 100%;
    height: 380px; /* 이미지 세로 크기 (필요시 조절) */
}

.prod-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 어두운 오버레이 (텍스트 가독성 확보) */
.prod-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.4s ease;
}

/* 텍스트 박스 (정중앙 배치) */
.prod-item .txt-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 10;
    width: 100%;transition: all 0.5s ease;
}

.prod-item .txt-box h3 {
    font-size: 60px;
	font-weight:400;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.prod-item .txt-box p {
    font-size: 22px;
    font-weight: 500;
}

/* --- 마우스 호버 효과 --- */
.prod-item:hover .txt-box{
opacity:1;

}
.prod-item:hover .img-box img {
    transform: scale(1.08); /* 이미지 살짝 확대 */
}
.prod-item:hover::after {
    background-color: rgba(0, 0, 0, 0.01); /* 호버 시 살짝 더 어두워지게 */
}

/* --- 버튼 정렬 --- */
.main-product .btn-wrap {
    text-align: center; /* 버튼을 가운데로 정렬 */
}



/* ================= Main Section 5 : Heritage ================= */
.main-heritage {
    position: relative;
 
    
	height:100vh; 
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/theme/basic/img/main/main_sec06.jpg') no-repeat center center / cover;
    
    /* background-attachment: fixed; */ /* 💡 팁: 이 주석을 해제하면 스크롤 시 배경은 멈춰있는 패럴랙스 효과가 적용됩니다! */
    
    text-align: center;
}
.main-heritage .inner-wrap{ position:relative; top:50%;transform:translateY(-50%);}
/* 어두운 배경에 맞춰 메인 타이틀 색상을 흰색으로 오버라이드 (서브 텍스트는 기존 브라운 컬러 유지) */
.main-heritage .sec-title-wrap .main-txt {
    color: #ffffff;
    margin-bottom: 50px; /* 버튼과의 간격 확보 */
}

/* 어두운 배경에 맞춰 버튼 색상을 흰색으로 오버라이드 */
.main-heritage .btn-view {
    color: #ffffff;
    font-size: 15px; /* 영역이 넓어 버튼 글씨를 살짝 키움 */
}


/* ================= Main Section 6 : News ================= */
.main-news {
    position: relative;
    padding: 120px 0 100px;
    background-color: #ffffff;
    z-index: 1;
}

/* 이미지 컨셉 맞춤 : 하단 연회색 배경 처리 */
.main-news .bg-gray {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* 타이틀 아래부터 덮도록 비율 조절 */
    background-color: #f4f4f4;
    z-index: -1;
}

.news-inner {
    width: 100%;
    max-width: 1460px;
    min-width: 1460px;
    margin: 0 auto;
}

.main-news .sec-title-wrap {
    text-align: left;
    margin-bottom: 50px;
}

/* 추가된 서브 설명 텍스트 */
.main-news .desc-txt {
    font-size: 16px;
    color: #444;
    margin-top: 10px; 
    font-weight: 400;
}

/* --- 슬라이더 간격 및 레이아웃 --- */
.news-slider-wrap {
    position: relative;
}

/* Slick에서 슬라이드 간의 간격(gap)을 주기 위한 팁 */
.news-slider .slick-list {
    margin: 0 -15px;
}
.news-slider .slide-item {
    padding: 0 15px;
}

/* --- 뉴스 카드 디자인 --- */
.news-card {
    display: block;
    background: #fff;
    border-radius: 20px; /* 모서리 둥글게 */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* 카드 외곽 부드러운 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 호버 시 카드가 살짝 떠오르는 효과 */
.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.news-card .img-box {
    width: 100%;
    height: 280px; /* 썸네일 높이 고정 */
    overflow: hidden;
}

.news-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .img-box img {
    transform: scale(1.05);
}

.news-card .txt-box {
    padding: 40px 35px;
}

.news-card .n-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-card .n-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    font-weight: 400;
}

/* 게시판 제목/내용 말줄임 처리 (css-line-clamp) */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 하단 커스텀 화살표 --- */
.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 60px; /* 카드와 버튼 사이 간격 */
}

.btn-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    color: #333;
}

.btn-arrow:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* ================= Main Section 7 : E-SHOP ================= */
.main-eshop {
    position: relative;
	height:100vh;  
    
    /* 빵 배경 이미지와 텍스트 가독성을 위한 어두운 오버레이 동시 적용 */
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)), url('/theme/basic/img/main/main_sec07.jpg') no-repeat center center / cover;
    
    text-align: center;
    color: #ffffff; /* 내부 텍스트 기본색 흰색 */
}
.main-eshop .inner-wrap{ position:relative;top:50%;transform:translateY(-50%);}

.main-eshop .top-txt {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 35px;
    color: #ddd;
}

.main-eshop .main-title {
    font-size: 70px;
    letter-spacing: 2px;
    margin-bottom: 25px;
	font-weight:400;
	height:auto;
    /* en-font 클래스가 적용되어 있으므로 Fathan DisplaySerif 로 렌더링됨 */
}

.main-eshop .desc-txt {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 45px;
    color: #eee;
}

/* 어두운 배경에 맞게 VIEW MORE 버튼 색상 오버라이드 */
.main-eshop .btn-view {
    color: #ffffff;
    font-size: 15px;
}






/* =======================================================
   [모바일 반응형 (Max-width: 768px)]
======================================================= */
@media (max-width: 768px) {
.main-news .sec-title-wrap {
    text-align: left;
    margin-bottom: 30px;
}


.main-product .sec-title-wrap {
    text-align: left;
    margin-bottom: 20px;
}


.btn-view {
    font-size: 11px;
    font-weight: 600;
    color: #222;
    letter-spacing: 1px;
}
.main-heritage .btn-view
{ font-size:11px;}
.btn-view2{ font-size:11px;}
.main-signature .sec-title-wrap{ margin-bottom:30px;}
.main-eshop .btn-view{ font-size:11px;}
/* ================= Main Visual ================= */
 .main-visual {
    position: relative;
    width: 100%;
    height: 100vh; /* 화면에 꽉 차게 */
	padding-bottom:10vh;
}
.visual-bg {
 
    background: url('/theme/basic/img/mobile/main/m_visual_01.jpg') no-repeat center center / cover;
 
}
 


    /* 공통: 1460px 강제 고정 해제 및 모바일 여백(90%) 설정 */
    .inner-wrap, .sig-inner, .prod-inner, .news-inner {
        min-width: 0 !important;
        width: 90% !important;
        margin: 0 auto;
    }
    
    /* 공통: 타이틀 사이즈 축소 */
    .sec-title-wrap .main-txt { font-size: 26px !important; margin-bottom:  0px; font-weight:700;}
    .sec-title-wrap .sub-txt { font-size: 16px !important; margin-bottom: 10px; }

    /* 1. Main Visual (세로 정렬 및 가운데 정렬) */
    .visual-text {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 50px;
    }
    .title-wrap { align-items: center; }
    .sub-title { font-size: 24px !important; margin-left: 0 !important; margin-bottom: 5px; }
    .main-title { font-size: 46px !important; line-height:1;height:auto; }
    .desc-text { margin-top: 5px; margin-bottom: 0 !important; font-size: 14px; }

    /* 2. 명장 김영모 (가로 스와이프 리스트로 변경) */
    .main-master { padding: 50px 0 30PX; }
	.sec-title-wrap{ margin-bottom:30px;}
	#myong .cont .tx01{ font-size:16px;}
	 
#myong { background-color:#252525; position:relative;height:100vh;padding: 80px 0 0;}
#myong .bg{ width:100%; height:100% ;  		background-image:url(/theme/basic/img/mobile/main/m_main_family_bg.jpg);background-size:auto 100%;  background-position:right center; background-repeat:no-repeat;position:absolute;left:0;top:0; }
#myong .cont{ position:relative; top:50%; transform:translateY(-50%); width:90%; margin:auto; }
#myong .cont .tx01{ color:#8c6a4d; margin-bottom:20px; line-height:1; }
#myong .cont .tx02{ color:#fff; margin-bottom:20px;line-height:1.2;  font-weight:700;}
#myong .cont .tx03{ color:#fff; padding-bottom:40px; margin-bottom:40px;line-height:1.6;border-bottom:1px solid #8c6a4d; width:550px; }
#myong .cont .tx04{ color:#fff;padding-bottom:40px; margin-bottom:40px;line-height:1.6;border-bottom:1px solid #8c6a4d; width:550px;  }
#myong .cont .tx05{position:absolute;right:20px;bottom:20px;}


    .master-gallery {
        width: 100% !important;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* 스크롤 시 자석처럼 붙음 */
        padding-bottom: 20px;
        gap: 15px;
    }
    .master-gallery::-webkit-scrollbar { display: none; } /* 스크롤바 숨김 */
    
    .master-item, .master-item.center {
        width: 75% !important; /* 화면에 1.5개 정도 보이게 */
        flex-shrink: 0;
        scroll-snap-align: center;
    }
    .master-item .img-box, .master-item.center .img-box {
        height: 400px !important;
        margin-bottom: 15px;
    }

    /* 3. 명장 家 (텍스트 위, 이미지 아래로 순서 변경) */
    #myong { height: auto !important; padding: 80px 0; display: flex; flex-direction: column; }
    #myong .cont { position: static !important; transform: none !important; order: 1; text-align: center; width: 90%; }
    #myong .cont .tx02 { font-size: 26px !important; }
    #myong .cont .tx03, #myong .cont .tx04 { width: 100% !important; font-size: 15px !important; margin: 0 auto 30px !important; }
    
    #myong .bg { 
        position: static !important; width: 100% !important; height: 350px !important; 
        background-position: center top !important; background-size: cover !important; 
        order: 2; margin-top:  0px; 
    }

    /* 4. Signature (이미지 위, 텍스트 아래로 쌓임) */
    .main-signature { padding: 50px 0 0; }
    .sig-row, .sig-row.reverse { flex-direction: column !important; margin-bottom: 60px; }
    .sig-img, .sig-text { width: 100% !important; }
    .sig-text { margin-top: 25px; }
    .sig-text .text-box { width: 100% !important; text-align: left; }
    .sig-text h3 { font-size: 24px; margin-bottom: 15px; }
    .sig-text p { font-size: 16px; margin-bottom: 20px; }

    /* 5. Product (4열 -> 2x2 그리드 배열) */
    .main-product { padding: 50px 0 0; }
    .product-list { flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
    .prod-item { width: calc(50% - 7.5px) !important; }
    .prod-item .img-box { height: 200px; }
    .prod-item .txt-box h3 { font-size: 28px; }
    .prod-item .txt-box p { font-size: 14px; }
.prod-inner{ padding-bottom:50px;}
    /* 6. Heritage */
    .main-heritage { padding: 100px 0; height: auto; }
.main-heritage .inner-wrap{ top:0;transform:translateY(0);}
    /* 7. News (슬라이더 컨트롤 수정) */
    .main-news { padding: 50px 0 50px; }
    .news-card .img-box { height: 220px; }
    .news-card .txt-box { padding: 25px 20px; }
    .news-card .n-title { font-size: 18px; }
    
    /* PC 화살표 숨기고 모바일용 도트(점) 페이징 노출 */
    .slider-controls { display: none; } 
    .slick-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 0; list-style: none; bottom:-50px !important;}
    .slick-dots button { font-size: 0; width: 14px !important; height: 14px !important; border-radius: 50%;   border: none; padding: 0; }
    .slick-dots .slick-active button:before {font-size:12px;  color:#a78864 !important;  ;}
	.slick-dots li button:before{  }
    /* 8. E-SHOP */
    .main-eshop { padding:  0px 0; }
    .main-eshop .main-title { font-size: 40px; }
    .main-eshop .desc-txt { font-size: 16px; line-height:1.6; }
}