/* =====================================================================
 * view-detail.css — 업체 상세(Vendor Detail) 리디자인 전용 스타일
 * design_handoff_vendor_detail 핸드오프를 .vd- 네임스페이스로 이식.
 * ⚠ list.skin.php 와 공용인 custom-main.css 를 오염시키지 않기 위해
 *   이 파일에만 토큰/클래스를 둔다. 3개 스킨(casino/toto/etc) 동일 미러링.
 * ===================================================================== */
/* Pretendard/Paperozi 는 전역 self-host 로드 사용 (외부 CDN import 제거) */

/* ---- 토큰 (스코프 변수) ---- */
.vd-shell{
	--vd-accent:#1F54B5;
	--vd-accent-soft:rgba(31,84,181,0.08);
	--vd-amber:#828B9B;
	--vd-amber-empty:#D9DDE3;
	--vd-ink:#1A1D21;
	--vd-body:#4A4F57;
	--vd-sub:#5A6069;
	--vd-mute:#8A9099;
	--vd-mute2:#9AA0A8;
	--vd-mute3:#AEB4BC;
	--vd-bd:#EEF0F3;
	--vd-bd2:#E3E6EA;
	--vd-bd3:#F1F3F6;
	--vd-bd4:#F4F5F7;
	--vd-bd-hover:#C7D4E8;
	--vd-thumb-bg:#EEF1F4;
	font-family:"Paperozi","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
	color:var(--vd-body);
	background:transparent;
	padding:10px 0;
	-webkit-font-smoothing:antialiased;
}
.vd-shell *{box-sizing:border-box;}

/* 반쪽별 그라데이션 svg 숨김 컨테이너 */
.vd-defs{position:absolute;width:0;height:0;overflow:hidden;}

.vd-wrap{max-width:900px;margin:0 auto;padding:0 clamp(14px,2vw,22px);}
/* 카드 2개 분리 — 상단(히어로) / 하단(탭+콘텐츠). vd-col 은 투명 컨테이너(카드 사이 간격만) */
.vd-col{display:flex;flex-direction:column;gap:14px;}
/* 하단 카드 — 탭 + 상세/이벤트/후기 패널 묶음 */
.vd-panelcard{background:#fff;border:1px solid var(--vd-bd2);border-radius:16px;overflow:hidden;}

/* ---- 레거시 #bo_v 규칙 무력화 (style.css 의 #bo_v{background:#fff!important;border-top;box-shadow} 이김) ---- */
#bo_v.vd-shell{background:transparent !important;border-top:0 !important;box-shadow:none !important;}
/* 상세소개 본문 이중 패딩 제거 (style.css #bo_v_con) */
#bo_v.vd-shell #bo_v_con{padding:0 !important;margin:0 !important;min-height:0;font-size:16px !important;}

/* ---- 상단바 (브레드크럼 + 목록) ---- */
.vd-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.vd-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--vd-mute2);min-width:0;}
.vd-crumb a{color:var(--vd-sub);text-decoration:none;}
.vd-crumb a:hover{color:var(--vd-accent);text-decoration:underline;}
.vd-crumb .sep{color:#C7CCD3;font-size:11px;}
.vd-crumb .cur{color:var(--vd-ink);font-weight:600;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vd-crumb .fa{font-size:12px;}
/* 목록으로: 좌측 배치 + < 화살표 */
.vd-list-btn{
	display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 15px 0 12px;
	border:1px solid var(--vd-bd2);border-radius:9px;background:#fff;color:var(--vd-sub);
	font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0;
	transition:border-color .15s,background .15s,color .15s;
}
.vd-list-btn:hover{border-color:var(--vd-bd-hover);background:#FAFBFC;color:var(--vd-accent);text-decoration:none;}
.vd-list-btn .fa{font-size:15px;line-height:1;}

/* ============ HERO ============ */
.vd-hero{
	padding:18px;display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;
	background:#fff;border:1px solid var(--vd-bd2);border-radius:16px;
}
.vd-hero-left{flex:0 0 320px;max-width:100%;display:flex;flex-direction:column;gap:9px;}
.vd-thumb{position:relative;width:100%;border-radius:13px;overflow:hidden;background:var(--vd-thumb-bg);aspect-ratio:4/3;}
.vd-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.vd-thumb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B6BDC6;}
.vd-thumb-empty i{font-size:34px;}
.vd-thumb-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 9px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18);}

/* 안내 메뉴 — 2x2 단일 패널 */
.vd-cat-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #E6E9ED;border-radius:11px;overflow:hidden;background:#fff;}
.vd-cat-btn{
	box-sizing:border-box;
	display:flex;align-items:center;gap:7px;height:46px;padding:0 14px;
	border:0;border-radius:0;background:#fff;
	font-size:13.5px;font-weight:600;color:#3A3F47;cursor:pointer;white-space:nowrap;
	transition:background .15s,color .15s;font-family:inherit;
}
.vd-cat-btn:nth-child(odd){border-right:1px solid #E9ECF0;}
.vd-cat-btn:nth-child(-n+2){border-bottom:1px solid #E9ECF0;}
.vd-cat-btn:hover{background:#FAFBFC;color:var(--vd-ink);}
.vd-cat-emoji{font-size:16px;line-height:1;}
.vd-cat-label{overflow:hidden;text-overflow:ellipsis;}
.vd-cat-plus{margin-left:auto;font-size:17px;font-weight:400;color:#B6BCC4;line-height:1;flex-shrink:0;}
.vd-cat-btn:hover .vd-cat-plus{color:var(--vd-accent);}

.vd-hero-right{flex:1 1 340px;min-width:260px;display:flex;flex-direction:column;}
.vd-title-row{display:flow-root;}
.vd-h1{margin:0;font-size:24px;font-weight:600;color:var(--vd-ink);letter-spacing:-0.7px;line-height:1.15;word-break:break-all;}

/* 등급 배지 — 기존 toto-badge-inline 색을 살리되 칩 형태 보정 */
.vd-title-row .toto-badge-inline{
	display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 9px;
	border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;line-height:1;
}

.vd-rating-row{display:flex;align-items:center;gap:4px;margin-top:11px;flex-wrap:wrap;line-height:1;}
.vd-stars{display:inline-flex;align-items:center;gap:1px;}
.vd-stars svg{display:block;}
.vd-score{font-size:15px;font-weight:700;color:var(--vd-amber);}
.vd-count{font-size:14px;color:var(--vd-mute2);white-space:nowrap;position:relative;top:1px;}
.vd-reg-date{font-size:12.5px;color:var(--vd-mute2);white-space:nowrap;margin-left:auto;}

/* 사이트 정보 표 */
.vd-site-table{margin-top:15px;border:1px solid #E6E9ED;border-radius:11px;overflow:hidden;}
.vd-site-row{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px 0 0;border-bottom:1px solid #E9ECF0;}
.vd-site-row:last-child{border-bottom:0;}
.vd-site-row.has-btn{padding:0 8px 0 0;}
.vd-site-label{box-sizing:border-box;width:90px;padding:0 10px 0 14px;font-size:13px;color:var(--vd-mute);font-weight:600;flex-shrink:0;white-space:nowrap;align-self:stretch;display:flex;align-items:center;background:#F4F6F9;border-right:1px solid #E9ECF0;}
.vd-site-val{font-size:15px;font-weight:600;color:var(--vd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vd-site-val--addr{font-size:14.5px;font-weight:600;text-decoration:none;}
.vd-site-val--addr:hover{color:var(--vd-accent);text-decoration:underline;}
.vd-site-val--code{font-size:15.5px;font-weight:600;letter-spacing:0.5px;}
.vd-copy-btn{
	margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;
	border:1px solid var(--vd-bd2);border-radius:7px;background:#fff;
	font-size:11.5px;font-weight:600;color:var(--vd-sub);cursor:pointer;white-space:nowrap;
	transition:border-color .15s,background .15s,color .15s;font-family:inherit;
}
.vd-copy-btn:hover{border-color:var(--vd-bd-hover);background:#FAFBFC;color:var(--vd-ink);}
.vd-copy-btn svg{display:block;}

/* CTA */
.vd-cta{
	position:relative;overflow:hidden;z-index:0;
	display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:9px;
	border-radius:11px;background:#1c60d0;color:#fff;font-size:15px;font-weight:600;
	text-decoration:none;white-space:nowrap;
}
.vd-cta::before{content:"";position:absolute;inset:0;background:#14387a;transform:scaleX(0);transform-origin:left center;transition:transform .4s ease;}
.vd-cta:hover::before{transform:scaleX(1);}
.vd-cta:link,.vd-cta:visited,.vd-cta:hover,.vd-cta:active,.vd-cta:focus{color:#fff;text-decoration:none;}
.vd-cta svg{display:block;}
.vd-cta-label,.vd-cta-arrow{position:relative;z-index:1;}
.vd-cta-arrow{display:inline-flex;}
/* CTA 바로 아래 등급 안내와의 간격 축소 (CTA 있을 때만, 14px→10px) */
.vd-cta + .vd-notice,
.vd-cta + .vd-trust{margin-top:9px;}

/* 등급 안내 */
.vd-trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.vd-trust-chip{
	display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:7px;
	background:#F2F4F7;color:var(--vd-sub);font-size:11.5px;font-weight:600;white-space:nowrap;
}
.vd-notice{
	display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border-radius:10px;
	background:#F5F7FA;border:0;
}
.vd-notice svg{flex-shrink:0;}
.vd-notice-text{font-size:13px;color:var(--vd-sub);line-height:1.5;}
.vd-notice-text b{font-weight:600;color:#3A3F47;}
/* 보증업체 안내 강조 (옅은 파란 배경 + 파란 텍스트/아이콘) */
.vd-notice--guaranteed{background:var(--vd-accent-soft);border:0;}
.vd-notice--guaranteed svg{stroke:var(--vd-accent);}
.vd-notice--guaranteed .vd-notice-text b{color:var(--vd-accent);}

/* ============ 상태 박스(승인/수정대기/잠금) — 카드 톤에 맞춤 ============ */
/* 상태 박스 — 단일 패널 안의 행(카드 chrome 제거, 색 배경만) */
.vd-statusbox{
	padding:13px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;
	border-bottom:1px solid #EFF1F4;
}
.vd-statusbox.is-warn{background:#fff8e1;}
.vd-statusbox.is-lock{background:#fce4ec;}
.vd-statusbox .btn{font-size:12.5px;}

/* ============ 세그먼트 탭(쇼핑몰형) ============ */
/* 각진 컨테이너, 선택=흰/연결, 미선택=회색/구분선. 스티키는 JS 핀이 헤더 아래로 고정 */
.vd-tabs{
	position:relative;z-index:20;display:flex;gap:0;background:#fff;border-radius:0;padding:0;box-shadow:none;
	border-bottom:1px solid #EFF1F4;
}
.vd-tab{
	flex:1;display:flex;align-items:center;justify-content:center;gap:4px;height:52px;border-radius:0;
	font-size:15px;cursor:pointer;white-space:nowrap;background:#F4F5F7;color:#8A9099;font-weight:600;
	border:0;border-left:1px solid #E9EBEE;
	font-family:inherit;transition:background .15s,color .15s;text-decoration:none;
}
.vd-tab:first-child{border-left:0;}
.vd-tab:hover{color:var(--vd-sub);text-decoration:none;}
.vd-tab.active{background:#fff;color:var(--vd-accent);font-weight:700;}
.vd-tab-count{
	display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 6px;border-radius:9px;
	background:#E6E8EC;color:var(--vd-mute2);font-size:10.5px;font-weight:700;line-height:1;position:relative;top:1px;
}
.vd-tab.active .vd-tab-count{background:var(--vd-accent);color:#fff;}

/* ============ 섹션(단일 패널 내부, 카드 chrome 없음 + 구분선) ============ */
.vd-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px;border-bottom:1px solid #EFF1F4;}
#section-review{border-bottom:0;}
.vd-card-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.vd-bar{width:4px;height:17px;border-radius:2px;background:var(--vd-accent);flex-shrink:0;}
.vd-card-title{font-size:18px;font-weight:600;color:var(--vd-ink);white-space:nowrap;}
.vd-head-count{font-size:17px;font-weight:700;color:var(--vd-accent);line-height:1;position:relative;top:2px;margin-left:-3px;}

/* 상세소개 본문 */
.vd-intro-body{font-size:14px;color:var(--vd-body);line-height:1.8;max-width:760px;}
.vd-intro-body img{max-width:100%;height:auto;}
.vd-intro-body a{color:var(--vd-accent);}
/* 히어로 제목행 우측 액션(북마크/좋아요) */
.vd-actions{float:right;display:flex;gap:8px;margin-left:2px;margin-top:-1px;margin-right:-2px;}
.vd-act{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:9px;
	border:1px solid var(--vd-bd2);background:#fff;font-size:13px;font-weight:600;cursor:pointer;
	font-family:inherit;transition:border-color .15s,background .15s,color .15s;
}
.vd-act svg{display:block;}
/* 북마크 — 정사각 38×38 */
.vd-act-bookmark{width:auto;height:auto;padding:4px;border:none;background:none;color:#9AA0A8;}
.vd-act-bookmark svg{width:20px;height:20px;}
.vd-act-bookmark:hover{color:var(--vd-accent);}
.vd-act-bookmark.is-active{border:none;background:none;color:var(--vd-accent);}
.vd-act-bookmark.is-active svg{fill:var(--vd-accent);}
/* 좋아요 — 알약형 */
.vd-act-like{padding:0 13px;color:#8A9099;}
.vd-act-like b{font-weight:600;}
.vd-act-like.is-active{border-color:#F2B8C0;background:#FDEEF1;color:#E0457B;}
.vd-act-like.is-active svg{fill:#E0457B;}

/* ============ 이벤트 캐러셀 ============ */
.vd-event-arrows{margin-left:auto;display:flex;gap:6px;}
.vd-arrow{
	display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
	border:1px solid var(--vd-bd2);background:#fff;color:var(--vd-sub);cursor:pointer;
	transition:border-color .15s,background .15s,color .15s;font-family:inherit;
}
.vd-arrow:hover{border-color:var(--vd-bd-hover);background:#FAFBFC;color:var(--vd-ink);}
.vd-event-scroll{
	display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:280px;gap:12px;
	overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:2px;
	scrollbar-width:none;-ms-overflow-style:none;
}
.vd-event-scroll::-webkit-scrollbar{display:none;}
.vd-event-card{
	scroll-snap-align:start;display:flex;flex-direction:column;
	border:1px solid var(--vd-bd);border-radius:11px;padding:16px 17px;cursor:pointer;background:#fff;
	transition:border-color .15s,box-shadow .15s;text-align:left;font-family:inherit;
}
.vd-event-card:hover{border-color:var(--vd-bd-hover);box-shadow:0 4px 14px rgba(17,24,39,0.07);}
.vd-event-titlerow{display:flex;align-items:center;gap:8px;}
.vd-event-title{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--vd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vd-event-desc{
	font-size:12.5px;color:var(--vd-mute);margin-top:6px;line-height:1.5;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-event-more{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--vd-mute2);transition:color .15s;}
.vd-event-card:hover .vd-event-more{color:var(--vd-accent);}
.vd-event-empty{padding:28px 8px;text-align:center;color:var(--vd-mute2);font-size:13px;}

/* ============ 후기 요약 ============ */
.vd-review-summary{
	display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:0;
}
.vd-rev-avg{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-right:26px;}
.vd-rev-avg-num{font-size:40px;font-weight:600;color:var(--vd-ink);line-height:1;}
.vd-rev-avg-max{font-size:18px;font-weight:500;color:var(--vd-mute2);margin-left:1px;}
.vd-rev-avg-stars{display:flex;align-items:center;gap:1px;justify-content:center;margin-top:7px;}
.vd-rev-avg-count{font-size:14px;font-weight:500;color:var(--vd-sub);margin-top:6px;}
.vd-rev-cnt-num{color:var(--vd-ink);font-weight:700;}
.vd-rev-dist{flex:1;min-width:200px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-left:1px solid #eef0f3;padding:0 26px;}
.vd-dist-row{display:flex;align-items:center;gap:2px;position:relative;}
.vd-dist-row:hover .vd-dist-bar{background:#D7DCE3;}
.vd-dist-row:hover .vd-dist-label,
.vd-dist-row:hover .vd-dist-count{color:var(--vd-ink);}
.vd-dist-label{font-size:12.5px;font-weight:500;color:var(--vd-sub);width:26px;flex-shrink:0;white-space:nowrap;}
.vd-dist-bar{flex:1;height:9px;border-radius:5px;background:#E6EAEF;overflow:visible;transition:background .15s;margin-left:11px;margin-right:11px;}
.vd-dist-fill{height:100%;border-radius:4px;background:var(--vd-amber);position:relative;}
.vd-dist-count{font-size:12px;font-weight:600;color:var(--vd-sub);text-align:right;flex-shrink:0;white-space:nowrap;}
.vd-rev-side{flex:0 0 200px;display:flex;flex-direction:column;justify-content:center;gap:12px;border-left:1px solid #eef0f3;padding-left:26px;}
/* 추천율 반원 게이지 카드 */
.vd-rec-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--vd-bd);border-radius:10px;padding:12px 14px;}
.vd-gauge{position:relative;flex:0 0 62px;width:62px;}
.vd-gauge-svg{display:block;width:100%;height:auto;overflow:visible;}
.vd-gauge-track{fill:none;stroke:#E6EAEF;stroke-width:9;stroke-linecap:round;}
.vd-gauge-val{fill:none;stroke:var(--vd-accent);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .4s ease;}
.vd-gauge-pct{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);font-size:15px;font-weight:700;color:var(--vd-ink);line-height:1;}
.vd-shell.is-guar .vd-score{color:#3B82F6;}
.vd-shell.is-guar .vd-rev-avg-num{color:#3B82F6;}
.vd-shell.is-guar .vd-gauge-val{stroke:#3B82F6;}
.vd-shell.is-guar .vd-gauge-pct{color:#3B82F6;}
.vd-shell.is-guar .vd-dist-fill{background:#3B82F6;}
.vd-shell.is-exc .vd-score{color:#C99A3C;}
.vd-shell.is-exc .vd-rev-avg-num{color:#C99A3C;}
.vd-shell.is-exc .vd-gauge-val{stroke:#C99A3C;}
.vd-shell.is-exc .vd-gauge-pct{color:#C99A3C;}
.vd-shell.is-exc .vd-dist-fill{background:#C99A3C;}
.vd-rec-text{min-width:0;}
.vd-rec-text-title{font-size:13px;font-weight:600;color:var(--vd-sub);}
.vd-rec-text-sub{font-size:13px;color:var(--vd-mute2);margin-top:3px;white-space:nowrap;}
.vd-rec-text-sub strong{font-weight:700;color:var(--vd-accent);}
.vd-rec-icon{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(49,130,246,0.1);}
.vd-rec-prompt-title{font-size:13px;font-weight:700;color:var(--vd-ink);line-height:1.35;}
.vd-rec-prompt-sub{font-size:12px;color:var(--vd-sub);margin-top:3px;line-height:1.35;}
.vd-rec-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;border:none;border-radius:9px;background:#1b6ce3;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.vd-review-controls .vd-write-btn{display:none;} /* 하단 후기작성 버튼 숨김 — 상단 패널 버튼으로 통합 */
.vd-rec-btn:hover{background:#1b6ce3;}
.vd-rec-btn.is-cancel{background:#fff;border:1px solid var(--vd-bd2);color:var(--vd-sub);}
.vd-rec-btn.is-cancel:hover{background:#FAFBFC;border-color:var(--vd-bd-hover);color:var(--vd-ink);}
@media (max-width:768px){
	.vd-review-summary{flex-direction:column;align-items:stretch;}
	.vd-rev-avg{padding-right:0;padding-bottom:14px;}
	.vd-rev-dist{border-left:0;border-top:1px solid #eef0f3;padding:14px 0 0;}
	.vd-rev-side{flex-basis:auto;border-left:0;border-top:1px solid #eef0f3;padding:14px 0 0;}
}

.vd-review-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 4px;}

/* ---- 후기 정렬 드롭다운 (네이티브 na_comment_sort 트리거) ---- */
.vd-sort{position:relative;}
.vd-sort-toggle{
	display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 6px;border:0;background:transparent;
	font-size:14px;font-weight:600;color:var(--vd-sub);cursor:pointer;white-space:nowrap;font-family:inherit;
}
.vd-sort-caret{transition:transform .15s;}
.vd-sort.is-open .vd-sort-caret{transform:rotate(180deg);}
.vd-sort-menu{
	position:absolute;left:0;top:38px;z-index:41;min-width:140px;background:#fff;border:1px solid #EAEDF1;
	border-radius:11px;box-shadow:0 10px 28px rgba(17,24,39,0.13);padding:5px;
}
.vd-sort-menu[hidden]{display:none;}
.vd-sort-opt{
	display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:36px;padding:0 11px;
	border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--vd-sub);
	cursor:pointer;white-space:nowrap;font-family:inherit;text-align:left;
}
.vd-sort-opt:hover{background:#F5F7FA;color:var(--vd-ink);}
.vd-sort-opt.is-active{background:var(--vd-accent-soft);color:var(--vd-accent);font-weight:600;}
.vd-sort-check{opacity:0;flex-shrink:0;}
.vd-sort-opt.is-active .vd-sort-check{opacity:1;}

/* ---- 네이티브 댓글 헤더의 정렬 드롭다운/카운트 숨김 (우리 vd-sort 로 대체) ---- */
#viewcomment > .clearfix.f-de{display:none;}
/* 후기 리스트 좌우 패딩 제거 — Bootstrap px-3(16px !important) 무력화하여 상세소개 본문(.vd-card 24px)과 좌우 끝 정렬 일치 */
#bo_v.vd-shell #viewcomment{padding-left:0 !important;padding-right:0 !important;}

/* ---- 네이티브 페이징 → 디자인 ‹ 1 2 › 리스타일 ---- */
#viewcomment .border-top.pb-3{border:0 !important;padding:0 !important;}
#viewcomment .border-top.pb-3 .col-md-3{display:none;}            /* '새로운 리뷰 확인' 버튼 숨김 */
#viewcomment .border-top.pb-3 .col-md-9{max-width:100%;flex:0 0 100%;padding-top:24px !important;}
#viewcomment .pagination{display:flex;justify-content:center;gap:6px;border:0;margin:0;padding:0;flex-wrap:wrap;}
#viewcomment .pagination .page-item{list-style:none;margin:0;}
#viewcomment .pagination .page-first,
#viewcomment .pagination .page-last{display:none;}               /* 양끝 더블화살표 숨김 → ‹ 1 2 › */
#viewcomment .pagination .page-link{
	display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;
	border:1px solid var(--vd-bd2);border-radius:7px;background:#fff;color:var(--vd-sub);
	font-size:12px;font-weight:600;text-decoration:none;line-height:1;box-shadow:none;
}
#viewcomment .pagination .page-link:hover{border-color:var(--vd-bd-hover);background:#FAFBFC;color:var(--vd-accent);}
#viewcomment .pagination .page-item.active .page-link{background:var(--vd-accent);border-color:var(--vd-accent);color:#fff;}
#viewcomment .pagination .page-item.disabled .page-link{color:#CDD2D9;background:#fff;border-color:#EEF0F3;cursor:default;}
/* 리뷰 작성 폼: 기본 접힘 (버튼 토글로 전개). 로드시 comment_box('','c')의 display=''가 이 값으로 환원 */
#bo_v.vd-shell #bo_vc_w{display:none;margin-top:16px;}
#bo_v.vd-shell #bo_vc_login{margin-top:16px;}
.vd-write-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 15px;
	border:none;border-radius:9px;background:var(--vd-accent);color:#fff;font-size:13px;font-weight:600;
	cursor:pointer;font-family:inherit;
}
.vd-write-btn:hover{filter:brightness(0.96);color:#fff;}
.vd-write-btn svg{display:block;width:14px;height:14px;}
/* 작성 취소 상태: 흰색/아웃라인 */
.vd-write-btn.is-cancel{background:#fff;border:1px solid var(--vd-bd2);color:var(--vd-mute);}
.vd-write-btn.is-cancel:hover{filter:none;background:#FAFBFC;border-color:var(--vd-bd-hover);color:var(--vd-sub);}
/* 후기 등록(제출) 버튼 — 후기 작성 버튼과 색상 통일 */
#bo_v.vd-shell #btn_submit{background:#1b6ce3;border-color:#1b6ce3;}
#bo_v.vd-shell #btn_submit:hover{background:#1b6ce3;filter:none;}

/* ============ 추천사이트 ============ */
.vd-rec{margin-top:18px;}
/* 기존 pick-slider 위젯 썸네일을 4:3 으로 강제 */
.vd-rec .na-widget img,
.vd-rec .widget img,
.vd-rec .owl-carousel img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block;}

/* ============ 모달(기존 Bootstrap 재사용 + 톤 보정) ============ */
.vd-shell .ts-info-modal .modal-content,
.vd-event-modal .modal-content{border:0;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.32);}
.vd-event-modal .modal-header{align-items:center;border-bottom:1px solid var(--vd-bd);}
.vd-event-modal .modal-title{font-size:16px;font-weight:600;color:var(--vd-ink);}
.vd-event-banner{width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:34px;}
.vd-event-desc-full{font-size:13.5px;color:var(--vd-body);line-height:1.65;margin-bottom:14px;}
.vd-kv-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--vd-bd4);}
.vd-kv-k{font-size:13px;color:var(--vd-mute);font-weight:600;flex-shrink:0;}
.vd-kv-v{font-size:13.5px;color:var(--vd-ink);font-weight:600;text-align:right;}
.vd-notes{margin-top:16px;background:#F8FAFC;border:1px solid var(--vd-bd);border-radius:10px;padding:14px;}
.vd-notes-title{font-size:12px;font-weight:500;color:var(--vd-sub);margin-bottom:7px;}
.vd-note{display:flex;gap:7px;font-size:12.5px;color:var(--vd-mute);line-height:1.55;margin-top:5px;}
.vd-note b{color:var(--vd-accent);font-weight:700;}

/* ============ 반응형 ============ */
@media (max-width:600px){
	.vd-hero{padding:14px;gap:16px;}
	.vd-hero-left{flex:1 1 100%;}
	.vd-card{padding:18px;}
	.vd-h1{font-size:22px;}
	.vd-reg-date{margin-left:0;flex-basis:100%;}
}

/* ---- 숫자류 폰트 (Oxanium) — 한글은 Paperozi 폴백 ---- */
.vd-score,
.vd-count,
.vd-reg-date,
.vd-tab-count,
.vd-head-count,
.vd-rev-avg-num,
.vd-rev-avg-count,
.vd-dist-count,
.vd-site-val--code,
.vd-gauge-pct,
.vd-event-period{
	font-family:'Oxanium','Paperozi',sans-serif;
}