.window {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overscroll-behavior: none; /* 모바일 바운스 효과 제거 */
}
.window .header {
  position: absolute; 
  height: 50px;
  width: 100%;
  background: #21252f;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out, background 1s ease-out;
  transition: all 0.5s ease-out, background 1s ease-out;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 100;
}
.window .header .menu1_btns {
    width: 100%;
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}




.window .menu1_content {
	padding: 50px 0 0;
	text-align: justify;
	overflow: scroll;
	max-height: 100%;
	position: relative;
}
.window .menu1_content::-webkit-scrollbar {
	display: none;
}

/* 샘플카트 수량 */
.window .header .sample_pick_count {
	display: block;
}


/* ↓↓↓헤더 스타일 리뉴얼 수정 : 2024.09.05↓↓↓ */

.header#main_header.user {
    z-index: 101;
}
.fixedBottomMenuWrapper.user {
    z-index: 99;
}
.fixedBottomMenuWrapper.filter {
    z-index: 102;
}
.fixedBottomMenuWrapper.filter .bottomMenuListBox{
    bottom: -64px;
    transition: 0.3s;
}
#main_header .menu1_btns ul {
    height: 100%;
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#main_header .menu1_btns ul li:last-of-type{
    display: flex;
    align-items: center;
    gap: 10px;
}
#main_header .menu1_btns ul li:last-of-type button{
    cursor: pointer;
    font-size: var(--bodyFontSize);
}
/* ↑↑↑헤더 스타일 리뉴얼 수정 : 여기까지↑↑↑ */



/* 마이페이지 , 샘플 메뉴 */
.my_menu_btn { 
    height: 46px;
    border-bottom: 1px solid #ededed;
    font-size: var(--bodyFontSize);
    font-family: "Pretendard";
    font-weight: 300;
    display: flex;
    align-items: center;
    padding: 0 14px;
}


/* 로그인 */
.HeaderfixedLayer {
    background-color: rgba(0, 0, 0, 0.6);
    content: '';
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: 0.3s;
}
/*
    로그인 마이페이지 공통
*/
.menu_layers {
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    z-index: 102;
    /* top: 50px;*/
    left: 0;
    display: none;
}
.menu_layers:before {
    position: absolute;
    content: "";
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg) translateX(-50%);
    background: #ffffff;
}
.menu_layers_title {
    border-bottom: 1px solid #ededed;
}
.menu_layers_title, .menu_layers_title span {
    padding: 0 14px;
    position: relative;
    font-size: 16px;
    font-family: "Pretendard";
    font-weight: 300;
    text-align: center;
    line-height: 66px;
    padding: 0 14px;
}
.menu_layers_title img {
    width: 20px;
    height: auto;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%); 
}
.menu_layers_content.active {
    /* max-height: calc(100svh - 117px); */
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.menu_layers_content.active::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/* 로그인 전용 */
#login_menu.rowMode, #my_menu.rowMode{
    max-height: calc(100svh - 50px);
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
#login_menu.rowMode, #my_menu.rowMode::-webkit-scrollbar{
    display: none; /* Chrome, Safari, Opera*/
}
#login_menu form#loginForm > div {
    display: flex;
    align-items: center;
    flex-direction: column;
}
#login_menu form#loginForm {
    position: relative;
}
#login_menu form#loginForm:after {
    position: absolute;
    content: "";
    width: 100%;
    border-bottom: 1px solid #ededed;
    top: 53.5px;
}
#login_menu.menu_layers form#loginForm > div input {
    margin-top: 0 !important;
    margin: 4px 0 !important;
    width: calc(100% - 28px) !important;
}
#login_menu form#loginForm > div > div {
    width: 100%;
    border: none !important;
    border-top: 1px solid #ededed !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#login_menu form#loginForm > div > div .row_a1 {
    height: 46px;
    border-bottom: 1px solid #ededed !important;
    padding: 0 14px;
    display: flex;
    align-items: center;
    font-family: "Pretendard";
}
#login_menu form#loginForm > div > div .row_a1 img {
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 비회원 로그인 */
#login_menu #guest_login_toggle_btn,  #login_menu #guest_login_toggle_btn > div {
    height: 46px; 
    background: #f9f7f7;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    text-align: center;
}
#login_menu #guest_login_toggle_btn > div {
    border-top: 1px solid #ededed !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#login_menu #guest_login_toggle_btn > div #login_guest_switch {
    width: 34px;
    position: absolute;
    right: 10px;
    transition: 0.3s;
}
#login_menu #guest_login_toggle_btn > div #login_guest_switch.active {
    transform: rotate(-180deg);
    transition: 0.3s;
}
#login_menu #login_guest_form {
    background: #f9f7f7;
}
#login_menu #login_guest_form form {
    border-top: 1px solid #ededed !important;
    border-bottom: 1px solid #ededed !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#login_menu #login_guest_form input {
    width: calc(100% - 28px) !important;
    margin: 4px 0;
    background: #ffffff !important;
}
#login_menu #login_guest_form .btn_a51 {
    position: relative;
    margin-top: 20px !important;
}
#login_menu #login_guest_form .btn_a51:after {
    position: absolute;
    content: "";
    right: -14px;
    left: -14px;
    bottom: -24px;
    top: 0;
    background: #f9f7f7;
    z-index: -1;
}

/* 마이페이지 전용 */
.my_page_btn_box {
     padding: 24px 14px;
     display: flex;
     gap: 16px;
}
.my_page_btn_box > div {
    height: 46px;
    box-sizing: border-box;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.my_page_btn_box > div:first-of-type {
    color: var(--primaryColor);
    border: 1px solid var(--primaryColor);
}
.my_page_btn_box > div:last-of-type {
    background: var(--primaryColor);
    color: var(--fontWhite);
}

/*
    하단 고정 메뉴
*/
.bottomMenuListBox {
    width: 100%;
    height: 58px;
    background-color: #fcfbfb;
    border-top: 1px solid #ebebeb;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 1;
    transition: 0.3s;
}
.bottomMenuListBox.scrollDown {
    bottom: -58px;
    transition: 0.3s;
}
 .bottomMenuListBox.slideUp {
    bottom: 0;
    transition: 0.3s;
}
.bottomMenuList {
    display: flex;
    height: inherit;
}
.bottomMenuList > li {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottomMenuList > li > div, .bottomMenuList > li > a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.bottomMenuList span { /* 하단 고정 메뉴의 1level 이름 */
    color: var(--basicFontColor);
    font-size: 10px;
    transition: 0.3s;
}
/*
    하단 고정메뉴 디바이스 브라우저 감지
    : 브라우저 별로 하단 고정메뉴의 1단 메뉴영역 (메뉴, 청첩장, 홈, 이벤트, 무료샘플) 배경색이 바뀌어야함.
*/
.bottomMenuListBox.isSafari {
    background-color: transparent;
    backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
    position: relative;
    box-shadow: 0 20px 0 0 rgba(255, 254, 253, 0.75);
}
.bottomMenuListBox.isSafari:after {
    position: absolute;
    opacity: 0.75;
    content: '';
    background-color: #FFFEFD;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
}
.bottomMenuListBox.isChrome {
    background-color: #FFFFFF;
    box-shadow: 0 20px 0 0 rgba(255, 255, 255, 1);
}
.bottomMenuListBox.isNaver {
    background-color: #FFFFFF;
    box-shadow: 0 20px 0 0 rgba(255, 255, 255, 1);
}
.bottomMenuListBox.isKakaoTalk {
    background-color: #F7F7F7;
    box-shadow: 0 20px 0 0 rgba(247, 247, 247, 1);
}


/* 
    시스템 다크모드 일때 : 하단 고정 메뉴 1단만 배경, 색상, 아이콘 변경되어야함
*/
.bottomMenuListBox.darkTheme .bottomMenuList span {
    color: #dddddd;;
}
.bottomMenuListBox.darkTheme.isSafari {
    border-top: 1px solid #312F2C;
    background-color: transparent;
    backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
    position: relative;
    box-shadow: 0 20px 0 0 rgba(49, 47, 44, 0.8);
}
.bottomMenuListBox.darkTheme.isSafari:after {
    position: absolute;
    opacity: 0.80;
    content: '';
    background-color: #312F2C;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
}
.bottomMenuListBox.darkTheme.isChrome {
    border-top: 1px solid #343739;
    background-color: #343739;
    box-shadow: 0 20px 0 0 rgba(52, 55, 57, 1);
}
.bottomMenuListBox.darkTheme.isNaver {
    border-top: 1px solid #222225;
    background-color: #222225;
    box-shadow: 0 20px 0 0 rgba(34, 34, 37, 1);
}
.bottomMenuListBox.darkTheme.isKakaoTalk {
    border-top: 1px solid #151515;
    background-color: #151515;
    box-shadow: 0 20px 0 0 rgba(21, 21, 21, 1);
}
/*
@media (prefers-color-scheme: dark) {
    .bottomMenuListBox .bottomMenuList span,
    .darkTheme .bottomMenuList > li[data-slide="free-sample"] .sample_pick_count {
        color: #dddddd;;
    } {
        color: #dddddd;
    }
    .bottomMenuListBox.isSafari {
        border-top: 1px solid #312F2C;
        background-color: transparent;
        backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
        position: relative;
    }
    .bottomMenuListBox.isSafari:after {
        position: absolute;
        opacity: 0.80;
        content: '';
        background-color: #312F2C;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: -1;
    }
    .bottomMenuListBox.isChrome {
        border-top: 1px solid #343739;
        background-color: #343739;
    }
    .bottomMenuListBox.isNaver {
        border-top: 1px solid #222225;
        background-color: #222225;
    }
    .bottomMenuListBox.isKakaoTalk {
        border-top: 1px solid #151515;
        background-color: #151515;
    }
}
*/

 /*
    하단 고정 메뉴 : 슬라이드 업 메뉴
 */

.fixedLayer {
    background-color: rgba(0, 0, 0, 0.6);
    content: '';
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    opacity: 0;
    transition: 0.3s;
}
.fixedBottomMenuWrapper {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
.fixedBottomMenuWrap {
    position: relative;
    bottom: 0;
    width: 100%;
}
.fixedBottomMenuWrapper.active .fixedLayer {
    display: block;
    opacity: 1;
    transition: 0.3s;
}
.bottomMenuSlideUp {
    width: 100%;
    height: 100vh;
    max-height: calc(100svh - 50px);
    background-color: #ffffff;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: -100svh;
    transition: 0.3s;
    z-index: 0;
    pointer-events: none;
}
.bottomMenuSlideUp.slideUp {
    bottom: 0;
    transition: 0.3s;
    pointer-events: auto;
}
.bottomMenuSlideUp.slideUp.isHideFixedBottomMenu {
    bottom: -58px;
    transition: 0.3s;
}
.bottomMenuTitleBox { /* 슬라이드업 메뉴 타이틀 */
    height: 64px;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}


/* 슬라이드 메뉴 최상단 노치모양 --- 으로 변경 */
.bottomMenuTitleBox.drag-handle {
    height: 30px;
    border-bottom: none;
    
}
.bottomMenuTitleBox.drag-handle .icon.iClose {
    top: 10px;
    right: 50%;
    transform: translate(50%, -50%);
    background: none;
    width: 40px;
    height: 5px;
    background-color: #cccccc;
    border-radius: 5px;
}

.bottomMenuTitle {
    /*
    color: var(--basicFontColor);
    font-family: "Pretendard";
    font-size: 18px;
    font-weight: 300;
    line-height: 64px;
    */
    color: var(--basicFontColor);
    font-family: 'Pretendard';
    font-size: 14px;
    font-weight: var(--boldFontWeight);
    line-height: 30px;
    text-align: center;
}
.bottomMenuContentBox > section { /* 카테고리별 래퍼 크기 */
    height: calc(100% - 78px);
    width: 100%;
    padding: 0;
    /* margin-bottom: 58px; */
}


/* 하단 고정 메뉴 서치바 래퍼 */
.bottomSearchBox {
    width: 100%;
    height: 64px;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
    padding: 14px;
    position: fixed;
    bottom: -64px;
    opacity: 0;
    transition: 0.3s;
}
.bottomSearchBox.show {
    bottom: 58px;
    opacity: 1;
    transition: 0.3s;
}
.bottomSearchBox #bottomSearchForm label {
    display: none;
}
.bottomSearchBox #bottomSearchForm #bottomSearch {
    width: 100%;
    box-sizing: border-box;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    line-height: 35px;
    padding: 0 14px;
    border-color: #ededed;
    transition: 0.3s;
}
.bottomSearchBox #bottomSearchForm #bottomSearch:focus {
    outline-color: #ededed;
    transition: 0.3s;
}
.bottomSearchBox #bottomSearchForm #bottomSearch::placeholder {
    color: var(--eventDescColor);
    font-weight: 300;
}
.goSearch {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
}

/*
 하단 고정 메뉴 카테고리
*/
#accordianCategory {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    /* margin-bottom: 128px; */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
#accordianCategory::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/* 
    하단 고정 메뉴 아이콘
*/

.bottomMenuListBox .icon {
    background-size: cover !important;
    display: inline-block;
    text-indent: -9999em;
    width: 20px;
    height: 20px;
    transition: 0.3s;
}
.bottomMenuContentBox .icon {
    background-size: cover !important;
    display: inline-block;
    text-indent: -9999em;
    width: 18px;
    height: 18px;
}


/* 아코디언 메뉴가 있는 2단 메뉴 */
#accordianCategory .accordion {
    width: 100%;
    color: var(--basicFontColor);
    background-color: #ffffff;
    border-bottom: 1px solid #ededed;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    line-height: 46px;
    outline: none;
    padding: 0 14px;
    text-align: left;
    transition: 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
#accordianCategory .accordion:after {
    transition: 0.3s;
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--darkGray);
    border-bottom: 1px solid var(--darkGray);
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(45deg);
}
#accordianCategory .accordion.active:after {
    transition: 0.3s;
    transform: translateY(-50%) rotate(-135deg);
}
#accordianCategory > div {
    border-top: 1px solid #ededed;
}
#accordianCategory > div:first-of-type {
    border-top: 0;
}


/*
 하단 고정 메뉴 청첩장 : product_list_filter_bundle.php에서 스타일 제어
*/

/*
 하단 고정 메뉴 샘플카트
*/
#accordianFreeSample {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}
#accordianFreeSample div.sample_card_td_box {
    box-sizing: border-box;
}
#accordianFreeSample div.sample_card_td_box.focuser { /* 마지막 선택 샘플 하이라이트 */
    border: 2px solid var(--hlColor);
}
#sample_pick {
    color: var(--hlColor);
    font-weight: bold;
}
#sample_cards {
    padding: 22px 14px;
}
#accordianFreeSample .btn_a51, #loginForm .btn_a51,  #login_guest_form .btn_a51 {
    height: 46px;
    box-sizing: border-box;
    color: #ffffff;
    display: block;
    text-align: center;
    font-family: "Pretendard";
    font-size: 14px;
    font-weight: 300;
    margin: 20px 14px;
    line-height: 45px;
    border: none;
    border-radius: 0;
    background-color: var(--btnBgColorPrdOrder);
    padding: 0;
}
#accordianFreeSample .btn_a51 {
    margin: 0 14px 20px;    
}
.bottomMenuList > li[data-slide="free-sample"] > div {
    position: relative;
}
.bottomMenuList > li[data-slide="free-sample"] .sample_pick_count {
    position: absolute;
    top: 50%;
    font-size: 8px;
    color: #ff7473;
    transform: translateY(-100%);
}

/* 아코디언 메뉴가 없는 1단 메뉴 공통 */
.hyperLink {
    width: 100%;
    height: 49px;
    background-color: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
    color: var(--basicFontColor);
    font-size: var(--bodyFontSize);
    padding: 0 14px;
    transition: 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hyperLink a{
    display: inline-block;
    width: 100%;
    cursor: pointer;
}
.hyperLink a > div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 슬라이드 업 되었을 때 배경 스크롤 막기 */
.no-scroll {
    overflow: hidden;
    position: relative;
    width: 100%;
    overscroll-behavior: none;
    touch-action: none;
}
.body-scroll-lock {
    overflow: hidden;
    position: fixed;
    width: 100%;
    overscroll-behavior: none;
    touch-action: none;
}
/* 2level 슬라이드 메뉴 아이콘 */
.bottomMenuTitleBox .icon {
    width: 20px;
    height: 20px;
}
.bottomMenuTitleBox .icon.iClose {
    background: url("/m/img/icon_m_fixed_bottom_close.png") no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-14px, -50%);
    width: 20px;
    height: 20px;
    background-size: cover;
}
/* 3level 슬라이드 메뉴 */
.panel {
    width: 100%;
    display: none;
    background-color: #f9f7f7;
    overflow: hidden;
}
.panel ul{
    padding: 14px 40px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 10px;
}
.panel ul li {
    height: 30px;
    padding: 0 14px;
    background-color: #ffffff;
    outline: 1px solid #ededed;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel ul li.active {
    outline: 1px solid #777777;
}
.panel ul li a{
    display: inline-block;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

/* 베너 박스 : 사용 안할 수 도 있음, 일단 시안대로 노출함 */
.bannerRow {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #ededed;
    display: <?=$bannerRowDisplay?>;

}
.figureWrap {
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
}
.figureWrap figure{
    width: calc(100% / 2 - 7.5px);
    height: 80px;
    margin: 0;
    position: relative;
}
.figureWrap figure a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.figureWrap figure:after{
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.25);
}
.figureWrap figure a img {
    width: inherit;
    height: inherit;
    object-fit: cover;
}
.figureWrap figcaption{
    width: 100%;
    font-family: "Pretendard";
    font-size: var(--bodyFontSize);
    font-weight: bolder;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.figureWrap figure[data-banner="launge_b"] figcaption {
    letter-spacing: -1px;
}

/* 2026 mobile shopping header renewal */
.mobileHeaderSurface {
    --mobile-header-surface: var(--bj-header-surface, #fdfdfc);
    --mobile-header-ink: var(--bj-brand-navy);
    --mobile-header-line: var(--bj-line);
    --mobile-header-divider: var(--bj-shell-divider, #f0eeec);
    --mobile-header-selection-accent: var(--bj-brand-navy, #1b2631);
    --bojagi-logo-color: var(--bj-brand-navy);
    box-sizing: border-box;
    width: 100%;
    height: 104px;
    position: relative;
    z-index: 100;
    background: var(--mobile-header-surface);
}
.mobileHeaderSurface--general {
    position: sticky;
    top: -56px;
    background: transparent;
}
.mobileHeaderSurface--general .header#main_header {
    transition: background-color .18s ease;
}
.window .mobileHeaderSurface--general.is-category-stuck .header#main_header {
    background: transparent;
}
.window .mobileHeaderSurface #main_header.search-open {
    z-index: 102;
}
.mobileHeaderSurface--catalog {
    position: relative;
}
.mobileHeaderSurface--wedding-catalog {
    height: 56px;
}
.window .mobileHeaderSurface--wedding-catalog .header#main_header {
    height: 56px;
}
body.mobile-header-search-open .mobileHeaderSurface--wedding-catalog,
body.mobile-header-search-open .mobileHeaderSurface--wedding-catalog .header#main_header {
    height: 104px;
}
.mobileHeaderSurface--detail {
    height: 52px;
    position: sticky;
    top: 0;
    background: rgba(253,253,252,.94);
    background: color-mix(in srgb, var(--bj-header-surface, #fdfdfc) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.mobileHeaderSurface--wedding-catalog,
.mobileHeaderSurface--wedding-catalog #main_header,
.mobileHeaderSurface--wedding-catalog .mobileHeaderSearchLayer {
    background: rgba(253, 253, 252, .97) !important;
    background: color-mix(in srgb, var(--bj-header-surface, #fdfdfc) 97%, transparent) !important;
}
.mobileHeaderSurface--detail .header#main_header {
    height: 52px;
    color: var(--mobile-header-ink);
    background: transparent;
}
.window .header#main_header {
    height: 104px;
    overflow: visible;
    color: var(--mobile-header-ink);
    background: var(--mobile-header-surface);
    position: relative;
    top: 0 !important;
}
.window .mobileHeaderSurface--detail .header#main_header {
    height: 52px;
    color: var(--mobile-header-ink);
    background: transparent;
}
.window .mobileHeaderSurface--catalog-selector .header#main_header,
.window .mobileHeaderSurface--detail .header#main_header {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--mobile-header-divider);
    filter: none;
}
.window .menu1_content {
    padding-top: 0;
}
#main_header .menu1_btns.mobileHeaderPrimary {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    display: block;
    position: absolute;
    top: 0;
    transform: none;
}
#main_header .mobileHeaderPrimary ul {
    box-sizing: border-box;
    height: 56px;
    padding: 0 8px 0 16px;
}
#main_header .mobileHeaderBrand,
#main_header .mobileHeaderBrand a {
    height: 56px;
    display: flex;
    align-items: center;
}
#main_header .mobileHeaderBrandLogo {
    width: 120px;
    height: 56px;
    max-width: none;
    max-height: none;
    display: block;
    flex: 0 0 120px;
    background-color: var(--bojagi-logo-color);
    -webkit-mask: url('/card/img/bojagi_logo_dark.png?v=20260720') center / contain no-repeat;
    mask: url('/card/img/bojagi_logo_dark.png?v=20260720') center / contain no-repeat;
}
#main_header .mobileHeaderBrand--context {
    gap: 10px;
}
#main_header .mobileHeaderContextHome {
    width: 32px;
    min-width: 32px;
    justify-content: center;
}
#main_header .mobileHeaderContextSymbol {
    width: 25px;
    height: 25px;
    display: block;
    object-fit: contain;
    transform: translateY(-1px);
}
#main_header .mobileHeaderContextTitle {
    margin: 0;
    color: var(--mobile-header-ink);
    font-family: var(--bj-font-family);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 28px;
}
#main_header .mobileHeaderActions {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 0 !important;
}
.mobileHeaderIconButton,
.mobileHeaderCart,
.mobileHeaderCart .unifiedCartEntry {
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--mobile-header-ink) !important;
    background: transparent;
    cursor: pointer;
}
.mobileHeaderIconButton:focus-visible,
.mobileHeaderCart .unifiedCartEntry:focus-visible {
    color: var(--mobile-header-ink) !important;
    background: var(--bj-nav-hover-surface, #f1f1f1);
    outline: 2px solid var(--bj-nav-focus-ring, #cdc6c2);
    outline-offset: -4px;
}
.mobileHeaderIcon,
.mobileHeaderSearchIcon {
    width: 22px;
    height: 22px;
    display: block;
}
.mobileHeaderIconButton .mobileHeaderIcon {
    color: var(--mobile-header-ink) !important;
    stroke: var(--mobile-header-ink) !important;
}
.mobileHeaderCart .unifiedCartEntry svg,
.mobileHeaderCart .unifiedCartEntry svg path {
    color: currentColor !important;
    stroke: currentColor !important;
}
.mobileHeaderCart .unifiedCartEntry-badge {
    top: 2px !important;
    right: 1px !important;
    color: var(--bj-on-accent) !important;
    background: var(--bj-accent) !important;
}
.mobileHeaderMyButton.is-logon::after {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    right: 7px;
    bottom: 8px;
    border-radius: 50%;
    background: var(--bj-accent);
}
.mobileHeaderAccountPopover {
    box-sizing: border-box;
    width: min(220px, calc(100vw - 32px));
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 8px;
    z-index: 140;
    padding: 6px;
    border: 1px solid var(--bj-line, #e4dfdc);
    border-radius: 10px;
    color: var(--bj-text, #252525);
    background: var(--bj-surface, #ffffff);
    box-shadow: 0 12px 28px rgba(25, 39, 49, .12), 0 2px 8px rgba(25, 39, 49, .05);
}
.mobileHeaderAccountPopover.is-open {
    display: block;
}
.mobileHeaderAccountList {
    display: grid;
    gap: 2px;
}
.mobileHeaderAccountItem,
.mobileHeaderAccountFooter a {
    box-sizing: border-box;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--mobile-header-ink, #1b2631);
    font-family: var(--bj-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
}
.mobileHeaderAccountItem:hover,
.mobileHeaderAccountItem:focus-visible {
    color: var(--mobile-header-ink, #1b2631);
    background: var(--bj-nav-hover-surface, #f3f1f0);
    outline: none;
}
.mobileHeaderAccountIconBox {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--bj-secondary, #625e5a);
    background: var(--bj-product-stage, #f5f3f1);
}
.mobileHeaderAccountIcon {
    width: 17px;
    height: 17px;
    display: block;
}
.mobileHeaderAccountFooter {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid var(--bj-line, #e4dfdc);
}
.mobileHeaderAccountFooter a {
    min-height: 44px;
    color: var(--bj-accent, #914552);
}
.mobileHeaderAccountIconBox--logout {
    color: var(--bj-accent, #914552);
    background: #fbf4f5;
}
.mobileHeaderAccountFooter a:hover,
.mobileHeaderAccountFooter a:focus-visible {
    color: var(--bj-accent, #914552);
    background: #fbf4f5;
    outline: none;
}
.mobileHeaderCategoryRail {
    box-sizing: border-box;
    height: 48px;
    display: flex;
    align-items: stretch;
    gap: 24px;
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    padding: 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: var(--mobile-header-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.mobileHeaderSurface--catalog .mobileHeaderCategoryRail {
    box-shadow: inset 0 -1px 0 var(--mobile-header-line);
}
.mobileHeaderSurface--general.is-category-stuck .mobileHeaderCategoryRail {
    background: rgba(249,247,247,.88);
    background: color-mix(in srgb, var(--bj-canvas) 88%, transparent);
    -webkit-backdrop-filter: saturate(145%) blur(18px);
    backdrop-filter: saturate(145%) blur(18px);
    box-shadow: 0 1px 0 rgba(15,35,45,.065);
}
.mobileHeaderSurface.has-category-next::after {
    content: '';
    width: 24px;
    height: 48px;
    position: absolute;
    top: 56px;
    right: 0;
    z-index: 101;
    display: block;
    background: linear-gradient(90deg, color-mix(in srgb, var(--bj-canvas) 0%, transparent), var(--bj-canvas) 82%);
    pointer-events: none;
}
.mobileHeaderSurface.has-category-prev::before {
    content: '';
    width: 24px;
    height: 48px;
    position: absolute;
    top: 56px;
    left: 0;
    z-index: 101;
    display: block;
    background: linear-gradient(90deg, var(--bj-canvas) 18%, color-mix(in srgb, var(--bj-canvas) 0%, transparent));
    pointer-events: none;
}
.mobileHeaderSurface--general.is-category-stuck.has-category-next::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bj-canvas) 0%, transparent), color-mix(in srgb, var(--bj-canvas) 96%, transparent) 82%);
}
.mobileHeaderSurface--general.is-category-stuck.has-category-prev::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bj-canvas) 96%, transparent) 18%, color-mix(in srgb, var(--bj-canvas) 0%, transparent));
}
.mobileHeaderCategoryRail::-webkit-scrollbar {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .mobileHeaderCategoryRail {
        cursor: grab;
    }
    .mobileHeaderCategoryRail.is-mouse-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .mobileHeaderCategoryRail.is-mouse-dragging a {
        pointer-events: none;
    }
}
.mobileHeaderCategoryRail a {
    min-width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    padding: 0;
    color: var(--mobile-header-ink);
    font-family: 'Pretendard';
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    scroll-snap-align: center;
    white-space: nowrap;
}
.mobileHeaderCategoryRail a:focus-visible {
    color: var(--mobile-header-ink);
    border-radius: 6px;
    outline: 2px solid var(--mobile-header-selection-accent);
    outline-offset: -4px;
}
.mobileHeaderCategoryRail a::after {
    content: '';
    width: 22px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 2px;
    background: transparent;
    transform: translateX(-50%);
}
.mobileHeaderCategoryRail a.is-active {
    color: var(--mobile-header-ink);
    font-weight: 600;
}
.mobileHeaderCategoryRail a.is-active::after {
    background: var(--mobile-header-selection-accent);
}
.mobileHeaderSearchLayer {
    box-sizing: border-box;
    height: 48px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    z-index: 2;
    padding: 7px 8px 7px 14px;
    background: var(--mobile-header-surface);
    transform: translateY(-5px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
#main_header.search-open .mobileHeaderSearchLayer {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.mobileHeaderSearchLayer input[type="search"] {
    min-width: 0;
    height: 34px;
    flex: 1;
    padding: 0 8px;
    border: 0;
    border-bottom: 1px solid var(--bj-line-strong);
    border-radius: 0;
    color: var(--bj-text);
    background: var(--mobile-header-surface);
    font-family: 'Pretendard';
    font-size: 13px;
    outline: none;
}
.mobileHeaderSearchLayer input[type="search"]:focus {
    border-bottom-color: var(--bj-accent);
}
.mobileHeaderSearchLayer button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    color: var(--bj-text);
    background: var(--mobile-header-surface);
}
.mobileSrOnly {
    width: 1px;
    height: 1px;
    position: absolute;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.mobileProductDetailHeader {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 4px 0 2px;
    color: var(--bj-brand-navy);
}
/* 이벤트 상세는 PC 반응형 포스터와 같은 62px 모바일 헤더 규격을 사용합니다. */
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]),
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .header#main_header,
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .mobileProductDetailHeader {
    height: 62px;
}
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .mobileProductDetailHeader {
    position: relative;
}
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .mobileProductDetailActions {
    grid-column: 3;
}
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .mobileProductDetailIdentity,
.mobileHeaderSurface--detail:has(.mobileProductDetailBack[data-event-list-back="1"]) .mobileProductDetailIdentity.is-static {
    width: auto;
    max-width: calc(100% - 176px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mobileProductDetailBack {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--bj-brand-navy);
}
.mobileProductDetailBack svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobileProductDetailIdentity {
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    color: var(--bj-brand-navy);
    font-family: 'Pretendard';
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 28px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(3px);
    transition: opacity .16s ease, transform .16s ease;
}
.mobileProductDetailIdentity.is-static {
    opacity: 1;
    transform: translateY(0);
}
body.mobile-product-identity-visible .mobileProductDetailIdentity {
    opacity: 1;
    transform: translateY(0);
}
.mobileProductDetailActions {
    display: flex;
    align-items: center;
}
.mobileHeaderSurface--detail .mobileHeaderIconButton,
.mobileHeaderSurface--detail .mobileHeaderCart,
.mobileHeaderSurface--detail .mobileHeaderCart .unifiedCartEntry {
    color: var(--bj-brand-navy) !important;
}
.mobileHeaderSurface--detail .mobileHeaderIconButton .mobileHeaderIcon {
    color: var(--bj-brand-navy) !important;
    stroke: var(--bj-brand-navy) !important;
}

.bottomMenuListBox {
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottomMenuList {
    height: 58px;
}
.bottomMenuList > li {
    min-width: 0;
}
.mobileBottomReviewIcon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: var(--basicFontColor);
}
.mobileBottomSvg {
    width: 20px;
    height: 20px;
}
.bottomMenuList > li.active .mobileBottomReviewIcon {
    color: var(--hlColor);
}
.mobileChannelTalk {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    position: fixed;
    right: calc((100vw - min(420px, calc(100vw - 20px))) / 2 + 6px);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 179;
    box-sizing: border-box;
    border: 1px solid rgba(49, 68, 77, 0.14);
    border-radius: 50%;
    color: #31444d;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 16px rgba(25, 39, 49, 0.18);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px) scale(.94);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mobileChannelTalk__icon {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobileChannelTalk__status {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #f36b2d;
}
body.mobile-sheet-open .mobileChannelTalk,
body.mobile-header-search-open .mobileChannelTalk,
body.mobile-keyboard-open .mobileChannelTalk,
body.mobile-modal-open .mobileChannelTalk,
body.mobile-checkout-mode .mobileChannelTalk {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.94);
    pointer-events: none;
}
.mobileBottomDockHost:has(.bottomMenuListBox.scrollDown) + .mobileChannelTalk,
.mobileBottomDockHost:has(.bottomMenuListBox.is-scroll-hidden) + .mobileChannelTalk {
    visibility: visible;
    opacity: 0.98;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.bottomMenuSlideUp {
    max-height: min(72svh, 560px);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}
.mobileSheetEditorial {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 14px 90px;
    padding-top: 18px;
    border-top: 1px solid var(--bj-line);
}
.mobileSheetEditorial h2 {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--bj-brand-navy);
    font-family: 'Pretendard';
    font-size: 14px;
    font-weight: 700;
}
.mobileSheetEditorial a {
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--bj-line);
    border-radius: 12px;
    color: var(--bj-text);
    background: var(--bj-surface-soft);
    font-family: 'Pretendard';
    font-size: 12px;
}
.mobileSheetEditorial .icon {
    width: 22px;
    height: 22px;
    background-size: cover !important;
}
.fixedBottomMenuWrapper.is-product-detail .bottomMenuListBox,
.fixedBottomMenuWrapper.is-product-detail .bottomMenuSlideUp,
.fixedBottomMenuWrapper.is-product-detail .bottomSearchBox,
.fixedBottomMenuWrapper.is-product-detail .fixedLayer {
    display: none !important;
}
.fixedBottomMenuWrapper.is-product-detail .mobileChannelTalk {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}
.bottomMenuContentBox > section.mobileReviewSheet {
    box-sizing: border-box;
    height: auto;
    padding: 0 16px 80px;
    background: var(--bj-surface);
}
.mobileReviewSheet h2 {
    margin: 0;
    padding: 0 4px 8px;
    color: var(--bj-brand-navy);
    font-family: 'Pretendard';
    font-size: 15px;
    font-weight: 700;
}
.mobileReviewSheet > a {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 4px;
    border-bottom: 1px solid var(--bj-line);
    color: var(--bj-text);
}
.mobileReviewSheet > a:last-child {
    border-bottom: 0;
}
.mobileReviewSheet > a > .icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    background-size: cover !important;
}
.mobileReviewSheet > a > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mobileReviewSheet strong {
    font-family: 'Pretendard';
    font-size: 14px;
    font-weight: 600;
}
.mobileReviewSheet small {
    color: var(--bj-text-muted);
    font-family: 'Pretendard';
    font-size: 11px;
    font-weight: 400;
}
#accordianCategory {
    gap: 0;
    background: var(--bj-surface);
}
#accordianCategory .mobileProductAccordionGroup {
    border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mobileHeaderSearchLayer,
    .mobileChannelTalk,
    .bottomMenuSlideUp,
    .bottomMenuListBox {
        transition: none !important;
    }
}

/* 색상 강조 */
.hlPink {
    color: var(--bj-accent);
}
.hlGreen {
    color: #55a488;
}