@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ==========================================================================
   rroys 전용 스타일시트  (/data/rroys/css/common.css)
   commonTotal.css 이후에 로드되므로 여기서 최종 디자인을 확정한다.

   2026-07-25  상품상세(/product/content.asp) 디자인 업그레이드
     1) 폰트   : 전 페이지 Pretendard 통일
     2) 라인색 : --rr-line 하나로 통일 (테두리/구분선 전부)
     3) 버튼   : 라운딩 + 음영 + hover/active 트랜지션
     4) 카드/여백/타이포 정돈
   ========================================================================== */

:root {
	/* 솔루션 메인컬러(cfgColor1/2/3)는 그대로 승계 */
	--rr-primary:        var(--sitecolor1, #FF0051);
	--rr-primary-2:      var(--sitecolor2, #FF66B3);
	--rr-primary-soft:   var(--sitecolor3, #FBEFEF);

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

	/* ▼ 전 페이지 공통 라인 색상 (한 곳에서 관리) */
	--rr-line:           #E7E9ED;
	--rr-line-strong:    #D3D7DE;
	--rr-bg-soft:        #F7F8FA;

	--rr-radius:         14px;
	--rr-radius-sm:      10px;
	--rr-radius-xs:      6px;

	--rr-shadow-sm:      0 1px 2px rgba(23,24,28,.05), 0 2px 8px rgba(23,24,28,.05);
	--rr-shadow-md:      0 6px 20px rgba(23,24,28,.10);
	--rr-shadow-lift:    0 10px 26px rgba(23,24,28,.13);
	--rr-shadow-primary: 0 8px 20px rgba(255,0,81,.26);

	--rr-tr:             .22s cubic-bezier(.4, 0, .2, 1);
}

/* ── 기본 타이포 ───────────────────────────────────────────────────────── */
html body,
html body input,
html body select,
html body textarea,
html body button,
html body table,
html body th,
html body td {
	font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
	             'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
html body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--rr-ink);
	letter-spacing: -0.01em;
}
/* 상세설명(판매자 입력 HTML)은 인라인 돋움 지정이 많아 폰트만 강제 통일 */
.contentZoom, .contentZoom * {
	font-family: 'Pretendard Variable', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* ==========================================================================
   1. 상단 경로(breadcrumb)
   ========================================================================== */
.location {
	background: var(--rr-bg-soft) !important;
	border-bottom: 1px solid var(--rr-line);
	font-size: 13px;
	color: var(--rr-ink-3);
}

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

/* 배송비·적립금 등 정보 리스트 */
.productInfo .option_section_wrap {
	padding: 18px 20px;
	background: var(--rr-bg-soft);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
}
.productInfo .option_section_wrap .option_section {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 5px 0;
	overflow: hidden;
}
.productInfo .option_section_wrap .option_section dt {
	float: none;
	flex: 0 0 84px;
	width: 84px !important;
	font-size: 13px;
	font-weight: 500;
	color: var(--rr-ink-3);
	line-height: 1.6;
}
.productInfo .option_section_wrap .option_section dd {
	flex: 1 1 auto;
	margin-left: 0 !important;
	font-size: 14px;
	color: var(--rr-ink-2);
	line-height: 1.6;
}
.productInfo .option_section_wrap .option_section dd strong { color: var(--rr-ink); }
.productInfo .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);
	color: #fff;
	font-size: 10px; font-weight: 700;
	vertical-align: -3px;
}

/* 선택된 옵션 / 수량 */
.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 구조 유지) */
.productInfo .SNSLayerIcon {
	padding: 7px 13px;
	border: 1px solid var(--rr-line-strong);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
	transition: box-shadow var(--rr-tr), transform var(--rr-tr), border-color var(--rr-tr);
}
.productInfo .SNSLayerIcon span.iconfont {
	font-size: 20px;
	color: var(--rr-ink-2);
	transition: color var(--rr-tr);
}
.productInfo .SNSLayerIcon:hover {
	transform: translateY(-1px);
	border-color: var(--rr-primary);
	box-shadow: var(--rr-shadow-md);
}
.productInfo .SNSLayerIcon:hover span.iconfont { color: var(--rr-primary); }
.SNSLayerBox { border-radius: var(--rr-radius); box-shadow: var(--rr-shadow-lift); border: 1px solid var(--rr-line); }

/* ==========================================================================
   4. 구매 버튼 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) !important;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr), color var(--rr-tr);
	will-change: transform;
}
.productInfo .btn_area > a:hover  { transform: translateY(-2px); box-shadow: var(--rr-shadow-lift); }
.productInfo .btn_area > a:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm); }

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

/* 장바구니 : 서브(연한 브랜드톤) */
.productInfo .btn_area > a#cartBtn {
	flex: 1 1 0;
	background: var(--rr-ink) !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) !important;
	color: #fff !important;
	box-shadow: var(--rr-shadow-primary);
}
.productInfo .btn_area > a.btnbuy:hover { box-shadow: 0 12px 26px rgba(255,0,81,.34); filter: saturate(1.05); }
.productInfo .btn_area > a .iconfont {
	margin: -2px 7px 0 0;
	font-size: 24px;
}

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

/* ==========================================================================
   8. 우측 퀵 영역 (옵션 요약 / 최근 본 상품 / TOP)
   ========================================================================== */
.quickOption,
.rightQuick,
.leftFloating .quick_wrap {
	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); }

.leftFloating .today_goods,
.rightFloating .today_goods,
.quick_today {
	border: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius-sm) !important;
	background: #fff !important;
	box-shadow: var(--rr-shadow-sm);
}
.leftFloating .today_goods img,
.rightFloating .today_goods img { border-radius: var(--rr-radius-xs); }

a.btn_top, .btn_top, .quick_top {
	border-radius: 50% !important;
	border: 1px solid var(--rr-line) !important;
	background: #fff !important;
	box-shadow: var(--rr-shadow-md) !important;
	transition: transform var(--rr-tr), box-shadow var(--rr-tr);
}
a.btn_top:hover, .btn_top:hover, .quick_top:hover { transform: translateY(-3px); box-shadow: var(--rr-shadow-lift) !important; }

/* ==========================================================================
   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(255, 0, 81, .12);
}

/* 접근성 : 키보드 포커스 표시 */
.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; }
}