/* =====================================================================
 * 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:var(--brand);
	--vd-accent-soft:var(--brand-soft);
	--vd-amber:var(--grade-normal);	/* 등급색 회색 통일 (일반·미지정 동일). .vd-score / .vd-dist-fill 이 참조 */
	--vd-amber-empty:var(--star-empty);
	--vd-ink:var(--ink);
	--vd-body:var(--body);
	--vd-sub:var(--sub);
	--vd-mute:var(--muted);
	--vd-mute2:var(--muted-2);
	--vd-mute3:#AEB4BC;
	--vd-bd:#EEF0F3;
	--vd-bd2:var(--line-2);
	--vd-bd3:#F1F3F6;
	--vd-bd4:#F4F5F7;
	--vd-bd-hover:#C7D4E8;
	--vd-hover:#FAFBFC;	/* hover-lift 공용 배경 (카드·버튼 오버 시 연회색 채움) */
	--vd-thumb-bg:var(--thumb-bg);
	font-family:"Paperozi","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
	color:var(--vd-body);
	background:transparent;
	padding:0 0 10px;	/* 상단바가 이 안에 있어 위 패딩은 브레드크럼 여백이 된다 — 자유게시판·목록(0)과 맞춤 */
	-webkit-font-smoothing:antialiased;
}
.vd-shell *{box-sizing:border-box;}

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

/* 좌우 패딩 없음 — 본문 실폭을 자유게시판(#bo_v)과 맞춘다. 여백은 .vd-card 24px 가 담당 */
/* .na-top-sidemenu--view: 뷰에서 네비를 본문 카드 폭에 정렬 — 클래스는 head.php 부여 */
.vd-wrap,.na-top-sidemenu--view{max-width:900px;margin:0 auto;}
/* 카드 2개 분리 — 상단(히어로) / 하단(탭+콘텐츠). vd-col 은 투명 컨테이너(카드 사이 간격만) */
.vd-col{display:flex;flex-direction:column;gap:14px;}
/* 하단 카드 — 탭 + 상세/이벤트/후기 패널 묶음 */
.vd-panelcard{background:#fff;border:1px solid var(--vd-bd2);border-radius:var(--r-16);overflow:clip;}

/* ---- 레거시 #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:var(--vd-sub);}
.vd-crumb .cur{color:var(--vd-body);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:var(--r-8);background:var(--card);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:var(--vd-hover);color:var(--vd-accent);text-decoration:none;}
/* FA 글리프는 em 박스 아래쪽에 그려져 옆 텍스트보다 낮게 앉는다 — 아이콘만 올려 시각 중심을 맞춘다 */
.vd-list-btn .fa{font-size:15px;line-height:1;position:relative;top:-1px;}

/* ============ 상단바 우측 액션 (URL복사 / 관리) ============
   아이콘 전용 · 「목록으로」와 동일한 36px 높이 · 미니멀 */
.vd-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* 아이콘 버튼: 상단바 직계 버튼에만 적용 (드롭다운 항목엔 상속 금지) */
.vd-topbar-actions > .btn,
.vd-topbar-actions > .btn-group > .btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;padding:0 !important;margin:0 !important;
	border:1px solid var(--vd-bd2);border-radius:var(--r-8);background:var(--card);color:var(--vd-sub);
	transition:border-color .15s,background .15s,color .15s;
}
.vd-topbar-actions > .btn:hover,
.vd-topbar-actions > .btn-group > .btn:hover{border-color:var(--vd-bd-hover);background:var(--vd-hover);color:var(--vd-accent);}
/* 16px = 규약 "상단바 액션 아이콘" 스텝(DESIGN_SYSTEM.md §2) */
.vd-topbar-actions > .btn .fa,
.vd-topbar-actions > .btn-group > .btn .fa{font-size:16px;line-height:1;}

/* 파란 포커스 링·잔상 제거 (부트스트랩 .btn:focus box-shadow, 브라우저 outline) */
.vd-topbar-actions .btn:focus,
.vd-topbar-actions .btn:active,
.vd-topbar-actions .btn.active,
.vd-topbar-actions .btn:not(:disabled):not(.disabled):active,
.vd-topbar-actions .btn:focus-visible,
.vd-topbar-actions .show > .btn.dropdown-toggle,
.vd-topbar-actions .show > .btn.dropdown-toggle:focus{
	outline:0 !important;box-shadow:none !important;
}
/* 열린 상태 표시는 배경/테두리로만 */
.vd-topbar-actions .show > .btn.dropdown-toggle{border-color:var(--vd-bd-hover);background:#F3F4F6;color:var(--vd-accent);}
/* 부트스트랩 캐럿 제거 (아이콘만 노출) */
.vd-topbar-actions .dropdown-toggle::after{display:none;}

/* 드롭다운 래퍼는 완전 투명 — 보이는 카드는 안쪽 .btn-group-vertical 하나뿐 */
.vd-topbar-actions .dropdown-menu{
	min-width:148px;margin-top:6px;
	background:transparent !important;border:0 !important;border-radius:0 !important;
	box-shadow:none !important;padding:0 !important;
}
.vd-topbar-actions .dropdown-menu .btn-group-vertical{
	width:100%;background:var(--card);
	border:1px solid var(--vd-bd2);border-radius:10px;overflow:hidden;
	box-shadow:0 6px 20px rgba(17,24,39,.10);
}
/* 메뉴 항목: 평평한 텍스트 행 (btn-primary 등 색상 버튼도 동일하게 통일) */
.vd-topbar-actions .dropdown-menu .btn,
.vd-topbar-actions .dropdown-menu .btn-primary{
	display:flex;align-items:center;gap:8px;
	width:100%;height:auto;
	padding:10px 14px !important;margin:0 !important;
	border:0 !important;border-radius:0 !important;
	background:var(--card) !important;color:var(--vd-ink) !important;
	font-size:13px;font-weight:500;text-align:left;white-space:nowrap;
	transition:background .12s,color .12s;
}
.vd-topbar-actions .dropdown-menu .btn + .btn{border-top:1px solid var(--vd-bd2) !important;}
.vd-topbar-actions .dropdown-menu .btn:hover{background:#F5F6F8 !important;color:var(--vd-accent) !important;}
.vd-topbar-actions .dropdown-menu .btn .fa{font-size:14px;color:var(--vd-mute2);}
.vd-topbar-actions .dropdown-menu .btn:hover .fa{color:var(--vd-accent);}

/* 한 줄 고정: 「목록으로」(좌) — 브레드크럼(가변) — 아이콘(우) 이 항상 같은 행 */
.vd-topbar{flex-wrap:nowrap;}
.vd-topbar .vd-crumb{
	flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden;
	white-space:nowrap;text-overflow:ellipsis;
}
.vd-topbar .vd-crumb .cur{max-width:none;}
@media (max-width:575px){
	.vd-topbar{gap:8px;}
	.vd-topbar-actions{margin-left:auto;}
}
/* 아주 좁은 화면: 브레드크럼은 「목록으로」와 역할이 겹치므로 숨기고 버튼만 한 줄 유지 */
@media (max-width:420px){
	.vd-topbar .vd-crumb{display:none;}
}

/* ============ HERO ============ */
.vd-hero{
	padding:18px;display:flex;gap:22px;flex-wrap:nowrap;align-items:stretch;
	background:#fff;border:1px solid var(--vd-bd2);border-radius:var(--r-16);
}
.vd-hero-left{flex:0 1 320px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:9px;}
/* 등급 안내를 좌측 컬럼 바닥에 붙이고, 높이를 우측 CTA(46px)와 맞춘다 */
.vd-hero-left .vd-notice{margin-top:auto;min-height:46px;}
.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);}

/* 안내 메뉴 — 이용안내 섹션 모달 진입 카드 (가로 4칸) */
.vd-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.vd-cat-btn{
	box-sizing:border-box;min-width:0;
	display:flex;align-items:center;gap:10px;padding:14px 12px;min-height:74px;text-align:left;
	border:1px solid var(--vd-bd);border-radius:12px;background:#fff;
	color:var(--vd-sub);cursor:pointer;
	transition:border-color .15s,background .15s,box-shadow .15s;font-family:inherit;
}
.vd-cat-btn:hover{border-color:var(--vd-bd-hover);background:var(--vd-hover);box-shadow:0 4px 14px rgba(17,24,39,0.07);}
.vd-cat-ico{
	flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
	line-height:1;
}
.vd-cat-ico svg{width:32px;height:32px;display:block;}
.vd-cat-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.vd-cat-emoji{font-size:16px;line-height:1;}
.vd-cat-label{font-size:14px;font-weight:600;color:var(--vd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 설명문은 2줄까지 줄바꿈 허용(카드 높이가 그만큼 늘어남). 한글은 어절 단위로 끊는다. */
.vd-cat-sub{
	font-size:12px;color:var(--vd-mute);line-height:1.4;word-break:keep-all;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-cat-arrow{margin-left:auto;padding-left:4px;font-size:14px;color:#9aa4b6;line-height:1;flex-shrink:0;}
@media (max-width:820px){.vd-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:460px){.vd-cat-grid{grid-template-columns:1fr;}}

.vd-hero-right{flex:1 1 340px;min-width:0;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:13.5px;color:var(--vd-mute2);white-space:nowrap;position:relative;top:1px;}
.vd-reg-date{font-size:13.5px;color:var(--vd-mute2);white-space:nowrap;margin-left:auto;position:relative;top:1px;}

/* 사이트 정보 표 */
/* 우측 컬럼의 남는 세로 공간을 정보표가 흡수 → 좌측(썸네일+등급안내) 하단과 CTA 하단 정렬 */
.vd-site-table{margin-top:15px;border:1px solid #E6E9ED;border-radius:var(--r-12);overflow:hidden;flex:1 1 auto;display:flex;flex-direction:column;}
.vd-site-row{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-height:42px;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:13.5px;color:var(--vd-sub);font-weight:600;flex-shrink:0;white-space:nowrap;align-self:stretch;display:flex;align-items:center;background:var(--surface-fill,#f4f4f4);}
.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:15px;font-weight:600;text-decoration:none;}
.vd-site-val--addr:hover{color:var(--vd-accent);text-decoration:underline;}
.vd-site-val--code{font-size:15px;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:500;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:var(--vd-hover);color:var(--vd-ink);}
.vd-copy-btn svg{display:block;}

/* CTA */
.vd-cta{
	display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:9px;
	border-radius:var(--r-12);background:var(--brand);color:#fff;font-size:15px;font-weight:600;
	text-decoration:none;white-space:nowrap;
	transition:background-color .2s ease;
}
/* hover — 버튼은 가만히 두고 화살표만 살짝 대각선 이동 */
.vd-cta:hover{background:#1a5bc7;}
.vd-cta:hover .vd-cta-arrow{transform:translate(2px,-2px);}
.vd-cta:active{background:#1856bd;}
.vd-cta:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.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-arrow{display:inline-flex;transition:transform .2s cubic-bezier(.22,.61,.36,1);}
/* 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;justify-content:center;gap:9px;margin-top:14px;padding:9px 13px;border-radius:10px;
	background:#f8f8f8;border:0;
}
.vd-notice svg{flex-shrink:0;}
.vd-notice-text{font-size:13.5px;color:var(--vd-sub);line-height:1.5;text-align:center;}
.vd-notice-text b{font-weight:600;color:#3A3F47;}
/* 보증업체 안내 강조 (옅은 파란 배경 + 파란 텍스트/아이콘) */
.vd-notice--guaranteed{background:#f2f7ff;border:0;}
.vd-notice--guaranteed svg{stroke:var(--brand);}
.vd-notice--guaranteed .vd-notice-text b{color:var(--brand);}

/* ============ 상태 박스(승인/수정대기/잠금) — 카드 톤에 맞춤 ============ */
/* 상태 박스 — 단일 패널 안의 행(카드 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;}

/* ============ 승인 바(Approval Bar) — tu.png 리디자인 ============ */
/* 위(.vd-hero)·아래(.vd-panelcard) 카드와 동일한 박스로 통일
   (배경 #fff · 테두리 var(--vd-bd2) · 라운드 var(--r-16) · 그림자 없음, 간격은 .vd-col gap) */
.vd-approval-bar{
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
	padding:15px 18px;
	background:#fff;border:1px solid var(--vd-bd2);border-radius:var(--r-16);
}
.vd-appr-badge{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
	padding:6px 12px;border-radius:8px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;
}
.vd-appr-badge .vd-appr-ico{font-size:7px;}
/* 리스트 썸네일 오버레이 배지(.sbc-cl__ov-badge)와 동일 색상: 솔리드 배경 + 흰 글자 */
.vd-appr-badge--pending{background:#e65100;color:#fff;}
.vd-appr-badge--pending .vd-appr-ico{color:#fff;}
.vd-appr-badge--rejected{background:#c62828;color:#fff;}
.vd-appr-msg{flex:1 1 auto;min-width:120px;font-size:13.5px;color:var(--vd-sub);line-height:1.5;}
.vd-appr-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-left:auto;}
.vd-appr-btn{
	display:inline-flex;align-items:center;justify-content:center;
	height:36px;padding:0 16px;border-radius:8px;font-size:13.5px;font-weight:700;
	cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none;line-height:1;
}
.vd-appr-btn--primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.vd-appr-btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;}
.vd-appr-btn--reject{background:#fff;color:#EF4444;border-color:#FCA5A5;}
.vd-appr-btn--reject:hover{background:#FEF2F2;border-color:#EF4444;}
.vd-appr-note{flex:0 0 auto;font-size:12.5px;color:var(--vd-mute);margin-left:auto;}
@media (max-width:560px){
	.vd-appr-actions,.vd-appr-note{margin-left:0;width:100%;}
	.vd-appr-btn{flex:1;}
}

/* ============ 세그먼트 탭(쇼핑몰형) ============ */
/* 각진 컨테이너, 선택=흰/연결, 미선택=회색/구분선. 스티키는 JS 핀이 헤더 아래로 고정 */
.vd-tabs{
	position:sticky;top:var(--vd-sticky-top,0px);z-index:30;display:flex;gap:0;background:#fff;border-radius:0;padding:0;box-shadow:none;
	border-bottom:1px solid #E3E6EA;
}
.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:var(--surface-fill,#f4f4f4);color:var(--vd-sub);font-weight:600;
	border:0;border-left:1px solid #E9EBEE;
	font-family:inherit;transition:background .15s,color .15s;text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.vd-tab:first-child{border-left:0;}
.vd-tab:focus,.vd-tab:active{outline:none;}
.vd-tab:not(.active):focus,.vd-tab:not(.active):active{color:var(--vd-ink);}
.vd-tab:hover{color:var(--vd-ink);text-decoration:none;}
.vd-tab.active{background:#fff;color:var(--vd-ink);font-weight:700;}
.vd-tab-count{
	display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 6px;border-radius:var(--r-8);
	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-ink);color:#fff;}

/* ============ 섹션(단일 패널 내부, 카드 chrome 없음 + 구분선) ============ */
.vd-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px;border-bottom:1px solid #E3E6EA;}
#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(--brand);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:var(--r-8);
	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(--brand);}
.vd-act-bookmark.is-active svg{fill:var(--brand);}
/* 좋아요 — 알약형 */
.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:var(--vd-hover);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:var(--r-12);padding:16px 17px;cursor:pointer;background:var(--card);
	transition:border-color .15s,background .15s,box-shadow .15s;text-align:left;font-family:inherit;
}
.vd-event-card:hover{border-color:var(--vd-bd-hover);background:var(--vd-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:600;}
.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:var(--vd-bd2);}
.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:var(--vd-bd);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{width:34px;font-size:12px;font-weight:600;color:var(--vd-sub);text-align:right;flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums;}
.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:var(--brand);}
.vd-shell.is-guar .vd-rev-avg-num{color:var(--brand);}
.vd-shell.is-guar .vd-gauge-val{stroke:var(--brand);}
.vd-shell.is-guar .vd-gauge-pct{color:var(--brand);}
.vd-shell.is-guar .vd-dist-fill{background:var(--brand);}
.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-shell.is-normal .vd-score{color:#6b7280;}
.vd-shell.is-normal .vd-rev-avg-num{color:#6b7280;}
.vd-shell.is-normal .vd-gauge-val{stroke:#6b7280;}
.vd-shell.is-normal .vd-gauge-pct{color:#6b7280;}
.vd-shell.is-normal .vd-dist-fill{background:#6b7280;}
.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(39, 113, 227,0.1);}
.vd-rec-prompt-title{font-size:13px;font-weight:600;color:var(--vd-ink);line-height:1.35;word-break:keep-all;}
.vd-rec-prompt-sub{font-size:12px;color:var(--vd-sub);margin-top:3px;line-height:1.35;word-break:keep-all;}
.vd-rec-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;border:none;border-radius:var(--r-8);background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease,color .15s ease;}
.vd-review-controls .vd-write-btn{display:none;} /* 하단 후기작성 버튼 숨김 — 상단 패널 버튼으로 통합 */
.vd-rec-btn:hover{background:#1559c0;box-shadow:0 3px 10px rgba(27,108,227,0.25);transform:translateY(-1px);}
.vd-rec-btn:active{transform:translateY(0);box-shadow:none;}
.vd-rec-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.vd-rec-btn.is-cancel{background:#fff;border:1px solid var(--vd-bd2);color:var(--vd-sub);}
.vd-rec-btn.is-cancel:hover{background:var(--vd-hover);border-color:var(--vd-bd-hover);color:var(--vd-ink);box-shadow:0 3px 10px rgba(17,24,39,0.08);}
@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;}
	/* 모바일: 유도 카드는 숨기고(2줄 차지) 작성 버튼만 전체폭으로 노출 */
	.vd-rev-side{flex-basis:auto;border-left:0;border-top:1px solid #eef0f3;padding:14px 0 0;}
	.vd-rev-side .vd-rec-card{display:none;}
	.vd-rev-side .vd-rec-btn{width:100%;}
}

.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{
	/* 좌측 패딩 0 — 아래 후기 목록과 같은 세로 라인에 맞춘다 (우측은 캐럿 클릭 영역으로 유지) */
	display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 0;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:var(--r-12);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;}

/* 후기 카드 본문 — Bootstrap p-3 의 좌우 16px 만 무력화(세로 16px 는 유지)하여
   상세소개 본문(.vd-card 24px / 모바일 18px)과 같은 세로 라인에 정렬 */
#bo_v.vd-shell .ts-review-body{padding-left:0 !important;padding-right:0 !important;}

/* 아바타는 absolute(패딩 박스 기준)라 위 규칙으로 움직이지 않는다 → 직접 0으로.
   헤더는 아바타(35px) 폭만큼만 들여쓴다. 기존 42px 는 p-3 의 16px 를 전제한 값이라 그대로 두면 겹친다. */
#bo_v.vd-shell .ts-review-body.cmt-chat .cmt-chat__avatar{left:0;}
#bo_v.vd-shell .ts-review-body.cmt-chat > .d-flex{padding-left:44px;}

/* 액션 버튼줄 · 답글/수정 슬롯 · "후기 없음" 안내도 같은 라인으로 */
#bo_v.vd-shell #viewcomment .cmt-btn{padding-left:0 !important;padding-right:0 !important;}
#bo_v.vd-shell #viewcomment .clearfix.pl-3{padding-left:0 !important;}
#bo_v.vd-shell #bo_vc_empty{padding-left:0 !important;padding-right:0 !important;}

/* 정렬 버튼(.vd-review-controls) 과 첫 후기 사이 여백 축소 —
   레거시 style.css 의 #bo_vc{margin-top:2rem}(32px) 제거. 첫 행의 p-3 상단 16px 는 유지.
   (같은 규칙을 쓰는 .cmt-box(후기 작성 폼)의 상단 간격은 건드리지 않는다) */
#bo_v.vd-shell #bo_vc{margin-top:0;}

/* 후기 하단 액션 줄 — 좌: 도움이됐어요 / 우: 답글·수정·삭제 (한 줄 공유로 세로 높이 절약) */
#bo_v.vd-shell .ts-review-foot{display:flex;align-items:center;gap:12px;}
#bo_v.vd-shell .ts-review-foot .cmt-btn{margin-left:auto;padding:0 !important;}

/* 별점 입력 위젯 — 선택/호버 색을 그 글의 등급색으로 (custom-main.css 의 #ffc107 노랑 무력화).
   --ts-star-full 은 view_comment.skin.php 가 .ts-rating-select 에 인라인 주입한다(별·안내문구가 함께 상속).
   스코프를 폼(#fviewcomment)에 거는 이유: comment_box() 가 폼을 답글/수정 슬롯으로 DOM 이동시킨다. */
#bo_v.vd-shell #fviewcomment .ts-star-btn.selected,
#bo_v.vd-shell #fviewcomment .ts-star-btn:hover,
#bo_v.vd-shell #fviewcomment .ts-star-btn.hovered{color:var(--ts-star-full,#6b7280);}

/* 답글 모드 — 후기 전용 필드 숨김 (평가가 아니므로 일반 댓글 폼으로).
   is-reply 는 comment_box() 가 #fviewcomment 에 토글한다. */
#bo_v.vd-shell .cmt-form.is-reply .ts-rating-select,
#bo_v.vd-shell .cmt-form.is-reply .ts-field-title,
#bo_v.vd-shell .cmt-form.is-reply .ts-photo-attach{display:none;}

/* 후기 행 마우스오버 배경 제거 (custom-main.css 의 #fafafa / 다크 #25262b 무력화).
   custom-main.css 는 목록 스킨과 공용이라 여기서 덮는다. */
#bo_v.vd-shell .ts-review-list .ts-review-card:hover,
html.dark-mode #bo_v.vd-shell .ts-review-list .ts-review-card:hover{background:transparent;}

/* 후기 사이 잔선 — 섹션선(.vd-card #E3E6EA)보다 한 단계 연하게.
   view_comment.skin.php 가 부트스트랩 .border-bottom(#dee2e6 !important)을 쓰고 있어
   그대로 두면 잔선이 구조선보다 진해진다(위계 역전). !important 로 덮는다. */
#bo_v.vd-shell .ts-review-card.border-bottom{border-bottom-color:#EFF1F4 !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!important;gap:6px;border:0;margin:0;padding:0;flex-wrap:wrap;} /* !important: 마크업의 .justify-content-md-start(부트스트랩 !important)를 이겨 PC에서도 중앙정렬 */
#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:var(--card);color:var(--vd-sub);
	font-family:var(--font-num);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:var(--vd-hover);color:var(--vd-accent);}
#viewcomment .pagination .page-link:focus{box-shadow:none;} /* BS4 기본 .2rem 포커스 링 — 클릭 순간 띠 잔상 제거 */
#viewcomment .pagination .page-link:focus-visible{box-shadow:0 0 0 2px var(--brand-soft);} /* 키보드 포커스만 유지 */
#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:var(--star-empty);background:var(--card);border-color:var(--vd-bd);cursor:default;}
/* 폼의 표시는 모달이 관장한다. 여기에 display:none 을 두면 모달을 열어도 폼이 안 보인다. */
#bo_v.vd-shell #bo_vc_w{display:block;margin-top:0;}
#bo_v.vd-shell #bo_vc_login{margin-top:16px;}
#bo_v.vd-shell #bo_vc_w:focus{outline:none;}

/* --vdrm-gap — 모달 안 세로 리듬. 헤더↔별점패널, 패널↔제목, 제목↔내용, 내용↔사진,
   사진↔제출버튼이 전부 이 한 값을 쓴다. (카드 안쪽 여백은 아래 24px 블록) */
#vdim-review{--vdrm-gap:12px;}

/* 모달 안에서는 폼 자체의 회색 박스/테두리를 걷어낸다 (시트가 이미 카드) → 미니멀.
   margin-top 은 레거시 style.css 의 .cmt-box{margin-top:2rem}(32px) 을 덮는다. */
#vdim-review .ts-review-form{background:transparent;border:0;border-radius:0;padding:0 !important;margin-top:var(--vdrm-gap);}

/* ---- 별점 패널 — 연회색 라운드 박스, 별 중앙, 안내문구는 별 아래 ---- */
#vdim-review .ts-rating-select{background:#F8FAFC;border-radius:14px;padding:12px 14px 12px;}
#vdim-review .ts-star-input{display:flex;align-items:center;justify-content:center;gap:12px;line-height:1;}
/* 빈 별도 꽉 찬 별(fa-star). 패널 배경보다 진한 회색으로 대비를 준다. */
/* line-height:1 — 상속된 1.5 는 30px 글리프 위아래로 보이지 않는 공백을 만든다. */
#vdim-review .ts-star-btn{font-size:30px;padding:0;line-height:1;color:#D5DCE6;}
#vdim-review .ts-rating-text{margin-top:8px;text-align:center;font-size:13.5px;font-weight:600;color:#9AA0A8;transition:color .15s;}
/* --ts-star-full 은 부모 .ts-rating-select 에 주입된다(별·문구가 함께 상속). */
#vdim-review .ts-rating-text.is-set{color:var(--ts-star-full,var(--brand));}

/* ---- 글자수 카운터 ---- */
#vdim-review .ts-count{margin-top:4px;text-align:right;font-size:12px;color:#AEB4BC;font-family:'Oxanium','Paperozi',sans-serif;}

/* 세로 여백 통일 (부트스트랩 mb-3(16px) 가 카운터 여백과 겹쳐 쌓인다) */
#vdim-review .ts-field-title,
#vdim-review .ts-photo-attach,
#vdim-review .cmt-form .mb-3{margin-bottom:var(--vdrm-gap) !important;}
#vdim-review .ts-rating-select{margin-bottom:var(--vdrm-gap);}

/* 헤더 구분선 제거. 킷의 .vdim-head border-bottom 을 후기 모달에서만 덮는다. */
#vdim-review .vdim-head{border-bottom:0;}

/* 공용 킷(_co_view_modals.php)의 .vdim-dialog 를 후기 모달에서만 덮는다.
   킷을 직접 고치면 등급안내/이용안내 모달까지 함께 바뀐다. */
#vdim-review .vdim-dialog{font-family:inherit;border-radius:18px;}
#vdim-review .vdim-title{font-size:18px;}
#vdim-review .vdim-sub{font-size:14px;margin-top:3px;}

/* 닫기 버튼 — 킷의 .vdim-x 는 글리프(&times;)가 line-height 때문에 박스 안에서 치우친다.
   flex 로 정중앙에 놓는다. 세로 정렬은 안내모달과 동일하게 킷의 center 를 그대로 쓴다. */
#vdim-review .vdim-x{
	display:flex;align-items:center;justify-content:center;
	width:32px;height:32px;margin:0 -6px 0 auto;
	font-size:24px;line-height:1;
}

/* 킷은 @540px 분기에서 라운드를 다시 지정한다. 여기서 함께 덮지 않으면 모바일에만 킷 값이 남는다. */
@media (max-width:540px){
	#vdim-review .vdim-dialog{border-radius:24px 24px 0 0;}
}

/* ---- 카드 안쪽 여백 — 좌우/하 24px. 헤더 밴드는 안내모달처럼 상하 대칭(16px)으로 중앙 정렬. ---- */
#vdim-review .vdim-head{padding:16px 24px;}
#vdim-review .vdim-body{padding:0 24px 24px;}



/* height:auto 필수 — 부트스트랩 .form-control 은 height 가 calc() 로 고정이라
   padding 만 키우면 높이가 변하지 않는다. */
#vdim-review #wr_2{height:auto;padding-top:17px;padding-bottom:17px;}
#vdim-review .form-control{padding:10px 12px;}
#vdim-review textarea.form-control{min-height:112px;}

/* ---- 사진 첨부 — + 타일 + 우측 2줄 안내 ---- */
#vdim-review .ts-photo-row{gap:12px;}
#vdim-review .ts-photo-add{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	width:62px;height:62px;margin:0;flex:0 0 62px;
	border:1px dashed #D7DDE5;border-radius:12px;background:#fff;cursor:pointer;
}
#vdim-review .ts-photo-add__plus{font-size:17px;line-height:1;color:#AEB4BC;}
#vdim-review .ts-photo-add__cnt{font-size:10.5px;font-weight:600;color:#9AA0A8;}
#vdim-review .ts-photo-help{font-size:12px;line-height:1.55;color:#AEB4BC;}
#vdim-review .ts-photo-chips{display:flex;flex-wrap:wrap;gap:8px;}

/* 제출 버튼 3단계. 파란색은 상단 "후기 작성" 버튼(.vd-rec-btn)과 같은 var(--brand). */
#vdim-review .ts-submit-btn#btn_submit{
	display:block;width:100%;height:52px;margin-top:calc(var(--vdrm-gap) + 8px);
	border:0;border-radius:12px;background:var(--brand);color:#fff;
	font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
	transition:background-color .15s ease;
}
#vdim-review .ts-submit-btn#btn_submit:hover:not(:disabled){background:#1559c0;}
#vdim-review .ts-submit-btn#btn_submit:disabled{background:#C3CAD6;color:#fff;cursor:default;}
/* 회색 폼 박스 위 회색 입력란이 비활성처럼 보여, 입력란만 흰색 대비 부여.
   스코프를 자리(#bo_vc_w)가 아니라 폼(#fviewcomment)에 거는 이유: comment_box() 가 폼을
   #reply_<id> / #edit_<id> 슬롯으로 DOM 이동시키므로, #bo_vc_w 하위로 걸면 답글/수정 모드에서
   규칙이 풀려 테마의 회색이 다시 이긴다.
   (테마 .sbc-site-main .form-control{background:#f2f4f6 !important} 를 이겨야 하므로 !important) */
#bo_v.vd-shell #fviewcomment .form-control{background:#fff !important;border-color:#dde1e6 !important;}
#bo_v.vd-shell #fviewcomment .form-control:focus{background:#fff !important;border-color:var(--brand) !important;}
/* 부트스트랩 .form-control:focus 의 box-shadow(옅은 파란 발광) 제거. 테두리 색만으로 포커스를 표시한다. */
#bo_v.vd-shell #fviewcomment .form-control:focus{box-shadow:none !important;outline:none;}
#bo_v.vd-shell #fviewcomment .form-control::placeholder{color:#aeb4bc !important;}
/* 사진 추가 타일도 입력란과 같은 흰색 톤으로 (회색 박스 위 대비 확보) */
#bo_v.vd-shell #fviewcomment .ts-photo-add{background:#fff;}
/* hover 강조색을 주황(#ff5722) → 브랜드 파랑으로 */
#bo_v.vd-shell #fviewcomment .ts-photo-add:hover{border-color:var(--brand);color:var(--brand);background:#f2f7ff;}
.vd-write-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 15px;
	border:none;border-radius:var(--r-8);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:var(--vd-hover);border-color:var(--vd-bd-hover);color:var(--vd-sub);}
/* 후기 등록(제출) 버튼 스타일은 아래 #vdim-review 블록의 #btn_submit 규칙으로 일원화 */

/* ============ 추천사이트 ============ */
.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:var(--r-16);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:var(--r-12);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;}

/* ============ 반응형 ============ */

/* 좁은 화면: 히어로를 세로 스택하고 제목·별점·등록날짜를 썸네일 위로 올린다.
   좌/우 컬럼에 display:contents 를 걸어 그 자식들을 .vd-hero 의 직접 flex 아이템으로
   승격시킨 뒤 order 로 재배열한다 (마크업 변경 없이 컬럼 경계를 넘어 순서 조정). */
@media (max-width:767px){
	.vd-hero{flex-direction:column;flex-wrap:nowrap;gap:12px;align-items:stretch;}

	.vd-hero-left,
	.vd-hero-right{display:contents;}

	/* order 미지정 자식이 0으로 맨 위에 튀어오르는 것 방지 */
	.vd-hero-left > *,
	.vd-hero-right > *{order:9;}

	/* 세로 간격은 .vd-hero 의 gap 으로만 준다.
	   각 요소의 margin-top 은 2단 레이아웃(컬럼 내부 간격)용이라 스택에선 gap 과 이중으로 겹친다. */
	.vd-title-row{order:1;}
	.vd-rating-row{order:2;margin-top:0;}
	.vd-thumb{order:3;}
	/* margin-top:auto(바닥 정렬)·min-height:46px(CTA 높이 맞춤) 모두 2단 전용 → 스택에선 해제 */
	.vd-hero-left .vd-notice{order:4;margin-top:0;min-height:0;}
	.vd-site-table{order:5;margin-top:0;}
	.vd-cta{order:6;margin-top:0;}
}

@media (max-width:600px){
	.vd-hero{padding:14px;}
	.vd-site-row{flex:0 0 auto;min-height:48px;}	/* 세로 스택: 늘어남 없이 기본 높이 유지 */
	.vd-card{padding:18px;}
	.vd-h1{font-size:22px;}
}

/* ---- 숫자류 폰트 (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-gauge-pct,
.vd-event-period{
	font-family:'Oxanium','Paperozi',sans-serif;
}

/* ============ 에러 토스트 (사진 업로드 실패 알림) ============
   body 직속에 붙으므로 #vdim-review 스코프를 쓰면 안 된다.
   z-index 는 .vdim-overlay(10000)·.tsrej-ov(10050) 보다 위여야 모달 위에 보인다. */
.ts-toast-box{
	position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:10100;
	display:flex;flex-direction:column;gap:8px;align-items:center;
	pointer-events:none;padding:0 16px;
}
.ts-toast{
	max-width:min(92vw,420px);padding:11px 16px;border-radius:10px;
	background:rgba(26,29,33,.92);color:#fff;
	font-family:"Paperozi","Pretendard",-apple-system,sans-serif;
	font-size:13.5px;font-weight:500;line-height:1.45;word-break:break-all;
	box-shadow:0 8px 24px rgba(0,0,0,.24);
	animation:tsToastIn .18s ease-out;
}
.ts-toast.is-out{opacity:0;transition:opacity .3s ease;}
@keyframes tsToastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ============ 이벤트 카드 (bizevent 연동) ============ */
/* 카드가 모달 트리거(div) → 상세 링크(a)로 바뀌면서 필요한 보정.
   제목 1줄 / 설명 2줄 말줄임은 위 .vd-event-title / .vd-event-desc 규칙이 이미 처리한다. */
.vd-event-card{text-decoration:none;} /* min-height 106px 는 배지(foot) 행 기준이라 배지 제거(2026-07) 후 하단 공백 유발 → 삭제. 행 높이는 그리드가 맞춘다 */
.vd-event-card:hover,.vd-event-card:focus{text-decoration:none;}
/* 디데이·분류 배지(.vd-event-foot/.vd-event-dday/.vd-event-cat)는 2026-07 카드에서 제거됨 (_co_event_cards.php) */
@media (max-width:576px){
	.vd-event-scroll{grid-auto-columns:248px;}
	.vd-event-card{padding:14px 15px;}
}