@charset "utf-8";
/* ==========================================================================
   rroys 상품상세 전용 스타일  (/data/rroys/css/content_v2.css)
   2026-07-25  요청 8건 반영

   ※ 별도 파일로 분리한 이유
      /data/rroys/css/common.css 는 여러 작업 세션이 동시에 편집해 서로 덮어써서
      같은 작업이 두 번 유실됐다. 상품상세 요청분은 이 파일에 둔다.
      (content.asp 에서 common.css 뒤에 로드 → 여기 규칙이 최종 승자)

   ① 불필요한 구분선(.d_line) 제거
   ② 할인율 배지 배경 제거
   ③ 정보영역 회색 배경 제거 (+적립금 0원 행 숨김은 content.asp 에서 처리)
   ④ 상품명 위 "지금까지 N명이 관심을 보였어요" 배지
   ⑤ 옵션 셀렉트박스 리디자인
   ⑥ 같은 카테고리 상품 위 구분선 제거
   ⑦ 탭 글자 확대 + 탭 폭 = 상세컨텐츠 폭 고정
   ⑧ 우측 따라다니는 레이어 : 중복 테두리 제거 + 셀렉트 리디자인
   ========================================================================== */

:root {
	--ct-primary:      var(--sitecolor1, #FF0051);
	--ct-ink:          #17181C;
	--ct-ink-2:        #4B5158;
	--ct-ink-3:        #8B9199;
	--ct-ink-4:        #B4B9C0;
	--ct-line:         #E7E9ED;
	--ct-line-strong:  #D3D7DE;
	--ct-bg-soft:      #F7F8FA;
	--ct-radius:       12px;
	--ct-radius-sm:    8px;
	--ct-shadow-sm:    0 1px 2px rgba(23,24,28,.05), 0 2px 8px rgba(23,24,28,.05);
	--ct-shadow-md:    0 6px 20px rgba(23,24,28,.10);
	--ct-tr:           .2s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   ⑪ 상품상세 전면 스킨 (이미지영역 / 상품정보 / 관련상품 / 탭 / 쿠폰 / 폼)
      [전체적용 2026-07-26]

   원래 rroys 전용 파일(/data/rroys/css/common.css)에만 있어서 로이스닷컴에서만
   적용되고 다른 분양몰은 옛 디자인이었다. 마크업(.productInfo / .tab01 /
   #area_rolling / .quickOption …)은 전 분양몰 공용 소스이므로 여기로 옮긴다.

   ※ 배치 위치가 중요하다 — rroys 의 로딩 순서가
     common.css(이 규칙들) -> site_v2.css -> content_v2.css(1~9) 였으므로
     이 블록은 1~9 **앞**에 두어야 rroys 와 우선순위가 같아진다.
     뒤에 두면 이 규칙들이 1~9 를 덮어써 rroys 와 다른 화면이 된다.

   ※ 제외 — .location(상단경로) · .rightQuick · .leftFloating · .today_goods ·
     .btn_top / .quick_top 은 상품상세 전용이 아니라 전 페이지에 걸리는 요소라
     옮기지 않았다. 정보영역(.option_section_wrap)은 다른 세션이 같은 시각
     20 블록으로 이관해 중복을 피했다.
   ※ :root 토큰과 Pretendard 선언은 이미 /css/site_v2.css 로 전역 승격돼 있다.
   ========================================================================== */
/* ==========================================================================
   2-0. 카드 바깥 여백 (2026-09-01 요청)
      원본 공용 CSS(commonTotal.css)는 .productInfo 에 패딩이 전혀 없고
      (.img_box 가 float:left width:500px 로 카드 좌상단에 바로 붙음),
      .infoWrap .infoBox 도 padding:25px 0px 25px 40px 로 우측 패딩이 0이다.
      그래서 상품이미지(좌)는 위/왼쪽이, 옵션·선택상품 영역(우)은 오른쪽이
      카드 바깥 테두리에 거의 닿아 보였다. 카드 전체에 여백을 주고, 우측
      옵션영역에도 좌측(40px)과 맞춰 오른쪽 패딩을 준다.
      ※ .productInfo/.infoBox 는 원래 width 를 지정하지 않는(자동으로 부모폭을
      채우는) 블록이라, 패딩을 더해도 넘치지 않고 안쪽 콘텐츠 폭이 그만큼
      줄어드는 표준 동작이라 다른 레이아웃(500px 폭 이미지 ↔ padding-left:500px
      커플링)이 깨지지 않는다. */
.productInfo { padding: 24px 0 0 24px; }
.productInfo .infoWrap .infoBox { padding-right: 40px; }

/* ==========================================================================
   2. 상품 이미지 영역
   ========================================================================== */
.productInfo .img_box #mainImg li span.cutImgBox2 {
	border-radius: var(--rr-radius);
	overflow: hidden;
	background: var(--rr-bg-soft);
	box-shadow: var(--rr-shadow-sm);
}
.productInfo .img_box #mainImg li img { border-radius: var(--rr-radius); }

/* 썸네일 */
.productInfo .img_box .simg .item span {
	display: block;
	border-radius: var(--rr-radius-sm);
	overflow: hidden;
	background: var(--rr-bg-soft);
	transition: box-shadow var(--rr-tr), transform var(--rr-tr);
}
.productInfo .img_box .simg .item img { border-radius: var(--rr-radius-sm); }
.productInfo .img_box .simg .item:hover span { transform: translateY(-2px); box-shadow: var(--rr-shadow-sm); }
.productInfo .img_box .simg .item .ck_border { border-radius: var(--rr-radius-sm); }
.productInfo .img_box .simg .swiper-slide-active span {
	box-shadow: 0 0 0 2px var(--rr-primary);
}
/* 좌우 화살표 */
.productInfo .img_box .swiper-button-next,
.productInfo .img_box .swiper-button-prev {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--rr-line);
	box-shadow: var(--rr-shadow-sm);
	display: flex; align-items: center; justify-content: center;
	transition: box-shadow var(--rr-tr), border-color var(--rr-tr);
}
.productInfo .img_box .swiper-button-next:hover,
.productInfo .img_box .swiper-button-prev:hover {
	border-color: var(--rr-line-strong);
	box-shadow: var(--rr-shadow-md);
}
.productInfo .img_box .swiper-button-next .material-icons,
.productInfo .img_box .swiper-button-prev .material-icons { font-size: 20px; color: var(--rr-ink-2); }

/* ==========================================================================
   3. 상품 정보(우측)
   ========================================================================== */
.productInfo .infoBox h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--rr-ink);
}
.productInfo .infoBox .goods_subT { color: var(--rr-ink-3); font-size: 14px; }

/* 정가 / 판매가 */
.productInfo .infoBox .prd_mkprc,
.productInfo .infoBox .prd_mkprc * {
	color: var(--rr-ink-4);
	font-size: 16px;
	text-decoration: line-through;
}
.productInfo .infoBox .prd_prc em {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--rr-ink);
}
.productInfo .infoBox .prd_prc .discountVal {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--rr-primary-soft);
	color: var(--rr-primary);
	font-size: 13px;
	font-weight: 700;
	vertical-align: middle;
}

/* 구분선 */
.productInfo .infoBox .d_line {
	height: 1px;
	background: var(--rr-line);
	border: 0;
}

/* 배송비·적립금 등 정보 리스트 */

/* 정보영역(.option_section_wrap : 배송비·적립금 2단 + .ico_point 배지)은
   다른 세션이 같은 시각 ⑳ 블록으로 이미 이관했다 — 중복을 피해 여기서는 제외한다. */

.productInfo .optList .optionInner { border: 0; }
.productInfo .optList .selected_option {
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	/* 수량조절(.count_control)이 absolute(top:39px)라 하단 여백을 넉넉히 줘야
	   카드 테두리가 잘리지 않는다 */
	padding: 16px 18px 30px;
	box-shadow: var(--rr-shadow-sm);
}
.productInfo .optList .selected_option .neme,
.productInfo .optList .selected_option .pTit { font-size: 14px; color: var(--rr-ink-2); }
.productInfo .optList .count_control {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--rr-line-strong);
	border-radius: var(--rr-radius-xs);
	overflow: hidden;
	background: #fff;
}
.productInfo .optList .count_control .btn_minus,
.productInfo .optList .count_control .btn_plus {
	width: 30px;
	background: #fff;
	border: 0;
	cursor: pointer;
	transition: background var(--rr-tr);
}
.productInfo .optList .count_control .btn_minus:hover,
.productInfo .optList .count_control .btn_plus:hover { background: var(--rr-bg-soft); }
.productInfo .optList .count_control input {
	border: 0;
	border-left: 1px solid var(--rr-line);
	border-right: 1px solid var(--rr-line);
	text-align: center;
	font-weight: 600;
	color: var(--rr-ink);
}
.productInfo .optList .selected_option .prc em { font-weight: 700; color: var(--rr-ink); }

/* 총 상품금액 */
.productInfo .total_price,
.productInfo .totalPrice,
.productInfo .sum_price {
	border-top: 1px solid var(--rr-line);
}

/* 공유 버튼 (원래 inline-block + padding 구조 유지) */

/* ==========================================================================
   5. 관련 상품 롤링 (같은 카테고리 인기상품 / 함께 사용하면 좋은 상품)
   ========================================================================== */
#area_rolling {
	margin: 44px 0 8px !important;
	padding: 28px 0 8px;
	border-top: 1px solid var(--rr-line);
}
#area_rolling .top_ul::after { background-color: var(--rr-line) !important; }
#area_rolling .rol_top {
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--rr-ink);
	margin: 4px 0 22px !important;
}
/* slick 기본 CSS의 .slick-slide{height:100%}가 슬라이드 높이를 과도하게 부풀려
   상품 카드 아래에 600px 가까운 빈 공간이 생기던 문제 수정 */
#area_rolling .slick-slide { height: auto !important; }

/* 카드 폭이 슬라이드 폭과 달라 좌우 정렬이 어긋나던 문제 수정 */
#area_rolling .sub_ul .slideBox .slick-list .innerSet {
	width: auto !important;
	padding: 0 7px;
	text-align: center !important;
}
#area_rolling .sub_ul .goodsimg,
#area_rolling .sub_ul .bgImg {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	border-radius: var(--rr-radius-sm);
	background-color: var(--rr-bg-soft);
	background-size: cover;
	background-position: center;
	margin-bottom: 12px !important;
	transition: transform var(--rr-tr), box-shadow var(--rr-tr);
}
#area_rolling .sub_ul .innerSet a:hover .goodsimg,
#area_rolling .sub_ul .innerSet a:hover .bgImg {
	transform: translateY(-3px);
	box-shadow: var(--rr-shadow-md);
}
#area_rolling .sub_ul .goods_title {
	font-size: 13.5px !important;
	color: var(--rr-ink-2);
	text-align: center;
	line-height: 1.45em !important;
	height: 2.9em !important;
	margin-bottom: 6px !important;
}
#area_rolling .sub_ul .innerSet a:hover .goods_title { color: var(--rr-primary); }
#area_rolling .sub_ul .prd_prc del { color: var(--rr-ink-4); font-size: 12px; }
#area_rolling .sub_ul .rolling_price {
	font-size: 15px;
	font-weight: 700;
	color: var(--rr-ink) !important;
}
/* 페이지 dot */
#area_rolling .slick-dots { margin-top: 22px !important; }
#area_rolling .slick-dots li {
	width: 7px !important; height: 7px !important;
	background-color: var(--rr-line-strong) !important;
	transition: width var(--rr-tr), background-color var(--rr-tr);
}
#area_rolling .slick-dots li.slick-active {
	width: 20px !important;
	border-radius: 999px !important;
	background-color: var(--rr-primary) !important;
}

/* ==========================================================================
   6. 탭 (상세정보 / 상품문의 / 배송·교환·반품 / 상품평)
   ========================================================================== */
.tab01 {
	border-bottom: 1px solid var(--rr-line) !important;
	background: #fff !important;
}
.tab01 > a {
	background: #fff !important;
	border-bottom: 2px solid transparent !important;
	font-size: 15px !important;
	font-weight: 500;
	color: var(--rr-ink-3) !important;
	transition: color var(--rr-tr), border-color var(--rr-tr), background-color var(--rr-tr);
}
.tab01 > a:hover { color: var(--rr-ink) !important; background: var(--rr-bg-soft) !important; }
.tab01 > a.on {
	color: var(--rr-ink) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--rr-primary) !important;
}
.tab01_cont { padding-top: 8px; }

/* 상세정보 본문 */
.contentZoom { line-height: 1.7; color: var(--rr-ink-2); }
.contentZoom img { max-width: 100%; height: auto; border-radius: var(--rr-radius-xs); }
/* 불러오지 못한 이미지 안내 (content.asp의 onerror 폴백이 삽입) */
.contentZoom .goodsImgFailNotice {
	border-color: var(--rr-line) !important;
	border-radius: var(--rr-radius-sm) !important;
	background: var(--rr-bg-soft) !important;
	color: var(--rr-ink-3) !important;
}
.contentAddView {
	display: inline-flex; align-items: center; gap: 6px;
	height: 46px; padding: 0 26px;
	border: 1px solid var(--rr-line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--rr-ink-2);
	font-size: 14px; font-weight: 600;
	cursor: pointer;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), border-color var(--rr-tr);
}
.contentAddView:hover { transform: translateY(-2px); box-shadow: var(--rr-shadow-md); border-color: var(--rr-primary); color: var(--rr-primary); }

/* 상품정보고시 / 배송 안내 테이블 */
.tab01_cont table.content_category,
.tab01_cont table.tb,
.tab01_cont table.trans_table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	overflow: hidden;
	font-size: 13px;
}
.tab01_cont table.content_category th,
.tab01_cont table.tb th,
.tab01_cont table.trans_table th {
	background: var(--rr-bg-soft) !important;
	border-bottom: 1px solid var(--rr-line) !important;
	border-right: 1px solid var(--rr-line);
	color: var(--rr-ink-2);
	font-weight: 600;
	padding: 11px 14px;
}
.tab01_cont table.content_category td,
.tab01_cont table.tb td,
.tab01_cont table.trans_table td {
	border-bottom: 1px solid var(--rr-line) !important;
	color: var(--rr-ink-2);
	padding: 11px 14px;
	line-height: 1.6;
}
.tab01_cont table tr:last-child th,
.tab01_cont table tr:last-child td { border-bottom: 0 !important; }

/* 상품평 / 상품문의 목록 */
table.board_list {
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid var(--rr-line-strong);
	font-size: 13.5px;
}
table.board_list th {
	background: var(--rr-bg-soft) !important;
	border-bottom: 1px solid var(--rr-line) !important;
	color: var(--rr-ink-2);
	font-weight: 600;
	padding: 12px 8px;
}
table.board_list td {
	border-bottom: 1px solid var(--rr-line) !important;
	color: var(--rr-ink-2);
	padding: 14px 8px;
}
table.board_list tbody tr { transition: background-color var(--rr-tr); }
table.board_list tbody tr:hover { background: var(--rr-bg-soft); }

/* 상품평 요약 박스 */
.tab01_cont .opinion_total,
.tab01_cont .product_opinion_top {
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius) !important;
	background: var(--rr-bg-soft) !important;
}

/* ==========================================================================
   7. 공통 버튼 (상품평쓰기 / 상품문의하기 등)
   ========================================================================== */
.tab01_cont .btn_yellow01,
.tab01_cont .btn_gray01,
.tab01_cont a.btn_write,
.tab01_cont .btnWrite,
#pop_div .btn_yellow01,
#pop_div .btn_gray01 {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 108px; height: 44px; padding: 0 22px;
	border: 0;
	border-radius: var(--rr-radius-xs) !important;
	font-size: 14px; font-weight: 700;
	cursor: pointer;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr);
}
.tab01_cont .btn_yellow01,
#pop_div .btn_yellow01 { background: var(--rr-primary) !important; color: #fff !important; }
.tab01_cont .btn_gray01,
#pop_div .btn_gray01 { background: #fff !important; color: var(--rr-ink-2) !important; border: 1px solid var(--rr-line-strong) !important; }
.tab01_cont .btn_yellow01:hover,
.tab01_cont .btn_gray01:hover,
#pop_div .btn_yellow01:hover,
#pop_div .btn_gray01:hover { transform: translateY(-2px); box-shadow: var(--rr-shadow-md); }
.tab01_cont .btn_yellow01:active,
.tab01_cont .btn_gray01:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm); }


/* --- 우측 옵션요약 레이어(.quickOption) : 상품상세 전용 부분만 --- */
.quickOption {
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius) !important;
	background: #fff !important;
	box-shadow: var(--rr-shadow-sm);
}
.quickOption .btm_btnArea a,
.quickOption .btn_area a {
	border-radius: var(--rr-radius-xs) !important;
	font-weight: 700;
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr);
	box-shadow: var(--rr-shadow-sm);
}
.quickOption .btm_btnArea a:hover,
.quickOption .btn_area a:hover { transform: translateY(-1px); box-shadow: var(--rr-shadow-md); }

/* ==========================================================================
   9. 쿠폰 영역 / 팝업
   ========================================================================== */
.detailCouponWrap {
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius-sm) !important;
	background-color: var(--rr-bg-soft) !important;
}
.detailCouponPop .popIn,
.deliAskPopBox,
.layerFix {
	border-radius: var(--rr-radius) !important;
	box-shadow: var(--rr-shadow-lift) !important;
}

/* ==========================================================================
   10. 폼 요소 공통 (라인색 통일 + 포커스 링)
   ========================================================================== */
.productInfo input[type="text"],
.productInfo input[type="number"],
.productInfo select,
.productInfo textarea,
.tab01_cont input[type="text"],
.tab01_cont input[type="password"],
.tab01_cont select,
.tab01_cont textarea {
	border: 1px solid var(--rr-line-strong);
	border-radius: var(--rr-radius-xs);
	transition: border-color var(--rr-tr), box-shadow var(--rr-tr);
}
.productInfo input[type="text"]:focus,
.productInfo select:focus,
.productInfo textarea:focus,
.tab01_cont input[type="text"]:focus,
.tab01_cont input[type="password"]:focus,
.tab01_cont select:focus,
.tab01_cont textarea:focus {
	outline: 0;
	border-color: var(--rr-primary);
	box-shadow: 0 0 0 3px rgba(23,24,28,.10);                                      /* 중립 폴백 */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-primary, var(--sitecolor1)) 12%, transparent);
}

/* 접근성 : 키보드 포커스 표시 */
.productInfo a:focus-visible,
.tab01 a:focus-visible,
#area_rolling a:focus-visible {
	outline: 2px solid var(--rr-primary);
	outline-offset: 2px;
	border-radius: var(--rr-radius-xs);
}


/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
	.productInfo .btn_area > a,
	#area_rolling .sub_ul .goodsimg,
	#area_rolling .sub_ul .bgImg,
	.contentAddView { transition: none !important; }
	.productInfo .btn_area > a:hover { transform: none !important; }
}


/* ==========================================================================
   ① 상품 정보영역의 구분선 전부 제거
      (가격 아래 / 정보박스 아래 2줄 / 옵션 아래 / 총금액 아래)
   ========================================================================== */
.productInfo .infoBox .d_line,
.productInfo .infoBox hr,
.productInfo .optSel .optSelInner,
.productInfo .infoBox .selected_option_wrap,
.productInfo .infoBox .total_price,
.productInfo .infoBox .btn_area { border-top: 0 !important; border-bottom: 0 !important; }
.productInfo .infoBox .d_line { display: none !important; }

/* 구분선을 지운 만큼 블록 간격으로 리듬을 만든다 */
.productInfo .infoBox .option_section_wrap { margin: 18px 0 6px !important; }
.productInfo .infoBox .optSel { margin-top: 6px !important; }

/* ==========================================================================
   ② 할인율 배지 : 배경 없애고 텍스트만
   ========================================================================== */
.productInfo .infoBox .prd_prc .discountVal {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin-left: 12px !important;
	border-radius: 0 !important;
	color: var(--ct-primary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}
.productInfo .infoBox .prd_prc .discountVal .iconfont { font-size: 12px; }

/* ==========================================================================
   ③ 금액 밑 정보영역 : 회색 박스 배경/테두리 제거
   ========================================================================== */
.productInfo .infoBox .option_section_wrap {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 2px 0 !important;
}
.productInfo .infoBox .option_section_wrap .option_section { padding: 6px 0 !important; }
.productInfo .infoBox .option_section_wrap .option_section dt { color: var(--ct-ink-3); }
.productInfo .infoBox .option_section_wrap .option_section dd { color: var(--ct-ink-2); }

/* ③-1. 관리자메모 숨김 — 관리자만 보이던 줄이라 고객 화면엔 영향 없음(2026-09-01 요청).
   display:none 이 박스 전체(margin 포함)를 흐름에서 빼주므로 그만큼 아래 옵션들이
   자동으로 당겨져 올라온다 — 옵션이 많아 구매카드가 길어질 때 버튼이 화면 밖으로
   밀려나는 걸 조금이라도 줄여준다. */
.productInfo .infoBox .adminMemoBox { display: none !important; }

/* ③-2. .option_section_wrap 빈 여백 정리 (2026-09-01 요청)
   이 wrap 안에는 브랜드/판매자쿠폰(코드에서 통째로 주석 처리됨)과 관리자메모(위 ③-1
   에서 숨김)뿐이라, 지금 이 상품상세에서는 실제로 아무것도 안 보이는데도 wrap 자체의
   margin(18px 0 6px)+padding(2px 0)이 그대로 남아 "크기" 옵션 위에 불필요하게 큰
   빈 공간(구매카드가 pd-fcard 로 뜬 상태에서 실측 약 76px)을 만들고 있었다.
   내용이 없으니 wrap 자체를 통째로 숨겨 그 공간을 접는다. */
.productInfo .infoBox .option_section_wrap { display: none !important; }

/* ==========================================================================
   ④ 상품명 위 관심 배지 — "둥둥" 떠 있는 느낌
   ========================================================================== */
.productInfo .infoBox .goodsInterest {
	display: block;
	margin: 0 0 12px;
	line-height: 1;
	animation: ctFloat 2.6s ease-in-out infinite;
}
.productInfo .infoBox .goodsInterest > span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid var(--ct-line-strong);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--ct-shadow-sm);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ct-ink-2);
	white-space: nowrap;
}
.productInfo .infoBox .goodsInterest em {
	font-style: normal;
	font-weight: 800;
	color: var(--ct-primary);
	margin: 0 2px;
}
@keyframes ctFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* 2026-08-31 [panamedic 전용] : "N명이 본 상품입니다." 배지를 상품명 위(.infoBox 안)가
   아니라 대표이미지 하단에 겹쳐 보이도록 배치해 달라는 요청. 위 .goodsInterest 규칙은
   .infoBox 안에서만 걸리는 선택자라 이 위치(img_box #mainImg li)에는 안 먹혀서, 같은
   알약(pill) 모양을 새 클래스(.pd-view-badge)로 독립적으로 만든다.
   #mainImg li 에 position:relative 를 줘서, 그 안의 이 배지가 이미지 박스 기준으로
   하단 중앙에 절대배치(position:absolute)되게 한다.
   ★2026-09-01 : 이 블록이 08-31 당일 늦게 통째로 유실돼(shopHasDetailV2 도 같이 True 로
   되돌아감) "구매중이에요" 옛 배지가 다시 나타났던 것을 발견해 재복구함.
   되돌리기 : 이 블록 전체를 지운다(product/content.asp 의 strViewBadge 조립도 같이). */
.productInfo .img_box #mainImg li { position: relative; }
.pd-view-badge {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 5;
	animation: pd-view-bob 2.8s ease-in-out infinite;
}
/* 2026-08-31(추가) [panamedic 전용] : endedit.com은 이 배지가 위아래로 살살 떠 있는
   모션(ee-pd-bob-c, 2.8s ease-in-out 무한반복, 가운데정렬 translateX(-50%)를 유지한 채
   translateY 만 0↔-5px)이 있는데 panamedic은 고정돼 있었다는 지적 — 같은 값 그대로
   실측해 적용한다. 가운데정렬용 translateX(-50%)를 keyframe 안에서도 계속 유지해야
   애니메이션 중에 배지가 좌우로 튀지 않는다(따로 transform 두 개를 쓸 수 없어 한 값에
   합쳐 넣음). 되돌리기 : .pd-view-badge 의 animation 줄과 아래 @keyframes 를 지운다. */
@keyframes pd-view-bob {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(-5px); }
}
/* 2026-08-31(추가) [panamedic 전용] : 위 흰 알약 모양을 endedit.com 상품상세의
   "N명이 보고 있어요" 배지(어두운 반투명 알약 + 초록 점)와 같은 모양으로 다시 꾸민다
   (위치는 그대로 두고 모양만). endedit 실측: background rgba(23,23,25,.58),
   글자 흰색 13px/600, border-radius 1000px, 높이 30px, 점(.ee-pd-live-dot) + 글자
   가로배치(gap 6px). 되돌리기 : 아래 span/em/dot 규칙만 위 흰색 버전으로 되돌린다. */
.pd-view-badge > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(23, 23, 25, .58);
	backdrop-filter: blur(2px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}
.pd-view-badge .pd-view-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3ecf6c;
	flex: 0 0 auto;
}
.pd-view-badge em {
	font-style: normal;
	font-weight: 700;
	color: #fff;
	margin: 0 2px;
}

/* ==========================================================================
   ⑤ 옵션 셀렉트박스 (jQuery UI selectmenu)
      버튼 + body 로 빠지는 드롭다운 목록을 함께 손본다
   ========================================================================== */
.productInfo .ui-selectmenu-button.ui-button,
.quickOption .ui-selectmenu-button.ui-button {
	width: 100% !important;
	height: 52px !important;
	padding: 0 44px 0 16px !important;
	box-sizing: border-box !important;
	border: 1px solid var(--ct-line-strong) !important;
	border-radius: var(--ct-radius-sm) !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	outline: 0 !important;
	position: relative;
	display: block;
	transition: border-color var(--ct-tr), box-shadow var(--ct-tr);
}
.productInfo .ui-selectmenu-button.ui-button:hover,
.quickOption .ui-selectmenu-button.ui-button:hover { border-color: var(--ct-ink-4) !important; }
.productInfo .ui-selectmenu-button.ui-selectmenu-button-open,
.quickOption .ui-selectmenu-button.ui-selectmenu-button-open {
	border-color: var(--ct-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sitecolor1, #FF0051) 12%, transparent) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.productInfo .ui-selectmenu-text,
.quickOption .ui-selectmenu-text,
.productInfo .ui-selectmenu-button.ui-button .ui-selectmenu-text,
.quickOption .ui-selectmenu-button.ui-button .ui-selectmenu-text {
	/* ★2026-09-01 : /css/site_v2.css(전역, 이 상품상세 스킨과 무관)의
	   ".ui-selectmenu-button.ui-button .ui-selectmenu-text{line-height:38px!important}"
	   가 특이도(클래스 3개)가 더 높아 이겨버려서, 버튼 높이(52px)보다 줄높이가
	   낮아진 텍스트가 위로 쏠려 보이던 문제(예: "==홍테홍테(필수) 선택==").
	   아래 3-클래스 선택자로 특이도를 맞춰(4개) 이 카드 안에서는 항상 우리 쪽이 이기게 한다. */
	margin: 0 !important;
	line-height: 50px !important;
	font-size: 14.5px;
	color: var(--ct-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 화살표를 CSS 로 그려 이미지/폰트 아이콘 의존 제거 */
.productInfo .ui-selectmenu-icon.ui-icon,
.quickOption .ui-selectmenu-icon.ui-icon {
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	left: auto !important;
	width: 9px !important;
	height: 9px !important;
	margin: -6px 0 0 !important;
	background: none !important;
	border: solid var(--ct-ink-3);
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
	text-indent: -9999px;
	overflow: hidden;
	transition: transform var(--ct-tr), border-color var(--ct-tr);
}
.productInfo .ui-selectmenu-button-open .ui-selectmenu-icon.ui-icon,
.quickOption .ui-selectmenu-button-open .ui-selectmenu-icon.ui-icon {
	margin-top: -2px !important;
	transform: rotate(-135deg);
	border-color: var(--ct-primary);
}

/* 드롭다운 목록 (body 로 append 되므로 전역 선택자) */
.ui-selectmenu-menu .ui-menu {
	border: 1px solid var(--ct-primary) !important;
	border-top: 0 !important;
	border-radius: 0 0 var(--ct-radius-sm) var(--ct-radius-sm) !important;
	background: #fff !important;
	box-shadow: var(--ct-shadow-md) !important;
	padding: 6px !important;
	max-height: 320px !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item {
	border: 0 !important;
	border-radius: var(--ct-radius-sm) !important;
	background: transparent !important;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper {
	padding: 11px 14px !important;
	border: 0 !important;
	border-radius: var(--ct-radius-sm) !important;
	font-size: 14px;
	line-height: 1.35;
	color: var(--ct-ink-2) !important;
	background: transparent !important;
	transition: background-color var(--ct-tr), color var(--ct-tr);
}
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper:hover {
	background: var(--ct-bg-soft) !important;
	color: var(--ct-ink) !important;
	font-weight: 600;
}
.ui-selectmenu-menu .ui-menu .ui-state-disabled { opacity: .45; }

/* 옵션 라벨(있는 경우) */
.productInfo .optSel .opt_tit,
.productInfo .optSel .optTit { font-size: 13px; color: var(--ct-ink-3); margin-bottom: 6px; }

/* ==========================================================================
   ⑥ 같은 카테고리 상품 위 구분선 제거
   ========================================================================== */
#area_rolling {
	border-top: 0 !important;
	padding-top: 8px !important;
	margin-top: 30px !important;
}

/* ==========================================================================
   ⑦ 탭 : 글자 확대 + 폭을 상세컨텐츠와 항상 동일하게
      (기존엔 resizeTab() 이 로드 시점 px 을 인라인으로 박아 창 크기가 바뀌면
       탭 합계폭과 컨텐츠 폭이 어긋났다 → flex 로 항상 100% 채움)
   ========================================================================== */
.product_detail .tab01 {
	display: flex !important;
	width: 100% !important;
	height: auto !important;
	border-bottom: 1px solid var(--ct-line) !important;
	background: #fff !important;
	box-sizing: border-box;
}
.product_detail .tab01 > a {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 56px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 6px;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	background: #fff !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	letter-spacing: -0.03em;
	line-height: 1.2 !important;
	color: var(--ct-ink-3) !important;
	text-align: center;
	transition: color var(--ct-tr), border-color var(--ct-tr), background-color var(--ct-tr);
}
.product_detail .tab01 > a:hover { color: var(--ct-ink) !important; background: var(--ct-bg-soft) !important; }
.product_detail .tab01 > a.on {
	color: var(--ct-ink) !important;
	font-weight: 700 !important;
	border-bottom: 2px solid var(--ct-primary) !important;
}
.product_detail .tab01 > a span { font-size: 15px; font-weight: 600; color: var(--ct-ink-3); margin-left: 2px; }
.product_detail .tab01 > a.on span { color: var(--ct-primary); }

/* 상세 컨텐츠도 같은 박스를 쓰게 맞춘다(내부 요소가 넘치거나 모자라지 않게) */
.product_detail .tab01_cont { width: 100% !important; box-sizing: border-box; }
.product_detail .tab01_cont #tbContent,
.product_detail .tab01_cont .contentZoom { width: 100% !important; box-sizing: border-box; }
.product_detail .tab01_cont .contentZoom img,
.product_detail .tab01_cont .contentZoom table,
.product_detail .tab01_cont .contentZoom iframe { max-width: 100% !important; }

/* ==========================================================================
   ⑦-1. 탭 영역이 카드(.sub_contents) 우측 끝까지 못 미치고 오른쪽이 빈 문제
        + 탭 메뉴가 카드 좌우 테두리에 바짝 붙어보이는 문제       2026-09-01 요청
      원인 — 공용 CSS(commonTotal.css)의 ".product_detail.isAuth{margin-right:210px}"
      가 로그인(회원/관리자) 상태에서 상세정보 영역 전체 폭을 990px로 줄여놨다
      (본문 폭 1200px 인데 오른쪽에 뭔가를 위해 210px를 예비로 비워둔 규칙으로
      보이는데, panamedic에는 그 자리에 아무것도 없다 — 그래서 상세이미지(600px
      폭)가 이 990px 상자 왼쪽에 딱 붙어 있으니, 더 넓은 1200px 기준으로 보면
      오른쪽에 큰 빈 공간(약 600px)이 생겨 보였다). 공용 파일은 그대로 두고
      panamedic 전용으로 이 마진만 무효화한다.
   ========================================================================== */
.product_detail.isAuth { margin-right: 0 !important; }
/* 탭 메뉴/본문이 카드(.sub_contents) 테두리에 바짝 붙어 보이던 것도 살짝 띄운다 */
.product_detail .tab01,
.product_detail .tab01_cont { padding-left: 4px; padding-right: 4px; }
/* 상세이미지(<a><img></a>, 실제 폭 600px 고정)처럼 카드 폭보다 좁은 콘텐츠는
   왼쪽에 붙지 않고 가운데로 오도록 상세정보 탭 안에서만 가운데 정렬한다.
   (Q&A/배송 탭 등 다른 tab01_cont 는 표·목록이라 그대로 왼쪽 정렬 유지) */
#goodsInfo { text-align: center; }

/* ==========================================================================
   ⑧ 우측 따라다니는 옵션 레이어
   ========================================================================== */
/* 중복 테두리 : .quickOption 과 그 안 .inner 가 둘 다 1px 보더 → 겉테두리 제거
   + 기존 .best10_area 규칙의 bottom:0 때문에 패널 상자가 항상 화면 맨 아래까지
     늘어나 흰 배경이 카피라이트 영역을 덮었다 → 내용 높이만 차지하게 수정 */
.quickOption,
.quickOption.best10_area {
	bottom: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}
.quickOption > .inner {
	border: 1px solid var(--ct-line) !important;
	border-radius: var(--ct-radius) !important;
	background: #fff !important;
	box-shadow: var(--ct-shadow-sm);
	box-sizing: border-box;
}
/* 옵션 아래 이중 구분선 정리 */
.quickOption > .inner .optSel .optSelInner { border-bottom: 1px solid var(--ct-line) !important; }
.quickOption > .inner > div.infoBox .selected_option_wrap { border-top: 0 !important; }

.quickOption .btm_btnArea { border-top: 1px solid var(--ct-line) !important; }
.quickOption .btm_btnArea .buy_btn {
	border-radius: var(--ct-radius-sm) !important;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sitecolor1, #FF0051) 24%, transparent);
	transition: transform var(--ct-tr), box-shadow var(--ct-tr);
}
.quickOption .btm_btnArea .buy_btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--sitecolor1, #FF0051) 30%, transparent); }
.quickOption .btm_btnArea .top_area > div {
	border: 1px solid var(--ct-line-strong) !important;
	border-radius: var(--ct-radius-sm) !important;
	transition: border-color var(--ct-tr), color var(--ct-tr);
}
.quickOption .btm_btnArea .top_area > div:hover { border-color: var(--ct-primary) !important; }
.quickOption .text_box,
.quickOption .selected_area .selected_box .textOpt textarea {
	border: 1px solid var(--ct-line-strong) !important;
	border-radius: var(--ct-radius-sm) !important;
}
.quickOption .selected_area .selected_box { border-top: 1px solid var(--ct-line) !important; }
.quickOption .selected_area .opt_mid .qtt_wrap input,
.quickOption .selected_area .opt_mid .qtt_wrap > div {
	border-color: var(--ct-line-strong) !important;
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
	.productInfo .infoBox .goodsInterest { animation: none !important; }
	.product_detail .tab01 > a,
	.quickOption .btm_btnArea .buy_btn,
	.productInfo .ui-selectmenu-button.ui-button { transition: none !important; }
	.quickOption .btm_btnArea .buy_btn:hover { transform: none !important; }
}

/* ==========================================================================
   ⑨ 옵션 선택 후 나타나는 "선택상품" 박스
      2026-07-25 추가 요청분
      - 아주 옅은 회색 배경 / 테두리 없음(형태는 음영으로만 구분)
      - 폭을 위 옵션 셀렉트박스와 동일하게(기존 좌25·우15 인셋 제거)
      - 상하좌우 전체 음영
   ※ 이 블록은 원래 별도 파일로 올렸다가 content_v2.css 를 통째로 덮어써
      ①~⑧ 이 유실됐다. 같은 사고 방지를 위해 이 파일 안으로 합친다.
   ========================================================================== */
.selected_option_wrap.optList .selected_option {
	margin: 0 !important;
	width: auto !important;
	box-sizing: border-box !important;
	/* 더 옅은 회색 */
	background: #FAFBFC !important;
	/* 테두리 제거 — 경계는 음영으로만 */
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 0 12px rgba(23, 24, 28, .12), 0 2px 6px rgba(23, 24, 28, .09) !important;
}
/* 기존 :first-child 2px 상단선 규칙도 함께 제거 */
.selected_option_wrap.optList .selected_option:first-child {
	border: 0 !important;
	border-top: 0 !important;
}

/* ==========================================================================
   ⑩ 선택상품 박스 : 라운딩 모서리에 비치던 사각 테두리 색 제거
      원인 = 바깥 래퍼 .optionInner 에 1px solid #c4c4c4 사각 보더가 있어
             안쪽 카드의 둥근 모서리 밖으로 회색 선이 삐져나와 보였다.
   ========================================================================== */
.selected_option_wrap.optList,
.selected_option_wrap.optList .optionInner {
	border: 0 !important;
	border-top: 0 !important;
	background: transparent !important;
}
/* 여러 조합을 담았을 때 카드끼리 붙지 않도록 간격 */
.selected_option_wrap.optList .selected_option + .selected_option { margin-top: 10px !important; }

/* ==========================================================================
   ⑪ 옵션 선택 : 셀렉트박스 → 버튼(칩) 펼침
      /data/rroys/js/content_v2.js 가 jQuery UI selectmenu 의 메뉴 DOM을
      미러링해 버튼을 그린다(재고·품절·옵션가·조합숨김 그대로 반영).
   ========================================================================== */
/* 원본 select 와 selectmenu 버튼은 화면에서만 감춘다(로직은 그대로 사용) */
.optSel select.select_fild.rr-opt-src { display: none !important; }
.ui-selectmenu-button.rr-opt-hidebtn { display: none !important; }

.rr-optg { margin: 0 0 16px; }
.rr-optg-tit {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ct-ink-2, #4B5158);
	margin: 0 0 8px;
}
.rr-optg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rr-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 8px 16px;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid var(--ct-line-strong, #D3D7DE);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--ct-ink, #17181C);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--ct-tr, .2s), background-color var(--ct-tr, .2s),
	            color var(--ct-tr, .2s), box-shadow var(--ct-tr, .2s);
}
.rr-chip:hover { border-color: var(--ct-ink-4, #B4B9C0); background: var(--ct-bg-soft, #F7F8FA); }
.rr-chip:focus-visible { outline: 2px solid var(--ct-primary, #FF0051); outline-offset: 2px; }
.rr-chip.is-on {
	border-color: var(--ct-primary, #FF0051);
	background: #fff;
	color: var(--ct-primary, #FF0051);
	font-weight: 700;
	box-shadow: 0 0 0 1px var(--ct-primary, #FF0051) inset;
}
.rr-chip.is-off {
	border-color: var(--ct-line, #E7E9ED);
	background: var(--ct-bg-soft, #F7F8FA);
	color: var(--ct-ink-4, #B4B9C0);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: rgba(180, 185, 192, .8);
}
.rr-chip.is-off:hover { border-color: var(--ct-line, #E7E9ED); background: var(--ct-bg-soft, #F7F8FA); }
/* 색상 옵션 이미지(data-style) 스와치 */
.rr-chip-sw {
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(23, 24, 28, .12);
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	flex: 0 0 auto;
}
.rr-chip-tx { display: block; }

/* 앞 순번 옵션 미선택 안내 */
.rr-optg-wait { display: none; font-size: 12px; color: var(--ct-ink-3, #8B9199); margin-top: 7px; }
.rr-optg.is-wait .rr-optg-chips { opacity: .45; }
.rr-optg.is-wait .rr-optg-wait,
.rr-optg.is-empty .rr-optg-wait { display: block; }

/* 우측 따라다니는 레이어는 폭이 좁으니 살짝 조밀하게 */
.quickOption .rr-optg { margin-bottom: 12px; }
.quickOption .rr-chip { min-height: 38px; padding: 7px 13px; font-size: 13.5px; }

@media (max-width: 767px) {
	.rr-chip { min-height: 40px; padding: 7px 14px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.rr-chip { transition: none !important; }
}

/* ==========================================================================
   ⑫ 타임세일 바 리디자인                                    2026-07-25 요청 1
      마크업은 그대로(#tsproduct > strong + .timesale > p > span#day…) 두고
      CSS 만으로 : 라운드 카드 + 핑크 그라디언트 + 알약 라벨 + 숫자 칩
   ========================================================================== */
#tsproduct.timesaleTitle {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	min-height: 54px;
	margin: 0 0 16px 40px;
	padding: 9px 16px 9px 13px;
	box-sizing: border-box;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #FFF1F5 0%, #FFE7EF 52%, #FFF9FB 100%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sitecolor1, #FF0051) 16%, transparent);
	text-align: left;
	font-size: 0;
}
/* 좌측 : 알약 라벨 */
#tsproduct.timesaleTitle strong {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	height: 34px;
	margin: 0;
	padding: 0 15px 0 11px;
	border-radius: 999px;
	background: var(--ct-primary);
	color: #fff !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--sitecolor1, #FF0051) 22%, transparent);
}
#tsproduct.timesaleTitle strong .material-icons {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1;
	vertical-align: middle !important;
}
/* 라벨 뒤 세로 구분선 제거(알약 안에서는 불필요) */
#tsproduct.timesaleTitle strong::after { content: none !important; display: none !important; }

/* 우측 : 남은시간 */
#tsproduct.timesaleTitle .timesale {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 auto;
	gap: 3px;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ct-ink-3);
}
#tsproduct.timesaleTitle .timesale > p {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
}
/* 숫자(일·시·분·초)만 어두운 칩으로 — 단위 글자는 텍스트노드라 그대로 작게 */
#tsproduct.timesaleTitle .timesale span[id] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 7px;
	border-radius: 9px;
	background: var(--ct-ink);
	color: #fff !important;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
#tsproduct.timesaleTitle .timesale .dayBox {
	margin: 0 5px 0 0 !important;
	color: var(--ct-ink-3) !important;
	font-size: 13px;
	font-weight: 600;
}
@media (max-width: 767px) {
	#tsproduct.timesaleTitle { min-height: 48px; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 12px; }
	#tsproduct.timesaleTitle strong { height: 30px; padding: 0 12px 0 9px; font-size: 12.5px; }
	#tsproduct.timesaleTitle strong .material-icons { font-size: 16px !important; }
	#tsproduct.timesaleTitle .timesale { font-size: 11.5px; gap: 2px; }
	#tsproduct.timesaleTitle .timesale > p { gap: 2px; }
	#tsproduct.timesaleTitle .timesale span[id] { min-width: 28px; height: 28px; padding: 0 5px; font-size: 13.5px; border-radius: 8px; }
}

/* ==========================================================================
   ⑬ 네비게이션(상단 고정헤더) 바로 밑 여백                   2026-07-25 요청 2
      헤더 높이만큼의 스페이서 바로 뒤에 .location(홈 > 카테고리)이 붙어 있고,
      그 바로 아래 타임세일 바가 딱 붙어 있어 숨 쉴 틈이 없었다.
      → 네비게이션 바 위·아래 모두 여백을 준다.
   ========================================================================== */
.location { margin: 16px 0 14px !important; }

/* ==========================================================================
   ⑭ 선택상품(상품수량) 카드                              2026-07-25 요청 3·6
      - 드롭섀도가 둥근 모서리 바깥으로 번져 진한 회색 자국처럼 보였다 → 제거
      - 배경은 한 톤 더 진한 회색으로
   ========================================================================== */
.selected_option_wrap.optList .selected_option {
	background: #EDEFF3 !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ⑮ 옵션 칩 : 라벨 간격 + 안내문구 노출시점                  2026-07-25 요청 4
      - 옵션명 ↔ 버튼 사이 여백 확대
      - "○○ 선택 후 이용할 수 있어요" 상시노출 제거
      - 장바구니/구매하기를 눌렀을 때만 빨간 안내문구 노출(.is-alert)
   ========================================================================== */
.rr-optg { margin: 0 0 18px; }
.rr-optg-tit { margin: 0 0 12px !important; }
.rr-optg.is-wait .rr-optg-wait { display: none !important; }
.rr-optg.is-alert .rr-optg-wait {
	display: block !important;
	margin-top: 12px !important;
	color: var(--ct-primary, #FF0051) !important;
	font-size: 12.5px;
	font-weight: 700;
}
.rr-optg.is-alert .rr-chip { border-color: color-mix(in srgb, var(--sitecolor1, #FF0051) 45%, transparent); }

/* ==========================================================================
   ⑯ 상세 이미지 밑 썸네일                                    2026-07-25 요청 5
      선택 썸네일의 핑크 링 제거 → 전부 옅은 회색 테두리로 통일
   ========================================================================== */
.productInfo .img_box .simg .item span,
.productInfo .img_box .simg .item:hover span,
.productInfo .img_box .simg .swiper-slide-active span {
	box-shadow: none !important;
	outline: 1px solid var(--ct-line) !important;
	outline-offset: -1px;
	transform: none !important;
	background: #fff !important;
}
.productInfo .img_box .simg .item:hover span,
.productInfo .img_box .simg .swiper-slide-active span { outline-color: var(--ct-line-strong) !important; }

/* ==========================================================================
   ⑰ 우측 따라다니는 레이어 : 내용만큼만 높이를 차지하게      2026-07-25 요청
      원본은 .inner 가 항상 100vh(JS 가 인라인으로 다시 박음), 그 안 .infoInner 가
      calc(100vh - 241px) 고정이라 옵션이 없는 상품에서는 가운데가 통째로
      텅 빈 흰 상자로 보였다. 버튼줄도 position:absolute; bottom:0 이라
      내용과 상관없이 항상 패널 맨 아래에 붙어 있었다.
      → 세로 flex 로 바꿔 내용 높이에 맞추고, 옵션이 많을 때만 옵션영역이 스크롤.
   ========================================================================== */
.quickOption > .inner {
	height: auto !important;
	max-height: calc(100vh - 100px) !important;
	display: flex !important;
	flex-direction: column;
	overflow: hidden !important;
}
.quickOption > .inner > div.infoBox {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.quickOption > .inner > div.infoBox .infoInner {
	height: auto !important;
	max-height: none !important;
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto !important;
}
.quickOption .btm_btnArea {
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	flex: 0 0 auto;
	margin: 0 10px !important;
}

/* ==========================================================================
   ⑰-1. 구매카드(메인 .productInfo) : "선택된 옵션" 목록만 따로 스크롤   2026-09-01 요청
      ⑰번은 .quickOption(우측 따라다니는 미니카드)에만 적용돼 있었다.
      메인 카드(.productInfo)는 옵션을 여러 개 담을수록 카드 자체가
      한없이 길어져(옵션이 많으면 뷰포트보다 훨씬 커짐) 총상품금액·버튼이
      화면 밖으로 밀려났다 — 관리자메모를 숨겨도(위 ③-1) 조금만 줄어들 뿐
      근본적으로 해결이 안 됐다.
      endedit.com 참고(요청 스크린샷) : 상품명/옵션칩/총금액/버튼은 항상
      고정된 채, "선택된 옵션" 목록 부분에만 자체 스크롤을 준다.
      → .selected_option_wrap.optList 자체에 최대높이를 주고 내부 스크롤.
      class 는 메인/quickOption 두 카드가 공유하므로 이 규칙도 둘 다에
      자연히 적용된다(quickOption 은 이미 ⑰에서 바깥 .infoInner 가 한 번 더
      감싸 스크롤하므로, 옵션 목록이 길 때 안쪽에서 먼저 스크롤이 끝나고
      나머지는 바깥 스크롤로 넘어가는 정도라 기존 동작을 해치지 않는다).
   ========================================================================== */
.selected_option_wrap.optList {
	max-height: 260px !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
}
.selected_option_wrap.optList::-webkit-scrollbar { width: 8px; }
.selected_option_wrap.optList::-webkit-scrollbar-track { background: transparent; }
.selected_option_wrap.optList::-webkit-scrollbar-thumb {
	background: var(--ct-line-strong, #d7dae2);
	border-radius: 8px;
}
/* ★2026-09-01(추가) 스크롤바가 2개로 보이는 문제 수정.
   product/content.asp 자체 인라인 <style>(레거시, 4559번째 줄 부근)에
   ".selected_option_wrap .optionInner{max-height:400px;overflow-y:auto;}"
   가 이미 있었다 — 바로 위 .optList(바깥, 260px)와 그 자식 .optionInner(안쪽, 400px)
   가 담긴 조합이 많을 때(옵션 3개 이상) 동시에 각자 스크롤바를 그려서 스크롤바가
   위아래로 나란히 2개 보였다. 바깥쪽(.optList)만 스크롤하도록 안쪽 제약을 없앤다. */
.selected_option_wrap.optList .optionInner {
	max-height: none !important;
	overflow-y: visible !important;
}

/* ==========================================================================
   ⑱ 우측 레이어 : 선택상품 영역도 본문과 같은 회색 카드로     2026-07-25 요청
      구분선(옵션영역 밑줄 / 선택상품 윗줄 / 버튼영역 윗줄)으로 나누던 것을
      본문 .selected_option 과 같은 회색 카드(#EDEFF3, 라운드14)로 바꾼다.
   ========================================================================== */
/* 구분선 제거 */
.quickOption > .inner .optSel .optSelInner {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.quickOption .btm_btnArea { border-top: 0 !important; }
.quickOption #optList_dy,
.quickOption .selected_option_wrap.optList {
	border: 0 !important;
	background: transparent !important;
}
/* 선택상품 카드 */
.quickOption .selected_area .selected_box,
.quickOption .selected_area .selected_box:first-child {
	margin-top: 0 !important;
	padding: 12px 12px 14px !important;
	border: 0 !important;
	border-top: 0 !important;
	border-radius: 14px !important;
	background: #EDEFF3 !important;
	box-shadow: none !important;
	box-sizing: border-box;
}
.quickOption .selected_area .selected_box + .selected_box { margin-top: 8px !important; }
.quickOption .selected_area .selected_box .box_closeBtn { right: 7px !important; bottom: auto !important; top: 9px !important; }
.quickOption .selected_area .selected_box > p { margin-top: 0 !important; padding-right: 18px; }
.quickOption .selected_area .opt_mid { height: auto !important; padding-top: 10px !important; }
/* 회색 카드 위에서도 수량입력칸은 흰색으로 또렷하게 */
.quickOption .selected_area .opt_mid .qtt_wrap input,
.quickOption .selected_area .opt_mid .qtt_wrap > div { background: #fff !important; }

/* ==========================================================================
   ⑲ 배송/교환/반품 탭 : 폰트 통일 + 표 정리                  2026-07-25 요청
      윗블록 = 관리자 입력값(워드에서 붙여넣은 HTML — MsoNormalTable /
               span style="font-size:9.0pt" / p.MsoNormal margin 12pt)
      아랫블록 = 솔루션 기본 배송정책 표(돋움 11px, .trans_table / .f11 .f12)
      → 둘 다 Pretendard·같은 크기·같은 줄간격으로 맞추고 표를 정돈한다.
      ※ 로컬 'Pretendard'(웨이트당 870KB)는 쓰지 않고, 페이지가 이미 받아둔
        'Pretendard Variable'(동적 서브셋)만 사용한다.
   ========================================================================== */
.tab01_cont.tab01_cont_qna {
	font-size: 14.5px;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: var(--ct-ink-2);
	/* 좌측 경계선에 글자가 바짝 붙어 보이던 문제(2026-09-01 요청) - 한글 1글자 정도(1em) 왼쪽 여백 */
	padding: 6px 0 44px 1em;
}
/* 폰트 통일 (아이콘 폰트는 제외) */
.tab01_cont.tab01_cont_qna,
.tab01_cont.tab01_cont_qna *:not(.material-icons):not(.iconfont) {
	font-family: 'Pretendard Variable', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif !important;
}
/* 워드/레거시가 박아둔 글자크기 무력화 → 컨테이너 크기를 상속 */
.tab01_cont.tab01_cont_qna span[style],
.tab01_cont.tab01_cont_qna p[style],
.tab01_cont.tab01_cont_qna td[style],
.tab01_cont.tab01_cont_qna div[style],
.tab01_cont.tab01_cont_qna font,
.tab01_cont.tab01_cont_qna .f11,
.tab01_cont.tab01_cont_qna .f12,
.tab01_cont.tab01_cont_qna .f13,
.tab01_cont.tab01_cont_qna .gray89,
.tab01_cont.tab01_cont_qna .black { font-size: inherit !important; }

.tab01_cont.tab01_cont_qna p,
.tab01_cont.tab01_cont_qna p.MsoNormal {
	margin: 0 0 4px !important;
	line-height: 1.75 !important;
	word-break: keep-all;
}
.tab01_cont.tab01_cont_qna ul,
.tab01_cont.tab01_cont_qna li { list-style: none; margin: 0; padding: 0; }
.tab01_cont.tab01_cont_qna strong { color: var(--ct-ink); font-weight: 700; }

/* 섹션 제목(배송정보 / 교환·반품 정보) — 한 칸짜리 행에 든 strong 만 */
.tab01_cont.tab01_cont_qna table td:only-child > p > strong,
.tab01_cont.tab01_cont_qna table td:only-child > span > strong {
	display: inline-block;
	margin: 26px 0 10px;
	padding-left: 11px;
	border-left: 3px solid var(--ct-primary);
	line-height: 1.25;
	font-size: 18px !important;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ct-ink);
}

/* 표 공통 : 2칸 이상인 행만 라벨/내용으로 취급 */
.tab01_cont.tab01_cont_qna table { width: 100% !important; border-collapse: collapse; }
.tab01_cont.tab01_cont_qna table td,
.tab01_cont.tab01_cont_qna table th { padding: 0; vertical-align: top; }
.tab01_cont.tab01_cont_qna table td:first-child:not(:last-child),
.tab01_cont.tab01_cont_qna table th:first-child:not(:last-child) {
	padding: 8px 16px 8px 0 !important;
	white-space: nowrap;
	font-weight: 600;
	text-align: left;
	color: var(--ct-ink);
}
.tab01_cont.tab01_cont_qna table td:first-child:not(:last-child) ~ td,
.tab01_cont.tab01_cont_qna table th:first-child:not(:last-child) ~ td { padding: 8px 0 !important; }

/* 솔루션 기본 배송정책 표 : 진짜 데이터 표라 카드형으로 */
.tab01_cont.tab01_cont_qna table.trans_table {
	margin: 6px 0 10px;
	table-layout: fixed;
	border: 1px solid var(--ct-line) !important;
	border-radius: 12px;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}
.tab01_cont.tab01_cont_qna table.trans_table td,
.tab01_cont.tab01_cont_qna table.trans_table th { border-bottom: 1px solid var(--ct-line); }
.tab01_cont.tab01_cont_qna table.trans_table tr:last-child td,
.tab01_cont.tab01_cont_qna table.trans_table tr:last-child th { border-bottom: 0; }
/* 라벨 칸은 th 다 (레거시 마크업) */
.tab01_cont.tab01_cont_qna table.trans_table th,
.tab01_cont.tab01_cont_qna table.trans_table td:first-child {
	width: 172px !important;
	padding: 14px 16px !important;
	border-right: 1px solid var(--ct-line) !important;
	background: #F7F8FA !important;
	white-space: normal !important;
	word-break: keep-all !important;
	text-align: left !important;
	font-weight: 600 !important;
	color: var(--ct-ink) !important;
}
.tab01_cont.tab01_cont_qna table.trans_table th + td,
.tab01_cont.tab01_cont_qna table.trans_table td + td { padding: 14px 18px !important; }

@media (max-width: 767px) {
	.tab01_cont.tab01_cont_qna { font-size: 13.5px; }
	.tab01_cont.tab01_cont_qna table td:only-child > p > strong,
	.tab01_cont.tab01_cont_qna table td:only-child > span > strong { font-size: 16px !important; margin-top: 20px; }
	.tab01_cont.tab01_cont_qna table.trans_table td:first-child { width: 96px !important; padding: 11px 10px !important; }
	.tab01_cont.tab01_cont_qna table.trans_table td + td { padding: 11px 12px !important; }
}

/* ==========================================================================
   2026-07-26 추가 요청
   ⑨ 공유하기 레이어 : 링크복사 줄 테두리 정리 + URL 글자색 + 복사 아이콘 노출
      - 바깥(.shareLayer-copy-link)에 테두리가 있는데 안쪽 input 에도 테두리가 생겨
        선이 두 겹으로 겹치고 오른쪽에서 어긋나 보였다 → 바깥 테두리 하나만 남긴다.
      - URL 글자색이 #afafaf 라 거의 안 보였다 → 본문색으로.
      - 복사 버튼 아이콘이 외부 도메인 이미지(webimg.jestina.co.kr, 현재 404)라
        아무것도 안 보였다 → 인라인 SVG + "복사" 라벨로 교체.
      - 복사하면 alert 대신 토스트(product/content.asp 의 mcToast)
   ⑩ 배송/교환·반품 : 등록된 안내(ul) 뒤에 붙던 사이트 기본 표 2개가 중복이라 숨김
   ========================================================================== */

/* ⑨ 링크복사 줄 ---------------------------------------------------------- */
.SNSLayerBox .shareLayer-copy-link{
	display: flex !important;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 5px 5px 5px 6px !important;
	border: 1px solid var(--ct-line-strong) !important;
	border-radius: var(--ct-radius);
	background: #fff !important;
}
.SNSLayerBox .shareLayer-copy-link-url{
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: 38px !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 13px !important;
	line-height: 38px !important;
	color: var(--ct-ink-2) !important;
	-webkit-text-fill-color: var(--ct-ink-2);
	text-overflow: ellipsis;
	cursor: text;
}
.SNSLayerBox .shareLayer-copy-link-url:focus{ outline: none !important; }

.SNSLayerBox .shareLayer-copy-link-button-wrapper{
	display: flex !important;
	flex: 0 0 auto;
	width: auto !important;
	border: 0 !important;
}
/* 전역 CSS 가 text-indent:-9999px 로 라벨을 화면 밖으로 밀어낸다 → 되돌린다 */
.SNSLayerBox .shareLayer-copy-link-button{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto !important;
	height: 38px !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--ct-radius-sm) !important;
	background: var(--ct-primary) !important;
	text-indent: 0 !important;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1;
	color: #fff !important;
	white-space: nowrap;
	cursor: pointer;
	transition: filter var(--ct-tr), transform var(--ct-tr);
}
.SNSLayerBox .shareLayer-copy-link-button:hover{ filter: brightness(1.06); }
.SNSLayerBox .shareLayer-copy-link-button:active{ transform: scale(.97); }
/* 세로 구분선(::before)과 404 나는 외부 아이콘(::after) 제거 */
.SNSLayerBox .shareLayer-copy-link-button::before,
.SNSLayerBox .shareLayer-copy-link-button::after{ display: none !important; content: none !important; }
.SNSLayerBox .shareLayer-copy-link-button .mcCopyIco{
	display: block;
	width: 16px; height: 16px;
	background: no-repeat center/16px 16px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.5' height='11.5' rx='2.6'/%3E%3Cpath d='M5.2 15V5.6A2.4 2.4 0 0 1 7.6 3.2H15'/%3E%3C/svg%3E");
}
.SNSLayerBox .shareLayer-copy-link-button .mcCopyTxt{ font-size: 13px; font-weight: 700; }

/* 링크복사 제목 */
.SNSLayerBox .shareLayerCon .shareLayerTit{
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ct-ink);
}

/* ⑩ 배송/교환·반품 중복 안내 숨김 ---------------------------------------- */
/*    등록된 안내(ul)가 있을 때에 한해, 뒤따라오는 사이트 기본 표를 숨긴다.
      등록 안내가 없는 상품은 규칙이 걸리지 않아 기본 표가 그대로 나온다. */
.tab01_cont.tab01_cont_qna > ul ~ table{ display: none !important; }

/* ==========================================================================
   ⑱ 선택상품(옵션 선택 시 나타나는 회색 카드) 내부 마감 · 수량 스테퍼
      2026-07-26

      이 규칙들은 원래 /data/rroys/css/common.css 안에만 있었고, 07-26 전체적용
      때 content_v2.css 로 함께 승격되지 못했다. 그래서 rroys 이외의 분양몰에서는
        - 카드 안쪽 좌우 여백이 0 이라(레거시 padding:25px 0) 글자가 라운딩 모서리에 붙고
        - 수량조절(-/+)이 예전 사각 회색 버튼 그대로
      로 보였다(pro2 실측). rroys 와 완전히 같은 값으로 전 분양몰에 공용화한다.

      ※ 값은 전부 중립 그레이 — 몰 메인컬러(--sitecolor1)에 영향받지 않는다.
      ※ 카드의 배경/테두리/라운딩/그림자는 위 ⑨·⑩·⑭ 가 !important 로 이미 확정한다.
        여기서는 그 안쪽 마감만 담당한다(rroys 도 동일한 상태였다).
   ========================================================================== */
.productInfo .optList .optionInner { border: 0; }

/* 카드 안쪽 여백. 수량조절(.count_control)이 absolute(top:39px)라
   하단 여백을 넉넉히 줘야 카드 아래가 잘리지 않는다. */
.productInfo .optList .selected_option { padding: 16px 18px 30px; }

.productInfo .optList .selected_option .neme,
.productInfo .optList .selected_option .pTit { font-size: 14px; color: var(--ct-ink-2, #4B5158); }
.productInfo .optList .selected_option .prc em { font-weight: 700; color: var(--ct-ink, #17181C); }

/* 수량 조절 : 라운드 아웃라인 스테퍼 */
.productInfo .optList .count_control {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ct-line-strong, #D3D7DE);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.productInfo .optList .count_control .btn_minus,
.productInfo .optList .count_control .btn_plus {
	width: 30px;
	background: #fff;
	border: 0;
	cursor: pointer;
	transition: background .22s cubic-bezier(.4, 0, .2, 1);
}
.productInfo .optList .count_control .btn_minus:hover,
.productInfo .optList .count_control .btn_plus:hover { background: var(--ct-bg-soft, #F7F8FA); }
.productInfo .optList .count_control input {
	border: 0;
	border-left: 1px solid var(--ct-line, #E7E9ED);
	border-right: 1px solid var(--ct-line, #E7E9ED);
	text-align: center;
	font-weight: 600;
	color: var(--ct-ink, #17181C);
}

/* 총 상품금액 윗선.
   .infoBox 안에 있을 때는 위 ① 규칙이 !important 로 지운다 — rroys 와 같은 결과. */
.productInfo .total_price,
.productInfo .totalPrice,
.productInfo .sum_price { border-top: 1px solid var(--ct-line, #E7E9ED); }

/* ==========================================================================
   ⑩ 구매 버튼 3종 + 공유 버튼   [전체적용 2026-07-26]

   원래 이 규칙들은 rroys 전용 파일(/data/rroys/css/common.css)에만 있어서
   로이스닷컴에서만 라운딩·음영 버튼이 보이고, 다른 분양몰은 각진 옛 버튼이었다.
   마크업(.productInfo .btn_area / .SNSLayerIcon)은 전 분양몰 공용 소스이므로
   규칙도 공용 파일인 여기로 옮겨 전 몰에 동일하게 적용한다.

   · 색은 몰별 --sitecolor1 을 승계한 --rr-primary 를 그대로 쓴다(site_v2.css 가 전역 정의).
   · rroys 에 하드코딩돼 있던 분홍 그림자(rgba(255,0,81,.34))만 color-mix 로 일반화했다.
     커스텀 속성이 아니라 실제 box-shadow 선언이므로 앞줄 중립 폴백이 그대로 동작한다.
   · /data/{siteID}/css/content_v2.css 가 이 파일 뒤에 로드되므로 몰별 예외는 거기서 덮으면 된다.
   ========================================================================== */

/* --- 공유 버튼 (원래 inline-block + padding 구조 유지) --- */
.productInfo .SNSLayerIcon {
	padding: 7px 13px;
	border: 1px solid var(--rr-line-strong, #DCDCE1);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--rr-shadow-sm, 0 1px 2px rgba(23,24,28,.05));
	transition: box-shadow var(--rr-tr, .22s ease), transform var(--rr-tr, .22s ease), border-color var(--rr-tr, .22s ease);
}
.productInfo .SNSLayerIcon span.iconfont {
	font-size: 20px;
	color: var(--rr-ink-2, #4B5158);
	transition: color var(--rr-tr, .22s ease);
}
.productInfo .SNSLayerIcon:hover {
	transform: translateY(-1px);
	border-color: var(--rr-primary, var(--sitecolor1, #17181C));
	box-shadow: var(--rr-shadow-md, 0 6px 20px rgba(23,24,28,.10));
}
.productInfo .SNSLayerIcon:hover span.iconfont { color: var(--rr-primary, var(--sitecolor1, #17181C)); }
.SNSLayerBox {
	border-radius: var(--rr-radius, 12px);
	box-shadow: var(--rr-shadow-lift, 0 10px 26px rgba(23,24,28,.13));
	border: 1px solid var(--rr-line, #E7E9ED);
}

/* --- 구매 버튼 3종 (라운딩 + 음영 + 트랜지션) --- */
.productInfo .btn_area {
	display: flex;
	gap: 10px;
	overflow: visible;
	align-items: stretch;
}
.productInfo .btn_area > a {
	margin-left: 0 !important;
	height: 60px !important;
	line-height: 58px !important;
	border-radius: var(--rr-radius-sm, 10px) !important;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	box-shadow: var(--rr-shadow-sm, 0 1px 2px rgba(23,24,28,.05));
	transition: transform var(--rr-tr, .22s ease), box-shadow var(--rr-tr, .22s ease), background-color var(--rr-tr, .22s ease), color var(--rr-tr, .22s ease);
	will-change: transform;
}
.productInfo .btn_area > a:hover  { transform: translateY(-2px); box-shadow: var(--rr-shadow-lift, 0 10px 26px rgba(23,24,28,.13)); }
.productInfo .btn_area > a:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm, 0 1px 2px rgba(23,24,28,.05)); }

/* 찜하기 : 아웃라인 */
.productInfo .btn_area > a.likeImg {
	flex: 0 0 76px;
	background: #fff !important;
	border: 1px solid var(--rr-line-strong, #DCDCE1);
	color: var(--rr-ink-2, #4B5158) !important;
}
.productInfo .btn_area > a.likeImg:hover {
	border-color: var(--rr-primary, var(--sitecolor1, #17181C));
	color: var(--rr-primary, var(--sitecolor1, #17181C)) !important;
}
.productInfo .btn_area > a.likeImg .iconfont { font-size: 22px; }

/* 장바구니 : 서브(잉크톤) */
.productInfo .btn_area > a#cartBtn {
	flex: 1 1 0;
	background: var(--rr-ink, #17181C) !important;
	color: #fff !important;
}
.productInfo .btn_area > a#cartBtn:hover { background: #2A2C31 !important; }

/* 구매하기 : 메인컬러 */
.productInfo .btn_area > a.btnbuy {
	flex: 1 1 0;
	background: var(--rr-primary, var(--sitecolor1, #17181C)) !important;
	color: #fff !important;
	box-shadow: var(--rr-shadow-primary, 0 8px 20px rgba(23,24,28,.20));
}
.productInfo .btn_area > a.btnbuy:hover {
	box-shadow: 0 12px 26px rgba(23,24,28,.26);                                        /* 중립 폴백 */
	box-shadow: 0 12px 26px color-mix(in srgb, var(--rr-primary, var(--sitecolor1)) 34%, transparent);
	filter: saturate(1.05);
}
.productInfo .btn_area > a .iconfont {
	margin: -2px 7px 0 0;
	font-size: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.productInfo .btn_area > a,
	.productInfo .SNSLayerIcon { transition: none !important; }
	.productInfo .btn_area > a:hover,
	.productInfo .SNSLayerIcon:hover { transform: none !important; }
}

/* ==========================================================================
   ⑳ 정보영역(배송비·적립금) 2단 레이아웃 + 적립금 배지   [전체적용 2026-07-26]

      이 규칙들도 /data/rroys/css/common.css 안에만 있었다.
      회색 배경·테두리는 위 ③ 이 !important 로 이미 지우고 있어 전 몰이 같았지만,
      dt/dd 의 flex 2단 레이아웃(라벨 84px + 값)과 적립금 원형 배지(.ico_point)는
      빠져 있어서 rroys 외 몰은 레거시 float 목록 + 배지 없는 텍스트로 보였다.

      ※ padding/색상은 ③ 이 확정한다(값이 rroys 와 동일) — 여기서는 배치만 담당.
      ※ .ico_point 는 var(--rr-primary) → --sitecolor1 승계라 몰마다 자기 색이 된다.
   ========================================================================== */
.productInfo .infoBox .option_section_wrap .option_section {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	overflow: hidden;
}
.productInfo .infoBox .option_section_wrap .option_section dt {
	float: none;
	flex: 0 0 84px;
	width: 84px !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
}
.productInfo .infoBox .option_section_wrap .option_section dd {
	flex: 1 1 auto;
	margin-left: 0 !important;
	font-size: 14px;
	line-height: 1.6;
}
.productInfo .infoBox .option_section_wrap .option_section dd strong { color: var(--rr-ink, #17181C); }

.productInfo .infoBox .option_section_wrap .ico_point {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--rr-primary, var(--sitecolor1, #FF0051));
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: -3px;
}