@charset "UTF-8";
/* rcbank 모바일 공통 헤더 새 디자인 (2026-10-05) — 헤더 규칙은 html.rh 일 때만(상품페이지 제외), 서랍·목록 규칙은 모든 m2 페이지. 상품페이지(rp2)와 같은 한 줄 헤더.
   rcb_mhdr.js 가 못 돌면 rh 를 지운다(옛 헤더로 돌아감). */
html.rh #header > #old-header-top, html.rh #rcb-float-cate {display:none !important;}
html.rh .rh-h {position:sticky; top:0; z-index:950; background:#fff; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;}
html.rh .rh-row {display:flex; align-items:center; padding:4px 4px 4px 2px;}
html.rh .rh-row > a, html.rh .rh-row > button {position:relative; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; border:0; background:none; color:#1d2b4f; text-decoration:none; cursor:pointer;}
html.rh .rh-row .rh-logo {flex:1; justify-content:flex-start; padding-left:2px;}
html.rh.rh-home .rh-row .rh-logo {padding-left:12px;}
html.rh .rh-row .rh-logo img {height:32px !important; width:auto !important; max-width:none !important; display:block;}
html.rh .rh-row .rh-pcbtn {flex-direction:column; gap:0; padding:0 4px;}
html.rh .rh-pcbtn span {font-size:10px; line-height:1.1; color:#46586f; letter-spacing:-.3px; white-space:nowrap;}
html.rh .rh-pcbtn svg {width:20px; height:20px;}
html.rh .rh-sch {display:none; padding:2px 12px 10px 12px;}
html.rh .rh-h.rh-sopen .rh-sch {display:block;}
html.rh .rh-sch form {margin:0;}
html.rh .rh-sch #search-box {display:flex !important; align-items:stretch !important; box-sizing:border-box; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; border:2px solid #46629e !important; border-radius:6px !important; overflow:hidden; background:#fff !important; box-shadow:none !important;}
html.rh .rh-sch #search-box input[type=text] {flex:1; min-width:0; box-sizing:border-box !important; height:auto !important; margin:0 !important; padding:9px 12px !important; border:0 !important; background:transparent !important; font:16px/1.4 -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif !important; color:#1d2b4f; outline:none; align-self:center;}
html.rh .rh-sch #search-box-btn {display:none !important;}
html.rh .rh-sch .rh-go {display:flex; align-items:center; justify-content:center; align-self:stretch; padding:0 14px; border:0; background:#46629e; color:#fff; cursor:pointer;}
html.rh .rh-pc {padding:12px 16px 2px 16px; text-align:center;}
html.rh .rh-pc button {padding:6px 12px; border:1px solid rgba(255,255,255,.35); border-radius:4px; background:none; color:#c9d3ea; font-size:12px; cursor:pointer;}
html.rh #rcbmh .mh-row {border-bottom-color:#46629e !important;}
html.rh #search_cate .autosearch_titles {background:#46629e !important;}
html.rh .rh-h #search_cate {position:absolute !important; top:100% !important; margin:0 !important; left:0 !important; right:0 !important; width:auto !important; max-height:70vh; overflow-y:auto; box-shadow:0 6px 14px rgba(29,43,79,.15);}
/* 분류·검색 목록 : 오른쪽에 뜬 목록/갤러리 전환 버튼(.goods-view-type, float)이 상품 첫 줄 위를 10px 파고들어
   첫 줄만 2개가 되던 것 (원래부터 있던 문제, 10-05 사장님 발견). 목록을 버튼 아래에서 시작하게 */
.goods-content {clear:both;}
/* 분류 목록 정렬 줄 (10-05 사장님 : "카테고리 내 검색"으로, 폭 줄이기) : 정렬 · 검색 · 보기전환 을 한 줄 flex 로. 고정폭(210/140px) 없앰 */
html.rh .goods-sort-area {display:flex; align-items:center; gap:6px; box-sizing:border-box; padding-top:8px !important; padding-bottom:8px !important;}
html.rh .goods-sort-area .goods-sort {flex:none; float:none !important; margin:0 !important; height:auto !important;}
html.rh .goods-sort-area .goods-sort select {margin:0 !important; display:block;}
html.rh .goods-sort-area .cate-search {display:block !important; flex:0 1 14.5em; width:auto !important; min-width:0; margin:0 !important;}
html.rh .cate-search form {display:flex; align-items:stretch; box-sizing:border-box; margin:0; padding:0 !important; border:1px solid #b9c2d3; border-radius:4px; overflow:hidden; background:#fff;}
html.rh .cate-search #search-box2 {float:none !important; flex:1; min-width:0; display:flex;}
html.rh .cate-search #search-box2 input[type=text] {box-sizing:border-box; width:100% !important; min-width:0; height:auto !important; line-height:1.4 !important; padding:3px 8px !important; border:0 !important; background:transparent; font-size:16px; color:#1d2b4f; outline:none;}
html.rh .cate-search #search-box-btn {float:none !important; flex:none; width:30px !important; height:auto !important; margin:0 !important; background-position:center !important; cursor:pointer;}
html.rh .goods-sort-area .goods-view-type {float:none !important; flex:none; margin:0 0 0 auto !important;}
/* 왼쪽 서랍 메뉴 글자 : 화면 폭 따라 줄이기 (10-05 사장님, 320px 에서 "최근 본 상품" 두 줄로 꺾임). 넓은 화면은 원래 크기 그대로(min) */
.gd-flipcover .cate_btn a, .gd-flipcover .cart_btn a {font-size:min(15px, 4vw) !important; white-space:nowrap; letter-spacing:-.3px;}
.gd-flipcover .vmenu .vlink a {font-size:min(17px, 5vw) !important;}
.gd-flipcover .category-menu-area a {font-size:min(17px, 5vw) !important;}
/* 서랍 메뉴 (10-05 사장님) : 열리면 헤더도 어둡게 — 새 헤더(z 950)가 어두운 막(.gd-flipbg z 109) 위에 떠 있었다 */
body.gd-open .rh-h {z-index:100;}
/* 닫기 버튼 : 연회색 원 + 흰 X(잘 안 보임) → 흰 원 + 남색 X, 서랍 오른쪽 빈 띠(20%) 가운데 */
button.gd-gnb-close {width:40px !important; height:40px !important; top:8px !important; left:auto !important; right:calc(10% - 20px) !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:#fff !important; box-shadow:0 2px 10px rgba(0,0,0,.3); cursor:pointer;}
button.gd-gnb-close .sprite-icon {display:none !important;}
button.gd-gnb-close::before, button.gd-gnb-close::after {content:""; position:absolute; left:50%; top:50%; width:18px; height:2px; margin:-1px 0 0 -9px; border-radius:1px; background:#1d2b4f; transform:rotate(45deg);}
button.gd-gnb-close::after {transform:rotate(-45deg);}
/* 2026-10-05 주문서 결제 칸(iframe, settle 의 html.rcbEmbed) 안에서는 새 헤더를 그리지 않는다 — 옛 헤더도 거기선 숨는다 */
html.rcbEmbed .rh-h {display:none !important;}
/* 2026-10-05 주문서(/m2/ord/)에서는 스마트검색 버튼 줄을 처음부터 안 그린다 — html.rh-ord 는 _header.htm head 가 서버에서 붙인다(JS 로 숨기면 잠깐 보였다 사라짐) */
html.rh-ord #rcbmh {display:none !important;}
/* 2026-10-05 모바일 주문서 : rcb_mord.js 가 카드로 다 짤 때까지 본문을 감춘다(원래 모양이 먼저 보였다 바뀌며 움찔하던 것). html.ro-wait 는 _header.htm head, 3초 뒤엔 무조건 풀린다 */
html.ro-wait #m_order, html.ro-wait #nm_order {visibility:hidden;}
/* 2026-10-05 모바일 장바구니 : rcb_mcart.js 가 다 짤 때까지 감춘다(html.rc-wait 는 _header.htm head, 3초 뒤 무조건 풀림) */
html.rc-wait #cart, html.rc-wait section.rcb-rec {visibility:hidden;}