/* ============================================================
   CHANNELCAN RENEWAL — ORDER PAGE SKIN
   service-order / orderdaily / orderfree / orderlike / orderpackage
   기존 마크업(ID/JS) 무수정, CSS 오버라이드만으로 rn 디자인 적용.
   head.php에서 주문페이지 URL일 때만 로드.
   ============================================================ */

/* ---------- 페이지 배경/헤더 ---------- */
.main.shop{background:var(--rn-gray-50);}
.main.shop .page-header{
	background:linear-gradient(180deg,#fffdf2 0%,var(--rn-gray-50) 100%) !important;
	border:0 !important;box-shadow:none !important;padding:34px 0 22px !important;margin-bottom:8px !important;
}
.main.shop .page-header h1,.main.shop .page-header span.text-dark{
	color:var(--rn-black) !important;font-weight:800 !important;letter-spacing:-.02em;font-size:26px !important;
}
.main.shop .page-header .breadcrumb{opacity:.6;}
.main.shop .page-header:after,.main.shop .page-header:before{display:none !important;}

/* ---------- 좌우 컬럼 → 카드 ---------- */
.main.shop .summary.entry-summary{
	background:#fff;border:1px solid var(--rn-gray-100);border-radius:20px;
	box-shadow:var(--rn-shadow);padding:28px 26px;
}
@media(max-width:767.98px){.main.shop .summary.entry-summary{padding:20px 16px;}}
.main.shop .owl-carousel{
	background:#fff;border:1px solid var(--rn-gray-100);border-radius:20px;
	box-shadow:var(--rn-shadow);overflow:hidden;
}
.main.shop .owl-carousel img{border-radius:20px;}

/* 상품명/평점 */
.main.shop .summary h1{font-size:24px !important;font-weight:800 !important;letter-spacing:-.02em;}
.main.shop .review-num{font-size:13px;color:var(--rn-gray-500);}

/* ---------- 폼 요소 ---------- */
.main.shop label.font-weight-bold{
	font-size:14px !important;font-weight:700 !important;color:var(--rn-gray-900) !important;margin-bottom:8px;
}
.main.shop .form-control{
	font-family:var(--rn-font);font-size:15px;color:var(--rn-black);
	background:#fff;border:1.5px solid var(--rn-gray-300);border-radius:12px !important;
	padding:12px 14px;height:auto;line-height:1.4;box-shadow:none !important;
	transition:border-color .12s ease,box-shadow .12s ease;
}
.main.shop .form-control:focus{border-color:var(--rn-black);box-shadow:0 0 0 3px rgba(25,31,40,.08) !important;}
.main.shop select.form-control{
	-webkit-appearance:none;appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a1' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.main.shop .form-group{margin-bottom:20px;}

/* ---------- 선택 토글 → 세그먼트 ----------
   ⚠ 신청수량(.radio-overlay-wrapper 내부)은 제외: 기존(Porto 파란 아웃라인 필) 디자인 유지가 사용자 결정 (2026-07-21)
   결제방식/증빙 등 나머지 토글에만 rn 스타일 적용 */
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn{
	font-family:var(--rn-font) !important;font-size:13px !important;font-weight:700 !important;
	color:var(--rn-gray-700) !important;background:#fff !important;
	border:1.5px solid var(--rn-gray-300) !important;border-radius:12px !important;
	padding:11px 12px !important;margin:0 6px 8px 0 !important;
	box-shadow:none !important;text-transform:none !important;letter-spacing:-.01em !important;
	transition:all .12s ease !important;line-height:1.3 !important;
}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn:hover{border-color:var(--rn-gray-500) !important;transform:none;}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn.active,
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn.focus.active{
	background:var(--rn-black) !important;color:#fff !important;border-color:var(--rn-black) !important;
}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn.active .badge{filter:brightness(1.1);}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn .badge{
	font-size:10px;border-radius:999px;padding:3px 7px;top:-0.55rem !important;
}

/* 물음표 도움말 버튼 */
.main.shop button.btn-light.box-shadow-2{
	border-radius:50% !important;width:18px;height:18px;line-height:1 !important;
	font-size:11px !important;color:var(--rn-gray-500) !important;background:var(--rn-gray-100) !important;
	border:0 !important;box-shadow:none !important;vertical-align:2px;
}

/* ---------- 가격/알림 ---------- */
.main.shop .price .amount{
	font-family:var(--rn-font);color:var(--rn-gray-900);font-weight:700;
}
.main.shop .alert-success{
	background:#e5f9f0 !important;border:0 !important;border-radius:14px !important;
	color:#087a4a !important;font-weight:500;padding:16px 18px;
}
.main.shop .alert-success strong{color:#065f3a;}

/* ---------- 탭 (상세/유의/후기) ---------- */
.main.shop .tabs .nav-tabs{border-bottom:1px solid var(--rn-gray-100) !important;background:transparent;}
.main.shop .tabs .nav-tabs li .nav-link{
	font-family:var(--rn-font) !important;font-weight:700 !important;font-size:14px !important;
	color:var(--rn-gray-500) !important;border:0 !important;background:transparent !important;
	border-bottom:2.5px solid transparent !important;border-radius:0 !important;
}
.main.shop .tabs .nav-tabs li .nav-link.active{
	color:var(--rn-black) !important;border-bottom-color:var(--rn-black) !important;
}
.main.shop .tab-content{
	background:#fff;border:1px solid var(--rn-gray-100) !important;border-radius:0 0 16px 16px;
	box-shadow:none !important;
}
.main.shop .tabs{background:#fff;border-radius:16px;border:1px solid var(--rn-gray-100);overflow:hidden;box-shadow:var(--rn-shadow);}
.main.shop .tabs .nav-tabs{padding:0 10px;}
.main.shop .tab-content{border:0 !important;}
.main.shop table.table th{font-size:13px;color:var(--rn-gray-500);font-weight:700;}
.main.shop table.table td{font-size:14px;color:var(--rn-gray-700);}

/* ---------- 후기 리스트(코멘트) ---------- */
.main.shop ul.comments .comment-block{
	background:var(--rn-gray-50) !important;border-radius:14px;border:1px solid var(--rn-gray-100);
}
.main.shop ul.comments .comment-arrow{display:none;}

/* ---------- 버튼 통일 ---------- */
.main.shop .btn-primary:not(.btn-outline),.main.shop input[type="submit"].btn-primary{
	background:var(--rn-black) !important;border-color:var(--rn-black) !important;border-radius:12px !important;
	font-weight:700 !important;font-family:var(--rn-font) !important;
}
.main.shop a.btn.btn-primary.mb-2{border-radius:12px !important;}

/* ---------- 분할주문/링크추가 영역 ---------- */
.main.shop button.py-1.btn-success{
	background:var(--rn-gray-100) !important;color:var(--rn-gray-900) !important;
	border:1.5px solid var(--rn-gray-300) !important;border-radius:10px !important;
	font-weight:700;font-size:12px;padding:8px 12px !important;
}

/* ---------- 모바일 ---------- */
@media(max-width:991.98px){
	.main.shop .col-lg-6{margin-bottom:16px;}
}

/* 등장 애니 제거됨: fill-mode가 영구 스택컨텍스트를 만들어
   내부 모달이 backdrop 아래 깔리는 버그 유발 (2026-07-07 수정) */

/* (제거됨 2026-07-21) 신청수량 카드형 그리드 재설계 — 사용자 결정으로 기존 Porto
   파란 아웃라인 필 디자인 유지. 수량 영역(.radio-overlay-wrapper)은 rn 스킨 미적용. */

/* ============================================================
   결제방식 · 증빙 토글 — pill (내용에 맞는 너비, 그리드 아님)
   ============================================================ */
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle[data-toggle="buttons"]{
	display:flex !important;flex-wrap:wrap;gap:8px;
}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn{
	width:auto !important;min-width:0 !important;flex:0 0 auto;margin:0 !important;
	display:inline-flex !important;align-items:center;justify-content:center;white-space:nowrap;
	padding:12px 18px !important;font-size:14px !important;font-weight:700 !important;
	border:1.5px solid var(--rn-gray-300) !important;border-radius:12px !important;
	color:var(--rn-gray-700) !important;background:#fff !important;
	transition:all .12s ease !important;
}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn:hover{border-color:var(--rn-gray-500) !important;}
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn.active,
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn.focus.active{
	background:var(--rn-black) !important;color:#fff !important;border-color:var(--rn-black) !important;
}
@media(max-width:575.98px){
	.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn{flex:1 1 auto;padding:12px 10px !important;font-size:13px !important;}
}
/* PC: 세금계산서 발행여부 등 반폭 컬럼(약 250px)에서 줄내림 방지 - 한줄 고정 + 컴팩트
   계산: 미발행(3자)+세금계산서(5자)+현금영수증(5자) @12.5px + 좌우패딩 9px*2 + 갭 5px*2 = 약 235px */
@media(min-width:768px){
	.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle[data-toggle="buttons"]{flex-wrap:nowrap;gap:5px;}
	.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle label.btn{padding:11px 9px !important;font-size:12.5px !important;flex:0 1 auto;}
}
/* 토글 그룹과 바로 아래 입력창이 붙어 보이는 문제 - 간격 확보 (소득공제/지출증빙 등) */
.main.shop .form-group:not(.radio-overlay-wrapper) .btn-group-toggle[data-toggle="buttons"]{margin-bottom:10px;}
.main.shop .d-nNone .btn-group-toggle[data-toggle="buttons"]{margin-top:2px;}

/* 직접 입력 */
.rn-qty-custom{display:flex;gap:8px;align-items:center;margin-top:12px;}
.rn-qty-custom-label{font-size:12px;font-weight:700;color:var(--rn-gray-500);white-space:nowrap;}
.rn-qty-custom .form-control{flex:1;margin:0 !important;}
.rn-qty-custom .rn-btn{flex:none;}
.rn-qty-custom-msg{font-size:12px;color:var(--rn-gray-500);margin-top:8px;min-height:16px;}

/* ---------- 감사 수정 (2026-07-08) ---------- */
/* tax_change()가 붙이는 가짜 클래스 d-nNone을 실제 '보이기'로 정의
   (인라인 display:none를 !important로 덮어 세금계산서/현금영수증 입력칸이 열림) */
.main.shop .d-nNone{display:flex !important;}
/* 할인 안내 문구 고정 들여쓰기(100px) 모바일에서 제거 → 우측 쏠림 방지 */
@media(max-width:575.98px){
	.main.shop div[style*="padding-left:100px"]{padding-left:0 !important;}
}