@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. 상품 이미지 영역
   ========================================================================== */
.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); }

/* ==========================================================================
   ④ 상품명 위 관심 배지 — "둥둥" 떠 있는 느낌
   ========================================================================== */
.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); }
}

/* ==========================================================================
   ⑤ 옵션 셀렉트박스 (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 {
	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; }

/* ==========================================================================
   ⑧ 우측 따라다니는 옵션 레이어
   ========================================================================== */
/* 중복 테두리 : .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;
}

/* ==========================================================================
   ⑱ 우측 레이어 : 선택상품 영역도 본문과 같은 회색 카드로     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);
	padding: 6px 0 44px;
}
/* 폰트 통일 (아이콘 폰트는 제외) */
.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;
}