/* BASIC css start */
/* =========================================================
   모바일 상단 (리뉴얼)
   색·글꼴 값은 공통 CSS의 :root 변수를 씁니다 (PC B안과 같은 값)
   ========================================================= */
.cboth {clear:both; *zoom:1;}
.cboth:after {content:" "; display:block; clear:both;}
.fleft {float:left;}
.fright {float:right !important;}
.displaynone {display:none;}
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}

/* 띠배너 */
.mh-band {background:var(--b-deep); text-align:center;}
.mh-band a {display:block; padding:0 16px; color:#fff; font-size:12.5px; line-height:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 헤더 */
#header {position:-webkit-sticky; position:sticky; top:0; z-index:90; width:100%; background:#fff; -webkit-transition:box-shadow .2s; transition:box-shadow .2s;}
#header.is-scrolled {box-shadow:0 1px 0 var(--b-line), 0 4px 12px rgba(31,42,48,.06);}
#header .mh-bar {position:relative; display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:justify; justify-content:space-between; height:54px; padding:0 4px;}
.mh-icon {display:-webkit-inline-box; display:inline-flex; -webkit-box-orient:vertical; flex-direction:column; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; gap:2px; position:relative; width:46px; height:48px; padding:0; border:0; background:none; color:var(--b-ink); cursor:pointer;}
.mh-lb {font-size:10px; line-height:1; font-weight:500; letter-spacing:-0.04em; white-space:nowrap; color:#4a565c;}
#header .mh-bar-left {display:-webkit-box; display:flex;}
#header .mh-logo {position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); margin:0; line-height:0;}
#header .mh-logo img {height:28px; width:auto;}
#header .mh-bar-right {display:-webkit-box; display:flex;}
.mh-count {position:absolute; top:2px; right:5px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px; background:var(--b-point); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; font-family:'Roboto',sans-serif; letter-spacing:0;}
.mh-count {display:none;}
.mh-count.is-show {display:block;}

/* 검색창 */
#header .mh-search {display:none; padding:4px 16px 14px; background:#fff;}
#header .mh-search.is-open {display:block;}
#header .mh-search-in {position:relative; display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; gap:8px;}
#header .mh-search .searchBox {position:relative; -webkit-box-flex:1; flex:1; min-width:0;}
#header .mh-search .searchBox fieldset {margin:0; padding:0; border:0;}
#header .mh-search .searchBox input {width:100%; height:46px; margin:0; padding:0 46px 0 16px; border:0; border-radius:23px; background:var(--m-gray); font-size:16px; color:var(--b-ink); box-sizing:border-box;}
#header .mh-search .searchBox input:focus {outline:2px solid var(--b-point); outline-offset:-2px; background:#fff;}
#header .mh-search .mh-search-go {position:absolute; top:1px; right:62px; display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; width:44px; height:44px; color:var(--b-ink);}
#header .mh-search .mh-search-close {-webkit-box-flex:0; flex:none; height:44px; padding:0 4px; border:0; background:none; font-size:14px; color:var(--b-mute); cursor:pointer;}

/* 대분류 바로가기 */
.mh-cate {position:relative; background:#fff; border-bottom:1px solid var(--b-line);}
/* 오른쪽에 더 있다는 표시 : 흐려지는 끝 + 화살표 */
.mh-cate:after {content:""; position:absolute; top:0; right:0; bottom:0; width:64px; background:linear-gradient(to right, rgba(255,255,255,0), #fff 70%); pointer-events:none; -webkit-transition:opacity .2s; transition:opacity .2s;}
.mh-cate:before {content:""; position:absolute; top:0; left:0; bottom:0; z-index:1; width:64px; background:linear-gradient(to left, rgba(255,255,255,0), #fff); pointer-events:none; opacity:1; -webkit-transition:opacity .2s; transition:opacity .2s;}
.mh-cate.is-start:before {opacity:0;}
.mh-cate.is-end:after {opacity:0;}
.mh-cate-more, .mh-cate-prev {position:absolute; top:50%; right:6px; z-index:2; display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; width:28px; height:28px; margin-top:-14px; padding:0; border:1px solid var(--b-line); border-radius:14px; background:#fff; color:var(--b-ink); box-shadow:0 2px 6px rgba(31,42,48,.1); cursor:pointer; -webkit-transition:opacity .2s; transition:opacity .2s;}
.mh-cate-prev {right:auto; left:6px;}
.mh-cate.is-end .mh-cate-more, .mh-cate.is-start .mh-cate-prev {opacity:0; pointer-events:none;}
.mh-cate.is-hint ul {-webkit-animation:mhNudge 1.1s ease .6s 1; animation:mhNudge 1.1s ease .6s 1;}
@-webkit-keyframes mhNudge {0%,100% {-webkit-transform:none;} 40% {-webkit-transform:translateX(-22px);}}
@keyframes mhNudge {0%,100% {transform:none;} 40% {transform:translateX(-22px);}}
.mh-cate ul {display:-webkit-box; display:flex; gap:20px; margin:0; padding:0 48px 0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap;}
.mh-cate ul::-webkit-scrollbar {display:none;}
.mh-cate li {-webkit-box-flex:0; flex:none;}
.mh-cate a {display:block; height:44px; line-height:44px; box-sizing:border-box; font-size:14.5px; font-weight:500; color:var(--b-mute); border-bottom:2px solid transparent;}
.mh-cate a.is-on {color:var(--b-ink); font-weight:700; border-bottom-color:var(--b-ink);}

/* 어두운 배경 */
#mask {position:fixed; top:0 !important; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(20,26,29,.5); z-index:1000; display:none; opacity:1;}

/* 전체 메뉴 */
aside.mh-drawer {position:fixed; top:0; left:0; bottom:0; z-index:1001; width:86%; max-width:360px; height:100%; padding:0 0 32px; box-sizing:border-box; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; -webkit-transform:translateX(-102%); transform:translateX(-102%); -webkit-transition:-webkit-transform .28s ease; transition:transform .28s ease; display:block; visibility:hidden;}
aside.mh-drawer.is-open {-webkit-transform:none; transform:none; visibility:visible;}
.mh-dr-head {position:relative; padding:22px 56px 18px 20px; background:var(--b-soft);}
.mh-dr-hello {margin:0 0 14px; font-size:13px; color:var(--b-mute); line-height:1.5;}
.mh-dr-hello strong {display:block; margin-bottom:2px; font-size:19px; font-weight:900; color:var(--b-ink);}
.mh-dr-auth {display:-webkit-box; display:flex; gap:8px;}
.mh-dr-auth a {position:relative; -webkit-box-flex:1; flex:1; height:42px; line-height:40px; border:1px solid var(--m-line2); border-radius:21px; background:#fff; text-align:center; font-size:14px; font-weight:700; color:var(--b-ink); box-sizing:border-box;}
.mh-dr-auth a.is-main {background:var(--b-ink); border-color:var(--b-ink); color:#fff;}
.mh-bubble {position:absolute; top:-10px; right:-4px; padding:0 6px; height:18px; line-height:18px; border-radius:9px; background:var(--b-point); color:#fff; font-size:10px; font-weight:700; font-family:'Roboto',sans-serif; letter-spacing:0;}
.mh-close-menu {position:absolute; top:10px; right:6px; width:44px; height:44px;}

.mh-dr-quick {display:-webkit-box; display:flex; margin:0; padding:14px 8px; border-bottom:8px solid var(--m-gray);}
.mh-dr-quick li {-webkit-box-flex:1; flex:1;}
.mh-dr-quick a {position:relative; display:-webkit-box; display:flex; -webkit-box-orient:vertical; flex-direction:column; -webkit-box-align:center; align-items:center; gap:6px; padding:6px 0; font-size:12px; color:var(--b-ink);}
.mh-dr-quick .mh-count {top:0; right:calc(50% - 22px);}

.mh-dr-tabs {display:-webkit-box; display:flex; border-bottom:1px solid var(--b-line); padding:0 12px;}
.mh-dr-tabs button {-webkit-box-flex:1; flex:1; height:48px; padding:0; border:0; border-bottom:2px solid transparent; background:none; font-size:15px; font-weight:500; color:var(--b-mute); cursor:pointer;}
.mh-dr-tabs button.is-on {color:var(--b-ink); font-weight:700; border-bottom-color:var(--b-ink);}

.mh-dr-nav {display:none; padding:6px 0;}
.mh-dr-nav.is-on {display:block;}
.mh-dr-nav ul {margin:0; padding:0;}
.mh-dr-nav li {position:relative;}
.mh-dr-nav a {display:block; padding:0 20px; line-height:48px; font-size:15px; color:var(--b-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mh-dr-row {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center;}
.mh-dr-row > a {-webkit-box-flex:1; flex:1; min-width:0;}
.mh-acc {-webkit-box-flex:0; flex:none; width:48px; height:48px; padding:0; border:0; background:none; color:var(--b-mute); cursor:pointer;}
.mh-acc svg {-webkit-transition:-webkit-transform .2s; transition:transform .2s;}
.mh-acc[aria-expanded="true"] svg {-webkit-transform:rotate(180deg); transform:rotate(180deg);}
.mh-dr-nav li > ul {display:none; background:var(--b-soft); padding:4px 0;}
.mh-dr-nav li.is-open > ul {display:block;}
.mh-dr-nav li > ul a {padding-left:32px; line-height:44px; font-size:14px; color:#3a464c;}
.mh-dr-nav li > ul > li > ul {background:#eaf1f3;}
.mh-dr-nav li > ul > li > ul a {padding-left:44px; font-size:13.5px;}

.mh-dr-cs {margin:12px 20px 0; padding:18px; border-radius:14px; background:var(--m-gray); font-size:13px; line-height:1.6; color:var(--b-mute);}
.mh-dr-cs-tit {margin:0 0 8px; font-size:14px; font-weight:700; color:var(--b-ink);}
.mh-dr-tel {display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; gap:6px; height:44px; margin-bottom:10px; border-radius:22px; background:#fff; border:1px solid var(--m-line2); font-size:14px; font-weight:700; color:var(--b-ink);}
.mh-dr-cs p {margin:0;}
.mh-dr-cs em {font-style:normal; color:var(--m-sale);}

/* 결제 단계 화면에서는 대분류 줄 숨김 */
.mh-notab .mh-cate {display:none;}

@media screen and (min-width:768px) {
#header .mh-bar {height:60px; padding:0 12px;}
#header .mh-logo img {height:32px;}
.mh-cate ul {gap:28px;}
}

@media (prefers-reduced-motion:reduce) {
aside.mh-drawer, .mh-acc svg {-webkit-transition:none; transition:none;}
.mh-cate.is-hint ul {-webkit-animation:none; animation:none;}
}

/* BASIC css end */