/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

/* ==========================================================================
   ½ºÀ§Æ¼½ºÇ¬ ºÎƼũ ÆäÀÌÁö ¸ð¹ÙÀÏ ¹öÀü ½ºÅ¸ÀϽÃÆ®
   ========================================================================== */

/* ±âº» ¸®¼Â ¹× ¸ð¹ÙÀÏ °¡·Î½ºÅ©·Ñ ¹æÁö */
#wrap { 
    width: 100%; 
    overflow-x: hidden; 
}
#contentWrapper {
    width: 100%;
}
#contentWrap {
    width: 100%;
    padding: 0;
}
#content {
    width: 100%;
    overflow: hidden;
}

/* 1. »ó´Ü Çì·Î ¿µ¿ª (Hero Area Layout & Animation) */
.boutique-hero-wrap {     
    padding: 0; /* ¸ð¹ÙÀÏ Ç®½ºÅ©¸° ¹è³ÊÈ­ */
    position: relative;
    width: 100%;
}
.right_fixed { display: none; }
.boutique-group { padding: 0px 0px 0px 0px; }

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

.boutique-hero-img-box img {
    width: 100%;    
    display: block;
    height: calc(100vh); /* È­¸é Àüü ³ôÀÌ¿¡¼­ Çì´õ ³ôÀ̸¸Å­ »« ³ª¸ÓÁö¸¦ ²Ë ä¿ò */
    object-fit: cover;
}

/* ¿À·ù ¼öÁ¤: ÀÎÁ¢ ÇüÁ¦ ¼±ÅÃÀÚ ¹ö±× ÇØ°á ¹× Ãʱ⠰¡½Ã¼º È®º¸ */
.boutique-hero-info-box { 
    position: absolute;
    bottom: 55px; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; 
    color: #fff; 
    width: 90%; 
    max-width: 100%; 
    padding: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease 0.3s, visibility 0.5s ease 0.3s;
}

/* ºÎ¸ð(.boutique-hero-wrap) ³»ºÎ¿¡ aos-animate°¡ ÀÛµ¿Çϸé ÇÏÀ§ ÀÎÆ÷ ¹Ú½º°¡ º¸À̵µ·Ï ¼öÁ¤ */
.boutique-hero-wrap .aos-animate ~ .boutique-hero-info-box,
.boutique-hero-wrap:has(.aos-animate) .boutique-hero-info-box,
.boutique-hero-info-box.active {
    opacity: 1;
    visibility: visible;
}

.brand-title-en { 
    font-family: 'Josefin Sans', sans-serif; 
    display: inline-block;
    font-size: 1.2rem; 
    font-weight: 500; 
    letter-spacing: 0.01rem;
    line-height: 1.2; 
}
.brand-title-sub { font-family: 'Josefin Sans', sans-serif; display: inline-block; font-size: 0.8rem; letter-spacing: 0.01rem; margin-left: 3px; margin-top: 5px; }
.boutique-hero-desc { 
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
    margin: 0px 0px 15px 0px;
    letter-spacing: 0.02rem;
    word-break: keep-all;
}

.boutique-hero-info-box .boutique_visit_btn { 
    min-width: 160px; 
    text-align: center; 
    padding: 12px 24px; 
    display: inline-block; 
    font-size: 13px; 
    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;
    box-sizing: border-box;
}
.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;
    padding: 0 25px;
    box-sizing: border-box;
}
.why-boutique-title {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    padding: 50px 0px 20px 0px;
    word-break: keep-all;
}
.why-boutique-desc {
    font-size: 0.85rem;
    color: #111111;
    text-align: center;
    line-height: 1.6;
    letter-spacing: initial;
    padding: 0px;
    word-break: keep-all;
}
.why-boutique-sub {
    font-size: 0.85rem; 
    text-align: center; 
    line-height: 1.6; 
    letter-spacing: initial; 
    padding: 10px 0px; 
    font-weight: 400;
    color: #111111;
    word-break: keep-all;
}

/* 3. °æÇè ¾È³» ¹× ±¸±Û ¾ÆÀÌÄÜ ¼¼Æà (Experience Section) */
.brand-exp-wrap { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 25px;
    box-sizing: border-box;
}
.brand-exp-title { 
    font-family: 'Noto Serif KR', serif !important; 
    font-size: 1.4rem; 
    text-align: center;  
    font-weight: 600;  
    letter-spacing: -0.01em; 
    line-height: 1.4; 
    padding: 50px 0px 40px 0px; 
}
.exp_title { 
    font-family: 'Josefin Sans', sans-serif; 
    letter-spacing: 0.05rem; 
    text-align: center; 
    font-size: 11px; 
    line-height: 13px;
    font-weight: 600; 
    padding: 15px 0px 0px 0px; 
}
.brand-exp-list {
    text-align: center;    
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 ¸ð¹ÙÀÏ ±×¸®µå ¹èÄ¡ */
    gap: 40px 15px;
    list-style: none;
}
.brand-exp-item {               
    width: 100%; 
    text-align: center; 
    display: block; 
    margin: 0;
    vertical-align: top;
    box-sizing: border-box;
}
.brand-exp-icon .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important; 
    font-size: 40px;          
    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: 10px 0px 0px 0px; 
    color: #7a7062; 
    font-weight: 400; 
    font-size: 12px; 
    line-height: 1.5; 
    letter-spacing: 0.01em; 
    word-break: keep-all;
}
.brand-exp-20 { 
    font-family: 'Noto Serif KR', serif !important; 
    font-size: 34px; 
    font-style: italic; 
    font-weight: 600; 
    color: #a99d8c; 
    line-height: 1; 
}
.anniversary-icon { 
    font-size: 32px; 
    font-weight: 600; 
    color: #a99d8c; 
    position: relative; 
    display: inline-block; 
    letter-spacing: -0.1rem; 
    line-height: 1.2; 
}
.anniversary-icon::after {
    content: "¡ß";
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px; 
    line-height: 1;
    color: #7a6f5d; 
    -webkit-text-stroke: 1px #ffffff; 
    paint-order: stroke fill; 
}
.brand-exp-plus { font-size: 20px; font-weight: 500; padding-left:3px; color: #a99d8c; }

/* ³ôÀÌ ±ÕÀÏ Á¤·Ä ó¸® */
.brand-exp-icon {
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    height: 50px;          
    margin-bottom: 5px;    
}

/* 4. ÇÁ¶óÀ̺ø °ø°£ ¼³¸í ¿µ¿ª (Private Space Section) */
.boutique-private-section { 
    max-width: 100%;
    padding: 50px 15px 0px 15px; 
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.private-image-box { 
    width: 100%;      
}
.boutique-private-section img { 
    width: 100%; 
    height: auto;
    display: block;
}
.private-text-box { width: 100%; }
.private-section-title { 
    font-family: 'Josefin Sans', sans-serif; 
    letter-spacing: 0.05em; 
    text-align: center; 
    font-size: 1.1rem; 
    font-weight: 500; 
    color: #a99d8c;
    padding: 20px 0px 20px 0px;
}
.private-section-subtitle { 
    font-family: 'Noto Serif KR', serif !important;
    letter-spacing: -0.01em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 50px 0px 0px 0px; 
    word-break: keep-all;
    line-height: 1.4;
}
.private-body-wrap { 
    text-align: center; 
    font-size: 0.85rem;
    line-height: 1.6; 
    letter-spacing: 0.01em; 
    word-break: keep-all; 
    padding: 0px 10px 60px 10px;
}
.private-body-text {
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.6;
    letter-spacing: initial;
    color:#111111;
    padding-bottom: 30px; 
}
.private-body-text p { padding: 10px 0px; margin: 0; }
.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: 160px; 
    width: 100%;
    max-width: 280px;
    text-align: center; 
    padding: 12px 20px; 
    display: inline-block; 
    font-size: 13px; 
    border: 1px solid #111111; 
    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;
    box-sizing: border-box;
}
.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: 160px; 
    width: 100%;
    max-width: 280px;
    text-align: center; 
    padding: 12px 20px; 
    display: inline-block; 
    font-size: 13px; 
    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 auto 0px auto; 
    text-decoration: none;
    box-sizing: border-box;
}
.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: 20px auto 0px auto !important;
    padding: 10px 0px !important;
    max-width: 160px;
    display: block;
    text-align: center;
    border: 1px solid #111;
    background-color: #fff;
    color: #111;
    text-decoration: none;
    font-size: 13px;
}

/* 6. µ¿¿µ»ó ÀÎÆ®·Î ¿µ¿ª (Intro Video Section) */
.boutique-intro-section { max-width: 100%; width: 100%; padding: 0 15px; }
#video-container { max-width: 100%; margin: 0 auto; }
.video-player-wrap { position: relative; left: 0; transform: none; font-size: 0px; width: 100%; }
.video-player-wrap video { width: 100%; display: block; min-height: 380px; object-fit: cover; height: auto; }

/* 7. ÇÏ´Ü Ä«Æä24 °Ô½ÃÆÇ ¿¬µ¿ ¿µ¿ª */
#bottom-board-promo-flex { 
    max-width: 100%; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 20px 40px 20px;
    box-sizing: border-box;
}
.board-notice-box { font-family: 'Josefin Sans', sans-serif; margin: 0; }
.board-notice-title { border-bottom: 2px solid #1e1e20; text-align: center; }
.board-notice-content a { font-family: 'Lato','Noto Sans KR',sans-serif; font-size: 13px; color: #000; text-decoration: none; }
.board-notice-content ul { padding: 8px 0px 0px 0px; list-style: none; margin: 0; }
.board-notice-content li { padding: 0px 0px 5px 0px; text-align: left; }
.board-table-header { display: flex; margin-bottom: 8px !important; border-bottom: 1px solid #d9d9d9; padding-bottom: 5px; font-size: 11px; }
.board-row-item { display: flex; padding: 6px 0; font-size: 12px; align-items: center; }
.board-header-subject { padding: 8px 0px; flex-basis: 75%; max-width: 75%; text-align: left; }
.board-row-subject { flex-basis: 75%; max-width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.board-header-date { padding: 8px 0px; flex-basis: 25%; max-width: 25%; text-align: right; }
.board-row-date { padding: 3px 0px; flex-basis: 25%; max-width: 25%; text-align: right; color: #888; }
.board-row-new-icon { padding-left: 3px; display: inline-block; vertical-align: middle; }
.board-row-new-icon img { height: 12px; width: auto; }

/* 8. ¿À½Ã´Â±æ ¸ÅÀå »ó¼¼ Á¤º¸ */
.boutique-map-section { padding: 50px 15px 0px 15px; }
.boutique-map-section img { 
    width: 100%; 
    height: auto;
    display: block;
}
.map-location-image { margin-bottom: 40px; }
.map-detail-info { font-size: 13px; width: 100%; text-align: left; }
.map-location-title { font-family: 'Josefin Sans', sans-serif; color: #111; letter-spacing: 1px; font-size: 17px; font-weight: 500; }
.map-address-ko { padding: 20px 0px 0px 0px; line-height: 1.4; word-break: keep-all; font-size: 14px; }
.map-address-en { padding: 5px 0 0 0; color: #111; font-size: 12px; line-height: 1.4; word-break: keep-all; }
.map-contact-phone { padding: 10px 0px; font-weight: 400; letter-spacing: 0.05rem; font-size: 12px; color: #111111; }
.map-contact-off { padding: 0px 0px 10px 0px; font-weight: 400; letter-spacing: 0.05rem; font-size: 11px; color: #111111; line-height: 1.4; word-break: keep-all; }
.map-parking-notice { font-size: 12px; word-break: keep-all; letter-spacing: 0.01rem; color: #3c3c3c; line-height: 1.5; padding: 0px 0px 0 0px; }
.map-action-wrap { margin: 40px 0px 50px 0px; text-align: center; }


/* ÇÏ´Ü °íÁ¤ ¹Ù (±âº» ¼û±è ¹èÄ¡ ÈÄ .show ¹ß»ý ½Ã ½½¶óÀÌµå ¾÷ ³ëÃâ) */
body .shop-fixed-bottom-bar { 
    position: fixed; 
    bottom: -100px; /* ÃʱâÈ­¸é ¼û±è ó¸® */
    left: 0; 
    width: 100%; 
    padding: 12px 16px; 
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box; 
    z-index: 99999; 
    display: flex; 
    gap: 10px; 
    background: #fff; 
    border-top: 1px solid #eaeaea; 
    transition: bottom 0.4s ease-in-out; /* µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú */
}

/* ½ºÅ©·Ñ Á¶°Ç ¸¸Á· ½Ã ³ëÃâ Ŭ·¡½º */
body .shop-fixed-bottom-bar.show {
    bottom: 0;
}

body .shop-fixed-bottom-bar a { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 54px; 
    font-size: 0.8rem; 
    text-decoration: none; 
    font-weight: 500; 
}
body .shop-fixed-bottom-bar .shop-btn-talk { 
    width: 80px; 
    flex-shrink: 0; 
    color: #3A1D1D; 
    background-color: #f4f0ea; 
}
body .shop-fixed-bottom-bar .shop-btn-naver { 
    flex-grow: 1; 
    color: #fff; 
    background: #000; 
}

/* ÇÏ´Ü »ó´ã ¼½¼Ç */ 
.visit_btn_wrap, .kakao_btn_wrap { text-align:center; }
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 50px 0px 0px 0px; border-top: 1px solid #c7c7c7; }
.what_detail { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.what_title_warp { margin: 0px 0px 100px 0px; }
.visit_btn { min-width: 160px; width: 100%; max-width: 280px; text-align: center; padding: 12px 20px; display: inline-block; font-size: 13px; border: 1px solid #111111; 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; box-sizing: border-box; }        
.kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 50px 0px 20px 0px; border-top: 1px solid #c7c7c7; margin-top: 50px;  }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.85rem; }
.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 */