/* BASIC css start */
/* ==========================================================================
   스위티스푼 부티크 페이지 PC 버전 스타일시트
   ========================================================================== */
   
body {
    overflow-x: hidden;
}   

/* 1. 상단 헤로 영역 (Hero Area Layout & Animation) */
.boutique-hero-wrap { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;  padding: 0; }
.right_fixed { display: none; }

.boutique-hero-img-box { 
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: transparent !important;
}


[data-aos].aos-animate + .boutique-hero-info-box,
.aos-init.aos-animate .boutique-hero-info-box,
.boutique-hero-wrap:has(.aos-animate) .boutique-hero-info-box {
    opacity: 1;
    visibility: visible;
}


.boutique-hero-img-box.aos-animate::before,
[data-aos].aos-animate + .boutique-hero-img-box::before,
.boutique-hero-wrap:has(.aos-animate) .boutique-hero-img-box::before {
    opacity: 1;
}

.boutique-hero-img-box img {
    width: 100%;
    height: auto;
    display: block;
}

.boutique-hero-info-box { 
    position: absolute;
    top: 68%;
    left: 27%;
    transform: translate(-50%, -50%);
    text-align: left; 
    color: #fff; 
    width: auto; 
    max-width: 50%; 
    padding: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease 0.3s, visibility 0.5s ease 0.3s;
}

[data-aos].aos-animate + .boutique-hero-info-box,
.aos-init.aos-animate .boutique-hero-info-box,
.boutique-hero-wrap:has(.aos-animate) .boutique-hero-info-box {
    opacity: 1;
    visibility: visible;
}

.brand-title-en { 
    font-family: 'Josefin Sans', sans-serif; 
    display: inline-block;
    font-size: 25px; 
    font-weight: 500; 
    letter-spacing: 0.05em; 
    line-height: 1.2; 
}
.brand-title-sub { 
    font-family: 'Josefin Sans', sans-serif; 
    display: inline-block;
    font-size: 15px;
    letter-spacing: 0.05rem;
    margin-left: 5px;
}
.boutique-hero-desc { 
    font-size: 16px;
    text-align: left;
    line-height: 1.8rem;
    margin: 5px 0px 35px 0px;
    letter-spacing: 0.05rem;
}

.boutique-hero-info-box .boutique_visit_btn { 
    min-width: 200px; 
    text-align: center; 
    padding: 1.2em; 
    display: inline-block; 
    font-size: 0.9rem; 
    border: none; 
    position: relative; 
    overflow: hidden; 
    background-color: #f4f0ea; 
    color: #111111; 
    z-index: 1; 
    transition: color 0.4s ease, background-color 0.4s ease; 
    cursor: pointer;
    text-decoration: none;
}
.boutique-hero-info-box .boutique_visit_btn::before { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    border: none;
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #111111; 
    z-index: -1; 
    transform: scaleY(0); 
    transform-origin: bottom; 
    transition: transform 0.4s ease; 
}
.boutique-hero-info-box .boutique_visit_btn:hover { 
    background-color: transparent !important; 
    color: #ffffff; 
}
.boutique-hero-info-box .boutique_visit_btn:hover::before { 
    transform: scaleY(1); 
}

/* 2. Why Boutique 브랜드 메시지 */
.why-boutique-info-box {
    margin: 0px auto;
    text-align: center;
}
.why-boutique-title {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 2.2rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    padding: 120px 0px 30px 0px;
}
.why-boutique-desc {
    font-size: 1rem;
    text-align: center;
    line-height: 1.8rem;
    letter-spacing: initial;
    padding: 0px 0px 0px 0px;
}
.why-boutique-sub {
    font-size: 1rem; 
    text-align: center; 
    line-height: 1.8rem; 
    letter-spacing: initial; 
    padding: 0px 0px 0px 0px; 
    font-weight: 400;
}

/* 3. 경험 안내 및 구글 아이콘 세팅 (Experience Section) */
.brand-exp-wrap { max-width: 1480px; margin: 0 auto; }
.brand-exp-title { 
    font-family: 'Noto Serif KR', serif !important; 
    font-size: 2.2rem; 
    text-align: center;  
    font-weight: 600;  
    letter-spacing: -0.01em; 
    line-height: 1.2; 
    padding: 120px 0px 80px 0px; 
}
.exp_title { 
    font-family: 'Josefin Sans', sans-serif; 
    letter-spacing: 0.1rem; 
    text-align: center; 
    font-size: 16px; 
    font-weight: 500; 
    padding: 30px 0px 0px 0px; 
}
.brand-exp-list {
    text-align: center;
    margin-bottom: 140px;
    padding: 0;
}
.brand-exp-item {               
    width: 20%; 
    text-align: center; 
    display: inline-block; 
    list-style: none; 
    margin: 0px 10px;
    vertical-align: top;
}

.brand-exp-icon {
    display: flex;
    justify-content: center;
    align-items: center; /* [기존 flex-end에서 center로 변경] 아이콘들을 세로 정렬 중앙으로 맞춰줍니다 */
    height: 50px;         
    margin-bottom: 5px;   
}

.brand-exp-icon .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important; 
    font-size: 54px;          
    color: #a99d8c;            
    display: inline-block;    
    direction: ltr;
    word-wrap: normal;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased; 
    text-transform: none;
    letter-spacing: normal;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}
.brand-exp-text { padding: 20px 0px 0px 0px; color: #7a7062; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.02em; }
.brand-exp-20 { font-family: 'Noto Serif KR', serif !important; font-size: 45px; font-style: italic; font-weight: 600; color: #a99d8c; line-height: 1; }
.anniversary-icon { 
    font-size: 38px; 
    font-weight: 600; 
    color: #a99d8c; 
    position: relative; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1; 
    letter-spacing: -0.18rem;     
    padding: 0 4px; 
}
.anniversary-icon::after {
    content: "◆";
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -48%); 
    z-index: 1; 
    font-size: 12px; 
    line-height: 1;
    color: #7a6f5d; 

    /* 2. 외곽에 흰색 테두리 넣기 */
    -webkit-text-stroke: 1.5px #ffffff; 
    paint-order: stroke fill; 
}

.brand-exp-plus { font-family: 'Noto Serif KR', serif !important; font-size: 25px; font-weight: 600; padding-left:5px; color: #a99d8c; }


/* 4. 프라이빗 공간 설명 영역 (Private Space Section) */
.boutique-private-section { 
    max-width: 1480px;
    padding: 120px 0px 0px 0px; 
    width: 100%;
    margin: 0 auto;
}
.private-image-box { width: 100%; }
.boutique-private-section img { width: 100%; }
.private-text-box { width: 100%; }
.private-section-title { 
    font-family: 'Josefin Sans', sans-serif; 
    letter-spacing: 0.2em; 
    text-align: center; 
    font-size: 1.5rem; 
    font-weight: 500; 
    padding: 40px 0px 20px 0px;
}
.private-section-subtitle { 
    font-family: 'Noto Serif KR', serif !important;
    letter-spacing: -0.01em;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 120px 0px 0px 0px; 
}
.private-body-wrap { 
    text-align: justify; 
    font-size: 1.0rem; 
    line-height: 1.6rem; 
    letter-spacing: 0.02em; 
    word-break: keep-all; 
    padding-bottom: 120px; 
}
.private-body-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.8rem;
    letter-spacing: initial;
    padding-bottom: 50px; 
}
.private-body-text p { padding: 20px 0px; }
.private-btn-wrap.center-align {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0 0 0;
}
.boutique-private-btn {
    min-width: 200px; 
    text-align: center; 
    padding: 1.2em; 
    display: inline-block; 
    font-size: 0.9rem; 
    border: 1px solid #ffffff; 
    position: relative; 
    overflow: hidden; 
    background-color: #111111; 
    color: #ffffff; 
    z-index: 1; 
    transition: color 0.4s ease, border-color 0.4s ease; 
    cursor: pointer;
    text-decoration: none;
}
.boutique-private-btn::before {
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #ffffff; 
    z-index: -1; 
    transform: scaleY(0); 
    transform-origin: bottom; 
    transition: transform 0.4s ease; 
}
.boutique-private-btn:hover { 
    color: #111111; 
    border-color: #111111;
}
.boutique-private-btn:hover::before { transform: scaleY(1); }

/* 5. 하단 지도 및 오시는길 안내 영역 버튼 */
.boutique-map-section .anniversary_btn.left-align {
    min-width: 200px; 
    text-align: center; 
    padding: 1.2em; 
    display: inline-block; 
    font-size: 0.9rem; 
    border: 1px solid #111; 
    position: relative; 
    overflow: hidden; 
    background-color: #fff; 
    color: #111; 
    z-index: 1; 
    transition: color 0.4s ease, border-color 0.4s ease; 
    cursor: pointer;
    margin: 10px 0 0 0;
    max-width: 300px;
    text-decoration: none;
}
.boutique-map-section .anniversary_btn.left-align::before {
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #111111; 
    z-index: -1; 
    transform: scaleY(0); 
    transform-origin: bottom; 
    transition: transform 0.4s ease; 
}
.boutique-map-section .anniversary_btn.left-align:hover { 
    color: #fff; 
    border-color: #111;
}
.boutique-map-section .anniversary_btn.left-align:hover::before { transform: scaleY(1); }

.board-notice-box .anniversary_btn.center-align {
    margin: 24px auto 0px auto !important;
    padding: 10px 0px !important;
    max-width: 180px;
    display: block;
    text-align: center;
    border: 1px solid #111;
    background-color: #fff;
    color: #111;
    text-decoration: none;
}

/* 6. 동영상 인트로 영역 (Intro Video Section) */
.boutique-intro-section { max-width: 1480px; width: 100%; margin: 0 auto; }
#video-container { max-width: 1900px; margin: 0 auto; }
.video-player-wrap { position: relative; left: 50%; transform: translateX(-50%); font-size: 0px; }
.video-player-wrap video { width: 100%; }


/* 7. 오시는길 매장 상세 정보 */
.boutique-map-section { max-width: 1480px; width: 100%; margin: 0 auto; }
.boutique-map-section img { width: 100%; }
.map-location-image { margin-bottom: 40px; }
.map-detail-info { font-size: 15px; width: 100%; }
.map-location-title { font-family: 'Josefin Sans', sans-serif; color: #000; font-size: 1.3rem; font-weight: 500; letter-spacing: 1.5px; }
.map-address-ko { padding: 20px 0px 0px 0px; }
.map-address-en { padding: 5px 0 0 0; color: #111; font-size: 14px; }
.map-contact-phone { padding: 15px 0px; font-weight: 400; letter-spacing: 0.07rem; font-size: 12px; color: #111111; }
.map-contact-off { padding: 0px 0px 15px 0px; font-weight: 400; letter-spacing: 0.07rem; font-size: 12px; color: #111111; }
.map-parking-notice { font-size: 14px; word-break: keep-all; letter-spacing: 0.01rem; color: #111; }
.map-action-wrap { margin: 30px 0px 50px 0px; text-align: left; }

/* WHAT TO KNOW */ 
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 2.2rem; text-align: center; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; padding: 100px 0px 0px 0px; max-width: 1480px; margin: 0 auto; border-top: 1px solid #c7c7c7; }
.what_detail { font-size: 1rem; text-align: center; line-height: 1.8rem; letter-spacing: initial; padding: 30px 0px 30px 0px; }

.visit_btn { min-width: 200px; text-align: center; padding: 1.2em; display: block; margin: 0 auto; font-size: 0.9rem; border: 1px solid #111; position: relative; overflow: hidden; background-color: #fff; color: #fff; z-index: 1; transition: color 0.4s ease; }
.visit_btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; z-index: -1; transform: scaleY(1); transform-origin: top; transition: transform 0.4s ease; }
.visit_btn:hover { color: #111; }
.visit_btn:hover::before { transform: scaleY(0); }

.kakao_info { letter-spacing: 0.1em; font-size: 0.9rem; text-align: center; line-height: 1.8rem; padding: 0px 0px 20px 0px; margin: 100px 0px 0px 0px; }
.kakao_btn_wrap { text-align: center; }
.kakao-link { display: inline-block; text-decoration: none; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.9rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }
/* BASIC css end */