/* BASIC css start */
/* ========================================
   1. °øÅë ·¹ÀÌ¾î / ¸ð´Þ ¹è°æ
======================================== */
#mask,
#dim,
#layer_background {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
}
#layer_background.active { display: block; }


/* ========================================
   2. Çì´õ
======================================== */

/* »ó´Ü ¹è³Ê */
.head_banner {
    background: #BF2526;
    text-align: center;
}
.head_banner a {
    display: inline-block;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.head_banner a b { font-weight: 700; }

/* Çì´õ ±âº» */
.header {
    position: sticky;
    top: 0;
    padding-top: 10px;
    background: #fff;
    border-bottom: 1px solid #ededed;
    z-index: 10;
}
.header .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .header .inner { padding: 0 12px; }
}

/* Çì´õ »ó´Ü */
.header .inner_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.header .inner_top .logo img {
    width: 120px;
    display: block;
}
.header .inner_top .right_top {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

/* Àå¹Ù±¸´Ï ¾ÆÀÌÄÜ ¼ö·® */
.header .inner_top li.cart_btn { position: relative; }
.header .inner_top li.cart_btn .user_basket_quantity {
    position: absolute;
    bottom: 0; right: -2px;
    width: 16px; height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background: #bf2526;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/* ¸¶ÀÌÆäÀÌÁö hover µå·Ó´Ù¿î */
.header .inner_top li.my_btn,
.head_log li.my_btn { position: relative; }
.header .inner_top li.my_btn div,
.head_log li.my_btn div {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.header .inner_top li.my_btn:hover div,
.head_log li.my_btn:hover div {
    opacity: 1;
    visibility: visible;
}

/* ¸Þ´º ¿µ¿ª */
.header .inner_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    padding: 0 20px 0 0; /* ¿À¸¥ÂÊ¸¸ ¿©¹é */
    box-sizing: border-box;
}
.header .inner_bottom .left_group {
    display: flex;
    align-items: center;
    gap: 30px;
}
.header .inner_bottom .nav_cate { margin-left: 0; padding-left: 0; }

.header .inner_bottom ul,
.header .inner_bottom .left_menu ul,
.header .inner_bottom .right_menu ul,
.header .inner_bottom .nav_cate ul {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header .inner_bottom a {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    padding-bottom: 14px;
    transition: all 0.1s ease;
}
.header .inner_bottom a:hover { opacity: 0.7; }
.header .inner_bottom a.active {
    font-weight: 700;
    color: #000;
    border-bottom: 2px solid #000;
    opacity: 1;
}
.header .inner_bottom a.red-menu { color: #bf2526; }
.header .inner_bottom a.red-menu.active {
    border-bottom: 2px solid #bf2526;
}

/* Çì´õ »ó´Ü ·Î±×ÀÎ/¸¶ÀÌÆäÀÌÁö */
.head_log {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.head_log .top_log {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.head_log .top_log li {
    display: flex;
    align-items: center;
}


/* ========================================
   3. »çÀÌµå ¸Þ´º / ÇÜ¹ö°Å ¸Þ´º
======================================== */
#hd_aside {
    position: fixed;
    top: 0; left: 0;
    width: 400px; height: 100%;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 9999;
}
#hd_aside.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
#hd_aside .aside_closed {
    position: absolute;
    top: 15px; right: 15px;
    cursor: pointer;
    z-index: 10000;
}

/* ¸Þ´º ¸®½ºÆ® */
#hd_aside .aside_cate {
    padding: 70px 20px 20px;
}
#hd_aside .aside_cate li {
    position: relative;
    padding: 8px 0 8px 10px;
}
#hd_aside .aside_cate li a {
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}
#hd_aside .aside_cate li span { position: absolute; right: 0; }

/* ´ëºÐ·ù */
#hd_aside .aside_cate li.depth1 > a {
    font-weight: 900;
    transition: all 0.3s;
}
#hd_aside .aside_cate li.depth1.is-active > a,
#hd_aside .aside_cate li.depth1 > a:hover {
    font-weight: 800;
    color: #bf2526;
}

/* ÁßºÐ·ù */
#hd_aside .aside_cate li.depth2 > a {
    font-weight: 900;
    transition: all 0.3s;
}
#hd_aside .aside_cate li.depth2.is-active > a,
#hd_aside .aside_cate li.depth2 > a:hover {
    font-weight: 900;
    color: #bf2526;
}

/* ¼ÒºÐ·ù */
#hd_aside .aside_cate li.sub .aside_subcate li a {
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s;
}
#hd_aside .aside_cate li.sub .aside_subcate li a:hover {
    color: #bf2526;
    padding-left: 5px;
}

/* ¿­¸²/´ÝÈû Á¦¾î */
#hd_aside .aside_cate li.depth1 > ul,
#hd_aside .aside_cate li.depth2 .sub-submenu,
#hd_aside .aside_cate li.sub .aside_subcate {
    display: none;
}
#hd_aside .aside_cate li.depth1.is-active > ul,
#hd_aside .aside_cate li.depth2.has-sub.is-active .sub-submenu,
#hd_aside .aside_cate li.sub.is-active .aside_subcate {
    display: block;
}

/* È­»ìÇ¥ È¸Àü */
#hd_aside .aside_cate li.sub.is-active > a span img,
#hd_aside .aside_cate li.depth2.has-sub.is-active > a span img {
    transform: rotate(180deg);
    transition: 0.3s ease;
}

/* °í°´¼¾ÅÍ ¿µ¿ª */
#hd_aside .aside_cs {
    margin-top: 40px;
    padding: 40px;
    border-top: 1px solid #ddd;
}
#hd_aside .aside_cs h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
#hd_aside .aside_cs p {
    font-size: 14px;
    font-weight: 400;
    color: var(--txt);
    margin: 8px 0;
}
#hd_aside .aside_cs .contact-hours {
    font-size: 14px;
    font-weight: 600;
    color: #bf2526;
    margin-top: 10px;
}


/* ========================================
   4. °Ë»ö ·¹ÀÌ¾î
======================================== */
/* °Ë»öÃ¢ */

.search_input { position: relative; width: 100%; }
.search_input input {
    width: 100%;
    padding: 8px 40px 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    
}
.search_input a {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
}

/* °Ë»ö ·¹ÀÌ¾î */
.search_wrap {
position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 50%;                  /* È­¸é ÀüÃ¼ µ¤±â */
    background-color: rgba(255, 255, 255, 0.97); /* Èò»ö ¹ÝÅõ¸í */
    backdrop-filter: blur(1px);    /* ¹è°æ »ìÂ¦ Èå¸² È¿°ú */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 11;
}
.search_wrap.on {
    opacity: 1;
    visibility: visible;
}
.search_wrap .inner {
    width: 680px;
    margin: 0 auto;
    padding: 30px 0;
    position: relative;
}
.search_wrap .search_input input {
    width: 100%; height: 48px;
    border: none;
    border-bottom: 1px solid #121212;
    font-size: 15px;
    color: var(--txt);
}
.search_placeholder {
    position: absolute;
    top: 50%; left: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #aaa;
    pointer-events: none;
    transition: 0.2s;
}
.search_input input:focus ~ .search_placeholder,
.search_input input:not(:placeholder-shown) ~ .search_placeholder {
    opacity: 0;
}



.recent_keywords {
    position: absolute;
    top: 100%;  /* input ¹Ù·Î ¾Æ·¡ */
    left: 0;
    z-index: 10;
    width: 100%;         /* °Ë»öÃ¢°ú °°Àº °¡·ÎÆø */
    max-height: 200px;
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
}
.recent_keywords li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.recent_keywords li:hover {
    background: #f0f0f0;
}


/* ===============================
   ÃßÃµ °Ë»ö¾î + ÀÎ±â °Ë»ö¾î Áß¾Ó Á¤·Ä
================================ */
.keyword {
    display: flex;                /* °¡·Î ¹èÄ¡ */
    gap: 10px;                    /* µÎ ¹Ú½º °£°Ý */
    justify-content: center;      /* ÀüÃ¼ Áß¾Ó Á¤·Ä */
    align-items: flex-start;      /* À§ÂÊ ±âÁØ Á¤·Ä */
    margin-top: 15px;
}

/* ÃßÃµ °Ë»ö¾î */
.keyword .recmd_search {
    flex: 1;              /* °íÁ¤Æø 300px */
    border: 1px solid #000;
    padding: 15px;
    box-sizing: border-box;
        display: flex;
    flex-direction: column;    /* ¼¼·Î ¹èÄ¡ */
    justify-content: flex-start; /* À§ÂÊ Á¤·Ä */
}

.keyword .recmd_search h3 {
font-size: 14px;
    font-weight: 600;
    margin: -5px 0 5px 0;
}

.keyword .recmd_search ul {
    display: flex;
    flex-direction: column;  /* 1¿­ ¼¼·Î Á¤·Ä */
    gap: 5px;
    margin: 0 0 0 -10px;
    padding: 0;
    list-style: none;
}

.keyword .recmd_search ul li a {
    display: inline-block;
    padding: 2.8px 12px;
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.keyword .recmd_search ul li a:hover {
    background: #eee;
    border-radius: 4px;
}

/* ÀÎ±â °Ë»ö¾î (ÇÖ Å°¿öµå) */
.search_hot_keywords {
    flex: 1;             /* ÃßÃµ °Ë»ö¾î¿Í °°Àº Æø */
    padding: 0px;
}

.search_hot_keywords ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: left;      /* ³»ºÎ Å°¿öµå Áß¾Ó Á¤·Ä */
}

.search_hot_keywords ul li {
    margin: 0;
    padding: 0;
    
}

.search_hot_keywords ul li a {
    text-decoration: none;
    color: #000;
    white-space: nowrap;
    font-size: 10px;
    
}

/* BASIC css end */

