@charset "utf-8";
/* ===========================================================================
   rroys PC 메인 전용 스킨  (/data/rroys/css/main_v2.css)
   2026-07-26 페이지업그레이드
   - /main/main_header.asp 에서 "파일이 있을 때만" 링크된다(다른 분양몰 영향 없음).
   - 메인 마크업은 디자인관리(DB) 템플릿이라 소스를 직접 못 고친다 → 여기서 덮어쓴다.
   - 공용 common.css 를 건드리지 않는다(세션 동시편집 유실 방지).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0) 디자인 토큰 — 라인색/라운딩/음영/이징을 한 곳에서 관리
   --------------------------------------------------------------------------- */
:root{
	--rr-line:#ebebee;              /* 기본 구분선·테두리 (전 영역 통일) */
	--rr-line-soft:#f2f2f4;         /* 옅은 구분선 */
	--rr-line-strong:#dcdce1;       /* 강조 테두리(hover 등) */
	--rr-ink:#0d0d0f;               /* 본문 강조 텍스트 */
	--rr-ink-sub:#6b6b73;           /* 보조 텍스트 */
	--rr-radius-s:8px;
	--rr-radius-m:12px;
	--rr-radius-l:16px;
	--rr-shadow-1:0 1px 2px rgba(17,17,17,.04), 0 2px 8px rgba(17,17,17,.05);
	--rr-shadow-2:0 8px 24px rgba(17,17,17,.10);
	--rr-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------------
   1) 폰트 — 로컬 Pretendard(웨이트당 780~940KB) 대신 다이나믹 서브셋 사용
      메인 상단 디자인영역(HTML 템플릿) 안에
        body,input,select,button,textarea{font-family:'Pretendard' ... !important}
      가 박혀 있어서, 실제로 화면에 쓰인 400/500/600/700/900 다섯 웨이트를
      전부 통째로 내려받고 있었다(총 4.29MB).
      'Pretendard Variable' 서브셋은 /data/rroys/css/common.css 가 이미 @import 한다.
      → 인라인 !important 를 이기려고 선택자 앞에 html 을 붙여 특이도를 올린다.
   --------------------------------------------------------------------------- */
html body,
html input,
html select,
html button,
html textarea,
html .rr-header,
html .footer{
	/* ★폴백 스택에 로컬 'Pretendard' 를 절대 넣지 말 것.
	   다이나믹 서브셋에 없는 글자(ⓒ·기호류 등)를 만나면 다음 패밀리로 폴백하면서
	   939KB 짜리 Pretendard-Bold.woff2 를 통째로 내려받는다(실측). */
	font-family:'Pretendard Variable','Noto Sans KR','Malgun Gothic',
		-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif !important;
}
/* 아이콘 폰트는 위 규칙에 휩쓸리면 글자로 렌더된다 → 원복 */
html .material-icons,
html .material-icons-outlined{
	font-family:'Material Icons' !important;
	font-weight:normal;font-style:normal;letter-spacing:normal;
	text-transform:none;white-space:nowrap;direction:ltr;
}

/* 숫자 폭 고정 — 타이머가 1초마다 흔들리고, 가격 자릿수가 밀리던 문제 */
.rr-timer,
.rr-time-box,
.rr-days,.rr-hours,.rr-minutes,.rr-seconds,
.rr-price,
.rr-brand-special-price,.rr-brand-special-market-price,.rr-brand-special-sale-percent,
.rr-exclusive-curation-price,.rr-exclusive-curation-market-price,.rr-exclusive-curation-sale-percent{
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}

/* ---------------------------------------------------------------------------
   2) 버튼 — 라운딩 + 음영 + hover/active 트랜지션 (전 버튼 공통 규칙)
   --------------------------------------------------------------------------- */
.rr-buy-btn,
.rr-brand-special-more,
.rr-exclusive-curation-more,
.rr-search-submit{
	border-radius:var(--rr-radius-m);
	box-shadow:var(--rr-shadow-1);
	transition:transform .18s var(--rr-ease),
		box-shadow .18s var(--rr-ease),
		background-color .18s var(--rr-ease),
		border-color .18s var(--rr-ease),
		color .18s var(--rr-ease);
	will-change:transform;
}
.rr-buy-btn:hover,
.rr-search-submit:hover{
	transform:translateY(-1px);
	box-shadow:var(--rr-shadow-2);
}
.rr-buy-btn:active,
.rr-search-submit:active{
	transform:translateY(0);
	box-shadow:var(--rr-shadow-1);
}
/* 더보기(아웃라인 버튼) — 라인색 통일 + 눌리는 느낌 */
.rr-brand-special-more,
.rr-exclusive-curation-more{
	border:1px solid var(--rr-line) !important;
}
.rr-brand-special-more:hover,
.rr-exclusive-curation-more:hover{
	border-color:var(--rr-line-strong) !important;
	background-color:#fafafb;
	transform:translateY(-1px);
	box-shadow:var(--rr-shadow-2);
}
.rr-brand-special-more:active,
.rr-exclusive-curation-more:active{
	transform:translateY(0);
	box-shadow:var(--rr-shadow-1);
}
/* 배지(LIMITED DEAL 필 형태)만 음영. deal-label/stock-label 은 카드 폭 전체를 차지하는
   블록이라 음영을 주면 빈 사각형 테두리처럼 보인다 → 자간만 정리한다. */
.rr-badge{
	box-shadow:var(--rr-shadow-1);
	letter-spacing:.02em;
}
.rr-deal-label,
.rr-stock-label{
	letter-spacing:.02em;
}

/* 키보드 접근성 — 마우스 클릭엔 안 보이고 Tab 이동 때만 표시 */
.rr-buy-btn:focus-visible,
.rr-brand-special-more:focus-visible,
.rr-exclusive-curation-more:focus-visible,
.rr-recent-product-more:focus-visible,
.rr-search-submit:focus-visible,
.rr-header-user-button:focus-visible,
.rr-header-dropdown-button:focus-visible,
.rr-floating-section-menu button:focus-visible,
.rr-brand-special-wish:focus-visible,
.rr-exclusive-curation-wish:focus-visible{
	outline:2px solid var(--rr-ink);
	outline-offset:2px;
	border-radius:var(--rr-radius-s);
}

/* ---------------------------------------------------------------------------
   3) 상품카드 — 썸네일 라운딩 통일 + hover 확대/부상
   --------------------------------------------------------------------------- */
.rr-brand-special-thumb,
.rr-exclusive-curation-thumb{
	border-radius:var(--rr-radius-m);
	overflow:hidden;
	background:#f5f5f5;
}
.rr-brand-special-thumb img,
.rr-exclusive-curation-thumb img,
.rr-deal-card__thumb img{
	transition:transform .45s var(--rr-ease);
	backface-visibility:hidden;
}
.rr-brand-special-item:hover .rr-brand-special-thumb img,
.rr-exclusive-curation-item:hover .rr-exclusive-curation-thumb img,
.rr-deal-card:hover .rr-deal-card__thumb img{
	transform:scale(1.045);
}
.rr-brand-special-card,
.rr-exclusive-curation-card{
	transition:transform .22s var(--rr-ease);
}
.rr-brand-special-item:hover .rr-brand-special-card,
.rr-exclusive-curation-item:hover .rr-exclusive-curation-card{
	transform:translateY(-3px);
}
.rr-brand-special-title,
.rr-exclusive-curation-title{
	transition:color .18s var(--rr-ease);
}
.rr-brand-special-item:hover .rr-brand-special-title,
.rr-exclusive-curation-item:hover .rr-exclusive-curation-title{
	color:var(--rr-ink);
}
/* 찜하기 버튼 */
.rr-brand-special-wish,
.rr-exclusive-curation-wish{
	transition:transform .18s var(--rr-ease), opacity .18s var(--rr-ease);
}
.rr-brand-special-wish:hover,
.rr-exclusive-curation-wish:hover{
	transform:scale(1.12);
}

/* 특가 카드(히어로) — 그림자 한 단계 정리 */
.rr-deal-card{
	box-shadow:var(--rr-shadow-2);
	transition:box-shadow .25s var(--rr-ease);
}
.rr-deal-card:hover{
	box-shadow:0 14px 36px rgba(17,17,17,.14);
}

/* ---------------------------------------------------------------------------
   4) 라인 색상 통일 — 헤더/섹션/푸터의 구분선을 한 값으로
   --------------------------------------------------------------------------- */
.rr-header,
.rr-header-bottom,
.rr-header-wrap{
	border-color:var(--rr-line) !important;
}
.rr-header-dropdown-menu,
.rr-search-layer,
.rr-floating-section-menu{
	border-color:var(--rr-line) !important;
	box-shadow:var(--rr-shadow-2);
	border-radius:var(--rr-radius-m);
}
.footer{
	border-top:1px solid var(--rr-line);
}

/* 좌측 섹션 퀵메뉴 — 카드형으로 정리하고 hover 반응 추가 */
.rr-floating-section-menu{
	overflow:hidden;
	background:rgba(255,255,255,.92);
	backdrop-filter:saturate(180%) blur(6px);
}
.rr-floating-section-menu button{
	transition:background-color .18s var(--rr-ease), color .18s var(--rr-ease);
}
.rr-floating-section-menu button:hover{
	background-color:#f5f5f7;
	color:var(--rr-ink);
}

/* ---------------------------------------------------------------------------
   5) 타이포 — 섹션 제목/설명 자간·색 정돈
   --------------------------------------------------------------------------- */
.rr-section-title,
.rr-title,
.mainTitWrap{
	letter-spacing:-.02em;
	word-break:keep-all;
}
.rr-subtitle,
.rr-desc,
.rr-deal-subtitle{
	color:var(--rr-ink-sub);
	letter-spacing:-.01em;
	word-break:keep-all;
}

/* 링크/버튼 공통 — 드래그 선택 커서 튐 방지 */
.rr-header a,
.rr-floating-section-menu button,
.rr-brand-special-action,
.rr-exclusive-curation-action{
	-webkit-tap-highlight-color:transparent;
}

/* ---------------------------------------------------------------------------
   6) 모션 최소화 설정 존중 (접근성)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.rr-buy-btn,.rr-brand-special-more,.rr-exclusive-curation-more,.rr-search-submit,
	.rr-brand-special-card,.rr-exclusive-curation-card,.rr-deal-card,
	.rr-brand-special-thumb img,.rr-exclusive-curation-thumb img,.rr-deal-card__thumb img,
	.rr-brand-special-wish,.rr-exclusive-curation-wish{
		transition:none !important;
	}
	.rr-brand-special-item:hover .rr-brand-special-thumb img,
	.rr-exclusive-curation-item:hover .rr-exclusive-curation-thumb img,
	.rr-deal-card:hover .rr-deal-card__thumb img,
	.rr-brand-special-item:hover .rr-brand-special-card,
	.rr-exclusive-curation-item:hover .rr-exclusive-curation-card{
		transform:none !important;
	}
}