@charset "utf-8";
/* ==========================================================
   review_popup.css — 리얼후기 카드(.bcard) 클릭 팝업
   사용: 메인(index.jsp), 입주·이사·거주청소(service/cleaning/index.jsp)
   스크립트: /js/review_popup.js
   ========================================================== */

/* 카드 클릭 → 팝업 (data-pop 이 있는 카드만) */
.bcard[data-pop]{cursor:pointer; transition:box-shadow .2s ease, transform .2s ease;}
.bcard[data-pop]:hover{box-shadow:0 16px 36px rgba(24,34,66,.18); transform:translateY(-3px);}
.bcard[data-pop]:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}

/* 마퀴 끌어서 넘기기 (/js/review_marquee.js)
   - touch-action:pan-y : 모바일에서 세로 스크롤은 그대로 두고 가로 밀기만 스크립트가 받는다
   - user-select:none : 끄는 동안 카드 글자가 파랗게 선택되지 않게 */
.marquee-wrap{touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.marquee-wrap img{-webkit-user-drag:none;}
.marquee-wrap.is-dragging,
.marquee-wrap.is-dragging .bcard[data-pop]{cursor:grabbing;}
.marquee-wrap.is-dragging .bcard[data-pop]:hover{transform:none;}

/* iOS 전용 (/js/review_marquee.js 의 initNative 가 붙인다)
   큰 레이어를 transform 으로 움직이면 카드가 사라지거나 건너뛰므로 실제 가로 스크롤로 흘린다.
   animation-duration 은 스크립트가 속도 계산에 읽으므로 animation-name 만 끈다.
   터치 뒤 :hover 가 남아 카드가 들린 채 있지 않게 hover 이동도 끈다. */
.marquee-wrap.mq-native{
	overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
	scrollbar-width:none; touch-action:pan-x pan-y;
}
.marquee-wrap.mq-native::-webkit-scrollbar{display:none;}
.marquee-wrap.mq-native .marquee{animation-name:none; transform:none;}
.marquee-wrap.mq-native .bcard[data-pop]:hover{transform:none;}

/* ---------- 리얼후기 팝업 ----------
   팝업은 스크립트가 body 로 옮기므로 페이지 스코프(.main-page 등) 밖에 둔다 */
html.bpop-lock,
html.bpop-lock body{overflow:hidden;}
.bpop{
	display:none;
	position:fixed; inset:0; z-index:10000;
	align-items:center; justify-content:center;
}
.bpop.on{display:flex;}
.bpop-dim{position:absolute; inset:0; background:rgba(10,16,30,.62);}
.bpop-box{
	position:relative;
	width:min(640px,calc(100% - 32px));
	max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px);
	overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
	background:#fff; border-radius:20px;
	box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.bpop-body{padding:clamp(28px,4vw,40px) clamp(20px,4vw,40px) clamp(28px,4vw,40px);}
/* 닫기 버튼 : 내용이 스크롤돼도 오른쪽 위에 붙어 있도록 sticky */
.bpop-close{
	position:sticky; top:12px; z-index:2;
	float:right; margin:12px 12px -52px 0;
	width:40px; height:40px; padding:0; border:0; border-radius:50%;
	background:rgba(255,255,255,.92); box-shadow:inset 0 0 0 1px var(--line);
	cursor:pointer;
}
.bpop-close span{
	position:absolute; top:50%; left:50%; width:18px; height:2px;
	background:var(--ink); border-radius:2px;
}
.bpop-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.bpop-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.bpop-close:hover{background:#F2F5F9;}
/* 분류(브랜드색) · 지역(회색) 알약 — 고객후기 상세와 같은 구성 */
.bpop-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 48px 12px 0;}
.bpop-cat{
	display:inline-block; padding:6px 12px; border-radius:999px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-meta); font-weight:600; line-height:1;
}
.bpop-cat.region{background:#F2F5F9; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);}
.bpop-lead{
	margin:0 48px 12px 0; color:var(--ink);
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
	word-break:keep-all;
}
.bpop .bmeta{
	display:flex; align-items:center; gap:7px; margin-bottom:18px; color:var(--muted);
	font-size:var(--fs-meta); line-height:var(--lh-meta);
}
.bpop .bmeta .w{font-weight:600; color:var(--ink-2);}
/* 메인 이미지 : 서브 이미지마다 비율이 달라도 자리가 흔들리지 않게 4:3 고정 */
.bpop-img{aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#E3EBF3;}
.bpop-img img{display:block; width:100%; height:100%; object-fit:cover;}
/* 서브 이미지 */
.bpop-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.bpop-thumb{
	position:relative; aspect-ratio:1/1; padding:0; border:0; border-radius:8px; overflow:hidden;
	background:#E3EBF3; cursor:pointer; opacity:.55; transition:opacity .2s ease;
}
.bpop-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.bpop-thumb:hover{opacity:.85;}
.bpop-thumb.on{opacity:1;}
/* 선택 테두리는 사진 위에 덮어 그린다 (inset 그림자는 사진에 가려진다) */
.bpop-thumb.on::after{content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 0 2px var(--brand);}
/* 후기 영상 */
.bpop-movie{margin-top:14px;}
.bpop-movie video{display:block; width:100%; height:auto; border-radius:12px; background:#000;}
/* 본문 — 고객후기 게시판의 에디터 HTML 이 그대로 들어온다 */
.bpop-desc{
	margin:22px 0 0; color:var(--ink-2);
	font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
	word-break:keep-all; overflow-wrap:anywhere;
}
.bpop-desc p{margin:0 0 .6em;}
.bpop-desc p:last-child{margin-bottom:0;}
.bpop-desc img{max-width:100%; height:auto; border-radius:8px;}
@media (max-width:640px){
	/* 모바일도 PC 와 같은 가운데 모달 — 좌우 여백·모서리만 조금 줄인다 */
	.bpop-box{width:calc(100% - 32px); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); border-radius:16px;}
	.bpop-body{padding:24px 18px 26px;}
	.bpop-close{width:36px; height:36px; top:10px; margin:10px 10px -46px 0;}
	.bpop-lead,.bpop-chips{margin-right:40px;}
	.bpop-thumbs{gap:6px;}
}