/* [PC] 2026-10-08 모바일 re-mobile/css/populate_rank_review.css를 그대로 가져옴(아래 규칙은 모바일과 동일).
   PC에서 바뀌는 배치/크기는 파일 맨 아래 "PC 레이아웃" 블록에만 모아둠 — 모바일 파일과 비교할 땐 그 블록만 보면 됨 */

/* 인기순위+리뷰 카드 슬라이드 "수정본" (proc/_populate_rank_review.html) — 랭크뱃지+브랜드/상품명이
   상단 한 행에, 그 아래로 큰 상품 이미지 → REVIEW/별점 행 → 리뷰 텍스트가 세로로 쌓이는 레이아웃.
   css/populate_review.css(원본 _populate_review.html)와 클래스명을 분리해서 서로 영향 없음 */
.populate_rank_review_wrap {
	position: relative;
	width: 100%;
}

.populate_rank_review_slider_clip {
	overflow: hidden;
	width: 100%;
	max-width: 96%;
	margin: 0 auto;
}

.populate_rank_review_prev,
.populate_rank_review_next {
	/* Slick이 이 요소들에 직접 style="display:block"을 인라인으로 박아넣어서,
	   !important 없이는 숨겨지지 않음(populate_review.css와 동일한 이유) */
	display: none !important;
}

.populate_rank_review_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 슬릭 초기화 전까지는 첫 카드만 보여주고 나머지는 숨김 — 깜빡임 방지 */
.populate_rank_review_list:not(.slick-initialized) > li {
	display: none;
}

.populate_rank_review_list:not(.slick-initialized) > li:first-child {
	display: block;
}

.populate_rank_review_item {
	box-sizing: border-box;
	vertical-align: top;
}

.populate_rank_review_link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 상단 행 — 랭크뱃지(테두리 박스) + 브랜드/상품명, 세로 구분선으로 나뉨.
   카드 좌우는 뚫려있고 위/아래만 가로줄 — border-top/bottom만, 좌우/모서리radius 없음 */
.populate_rank_review_top_row {
	position: relative;
	z-index: 2;
	background: #fff;
	display: flex;
	align-items: stretch;
	border-top: 1px solid #b8bdc5;
	border-bottom: 1px solid #b8bdc5;
	padding-right: 32px;
}

.populate_rank_review_rank {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 56px;
	padding: 8px 4px;
	background: #000;
	border-right: 1px solid #000;
	text-align: center;
}

/* 왕관은 <img>가 아니라 마스크로 그려서 금/은/동 색을 background로 바꿈. 마스크 이미지는 CORS가 필요한데
   tm.ajlabs.co.kr/rank.svg는 CORS 헤더가 없어 외부 URL로 쓰면 아예 안 그려져서, 같은 SVG(모양만)를 data URI로 인라인함 */
.populate_rank_review_rank_icon {
	width: 16px;
	aspect-ratio: 17 / 9;
	margin-bottom: 3px;
	background: #ffb400;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%229%22%20viewBox%3D%220%200%2017%209%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.14686%200.267951C9.06175%200.183015%208.96064%200.115627%208.84933%200.0696471C8.73802%200.0236676%208.61868%200%208.49817%200C8.37765%200%208.25832%200.0236676%208.14701%200.0696471C8.0357%200.115627%207.93459%200.183015%207.84948%200.267951L5.07147%203.03879C4.92705%203.18221%204.73866%203.27356%204.53618%203.29834C4.3337%203.32312%204.1287%203.27992%203.95367%203.17559L1.38823%201.64334C1.23421%201.55118%201.05637%201.50615%200.876842%201.51384C0.697309%201.52153%200.524011%201.5816%200.378514%201.68658C0.233016%201.79157%200.121743%201.93682%200.0585404%202.10427C-0.00466214%202.27172%20-0.0170033%202.45398%200.0230526%202.62836L1.31677%208.29042C1.36283%208.4918%201.47619%208.67167%201.63831%208.80057C1.80042%208.92947%202.00169%208.99978%202.20917%209H14.7908C14.9986%208.99969%2015.2%208.92912%2015.3622%208.79986C15.5243%208.67059%2015.6375%208.49032%2015.6832%208.28859L16.9769%202.62836C17.017%202.45398%2017.0047%202.27172%2016.9415%202.10427C16.8783%201.93682%2016.767%201.79157%2016.6215%201.68658C16.476%201.5816%2016.3027%201.52153%2016.1232%201.51384C15.9436%201.50615%2015.7658%201.55118%2015.6118%201.64334L13.0463%203.17559C12.8713%203.27992%2012.6663%203.32312%2012.4638%203.29834C12.2613%203.27356%2012.073%203.18221%2011.9285%203.03879L9.14686%200.267951Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%229%22%20viewBox%3D%220%200%2017%209%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.14686%200.267951C9.06175%200.183015%208.96064%200.115627%208.84933%200.0696471C8.73802%200.0236676%208.61868%200%208.49817%200C8.37765%200%208.25832%200.0236676%208.14701%200.0696471C8.0357%200.115627%207.93459%200.183015%207.84948%200.267951L5.07147%203.03879C4.92705%203.18221%204.73866%203.27356%204.53618%203.29834C4.3337%203.32312%204.1287%203.27992%203.95367%203.17559L1.38823%201.64334C1.23421%201.55118%201.05637%201.50615%200.876842%201.51384C0.697309%201.52153%200.524011%201.5816%200.378514%201.68658C0.233016%201.79157%200.121743%201.93682%200.0585404%202.10427C-0.00466214%202.27172%20-0.0170033%202.45398%200.0230526%202.62836L1.31677%208.29042C1.36283%208.4918%201.47619%208.67167%201.63831%208.80057C1.80042%208.92947%202.00169%208.99978%202.20917%209H14.7908C14.9986%208.99969%2015.2%208.92912%2015.3622%208.79986C15.5243%208.67059%2015.6375%208.49032%2015.6832%208.28859L16.9769%202.62836C17.017%202.45398%2017.0047%202.27172%2016.9415%202.10427C16.8783%201.93682%2016.767%201.79157%2016.6215%201.68658C16.476%201.5816%2016.3027%201.52153%2016.1232%201.51384C15.9436%201.50615%2015.7658%201.55118%2015.6118%201.64334L13.0463%203.17559C12.8713%203.27992%2012.6663%203.32312%2012.4638%203.29834C12.2613%203.27356%2012.073%203.18221%2011.9285%203.03879L9.14686%200.267951Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.populate_rank_review_rank.is-tier-1 .populate_rank_review_rank_icon { background: #ffb400; }
.populate_rank_review_rank.is-tier-2 .populate_rank_review_rank_icon { background: #c9d0d9; }
.populate_rank_review_rank.is-tier-3 .populate_rank_review_rank_icon { background: #b0693a; }
/* 1~3위 숫자도 4위부터와 같은 흰색(.rank_num 기본값)으로 통일 — 왕관만 금/은/동 색 */

.populate_rank_review_rank_label {
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0;
	line-height: 12px;
	color: #b4b9c2;
}

.populate_rank_review_rank_num {
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 19px;
	color: #fff;
}

.populate_rank_review_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
}

.populate_rank_review_brand {
	font-size: 12px;
	font-weight: 700;
	color: #999;
}

.populate_rank_review_name {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	color: #191f28;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 찜하기 하트 — goods/list/list_07.css의 .wish-heart-btn/-icon과 동일 톤(색/굵기).
   list_01/02/04.css가 .wish-heart-btn/-icon을 스코프 없이(bare) 정의하고 있어서
   그 클래스를 그대로 쓰면 이 위젯에도 그 스타일이 새어 들어옴 — 이 카드 전용 클래스만
   써서 완전히 분리(HTML에도 wish-heart-btn/-icon 클래스 안 붙임) */
.populate_rank_review_wish {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s ease;
}
.populate_rank_review_wish:active { transform: translateY(-50%) scale(0.88); }
.populate_rank_review_wish svg {
	width: 85%;
	height: 85%;
	fill: none;
	stroke: #bbb;
	stroke-width: 1.8;
	transition: fill 0.2s ease, stroke 0.2s ease;
}
.populate_rank_review_wish.wished svg {
	fill: var(--tmpoint, #ff4757);
	stroke: var(--tmpoint, #ff4757);
}

/* 별점 — 이미지 바로 아래 REVIEW 라벨과 같은 행의 오른쪽 */
.populate_rank_review_stars {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	font-weight: 700;
	color: #ffb400;
}

.populate_rank_review_stars i {
	font-size: 11px;
}

/* 큰 이미지 + [랭크뱃지/브랜드/상품명 행] + [REVIEW/별점 행 + 리뷰 텍스트]를 세로로 쌓음.
   예전엔 작은 원형 썸네일(좌) + 말풍선 칼럼(우)을 좌우로 나란히 뒀는데, 사용자가
   devtools로 직접 만들어본 시안(이미지를 크게, 리뷰는 그 아래 평문으로)대로 변경 —
   이후 top_row(원래 카드 맨 위에 있던 랭크뱃지 행)도 사용자 요청으로 img_box와
   bubble_col 사이로 옮겨와서, 지금은 img_box → top_row → bubble_col 순서.
   JS(리뷰 3개 순환/입력 중 표시)가 쓰는 클래스는 이 이동과 무관하게 그대로 동작함 */
.populate_rank_review_body_row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 10px;
}

/* body_row의 gap(12px)은 이미지↔랭크 행 사이에만 두고, 랭크 행↔리뷰 사이는 붙임(사용자 요청) */
.populate_rank_review_top_row + .populate_rank_review_bubble_col {
	position: relative;
	z-index: 2;
	background: #fff;
	margin-top: -12px;
}

/* 이미지↔랭크 행 간격을 기존 12px에서 12px 더 벌림(총 24px, 사용자 요청) */
.populate_rank_review_img_box + .populate_rank_review_top_row {
	margin-top: 12px;
}

/* bubble(말풍선)과 bubble_top(REVIEW/별점)을 다시 세로로 쌓음 — bubble_top이
   bubble_box 안에 있으면 리뷰 전환 애니메이션(.bubble-up)에 같이 딸려서 매번
   깜빡였기 때문에(사용자 확인) 다시 형제 요소로 분리함. 애니메이션 대상이 아니라
   별다른 클리어런스 계산 없이 body_row와 같은 톤의 12px이면 충분 */
.populate_rank_review_bubble_col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* overflow:hidden 제거 — 아래 img에 위아래 둥둥 뜨는 애니메이션을 넣으면서, 박스
   높이가 이미지와 똑같아(100%/100%) 위아래로 움직이는 순간 이미지 끝부분이
   박스 경계에 잘려 보이는 걸 막기 위함. object-fit:contain이라 원본 이미지가
   박스 밖으로 새 나가는 일은 없어서(항상 박스 안에 딱 맞게 축소됨) 안전하게
   지울 수 있음 */
.populate_rank_review_img_box {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

/* 라켓 이미지가 둥둥 떠 있는 느낌을 내는 그림자 — proc/_racket_lineup.html의
   .usp-card__img::after(정적 타원 그림자)와 같은 radial-gradient 기법을 가져오되,
   여기는 애니메이션까지 추가함. 원래 bubble_col::before로 그렸었는데, top_row가
   img_box와 bubble_col 사이로 이동하면서 그림자가 이미지 밑이 아니라 top_row 밑에
   떠서 위치가 애매해짐(사용자 확인) — img_box 자신의 ::after로 옮겨서, 뒤에 뭐가
   오든(top_row든 bubble_col이든) 상관없이 항상 이미지 바로 밑에 붙도록 고정함.
   이미지가 위로 뜰 때 그림자는 작아지고, 내려올 때 커지도록 populateRankReviewImgFloat와
   같은 3s 주기로 반대 위상(50% 지점에서 작아짐)을 맞춤 */
.populate_rank_review_img_box::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	width: 46%;
	height: 10px;
	/* 라켓이 오른쪽으로 기울어 있어 손잡이(왼쪽)가 바닥에 닿는 쪽이 가장 진하고 오른쪽으로 갈수록 옅어짐.
	   둥근 타원에 가로 그라데이션을 얹고 블러로 가장자리를 풀어서, 끝이 막대처럼 잘려 보이지 않게 함 */
	border-radius: 50%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
	filter: blur(3px);
	pointer-events: none;
	animation: populateRankReviewShadowPulse 3s ease-in-out infinite;
}

@keyframes populateRankReviewShadowPulse {
	0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.7; }
	50% { transform: translateX(-50%) scale(0.75); opacity: 0.4; }
}

/* 상품 사진 자체에 스튜디오 배경(#f5f5f5 계열 밝은 회색)이 이미 픽셀로 찍혀있어서,
   CSS로 "그 색만" 투명하게 지울 방법은 없음(진짜 크로마키는 alpha 채널이 있는
   원본 이미지가 있어야 가능 — mix-blend-mode 계열은 특정 색 하나만 선택적으로
   지우는 연산이 아니라 전체 픽셀에 동일한 수식을 적용하는 거라 부적합).
   brightness()는 처음 써봤지만 모든 채널에 균일하게 곱셈을 적용해서, 라켓의
   밝은 회색/은색 바디 부분(200~230대)까지 같이 밝아져 날아가 보이는 부작용이
   있었음(사용자 확인) — contrast()로 교체: 중간 회색(128)을 기준점으로 "멀리
   있는 값일수록 더 밀어내는" 방식이라, 245(배경) 근처만 255로 확실히 클리핑되고
   200~230대 밝은 색상은 상대적으로 훨씬 덜 밀림, 128 근처 중간톤은 거의 그대로,
   어두운 부분은 오히려 살짝 더 선명해짐(washed out과 반대 방향) — 배경만 더
   정확히 타겟하면서 라켓 본연의 색은 덜 건드림. 완벽한 알파 투명 제거는 아니라서
   사진에 그림자/그라데이션이 있으면 가장자리에 아주 희미하게 흔적이 남을 수 있음 */
.populate_rank_review_img_box > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: contrast(1.1);
	/* 위아래로 살짝 둥둥 떠다니는 느낌 — 위 .populate_rank_review_img_box::after
	   그림자(populateRankReviewShadowPulse)와 같은 3s 주기로 맞춰서, 라켓이 위로 뜰
	   때(중간 지점) 그림자가 작아지고 아래로 내려올 때 커지도록 짝을 맞춤 */
	animation: populateRankReviewImgFloat 3s ease-in-out infinite, populateRankReviewImgSway 21s ease-in-out infinite;
}

@keyframes populateRankReviewImgFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* 오른쪽으로 12deg 기울인 상태를 기준으로 9deg~15deg 사이를 불규칙하게 오가는 느낌(사용자 요청 — 수직 기준보다 떠있는 느낌) — CSS는 진짜 랜덤이 안 돼서 구간마다 값과
   간격을 다르게 준 21s 주기(사용자 요청으로 처음 7s보다 3배 느리게)(위아래 3s와 안 맞물려서 패턴이 반복돼 보이지 않음). 위아래 애니메이션이
   transform을 쓰고 있어서 충돌을 피하려고 개별 속성 rotate를 사용(미지원 구형 브라우저는 기울임만 빠짐) */
@keyframes populateRankReviewImgSway {
	0%   { rotate: 12deg; }
	18%  { rotate: 14deg; }
	37%  { rotate: 10deg; }
	55%  { rotate: 15deg; }
	78%  { rotate: 9deg; }
	100% { rotate: 12deg; }
}

/* 위아래 구분선은 여기(고정 wrapper)에 둠 — .bubble_box는 리뷰가 바뀔 때마다
   .bubble-up 애니메이션(opacity/transform)으로 흔들리는데, border를 거기 두면
   구분선까지 같이 흔들려 보였음(사용자 확인). border를 애니메이션 안 걸리는
   바깥 요소로 옮겨서 구분선은 고정, 안쪽 텍스트만 전환 애니메이션이 걸리게 함.
   태그는 결국 리뷰마다 자기 것을 보여주는 걸로 확정되면서 다시 bubble_box 안으로
   들어갔고(review_list 쪽 높이 고정으로 카드 크기 안정화는 그쪽에서 처리), 여기는
   avatar(hidden)+bubble_box만 남은 원래 구조라 row로 되돌림 */
.populate_rank_review_bubble {
	position: relative;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-bottom: 1px solid transparent;
}

/* 아래 구분선은 border가 아니라 이 가상요소로 그림 — 리뷰 박스(.bubble_box)가 translateY(6px)에서
   올라오며 흰 배경으로 부모의 border-bottom을 덮어서 구분선이 같이 깜빡였음(사용자 확인).
   z-index로 박스 위에 그려서 애니메이션 중에도 항상 보이게 함. 레이아웃 높이는 투명 border가 유지 */
.populate_rank_review_bubble::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: #b8bdc5;
	z-index: 1;
	pointer-events: none;
}

.populate_rank_review_avatar {
	display: none;
}

/* 말풍선(꼬리로 뭔가를 "가리키는" 모양) 대신, 위아래 구분선으로 감싼 카드 형태로 —
   bubble_top(REVIEW/별점)이 다시 bubble_col 위 형제 요소로 올라가면서, 꼬리가 뭘
   가리키는지 애매해져서 꼬리(::before)는 없애고 border-top/bottom으로 대체함
   (사용자 요청, 이후 구분선을 고정시키려고 .populate_rank_review_bubble로 다시 이동).
   opacity:0 초기값은 유지: JS(playBubbleUp)가 .bubble-up을 붙여야 애니메이션
   (forwards)으로 나타나는 구조라, 이걸 지우면 첫 등장 연출이 사라짐 */
.populate_rank_review_bubble_box {
	position: relative;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 18px 18px 28px 18px;
	background: #fff;
	opacity: 0;
	transform: translateY(6px);
}

.populate_rank_review_review_list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* min-height였을 때는 리뷰가 짧으면(1줄) 말풍선이 그만큼 작아지고 길면(2줄) 커져서
	   카드마다 말풍선 크기가 들쑥날쑥했음(사용자가 "유격"이라고 표현) — 고정 height로
	   바꾸고 overflow:hidden을 더해서 내용 길이와 무관하게 항상 같은 크기로 고정함.
	   태그(evaluation properties)를 결국 리뷰마다 자기 것을 보여주는 걸로 확정하면서
	   (사용자 확인 — "카드당 고정"이 아니라 "카드 높이가 안 변했으면 좋겠다"는 뜻이었음)
	   다시 이 리스트 안(review1Tags 등)에 포함시킴 — 메시지(2줄)+닉네임(44px) +
	   태그 자리(아래 .populate_rank_review_tags의 고정 height 48px + 여백)를 더해
	   114px로 늘림. 태그가 있든 없든(빈 태그 영역도 항상 렌더링) 항상 이 크기라
	   리뷰가 바뀌어도 카드 크기가 흔들리지 않음 */
	height: 122px;
	overflow: hidden;
}

.populate_rank_review_review_item {
	display: none;
	box-sizing: border-box;
}

.populate_rank_review_review_item.is-active {
	display: block;
	animation: populateRankReviewTextIn 0.25s ease-out;
}

/* 예전엔 말풍선이 "통통 튀며" 등장하도록 scale 바운스를 크게 줬는데, 말풍선
   모양이 없어진 평문 텍스트에 그대로 쓰면 글자가 출렁거려 보여서 살짝 올라오며
   나타나는 정도로 순화 — 키프레임 이름/JS 트리거(.bubble-up)는 그대로 유지 */
@keyframes populateRankReviewBubbleUp {
	0% { transform: translateY(6px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes populateRankReviewTextIn {
	0% { opacity: 0; transform: translateY(4px); }
	100% { opacity: 1; transform: translateY(0); }
}

.populate_rank_review_bubble.bubble-up .populate_rank_review_bubble_box {
	animation: populateRankReviewBubbleUp 0.5s ease-out forwards;
}

/* 말풍선이 뜬 직후 실제 리뷰 텍스트 대신 잠깐 보여주는 "입력 중" 점 3개 —
   위 .populate_rank_review_review_list와 정확히 같은 고정 높이로 맞춰야
   입력중 점 -> 실제 텍스트로 바뀔 때도 말풍선 크기가 안 흔들림 */
.populate_rank_review_typing {
	display: none;
	align-items: center;
	gap: 4px;
	height: 122px;
}

.populate_rank_review_bubble_box.is-typing .populate_rank_review_typing {
	display: flex;
}

.populate_rank_review_bubble_box.is-typing .populate_rank_review_review_list {
	display: none;
}

.populate_rank_review_typing i {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background: #bbb;
	border-radius: 50%;
	display: inline-block;
	animation: populateRankReviewTypingBounce 1s infinite ease-in-out;
}

.populate_rank_review_typing i:nth-child(2) { animation-delay: .15s; }
.populate_rank_review_typing i:nth-child(3) { animation-delay: .3s; }

@keyframes populateRankReviewTypingBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .4; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* 사용자 피드백 — 리뷰 텍스트가 "일렬로 나열"돼 읽기 불편함:
   1) line-height가 폰트 크기 대비 너무 촘촘했음(14.4px = 12px의 1.2배, 일반적인
      본문 가독 기준인 1.5배에 한참 못 미침) — 1.5배로 늘림
   2) word-break가 기본값이라 한글이 어절(띄어쓰기 단위) 중간에서 잘려서 줄바꿈될
      수 있었음(이 프로젝트 다른 곳(히어로 타이틀 등)은 전부 keep-all을 씀) — 통일
   3) 12px는 이 카드 톤에 비해 작아서 13px로 살짝 키움 */
.populate_rank_review_msg {
	margin: 0;
	font-size: 13px;
	line-height: 19.5px;
	color: #333;
	/* keep-all만 있으면 한 어절이 통째로 줄 폭보다 길 때(긴 오타/URL/이모지 나열 등)
	   그 단어를 절대 안 끊고 그대로 넘쳐버림(line-clamp의 overflow:hidden과 만나면
	   그 부분이 통째로 잘려 보여서 "줄바꿈이 안 된다"처럼 보일 수 있음) — 어절
	   단위 줄바꿈을 우선하되, 그래도 안 들어가면 그때만 강제로 끊어서 항상 폭
	   안에서 줄바꿈되도록 보강 */
	word-break: keep-all;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.populate_rank_review_user {
	font-size: 12px;
	line-height: 14.4px;
	color: #aaa;
}

/* 작성자(좌) + 별점(우) 한 줄 — 리뷰마다 자기 별점이라 li 안에 두고 텍스트와 같이 전환됨 */
.populate_rank_review_meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

/* 크리마 evaluation_properties(성별/구력/연령대/평소사용무게/플레이스타일 — 상품상세
   크리마 위젯의 "AppReviewEvaluationTypeOptions"와 같은 데이터, fields=reviews.
   evaluation_properties 파라미터로 가져옴) 태그 — module/Widget/Mobile/Proc/
   PopulateReviewWidget.php에서 리뷰마다 자기 태그를 보여줌(review1Tags 등).
   높이를 max-height가 아니라 고정 height로 줘야 함 — 태그가 없는 리뷰는 이 div
   자체가 비어서(내용 0) max-height였다면 0px로 찌그러져 있다가, 태그 있는
   리뷰로 넘어가면 갑자기 커져서 카드 크기가 흔들렸음. 항상 48px(2줄 분량)을
   차지하게 고정해서, 태그가 0개든 5개든 카드 크기가 안 변하게 함. gd_isset으로
   조건부 렌더링하지 않고 항상 그려야(빈 태그여도) 이 고정 높이가 항상 적용됨 */
.populate_rank_review_tags {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 4px;
	margin-top: 16px;
	height: 48px;
	overflow: hidden;
	box-sizing: border-box;
}

.populate_rank_review_tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: #f0f1f3;
	font-size: 10px;
	line-height: 1.4;
	color: #888;
	white-space: nowrap;
}

.populate_rank_review_tag em {
	font-style: normal;
	font-weight: 700;
	color: #333;
	margin-left: 2px;
}

/* 이전/다음 화살표 — populate_review.css와 동일 스타일 */
.populate_rank_review_wrap .prev,
.populate_rank_review_wrap .next {
	position: absolute;
	top: 45%;
	display: block;
	width: 15px;
	height: 26px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	transform: translate(0, -45%);
	cursor: pointer;
	z-index: 10;
}

.populate_rank_review_wrap .prev {
	left: 4px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23848484'%2F%3E%3C%2Fsvg%3E") no-repeat;
}

.populate_rank_review_wrap .next {
	right: 4px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23848484'%2F%3E%3C%2Fsvg%3E") no-repeat;
}

/* ========================
   PC 레이아웃 (2026-10-08, 2026-10-13 리뷰를 오른쪽으로 이동) — proc/_populate_rank_review.html(PC)
   좌우 반반(86vw 전체 폭, 2026-10-13 — 6:4, 이미지 폭 고정 + 오른쪽 최대 800px 등을 거쳐 반반으로 확정).
   왼쪽(.populate_rank_review_stage)은 순위마다 상품 이미지가 페이드로 바뀌고,
   오른쪽(.populate_rank_review_side)은 위부터 섹션 제목, 순위 목록(행 하나 = 모바일 top_row), 지금 순위의 리뷰.
   목록은 5줄만 보이고 나머지는 롤링. 오른쪽 하단에 인기순위 더보기 CTA를 표시.
======================== */
.populate_rank_review_pc {
	/* 섹션 높이 — 왼쪽 이미지 칸과 오른쪽(제목+리뷰+순위) 칸 둘 다 이 높이로 고정.
	   제목은 공통 상단에 두고, 오른쪽은 목록 5줄과 리뷰·CTA를 배치한다.
	   남는 높이는 오른쪽 세 덩어리 사이 간격으로 똑같이 나눠짐 — 내용이 넘치면
	   그땐 보이는 줄 수/행 높이를 같이 줄일 것 */
	--prr-pc-h: 600px;
	--prr-pc-side-gap: 24px;
	--prr-pc-row-h: 66px;
	--prr-pc-rows: 5;
	/* 이미지 칸과 오른쪽 칸 사이 간격 — 2026-10-13 없앰(0) */
	--prr-pc-col-gap: 0px;
	--prr-pc-divider: #e5e7eb;
	--prr-pc-pad: 24px;
	display: grid;
	/* 반반 — 왼쪽 이미지(stage) : 오른쪽 제목+리뷰+순위(side). 마크업 순서와 같지만
	   화면 배치는 영역 이름으로 정함 — 좌우를 바꾸려면 아래 areas의 두 이름 순서만 바꾸면 됨 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "stage side";
	column-gap: var(--prr-pc-col-gap);
	align-items: start;
	/* 다른 섹션(.cds-row-md)과 같은 기준 */
	max-width: 86vw;
	margin: 0 auto;
	/* 위아래 여백은 오른쪽 내용 정렬이 아니라 이 섹션 자신이 가짐(2026-10-19) — 값은 --prr-pc-pad 하나로 조절 */
	padding: 0 0 var(--prr-pc-pad);
}
.populate_rank_review_pc:has(> .populate_rank_review_pc_head) {
	grid-template-areas: "head head" "stage side";
	row-gap: 24px;
}

/* ---- 좌우 공통 상단: 섹션 제목(includeWidget의 headTitle/headDesc) ----
   분류 설명(custom.css의 .tm-theme-desc-body PC 규칙)과 같은 모양 — 제목과 설명을 한 줄에 가로로, 글씨 밑선을 맞춤.
   제목 아래 전체 너비로 1px 구분선 표시 */
.populate_rank_review_pc_head {
	grid-area: head;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 6px;
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #e5e7eb;
	box-sizing: border-box;
}
.populate_rank_review_pc_head h2 {
	margin: 0;
	font-size: 32px;
	line-height: var(--hero-title-line-height);
	font-weight: var(--hero-title-weight);
	word-break: keep-all;
}
.populate_rank_review_pc_head p {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	color: var(--neutral600, #8b95a1);
}

/* 오른쪽 끝 + 버튼 — 공용 .contents_more_top(custom.css)은 분류 설명 블록 기준 absolute라, 머리줄 flex의 오른쪽 끝 항목으로 바꿈 */
.populate_rank_review_pc_head .contents_more_top {
	position: relative;
	bottom: auto;
	right: auto;
	flex: none;
	margin-left: auto;
	align-self: center;
}

/* ---- 왼쪽: 상품 이미지 ---- */
.populate_rank_review_stage {
	grid-area: stage;
	min-width: 0;
}
/* 높이는 오른쪽과 같은 고정값(폭은 반반 칸 전체) — 이미지는 object-fit:contain이라
   잘리지 않고 칸 안에 맞춰짐 */
.populate_rank_review_pc .populate_rank_review_img_box {
	aspect-ratio: auto;
	height: var(--prr-pc-h);
	box-sizing: border-box;
	padding: 32px 24px;
}
.populate_rank_review_pc .populate_rank_review_floating_logo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	box-sizing: border-box;
	padding: 36px;
	border: 0;
	background: #000;
	pointer-events: none;
}
.populate_rank_review_pc .populate_rank_review_floating_logo img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* 오른쪽: 순위와 리뷰는 붙이고, 남는 높이는 하단 CTA 위에 배분 */
.populate_rank_review_side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	/* 위아래로 꽉 참 — 가운데 정렬로 남던 위아래 빈 공간은 리뷰 칸(아래 review_stack, flex:1)이 늘어나서 채움(2026-10-19) */
	justify-content: center;
	gap: 0;
	height: var(--prr-pc-h);
	/* 오른쪽 끝 여백 없음 — 목록/리뷰/버튼이 섹션 오른쪽 끝까지 꽉 참(2026-10-19, 전엔 6.25vw) */
	padding-right: 0;
	box-sizing: border-box;
	min-width: 0;
}
.populate_rank_review_side > .populate_rank_review_review_stack {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}
.populate_rank_review_more.cta-btn-outline {
	flex: none;
	box-sizing: border-box;
	border-width: 1px;
	/* 여백 없이 리뷰 칸 바로 아래에 붙임. 위 테두리는 없앰 — 바로 위 리뷰 칸의 아래 선이 이 버튼의 위 선 역할을 해서
	   둘 다 그리면 선이 겹쳐 두껍게 보였음(2026-10-19) */
	margin: 0;
	border-top-width: 0;
}

/* ---- 오른쪽 아래: 리뷰 — 순위마다 패널 하나, 지금 순위 것만 보임 ---- */
.populate_rank_review_review_panel {
	display: none;
	color: inherit;
	text-decoration: none;
}
.populate_rank_review_review_panel.is-active {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}
/* 패널 안쪽도 늘려서 말풍선 칸(리뷰 내용)이 남는 높이를 가지고, 내용은 그 안 세로 가운데 */
.populate_rank_review_pc .populate_rank_review_bubble_col,
.populate_rank_review_pc .populate_rank_review_bubble {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
	/* 기본값 align-items:flex-start가 세로(column) 배치에서는 "가로로 내용 폭만큼만"이 되어,
	   리뷰 글이 짧으면 말풍선 칸(bubble_box)의 넓이가 줄어들었음 → 가로로 꽉 차게(2026-10-19) */
	align-items: stretch;
}
.populate_rank_review_pc .populate_rank_review_bubble_box {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	align-self: stretch;
}
.populate_rank_review_pc .populate_rank_review_img_box > img {
	position: relative;
	left: -40px;
	width: 120%;
	height: 120%;
	flex-shrink: 0;
}
/* 썸네일 오른쪽 아래 할인율 — 36px "00%" + 같은 크기 "SALE", 색은 상품 리스트의 할인율(.per-price)과 같은 빨강 */
.populate_rank_review_pc .populate_rank_review_discount {
	position: absolute;
	right: 60px;
	bottom: 34px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--color-danger-600, #ff2b30);
	font-size: 36px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.5px;
	pointer-events: none;
}
.populate_rank_review_pc .populate_rank_review_discount strong {
	font: inherit;
}
/* 그 아래 가격: 할인 적용가(검정 20px 굵게) → 판매가(2px 작은 18px, 회색 취소선 — 상품 리스트 .fixed_price와 같은 스타일) */
.populate_rank_review_pc .populate_rank_review_discount_price {
	display: block;
	margin-top: 8px;
	color: #191f28;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.populate_rank_review_pc .populate_rank_review_discount_origin {
	display: block;
	color: #8b95a1;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: -0.5px;
	text-decoration: line-through;
}
.populate_rank_review_pc .populate_rank_review_img_box::after {
	bottom: 2%;
	height: 16px;
}
/* 순위 목록 하단 선을 공유하므로 리뷰 위에 선을 중복해서 그리지 않음 */
.populate_rank_review_pc .populate_rank_review_bubble::before {
	content: none;
}
/* 리뷰 아래 선 — 순위 목록 및 섹션 하단과 같은 얇은 선 */
.populate_rank_review_pc .populate_rank_review_bubble {
	border-bottom-width: 1px;
}
.populate_rank_review_pc .populate_rank_review_bubble::after {
	bottom: -1px;
	height: 1px;
	background: var(--prr-pc-divider);
}
.populate_rank_review_pc .populate_rank_review_bubble_box {
	padding: 24px 24px 4px;
}
/* 리뷰 목록과 입력 중 표시는 같은 고정 높이여야 리뷰가 바뀔 때 크기가 안 흔들림 */
.populate_rank_review_pc .populate_rank_review_review_list,
.populate_rank_review_pc .populate_rank_review_typing {
	height: 168px;
}
.populate_rank_review_pc .populate_rank_review_meta {
	margin-bottom: 10px;
}
.populate_rank_review_pc .populate_rank_review_user {
	font-size: 14px;
	line-height: 18px;
}
.populate_rank_review_pc .populate_rank_review_stars {
	font-size: 15px;
}
.populate_rank_review_pc .populate_rank_review_stars i {
	font-size: 13px;
}
.populate_rank_review_pc .populate_rank_review_msg {
	font-size: 17px;
	line-height: 27px;
}
.populate_rank_review_pc .populate_rank_review_tags {
	gap: 6px;
	margin-top: 20px;
	height: 62px;
}
.populate_rank_review_pc .populate_rank_review_tag {
	padding: 5px 12px;
	font-size: 12px;
}
.populate_rank_review_pc .populate_rank_review_typing i {
	width: 8px;
	height: 8px;
}

/* ---- 오른쪽 가운데(제목 아래): 1~10위 목록 ---- */
/* 보이는 창 — 5줄만 보이고 넘치는 행은 숨김. 구분선은 목록 아래에 고정. */
.populate_rank_review_rank_view {
	flex: none;
	position: relative;
	min-width: 0;
	box-sizing: content-box;
	height: calc(var(--prr-pc-rows) * var(--prr-pc-row-h));
	overflow: hidden;
}
/* 목록 — absolute라 섹션 높이를 늘리지 않음. JS가 활성 행이 보이도록 translateY로 위로 올림(롤링) */
.populate_rank_review_rank_list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .5s ease;
}
.populate_rank_review_rank_row {
	flex: none;
	display: flex;
	height: var(--prr-pc-row-h);
	cursor: pointer;
}
/* 모바일 top_row(검정 순위 박스 + 위아래 선)를 목록 행 모양으로 — 행마다 아래 옅은 선, 순위는 배경 없는 숫자 */
.populate_rank_review_pc .populate_rank_review_top_row {
	flex: 1;
	align-items: center;
	min-height: 0;
	padding: 0 56px 0 8px;
	border-top: none;
	border-bottom: 1px solid #eef0f3;
	background: transparent;
	transition: background .2s ease;
}
.populate_rank_review_rank_row:hover .populate_rank_review_top_row {
	background: #f9fafb;
}
/* 선택된 순위는 목록 가운데에서 연한 회색 배경으로 표시 */
.populate_rank_review_rank_row.is-active .populate_rank_review_top_row {
	background: #f3f3f3;
}
.populate_rank_review_pc .populate_rank_review_rank {
	width: 44px;
	padding: 0;
	background: transparent;
	border-right: none;
}
/* 1~3위 왕관(금/은/동 색은 위 .is-tier-N 규칙 그대로) */
.populate_rank_review_pc .populate_rank_review_rank_icon {
	width: 20px;
	margin-bottom: 2px;
}
.populate_rank_review_pc .populate_rank_review_rank_num {
	font-size: 18px;
	font-weight: 800;
	line-height: 22px;
	color: #4e5968;
}
.populate_rank_review_pc .populate_rank_review_info {
	padding: 0 16px;
}
.populate_rank_review_pc .populate_rank_review_brand {
	font-size: 13px;
}
.populate_rank_review_pc .populate_rank_review_name {
	margin-top: 2px;
	font-size: 17px;
	font-weight: 500;
	color: #4e5968;
}
/* 활성 행(연한 회색 배경) — 숫자/상품명은 진하게, 브랜드와 빈 하트도 어두운 색으로 표시 */
.populate_rank_review_rank_row.is-active .populate_rank_review_rank_num,
.populate_rank_review_rank_row.is-active .populate_rank_review_name {
	color: #191f28;
	font-weight: 700;
}
.populate_rank_review_rank_row.is-active .populate_rank_review_brand {
	color: #4e5968;
}
.populate_rank_review_rank_row.is-active .populate_rank_review_wish:not(.wished) svg {
	stroke: #4e5968;
}
.populate_rank_review_pc .populate_rank_review_wish {
	right: 16px;
	max-width: 24px;
	height: 24px;
}

/* 3열 테스트 — 리뷰 누적 / 상품 이미지 / 순위와 CTA */
.populate_rank_review_pc.populate_rank_review_pc--three {
	--prr-pc-rows: 7;
	--prr-pc-row-h: 64px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas: "reviews stage side";
	column-gap: 24px;
}
.populate_rank_review_pc--three:has(> .populate_rank_review_pc_head) {
	grid-template-areas: "head head head" "reviews stage side";
}
.populate_rank_review_pc--three > .populate_rank_review_review_stack {
	grid-area: reviews;
	display: flex;
	min-width: 0;
	height: var(--prr-pc-h);
	box-sizing: border-box;
	padding: 24px;
	background: #fff;
	overflow-y: auto;
}
.populate_rank_review_pc--three .populate_rank_review_floating_logo {
	display: none;
}
.populate_rank_review_pc--three .populate_rank_review_more.cta-btn-outline {
	margin-top: 24px;
	border-top-width: 1px;
}
.populate_rank_review_pc--three .populate_rank_review_bubble_col,
.populate_rank_review_pc--three .populate_rank_review_bubble {
	justify-content: flex-start;
	border: 0;
	gap: 0;
}
.populate_rank_review_pc--three .populate_rank_review_bubble::before,
.populate_rank_review_pc--three .populate_rank_review_bubble::after {
	content: none;
}
.populate_rank_review_pc--three .populate_rank_review_bubble_box {
	flex: none;
	justify-content: flex-start;
	padding: 0 0 12px;
	background: transparent;
	opacity: 1;
	transform: none;
}
.populate_rank_review_pc--three .populate_rank_review_review_list,
.populate_rank_review_pc--three .populate_rank_review_bubble_box.is-typing .populate_rank_review_review_list {
	display: flex;
	flex-direction: column;
	flex: none;
	order: 0;
	gap: 16px;
	height: auto;
	overflow: visible;
}
.populate_rank_review_pc--three .populate_rank_review_review_item {
	position: relative;
	display: none;
	margin-left: var(--review-inset, 0px);
	margin-right: calc(37px - var(--review-inset, 0px)); /* 말풍선 폭은 고정 — 들여쓰기(--review-inset, 최대 37px)만큼 왼쪽 여백이 늘고 오른쪽(라켓쪽) 여백이 줄어듦 */
	padding: 16px 20px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}
.populate_rank_review_pc--three .populate_rank_review_review_item.is-revealed {
	display: block;
}
.populate_rank_review_pc--three .populate_rank_review_review_item.is-active {
	animation: populateRankReviewSpeechIn .35s ease-out both;
}
@keyframes populateRankReviewSpeechIn {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.populate_rank_review_pc--three .populate_rank_review_review_item.is-active {
		animation: none;
	}
}
.populate_rank_review_pc--three .populate_rank_review_review_item::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -7px;
	width: 12px;
	height: 12px;
	border-top: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
	background: #fff;
	transform: translateY(-50%) rotate(45deg);
}
.populate_rank_review_pc--three .populate_rank_review_meta {
	flex-direction: row-reverse;
	margin-bottom: 8px;
	line-height: 18px;
}
.populate_rank_review_pc--three .populate_rank_review_msg {
	font-size: 16px;
	line-height: 24px;
}
.populate_rank_review_pc--three .populate_rank_review_tags {
	height: auto;
	max-height: 44px;
	margin-top: 12px;
	gap: 4px;
}
.populate_rank_review_pc--three .populate_rank_review_tags:empty {
	display: none;
}
.populate_rank_review_pc--three .populate_rank_review_tag {
	padding: 2px 8px;
	font-size: 12px;
	line-height: 16px;
}
.populate_rank_review_pc--three .populate_rank_review_typing {
	flex: none;
	order: 1;
	align-self: flex-start;
	height: auto;
	margin-top: 20px;
	padding: 16px 20px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}
.populate_rank_review_pc--three .populate_rank_review_review_list:empty::before {
	content: '리뷰 준비 중입니다.';
	color: #8b95a1;
	font-size: 16px;
}