/* BASIC css start */
/* ✅ 폰트 설정 */
#hdWrap, #asideMenu {
    font-family: 'Pretendard', -apple-system, sans-serif !important;
    letter-spacing: -0.3px !important;
}

.minSizeWrap { position: relative; width: 1200px; margin: 0 auto; }
#hdWrap { position: relative; z-index: 200; height: 240px; }

/* ✅ 최상단 영역 */
#hdWrap .hdTop { position: fixed; top: 0; left: 0; right: 0; border-bottom: 1px solid #eee; background: #fff; z-index: 101; }

/* ✅ 최상단 왼쪽 */
#hdWrap .hdTop .ht_left { float: left; }
#hdWrap .hdTop .ht_left .ht_home { display: none; position: absolute; left: 0; top: 0; }
#hdWrap .hdTop .ht_left .ht_home a { display: block; width: 52px; height: 39px; line-height: 39px; font-size: 22px; background: #292929; color: #fff; text-align: center; margin-right: 20px; }
#hdWrap .hdTop .ht_left .listWrap { float: left; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#hdWrap .hdTop .ht_left .listWrap .list { float: left; padding: 6px 0; }
#hdWrap .hdTop .ht_left .listWrap .link { position: relative; display: block; padding: 0 10px; height: 27px; line-height: 27px; font-size: 13px; color: #444; }
#hdWrap .hdTop .ht_left .listWrap .list:first-child .link { padding-left: 0; }
#hdWrap .hdTop .ht_left .listWrap .link:hover { color: #111; text-decoration: underline; }

/* ✅ 카카오 버튼 */
#hdWrap .hdTop .ht_right .link span.kakao_btn { background: #f7e41f; color: #391e1e; border: 1px solid #f7e41f; }
#hdWrap .hdTop .ht_right .link span.kakao_btn:hover { background: #f7e41f; color: #391e1e; border: 1px solid #f7e41f; }

/* ✅ JOIN 3000원 애니메이션 — 부드럽게 */
#hdWrap .hdTop .ht_left .listWrap .joinPoint {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 15px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: #019A44;
    border-radius: 10px;
    animation: joinPointAni 4s ease-in-out infinite;
}
@keyframes joinPointAni {
    0%, 100% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(-3px); opacity: 0.85; }
}
@-webkit-keyframes joinPointAni {
    0%, 100% { -webkit-transform: translateY(0px); opacity: 1; }
    50% { -webkit-transform: translateY(-3px); opacity: 0.85; }
}

/* ✅ 공지사항 */
#hdWrap .hdTop .ht_left .hdNotice { position: relative; height: 27px; line-height: 27px; overflow: hidden; float: left; padding: 6px 0; }
#hdWrap .hdTop .ht_left .hdNotice dt { float: left; padding: 0 8px 0 10px; }
#hdWrap .hdTop .ht_left .hdNotice dt a { font-size: 14px; }
#hdWrap .hdTop .ht_left .hdNotice dt .grBar { display: inline-block; margin-right: 17px; width: 1px; height: 11px; background: #ddd; vertical-align: -1px; }
#hdWrap .hdTop .ht_left .hdNotice dd { position: relative; float: left; width: 200px; height: 27px; padding-right: 20px; }
#hdWrap .hdTop .ht_left .hdNotice .hdNoticeBtn .prev { position: absolute; right: 0; top: -4px; }
#hdWrap .hdTop .ht_left .hdNotice .hdNoticeBtn .next { position: absolute; right: 0; top: 8px; }

/* ✅ 최상단 오른쪽 */
#hdWrap .hdTop .ht_right { float: right; }
#hdWrap .hdTop .ht_right .list { float: left; padding: 6px 0; }
#hdWrap .hdTop .ht_right .link { display: block; padding: 0 2px; height: 27px; line-height: 27px; }
#hdWrap .hdTop .ht_right .link span { display: block; background-color: #eaeaea; border: 1px solid #eaeaea; border-radius: 6px; width: 28px; height: 25px; text-align: center; }
#hdWrap .hdTop .ht_right .link span i { font-size: 16px; line-height: 25px; }
#hdWrap .hdTop .ht_right .link span:hover { background-color: #d6d6d6; border: 1px solid #d6d6d6; }
#hdWrap .hdTop .ht_right .list.search { padding: 6px 0 6px 2px; }
#hdWrap .hdTop .ht_right .searchArea form { position: relative; }
#hdWrap .hdTop .ht_right .searchArea input { position: relative; z-index: 2; height: 25px; width: 160px; border: 1px solid #eaeaea; background-color: #eaeaea; padding: 0 28px 0 10px; outline: none; border-radius: 6px; font-family: 'Pretendard', sans-serif; }
#hdWrap .hdTop .ht_right .searchArea input:hover,
#hdWrap .hdTop .ht_right .searchArea input:focus { background-color: #d6d6d6; border: 1px solid #d6d6d6; }
#hdWrap .hdTop .ht_right .searchArea .searchBtn { position: absolute; top: 1px; right: 1px; width: 28px; height: 28px; z-index: 2; text-align: center; line-height: 1; font-size: 18px; color: #292929; display: block; }
#hdWrap .hdTop .ht_right .searchArea .searchBtn i { padding-top: 4px; }

/* ✅ 중앙 로고 영역 */
#hdWrap .hdMid { text-align: center; height: 148px; line-height: 148px; padding-top: 40px; }
#hdWrap .hdMid:after { content: ""; display: block; clear: both; }
#hdWrap .hdMid img { vertical-align: middle; }

/* ✅ 카테고리, 전체메뉴 */
#hdWrap .hdBtm { position: relative; background: #fff; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #ddd; height: 50px; }

/* ✅ 전체보기버튼 장바구니버튼 */
#hdWrap .hdBtm .menuArea { position: absolute; top: 0; left: 0; }
#hdWrap .hdBtm .cartArea { position: absolute; top: 0; right: 0; }
#hdWrap .hdBtm .menuArea a,
#hdWrap .hdBtm .cartArea a { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
#hdWrap .hdBtm .menuArea a:hover,
#hdWrap .hdBtm .cartArea a:hover { background: #f1f1f1; }
#hdWrap .hdBtm .menuArea i,
#hdWrap .hdBtm .cartArea i { font-size: 26px; vertical-align: middle; }

/* ✅ 장바구니 숫자 — 네이버 초록색 */
#hdWrap .hdBtm .cartArea .bsCount {
    position: absolute;
    right: 6px;
    top: 11px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background-color: #03C75A;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

/* ✅ 전체보기 레이어 */
#hdWrap .hdBtm .allMenu { display: none; position: absolute; top: 0; left: 0; }
#hdWrap .hdBtm .allMenu #btn-allMenuClose { position: relative; width: 52px; height: 51px; font-size: 26px; color: #fff; text-align: center; line-height: 52px; background: #292929; cursor: pointer; z-index: 10; }
#hdWrap .hdBtm .allMenu .allMenuBx { position: absolute; top: 50px; left: 0; right: 0; width: 1198px; background: #fff; border: 1px solid #ddd; border-radius: 0 0 10px 10px; z-index: 98; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner { padding: 20px 0 0 34px; overflow: hidden; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner .allMenuList { *zoom: 1; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner .allMenuList:after { display: block; clear: both; content: ''; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner .allMenuList dl { padding: 0 34px 30px 0; float: left; width: 160px; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner dl dt { border-bottom: 1px solid #eee; margin-bottom: 4px; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner dl dt a { padding-left: 5px; font-size: 14px; font-weight: 500; height: 30px; line-height: 30px; color: #111; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner dl dd a { display: block; padding: 4px 0 4px 5px; color: #666; font-size: 13px; border-radius: 4px; }
#hdWrap .hdBtm .allMenu .allMenuBx .allMenuInner dl dd a:hover { background: #f8f8f8; color: #111; }

/* ✅ 카테고리 — hover 밑줄 개선 */
#hdWrap .hdBtm .cateWrap { text-align: center; width: 1096px; margin: 0 auto; position: relative; }
#hdWrap .hdBtm .cateWrap:after { content: ""; display: block; clear: both; }
#hdWrap .hdBtm .cateWrap .tmenu { position: relative; padding: 17px 18px; display: inline-block; }
#hdWrap .hdBtm .cateWrap .tmenu > a {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
#hdWrap .hdBtm .cateWrap .tmenu:hover > a {
    border-bottom: 1px solid #555;
    color: #111;
}
#hdWrap .hdBtm .cateWrap .tmenu .depth2 { display: none; position: absolute; background: #fff; top: 50px; left: 50%; width: 120px; margin-left: -60px; padding: 8px 0; border: 1px solid #eee; border-radius: 8px; z-index: 97; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
#hdWrap .hdBtm .cateWrap .tmenu .depth2 li { line-height: 24px; }
#hdWrap .hdBtm .cateWrap .tmenu .depth2 li a { display: block; padding: 4px 14px; font-size: 13px; color: #555; border-radius: 4px; }
#hdWrap .hdBtm .cateWrap .tmenu .depth2 li a:hover { background: #f8f8f8; color: #111; }

/* ✅ 상단 고정 */
.headerFix #hdWrap .hdBtm { position: fixed; top: 39px; left: 0; right: 0; }
.headerFix #hdWrap .ht_left .listWrap { margin-left: 72px; }
.headerFix #hdWrap .ht_left .listWrap .joinPoint { display: none; }

/* ✅ 스크롤 시 유리 효과 */
.headerFix #hdWrap .hdTop {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #eee !important;
}
.headerFix #hdWrap .hdBtm {
    top: 39px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
.headerFix #hdWrap .hdBtm .cateWrap .tmenu { padding: 13px 18px !important; }
.headerFix #hdWrap .hdBtm .menuArea a,
.headerFix #hdWrap .hdBtm .cartArea a { height: 44px !important; line-height: 44px !important; }
.headerFix #hdWrap .hdBtm .cartArea .bsCount { top: 8px !important; }

/* ✅ 우측 사이드메뉴 — 모서리 + 모바일 개선 */
#rightMenuWrap { display: none; }
#asideMenu {
    position: fixed;
    top: 0; right: 0;
    width: 170px;
    height: 100%;
    background: #fff;
    z-index: 210;
    box-shadow: -2px 0px 12px rgba(0,0,0,0.08);
    border-left: 1px solid #eee;
    font-family: 'Pretendard', sans-serif;
}
#asideMenu.rmFix { right: -170px; }
#asideMenu .aminner { padding: 20px 0 20px 11px; }

/* ✅ 우측 롤링 배너 — 모서리 */
#asideMenu .astSliderWrap {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
}
#asideMenu .astSliderWrap .astSlider img { width: 100%; }
#asideMenu .astSliderWrap .bx-controls-direction { opacity: 0; position: absolute; top: 50%; width: 100%; z-index: 60; text-align: center; }
#asideMenu .astSliderWrap:hover .bx-controls-direction { opacity: 1.0; transition: all 0.3s ease; }
#asideMenu .astSliderWrap .bx-prev, #asideMenu .astSliderWrap .bx-next { position: absolute; top: 0; margin-top: -13px; font-size: 24px; display: inline-block; }
#asideMenu .astSliderWrap .bx-prev { left: 2px; }
#asideMenu .astSliderWrap .bx-next { right: 2px; }
#asideMenu .astSliderWrap .bx-pager { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 60; text-align: center; }
#asideMenu .astSliderWrap .bx-pager-item { transition: all 0.3s ease; display: inline-block; position: relative; }
#asideMenu .astSliderWrap .bx-pager-link { display: inline-block; width: 14px; height: 3px; font-size: 0; margin: 2px; background-color: rgba(0,0,0,0.4); border-radius: 2px; }
#asideMenu .astSliderWrap .bx-pager-link.active { width: 24px; background-color: rgba(0,0,0,0.8); }

/* ✅ 우측 커뮤니티/CS 박스 — 모서리 */
#asideMenu .amWrap { margin-top: 16px; }
#asideMenu .amWrap:after { content: ""; display: block; clear: both; }
#asideMenu .amTit { margin-bottom: 6px; color: #111; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
#asideMenu .amWrap .amBtn li { float: left; }
#asideMenu .amWrap .amBtn li a {
    display: block;
    width: 68px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    font-size: 11px;
    color: #666;
    transition: all 0.2s;
}
#asideMenu .amWrap .amBtn li a:hover { background: #111; color: #fff; border-color: #111; }
#asideMenu .amWrap .amTel { color: #111; font-size: 16px; font-weight: 700; }
#asideMenu .amWrap dd { font-size: 12px; color: #888; line-height: 1.7; }
#asideMenu .amWrap dt.amTit { margin-top: 4px; }

/* ✅ 오늘 본 상품 — 모서리 */
#asideMenu .todayViewWrap {
    position: relative;
    width: 150px;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}
#asideMenu .todayViewWrap .todaySlider img { width: 100%; }
#asideMenu .todayViewWrap .bx-controls-direction { opacity: 0; position: absolute; top: 50%; width: 100%; z-index: 60; text-align: center; }
#asideMenu .todayViewWrap:hover .bx-controls-direction { opacity: 1.0; transition: all 0.3s ease; }
#asideMenu .todayViewWrap .bx-prev, #asideMenu .todayViewWrap .bx-next { position: absolute; top: 0; margin-top: -13px; font-size: 24px; display: inline-block; }
#asideMenu .todayViewWrap .bx-prev { left: 2px; }
#asideMenu .todayViewWrap .bx-next { right: 2px; }
#asideMenu .todayViewWrap .bx-pager { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 60; text-align: center; }
#asideMenu .todayViewWrap .bx-pager-item { transition: all 0.3s ease; display: inline-block; position: relative; }
#asideMenu .todayViewWrap .bx-pager-link { display: inline-block; width: 14px; height: 3px; font-size: 0; margin: 2px; background-color: rgba(0,0,0,0.4); border-radius: 2px; }
#asideMenu .todayViewWrap .bx-pager-link.active { width: 24px; background-color: rgba(0,0,0,0.8); }

/* ✅ 우측 고정 버튼 */
#asideMenu .asideBtn { position: absolute; top: 50%; left: -42px; margin-top: -72px; }
#asideMenu .asideBtn .asideOpen { width: 42px; height: 42px; font-size: 20px; color: #fff; line-height: 44px; text-align: center; background: #292929; cursor: pointer; border-radius: 6px 0 0 6px; }
#asideMenu .asideBtn .pageTop,
#asideMenu .asideBtn .pageBottom { display: block; width: 40px; height: 41px; font-size: 20px; color: #292929; line-height: 44px; text-align: center; background: #fff; cursor: pointer; border: 1px solid #ddd; margin-top: -1px; border-radius: 6px 0 0 6px; }

/* ✅ 검색엔진용 숨김 텍스트 */
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ✅ 모바일 반응형 */
@media screen and (max-width: 1199px) {
    .minSizeWrap { width: 100% !important; padding: 0 15px; box-sizing: border-box; }
    #hdWrap .hdBtm .allMenu .allMenuBx { width: 100% !important; box-sizing: border-box; }
    #hdWrap .hdBtm .cateWrap { width: 100% !important; overflow-x: auto; white-space: nowrap; }
    #asideMenu { display: none; }
}
/* BASIC css end */