@charset "utf-8";
/* ==========================================================================
   rroys 서브페이지 반응형 — «메인페이지 반응형을 그대로 가져온 것»
   /common/inc/shop_rroys_responsive.css        2026-08-24 정희찬(PRO4)

   무엇인가 —
     로이스닷컴 «메인» 은 이미 반응형이 끝나 있었다(1299 / 1023 / 767 3단).
     그 규칙 뭉치가 메인 화면의 관리자 디자인 안에 <style> 로만 들어 있어서
     서브페이지에는 하나도 적용되지 않았다. 그래서 서브는 창을 줄이면
     PC 고정폭 그대로였다. 사용자 지시 : «메인의 상단·카피라이트 영역을
     참조해서 서브 상단·하단도 반응형으로».
     → 메인의 그 <style> 블록을 «한 줄도 바꾸지 않고» 이 파일로 옮겼다.
       서브에만 있는 것(레거시 본문 상자·빈 폭맞춤 표)만 맨 아래에 덧붙였다.

   짝이 되는 것 —
     · /common/inc/shop_rroys_responsive.js   (햄버거·드로어·하단탭바 주입)
     · /common/inc/shop_rroys_responsive.asp  (rroys 일 때만 이 둘을 링크)
     서브상단/서브하단 «관리자 HTML 은 한 글자도 안 고친다» — 메인과 서브가
     같은 마크업이라 같은 CSS 가 그대로 먹는다(실측 확인).

   되돌리기 : shop_rroys_responsive.asp 의 두 줄만 지우면 예전 상태로 돌아간다.
   ==========================================================================
   아래부터 메인 원본 그대로 ↓ */

/* ==========================================================================
   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;
}

/* ==========================================================================
   여기부터 «서브페이지 전용» 보정 — 메인에는 없는 것들만
   2026-08-24 정희찬(PRO4)
   ========================================================================== */

/* 서브 본문 골격 : 레거시 상자들이 1300px 로 고정이라, 상·하단만 줄이면
   본문이 삐져나와 가로 스크롤이 그대로 남는다. 같이 풀어 준다.
   (메인에는 이 상자들 자체가 없어서 원본에 규칙이 없다)
   구간을 1419 까지 잡는 이유는 맨 아래 «틈 보정» 주석 참고 — 1300~1419px 에서도
   #basisBody · .locationBox · .sub_contents 가 1300px 로 남아 8~10px 밀려났다(실측). */
@media all and (max-width:1419px) {
	.location, .locationBox,
	.sub_contents, .sub_contents > .inner, .sbc_width, .left_none,
	.PageWrapSize, .right_section, .right_cont,
	.member_wrap.width, .content_category {
		width:100% !important;
		min-width:0 !important;
		max-width:1300px !important;
		box-sizing:border-box !important;
	}

	/* topmenu.asp 가 찍는 «빈 폭맞춤 표»(width=1300) — 내용이 없으므로 뺀다 */
	#basisBody { display:none !important; }
}

/* 좌우 여백은 메인 섹션들과 같은 20px 로 맞춘다.
   767 이하는 지금 모바일 동작을 건드리지 않으려고 제외한다. */
@media all and (min-width:768px) and (max-width:1419px) {
	.location .locationBox,
	.sub_contents {
		padding-left:20px !important;
		padding-right:20px !important;
	}
}

/* ==========================================================================
   메인 원본의 «틈» 보정 — 1300 ~ 1419px
   2026-08-24 정희찬(PRO4)

   원본은 1299px 에서 고정폭을 푼다. 그런데 서브하단(=메인 카피라이트 영역)의
   안쪽 상자가 «1360px 고정» 이라, 1300~1377px 사이에서는 그 하나 때문에 문서가
   1360px 로 벌어져 가로 스크롤이 남는다.
   실측(2026-08-24) : vw 1300 · 1320 · 1359 전부 문서폭 1360px.
   고정폭 해제 쪽은 «아래 한계만 두지 않는다» — 1300px 정각에서 미디어쿼리 폭이
   스크롤바만큼 작게(1290) 잡혀 두 구간 사이에 10px 구멍이 생겼다(실측). 원본의
   1299 이하 규칙과 값이 같아 겹쳐도 무해하다.
   ★ 이건 «메인페이지도 똑같다» — 원본 규칙의 빈틈이다. 메인 쪽은 관리자
     [디자인관리 > 메인페이지관리] 안의 <style> 이라 여기서 못 고친다. 서브만 막는다.

   이어짐 확인 : 1420px 이상에서는 max-width 1400 + 좌우여백 20 = 안쪽 1360px 이라
   지금(고정 1360px)과 «완전히 같은 자리»다. 1299px 이하는 원본 규칙이 그대로 받는다.
   ========================================================================== */
@media all and (max-width:1419px) {
	html body { min-width:0; }
	html body .wrap_body { min-width:0; width:100%; }

	/* 원본 1299 이하 세트를 그대로 1419 까지 끌어올린 것 — 값이 같아 겹쳐도 무해하다.
	   (1300px 정각에서 띠배너 안쪽 로고흐름 1360px 만 남아 문서를 벌리던 것도 같이 막힌다) */
	.rr-header-inner,
	.rr-header-category { max-width:100%; }
	.rr-top-banner .rr-top-banner-logo-roll { width:100%; }
}

@media all and (min-width:1300px) {
	.footer__top-inner,
	.footer__bottom-inner {
		width:100%;
		max-width:1400px;
		padding-left:20px;
		padding-right:20px;
	}
}

/* ==========================================================================
   모바일 서브페이지 : «카피라이트» 숨김
   2026-08-25 정희찬(PRO4)
   지시 : "모바일 반응형 서브페이지에서는 카피라이트 안나오게 해줘"

   범위 —
     · «카피라이트» = © 한 줄이 아니라 «하단 푸터 영역 전체» 다(이 환경의 용어).
       로고 · 회사정보(상호·대표·사업자등록번호·통신판매업 신고번호·주소·개인정보
       책임자) · 고객센터 전화 · SNS · 서비스정보 링크 · COPYRIGHT 줄까지 전부.
       rroys 에서는 그 덩어리가 통째로 <footer id="footer" class="footer"> 하나다
       (관리자 [서브페이지 하단관리] 가 그리는 것, /_include/copyright.asp).
     · 767px 이하(= 메인의 모바일 구간)에서만. PC · 태블릿은 그대로 나온다.
     · 이 파일은 서브페이지에만 걸리므로 «메인페이지는 영향 없다» — 폰에서도
       메인 하단에는 사업자정보가 그대로 있다.

   ⚠ 마크업은 안 지운다 — CSS display:none 이라 이 블록만 지우면 즉시 되돌아온다.
   ⚠ 하단 탭바(.rr-mo-gnb)는 푸터가 아니라 별개 요소라 그대로 둔다.
      .wrap_body 의 아래쪽 여백(탭바 자리)도 그대로 둔다.
   ========================================================================== */
@media all and (max-width:767px) {
	html body #footer,
	html body footer.footer { display:none !important; }
}

/* ==========================================================================
   「모바일웹으로 이동하기」 — 안전망
   2026-08-25 정희찬(PRO4)

   실제로 «안 나오게» 하는 것은 서버 쪽이다 —
     /_include/copyright.asp 의 조건에 rroys 를 뺐다(작업코드 MU2608250010).
     그래서 아이폰 UA 로 받아도 이 마크업 자체가 안 실린다(실측 0건).

   그런데 copyright.asp 는 이 웹루트 68개 쇼핑몰 «공용» 이고, 다른 세션이
   자기가 며칠 전 받아 둔 사본 위에 패치해 되올리면 내 조건이 조용히 사라진다
   (2026-08-24 에 실제로 겪었다). 그때를 대비한 «두 번째 자물쇠» 다.
   서버 쪽이 살아 있는 한 이 규칙은 아무것도 안 맞춘다.

   폭 조건을 두지 않는다 — 이 안내는 «UA 가 폰이면» 나오는 것이라
   화면이 넓든 좁든 나올 수 있다(가로모드 · 태블릿).
   ========================================================================== */
html body .copyrightMobile { display:none !important; }

/* ==========================================================================
   모바일 서브페이지 상단바 — «뒤로가기 + 페이지 타이틀 + 아이콘»
   2026-08-25 정희찬(PRO4)
   지시 : "모바일 서브페이지 탑메뉴는 안나오게 해주고, endedit.com/product/list.asp?type=best
           처럼 뒤로가기·페이지타이틀·아이콘으로. 마이페이지·고객센터는 아이콘 빼고."

   치수는 endedit 의 것을 그대로 가져왔다(/common/inc/shop_header.css 의 .mp-hd-bar-sub) —
     바 높이 56px · 격자 88px | 1fr | 88px · 버튼 44x44 · 제목 18px/26px/700 가운데.
   그래서 두 사이트의 서브 상단바가 같은 모양·같은 높이로 선다.

   ⚠ 탑메뉴(카테고리 4열 격자)는 «감추기만» 한다 — 지우면 안 된다.
     전체메뉴 서랍이 그 DOM(#rr-header-category-menu .icon_tit_list)에서 목록을 읽는다.
     서랍은 하단 탭바의 「카테고리」 로 그대로 열린다.
   ⚠ 아이콘(검색·장바구니)은 «원래 있던 헤더 요소를 그대로 옮겨 쓴다» — 새로 만들지
     않는다. 그래야 검색 레이어·장바구니 개수 같은 기존 동작이 그대로 산다.
   되돌리기 : 이 블록과 shop_rroys_responsive.js 의 같은 이름 블록만 지운다.
   ========================================================================== */

/* PC·태블릿에서는 새로 만든 두 조각이 아예 안 보인다 */
@media all and (min-width:768px) {
	.rr-mo-back,
	.rr-mo-subtitle { display:none !important; }
}

@media all and (max-width:767px) {

	/* ── 1. 탑메뉴 · 빵부스러기 숨김 ─────────────────────────────────── */
	.rr-header-bottom { display:none !important; }   /* 카테고리 4열 격자 */
	.location { display:none !important; }           /* 제목이 상단바로 올라갔다 */

	/* ── 2. 상단바 골격 (endedit .mp-hd-bar-sub 규격) ────────────────── */
	.rr-header-top { height:56px !important; }
	.rr-header-inner {
		display:grid !important;
		grid-template-columns:88px minmax(0, 1fr) 88px !important;
		align-items:center !important;
		height:56px !important;
		padding:0 4px !important;
	}
	.rr-header-left,
	.rr-header-logo,
	.rr-mo-menu { display:none !important; }

	/* ── 3. 뒤로가기 ─────────────────────────────────────────────────── */
	.rr-mo-back {
		grid-column:1;
		justify-self:start;
		display:grid;
		place-items:center;
		width:44px;
		height:44px;
		margin:0;
		padding:0;
		border:0;
		background:transparent;
		color:#111;
		cursor:pointer;
	}
	.rr-mo-back svg { display:block; }

	/* ── 4. 페이지 타이틀 ────────────────────────────────────────────── */
	.rr-mo-subtitle {
		grid-column:2;
		min-width:0;
		margin:0;
		color:#111;
		font-size:18px;
		font-weight:700;
		line-height:26px;
		text-align:center;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	/* ── 5. 오른쪽 아이콘 (검색 · 장바구니) ──────────────────────────── */
	.rr-header-right {
		grid-column:3;
		justify-content:flex-end !important;
		gap:0 !important;
		height:auto !important;
		min-width:0 !important;
	}
	.rr-header-right .rr-header-icon {
		width:44px !important;
		height:44px !important;
	}
	/* 아이콘 «상자» 를 44px 로 키웠으니 그림도 다시 22px 로 못박는다 —
	   원래 상자(22~23px)에 맞춰 그림이 100% 로 그려지고 있어서, 상자만 키우면
	   그림도 같이 44px 로 부풀어 오른다(실측). endedit 은 22x22 다. */
	.rr-header-right .rr-header-icon svg,
	.rr-header-right .rr-header-icon img {
		width:22px !important;
		height:22px !important;
	}
	/* endedit 순서에 맞춘다 — 검색 다음 장바구니 */
	.rr-header-icon.rr-header-search-button { order:1 !important; }
	.rr-header-icon.rr-header-cart { order:2 !important; }
	/* 44px 상자에 맞춰 장바구니 개수 뱃지 자리 (endedit .mp-hd-badge 와 같은 값) */
	.rr-header-cart-count { top:6px !important; right:6px !important; }

	/* 아이콘을 안 쓰는 화면(마이페이지·고객센터·장바구니·주문서).
	   visibility 로 숨겨 88px 칸은 남긴다 — 제목이 계속 정확히 가운데 온다. */
	.rr-mo-noicon .rr-header-right { visibility:hidden !important; }
}

/* ==========================================================================
   모바일 서브페이지 : 최상단 띠배너 숨김
   2026-08-25 정희찬(PRO4)
   지시 : "모바일에서는 최상단 띠배너 안나오게 해줘"
          (기준 화면 : /member/join.asp?redirect=%2Fmy%2Fmain%2Easp)

   대상 — 헤더 «위» 에 깔리는 파란 띠(.rr-top-banner). 안에 흐르는 문구·브랜드
   로고 슬라이드가 들어 있다. 767px 이하에서만 뺀다.

   ⚠ 이 파일은 «서브페이지» 에서만 링크된다 — 메인페이지 띠배너는 그대로 나온다.
   ⚠ display:none 이라 자리(39px)까지 사라진다. 헤더는 원래 문서 흐름에 있고
     sticky 는 자기 위치를 기준으로 붙으므로 빈칸이 남지 않는다(실측).
   ⚠ 마크업은 안 지운다 — 이 블록만 지우면 즉시 되돌아온다.
   ========================================================================== */
@media all and (max-width:767px) {
	html body .rr-top-banner { display:none !important; }
}


/* ==========================================================================
   리뉴얼 본문(아일랜드)을 레거시 껍데기의 상속에서 격리
   2026-08-25 황수빈

   지시 : "메인·헤더·탑메뉴·푸터를 뺀 나머지 서브페이지는 endedit 과 모두 동일"

   왜 어긋났나 — endedit 은 아일랜드가 body 바로 아래인데 rroys 는 레거시
   본문 상자 안에 들어간다. 그래서 두 가지가 새어 들어온다.
     .sub_contents.sbc_width  max-width:1300px  → 본문이 1300px 로 눌린다
                                                  (상품목록 카드 190px vs 213px)
     base.css  body{font-size:12px}            → 아일랜드가 12px 를 상속한다
                                                  (상품상세 가격줄 74px vs 54px)

   앱 CSS 가 px 로 못박은 글자는 원래 같았다 — 크기를 «지정하지 않은» 요소만
   어긋난다. 그래서 루트에 16px 을 세워 endedit 의 body 기본값과 맞춘다.

   액자를 풀면 rroys 자기 크롬과도 맞는다 — 헤더 1440@x0 · 푸터 안쪽 1400@x20
   이고, endedit 상품그리드도 1400@x20 이다(실측).

   ⚠ 이 파일은 shop_rroys_responsive.asp 의 siteID 게이트 뒤에서만 링크된다
     → pro2·pro3·pro5 에는 안 나간다. 그 몰들까지 맞출 때는 같은 규칙을
     공용 shop_island.asp 로 옮긴다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
#ee-lst-root,
#ee-pd-root,
#ee-ct-root,
#ee-my-root,
#bd-root,
#st-root,
#br-root,
#ee-srch-root,
#ee-pd-float-slot,
#ee-ct-confirm-slot { font-size:16px; }

.sub_contents:has(#ee-lst-root, #ee-pd-root, #ee-ct-root, #ee-my-root, #bd-root, #st-root, #br-root, #ee-srch-root),
.left_none:has(#ee-lst-root, #ee-pd-root, #ee-ct-root, #ee-my-root, #bd-root, #st-root, #br-root, #ee-srch-root) {
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}


/* ==========================================================================
   크롬 CSS 에만 있던 «공용 토큰» 을 rroys 아일랜드에도 세운다
   2026-08-25 황수빈

   endedit 은 헤더/푸터와 함께 /common/inc/shop_tokens.css 를 받는데, 그 파일이
   디자인 토큰만이 아니라 «레이아웃 상한» 까지 들고 있다. rroys 는 크롬이 꺼져
   있어 그 파일을 안 받으므로, 각 앱 CSS 가 자기 안에 적어둔 «기본값» 이 남는다.

     shop_tokens.css        --layout-body-max: 1440px   (endedit 이 받는 값)
     cart-static-prototype  --layout-body-max: 1200px   (앱 자체 기본값)

   그래서 장바구니가 rroys 1136px / endedit 1376px 로 갈렸다(.sh-wrap 실측).
   토큰만 세우면 앱 CSS 를 안 고치고 두 몰이 같아진다.

   ⚠ :root 끼리는 명시도가 같아 «나중에 로드된 쪽» 이 이긴다. 이 파일은 문서
     맨 끝에서 링크되므로(shop_rroys_responsive.asp) 앱 CSS 보다 뒤다 — 이긴다.
   ⚠ 폰트도 같이 맞춘다. endedit 아일랜드는 --font-core 로 그리는데 rroys 는
     레거시 body 스택을 상속해 첫 패밀리가 달랐다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
:root {
	--layout-body-max: 1440px;
	--layout-header-max: 1440px;
	--font-core: 'Pretendard JP', 'Pretendard Variable', Pretendard, -apple-system,
		BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
}

#ee-lst-root,
#ee-pd-root,
#ee-ct-root,
#ee-my-root,
#bd-root,
#st-root,
#br-root,
#ee-srch-root { font-family: var(--font-core); }


/* ==========================================================================
   상품상세·장바구니 : 하단 탭바 대신 «화면 고정 액션바»
   2026-08-25 황수빈

   지시 : "rroys 를 endedit 의 디자인 그대로"

   endedit 은 이 두 화면에서 <html> 에 ee-bn-off 를 걸어 하단 탭바를 끄고,
   그 자리에 앱이 그리는 고정 액션바(#ee-pd-mbar / 장바구니 주문바)를 세운다.
   rroys 는 탭바(.rr-mo-gnb)가 켜진 채라 액션바를 «덮고» 있었다 —
   액션바 z-index:50 · 탭바 z-index:950 (실측). 그래서 폰에서 「장바구니 담기 /
   바로 구매」 버튼에 손이 닿지 않았다.

   ⚠ 액션바는 원래부터 rroys 에도 «있었다». 안 그려진 게 아니라 가려져 있었다 —
     DOM 에 없다고 오판하기 쉬운 자리다(#ee-pd-mbar 390x70 top=774 로 정상 존재).
   ⚠ 빈칸 안 생긴다 — body padding-bottom 은 0 이고, 액션바 자리는 앱이
     .ee-pd-mbar-hold(76px) 로 이미 잡아 둔다(실측).
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
@media all and (max-width:767px) {
	body:has(#ee-pd-root) .rr-mo-gnb,
	body:has(#ee-ct-root) .rr-mo-gnb { display:none !important; }
}


/* ==========================================================================
   레거시 퀵버튼(맨위로/맨아래로) 숨김 — endedit 에는 없는 요소
   2026-08-25 황수빈

   지시 : "rroys 를 endedit 의 디자인 그대로"

   .df-quickbutton 은 rroys 레거시 스킨이 화면 오른쪽 아래에 띄우는 40x40 원형
   버튼 두 개다. endedit 에는 이 요소 자체가 없고, 폰에서는 상품상세 고정
   액션바 바로 위에 겹쳐 떠서 「바로 구매」를 가리는 자리에 있었다.

   ⚠ 아일랜드가 있는 «서브페이지에서만» 뺀다 — 이 CSS 는 서브에서만 링크되므로
     rroys 메인페이지의 퀵버튼은 그대로 남는다(메인은 rroys 것을 쓴다는 지시).
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
body:has(#ee-lst-root, #ee-pd-root, #ee-ct-root, #ee-my-root, #bd-root, #st-root, #br-root, #ee-srch-root) .df-quickbutton,
body:has(#ee-lst-root, #ee-pd-root, #ee-ct-root, #ee-my-root, #bd-root, #st-root, #br-root, #ee-srch-root) [class^="df-quickbutton"] { display:none !important; }


/* ==========================================================================
   레거시 빵부스러기(.location) 숨김 — 아일랜드 화면 한정
   2026-08-25 황수빈

   지시 : "rroys 를 endedit 의 디자인 그대로"

   shop-legacy-pc.asp 가 관리자 서브상단 아래에 «홈 > 화면이름» 을 한 줄 찍는데,
   아일랜드도 자기 빵부스러기를 그린다(상품상세 실측 : 왼쪽 「홈 › 의류」 =
   아일랜드 / 오른쪽 위 「홈 > 상품상세」 = 레거시). 그래서 rroys 만 두 개였다.
   endedit 셸에는 .location 이 아예 없다 — 그쪽에 맞춘다.

   ⚠ 마크업은 안 지운다(셸 공용) — 아일랜드가 있는 화면에서만 CSS 로 가린다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
body:has(#ee-lst-root, #ee-pd-root, #ee-ct-root, #ee-my-root, #bd-root, #st-root, #br-root, #ee-srch-root) .location { display:none !important; }

/* ==========================================================================
   회원화면(로그인 · 회원가입 · 아이디찾기 · 비밀번호찾기) — 모바일
   2026-08-25 황수빈

   지시 : "모바일에서 로그인·회원가입·아이디찾기·비밀번호찾기 페이지에서는 하단 gnb 를
   숨기고, 헤더는 뒤로가기 버튼 이외 나머지 엘리먼트들을 숨겨 달라"

   endedit 은 공용 셸(shop_header.asp)의 EE_MOBILE_BACK_ONLY / EE_BOTTOMNAV_OFF 로 하고,
   rroys 는 «자기 헤더» 를 쓰므로(rroys-mirrors-endedit : 헤더는 예외) 여기서 같은 결과를 만든다.
   표시(.rr-mo-authbare)는 shop_rroys_responsive.js 가 <html> 에 단다.

   ⚠ .rr-header-right 는 .rr-mo-noicon 처럼 visibility 로 감추지 않는다 —
     그 방식은 «제목을 가운데 두려고» 88px 칸을 남기는 것인데, 여기서는 제목도 없앤다.
   ⚠ 되돌리기 : 이 블록과 위 js 두 줄만 지운다.
   ========================================================================== */
@media all and (max-width:767px) {
	.rr-mo-authbare .rr-mo-subtitle,
	.rr-mo-authbare .rr-header-right { display:none !important; }

	.rr-mo-authbare .rr-mo-gnb { display:none !important; }
	/* 탭바가 없으니 그 자리(67px)도 같이 뺀다 */
	.rr-mo-authbare .wrap_body { padding-bottom:0; }

	/* 2026-08-25 : 제목이 있던 «가운데» 에 사이트 로고를 세운다.
	   위 「2. 상단바 골격」 이 .rr-header-logo 를 display:none !important 로 끄므로
	   클래스 하나를 더 얹어(0,2,0) 명시도로 이긴다.
	   ⚠ 이 로고는 스킨이 «position:absolute» 로 띄워 둔다(실측) — 그리드 칸(grid-column)으로는
	     안 잡힌다. 그래서 자리는 absolute 그대로 두고 left/top 과 «동반 속성 전부» 를 다시 준다.
	     left 만 바꾸고 right 를 안 지우면 폭이 늘어난다.
	   폭 80px 은 rroys 모바일 «메인» 헤더 로고와 같은 값이다(실측 80x23).
	   ⚠ 마크업에 빈 <a href="/"> 가 하나 더 있다 — 인라인 상자가 로고를 밀지 않도록 뺀다. */
	.rr-mo-authbare .rr-header-logo {
		display:block !important;
		position:absolute;
		left:50%;
		right:auto;
		top:50%;
		bottom:auto;
		transform:translate(-50%, -50%);
		width:80px;
		margin:0;
	}
	.rr-mo-authbare .rr-header-logo a:empty { display:none; }
	.rr-mo-authbare .rr-header-logo img { display:block; width:80px; height:auto; max-height:34px; }
}


/* ==========================================================================
   모바일 상품상세 상단바 — 사진 위 그라데이션이 «흰 배경에» 덮여 있던 것
   2026-08-25 황수빈

   지시 : "rroys 도 endedit 의 디자인을 똑같이 따라가야 된다 — 상품상세 헤더 그라데이션"

   공용 조각 /common/inc/pd-mobile-topbar.js 가 상단바에 .pd-mo-topbar 를 달아
   «배경을 지우고 ::before 로 어두운 그라데이션» 을 깐 뒤 아이콘을 흰색으로 바꾼다.
   그런데 rroys 는 배경색이 바깥(.rr-header-wrap)이 아니라 «안쪽 두 겹» 에 있다 —
   실측 header.rr-header · .rr-header-top 둘 다 rgb(255,255,255) 390x56.
   같은 조각의 `.pd-mo-topbar > *{position:relative;z-index:1}` 이 그 안쪽을
   ::before 위로 올리므로 그라데이션이 통째로 가려졌고, 아이콘만 흰색이 되어
   «흰 바탕에 흰 아이콘» 이 됐다(뒤로가기·검색·장바구니가 사실상 안 보였다).

   ⚠ 공용 조각은 안 고친다 — pro2·pro3·pro5·demo3 도 같이 쓰는데 그 몰들은
     바깥에 배경이 있어 이미 정상이다. rroys 헤더는 원래 예외라 자기 파일에서 맞춘다.
   ⚠ 검색 시트를 열면 조각이 스스로 .pd-mo-topbar 를 뗀다 → 흰 배경이 돌아온다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
@media all and (max-width:768px) {
	.rr-header-wrap.pd-mo-topbar .rr-header,
	.rr-header-wrap.pd-mo-topbar .rr-header-top,
	.rr-header-wrap.pd-mo-topbar .rr-header-inner {
		background:transparent !important;
		box-shadow:none !important;
		border-color:transparent !important;
	}
}


/* ==========================================================================
   검색 시트를 열면 겹치기를 끈다 — 흰 바 · 검은 아이콘 · 패널 글자색 복구
   2026-08-25 황수빈

   공용 조각은 «바가 세로로 늘어나면» 스스로 겹치기를 끄는데(isExpanded),
   rroys 는 검색 패널이 position:absolute 라 바 높이가 56 그대로다 → 안 꺼진다.
   그래서 조각이 걸어 둔 `color:#fff` 가 패널 «안» 까지 내려가
   검색 패널 전체가 흰 글씨였다(실측 : 최근 검색어·최근 본 상품 23개 노드 전부 #fff).
   ★ 이건 내 변경으로 생긴 게 아니라 «지금 라이브에도 있는» 상태다 — 같이 잡는다.

   되돌릴 색은 겹치기가 없는 화면(목록)에서 실측한 값이다.
     기본 #17181c · 뒤로가기/검색/제출/칼럼제목 #111 · 입력 #222
     legend.hide #999 · 「없습니다」 #aaa · 장바구니 숫자 흰색(배경 #111)

   ⚠ 공용 조각(pd-mobile-topbar.js)은 안 고친다 — 같은 증상이 pro2·pro3·pro5·
     demo3 에도 있을 수 있으니 그쪽은 조각 담당자에게 알린다.
   ⚠ 앞 블록보다 «뒤» 에 둔다 — 명시도가 같은 자리는 순서로 이긴다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
@media all and (max-width:768px) {
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-top {
		background:#fff !important;
	}
	.rr-header-wrap.pd-mo-topbar.is-search-open::before { display:none !important; }

	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-top *,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-layer,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-layer * { color:#17181c !important; }

	.rr-header-wrap.pd-mo-topbar.is-search-open svg,
	.rr-header-wrap.pd-mo-topbar.is-search-open img { filter:none !important; }

	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-mo-back,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-mo-back *,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-search-button,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-search-button *,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-submit,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-submit *,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-column-title { color:#111 !important; }

	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-input { color:#222 !important; }
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-layer .hide { color:#999 !important; }
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-search-empty { color:#aaa !important; }

	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-cart-count,
	.rr-header-wrap.pd-mo-topbar.is-search-open .rr-header-cart-count * { color:#fff !important; }
}


/* ==========================================================================
   아일랜드 본문 자간 — 레거시 -0.12px 이 상속되던 것
   2026-08-25 황수빈

   지시 : "rroys 도 endedit 의 디자인을 똑같이 따라가야 된다 — 상품정보 섹션도 똑같이"

   상품정보(.ee-pd-info)를 계산값 단위로 대조하니 구조·여백·크기는 endedit 과
   완전히 같은데 «자간만» 달랐다 — rroys -0.12px / endedit normal. 레거시
   본문 스택에서 상속된 값이라 앱 CSS 가 px 로 못박지 않은 글자 전부에 걸린다
   (상품명·가격·상품코드·배송·총 상품금액 …).

   ⚠ 앱이 스스로 정한 자간(.ee-pd-h1 -0.506px · .ee-pd-now -0.66px 등)은
     그대로 이긴다 — 여기서는 «상속되는 기본값» 만 되돌린다.
   ⚠ 위 font-size:16px · font-family 와 같은 이유·같은 범위라 루트 목록을 맞췄다.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
#ee-lst-root,
#ee-pd-root,
#ee-ct-root,
#ee-my-root,
#bd-root,
#st-root,
#br-root,
#ee-srch-root,
#ee-pd-float-slot,
#ee-ct-confirm-slot { letter-spacing:normal; }


/* ==========================================================================
   rr-pd-tabs-sticky — 모바일 상품상세 탭줄이 «위에 붙지 않던» 것
   2026-08-26 황수빈

   지시 : "모바일에서는 스크롤하다가 탭이 상단에 도달할 경우 sticky 속성을 추가해줘"

   앱 CSS 는 이미 `.ee-pd-tabs-w{position:sticky;top:0}` 이다 — 없는 게 아니라 «죽어 있었다».
   레거시 스킨의 `.sub_contents{overflow:hidden}` 이 스크롤 컨테이너가 되면서, 그 안의 sticky 는
   «페이지» 가 아니라 «그 상자» 기준이 된다. 상자 자체는 스크롤하지 않으니 영영 안 붙는다.
   endedit 셸에는 이 래퍼가 없어서 원래부터 붙었다(실측 : endedit y=0 고정 / rroys 는 계속 밀려 올라감).

   ⚠ overflow 를 visible 로 «풀지» 않는다 — 레거시가 가로 넘침을 여기서 자르고 있을 수 있다.
     `clip` 은 자르기는 그대로면서 스크롤 컨테이너를 «안 만든다» → sticky 가 산다.
     대신 `clip` 은 BFC 를 안 만들므로 `display:flow-root` 로 그것만 되살린다(높이·플로트 유지).
     실측 : .sub_contents 높이 7757 · 문서높이 7864 · 가로넘침 0 — 전후 동일.
   ⚠ 767px 까지만 켠다. 768px 부터는 rroys 헤더가 «fixed 116px z=30» 으로 바뀌어
     top:0 에 붙인 탭줄(z=10)이 그 뒤로 숨는다(실측 : 탭 자리에 헤더 로고 img 가 잡힘).
     PC 도 붙이려면 top 을 헤더 높이만큼 내려야 한다 — 지시는 모바일이라 여기까지.
   ⚠ 되돌리기 : 이 블록만 지운다.
   ========================================================================== */
@media all and (max-width:767px) {
	.sub_contents:has(#ee-pd-root) {
		overflow: clip;
		display: flow-root;
	}
}