/* ==========================================================================
   메인 반응형 CSS   (2026-08-26 wjy 가 /main/rroys_responsive_inc.asp 에서 분리)
   원본 : rroys(로이스닷컴) PC 메인 반응형 — 2026-08-24 황수빈
   이 파일이 «있는 사이트만» 메인이 반응형이 된다. 소스에 siteID 를 박지 않는다.
   로더 : /main/main_responsive_inc.asp (main_body.asp 마지막에서 include)
   ========================================================================== */
/* ==========================================================================
   rroys 메인 반응형
     1299 이하 : 고정폭(min-width:1300px) 해제 — 전 구간 유동
     1023 이하 : 상품 3열 (태블릿)
      767 이하 : /m/ 과 같은 구성 (기준 화면 https://rroys.co.kr/m/)
   ========================================================================== */

/* --- 1299 이하 : 고정폭 해제 ---------------------------------------------
   /css/common.css.asp 가 head 에 html body{min-width:1300px} 를 심어
   좁은 화면에서 가로 스크롤이 생긴다. 여기서 풀어 준다. */
@media all and (max-width:1299px) {
	html body { min-width:0 !important; }
	html body .wrap_body { min-width:0 !important; width:100%; }

	.rr-header-inner,
	.rr-header-category { max-width:100%; }
	.rr-top-banner .rr-top-banner-logo-roll { width:100%; }

	.rr-brand-special,
	.rr-exclusive-curation { padding:90px 20px; }
	.rr-review__inner { padding:0 20px; }

	.footer__top-inner { width:100%; padding:66px 20px 54px; gap:40px; }
	.footer__bottom-inner { width:100%; padding:0 20px; }
}

/* --- 1023 이하 : 상품 3열 (태블릿) --------------------------------------- */
@media all and (max-width:1023px) {
	.rr-brand-special-list,
	.rr-exclusive-curation-list {
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:44px 16px;
	}
	.footer__top-inner { grid-template-columns:minmax(0, 1fr) 190px 150px; gap:28px; }

	/* 히어로 : 템플릿의 1024 규칙(제목 46px + 카드 360px 고정)은 768px 에서
	   글자칸이 300px 밖에 안 남아 제목이 한 단어씩 끊긴다. */
	.rr-hero .rr-wrap { gap:28px; padding:0 20px; }
	.rr-hero__card { flex-basis:300px; width:300px; }
	.rr-deal-card { width:100%; }
	.rr-title { font-size:34px; letter-spacing:-1.2px; }
	.rr-desc { font-size:16px; }
	.rr-timer--desktop { gap:8px; }
	.rr-time-box { width:64px; height:92px; padding:18px 6px; }
	.rr-time-box strong { font-size:22px; }
}

/* --- 767 이하 : /m/ 구성 -------------------------------------------------- */
@media all and (max-width:767px) {

	.wrap_body { padding-bottom:calc(67px + env(safe-area-inset-bottom, 0px)); }
	body.rr-mo-drawer-open { overflow:hidden; }

	/* 장바구니/바로구매 옵션 레이어는 fixed 600px 고정폭이라 빈 상태로도
	   문서 가로폭을 390 -> 421 로 밀어낸다(가로 스크롤). 화면폭에 맞춘다. */
	.ListCartLayer,
	.ListDirectLayer { left:0; width:100%; margin-left:0; }

	/* PC 전용 부유물은 모바일에 없다 */
	.rr-floating-section-menu { display:none !important; }


	/* --- 띠배너 : /m/ .band-banner (39px) ------------------------------- */
	.rr-top-banner { display:block; z-index:1; height:39px; }
	.rr-top-banner.is-hidden { height:0; transform:translateY(-39px); }
	.rr-top-banner .rr-top-banner-swiper,
	.rr-top-banner .rr-top-banner-list,
	.rr-top-banner .rr-top-banner-item,
	.rr-top-banner .rr-top-banner-link,
	.rr-top-banner .rr-top-banner-flow,
	.rr-top-banner .rr-top-banner-flow-track,
	.rr-top-banner .rr-top-banner-logo-roll,
	.rr-top-banner .rr-top-banner-logo-track { height:39px; }
	.rr-top-banner .rr-top-banner-logo-roll { width:100%; }
	.rr-top-banner .rr-top-banner-logo-track img { height:39px; }
	.rr-top-banner .rr-top-banner-content { padding:0 35px; }
	.rr-top-banner .rr-top-banner-text,
	.rr-top-banner .rr-top-banner-flow-track span { font-size:12px; line-height:39px; }
	.rr-top-banner .rr-top-banner-flow-track span { padding-right:40px; }
	.rr-top-banner .rr-top-banner-prev,
	.rr-top-banner .rr-top-banner-next { display:none; }
	.rr-top-banner .rr-top-banner-pagination {
		right:9px; bottom:6px;
		left:auto !important;
		opacity:1; visibility:visible;
		transform:none;
	}
	.rr-top-banner .rr-top-banner-pagination .swiper-pagination-bullet { background:rgba(255,255,255,.55); }
	.rr-top-banner .rr-top-banner-pagination .swiper-pagination-bullet-active { width:16px; background:#fff; }


	/* --- 헤더 : /m/ .mobile-new-header (57 + 38*n) ---------------------- */
	/* 디자인영역마다 감싸는 <div> 가 헤더 높이와 «똑같아» sticky 가 0px 만 붙어 있다가
	   그대로 흘러가 버린다. 그 래퍼 박스를 없애 페이지 전체를 기준으로 삼는다.
	   (클래스는 아래 스크립트가 headerWrap.parentElement 에 붙인다) */
	.rr-mo-header-host { display:contents; }

	.rr-header-wrap {
		position:sticky;
		top:0;
		z-index:1200;
		padding-top:0 !important;   /* is-fixed 잔여 여백 차단 */
	}
	.rr-header-wrap.is-fixed .rr-header { position:relative; box-shadow:none; }

	.rr-header-top { height:57px; }
	.rr-header-inner { max-width:none; padding:0 20px; }

	.rr-header-left { min-width:0; width:auto; }
	.rr-header-right { min-width:0; gap:15px; }

	/* 로그인/회원가입/커뮤니티 텍스트 메뉴 → 햄버거 드로어로 옮긴다 */
	.rr-header-menu { display:none; }
	.rr-header-point { display:none; }
	.rr-header-user { display:none; }   /* 모바일 헤더엔 사람 아이콘이 없다(하단탭바 MY) */

	.rr-mo-menu { display:flex; }
	.rr-header-logo { width:80px; }
	.rr-header-logo img { max-width:80px; max-height:34px; }

	.rr-header-icon.rr-header-cart { width:23px; }
	.rr-header-icon.rr-header-cart svg { width:23px; height:23px; }
	.rr-header-icon.rr-header-search-button { width:22px; }
	.rr-header-cart-count { top:10px; right:-8px; }


	/* --- 탑메뉴(카테고리) : /m/ .category-new-menu (4열 그리드) --------- */
	/* z-index 31 : 위쪽 헤더줄(.rr-header-top)이 30 이라 그보다 «위»에 둔다.
	   헤더 아래 첫 선(카테고리 border-top)이 헤더에 덮이는 일을 구조적으로 막는다.
	   모바일에선 위쪽 줄의 드롭다운을 다 숨기므로 순서를 뒤집어도 잃는 게 없다. */
	.rr-header-bottom { position:relative; z-index:31; height:auto; border-top:0; border-bottom:0; }
	.rr-header-category { max-width:none; height:auto; padding:0; }
	.rr-header-category-inner { display:block; height:auto; }

	#rr-header-category-menu { height:auto; }
	#rr-header-category-menu .icon_tit_list {
		display:grid;
		grid-template-columns:repeat(4, minmax(0, 1fr));
		width:100%;
		height:auto;
		/* 헤더와 카테고리를 가르는 첫 선. /m/ 은 안쪽 격자와 같은 #eee 인데
		   흰 헤더 위에서 사실상 안 보인다 → 이 줄만 진하게 한다(요청).
		   안쪽 격자선은 /m/ 그대로 #eee 로 둔다. */
		border-top:1px solid #dcdce0;
		border-left:1px solid #eee;
	}
	#rr-header-category-menu .icon_tit_list > li { display:block; height:auto; min-width:0; }
	#rr-header-category-menu .icon_tit_list > li > a.menutitle {
		display:flex;
		align-items:center;
		justify-content:center;
		gap:5px;
		height:38px;
		padding:0 6px;
		border-right:1px solid #eee;
		border-bottom:1px solid #eee;
		color:#000;
		font-size:13px;
		font-weight:400;
	}
	#rr-header-category-menu .icon_tit_list > li:nth-child(4n) > a.menutitle { border-right:0; }
	#rr-header-category-menu .icon_tit_list > li > a.menutitle time { width:13px; height:13px; margin-right:0; }

	/* 「타임세일」은 빨강 — 템플릿의 `li:first-child a{color:#ff0000}` 과 위 규칙이
	   특이도 (1,2,2) 로 같아 «나중»인 내 규칙이 이겨서 검정이 돼 있었다. 다시 빨강으로.
	   시계 아이콘은 템플릿이 time{color:#000} 을 따로 박아둬서 검정 그대로다(/m/ 과 같다). */
	#rr-header-category-menu .icon_tit_list > li:first-child > a.menutitle { color:#ff0000; }

	/* 「명품관」 빨간 점 — /m/ 의 m_menu_badge_v1.css 와 같은 모양·같은 자리로 맞춘다.
	   PC 원본은 absolute(top:15px/right:12px) 라 38px 그리드 셀에서는 글자가 아니라
	   «셀 오른쪽 위 모서리» 로 날아간다 → /m/ 처럼 글자 «앞» 의 인라인 점으로 되돌린다.
	   대상은 위치(:last-child)가 아니라 카테고리 번호로 잡는다 — 항목 순서가 바뀌면
	   엉뚱한 메뉴에 붙는다(/m/ 쪽도 같은 이유로 cate 번호를 쓴다).
	   PC 원본 규칙과 특이도가 (1,3,3) 으로 같고 이 파일이 «나중»이라 이긴다. */
	#rr-header-category-menu .icon_tit_list > li > a.menutitle[href*="cate=139101"] { gap:0; }

	#rr-header-category-menu .icon_tit_list > li > a.menutitle[href*="cate=139101"]::before {
		content:"";
		position:relative;
		top:-.42em;
		right:auto;
		display:inline-block;
		flex:none;
		width:.30em;
		height:.30em;
		min-width:4px;
		min-height:4px;
		margin-right:0;
		border-radius:9999px;
		background:#ff0000;
		pointer-events:none;
		animation:rrMenuBadgeBounce 1.4s cubic-bezier(.28,.84,.42,1) infinite;
	}

	/* 명품관이 마지막이 «아니게» 되면 PC 의 모서리 점이 엉뚱한 칸에 남는다 → 그때만 끈다 */
	#rr-header-category-menu .icon_tit_list > li:last-child > a.menutitle:not([href*="cate=139101"])::before { content:none; }
	/* 2·3뎁스 드롭다운은 모바일에선 드로어가 대신한다.
	   :hover 규칙(원본 템플릿)도 !important 라 «같은 특이도»로 다시 눌러야 이긴다.
	   안 그러면 마우스가 있는 기기에서 드롭다운이 열려 문서폭이 390 -> 421 로 늘어난다. */
	#rr-header-category-menu .depth2Box,
	#rr-header-category-menu .deps3,
	#rr-header-category-menu .icon_tit_list > li.has-depth2:hover > .depth2Box,
	#rr-header-category-menu .icon_tit_list > li.has-depth2.is-open > .depth2Box,
	#rr-header-category-menu .depth2Box > li.has-depth3:hover > .deps3,
	#rr-header-category-menu .depth2Box > li.has-depth3.is-open > .deps3 { display:none !important; }


	/* --- 검색 레이어 : 전체폭 1열 --------------------------------------- */
	.rr-search-layer { top:100%; }
	.rr-search-layer.is-open { height:auto; max-height:calc(100vh - 133px); overflow-y:auto; }
	.rr-search-inner { max-width:none; padding:26px 20px 40px; }
	.rr-search-form { width:100%; }
	.rr-search-content { grid-template-columns:minmax(0, 1fr); gap:34px; margin-top:34px; }
	.rr-search-backdrop { top:0; }


	/* --- 타임세일 : /m/ .timesale-wrap ---------------------------------- */
	.rr-hero { padding:10px 20px; }
	.rr-hero .rr-wrap { display:block; max-width:none; padding:0 20px; gap:0; }
	.rr-hero__text { text-align:left; }
	.rr-badge { padding:6px 11px; font-size:11px; letter-spacing:1px; }
	.rr-title { margin:18px 0 16px; font-size:32px; font-weight:800; line-height:1.15; letter-spacing:-1px; }
	.rr-desc { font-size:16px; line-height:1.7; }

	.rr-timer--desktop { margin:48px 0 0; gap:6px; }
	.rr-time-box { flex:1; width:auto; height:78px; padding:0; border-radius:20px; }
	.rr-time-box strong { color:#222; font-size:20px; }
	.rr-time-box span { margin-top:6px; }

	.rr-hero__card { margin-top:48px; }
	.rr-deal-card { width:100%; padding:16px 16px 28px; border-radius:20px; }
	.rr-deal-card__thumb { margin:20px auto; border-radius:20px; }
	.rr-deal-title { margin:10px 0; font-size:18px; font-weight:500; }
	.rr-price { font-size:18px; }
	.rr-price strong { font-size:18px; }
	.rr-buy-btn { margin-top:14px; }


	/* --- 상품 2열 그리드 : /m/ .weekPdWrap · .brandOnly ----------------- */
	.rr-brand-special { padding:100px 20px 0; }
	.rr-exclusive-curation { padding:60px 20px 0; }

	.rr-brand-special-inner,
	.rr-exclusive-curation-inner { max-width:none; }

	.rr-brand-special-title,
	.rr-exclusive-curation-title { margin-bottom:30px; }
	.rr-brand-special-title h2,
	.rr-exclusive-curation-title h2 { font-size:24px; letter-spacing:-.5px; }
	.rr-brand-special-title p,
	.rr-exclusive-curation-title p { margin-top:6px; font-size:14px; }

	.rr-brand-special-list,
	.rr-exclusive-curation-list {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:40px 10px;
	}

	.rr-brand-special-thumb,
	.rr-exclusive-curation-thumb { border-radius:10px; }

	.rr-brand-special-info,
	.rr-exclusive-curation-info { padding:16px 0 0; }
	.rr-brand-special-info > a,
	.rr-exclusive-curation-info > a { font-size:15px; font-weight:600; line-height:1.5; }

	.rr-brand-special-price-wrap,
	.rr-exclusive-curation-price-wrap { margin-top:6px; }

	/* 모바일엔 hover 가 없다 → 담기/찜 버튼을 항상 보이게 */
	.rr-brand-special-actions,
	.rr-exclusive-curation-actions {
		gap:6px;
		opacity:1;
		visibility:visible;
		transform:none;
	}
	.rr-brand-special-actions .material-icons.cart_icon,
	.rr-brand-special-wish,
	.rr-exclusive-curation-actions .material-icons.cart_icon,
	.rr-exclusive-curation-wish { width:24px; height:24px; border-radius:8px; }

	.rr-brand-special-more-wrap,
	.rr-exclusive-curation-more-wrap { margin-top:40px; }
	.rr-brand-special-more,
	.rr-exclusive-curation-more { width:270px; font-weight:600; }


	/* --- 합리적인 가격 : /m/ .good-price-wrap --------------------------- */
	.rr-trust { padding:70px 0 20px; }
	.rr-trust .rr-wrap { max-width:none; }
	.rr-trust__inner { display:flex; flex-direction:column; gap:24px; padding:0 60px; }
	.rr-section-head { margin-bottom:8px; }
	.rr-section-head h2 { font-size:28px; font-weight:800; letter-spacing:-1px; }
	.rr-section-head p { margin-top:18px; color:#777; font-size:15px; line-height:1.7; white-space:normal; }
	.rr-trust__item-wrap { margin-top:0; }
	.rr-trust__item { min-height:200px; padding:36px 28px; border-color:#ececec; border-radius:20px; }
	.rr-trust__item:hover { transform:none; }
	.rr-icon { width:60px; height:60px; margin-bottom:20px; background:linear-gradient(135deg, #111, #333); font-size:24px; }
	.rr-trust__item strong { margin-bottom:10px; font-size:19px; }
	.rr-trust__item p { margin-top:0; font-size:14px; line-height:1.8; }


	/* --- 상품후기 : /m/ .review-section (2열 슬라이더) ------------------ */
	.rr-review { padding:100px 16px 70px; }
	.rr-review__inner { max-width:none; padding:0; }
	.rr-review__title { margin-bottom:30px; }
	.rr-review__title h2 { font-size:24px; letter-spacing:-.7px; }
	.rr-review__title p { margin-top:7px; font-size:14px; }
	.rr-review__slider-wrap { padding-bottom:40px; }
	.rr-review__item { border-color:#e8e8e8; border-radius:10px; }
	.rr-review__thumb { aspect-ratio:auto; height:174px; }
	.rr-review__content { min-height:0; padding:14px 11px 13px; }
	.rr-review__subject { margin-bottom:10px; font-size:14px; }
	.rr-review__text { min-height:43px; margin-top:0; font-size:13px; line-height:1.65; }
	.rr-review__stars { margin:0 0 12px; font-size:20px; letter-spacing:-3px; }
	.rr-review__meta { font-size:13px; }
	.rr-review__product { min-height:0; gap:9px; padding:12px 10px; }
	.rr-review__product-thumb { width:32px; height:32px; border-radius:0; }
	.rr-review__product-name { font-size:12px; }
	.rr-review__prev,
	.rr-review__next { display:none; }
	.rr-review__more { margin-top:40px; }
	.rr-review__more-link { width:calc(100% - 90px); max-width:270px; font-weight:600; }

	.rr-review-modal { padding:0; }
	.rr-review-modal__panel {
		grid-template-columns:minmax(0, 1fr);
		grid-template-rows:auto minmax(0, 1fr);
		max-width:none;
		height:100vh;
	}
	.rr-review-modal__visual { max-height:46vh; }
	.rr-review-modal__close { position:absolute; top:10px; right:10px; }
	.rr-review-modal__detail-inner { padding:20px 16px 30px; }


	/* --- 푸터 : /m/ .footer-top ----------------------------------------- */
	.footer__top-inner {
		display:flex;
		flex-direction:column;
		gap:0;
		width:100%;
		min-height:0;
		padding:40px 0;
	}
	.footer__cs { order:1; gap:4px; padding:0 20px; margin-bottom:35px; }
	.footer__cs .footer__title { margin-bottom:4px; font-size:14.5px; }
	.footer__cs-tel { font-size:22px; }
	.footer__cs-time { font-size:13px; line-height:1.8; }
	.df-sns-icon { gap:6px; margin-top:20px; }
	.df-sns-icon__item { width:32px; height:32px; }

	.footer__legal {
		order:2;
		flex-direction:row;
		flex-wrap:wrap;
		gap:12px;
		padding:0 20px 35px;
		border-bottom:1px solid #eeeef0;
	}
	.footer__legal .footer__title { display:none; }
	.footer__legal-link { font-size:13px; }

	.footer__company { order:3; padding:35px 20px 0; }
	.footer__logo { display:none; }
	.footer__info-wrap { gap:0; }
	.footer__info { gap:2px 8px; font-size:12px; line-height:1.8; }

	/* 사업자 정보 접기 — /m/ 의 «{{SITE_NAME}} 사업자 정보 ⌄» 와 같은 동작 */
	.rr-mo-bizinfo { display:block; }
	.footer__company .footer__info-wrap { display:none; }
	.footer__company.is-open .footer__info-wrap { display:flex; margin-top:14px; }

	.footer__bottom { border-top:0; }
	.footer__bottom-inner { display:block; width:100%; height:auto; padding:0 20px 40px; }
	.footer__bottom-logo { display:none; }
	/* .wrap_body 가 align="center" 라 지정 안 한 텍스트는 가운데로 쏠린다 */
	.footer__copyright { font-size:13px; text-align:left; }

	/* --- 퀵버튼 : 하단탭바에 가리지 않게 ------------------------------- */
	.df-quickbutton { right:12px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
	.df-quickbutton__item { width:40px; height:40px; }

	/* --- 하단 탭바 : /m/ #rroysGnb ------------------------------------- */
	.rr-mo-gnb { display:block; }
}

/* 「명품관」 점 튀는 동작 — /m/ 의 m_menu_badge_v1.css 와 같은 정의 (PC 에는 이 keyframes 가 없다) */
@keyframes rrMenuBadgeBounce {
	0%       { transform:translateY(0); }
	18%      { transform:translateY(-5px); }
	36%      { transform:translateY(0); }
	50%      { transform:translateY(-2.5px); }
	62%      { transform:translateY(0); }
	72%      { transform:translateY(-1px); }
	80%,100% { transform:translateY(0); }
}

/* ==========================================================================
   모바일 전용으로 «주입»하는 요소
   ★ min-width 로 숨긴다 — max-width 규칙과 순서 싸움을 하지 않기 위해서다.
     (같은 특이도라 «나중에 선언한 쪽»이 이긴다 → 구간을 겹치지 않게 나눈다)
   ========================================================================== */
@media all and (min-width:768px) {
	.rr-mo-menu,
	.rr-mo-gnb,
	.rr-mo-drawer,
	.rr-mo-bizinfo { display:none !important; }
}

/* 햄버거 (/m/ .df-category-toggle__box 와 같은 20x14 3줄) */
.rr-mo-menu {
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	margin-left:-10px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
.rr-mo-menu i {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	width:20px;
	height:14px;
}
.rr-mo-menu i span {
	display:block;
	width:100%;
	height:2px;
	border-radius:2px;
	background:#000;
}

/* 사업자 정보 토글 */
.rr-mo-bizinfo {
	width:100%;
	padding:0;
	border:0;
	background:none;
	color:#1d1d1f;
	font-size:14px;
	font-weight:620;
	text-align:left;
	cursor:pointer;
}
.rr-mo-bizinfo::after {
	display:inline-block;
	width:7px;
	height:7px;
	margin-top:-5px;
	margin-left:10px;
	border-right:1px solid #9b9b9b;
	border-bottom:1px solid #9b9b9b;
	vertical-align:middle;
	transform:rotate(45deg);
	transition:transform .3s ease;
	content:"";
}
.footer__company.is-open .rr-mo-bizinfo::after { margin-top:4px; transform:rotate(225deg); }

/* ---- 전체메뉴 드로어 ---- */
/* z-index 60 : .rr-header-wrap(1200) 안에서 형제인 .rr-header(20)보다 위여야 한다.
   10 으로 두면 헤더 카테고리 링크가 드로어를 뚫고 올라와 클릭을 가로챈다. */
.rr-mo-drawer {
	position:fixed;
	inset:0;
	z-index:60;
	text-align:left;   /* .wrap_body 의 align="center" 상속 차단 */
	visibility:hidden;
	opacity:0;
	transition:opacity .25s ease, visibility .25s ease;
}
.rr-mo-drawer.is-open { visibility:visible; opacity:1; }
.rr-mo-drawer__dim { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.rr-mo-drawer__panel {
	position:absolute;
	top:0;
	left:0;
	display:flex;
	flex-direction:column;
	width:min(320px, 84vw);
	height:100%;
	background:#fff;
	transform:translateX(-100%);
	transition:transform .3s cubic-bezier(.22,1,.36,1);
	overflow:hidden;
}
.rr-mo-drawer.is-open .rr-mo-drawer__panel { transform:translateX(0); }
.rr-mo-drawer__head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex:none;
	height:57px;
	padding:0 12px 0 20px;
	border-bottom:1px solid #eee;
}
.rr-mo-drawer__auth { display:flex; align-items:center; gap:14px; }
.rr-mo-drawer__auth a { color:#111; font-size:14px; }
.rr-mo-drawer__auth .displaynone { display:none !important; }
.rr-mo-drawer__close {
	position:relative;
	width:34px;
	height:34px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
.rr-mo-drawer__close::before,
.rr-mo-drawer__close::after {
	position:absolute;
	top:50%;
	left:50%;
	width:17px;
	height:1.6px;
	background:#111;
	content:"";
}
.rr-mo-drawer__close::before { transform:translate(-50%,-50%) rotate(45deg); }
.rr-mo-drawer__close::after { transform:translate(-50%,-50%) rotate(-45deg); }

.rr-mo-drawer__body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rr-mo-drawer__cate ul { margin:0; padding:0; list-style:none; }
.rr-mo-drawer__cate > ul > li { border-bottom:1px solid #f2f2f2; }
.rr-mo-drawer__cate > ul > li > a {
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:48px;
	padding:0 20px;
	color:#111;
	font-size:15px;
	font-weight:600;
	text-decoration:none;
}
.rr-mo-drawer__cate > ul > li:first-child > a { color:#ff0000; }
.rr-mo-drawer__cate .rr-mo-drawer__toggle {
	flex:none;
	width:34px;
	height:34px;
	margin-right:-8px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
.rr-mo-drawer__cate .rr-mo-drawer__toggle::after {
	display:block;
	width:7px;
	height:7px;
	margin:0 auto;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	transform:rotate(45deg) translate(-2px,-2px);
	transition:transform .25s ease;
	content:"";
}
.rr-mo-drawer__cate li.is-open > a .rr-mo-drawer__toggle::after { transform:rotate(225deg) translate(-2px,-2px); }
.rr-mo-drawer__cate .rr-mo-drawer__sub { display:none; padding:4px 0 12px; background:#fafafa; }
.rr-mo-drawer__cate li.is-open > .rr-mo-drawer__sub { display:block; }
.rr-mo-drawer__cate .rr-mo-drawer__sub a {
	display:block;
	padding:9px 20px 9px 32px;
	color:#555;
	font-size:14px;
	text-decoration:none;
}
.rr-mo-drawer__util { padding:18px 20px 40px; border-top:8px solid #f5f5f5; }
.rr-mo-drawer__util h3 { margin:0 0 10px; color:#999; font-size:12px; font-weight:600; }
.rr-mo-drawer__util a {
	display:block;
	padding:9px 0;
	color:#333;
	font-size:14px;
	text-decoration:none;
}

/* ---- 하단 탭바 (/m/ #rroysGnb) ---- */
.rr-mo-gnb {
	position:fixed;
	right:0;
	bottom:0;
	left:0;
	z-index:950;
	border-top:1px solid #eee;
	background:#fff;
	padding-bottom:env(safe-area-inset-bottom, 0px);
}
.rr-mo-gnb ul { display:flex; margin:0; padding:0; list-style:none; }
.rr-mo-gnb li { flex:1; min-width:0; }
.rr-mo-gnb a {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	height:67px;
	color:#8a8a8f;
	font-size:11px;
	text-decoration:none;
}
.rr-mo-gnb a.is-active { color:#111; }
.rr-mo-gnb svg { display:block; width:23px; height:23px; }
.rr-mo-gnb__badge {
	position:absolute;
	top:11px;
	left:calc(50% + 6px);
	min-width:15px;
	height:15px;
	padding:0 4px;
	border-radius:8px;
	background:#3d3d3f;
	color:#fff;
	font-size:10px;
	font-weight:500;
	line-height:15px;
	text-align:center;
}