@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuriSemiBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuriBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuriLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuriExtraLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.ttf) format("truetype");
}


/* 기본: 모바일 포함 모든 환경에서 숨김 */
.pc_br {
  display: none;
}

/* PC 뷰포트(예: 가로 1024px 이상)에서만 보임 */
@media (min-width: 1024px) {
  .pc_br {
    display: inline; /* <br>이므로 inline or inline-block */
  }
}

.pc_img {
    display:block;
}
.mo_img {
    display:none;
}


@media screen and (max-width:1240px){
.pc_img {
	display:none;
	visibility:hidden;
	height:0px
}
.mo_img {
	display:block;
}

}
/* Main Visual Area */
#main_visual {
    position: relative; width: 100%; height: 100vh;
    overflow: hidden; color: #796b72;
}
.main_visual_inner { position: relative; z-index: 2; }

/* Header */
#main_header {
    position: fixed; top: 0; left: 0;
    width: 100%; z-index: 999;
    transition: background-color 0.4s ease;
}
#main_header:not(.scrolled):hover .main_navigation > ul > li > a {
    color: #796b72; /* 호버 시 사용자 지정 색상 적용 */
}

/* PC Header - 사용자 스타일 반영 */
.header_top {
    text-align: center; padding: 20px 0;
    transition: all 0.4s ease;
}
.top_logo img { height: 50px; } /* 사용자 요청 사이즈 */





/* 내비게이션 & 메가 메뉴 스타일 */
.main_navigation {
    position: relative;
    /* 사용자 요청대로 border 제거 */
}
.main_navigation > ul {
    display: flex; justify-content: center;
    list-style: none; margin: 0; padding: 0;
}
/* 1차 메뉴 - 사용자 스타일 반영 */
.main_navigation > ul > li > a {
    display: block;
    padding: 25px 0px; /* 사용자 요청 간격 */
    color: #796b72; /* 스크롤 전 기본 흰색 유지 */
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    transition: color 0.3s;
	width:240px;
	text-align:center;
}
.main_navigation > ul > li > a:hover {
    color: #796b72;
	font-weight: 800; /* 사용자 요청 호버 스타일 */
	width:240px;
}
/* Main Visual Area */
#main_visual {
    position: relative; width: 100%; height: 100vh;
    overflow: hidden; color: #796b72;
}
.main_visual_inner { position: relative; z-index: 2; }

/* Header */
#main_header {
    position: fixed; top: 0; left: 0;
    width: 100%; z-index: 999;
    transition: background-color 0.4s ease;
}
#main_header:not(.scrolled):hover .main_navigation > ul > li > a {
    color: #796b72; /* 호버 시 사용자 지정 색상 적용 */
}

#main_header.menu_active {
	background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(250%) blur(5px);
}
#main_header.menu_active .main_navigation > ul > li > a {
    color: #796b72;
}

/* Main Logo */
.main_logo_area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 0px); /* 헤더 높이를 제외한 영역에서 중앙 정렬 (값 조절 필요) */
    text-align: center;
}
.main_logo_area img {
    max-width: 450px; /* 로고 최대 너비 */
    width: 80%;
}

/* 메가 메뉴 패널 */
.mega_menu_panel {
    display: none; position: absolute;
    left: 0; top: 100%; width: 100%;    
	background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(250%) blur(5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-top: 1px solid #eee;
    padding: 40px 0;
}
.mega_menu_panel .menu_content {
    display: flex; justify-content: center;
    width: 1200px; margin: 0 auto;
}
.mega_menu_panel .menu_column {
    flex: 1; padding: 0 0px;
		width:240px;
}
.mega_menu_panel .menu_column ul {
    list-style: none; padding: 0; margin: 0;
}
/* ★★★ 핵심 수정: 2차 메뉴 li가 세로로 나오도록 강제 ★★★ */
.mega_menu_panel .menu_column ul li {
    display: block !important; /* !important로 다른 스타일 덮어쓰기 강화 */
	width:240px;
}
.mega_menu_panel .menu_column ul li a {
    display: block; padding: 8px 0;
    font-size: 15px; color: #666;
    text-decoration: none;
	text-align:center;
}
.mega_menu_panel .menu_column ul li a:hover { color: #c5a993; }

/* 모바일 헤더 */
.mobile_header {  }

/* 스크롤 효과 스타일 */
#main_header.scrolled {
	background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(250%) blur(5px);
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
#main_header.scrolled .header_top {
    height: 0; padding-top: 0; padding-bottom: 0;
    opacity: 0; visibility: hidden;
}
#main_header.scrolled .main_navigation > ul > li > a {
    color: #796b72; /* 스크롤 후 사용자 지정 색상 적용 */
}
#main_header.scrolled .hamburger_menu span { background-color: #333; }

/* 모바일 반응형 스타일 (생략) */
@media (max-width: 1200px) { 
.mega_menu_panel .menu_content { width: 95%; }

.header_top {
    text-align: left;
    padding: 20px ;
    transition: all 0.4s ease;
}
.header_top img{
    text-align: left;
    /*margin-left: 20px ;*/
    transition: all 0.4s ease;
	max-width:50%
}
.main_logo_area img {
    max-width: 450px;
    width: 60%;
}

.mobile_logo img {max-width: 450px; width: 50%;padding: 20px;}


}
@media (max-width: 1024px) { .main_navigation { display: none; } }
@media (max-width: 768px) {

}




/* Philosophy Section */
#philosophy-section {
    position: relative; /* 자식 요소의 absolute 위치 기준 */
    margin: 250px 0 0 0; /* 상하 여백, 좌우 여백은 자식 요소에서 처리 */
    overflow: hidden; /* float 해제 및 넘치는 이미지 숨김 방지 */
}

.philosophy-content-wrapper {
    max-width: 1480px; /* 컨텐츠 폭 고정 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 20px; /* 좌우 여백 */
    position: relative; /* 내부 요소의 absolute 기준 */
    display: flex; /* 텍스트와 하단 박스 정렬을 위해 추가 (나중에 사용될 수 있음) */
    flex-direction: column; /* 기본적으로 세로 정렬 */
    align-items: flex-start; /* 텍스트 왼쪽 정렬 */
    z-index: 20; /* 이미지보다 위에 오도록 */
}

.philosophy-top-content { /* 텍스트 부분 */
    width: 48%; /* 이미지 비율에 맞춰 텍스트 영역 너비 조정 */
    padding-right: 20px; /* 오른쪽 이미지와의 간격 (이젠 의미가 바뀜) */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    margin-bottom: 80px; /* 아래 박스와의 간격 */
}

.philosophy-subtitle {
    font-family: 'MaruBuriLight';
    font-size: 1rem;
    color: #796b72;
    letter-spacing: 2px;
    margin-bottom: 8px;


}

.philosophy-title {
    font-size: 3.2rem;
    color: #796b72;
    line-height: 1.3;
    margin-bottom: 30px;
    font-family: 'MaruBuriLight';
}

.philosophy-description {
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 25px;
    line-height: 1.6;
    font-family: 'MaruBuriLight';

}

.philosophy-detail {
    font-size: 0.95rem;
    color: #777;
    line-height: 1.8;
}

.philosophy-image-right {
    position: absolute; /* 절대 위치 */
    right: 0; /* 화면 오른쪽 끝에 정확히 붙도록 */
    top: -80px; /* 이미지의 상단 여백 조절 (텍스트와 겹치는 시점 조절) */
    width: 45vw; /* 뷰포트 너비의 45%를 차지하도록 (화면 폭에 반응) */
    height: auto; /* 높이는 비율에 맞춰 자동 */
    max-height: 500px; /* 이미지 높이 제한 (필요시) */
    overflow: hidden;
    z-index: 10; /* 텍스트 아래에 오도록 (하지만 일부 겹침을 위해 z-index 조정) */
}

.philosophy-image-right img {
    width: 100%;
    height: 100%; /* 부모의 height를 꽉 채우도록 */
    display: block;
    object-fit: cover; /* 이미지가 잘리지 않고 채워지도록 */
}


/* Bottom 3 Boxes (max-width:1280px 컨테이너 안에 있으므로, 기존 스타일 유지) */
.philosophy-bottom-boxes {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 100px; /* 이미지와의 겹침 고려하여 마진 조정 필요할 수 있음 */
    position: relative; /* Z-index를 위해 추가 */
    z-index: 20; /* 이미지보다 위에 오도록 */
}

.philosophy-box {
    flex: 1;
    max-width: 450px;
    padding: 30px 0px;
    background-color: #fff;
    border: 0px solid #eee;
    border-radius: 10px;
    /*box-shadow: 0 5px 15px rgba(0,0,0,0.03);*/
    text-align: left;
}

.philosophy-box h3 {
    font-family: 'MaruBuriExtraLight';
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: 300;

}

.philosophy-box strong{
    font-family: 'MaruBuriBold';
    font-weight: 300;

}

.philosophy-box p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.7;
}

/* Responsive - Mobile */
@media (max-width: 1280px) {
    .philosophy-image-right {
        width: 60vw; /* 뷰포트 너비에 따라 이미지 폭 조정 */
        top: -60px; /* 이미지 상단 위치 조정 */
    }
    .philosophy-top-content {
        width: 50%; /* 텍스트 영역 너비 유지 */
    }
}

@media (max-width: 1024px) {
    #philosophy-section {
        margin: 80px 0; /* 상하 마진 조정 */
    }
    .philosophy-content-wrapper {
        padding: 0 20px;
        max-width: 960px; /* 더 작은 화면에서는 컨텐츠 폭 줄임 */
    }
    .philosophy-image-right {
        width: 65vw; /* 이미지 폭 다시 조정 */
        top: -40px; /* 이미지 상단 위치 조정 */
    }
    .philosophy-top-content {
        width: 45%; /* 텍스트 영역 너비 다시 조정 */
        font-size: 0.95rem;
    }
    .philosophy-title {
        font-size: 2.3rem;
    }

    .philosophy-bottom-boxes {
        gap: 20px;
    }
    .philosophy-box {
        padding: 25px 20px;
    }
}


@media (max-width: 768px) {
    #philosophy-section {
        margin: 60px 0;
    }
    .philosophy-content-wrapper {
        padding: 0 30px; /* 좌우 패딩 더 줄임 */
        align-items: center; /* 텍스트 중앙 정렬 */
    }

    .philosophy-top-content {
        max-width: 100%;
        width: 100%;
        padding-right: 0;
        text-align: center;
        margin-bottom: 30px;
    }
    .philosophy-subtitle {
        margin-bottom: 5px;
    }
    .philosophy-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .philosophy-description {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .philosophy-detail {
        font-size: 0.85rem;
    }

    .philosophy-image-right {
        position: static; /* 절대 위치 해제 */
        width: 100%; /* 전체 폭 차지 */
        max-width: 600px; /* 이미지 최대 폭 제한 */
        margin: 0 auto 30px auto; /* 중앙 정렬 및 하단 간격 */
        top: auto;
        left: auto;
        transform: none; /* center 정렬을 위한 transform 제거 */
    }

    .philosophy-bottom-boxes {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px; /* 상단 이미지와의 간격 조정 */
    }
    .philosophy-box {
        max-width: 500px;
        margin: 0 auto;
        padding: 30px;
    }
    .philosophy-box h3 {
        font-size: 1.8rem;
        text-align: left;
    }
    .philosophy-box p {
        font-size: 0.88rem;
        text-align: left;
    }



}









  /* 전체 푸터 영역 */
    .site-footer {
        width: 100%;
        padding: 40px 20px; /* 상하좌우 여백 */
        box-sizing: border-box; /* 패딩을 너비에 포함 */
        color: #6c6570; /* 이미지의 텍스트 색상 */
        font-size: 13px; /* 기본 폰트 크기 */
        line-height: 1.8; /* 줄 간격 */
        text-align: center; /* 텍스트 중앙 정렬 */
		background: #fcfbf9;
    }

    /* 정보 텍스트들을 감싸는 컨테이너 */
    .footer-info-container {
        max-width: 1200px; /* 최대 너비 제한 */
        margin: 0 auto; /* 중앙 정렬 */
    }

    /* '루아앤피부과' 제목 */
    .clinic-name {
        font-weight: 800; /* 좀 더 굵은 글씨체 */
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* 주소, 연락처 등 상세 정보 */
    .info-details {
        word-break: keep-all; /* 단어 단위로 줄바꿈 */
    }

    /* 정보 사이의 구분자(/) */
    .info-separator {
        margin: 0 8px; /* 구분자 좌우 여백 */
    }

    /* 저작권 정보 */
    .copyright {
        margin-top: 15px;
        font-size: 12px;
        opacity: 0.8; /* 살짝 연하게 */
    }

    /* --- 반응형 웹 디자인 (모바일 화면) --- */
    /* 화면 너비가 768px 이하일 때 적용될 스타일 */
    @media (max-width: 768px) {
        .site-footer {
            font-size: 12px; /* 모바일에서 폰트 크기 살짝 줄임 */
            line-height: 1.7;
			padding: 40px 20px 250px 20px;
        }

        /* 구분자를 숨기고, 각 정보 항목이 한 줄씩 차지하도록 변경 */
        .info-separator {
            display: none; /* 구분자 숨기기 */
        }

        .info-item {
            display: block; /* 각 항목을 블록 요소로 만들어 줄바꿈 처리 */
            margin-bottom: 2px; /* 항목 간 약간의 간격 */
        }
    }
	.mainsec05 {position:relative;width:100%;;padding:100px 0;}
	.mainsec05 .mainwrap {width:1180px;margin:0 auto;}
	.mainsec05 .mainwrap 
	.mainsec05_title01 {color:#A0665C;font-size:2em;margin-top:0px;font-weight:500}

	.mainsec05 .slider {
		position: relative;
		max-width: 600px; /* 배너 최대 너비 */
		margin: auto;
		overflow: hidden;
	}

	.mainsec05 .slides {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}

	.mainsec05 .slide {
		min-width: 100%;
		box-sizing: border-box;
	}

	.mainsec05 .slide img {
		width: 100%;
		display: block;
	}

    @media (max-width: 1020px) {
	
	.mainsec05 {
		position: relative;
		width: 100%;
		padding: 0px 0;
	}

    }


 /* --- ▼▼▼ 여기부터 수정됨 ▼▼▼ --- */

    /* 전체 섹션 컨테이너 */
    .doctor-profile-section {
        max-width: 1200px;
        margin: 50px auto 150px;
        padding: 40px 0;
        background-color: #fff;
        
        /* [변경점] flex에서 grid 레이아웃으로 변경하여 비율을 명확하게 제어 */
        display: grid;
        grid-template-columns: 2fr 3fr; /* 이미지를 2, 텍스트를 3의 비율로 설정 */

        gap: 80px; /* 이미지와 텍스트 사이 간격 */
        align-items: center;
    }

    /* 의사 이미지 영역 (flex 속성 제거) */
    .doctor-image-container {
        /* flex: 1; 이 속성은 이제 필요 없습니다. */
        min-width: 0; /* grid 레이아웃에서 너비 축소를 위해 추가 */
    }

    /* --- ▲▲▲ 여기까지 수정됨 ▲▲▲ --- */


    .doctor-image-container img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 텍스트 정보 전체 영역 (flex 속성 제거) */
    .doctor-info-container {
        /* flex: 1.5; 이 속성은 이제 필요 없습니다. */
    }

    /* '피부과전문의' 태그 */
    .specialty-tag {
        display: inline-block;
        background-color: #796b72;
        color: white;
        padding: 4px 10px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 4px;
        margin-bottom: 15px;
    }

    /* 원장 이름 */
    .doctor-name {
        font-size: 52px;
        font-weight: 700;
        margin: 0;
    }
     .doctor-name span{
        font-size: 52px;
        font-weight: 300;
        margin: 0;
    }   
    .doctor-name .eng-name {
        font-size: 20px;
        color: #666;
        font-weight: 300;
        margin-left: 10px;
		font-family: 'MaruBuriLight';

    }
    
    /* 슬로건 */
    .slogan {
        font-size: 2.5em;
        font-weight: 300;
        margin-top: 20px;
        line-height: 1.5;
        color: #111;
		font-family: 'MaruBuriLight';
    }
    
    /* 소개글 */
    .description {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
        margin-top: 50px;
        padding-bottom: 50px;
        border-bottom: 0px solid #eee;
    }

    /* 약력, 학회활동 그리드 */
    .credentials-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 1:1 비율의 2개 컬럼 */
        gap: 30px;
        margin-top: 30px;
    }

    .credential-column h3 {
        font-size: 18px;
        font-weight: 700;
        margin-top: 0;
        padding-bottom: 10px;
        border-bottom: 0px solid #333;
    }

    .credential-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 15px;
        line-height: 2;
        color: #444;
    }

    .credential-column ul li::before {
        content: '·';
        margin-right: 8px;
        font-weight: bold;
    }

    /* --- 반응형 웹 디자인 (모바일/태블릿) --- */
    /* 화면 너비가 992px 이하일 때 */
    @media (max-width: 992px) {
        .doctor-profile-section {
            /* [변경점] grid 레이아웃을 세로로 쌓기 */
            grid-template-columns: 1fr;
            padding: 30px;
            gap: 30px;
        }
        
        .doctor-name { font-size: 28px; }
        .slogan { font-size: 20px; }
		.doctor-name .eng-name {
    font-size: 16px;
    color: #666;
    font-weight: 300;
    margin-left: 10px;
    font-family: 'MaruBuriLight';
}

    }
    
    /* 화면 너비가 768px 이하일 때 */
    @media (max-width: 768px) {
        .credentials-grid {
            grid-template-columns: 1fr; /* 1개 컬럼으로 변경 */
            gap: 40px; /* 세로 간격 조정 */
        }
        
        .doctor-name { font-size: 24px; }
        .doctor-name span{ font-size: 24px; }

        .slogan { font-size: 18px; }
        .description { font-size: 14px; }
        .credential-column ul { font-size: 14px; }
    }






.louave-signature {
  background: url('/theme/louave/img/sig_bg.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 200px 0 0 0;
  color: white;
  text-align: left;
}

.louave-signature .container {
  max-width: 1200px;
  margin: 0 auto;
  color:#796b72
}

.louave-signature .title {
  margin-bottom: 40px;
}

.louave-signature .title h2 {
  font-size: 52px;
  margin-bottom: 10px;
  font-weight: 300;
}
.louave-signature .title h2 strong{
  font-size: 52px;
  margin-bottom: 10px;
  font-weight: 700;
}

.louave-signature .title span {
  font-size: 16px;
  padding-bottom: 40px;
  font-weight: 300;
  letter-spacing:0.5em;
  font-family: 'MaruBuriBold';
}

.louave-signature .title p {
  font-size: 16px;
  color: #796b72;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  background: white;
  color: #333;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s;
  text-align: left;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  display: block;
}

.card .text {
  padding: 30px;
}

.card .text h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color:#796b72;
}

.card .text p {
  font-size: 14px;
  color: #666;
}

/* 반응형 */
@media (max-width: 1024px) {
.louave-signature .container {
  padding:0 30px
}

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }



}

@media (max-width: 600px) {
  .louave-signature .title h2 {
    font-size: 24px;
  }

  .louave-signature .title p {
    font-size: 14px;
  }

  .card .text h3 {
    font-size: 16px;
  }

  .card .text p {
    font-size: 13px;
  }
}

/* 하단 고정 배너 */
.fixed-banner {
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 100px 0 0 0;
}


@media (max-width: 768px) {
.fixed-banner img {
  width:100%
}


}



/* Our Product Section */
.our-product {
  padding: 100px 0;
  background: #fff;
}

.our-product .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}


.main-title strong {
  font-weight: 700;
}

.description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* 그리드 구성 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.product-item {
  text-align: left;
}

.product-item img {
  width: 100%;
  border-radius: 8px;
}

.product-item h3 {
  font-size: 24px;
  color: #85787f;
  margin: 18px 0 8px;
}

.product-item p {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
}

/* 버튼 스타일 */
.button-wrapper {
  text-align: center;
  margin-top: 50px;
}

.more-btn {
  padding: 10px 24px;
  font-size: 14px;
  border: 1px solid #aaa;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}

.more-btn:hover {
  background: #f5f5f5;
}

/* 반응형 (모바일: 2열) */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .section-header {
    margin-bottom: 40px;
  }
}

/* 작은 모바일 폰 최적화 */
@media (max-width: 480px) {
  .main-title {
    font-size: 28px;
  }
  .product-item h3 {
    font-size: 16px;
  }
  .description {
    font-size: 14px;
  }
}


/* ============================= */
/* 루아베 전후사진 (Before & After) */
/* ============================= */
.before-after {
  padding: 0 0 200px 0;
  background: #fff;
}

.before-after .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

/* 상단 구분선 */
.section-line {
  width: 100%;
  max-width:1280px;
  height: 1px;
  background: #ddd;
  margin:150px auto;
}

/* 제목영역 */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}
.sub-title {
font-family: 'MaruBuri';
  font-size: 14px;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: 8px;
  font-weight:700;
  letter-spacing:1em
}

.main-title {

  font-size: 52px;
  color: #7a6f7c;
  font-weight: 400;
}

.main-title strong {
  font-weight: 700;
}

/* 전후사진 이미지 */
.single-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

/* 인스타그램 및 설명 */
.insta {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 24px;
}
.desc {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-top: 8px;
  line-height: 1.5;
  font-family: 'MaruBuriLight';
  font-weight:300;
}

/* 반응형 최적화 */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }
  .single-image img {
    border-radius: 4px;
  }

.before-after {
  padding: 0 0 100px 0;
  background: #fff;
}
}

@media (max-width: 480px) {
  .main-title {
    font-size: 28px;
  }
  .desc {
    font-size: 14px;
  }
}



/* ===================================== */
/* Location & Reserve Section (Full‑width) */
/* ===================================== */
.location-reserve {
  padding: 0;
  background: #fff;
}

/* container 풀‑와이드 오버라이드 */
.location-reserve .container.fullwidth {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.location-reserve .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}

/* 지도 영역 */
.map-area iframe {
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 400px;
}

/* 정보 영역 */
.info-area {
  position: relative;
  overflow: hidden;
}
.info-area .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.info-area .content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 60px;
  background-image: url('/theme/louave/img/map_bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* 타이포그래피 */
.section-subtitle {
  margin-bottom: 8px;
  text-transform: uppercase;

    font-family: 'MaruBuri';
    font-size: 14px;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.5em;


}
.info-area .main-title {
  font-size: 42px;
  margin-bottom: 12px;
  font-weight: 400;
  color: #efd89e;
}
.info-area .main-title strong {
  font-weight: 700;
  color: #efd89e;
}
.address,
.hours {
  font-size: 16px;
  margin: 12px 0;
  line-height: 1.5;
}
.address i,
.hours i {
  margin-right: 8px;
  vertical-align: middle;
}
.phone {
  font-size: 24px;
  font-weight: 500;
  margin: 12px 0;
  color:#f2ece1
}
.phone span {
  color: #f2ece1;
}
.note {
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
}

/* 버튼 스타일 */
.btn-detail {
  align-self: start;
  padding: 10px 28px;
  font-size: 14px;
  border: 1px solid #ffe58a;
  background: transparent;
  border-radius: 30px;
  color: #ffe58a;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-detail:hover {
  background: rgba(255, 229, 138, 0.2);
}

/* 반응형: 모바일(≤768px)에서 1열, 지도→정보 */
@media (max-width: 768px) {
  .location-reserve .grid {
    grid-template-columns: 1fr;
  }
  .map-area { order: 1; }
  .info-area { order: 2; }
  .info-area .content {
    padding: 100px 30px;
  }
  .main-title { font-size: 28px; }
  .phone { font-size: 20px; }
}

/* 작은 화면 최적화 */
@media (max-width: 480px) {
  .section-subtitle { font-size: 12px; }
  .address, .hours, .note { font-size: 14px; }
  .btn-detail {
    padding: 8px 20px;
    font-size: 13px;
  }
}