/* ===== /review/ 페이지 전용 CSS ===== */
.rvwrap { max-width:1200px; margin:20px auto; padding:0 15px; font-family:'SUIT', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:#222; }

/* 히어로 */
.rvhero { padding:30px 0 20px; border-bottom:1px solid #eee; margin-bottom:20px; text-align:center; }
.rvhero h1 { font-size:32px; font-weight:800; margin-bottom:8px; }
.rvhero p { color:#666; font-size:15px; }

/* 카테고리 탭 */
.rvtabs { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; margin-bottom:24px; border-bottom:2px solid #f0f2f5; }
.rvtabs a { display:inline-block; padding:10px 18px; border-radius:24px; background:#f5f7fb; color:#555; font-size:14px; text-decoration:none; transition:all .15s; }
.rvtabs a:hover { background:var(--rv-primary-soft); color:var(--rv-primary); }
.rvtabs a.on { background:var(--rv-primary); color:#fff; font-weight:700; }

/* Best 섹션 */
.rvbest { margin-bottom:40px; }
.rvbest h2 { font-size:22px; font-weight:800; margin-bottom:16px; }
.rvbest-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.rvbest-card { display:block; background:#fff; border:1px solid #e6e8ee; border-radius:12px; overflow:hidden; text-decoration:none; color:#222; transition:all .15s; }
.rvbest-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.rvbest-img { aspect-ratio:16/10; background:#f2f4f8 center/cover no-repeat; }
.rvbest-img.rvbest-logo { background-color:#fafafa; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:20px; box-sizing:border-box; }
.rvbest-img.rvbest-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.rvbest-body { padding:14px; }
.rvbest-body h3 { font-size:15px; font-weight:700; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvbest-body p { font-size:13px; color:#666; margin-bottom:10px; line-height:1.4; height:36px; overflow:hidden; }
.rvbest-meta { display:flex; justify-content:space-between; font-size:12px; color:#888; }
.rvbest-nick { font-weight:600; color:#555; }

/* 리스트 섹션 */
.rvlist-section { }
.rvlist-head { margin-bottom:14px; font-size:14px; color:#666; }
.rvlist-head b { color:var(--rv-primary); font-size:16px; }
.rvgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.rvcard { display:flex; background:#fff; border:1px solid #e6e8ee; border-radius:12px; overflow:hidden; text-decoration:none; color:#222; transition:all .15s; }
.rvcard:hover { border-color:var(--rv-primary); box-shadow:0 4px 16px var(--rv-primary-soft); }
.rvcard-img { flex:0 0 140px; aspect-ratio:1; background:#f2f4f8 center/cover no-repeat; position:relative; }
.rvcard-img.rvcard-logo { background-color:#fafafa; border-right:1px solid #eee; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:15px; box-sizing:border-box; width:140px; height:140px; }
.rvcard-img.rvcard-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.rvcard-best { position:absolute; top:8px; left:8px; background:#ff5a5a; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:10px; }
.rvcard-cate { position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; padding:3px 8px; border-radius:10px; }
.rvcard-body { flex:1; padding:14px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.rvcard-body h3 { font-size:15px; font-weight:700; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvcard-body p { font-size:13px; color:#666; margin-bottom:8px; line-height:1.4; height:36px; overflow:hidden; }
.rvcard-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.rvtag { background:var(--rv-primary-soft); color:var(--rv-primary); font-size:11px; padding:2px 8px; border-radius:10px; }
.rvcard-meta { display:flex; gap:10px; font-size:11px; color:#888; }
.rvcard-nick { font-weight:600; color:#555; }

.rvempty { padding:60px 20px; text-align:center; color:#888; background:#f9fafb; border-radius:12px; }

/* 페이징 */
.rvpaging { display:flex; justify-content:center; gap:6px; margin-top:28px; }
.rvpaging a { display:inline-block; min-width:36px; height:36px; padding:0 10px; line-height:36px; text-align:center; border:1px solid #e0e3ea; border-radius:6px; color:#555; text-decoration:none; font-size:13px; }
.rvpaging a.on { background:var(--rv-primary); color:#fff; border-color:var(--rv-primary); font-weight:700; }
.rvpaging a:hover { border-color:var(--rv-primary); color:var(--rv-primary); }

/* ========== 상세페이지 ========== */
.rvview { max-width:800px; }
.rvbread { padding:10px 0 20px; font-size:13px; color:#999; }
.rvbread a { color:#666; text-decoration:none; }
.rvbread a:hover { color:var(--rv-primary); }
.rvbread span { margin:0 6px; color:#ccc; }

.rvdetail { background:#fff; border:1px solid #e6e8ee; border-radius:14px; padding:28px; }
.rvdetail-head { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #f0f2f5; }
.rvdetail-meta-top { margin-bottom:10px; }
.rvbadge-cate { display:inline-block; background:var(--rv-primary-soft); color:var(--rv-primary); font-size:12px; font-weight:600; padding:4px 10px; border-radius:12px; margin-right:6px; }
.rvbadge-best { display:inline-block; background:#ff5a5a; color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:12px; }
.rvdetail-head h1 { font-size:26px; font-weight:800; line-height:1.3; margin-bottom:12px; }
.rvdetail-sub { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:#666; align-items:center; }
.rvscore { color:#ffbb00; font-size:16px; letter-spacing:1px; }
.rvnick { font-weight:700; color:#333; }

.rvphotos { display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.rvphotos img { width:100%; border-radius:8px; }

.rvcontent { font-size:16px; line-height:1.8; color:#333; padding:16px 0; word-break:keep-all; }

.rvtags-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:16px; border-top:1px solid #f0f2f5; }

/* 관련 */
.rvrelated { margin-top:40px; }
.rvrelated h2 { font-size:20px; font-weight:800; margin-bottom:14px; }
.rvrelated-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }

.rvview-btns { margin-top:24px; text-align:center; }
.rvbtn-list { display:inline-block; padding:12px 40px; background:#f0f2f5; color:#444; text-decoration:none; border-radius:8px; font-weight:600; font-size:14px; }
.rvbtn-list:hover { background:var(--rv-primary); color:#fff; }

/* 모바일 */
@media (max-width: 768px) {
	.rvhero h1 { font-size:24px; }
	.rvbest-grid { grid-template-columns:1fr; }
	.rvgrid { grid-template-columns:1fr; }
	.rvrelated-grid { grid-template-columns:1fr; }
	.rvcard-img { flex:0 0 110px; }
	.rvdetail { padding:20px 16px; }
	.rvdetail-head h1 { font-size:20px; }
	.rvcontent { font-size:15px; }
}


/* ===== skinJ: 메이슨리(핀터레스트형) ===== */
.rv-skin-skinJ .rvgrid {
	display:block;
	column-count:3;
	column-gap:14px;
}
.rv-skin-skinJ .rvcard {
	display:block;
	break-inside:avoid;
	margin-bottom:14px;
	width:100%;
}
.rv-skin-skinJ .rvcard:hover {
	transform:translateY(-3px);
}
.rv-skin-skinJ .rvcard-img {
	flex:none;
	width:100%;
	height:auto;
	aspect-ratio:auto;
	min-height:200px;
	display:block;
}
.rv-skin-skinJ .rvcard-img.rvcard-logo {
	width:100%;
	height:200px;
	border-right:none;
	border-bottom:1px solid #eee;
}
.rv-skin-skinJ .rvcard-body {
	flex:none;
	display:block;
	padding:14px;
}
.rv-skin-skinJ .rvcard-body p {
	height:auto;
	max-height:none;
	overflow:visible;
	-webkit-line-clamp:unset;
}
@media (max-width:768px) {
	.rv-skin-skinJ .rvgrid { column-count:2; column-gap:10px; }
	.rv-skin-skinJ .rvcard { margin-bottom:10px; }
	.rv-skin-skinJ .rvcard-img { min-height:140px; }
}

/* skinJ: 베스트 메이슨리 */
.rv-skin-skinJ .rvbest-grid {
	display:block;
	column-count:3;
	column-gap:16px;
}
.rv-skin-skinJ .rvbest-card {
	display:block;
	break-inside:avoid;
	margin-bottom:16px;
	width:100%;
}
.rv-skin-skinJ .rvbest-img {
	aspect-ratio:auto;
	height:auto;
	min-height:220px;
	display:block;
}
.rv-skin-skinJ .rvbest-img.rvbest-logo {
	height:220px;
}
.rv-skin-skinJ .rvbest-body p {
	height:auto;
	overflow:visible;
}

/* skinJ: 카테고리 큰 배너 */
.rv-skin-skinJ .rvtabs {
	display:grid;
	grid-template-columns:repeat(8, 1fr);
	gap:10px;
	border-bottom:none;
	padding:0 0 24px;
	margin-bottom:24px;
}
.rv-skin-skinJ .rvtabs a {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px 6px;
	border-radius:8px;
	background:linear-gradient(135deg, var(--rv-primary-soft), #ffffff);
	border:1px solid #eef0f6;
	color:#333;
	font-size:12px;
	font-weight:600;
	text-align:center;
	min-height:34px;
	transition:all .2s;
	position:relative;
	overflow:hidden;
}
.rv-skin-skinJ .rvtabs a:hover {
	transform:translateY(-3px);
	box-shadow:0 6px 18px rgba(0,0,0,.08);
	border-color:var(--rv-primary);
	color:var(--rv-primary);
}
.rv-skin-skinJ .rvtabs a.on {
	background:var(--rv-primary);
	color:#fff;
	border-color:var(--rv-primary);
	box-shadow:0 6px 18px var(--rv-primary-soft);
}
@media (max-width:1024px) {
	.rv-skin-skinJ .rvtabs { grid-template-columns:repeat(4, 1fr); }
	.rv-skin-skinJ .rvbest-grid { column-count:2; }
}
@media (max-width:768px) {
	.rv-skin-skinJ .rvtabs { grid-template-columns:repeat(4, 1fr); gap:5px; }
	.rv-skin-skinJ .rvtabs a { font-size:11px; padding:6px 3px; min-height:30px; border-radius:6px; }
	.rv-skin-skinJ .rvbest-grid { column-count:1; }
}

/* ============================================================
   basic + skin2 : 인스타 그리드형 (정사각형 + 호버 오버레이)
   ============================================================ */
/* 헤더: 컴팩트 */
.rv-skin-basic .rvhero, .rv-skin-skin2 .rvhero {
	padding:24px 0 18px; border-bottom:none; margin-bottom:8px; text-align:left;
}
.rv-skin-basic .rvhero h1, .rv-skin-skin2 .rvhero h1 {
	font-size:24px; font-weight:800; margin-bottom:6px; letter-spacing:-.5px;
}
.rv-skin-basic .rvhero p, .rv-skin-skin2 .rvhero p {
	font-size:13px; color:#888;
}

/* 탭: 미니멀 언더라인 */
.rv-skin-basic .rvtabs, .rv-skin-skin2 .rvtabs {
	display:flex; flex-wrap:wrap; gap:0; padding:0; margin:8px 0 28px;
	border-bottom:1px solid #eaecef;
}
.rv-skin-basic .rvtabs a, .rv-skin-skin2 .rvtabs a {
	background:transparent; padding:12px 18px; border-radius:0; color:#666;
	font-size:14px; font-weight:500; border-bottom:2px solid transparent;
	margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.rv-skin-basic .rvtabs a:hover, .rv-skin-skin2 .rvtabs a:hover {
	background:transparent; color:var(--rv-primary);
}
.rv-skin-basic .rvtabs a.on, .rv-skin-skin2 .rvtabs a.on {
	background:transparent; color:var(--rv-primary);
	border-bottom-color:var(--rv-primary); font-weight:700;
}

/* BEST: 첫칸 2x2 큰사이즈 + 나머지 정사각형 */
.rv-skin-basic .rvbest h2, .rv-skin-skin2 .rvbest h2 {
	font-size:18px; font-weight:800; margin-bottom:14px; letter-spacing:.5px;
}
.rv-skin-basic .rvbest-grid, .rv-skin-skin2 .rvbest-grid {
	display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
}
.rv-skin-basic .rvbest-card, .rv-skin-skin2 .rvbest-card {
	position:relative; aspect-ratio:1; border-radius:0; border:none;
	overflow:hidden; background:#f2f4f8;
}
.rv-skin-basic .rvbest-card:first-child, .rv-skin-skin2 .rvbest-card:first-child {
	grid-column:span 2; grid-row:span 2;
}
.rv-skin-basic .rvbest-card:hover, .rv-skin-skin2 .rvbest-card:hover {
	transform:none; box-shadow:none;
}
.rv-skin-basic .rvbest-img, .rv-skin-skin2 .rvbest-img {
	position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
	background:#f2f4f8 center/cover no-repeat;
	transition:transform .35s ease;
}
.rv-skin-basic .rvbest-card:hover .rvbest-img,
.rv-skin-skin2 .rvbest-card:hover .rvbest-img { transform:scale(1.06); }
.rv-skin-basic .rvbest-img.rvbest-logo, .rv-skin-skin2 .rvbest-img.rvbest-logo {
	border-bottom:none; padding:14%;
}
.rv-skin-basic .rvbest-body, .rv-skin-skin2 .rvbest-body {
	position:absolute; inset:0; padding:18px;
	display:flex; flex-direction:column; justify-content:flex-end;
	background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
	color:#fff; opacity:0; transition:opacity .25s ease;
}
.rv-skin-basic .rvbest-card:hover .rvbest-body,
.rv-skin-skin2 .rvbest-card:hover .rvbest-body { opacity:1; }
.rv-skin-basic .rvbest-body h3, .rv-skin-skin2 .rvbest-body h3 {
	font-size:15px; font-weight:700; color:#fff;
	white-space:normal; overflow:hidden; text-overflow:ellipsis;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
	margin-bottom:6px;
}
.rv-skin-basic .rvbest-card:first-child .rvbest-body h3,
.rv-skin-skin2 .rvbest-card:first-child .rvbest-body h3 { font-size:20px; }
.rv-skin-basic .rvbest-body p, .rv-skin-skin2 .rvbest-body p {
	color:#e5e5e5; font-size:12px; height:auto; max-height:32px; line-height:1.4;
}
.rv-skin-basic .rvbest-meta, .rv-skin-skin2 .rvbest-meta {
	color:#bbb; font-size:11px; margin-top:6px;
}

/* 리스트: 정사각형 4열 인스타 그리드 */
.rv-skin-basic .rvlist-head, .rv-skin-skin2 .rvlist-head {
	margin-bottom:14px; font-size:13px; color:#888; letter-spacing:.3px;
}
.rv-skin-basic .rvgrid, .rv-skin-skin2 .rvgrid {
	display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
}
.rv-skin-basic .rvcard, .rv-skin-skin2 .rvcard {
	position:relative; display:block; aspect-ratio:1; border:none;
	border-radius:0; overflow:hidden; background:#f2f4f8;
}
.rv-skin-basic .rvcard:hover, .rv-skin-skin2 .rvcard:hover {
	box-shadow:none; border-color:transparent;
}
.rv-skin-basic .rvcard-img, .rv-skin-skin2 .rvcard-img {
	position:absolute; inset:0; flex:none;
	width:100%; height:100%; aspect-ratio:auto;
	background:#f2f4f8 center/cover no-repeat;
	transition:transform .35s ease;
}
.rv-skin-basic .rvcard:hover .rvcard-img,
.rv-skin-skin2 .rvcard:hover .rvcard-img { transform:scale(1.06); }
.rv-skin-basic .rvcard-img.rvcard-logo, .rv-skin-skin2 .rvcard-img.rvcard-logo {
	width:100%; height:100%; border-right:none; padding:14%;
}
.rv-skin-basic .rvcard-best, .rv-skin-skin2 .rvcard-best {
	background:#ff5a5a; z-index:2;
}
.rv-skin-basic .rvcard-cate, .rv-skin-skin2 .rvcard-cate { display:none; }
.rv-skin-basic .rvcard-body, .rv-skin-skin2 .rvcard-body {
	position:absolute; inset:0; padding:14px;
	display:flex; flex-direction:column; justify-content:flex-end;
	background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
	color:#fff; opacity:0; transition:opacity .25s ease;
}
.rv-skin-basic .rvcard:hover .rvcard-body,
.rv-skin-skin2 .rvcard:hover .rvcard-body { opacity:1; }
.rv-skin-basic .rvcard-body h3, .rv-skin-skin2 .rvcard-body h3 {
	color:#fff; font-size:14px; font-weight:700; margin-bottom:5px;
	white-space:normal; overflow:hidden; text-overflow:ellipsis;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rv-skin-basic .rvcard-body p, .rv-skin-skin2 .rvcard-body p {
	color:#dcdcdc; font-size:12px; line-height:1.4; height:auto;
	max-height:32px; overflow:hidden; margin-bottom:6px;
}
.rv-skin-basic .rvcard-tags, .rv-skin-skin2 .rvcard-tags { gap:4px; margin-bottom:6px; }
.rv-skin-basic .rvtag, .rv-skin-skin2 .rvtag {
	background:rgba(255,255,255,.18); color:#fff; font-size:10px;
	padding:2px 7px; backdrop-filter:blur(4px);
}
.rv-skin-basic .rvcard-meta, .rv-skin-skin2 .rvcard-meta {
	color:#bbb; font-size:10px;
}

/* 페이징: 도트형 */
.rv-skin-basic .rvpaging, .rv-skin-skin2 .rvpaging { gap:8px; margin-top:32px; }
.rv-skin-basic .rvpaging a, .rv-skin-skin2 .rvpaging a {
	min-width:34px; height:34px; line-height:34px;
	border-radius:50%; border-color:transparent; background:#f3f4f6; color:#666;
}
.rv-skin-basic .rvpaging a.on, .rv-skin-skin2 .rvpaging a.on {
	background:var(--rv-primary); color:#fff; border-color:var(--rv-primary);
}
.rv-skin-basic .rvpaging a:hover, .rv-skin-skin2 .rvpaging a:hover {
	background:var(--rv-primary-soft); color:var(--rv-primary); border-color:transparent;
}

@media (max-width:1024px) {
	.rv-skin-basic .rvgrid, .rv-skin-skin2 .rvgrid,
	.rv-skin-basic .rvbest-grid, .rv-skin-skin2 .rvbest-grid {
		grid-template-columns:repeat(3, 1fr);
	}
}
@media (max-width:768px) {
	.rv-skin-basic .rvgrid, .rv-skin-skin2 .rvgrid,
	.rv-skin-basic .rvbest-grid, .rv-skin-skin2 .rvbest-grid {
		grid-template-columns:repeat(2, 1fr); gap:4px;
	}
	/* 모바일은 호버 안되므로 본문 항상 살짝 보임 */
	.rv-skin-basic .rvcard-body, .rv-skin-skin2 .rvcard-body,
	.rv-skin-basic .rvbest-body, .rv-skin-skin2 .rvbest-body {
		opacity:1;
		background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
		padding:10px;
	}
	.rv-skin-basic .rvcard-body h3, .rv-skin-skin2 .rvcard-body h3 {
		font-size:12px; -webkit-line-clamp:1;
	}
	.rv-skin-basic .rvcard-body p, .rv-skin-skin2 .rvcard-body p,
	.rv-skin-basic .rvcard-tags, .rv-skin-skin2 .rvcard-tags,
	.rv-skin-basic .rvcard-meta, .rv-skin-skin2 .rvcard-meta { display:none; }
	.rv-skin-basic .rvbest-body h3, .rv-skin-skin2 .rvbest-body h3 { font-size:13px; }
	.rv-skin-basic .rvbest-card:first-child .rvbest-body h3,
	.rv-skin-skin2 .rvbest-card:first-child .rvbest-body h3 { font-size:16px; }
	.rv-skin-basic .rvbest-body p, .rv-skin-skin2 .rvbest-body p,
	.rv-skin-basic .rvbest-meta, .rv-skin-skin2 .rvbest-meta { display:none; }
}
