@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);
}

/* ==========================================================================
   ① 상품 정보영역의 구분선 전부 제거
      (가격 아래 / 정보박스 아래 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; }