@charset "utf-8";

/* ================================================
   移댄??�?(Cafe Muen) - ?붿옄??override CSS
   湲곗?: 湲곗??colorset.css ?꾩뿉 ??�?곌린
   硫붿???�щ윭 : #ff6a12 (??�젋吏€??�뱶)
   ??�툕 ?�щ윭 : #0bab6d (洹몃??
   湲곕???고듃 : Paperlogy
   ================================================ */

/* ???? 1. CSS 蹂€??(?꾩뿭) ???? */
:root {
    --cm-primary:       #fa5f03;
    --cm-primary-hover: #d94f00;
    --cm-primary-light: #fff0e8;
    --cm-secondary:     #0bab6d;
    --cm-secondary-hover:#089157;
    --cm-secondary-light:#d4f5e7;
    --cm-black:         #111111;
    --cm-dark:          #222222;
    --cm-gray-dark:     #444444;
    --cm-gray:          #777777;
    --cm-gray-light:    #aaaaaa;
    --cm-border:        #e0e0e0;
    --cm-bg:            #f8f8f8;
    --cm-white:         #ffffff;
    --cm-font:          'Paperlogy', 'SBAggro', sans-serif;
    --cm-max-width:     1320px;
    --cm-radius:        12px;
    --cm-radius-sm:     6px;
    --cm-shadow:        0 2px 16px rgba(0,0,0,0.07);
    --cm-shadow-hover:  0 6px 28px rgba(0,0,0,0.13);
    --cm-transition:    all 0.25s ease;
}

/* ???? 2. ?꾩뿭 ?고듃 �?湲곕???�ъ�????? */
body,
button,
input,
select,
textarea {
    font-family: var(--cm-font) !important;
    color: var(--cm-dark);
}

body {
    font-size: 16px;
    line-height: 1.6;
    background: var(--cm-white) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cm-dark); text-decoration: none; }
a:hover, a:focus { color: var(--cm-primary); text-decoration: none; }

.en, h1, h2, h3, h4, h5,
h1 a, h2 a, h3 a, h4 a, h5 a {
    font-family: var(--cm-font) !important;
}

/* ???? 3. ??�뜑 ???? */
body { padding-top: 100px; }
#hd {
    background: var(--cm-white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}
#hd.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
#hd.sub::after { display: none !important; }
ul.sub_path { justify-content: center !important; margin-top: 60px !important; }
ul.sub_path iconify-icon { position: relative; top: 2px; }
.sub_top_tit_wrap { text-align: center; }
.sub_top_tit_wrap .sub_top_cate { display: block; font-size: 20px; font-weight: 500; color: var(--cm-primary); margin-bottom: 15px; }
.sub_top_tit_wrap .sub_top_tit { margin-bottom: 0 !important; }

/* ?�브?�이지 2차메????*/
.sub_tab_nav { text-align: center; margin-bottom: 70px !important; position: relative; }
.sub_tab_nav::before { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; border-bottom: 1px solid #e8e8e8; }
@media (max-width: 480px) { .sub_tab_nav::before { left: 14px; right: 14px; } }
.sub_tab_ul { display: inline-flex; gap: 0; list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.sub_tab_li { position: relative; }
.sub_tab_a {
    display: block;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}
.sub_tab_li.on .sub_tab_a,
.sub_tab_a:hover {
    color: var(--cm-primary);
    border-bottom-color: var(--cm-primary);
}

/* ??�뜑 ??�? ??�씠?꾩썐: 濡쒓??| GNB(以묒�? | ?좏떥 | ?꾨쾭�?*/
.hd_inner {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 0 0 40px;
    height: 100px;
    position: relative;
    box-sizing: border-box;
}

/* 濡쒓??*/
.hd_logo {
    flex-shrink: 0;
    margin: 0;
}
.hd_logo a { display: flex; align-items: center; }
.hd_logo img { height: 40px; width: auto; display: block; }

/* GNB */
#gnb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
}
#gnb .menu_list {
    display: flex;
    align-items: center;
    gap: 0 44px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100px;
}
#gnb .dep1_li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100px;
    margin: 0;
    padding: 0;
}
#gnb .dep1_a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin: 0;
    padding: 6px 0 0 0; /* ?�각???�트 ?�프???��? 조정 (?�재 ?�치?�서 ??2px ???�림) */
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--cm-black);
    white-space: nowrap;
    transition: color 0.2s;
    letter-spacing: -0.02em;
}
#gnb .dep1_li.on .dep1_a,
#gnb .dep1_a:hover { color: var(--cm-primary); }

/* GNB ?�롭?�운 */
#gnb .dep2_ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 148px;
    background: var(--cm-white);
    border: 1px solid var(--cm-border);
    border-top: 2px solid var(--cm-primary);
    border-radius: 0 0 var(--cm-radius-sm) var(--cm-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    padding: 8px 0;
    z-index: 10;
}
#gnb .dep2_a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--cm-dark);
    font-weight: 400;
    transition: all 0.2s;
    white-space: nowrap;
}
#gnb .dep2_li.on .dep2_a,
#gnb .dep2_a:hover { 
    color: var(--cm-primary) !important; 
    background: var(--cm-primary-light); 
    font-weight: 500;
}

/* PC ?�틸 버튼 ?�역 */
.hd_utils {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    margin-left: auto;
    flex-shrink: 0;
}
.util_btn,
.util_btn span,
a.util_btn,
button.util_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cm-gray-dark) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'Poppins', var(--cm-font) !important;
    transition: color 0.2s;
    text-decoration: none !important;
}
.util_btn:hover,
.util_btn:hover span,
a.util_btn:hover,
button.util_btn:hover { color: var(--cm-primary) !important; }

/* ?�버�?버튼 (블랙 ?�퀘어 100% height) */
.hd_hamburger {
    width: 100px;
    height: 100px;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    margin-left: 20px;
    padding: 0;
}
.hd_hamburger:hover { background: #222; }
.hd_hamburger .bar {
    display: block;
    width: 32px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: all 0.25s ease;
}
.hd_hamburger.on .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hd_hamburger.on .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hd_hamburger.on .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* 모바???�틸 (기본 ?��?) */
.hd_mo_utils { display: none; }

/* ???? 4. 寃€????�꼸 ???? */
#search_panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--cm-white);
    border-bottom: none;
    z-index: 999;
    box-shadow: 0 25px 40px -10px rgba(0,0,0,0.08);
}
#search_panel.open { display: block; animation: panelDown 0.2s ease; }
@keyframes panelDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.search_panel_inner {
    max-width: var(--cm-max-width);
    margin: 0 auto;
    padding: 36px 24px;
}
.search_input_wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--cm-border);
    border-radius: 50px;
    overflow: hidden;
    background: var(--cm-bg);
    transition: border-color 0.2s;
    max-width: 720px;
    margin: 0 auto;
}
.search_input_wrap:focus-within { border-color: var(--cm-primary); background: #fff; }
.search_input_wrap input[name="stx"] {
    flex: 1;
    min-width: 0; /* Prevents input from pushing buttons out */
    height: 56px;
    padding: 0 24px;
    border: none !important;
    background: transparent !important;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--cm-font);
    outline: none;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.search_input_wrap input[name="stx"]::placeholder {
    font-weight: 500;
}
@media (max-width: 768px) {
    .search_input_wrap input[name="stx"] {
        font-size: 14px;
        padding: 0 20px;
    }
    .search_submit, .search_close {
        width: 44px;
    }
}
.search_submit, .search_close {
    width: 60px;
    height: 56px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cm-gray);
    flex-shrink: 0;
    transition: color 0.2s;
}
.search_close {
    border-left: 1.5px solid var(--cm-border);
}
.search_submit:hover, .search_close:hover { color: var(--cm-primary); }
iconify-icon { transition: color 0.2s; }

/* ???? 5. ?꾩껜 硫붾??(PC ??�쾭??�씠) ???? */
#pc_all_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    width: 100vw;
    background: var(--cm-white);
    padding: 40px 0 60px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
#pc_all_menu .at-container { max-width: 1000px; }
#pc_all_menu .menu_list { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; }
#pc_all_menu .menu_list .dep1_li { flex: 1; padding: 0 15px; min-width: 0; }
#pc_all_menu .menu_list .dep1_a {
    display: block;
    padding: 16px 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--cm-black);
    transition: color 0.2s;
    position: relative;
}
#pc_all_menu .menu_list .dep1_a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--cm-border);
}
#pc_all_menu .menu_list .dep1_a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--cm-primary);
    transition: width 0.3s ease;
}
#pc_all_menu .menu_list .dep1_li:hover .dep1_a::after,
#pc_all_menu .menu_list .dep1_a.on::after { width: 100%; }

#pc_all_menu .menu_list .dep1_li:hover .dep1_a,
#pc_all_menu .menu_list .dep1_a.on { color: var(--cm-primary); }

#pc_all_menu .menu_list .dep2_ul { margin-top: 16px; }
#pc_all_menu .menu_list .dep2_a {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cm-gray);
    padding: 10px 0;
    transition: color 0.2s;
}
#pc_all_menu .menu_list .dep2_a:hover { color: var(--cm-primary); }

/* ???? 6. ?꾩껜 硫붾??(Mobile) ???? */
#m_all_menu {
    display: none;
    position: fixed;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px;
    max-width: 85vw;
    min-height: 100%;
    background: var(--cm-white);
    z-index: 1001; /* above header */
    overflow-y: auto;
    padding: 0;
    border-top: none;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
#m_all_menu.open { 
    display: block !important;
    animation: slideInMenu 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideInMenu {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@media (min-width: 1025px) {
    #m_all_menu, #all_dummy { display: none !important; }
}
.m_menu_head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--cm-border); }
.m_menu_head h2 { font-size: 22px; font-weight: 700; color: var(--cm-black); margin: 0; font-family: 'Poppins', var(--cm-font); letter-spacing: -0.02em; }
#m_menu_close_btn { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--cm-black); padding: 0; display: flex; align-items: center; justify-content: center; }

#m_all_menu .menu_list { padding: 10px 20px 60px; }
#m_all_menu .menu_list .dep1_li { border-bottom: 1px solid var(--cm-border); border-top: none !important; }
#m_all_menu .menu_list .dep2_ul { display: none; padding: 16px 0 16px 10px; border-top: 1px solid var(--cm-border) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; }
#m_all_menu .menu_list .dep1_a {
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 600;
    padding: 18px 0;
    color: var(--cm-black);
    transition: color 0.2s;
}
.m_menu_arrow {
    font-size: 22px;
    color: var(--cm-gray);
    transition: transform 0.25s ease;
}
#m_all_menu .menu_list .dep1_a::before,
#m_all_menu .menu_list .dep1_a::after,
#m_all_menu .menu_list .dep1_a > *:not(.m_menu_text):not(.m_menu_arrow) {
    display: none !important;
}
#m_all_menu .menu_list .dep1_li.on .m_menu_arrow { transform: rotate(180deg); color: var(--cm-primary); }
#m_all_menu .menu_list .dep1_li.on .dep1_a,
#m_all_menu .menu_list .dep1_li:hover > .dep1_a { color: var(--cm-primary); }

/* 모바???�단 로그???�원가??*/
.m_menu_foot {
    display: flex;
    gap: 12px;
    padding: 24px 20px;
}
.m_menu_foot a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s;
}
.btn_m_login { background: var(--cm-black); color: #fff !important; }
.btn_m_join { background: var(--cm-white); color: var(--cm-black) !important; border: 1px solid var(--cm-border); }
.btn_m_logout { background: var(--cm-border); color: var(--cm-black) !important; }

#m_all_menu .menu_list .dep2_ul { display: none; padding: 16px 0 16px 10px; border-top: 1px solid var(--cm-border) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; }
#m_all_menu .menu_list .dep2_a {
    display: block;
    position: relative;
    font-size: 15px;
    color: var(--cm-gray-dark);
    padding: 8px 0 8px 14px;
    transition: color 0.2s;
    font-weight: 400;
}
#m_all_menu .menu_list .dep2_a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #ccc;
    border-radius: 50%;
    transition: background 0.2s;
}
#m_all_menu .menu_list .dep2_li.on .dep2_a,
#m_all_menu .menu_list .dep2_a:hover { color: var(--cm-primary); font-weight: 500; }
#m_all_menu .menu_list .dep2_li.on .dep2_a::before,
#m_all_menu .menu_list .dep2_a:hover::before { background: var(--cm-primary); }

/* ?�버?�이 배경 */
#all_dummy {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);

    cursor: pointer;
}

/* ???? 7. ??�뜑 紐⑤�??諛섏??????? */
@media all and (max-width: 1024px) {
    #hd {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .hd_inner {
        height: 60px;
        padding: 0 16px;
    }
    .hd_logo img { height: 34px; }
    #gnb, .hd_utils { display: none; }
    .hd_mo_utils {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }
    .mo_icon_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--cm-dark);
    }
    
    .hd_hamburger {
        width: 60px;
        height: 60px;
        margin-left: 6px;
        margin-right: -16px;
    }
    .hd_hamburger .bar {
        width: 20px;
    }
    .hd_hamburger.on .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .hd_hamburger.on .bar:nth-child(2) { opacity: 0; }
    .hd_hamburger.on .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    body { padding-top: 60px; }

    /* 모바??브레?�크???�브경로) ?�단 ?�출 강제??(m_path ?�거 ?��? */
    .sub_path { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 20px !important; margin-bottom: 20px !important; }
}

@media all and (max-width: 480px) {
    .hd_inner { padding: 0 14px; }
}

/* ?�?� 7. ?�터 ?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?� */
#ft { background: #fff; border-top: 1px solid #ebebeb; font-family: 'Paperlogy', var(--cm-font); }

/* ?�단 링크 �?*/
.ft_top_bar { border-bottom: 1px solid #ebebeb; }
.ft_top_inner { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.ft_links { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; gap: 0; }
.ft_link_li { position: relative; }
.ft_link_li + .ft_link_li::before { content: '|'; color: #e5e5e5; margin: 0 18px; font-size: 13px; font-weight: 300; }
.ft_link_li a, .ft_link_li a iconify-icon { font-size: 17px; font-weight: 400; color: #000 !important; letter-spacing: -0.02em; transition: color 0.2s; }
.ft_link_li a:hover, .ft_link_li a:hover iconify-icon { color: var(--cm-primary) !important; }
.ft_link_bold a { font-weight: 600; color: #000 !important; }
.ft_link_icon a { display: inline-flex; align-items: center; gap: 4px; }

.ft_right_group { display: flex; align-items: center; gap: 30px; }
.ft_sns_list { display: flex; align-items: center; gap: 16px; list-style: none; padding: 0; margin: 0; }
.ft_sns_list a, .ft_sns_list a iconify-icon { color: #000 !important; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.ft_sns_list a:hover, .ft_sns_list a:hover iconify-icon { color: var(--cm-primary) !important; }
.ft_family_wrap { position: relative; }
.ft_family_btn { width: 200px; height: 38px; padding: 0 16px; border: none; background: #f5f5f5; color: #666; font-size: 13px; font-family: 'Paperlogy', var(--cm-font); cursor: pointer; border-radius: 4px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; }
.ft_family_arrow { color: #666; pointer-events: none; transition: transform 0.3s ease; }
.ft_family_btn.active .ft_family_arrow { transform: rotate(180deg); }
.ft_family_list { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; width: 100%; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #ebebeb; border-radius: 2px; }
.ft_family_list.show { display: block; }
.ft_family_list a { display: block; padding: 12px 16px; font-size: 13px; color: #666; transition: all 0.2s; background: #fff; }
.ft_family_list a:hover { color: var(--cm-primary) !important; background: var(--cm-primary-light) !important; font-weight: 500; }

/* 본문 */
.ft_main { padding: 45px 0 50px; }
.ft_main_inner { display: flex; justify-content: space-between; align-items: flex-start; }

/* �? ?�사?�보 */
.ft_info_col { flex: 1; }
.ft_logo_wrap { margin-bottom: 30px; }
.ft_logo_wrap img { height: 38px; filter: brightness(0); }

.ft_dl { margin: 0; padding: 0; }
.ft_dl_row { display: flex; align-items: center; margin-bottom: 8px; }
.ft_dl_row:last-child { margin-bottom: 0; }
.ft_dl dt { width: 135px; min-width: 135px; font-size: 15px !important; font-weight: 500 !important; color: #333 !important; letter-spacing: -0.02em; }
.ft_dl dd { font-size: 15px !important; font-weight: 400 !important; color: #444 !important; letter-spacing: -0.02em; margin: 0; line-height: 1.6 !important; }

.ft_copy { margin-top: 24px; font-size: 14px; font-weight: 400; color: #666 !important; letter-spacing: 0; }

/* ?? 고객?�터 */
.ft_cs_col { width: 500px; padding-top: 2px; }
.ft_cs_label { font-size: 18px !important; font-weight: 500 !important; color: #333 !important; margin-bottom: 10px; letter-spacing: -0.04em; }
.ft_cs_tel { display: block; font-size: 32px !important; font-weight: 700 !important; color: #111 !important; font-family: 'Paperlogy', sans-serif !important; letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px; }
.ft_cs_hours { font-size: 15px !important; font-weight: 400 !important; color: #000 !important; line-height: 2.2 !important; margin: 0 !important; letter-spacing: -0.02em; }
.ft_cs_gray { color: #888 !important; }

/* 반응??*/
@media all and (max-width: 1024px) {
    .ft_top_bar { padding-top: 25px; }
    .ft_top_inner { flex-direction: column; height: auto; padding: 18px 0; gap: 16px; align-items: flex-start; }
    .ft_links { flex-wrap: wrap; row-gap: 8px; }
    .ft_main_inner { flex-direction: column; padding: 40px 0 55px; gap: 0; }
    .ft_info_col { display: contents; }
    .ft_logo_wrap { order: 1; width: 100%; margin-bottom: 36px; }
    .ft_cs_col { order: 2; width: 100%; margin-bottom: 36px; }
    .ft_dl { order: 3; width: 100%; margin-bottom: 0; }
    .ft_copy { order: 4; width: 100%; }
}
@media all and (max-width: 768px) {
    .ft_top_inner, .ft_main_inner { padding-left: 14px; padding-right: 14px; }
    .ft_cs_tel { font-size: 28px; }
    .ft_dl_row { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
    .ft_dl dt { width: auto; min-width: 0; }
    .ft_dl dd { width: 100%; word-break: keep-all; }
}

/* ?�버??*/
#buttom_quick {
    width: 84px !important;
}
#buttom_quick button {
    height: 84px !important;
    transition: all 0.3s ease;
}
#buttom_quick button#chat_btn { 
    background: var(--cm-primary); 
    margin-top: 0 !important;
}
#buttom_quick button#chat_btn:hover { background: var(--cm-primary-hover); transform: translateY(-4px); }

#buttom_quick button#admin_btn { 
    background: #444; 
    margin-top: 0 !important;
    margin-bottom: 10px;
}
#buttom_quick button#admin_btn:hover { background: #555; transform: translateY(-4px); }

#buttom_quick button#top_btn { 
    background: var(--cm-black); 
    color: var(--cm-white); 
    font-family: var(--cm-font);
    opacity: 0;
    visibility: hidden;
    height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    pointer-events: none;
}
#buttom_quick button#top_btn.show {
    opacity: 1;
    visibility: visible;
    height: 84px !important;
    margin-top: 10px !important;
    pointer-events: auto;
}
#buttom_quick button#top_btn:hover { background: #333; transform: translateY(-4px); }

/* ???? 8. ??�툕 ?�듯?????? */
/* 寃쎈�?path) */
.m_path_dep1 > a { background: var(--cm-primary); }
.m_path_dep2.on > a, .m_path_dep2:hover > a { color: var(--cm-primary); }

/* ??�툕 ????? */
.sub_top_tit { font-family: var(--cm-font); }

/* ??�씠吏€??�씠??*/
.pagination > li.active > a,
.list-wrap .pagination > li.active a,
.view-wrap .pagination > li.active a {
    background-color: var(--cm-primary) !important;
    border-color: var(--cm-primary) !important;
}
.pagination > li > a:hover { border-color: var(--cm-primary); color: var(--cm-primary) !important; }

/* ?�?� 2. ?�역 컨테?�너 ?�비 (1320px) ?�?� */
.at-container {
    max-width: 1320px !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ?곹�? ??*/
.product_tab li.on a .ico_box,
.product_tab li a:focus .ico_box,
.product_tab li a:hover .ico_box { border-color: var(--cm-primary); }

/* ?????9. PC 硫붾??(湲곗????�굅????�쾭??�씠?? ?????*/
.pc-menu { background: var(--cm-black); }
.pc-menu .nav-top .menu-a { background: var(--cm-black); color: var(--cm-white); }
.pc-menu .nav-top .menu-li:hover .menu-a,
.pc-menu .nav-top .menu-li.on .menu-a { background: #2a2a2a; }
.pc-menu .nav-top .sub-1div { border-top-color: var(--cm-primary); }
.pc-menu .nav-top .sub-1div::before { border-color: var(--cm-primary) transparent; }
.pc-menu .nav-top .sub-1dli.on .sub-1da,
.pc-menu .nav-top .sub-1dli:hover .sub-1da { background: var(--cm-primary); border-color: var(--cm-primary); }
.pc-menu .nav-top .sub-2dli.on .sub-2da,
.pc-menu .nav-top .sub-2dli:hover .sub-2da { background: var(--cm-primary); border-color: var(--cm-primary); }
.pc-menu-all .table td.on .menu-a,
.pc-menu-all .sub-1dli.on .sub-1da,
.pc-menu-all .sub-1dli:hover .sub-1da { color: var(--cm-primary); }
.m-menu .m-nav ul li.active a,
.m-menu .m-nav-sub ul li.active a { color: var(--cm-primary); }

/* ???? 10. ??�?踰꾪???�듯?????? */
body *:focus-visible { outline-color: var(--cm-primary); }
body input:focus, body select:focus, body textarea:focus { outline-color: var(--cm-primary); }

/* ??�겕濡ㅻ�?(?좏깮) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cm-bg); }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cm-primary); }

/* ???? 11. 硫붿???�듯?????? */
.main_tit_box small { color: var(--cm-primary); }

/* 硫붿???????�???�덈??*/
.main_slider .slider_pagination .swiper-pagination-bullet-active {
    background: var(--cm-primary);
}

/* ???? 12. 諛섏???蹂댁?????? */
@media all and (max-width: 768px) {
    body { font-size: 15px; }
    .cm_ticker {
        height: 50px;
        margin-bottom: 80px;
    }
    .cm_ticker_item {
        font-size: 16px;
        padding: 0 30px;
    }
    .cm_ticker_sep {
        width: 4px;
        height: 4px;
        margin: 0 8px;
    }
}

/* ?�?� 4-1. ?�커 배너 ?�?� */
@keyframes cmTickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.cm_ticker {
    width: 100%;
    height: 68px;
    background: var(--cm-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 170px;
}

.cm_ticker_track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: cmTickerScroll 28s linear infinite;
    /* 4?�트 �??�반(2?�트)만큼 ?�동?�면 seamless 루프 */
}

.cm_ticker_item {
    font-family: 'Paperlogy', var(--cm-font);
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    padding: 0 50px;
    letter-spacing: 0.02em;
    opacity: 1;
    flex-shrink: 0;
}
.cm_ticker_item.dim {
    opacity: 0.3;
}

/* 구분?? 5px ??*/
.cm_ticker_sep {
    display: inline-block;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.6;
    margin: 0 10px;
    vertical-align: middle;
}

/* ?�?� 4-2. ?�품 카테고리 ??(메인) ?�?� */

/* 카테고리 ?�용 ?��?지 (?�품 ?�이콘과 별도) */
.product_tab.main_tab li a .ico_box.ico01 { background-image: url('/thema/Basic/img/cat_coffee.png'); }
.product_tab.main_tab li a .ico_box.ico02 { background-image: url('/thema/Basic/img/cat_latte.png'); }
.product_tab.main_tab li a .ico_box.ico03 { background-image: url('/thema/Basic/img/cat_ade.png'); }
.product_tab.main_tab li a .ico_box.ico04 { background-image: url('/thema/Basic/img/cat_tea.png'); }

.product_tab.main_tab {
    padding: 170px 15px;
    gap: 40px;
    justify-content: center;
    flex-wrap: nowrap;
}

/* ?�이?? 고정 ?�비 ?�이 ?�동?�로 배치 */
.product_tab.main_tab > li {
    width: auto;
    flex-shrink: 0;
}
.product_tab.main_tab > li > a { 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    text-align:center;
}
.product_tab.main_tab > li > a:hover .ico_box {
    background-size: 112% !important;
}

/* ?�형 ?�진 박스 300px */
.product_tab.main_tab li a .ico_box {
    width: 280px;
    height: 280px;
    padding-top: 0;
    border-radius: 50%;
    background-size: 100%;
    background-position: center;
    background-color: #e8e8e8;
    border: none !important;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    transition: background-size 0.3s ease, box-shadow 0.3s ease;
}

/* ?�버 ??그림?�만 */
.product_tab.main_tab li a:hover .ico_box,
.product_tab.main_tab li a:focus .ico_box,
.product_tab.main_tab li.on a .ico_box {
    box-shadow: none;
    border: none !important;
}

/* ?�스???�이�?*/
.product_tab.main_tab li a strong {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    color: var(--cm-black);
    margin-top: 22px;
    letter-spacing: 0;
    font-family: var(--cm-font);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: color 0.2s, font-weight 0.2s, border-color 0.2s;
}

/* ?�버: ?�인?�컬??+ 굵기 ???�계 + ?�단 ?�인 */
.product_tab.main_tab li a:hover strong,
.product_tab.main_tab li.on a strong {
    color: var(--cm-primary);
    font-weight: 500;
    border-bottom-color: var(--cm-primary);
}

/* 반응??*/
@media (max-width: 1400px) {
    .product_tab.main_tab li a .ico_box { width: 220px; height: 220px; }
    .product_tab.main_tab { gap: 30px; padding: 120px 15px; }
    .product_tab.main_tab li a strong { font-size: 18px; }
}
@media (max-width: 1024px) {
    .product_tab.main_tab { flex-wrap: wrap; gap: 40px 30px; padding: 80px 15px; }
    .product_tab.main_tab li { width: calc(50% - 15px); }
    .product_tab.main_tab li a .ico_box { width: 160px; height: 160px; }
    .product_tab.main_tab li a strong { font-size: 17px; }
}
@media (max-width: 600px) {
    .product_tab.main_tab { gap: 30px 20px; padding: 60px 15px; }
    .product_tab.main_tab li a .ico_box { width: 120px; height: 120px; }
    .product_tab.main_tab li a strong { font-size: 15px; margin-top: 14px; }
}

/* ?�?� 5. ?�어�?Hero) ?�션 ?�?� */

/* ?�스???�역: 뷰포?�에???�더(100px) + ?�어�?500px) ?�외???�머지 ?�이�?채�? */
.cm_hero_text {
    height: calc(100vh - 100px - 500px);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}
.cm_hero_text h2 {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cm-black);
    letter-spacing: -0.02em;
    font-family: 'Poppins', var(--cm-font);
}
/* ?�?�핑 커서 */
.cm_hero_text h2 .typing-cursor {
    display: inline-block;
    width: 3px;
    background: var(--cm-black);
    margin-left: 4px;
    animation: cursorBlink 0.7s step-end infinite;
    vertical-align: baseline;
    height: 0.85em;
    position: relative;
    top: 0.05em;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ?��?지 ?�역 (?�립 500px) */
.cm_hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

/* Swiper ?�체 */
.cmHeroSwiper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ?��?지 ?�트 ?�렉??*/
.hero_slide_set {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: 0;
}

/* 공통 ?��?지 ?�퍼 */
.hero_slide_set .hero_img {
    position: relative;
    overflow: hidden;
    background: #f4f4f4;
    flex-shrink: 0;
    height: 500px;
}
.hero_slide_set .hero_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ?�쪽: ?�사�?500×500) + ?�상??곡선 500px */
.hero_slide_set .hero_img_left {
    width: 500px;
    border-top-right-radius: 500px;
}

/* ?�른�? ?�머지 ???��? + 좌상??곡선 500px */
.hero_slide_set .hero_img_right {
    flex: 1;
    border-top-left-radius: 500px;
}

/* ?�로그레??�??�이지?�이??*/
@keyframes hppFill {
    from { width: 0%; }
    to   { width: 100%; }
}

.hero_progress_pag {
    position: absolute;
    bottom: 52px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: none;
}
.hero_progress_pag .hpp-cur,
.hero_progress_pag .hpp-total {
    font-size: 20px;
    font-family: 'Poppins', var(--cm-font);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    min-width: 24px;
    text-align: center;
}
.hero_progress_pag .hpp-total {
    opacity: 0.45;
}
.hero_progress_pag .hpp-bar-wrap {
    width: 160px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}
.hero_progress_pag .hpp-bar-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
}
.hero_progress_pag .hpp-bar-fill.running {
    animation: hppFill 4s linear forwards;
}


@media (max-width: 1024px) {
    .cm_hero_text {
        height: calc(100vh - 60px - 400px);
        min-height: 120px;
    }
    .cm_hero_text h2 { font-size: 34px; }
    .cm_hero { height: 400px; }
    .hero_slide_set .hero_img { height: 400px; }
    .hero_slide_set .hero_img_left {
        width: 400px;
        border-top-right-radius: 400px;
    }
    .hero_slide_set .hero_img_right {
        border-top-left-radius: 400px;
    }
    .hero_progress_pag { bottom: 32px; left: 24px; }
    .hero_progress_pag .hpp-cur,
    .hero_progress_pag .hpp-total { font-size: 16px; }
    .hero_progress_pag .hpp-bar-wrap { width: 100px; }
}

@media (max-width: 600px) {
    .cm_hero_text {
        height: calc(100vh - 60px - 280px);
        min-height: 100px;
    }
    .cm_hero_text h2 { font-size: 24px; }
    .cm_hero { height: 280px; }
    .hero_slide_set .hero_img { height: 280px; }
    .hero_slide_set .hero_img_left {
        width: 280px;
        border-top-right-radius: 280px;
    }
    .hero_slide_set .hero_img_right {
        border-top-left-radius: 280px;
    }
}

/* ==============================================================
   NEW ARRIVAL SLIDER
   ============================================================== */
.cm_new_arrival_tit {
    text-align: center;
    margin-bottom: 50px;
}
.cm_new_arrival_tit h2 {
    font-size: 50px;
    font-weight: 700;
    color: var(--cm-black);
    margin-bottom: 30px;
}
.cm_new_arrival_tit p {
    font-size: 20px;
    color: #555;
    word-break: keep-all;
    margin-bottom: 50px;
}
.cm_new_tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 70px;
}
.cm_tab_btn {
    padding: 12px 42px;
    background: #f2f2f2;
    color: #555;
    font-size: 18px;
    font-weight: 500;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cm_tab_btn:hover {
    background: #e5e5e5;
}
.cm_tab_btn.active {
    background: #333;
    color: #fff;
}
.cm_new_card {
    display: block;
    text-decoration: none;
}
.cm_new_img_box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 24px;
}
.cm_new_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cm_new_card:hover .cm_new_img_box img {
    transform: scale(1.05);
}
.cm_new_txt_box {
    padding: 0;
    text-align: left;
}
.cm_new_title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-black);
    margin-bottom: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.cm_new_brand {
    display: block;
    font-size: 14px;
    color: #999;
    font-weight: 400;
}

/* Nav Arrows */
#main_new_arrival .cm_new_prev,
#main_new_arrival .cm_new_next {
    position: absolute;
    top: calc(50% - 60px);
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 38px;
    color: var(--cm-black);
    background: transparent;
    border: none;
    transition: all 0.2s ease;
}
#main_new_arrival .cm_new_prev { left: -70px; }
#main_new_arrival .cm_new_next { right: -70px; }
#main_new_arrival .cm_new_prev:hover:not(.swiper-button-disabled),
#main_new_arrival .cm_new_next:hover:not(.swiper-button-disabled) {
    color: var(--cm-primary);
    transform: translateY(-50%) scale(1.15);
}
#main_new_arrival .swiper-button-disabled { opacity: 0.3; cursor: default; }

/* Scrollbar */
#main_new_arrival .swiper-scrollbar {
    background: #e5e5e5;
    height: 3px;
    border-radius: 0;
    position: absolute;
    bottom: 0px;
    left: 20%;
    width: 60%;
}
#main_new_arrival .swiper-scrollbar-drag {
    background: var(--cm-black);
    border-radius: 0;
}

/* ?�메???�션 */
#main_quick_menu { padding: 170px 0; }
.cm_quick_list { display: flex; justify-content: center; gap: 60px; list-style: none; margin: 0; padding: 0; }
.cm_quick_list li { flex: 1; max-width: 320px; text-align: center; }
.cm_quick_list a { display: block; text-decoration: none !important; }
.cm_quick_list .quick_img { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; transition: transform 0.3s ease; }
.cm_quick_list .quick_img img { max-width: 110px; max-height: 110px; object-fit: contain; }
.cm_quick_list a:hover .quick_img { transform: translateY(-10px); }
.cm_quick_list .quick_subtit { font-family: 'Poppins', var(--cm-font); font-size: 18px; font-weight: 500; margin-bottom: 12px; color: var(--qcolor); letter-spacing: -0.05em; }
.cm_quick_list .quick_tit { font-size: 30px; font-weight: 700; color: var(--cm-black); margin-bottom: 20px; letter-spacing: -0.05em; }
.cm_quick_list .quick_desc { font-size: 16px; font-weight: 400; color: var(--cm-gray); line-height: 1.6; margin-bottom: 35px; word-break: keep-all; letter-spacing: -0.02em; }
.cm_quick_list .quick_more { display: inline-block; font-family: 'Poppins', var(--cm-font); font-size: 16px; font-weight: 400; color: var(--cm-black); position: relative; padding-bottom: 4px; transition: color 0.3s ease; }
.cm_quick_list a:hover .quick_more { color: var(--qcolor); }
.cm_quick_list .quick_more::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--cm-black); }
.cm_quick_list .quick_more::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background: var(--qcolor); transition: width 0.3s ease; }
.cm_quick_list a:hover .quick_more::after { width: 100%; }

@media (max-width: 1440px) {
    #main_new_arrival .cm_new_prev { left: 0px; background: rgba(255,255,255,0.7); border-radius: 50%; width: 40px; height: 40px; }
    #main_new_arrival .cm_new_next { right: 0px; background: rgba(255,255,255,0.7); border-radius: 50%; width: 40px; height: 40px; }
    #main_new_arrival .cm_new_title { font-size: 16px; }
}
@media (max-width: 1024px) {
    #main_new_arrival .cm_new_prev,
    #main_new_arrival .cm_new_next { display: none !important; }
}
@media (max-width: 768px) {
    .cm_new_arrival_tit h2 { font-size: 34px; }
    .cm_new_arrival_tit p { font-size: 16px; word-break: keep-all; }
    
    .cm_new_tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }
    .cm_new_tabs::-webkit-scrollbar { display: none; }
    .cm_tab_btn {
        padding: 8px 24px;
        font-size: 15px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #main_quick_menu { padding: 80px 0; }
    .cm_quick_list { flex-direction: column; gap: 40px; align-items: center; }
    .cm_quick_list li { max-width: 100%; padding: 0 20px; }
    .cm_quick_list .quick_img { height: 90px; margin-bottom: 20px; }
    .cm_quick_list .quick_img img { max-width: 80px; max-height: 80px; }

    .ft_links { gap: 10px 8px; }
    .ft_link_li + .ft_link_li::before { margin: 0 10px; }
    .ft_link_li:nth-child(4) { width: 100%; margin-top: 8px; }
    .ft_link_li:nth-child(4)::before { display: none !important; }
    .ft_link_li a, .ft_link_li a iconify-icon { font-size: 15px !important; }
    
    .ft_right_group { width: 100%; justify-content: space-between; margin-top: 14px; }
    .ft_family_btn { width: 160px; }
}

/* ==============================================================
   CATEGORY LIST (sct_10 override)
   ============================================================== */
.sct_10 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    margin: 0 0 80px 0;
    padding: 0;
    list-style: none;
}
.sct_10::after { display: none !important; } /* clear float override */
.sct_10 .sct_li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
}
.sct_10 .cm_new_card {
    height: 100%;
}
.sct_10 .cm_new_img_box img {
    /* If GNUBoard wraps img in '<a>', get_it_image returns <img> directly */
}

@media (max-width: 1024px) {
    .sct_10 { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
}
@media (max-width: 768px) {
    .sct_10 { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; margin-bottom: 50px; }
}

/* ==============================================================
   ?브?이지 카테고리 ??(?체보기 CSS ?이?교체)
   ============================================================== */
.product_tab li a .ico_box.all {
    background-image: none !important;
    position: relative;
}
.product_tab li a .ico_box.all::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--cm-black, #000);
    border-radius: 2px;
    box-shadow: 
        10px 0 0 0 var(--cm-black, #000),
        20px 0 0 0 var(--cm-black, #000),
        0 10px 0 0 var(--cm-black, #000),
        10px 10px 0 0 var(--cm-black, #000),
        20px 10px 0 0 var(--cm-black, #000),
        0 20px 0 0 var(--cm-black, #000),
        10px 20px 0 0 var(--cm-black, #000),
        20px 20px 0 0 var(--cm-black, #000);
    transform: translate(-13px, -13px);
}

/* ???�체 ?�이�?15% ?��? (기존 10% -> 11.5%) - ?? 메인?�이지 ?�형 ???�외 */
@media (min-width: 1025px) {
    .product_tab:not(.main_tab) li { width: calc(11.5% - 9.9px) !important; }
}

/* ?�브?�이지 카테고리 ??(Total ?�스??�?검?�버???�이콘화) */
.item_total b.count {
    font-family: var(--cm-font) !important;
    font-size: calc(100% + 2px);
    font-weight: 600 !important;
    color: var(--cm-primary) !important;
    margin-left: 4px; /* 기존 ?�페?�스 공백보다 20% 줄어??간격 */
}
.search_btn {
    background-image: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-indent: 0 !important;
    color: #fff !important; /* 블랙 버튼 ?�스???��?*/
}

/* 카테고리 ???�단 ?�스??굵기 �?컬러 조정 */
.product_tab li a strong {
    font-weight: 400 !important; /* 기본 reg */
    color: #777 !important; /* ?�톤 ??�� 컬러 */
}
.product_tab li.on a strong,
.product_tab li a:hover strong {
    font-weight: 600 !important; /* ?�성???�버 ??semibold */
    color: var(--cm-black, #000) !important;
}

/* ==============================================================
   ?�브?�이지 ?�단 검?�바 �??�단 ?�이지?�이??모던??   ============================================================== */

/* 1. ?�단 검?�바 (Search Bar) */
.product_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--cm-black);
    padding-bottom: 24px;
    margin-bottom: 80px !important;
}
.search_form { margin: 0; padding: 0; }
.search_form .search_box {
    display: flex !important;
    gap: 4px !important; /* 간격 축소 */
    align-items: center !important;
    flex-wrap: nowrap !important; justify-content: flex-end !important;
}
.search_form #search_select {
    width: 130px;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    border: 1px solid var(--cm-border);
    border-radius: 6px;
    outline: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s;
    font-family: inherit;
    cursor: pointer;
}
.search_form #search_select:focus {
    border-color: var(--cm-primary);
}
.search_form .input_box {
    padding: 0 !important;

    display: flex;
    align-items: stretch;
    border: 1px solid var(--cm-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: all 0.2s;
}
.search_form .input_box:focus-within {
    border-color: var(--cm-primary);
}
.search_form .input_box #search_input {
    border: none !important;
    border-radius: 0;
    width: 260px;
    height: 46px;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}
.search_form .search_btn {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;

    flex-shrink: 0 !important;
    border: none;
    background-color: var(--cm-black) !important;
    color: #fff !important;
    width: 46px;
    height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    cursor: pointer;
}
.search_form .search_btn:hover {
    background-color: var(--cm-primary) !important;
}

/* 2. ?�단 ?�이지?�이??(Pagination) */
.list-page { margin-top: 20px; text-align: center; }
.list-page .pagination {
    display: inline-flex;
    gap: 8px;
    padding-left: 0;
    list-style: none;
    margin: 0;
}
.list-page .pagination > li:first-child { margin-right: -4px; }
.list-page .pagination > li:last-child { margin-left: -4px; }
.list-page .pagination > li { display: inline-block; }
.list-page .pagination > li > a,
.list-page .pagination > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cm-border) !important;
    background: #fff;
    color: var(--cm-gray);
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px !important;
    transition: all 0.2s ease;
    margin: 0 !important;
    text-decoration: none;
    line-height: 1;
}
.list-page .pagination > li > a:hover {
    color: var(--cm-primary);
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary-light);
    z-index: 2;
}
.list-page .pagination > .active > a,
.list-page .pagination > .active > span {
    z-index: 3;
    color: #fff !important;
    background-color: var(--cm-primary) !important;
    border-color: var(--cm-primary) !important;
    font-weight: 600;
}

/* ==============================================================
   ?�브?�이지 공통 ?�단 ?�백 (?�중 ?�백 ?�거)
   ============================================================== */
.at-body:not(#common_content) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#brand_story01,
#brand_story02,
#brand_story03,
#brand_story04 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==============================================================
   관리자 / 리스???�단 기능 버튼 모던??   ============================================================== */
.list-btn .btn-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.list-btn .btn-group .btn {
    float: none !important;
    border-radius: 8px !important;
    border: 1px solid #111 !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 14px !important;
    padding: 8px 18px !important;
    font-weight: 400;
    transition: all 0.2s ease;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.02em;
}
.list-btn .btn-group .btn i.fa {
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}
.list-btn .btn-group .btn:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}
.list-btn .btn-group .btn:hover i.fa {
    color: #fff;
}

@media all and (max-width: 768px) {
    .at-body:not(#common_content) {
        padding-bottom: 0 !important; /* 모바?�용 ?�절??공통 ?�백 */
    }
}

/* �������� �� �Խ��� ������ ��ư ��ظų� ���� */
.list-admin .btn-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.list-admin .btn-group .btn { float: none !important; border-radius: 5px !important; border: 1px solid #333 !important; background: #fff !important; color: #333 !important; font-size: 14px; height: 38px; line-height: 36px; padding: 0 15px; box-shadow: none !important; }
.list-admin .btn-group .btn i.fa { margin-right: 4px; color: #333 !important; }
.list-admin .btn-group .btn:hover { background: #333 !important; color: #fff !important; }
.list-admin .btn-group .btn:hover i.fa { color: #fff !important; }


/* �������� ��Ʈ ũ�� �� ���� ���� (��� ���, ȭ��Ʈ �ؽ�Ʈ) */
.list-admin .btn-group .btn { display: inline-flex !important; align-items: center; justify-content: center; background: #333 !important; color: #fff !important; text-decoration: none !important; }
.list-admin .btn-group .btn i.fa { color: #fff !important; }
.list-admin .btn-group .btn:hover { background: #fff !important; color: #333 !important; }
.list-admin .btn-group .btn:hover i.fa { color: #333 !important; }


/* Board Additional UI Refinements */
.board_btn, .view_list_btn, .btn_submit { border-radius: 50px !important; transition: all 0.3s ease-in-out !important; }
.board_btn:hover, .view_list_btn:hover, .btn_submit:hover { background-color: var(--cm-primary) !important; color: #fff !important; border-color: var(--cm-primary) !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.search_form .search_box .search_btn { background: #333; color: #fff; }
.search_form .search_box .search_btn:hover { background: var(--cm-primary) !important; border-color: var(--cm-primary) !important; }
.list-admin .btn-group { justify-content: flex-start !important; margin-top: 0 !important; }
/* Ensure admin buttons are fully rounded too if they should be */
.list-admin .btn-group .btn { border-radius: 20px !important; }


/* Write Form Refinements */
.write-wrap { border-top: none !important; }
#fwrite { border-top: 2px solid #222 !important; }
.write_required_text { font-size: 15px !important; }
.write_box .write_tit, .write_box .write_tit label { font-weight: 500 !important; }
/* FAQ Align */
.cm-faq-item .cm-faq-q, .cm-faq-item .cm-faq-a { align-items: flex-start !important; }
.cm-faq-q-label, .cm-faq-a-label { margin-top: 2px; }


/* Product bottom admin buttons */
.sm_btn_box a { display: inline-flex !important; align-items: center; justify-content: center; background: #222 !important; color: #fff !important; border-radius: 50px !important; padding: 0 16px; font-size: 14px; text-decoration: none; border: none; transition: all 0.3s ease !important; height: 38px; line-height: 38px; margin: 0 2px; }
.sm_btn_box a i.fa { margin-right: 4px; color: #fff !important; }
.sm_btn_box a:hover { background: var(--cm-primary) !important; color: #fff !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.sm_btn_box a:hover i.fa { color: #fff !important; }


/* View Board Admin Buttons */
.btn-black-round { display: inline-flex; align-items: center; justify-content: center; background: #222 !important; color: #fff !important; border-radius: 50px !important; padding: 0 16px; font-size: 14px; text-decoration: none; border: none; transition: all 0.3s ease !important; height: 38px; line-height: 38px; margin: 0 2px; }
.btn-black-round i.fa { margin-right: 5px; color: #fff !important; }
.btn-black-round:hover { background: var(--cm-primary) !important; color: #fff !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-black-round:hover i.fa { color: #fff !important; }
.view_list_btn:hover { background: var(--cm-primary) !important; }
.view_list_btn:hover i.fa { color: #fff !important; }


/* My Page B2B Dashboard */
.b2b-dashboard { margin-top: 70px; margin-bottom: 60px; }
.dashboard-header { margin-bottom: 30px; border-bottom: 2px solid #222; padding-bottom: 15px; }
.dashboard-header h2 { font-size: 25px; font-weight: 700; color: #222; margin: 0; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dash-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); transition: box-shadow 0.3s; } .dash-card { overflow: visible; }
.dash-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.profile-card { background: #fafafa; }
.user-grade { display: inline-block; background: var(--cm-primary); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.user-name { display: block; font-size: 24px; color: #222; margin-bottom: 5px; }
.user-id { font-size: 15px; color: #777; }
.benefit-box { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #ccc; display: flex; align-items: flex-start; gap: 10px; }
.benefit-box i { color: var(--cm-primary); font-size: 20px; margin-top: 3px; }
.benefit-box span { display: block; font-size: 13px; color: #666; }
.benefit-box strong { display: block; font-size: 15px; color: #222; }
.misu-card { display: flex; flex-direction: column; justify-content: center; }
.card-title { font-size: 16px; font-weight: 600; color: #555; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.card-value { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 10px; }
.card-value .text-danger { color: #e53e3e; }
.card-value span { font-size: 18px; font-weight: 400; margin-left: 5px; }
.card-desc { font-size: 14px; color: #888; }
.stat-group { display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px; }
.stat-item a { display: flex; align-items: center; text-decoration: none; padding: 10px; border-radius: 8px; transition: background 0.3s; }
.stat-item a:hover { background: #f5f5f5; }
.stat-item i { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-right: 15px; }
.bg-orange { background: var(--cm-primary); }
.bg-dark { background: #333; }
.bg-gray { background: #999; }
.stat-info span { display: block; font-size: 14px; color: #666; margin-bottom: 2px; }
.stat-info strong { display: block; font-size: 18px; font-weight: 700; color: #222; }
/* My Page Action Row */
.b2b-action-row td { background: #fafafa; border-top: none !important; border-bottom: 1px solid #ddd; padding: 10px 20px !important; }
.action-btn-group a { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 6px 12px; border-radius: 4px; text-decoration: none !important; margin: 0; transition: all 0.2s; width: 100%; box-sizing: border-box; }
/* 주문상세: primary 컬러 */
.btn-action.view { border: 1px solid var(--cm-primary); color: var(--cm-primary); background: #fff; }
.btn-action.view:hover { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }
/* 거래명세서: black 컬러 */
.btn-action.print { border: 1px solid #222; color: #222; background: #fff; }
.btn-action.print:hover { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }
.btn-action i { margin-right: 5px; }
/* 상태 뱃지 - 버튼과 동일한 사이즈 */
.status-badge { display: block; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; text-align: center; margin-bottom: 4px; box-sizing: border-box; }
/* 입금확인중 - gray */
.status-confirm { background: #ededed; color: #666; border: 1px solid #ccc; }
/* 입금완료 - black outlined */
.status-paid { background: #e0e0e0; color: #222; border: 1px solid #999; }
/* 상품준비중 - mid gray */
.status-ready { background: #e8e8e8; color: #444; border: 1px solid #bbb; }
/* 상품배송 - primary orange */
.status-shipping { background: #fa5f03; color: #fff; border: 1px solid #fa5f03; }
/* 배송완료 - black filled */
.status-done { background: #222; color: #fff; border: 1px solid #222; }
/* 주문취소 - faded gray */
.status-cancel { background: #f0f0f0; color: #aaa; border: 1px solid #ddd; }
/* Grade Benefit Card */
.grade-benefit-card { display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: visible; }
.grade-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 14px; font-weight: 700; align-self: flex-start; margin-bottom: 4px; }
.badge-new { background: #fff; color: var(--cm-primary); border: 1px solid var(--cm-primary); }
.badge-silver { background: #fff; color: var(--cm-primary); border: 1px solid var(--cm-primary); }
.badge-gold { background: #fff; color: var(--cm-primary); border: 1px solid var(--cm-primary); }
.badge-vip { background: #fff; color: var(--cm-primary); border: 1px solid var(--cm-primary); }
.grade-discount { display: flex; align-items: baseline; gap: 8px; }
.grade-rate { font-size: 34px; font-weight: 800; color: var(--cm-primary); line-height: 1; letter-spacing: -1px; }
.grade-rate-label { font-size: 14px; color: #555; line-height: 1.3; }
.grade-benefit-title { font-size: 18px; font-weight: 700; color: #222; }
.grade-benefit-desc { font-size: 15px; color: #666; line-height: 1.6; }
.grade-condition { font-size: 13px; color: #888; padding: 4px 8px; background: #f5f5f5; border-radius: 4px; display: inline-block; }
.grade-benefit-next { font-size: 14px; color: #888; border-top: 1px dashed #e0e0e0; padding-top: 8px; margin-top: 2px; }
.grade-benefit-next b { color: var(--cm-primary); font-weight: 700; }
.grade-next-wrap { border-top: 1px dashed #e0e0e0; padding-top: 8px; margin-top: 0; display: flex; flex-direction: column; gap: 6px; }
.grade-next-wrap .grade-benefit-next { border-top: none; padding-top: 0; margin-top: 0; }
.grade-next-cond { font-size: 13px; color: #aaa; line-height: 1.6; }
/* Profile Card Center + Action Buttons */
.profile-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.profile-info { display: flex; flex-direction: column; align-items: center; }
.profile-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #ebebeb; width: 100%; }
.profile-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 38px; font-size: 14px; font-weight: 500; border-radius: 6px; text-decoration: none !important; transition: all 0.22s ease; letter-spacing: -0.2px; }
.btn-inquiry { border: 1px solid var(--cm-primary); color: var(--cm-primary); background: #fff; }
.btn-inquiry:hover { background: var(--cm-primary); color: #fff; }
.btn-logout { border: 1px solid #ddd; color: #888; background: #fff; }
.btn-logout:hover { border-color: #222; color: #222; background: #f5f5f5; }


@media(max-width: 991px) { .dashboard-grid { grid-template-columns: 1fr; } }


/* CM FAQ Category Tabs */
.cm-faq-category { margin-bottom: 30px; text-align: left; }
.cm-faq-cat-ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cm-faq-cat-a { display: block; padding: 12px 32px; font-size: 16px; font-weight: 500; color: #555; background: #f5f5f5; border-radius: 40px; text-decoration: none; border-bottom: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.cm-faq-cat-li.on .cm-faq-cat-a, .cm-faq-cat-a:hover { background: #222; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }


/* �̺�Ʈ �޴� GNB ����޴� ���� ó�� */
li:has(> a[href*="bo_table=event"]) > ul, .sub_menu:has(a[href*="bo_table=event"]) { display: none !important; }


/* MyPage Sidebar Kurly Style Overrides */
.mypage_sidebar .my_menu { border: none !important; padding: 0 !important; }
.mypage_sidebar .my_menu .dep1_li { padding-bottom: 20px !important; margin-bottom: 25px !important; border-bottom: 1px solid #f2f2f2 !important; }
.mypage_sidebar .my_menu .dep1_li:last-child { border-bottom: none !important; }
.mypage_sidebar .my_menu .dep1_a { font-size: 14px !important; color: #b5b5b5 !important; font-weight: 400 !important; pointer-events: none; }
.mypage_sidebar .my_menu .dep2_ul { margin-top: 15px !important; }
.mypage_sidebar .my_menu .dep2_li { margin-bottom: 12px !important; }
.mypage_sidebar .my_menu .dep2_a { font-size: 15px !important; color: #444 !important; font-weight: 400 !important; letter-spacing: -0.3px; }
.mypage_sidebar .my_menu .dep2_a:hover, .mypage_sidebar .my_menu .dep2_a.on { color: var(--cm-primary, #fa5f03) !important; font-weight: 500 !important; }


/* MyPage Kurly Style Tables Overrides */
.mypage_content section { margin-bottom: 60px; }
.mypage_content section h4 { font-size: 18px; font-weight: 500; color: #222; margin-bottom: 20px; }
.mypage-tbl { border-top: 2px solid #333; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
.mypage-tbl thead th { background: #fff !important; color: #333 !important; font-weight: 500 !important; border-bottom: 1px solid #ddd !important; border-top: none !important; padding: 18px 10px !important; }
.mypage-tbl tbody td { border-bottom: 1px solid #f4f4f4 !important; padding: 20px 10px !important; color: #555; vertical-align: middle !important; }
.mypage-tbl a { color: #333; text-decoration: none; }
.mypage-tbl a:hover { color: var(--cm-primary, #fa5f03); text-decoration: underline; }

a.cm_new_card:hover .cm_new_title {
    color: var(--cm-primary, #ff6600) !important;
    text-decoration: underline !important;
}

/* Shop Item List Row Gap Override: 세로 간격만 60px */
@media (min-width: 1025px) {
    body .list-wrap { margin-top: 60px !important; }
    body .list-wrap .item-list { margin-bottom: 60px !important; }
}

/* ==============================================================
   스크롤 리빌(Scroll Reveal) 애니메이션 전역 클래스
   ============================================================== */
.cm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.cm-reveal.cm-reveal-active {
    opacity: 1;
    transform: translateY(0);
}


/* ==============================================
   모바일 검색바 반응형 처리 (제품 및 전역)
   ============================================== */
@media (max-width: 768px) {
    .product_top { flex-direction: column !important; align-items: stretch !important; gap: 15px !important; margin-bottom: 40px !important; }
    .search_form .search_box, #board_list_top .search_box { flex-wrap: wrap !important; width: 100% !important; justify-content: center !important; }
    .search_form #search_select { width: 100% !important; margin-bottom: 8px !important; }
    .search_form .input_box, #board_list_top .search_box .input_box { width: 100% !important; display: flex !important; }
    .search_form .input_box #search_input { flex: 1 !important; width: auto !important; }
}

/* ==============================================
   게시판 검색바 전용 모바일 반응형 처리
   ============================================== */
@media (max-width: 768px) {
    #board_list_top .search_form { float: none !important; max-width: 100% !important; margin-bottom: 15px !important; width: 100% !important; }
    #board_list_top .search_box { display: flex !important; flex-wrap: wrap !important; width: 100% !important; background: transparent !important; border: none !important; float: none !important; justify-content: center; }
    #board_list_top .search_box select { width: 100% !important; max-width: none !important; margin-bottom: 8px !important; border: 1px solid var(--cm-border); height: 46px !important; border-radius: 6px; }
    #board_list_top .search_box .input_box { width: 100% !important; display: flex !important; border: 1px solid var(--cm-border) !important; border-radius: 6px !important; overflow: hidden; background: #fff !important; }
    #board_list_top .search_box .input_box input { flex: 1 !important; width: auto !important; border: none !important; height: 46px !important; background: transparent !important; }
    #board_list_top .search_box .input_box button { width: 46px !important; height: 46px !important; flex-shrink: 0 !important; background: var(--cm-black) !important; display: flex !important; align-items: center; justify-content: center; border: none !important; }
    #board_list_top .search_box .input_box button iconify-icon { color: #fff !important; }
}

/* 게시판 상단 여백 리셋 (제품 리스트 60px 간격과 충돌 방지) */
.board-list .list-wrap { margin-top: 0 !important; }

/* ==============================================
   모든 검색창 돋보기 버튼 정밀 교정 (제품, 게시판 공통)
   ============================================== */
.search_form .input_box,
#board_list_top .search_box .input_box {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

.search_form .input_box input[type="text"],
.search_form .input_box #search_input,
#board_list_top .search_box .input_box input {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important; /* flex 버그 방지 */
    height: auto !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
    outline: none !important;
    border-radius: 0 !important;
}

.search_form .search_btn,
.search_form .input_box button,
#board_list_top .search_box .input_box button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--cm-black) !important;
    color: #fff !important;
    width: 50px !important;
    height: auto !important;     /* 부모 높이만큼 늘어남 */
    min-height: 48px !important;
    flex: 0 0 50px !important;   /* flex 절대 고정 (shrink 방지, 고정 너비) */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.search_form .search_btn iconify-icon,
.search_form .input_box button iconify-icon,
#board_list_top .search_box .input_box button iconify-icon {
    color: #fff !important;
    display: block !important;
}

/* 공지사항(Notice) 배경 및 호버 색상을 그린톤에서 그레이톤으로 변경 */
.list-board .list-body li.list-notice,
.list-board .list-body li.bg-light {
    background-color: #fbfbfb !important;
}
.list-board .list-body li.list-notice:hover,
.list-board .list-body li.bg-light:hover {
    background-color: #f4f4f4 !important;
}

/* ==============================================
   게시판 및 검색창 높이(Size) 완벽 동기화 패치
   ============================================== */
.search_form #search_select,
#board_list_top .search_box select {
    height: 46px !important;
    box-sizing: border-box !important;
}

.search_form .input_box,
#board_list_top .search_box .input_box {
    height: 46px !important;  /* 컨테이너 높이 강제 고정 */
    box-sizing: border-box !important;
}

.search_form .input_box input[type="text"],
.search_form .input_box #search_input,
#board_list_top .search_box .input_box input {
    height: 100% !important; 
    min-height: 0 !important;
}

.search_form .search_btn,
.search_form .input_box button,
#board_list_top .search_box .input_box button {
    height: 100% !important; /* 부모(input_box)의 높이에 완벽히 맞춤 */
    min-height: 0 !important; /* 이전 48px 속성 해제 */
}

/* ==============================================
   모바일/태블릿 (max-width: 991px) 검색창 강제 2줄 배치 (제품/게시판 공통)
   ============================================== */
@media (max-width: 991px) {
    .search_form .search_box, 
    #board_list_top .search_box { 
        display: flex !important;
        flex-wrap: wrap !important; 
        width: 100% !important; 
        justify-content: center !important; 
    }
    
    .search_form #search_select,
    #board_list_top .search_box select { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin-bottom: 8px !important; 
        display: block !important;
    }
    
    .search_form .input_box, 
    #board_list_top .search_box .input_box { 
        width: 100% !important; 
        max-width: 100% !important;
        display: flex !important; 
        margin-bottom: 0 !important;
    }

    #board_list_top .search_form {
        max-width: 100% !important; /* 모바일에서 고정 너비 해제, 100% 채움 */
        width: 100% !important;
        float: none !important;
        margin: 0 auto 15px !important;
    }
}

/* ==============================================
   모든 화면(모바일/태블릿) 강제 2줄 (1024px 이하 전부)
   캐시 우회용 최강도 속성 부여
   ============================================== */
@media (max-width: 1024px) {
    /* 상품상단, 게시판상단 flex 해제 후 block 수직 배치 */
    .product_top, 
    #board_list_top { 
        display: block !important; 
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    
    .product_top .item_total, 
    #board_list_top .board_total { 
        display: block !important; 
        margin-bottom: 15px !important; 
        text-align: center !important;
    }
    
    .search_form, 
    #board_list_top .search_form { 
        float: none !important;
        width: 100% !important; 
        max-width: 100% !important;
        margin: 0 auto !important; 
    }
    
    .search_form .search_box, 
    #board_list_top .search_box { 
        display: block !important; /* flex 제거, 확실하게 두 줄 분할 */
        width: 100% !important; 
    }
    
    .search_form #search_select,
    #board_list_top .search_box select { 
        width: 100% !important; 
        max-width: 100% !important;
        margin-bottom: 8px !important; 
        display: block !important;
    }
    
    .search_form .input_box, 
    #board_list_top .search_box .input_box { 
        width: 100% !important; 
        max-width: 100% !important;
        display: flex !important; /* input과 버튼은 항상 옆에 있어야 함 */
        margin-bottom: 0 !important;
    }
}

/* ==============================================
   최종 해결: 무조건 세로(수직) 배치 (1024px 이하)
   ============================================== */
@media (max-width: 1024px) {
    #board_list_top .search_box,
    .search_form .search_box {
        display: flex !important;
        flex-direction: column !important; /* 강제 세로 스택 */
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    #board_list_top .search_box select,
    .search_form #search_select {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        margin-bottom: 0 !important;
    }
    
    #board_list_top .search_box .input_box,
    .search_form .input_box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* 인풋과 버튼은 다시 가로 */
        align-items: stretch !important;
    }
    
    /* 검색폼 너비 제한 해제 */
    #board_list_top .search_form,
    .search_form {
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* ==============================================
   마이페이지 모바일 반응형 (B안)
   ============================================== */

/* ── 모바일 사이드바 토글 버튼 ── */
.mypage-nav-toggle {
    display: none;
    width: 100%;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    transition: background 0.2s;
}
.mypage-nav-toggle:hover { background: #fafafa; }
.mypage-nav-toggle .toggle-label { display: flex; align-items: center; gap: 10px; }
.mypage-nav-toggle .toggle-icon { font-size: 18px; color: var(--cm-primary); }
.mypage-nav-toggle .toggle-arrow { transition: transform 0.3s ease; font-size: 12px; color: #999; }
.mypage-nav-toggle.open .toggle-arrow { transform: rotate(180deg); }

/* 모바일에서 메뉴 슬라이드 */
.mypage_sidebar .my_menu {
    transition: max-height 0.4s ease, opacity 0.3s ease;
    overflow: hidden;
}
.mypage_sidebar .my_menu.nav-collapsed {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}
.mypage_sidebar .my_menu.nav-open {
    max-height: 1200px;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    /* ── 대시보드 ── */
    .b2b-dashboard { margin-top: 30px; margin-bottom: 30px; }
    .dashboard-header { margin-bottom: 18px; padding-bottom: 12px; }
    .dashboard-header h2 { font-size: 18px; }
    .dashboard-grid { gap: 12px; }
    .dash-card { padding: 18px 16px; }

    /* stat 수평 배치 (3분할) */
    .stat-group { flex-direction: row; padding: 12px 6px; gap: 0; }
    .stat-item { flex: 1; border-right: 1px solid #f0f0f0; }
    .stat-item:last-child { border-right: none; }
    .stat-item a { flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; gap: 6px; text-align: center; }
    .stat-item i { width: 36px; height: 36px; font-size: 16px; margin-right: 0; }
    .stat-info span { font-size: 11px; margin-bottom: 1px; }
    .stat-info strong { font-size: 15px; }

    /* profile-card 가로 배치 (좌우 1:1 비율) */
    .profile-card { flex-direction: row; gap: 14px; align-items: center; text-align: left; padding: 16px; }
    .profile-info { align-items: flex-start; flex: 1; width: 50%; box-sizing: border-box; }
    .user-name { font-size: 18px; }
    .user-id { font-size: 13px; }
    .profile-actions { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px solid #ebebeb; padding-left: 14px; flex-direction: column; gap: 8px; flex: 1; width: 50%; box-sizing: border-box; }
    .profile-btn { height: 36px; font-size: 14px; width: 100%; }

    /* grade benefit 카드 */
    .grade-rate { font-size: 26px; }
    .grade-benefit-title { font-size: 15px; }
    .grade-benefit-desc { font-size: 13px; }

    /* ── 사이드바 토글 ── */
    .mypage-nav-toggle { display: flex; }
    .mypage_sidebar .my_menu { border-radius: 0 0 8px 8px; border: 1px solid #e0e0e0; border-top: none; padding: 18px 18px !important; }

    /* dep1/dep2 모바일 크기 보정 및 구분감 강화 */
    .mypage_sidebar .my_menu .dep1_li { padding-bottom: 15px !important; margin-bottom: 15px !important; border-bottom: 1px solid #eee !important; }
    .mypage_sidebar .my_menu .dep1_li:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
    .mypage_sidebar .my_menu .dep1_a { font-size: 13px !important; color: #999 !important; margin-bottom: 8px; display: block; }
    .mypage_sidebar .my_menu .dep2_a { font-size: 16px !important; padding: 10px 12px; display: block; border-radius: 6px; background: #fafafa; margin-bottom: 4px; }
    .mypage_sidebar .my_menu .dep2_a.on { background: #fff3eb; color: var(--cm-primary) !important; border: 1px solid #fa5f03; font-weight: 600 !important; }
    .mypage_sidebar .my_menu .dep2_li { margin-bottom: 4px !important; }

    /* ── 주문 테이블 (가로 스크롤로 복구) ── */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
    .mypage-tbl { min-width: 600px; } /* 넓이를 강제하여 모바일에서 스크롤을 유도 */
    
    .empty_table { display: table-cell; text-align: center; padding: 30px 0 !important; color: #aaa; font-size: 14px; }
}