@charset "utf-8";

/* ==========================================================================
   2026-07-26 [전체적용] 이 파일은 전 분양몰 공용 스킨이다.
     · 위치 : /www/m/css/m_index_v1.css  (기존 /data/rroys/m/css/ 에서 승격)
     · 페이지 ASP 가 무조건 링크하며, /data/{siteID}/m/css/m_index_v1.css 가 있는 몰은
       그 파일이 뒤에 로드돼 덮어쓴다(몰별 커스터마이즈 용도).
     · 메인컬러는 몰마다 다르다 → --sitecolor1/2/3(관리자 디자인관리 cfgColor1/2/3) 승계.
       색이 섞인 그림자/틴트는 color-mix() 로 계산한다(하드코딩 금지).
     · 되돌리려면 이 파일만 지우면 된다(ASP 는 파일존재 확인 후 링크).
   ========================================================================== */

/* ==========================================================================
   로이스닷컴(rroys) 모바일 메인 전용 스킨
   파일 : /m/css/m_index_v1.css
   대상 : https://rroys.mallpro.co.kr/m/  (= /m/default.asp -> /m/main/main.asp)
          html.page_m_index 가 붙어 있을 때만 적용된다.

   2026-07-26 페이지업그레이드
     1) 폰트   : Pretendard Variable(다이나믹 서브셋) 통일 - 아이콘폰트는 예외 복구
     2) 라인색 : --rr-line 한 곳에서 관리 (카테고리탭/푸터/구분선)
     3) 버튼   : 라운딩 + 음영 + hover/active 트랜지션
     4) 레이아웃 버그 수정
        · 전역 .clfix 가 죽어 있어(::after{display:none}) float 컨테이너 높이가 0 →
          "자주쓰는 메뉴" 6개와 푸터 링크줄이 통째로 푸터 배경에 파묻혀 있었다. flex 로 재구성.
        · 카테고리 탭이 4열 그리드라 5번째 항목만 둘째 줄로 떨어지고 빈 칸 3개가 남았다.
        · 인스타그램 연동이 폐지돼 항상 비어 있는 SNS 섹션(제목만 남음) 숨김.

   ※ 규칙은 전부 html.page_m_index 로 스코프한다. 페이지 안의 디자인템플릿 인라인 <style>
     (문서상 이 파일보다 뒤에 온다)을 이기려면 특이도를 올려야 하므로,
     경합하는 곳은 스코프 클래스를 두 번 겹쳐 쓴다.
   ※ 전역 숨김 규칙(.head_top 등)은 건드리지 않는다 - 원본 동작 유지.
   ========================================================================== */

html.page_m_index {
	/* 쇼핑몰 메인컬러(cfgColor1/2/3)를 그대로 승계 */
	--rr-primary:      var(--sitecolor1, #FF0051);
	--rr-primary-2:    var(--sitecolor2, #FF66B3);

	--rr-ink:          #17181C;
	--rr-ink-2:        #4B5158;
	--rr-ink-3:        #8B9199;

	/* 전 페이지 공통 라인 색상 - 여기 한 곳만 바꾸면 전체가 따라온다 */
	--rr-line:         #E7E9ED;
	--rr-line-strong:  #D8DCE3;
	--rr-line-dark:    #5A5A5A;   /* 어두운 배경(푸터) 위의 구분선 */

	--rr-radius:       14px;
	--rr-radius-sm:    10px;
	--rr-radius-pill:  999px;

	--rr-shadow-sm:    0 1px 2px rgba(23,24,28,.06);
	--rr-shadow:       0 2px 8px rgba(23,24,28,.10);
	--rr-shadow-md:    0 6px 18px rgba(23,24,28,.14);

	--rr-ease:         .18s cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   1. 타이포 - Pretendard 통일
   모바일 base.css 는 로컬 Pretendard 를 @font-face 로 선언하지 않아서
   기존 font-family:Pretendard 선언들이 전부 나눔고딕/돋움으로 떨어지고 있었다.
   CDN 다이나믹 서브셋(Pretendard Variable)을 main.asp 에서 링크하고 여기서 지정한다.
   -------------------------------------------------------------------------- */
html.page_m_index body,
html.page_m_index body * {
	font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
	             'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Nanum Gothic', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* 아이콘 폰트는 위 규칙에서 되돌린다. (되돌리지 않으면 리간처가 깨져
   shopping_cart / expand_more 같은 "글자"가 그대로 보인다) */
html.page_m_index .material-icons {
	font-family: 'Material Icons';
	font-weight: normal; font-style: normal; letter-spacing: normal;
	text-transform: none; white-space: nowrap; direction: ltr;
}
html.page_m_index .material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal; font-style: normal; letter-spacing: normal;
	text-transform: none; white-space: nowrap; direction: ltr;
}
html.page_m_index .iconfont,
html.page_m_index [class*=" ftic-"],
html.page_m_index [class^="ftic-"] { font-family: 'iconfont'; }

/* 숫자(가격)는 자간을 살짝 좁혀 정돈 */
html.page_m_index .priBox,
html.page_m_index .salePri,
html.page_m_index .price,
html.page_m_index .pri { letter-spacing: -.02em; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------------------
   2. 레이아웃 버그 : 죽은 clearfix 복구
   commontotal.css 의 .clfix::after 가 display:none 이라 clear 박스가 생성되지 않는다.
   전역 규칙은 손대지 않고, 이 페이지에서 실제로 깨져 있던 컨테이너만 flex 로 다시 세운다.
   -------------------------------------------------------------------------- */

/* 2-1. "자주쓰는 메뉴" - ul 높이가 0 이라 6개 항목이 통째로 푸터에 파묻혀 있었다 */
html.page_m_index.page_m_index .userMenuWrap .userMenuList ul.clfix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	height: auto;
}
html.page_m_index.page_m_index .userMenuWrap .userMenuList ul.clfix::after { content: none; }
html.page_m_index.page_m_index .userMenuWrap .userMenuList li {
	float: none;
	width: auto;
	margin: 0;
	padding: 16px 6px;
	background: #FAFAFA;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	box-shadow: var(--rr-shadow-sm);
	transition: box-shadow var(--rr-ease), transform var(--rr-ease), border-color var(--rr-ease);
}
html.page_m_index.page_m_index .userMenuWrap .userMenuList li:active {
	transform: translateY(1px);
	box-shadow: none;
	border-color: var(--rr-line-strong);
}
html.page_m_index .userMenuWrap { margin: 40px 0 44px; }
html.page_m_index .userMenuWrap .mainTitle {
	padding: 0 20px;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--rr-ink);
	letter-spacing: -.02em;
}
html.page_m_index .userMenuWrap .userMenuList li .menuTit {
	font-size: 13px;
	color: var(--rr-ink-2);
	letter-spacing: -.03em;
}

/* 2-2. 푸터 공지사항 줄 - dt/dd 가 float 이라 dl 높이가 0 이었다 */
html.page_m_index.page_m_index .footer .notiBox.clfix {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rr-line-dark);
}
html.page_m_index.page_m_index .footer .notiBox.clfix::after { content: none; }
html.page_m_index.page_m_index .footer .notiBox dt {
	float: none;
	width: auto;
	margin: 0;
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--rr-ink-3);
}
html.page_m_index.page_m_index .footer .notiBox dd {
	float: none;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
}
/* 등록된 공지가 없으면 줄 자체를 숨긴다(빈 회색줄이 남아 있었다) */
html.page_m_index.page_m_index .footer .notiBox:has(dd:empty) { display: none; }

/* 2-3. 푸터 링크줄 - li 가 float 이라 ul 높이 0 → 아래 로고와 겹쳐 보였다 */
html.page_m_index.page_m_index .footer ul.foot_link.clfix {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: auto;
	margin-top: 18px;
}
html.page_m_index.page_m_index .footer ul.foot_link.clfix::after { content: none; }
html.page_m_index.page_m_index .footer .foot_link li {
	float: none;
	width: auto;
	flex: 0 0 auto;
	padding: 2px 12px;
	border-right: 1px solid var(--rr-line-dark);
	line-height: 1.2;
}
html.page_m_index.page_m_index .footer .foot_link li:first-child { padding-left: 0; }
html.page_m_index.page_m_index .footer .foot_link li:last-child { border-right: 0; }
html.page_m_index.page_m_index .footer .foot_link li.privacyBtn { width: auto; }
html.page_m_index .footer .foot_link li a {
	font-size: 13.5px;
	letter-spacing: -.03em;
	transition: color var(--rr-ease);
}
html.page_m_index .footer .foot_link li a:active { color: var(--rr-primary-2); }

/* 2-4. 푸터 전반 정돈 */
html.page_m_index .footer { padding: 24px 20px 34px; line-height: 1.5; }
html.page_m_index .footer .footLogo { margin-top: 22px; }
/* 원본 filter 가 contrast(0%) 라 로고가 짙은 배경(#414141)에 묻히는 회색으로 나왔다.
   깔끔한 흰색으로 바꿔 대비를 확보한다. */
html.page_m_index.page_m_index .footer .footLogo img {
	filter: brightness(0) invert(1);
	opacity: .92;
}
html.page_m_index .footer .foot_cont { margin-top: 18px; font-size: 12.5px; line-height: 1.75; }
html.page_m_index .footer .foot_cont .bizBtn {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border: 1px solid var(--rr-line-dark);
	border-radius: var(--rr-radius-pill);
	font-size: 11.5px;
	line-height: 1.6;
	transition: background-color var(--rr-ease), border-color var(--rr-ease);
}
html.page_m_index .footer .foot_cont .bizBtn:active {
	background: rgba(255,255,255,.12);
	border-color: #7A7A7A;
}
html.page_m_index .footer .foot_cont .copyright { margin-top: 22px; font-size: 11.5px; color: #8A8A8A; }

/* --------------------------------------------------------------------------
   3. 카테고리 탭 - 4열 고정이라 5번째(할인기획전)만 둘째 줄로 떨어지고
      빈 칸 3개가 테두리째 남아 있었다. 항목 수와 무관하게 한 줄로 흐르게 한다.
   -------------------------------------------------------------------------- */
html.page_m_index.page_m_index .category-menu {
	border-top: 1px solid var(--rr-line);
	border-bottom: 1px solid var(--rr-line);
	background: #fff;
}
html.page_m_index.page_m_index .category-menu ul {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-top: 0;
	border-left: 0;
}
html.page_m_index.page_m_index .category-menu ul::-webkit-scrollbar { display: none; }
html.page_m_index.page_m_index .category-menu ul li {
	flex: 1 0 auto;
	min-width: 0;
	border-right: 1px solid var(--rr-line);
	border-bottom: 0;
	line-height: 42px;
}
html.page_m_index.page_m_index .category-menu ul li:last-child { border-right: 0; }
html.page_m_index .category-menu ul li > a {
	padding: 0 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rr-ink-2);
	letter-spacing: -.03em;
	transition: color var(--rr-ease), background-color var(--rr-ease);
}
html.page_m_index .category-menu ul li > a:active { background: #F7F8FA; color: var(--rr-ink); }

/* --------------------------------------------------------------------------
   4. 라인(테두리·구분선) 색상 통일
   템플릿마다 #eee / #ddd / #e5e5e5 가 섞여 있었다. 한 색으로 맞춘다.
   -------------------------------------------------------------------------- */
html.page_m_index .weekPdWrap .pdBox,
html.page_m_index .brandOnly .pdBox,
html.page_m_index .good-price-wrap .pdBox,
html.page_m_index .mdRecomWrap .pdBox,
html.page_m_index .addPdWrap .pdBox { border-color: var(--rr-line); }

html.page_m_index .head_top { border-bottom: 1px solid var(--rr-line); }

/* --------------------------------------------------------------------------
   5. 버튼 - 라운딩 + 음영 + 트랜지션
   -------------------------------------------------------------------------- */
html.page_m_index.page_m_index .timesale-wrap .buy-box a {
	display: block;
	border-radius: var(--rr-radius);
	box-shadow: var(--rr-shadow);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease), filter var(--rr-ease);
}
html.page_m_index.page_m_index .timesale-wrap .buy-box a:active {
	transform: translateY(1px);
	box-shadow: var(--rr-shadow-sm);
	filter: brightness(1.12);
}
html.page_m_index .timesale-card {
	box-shadow: var(--rr-shadow-sm);
	transition: box-shadow var(--rr-ease);
}

/* 상품 카드 위의 장바구니/좋아요 원형 버튼 */
html.page_m_index.page_m_index .cart-btn,
html.page_m_index.page_m_index .btn_cart,
html.page_m_index.page_m_index .pdBtnBox a {
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_index.page_m_index .cart-btn:active,
html.page_m_index.page_m_index .btn_cart:active,
html.page_m_index.page_m_index .pdBtnBox a:active {
	transform: scale(.94);
	box-shadow: none;
}

/* 더보기 계열 버튼 */
html.page_m_index.page_m_index .more-btn,
html.page_m_index.page_m_index a.moreBtn,
html.page_m_index.page_m_index .moreBtnWrap a {
	border-radius: var(--rr-radius-pill);
	border: 1px solid var(--rr-line-strong);
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease), background-color var(--rr-ease);
}
html.page_m_index.page_m_index .more-btn:active,
html.page_m_index.page_m_index a.moreBtn:active,
html.page_m_index.page_m_index .moreBtnWrap a:active {
	transform: translateY(1px);
	box-shadow: none;
	background: #F7F8FA;
}

/* 상품 이미지 - 라운딩 통일 */
html.page_m_index .weekPdWrap .pdImg a,
html.page_m_index .brandOnly .pdImg a,
html.page_m_index .good-price-wrap .pdImg a,
html.page_m_index .mdRecomWrap .pdImg a,
html.page_m_index .addPdWrap .pdImg a {
	border-radius: var(--rr-radius-sm);
	overflow: hidden;
}

/* 우하단 1:1 채팅 버튼 - 음영/전환 정돈 */
html.page_m_index .leftChatWrap a {
	box-shadow: var(--rr-shadow-md);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_index .leftChatWrap a:active {
	transform: translateY(1px);
	box-shadow: var(--rr-shadow);
}

/* 하단 고정 탭 - 상단 라인 통일 + 아이콘 눌림 반응 */
html.page_m_index .bfmWrap { border-top: 1px solid var(--rr-line); }
html.page_m_index .bfmWrap a { transition: opacity var(--rr-ease); }
html.page_m_index .bfmWrap a:active { opacity: .55; }

/* TOP 버튼 */
html.page_m_index .float_btn_wrap a {
	box-shadow: var(--rr-shadow);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_index .float_btn_wrap a:active { transform: translateY(1px); box-shadow: var(--rr-shadow-sm); }

/* --------------------------------------------------------------------------
   6. 항상 비어 있는 SNS 섹션 숨김
   인스타그램이 _sharedData / ?__a=1 을 폐지해 연동이 끊겼다.
   목록(#instar_box)에 슬라이드가 하나도 없으면 제목과 계정명만 남으므로 섹션째 숨긴다.
   연동이 복구되면 li 가 생겨 자동으로 다시 보인다.
   ※ :empty 는 못 쓴다 - 템플릿이 ul 안에 주석/공백 노드를 남겨둬서 항상 false 다(실측).
   -------------------------------------------------------------------------- */
html.page_m_index .snsListWrap:not(:has(#instar_box > li)) { display: none; }

/* --------------------------------------------------------------------------
   7. 섹션 제목 타이포 정돈
   -------------------------------------------------------------------------- */
html.page_m_index .mainTitle,
html.page_m_index .listTit .tit {
	letter-spacing: -.02em;
	color: var(--rr-ink);
}
html.page_m_index .mainTitle .subTit {
	margin-left: 8px;
	font-size: 13px;
	font-weight: 400;
	color: var(--rr-ink-3);
	letter-spacing: -.02em;
}