/* BASIC css start */
/* ============================================================
	피시위즈 PC 후기 모아보기 (power_review) — 디자인(CSS) 탭   2026-08-11 · PC 세트 31265

	★ 이 화면의 몸통은 파워리뷰 위젯이 스스로 그립니다. 그 안쪽 마크업은 우리가 정하지 못합니다.
	  그래서 여기 적는 것은 「감싸는 칸」 과 「위젯이 그려 낸 글자·선·단추 색을 덮는 규칙」 뿐입니다.
	  위젯 마크업은 언제든 바뀔 수 있으니 이름을 콕 찍어 잡지 않고,
	  글꼴 · 글자 색 · 선 색 · 모서리처럼 어떤 마크업에도 통하는 것만 덮습니다.

	★ 상품 카드 규칙은 한 줄도 없습니다.
	폭 1260 · 제목 22 Bold · 본문 15 · 선 #DFE3E8 · 바탕 #F7F8FA
============================================================ */

#fwPr {
	box-sizing: border-box;
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 0 64px;
	font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #2B3138;
}
#fwPr * { box-sizing: border-box; }

/* ───── 제목 줄 ───── */
#fwPr .fw-rhead { padding: 32px 0 0; }
#fwPr .fw-rhead h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #14181D;
}
#fwPr .fw-rhead p { margin: 8px 0 0; font-size: 14px; color: #8A9099; }

/* ───── 위젯을 담는 칸 ───── */
#fwPr .fw-rbox {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #14181D;
}

/* ───── 위젯이 그려 낸 것 덮기 (이름을 찍지 않고 종류로만 잡습니다) ───── */
#fwPr .fw-rbox * {
	font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
#fwPr .fw-rbox {
	font-size: 14px;
	color: #2B3138;
}
#fwPr .fw-rbox a { color: #2B3138; text-decoration: none; }
#fwPr .fw-rbox a:hover { color: #14181D; text-decoration: underline; }
#fwPr .fw-rbox img { max-width: 100%; height: auto; vertical-align: middle; }
#fwPr .fw-rbox table { width: 100%; border-collapse: collapse; }
#fwPr .fw-rbox th {
	padding: 14px 8px;
	border-bottom: 1px solid #DFE3E8;
	background: #F7F8FA;
	font-size: 13px;
	font-weight: 700;
	color: #8A9099;
}
#fwPr .fw-rbox td {
	padding: 14px 8px;
	border-bottom: 1px solid #DFE3E8;
	font-size: 14px;
	color: #2B3138;
}
#fwPr .fw-rbox input[type="text"],
#fwPr .fw-rbox input[type="password"],
#fwPr .fw-rbox select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid #DFE3E8;
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
	line-height: 40px;
	color: #14181D;
}
#fwPr .fw-rbox textarea {
	padding: 12px 14px;
	border: 1px solid #DFE3E8;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.7;
	color: #14181D;
}
#fwPr .fw-rbox button,
#fwPr .fw-rbox input[type="button"],
#fwPr .fw-rbox input[type="submit"] {
	height: 36px;
	padding: 0 14px;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #14181D;
	cursor: pointer;
}
#fwPr .fw-rbox button:hover,
#fwPr .fw-rbox input[type="button"]:hover,
#fwPr .fw-rbox input[type="submit"]:hover { border-color: #14181D; }


/* 2026-08-20 (R02) : 후기를 시안 P50 의 「2열 카드」 로 세웁니다.
   위젯 마크업은 한 글자도 건드리지 않고 CSS 로만 다시 세웠습니다.
   줄 순서는 order 로 바꿉니다 — 별점 → 작성자·날짜·조회 → 상품명 → 본문 → 도움이 되셨나요.
   display 는 위젯이 켜고 끄는 것(.pr-content-all · .cover)에는 손대지 않습니다. */

/* 상단 탭 — 부품표 탭 (높이 52 · 글자 15 · 밑줄 2px) */
#fwPr .fw-rtabs { display: flex; flex-wrap: wrap; gap: 0; padding: 16px 0 0; border-bottom: 1px solid #DFE3E8; }
#fwPr .fw-rtab { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 400; color: #8A9099; text-decoration: none; }
#fwPr .fw-rtab:hover { color: #14181D; }
#fwPr .fw-rtab.on { color: #14181D; font-weight: 700; border-bottom-color: #14181D; }

/* 카드 2열 */
#fwPr ul.review-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
#fwPr ul.review-wrap > li { box-sizing: border-box; margin: 0; padding: 16px; border: 1px solid #DFE3E8; border-radius: 10px; background: #FFFFFF; }
#fwPr ul.review-wrap > li table { width: 100%; border: 0; border-collapse: collapse; table-layout: fixed; }
#fwPr ul.review-wrap > li colgroup { display: none; }
#fwPr ul.review-wrap > li tbody,
#fwPr ul.review-wrap > li tr { display: block; }
#fwPr ul.review-wrap > li td { display: block; padding: 0; border: 0; }
#fwPr ul.review-wrap > li td:first-child { display: none; }
#fwPr ul.review-wrap > li td:last-child { display: flex; flex-direction: column; }
#fwPr ul.review-wrap .cont { display: contents; }
#fwPr ul.review-wrap .cont > div:nth-of-type(2) { order: 1; }
#fwPr ul.review-wrap ul.desc { order: 2; }
#fwPr ul.review-wrap .cont > div:nth-of-type(1) { order: 3; }
#fwPr ul.review-wrap .cont > div.content { order: 4; }
#fwPr ul.review-wrap .reply { order: 5; }
#fwPr ul.review-wrap ul.reply-wrap { order: 6; }

/* 시안에 없는 것 — 등급 글자와 NEW·PC 그림 */
#fwPr ul.review-wrap .survey,
#fwPr ul.review-wrap .star-icon .icon { display: none; }

/* 줄마다 */
#fwPr ul.review-wrap .star { color: #E0A400; }
#fwPr ul.review-wrap ul.desc { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #8A9099; }
#fwPr ul.review-wrap ul.desc li { display: inline-flex; }
#fwPr ul.review-wrap .product-name { display: block; margin-top: 8px; font-size: 12.5px; color: #8A9099; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fwPr ul.review-wrap .content { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #2B3138; }
#fwPr ul.review-wrap .content img.photo { width: 96px; height: 96px; object-fit: contain; background: #FFFFFF; border: 1px solid #F1F3F5; border-radius: 10px; margin-top: 8px; }
#fwPr ul.review-wrap .reply { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E5E5E5; font-size: 12.5px; color: #8A9099; }
#fwPr ul.review-wrap .reply a { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border: 1px solid #DFE3E8; border-radius: 8px; background: #FFFFFF; color: #14181D; text-decoration: none; }


/* 2026-08-20 (R04) : R02 를 올려 놓고 실제로 재 보니 세 가지가 틀려 있었습니다.
   ① 작성자·날짜·조회 줄(ul.desc)이 position:absolute 라 순서(order)가 통째로 무시되고
      카드 오른쪽 위에 떠 있었습니다. static 으로 풀어야 순서가 먹습니다.
   ② 「도움이 되셨나요」 단추의 그림은 위젯이 span 배경으로 까는
      bul_h11_yes.gif · bul_h11_no.gif 입니다. 배경을 끄고 글자로 바꿉니다.
   ③ 후기 글 앞뒤에 br 이 네 개씩 붙어 와서 카드 아래가 비어 보였습니다. */

#fwPr ul.review-wrap ul.desc {
	position: static !important;
	top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
	width: auto !important;
	margin: 4px 0 0 !important;
}

/* 별점 — 빈 별은 선 색, 채운 별은 금색 */
#fwPr ul.review-wrap .star { color: #DFE3E8 !important; font-size: 14px; letter-spacing: 1px; }
#fwPr ul.review-wrap .star em { color: #E0A400 !important; font-style: normal; }

/* 도움이 되셨나요 — 그림 끄고 글자 단추로 */
#fwPr ul.review-wrap .reply a.yes span,
#fwPr ul.review-wrap .reply a.no span {
	background: none !important;
	padding: 0 !important;
	margin-left: 4px;
}
#fwPr ul.review-wrap .reply a.yes::before { content: '도움돼요'; }
#fwPr ul.review-wrap .reply a.no::before { content: '아니요'; }
#fwPr ul.review-wrap .reply a { font-size: 12.5px; font-weight: 500; }

/* 후기 글 앞뒤 빈 줄 없애기 — 앞뒤 br 만 지웁니다 */
#fwPr ul.review-wrap .more-options br { display: none; }
#fwPr ul.review-wrap .content { margin-top: 8px; }
#fwPr ul.review-wrap .pr-content-simple,
#fwPr ul.review-wrap .pr-content-all { margin: 0; }
#fwPr ul.review-wrap .more-options { color: #2B3138; text-decoration: none; }
#fwPr ul.review-wrap .pr-more,
#fwPr ul.review-wrap .pr-close { display: inline-block; margin-top: 4px; font-size: 12.5px; color: #8A9099; text-decoration: none; }

/* 상품명 줄 — 굵게 해서 눈에 들어오게 */
#fwPr ul.review-wrap .product-name { font-weight: 500; color: #2B3138; }


/* 2026-08-20 (R05) : 「도움돼요 / 아니요」 단추가 두 줄로 쪼개지고 숫자가 밖으로 새어 나왔습니다.
   위젯이 단추 폭을 57 로 못박아 두어서였습니다. 폭을 내용에 맞추고 줄바꿈을 막습니다. */
#fwPr ul.review-wrap .reply a.yes,
#fwPr ul.review-wrap .reply a.no {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 36px !important;
	padding: 0 12px !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-indent: 0 !important;
	line-height: 34px !important;
	background: #FFFFFF !important;
}
#fwPr ul.review-wrap .reply a.yes span,
#fwPr ul.review-wrap .reply a.no span {
	display: inline !important;
	width: auto !important;
	height: auto !important;
	white-space: nowrap !important;
	text-indent: 0 !important;
	color: #8A9099;
}
#fwPr ul.review-wrap .reply { flex-wrap: nowrap; white-space: nowrap; }
#fwPr ul.review-wrap .reply > span { color: #8A9099; }


/* 2026-08-20 (R06) : 실제로 재보고 세 가지를 잡습니다.
   ① 위젯 안쪽 글꼴이 메이크샵 기본 Dotum 12px 이었습니다 (포토·브랜드별에서 실측).
      껍데기만 Pretendard 라 글꼴이 따로 놀았습니다.
   ② 「도움돼요 / 아니요」 단추가 카드 밖으로 튀어나왔습니다 —
      담는 줄(.reply)의 높이를 위젯이 21 로 못박아 두어서였습니다.
   ③ 상품명 폭을 위젯이 261 로 못박고 한 줄로 잘랐습니다.
      카드 폭을 다 쓰고 두 줄까지 보이게 합니다. */

#fwPr .fw-rbox,
#fwPr .fw-rbox * {
	font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif !important;
}
#fwPr .fw-rbox { font-size: 13px; color: #2B3138; }

#fwPr ul.review-wrap .reply {
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#fwPr ul.review-wrap .reply a.yes,
#fwPr ul.review-wrap .reply a.no {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 32px !important;
	line-height: normal !important;
	float: none !important;
	margin: 0 !important;
}

#fwPr ul.review-wrap .star-icon { width: 100% !important; }
#fwPr ul.review-wrap .product-name {
	display: -webkit-box !important;
	width: 100% !important;
	max-width: 100% !important;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
	line-height: 1.4;
	font-size: 14px;
	font-weight: 500;
	color: #2B3138;
}
#fwPr ul.review-wrap .content,
#fwPr ul.review-wrap .pr-content-simple,
#fwPr ul.review-wrap .more-options { white-space: normal !important; }
#fwPr ul.review-wrap .content { font-size: 14px; color: #2B3138; }

/* 포토 후기 · 브랜드별 위젯 글자 */
#fwPr .fw-rbox dd { font-size: 12.5px !important; color: #8A9099 !important; }


/* 2026-08-20 (R07) : 후기 내용을 접지 않고 전부 보여줍니다. 위젯이 짧은 글(.pr-content-simple)과 전체 글(.pr-content-all)을 둘 다 넣어 주므로, 짧은 쪽을 감추고 전체 쪽을 켭니다. 상품명은 서버에서 잘라 보내기 때문에 CSS 로는 되살릴 수 없습니다. */
#fwPr ul.review-wrap .content .pr-content-simple { display: none !important; }
#fwPr ul.review-wrap .content .pr-content-all { display: block !important; }
#fwPr ul.review-wrap .content .pr-close { display: none !important; }
#fwPr ul.review-wrap .content { font-size: 13.5px; line-height: 1.6; color: #2B3138; }
#fwPr ul.review-wrap .content a { color: #2B3138 !important; text-decoration: none !important; }

/* 2026-08-20 (R08) : 후기 글 안에 빈 줄(br)이 여러 개 들어 있어 카드에 빈 공간이 생깁니다. 빈 줄을 없애고 사진을 아래 줄로 내립니다. 도움돼요 줄의 오른쪽 여백 110px 도 없앱니다. */
#fwPr ul.review-wrap .content .pr-content-all > a { display: block !important; }
#fwPr ul.review-wrap .content .pr-content-all br { display: none !important; }
#fwPr ul.review-wrap .content img.photo { display: block !important; width: 96px !important; height: 96px !important; margin: 12px 0 0 !important; border: 1px solid #DFE3E8; border-radius: 8px; object-fit: cover; }
#fwPr ul.review-wrap .reply { margin-right: 0 !important; }

/* 2026-08-20 (R09) : ...닫기 글자를 감추고, 도움돼요 줄을 카드 맨 아래로 내려 두 칸의 높이를 맞춥니다. */
#fwPr ul.review-wrap .content .pr-content-all > a.pr-close { display: none !important; }
#fwPr ul.review-wrap > li > table,
#fwPr ul.review-wrap > li > table > tbody,
#fwPr ul.review-wrap > li > table > tbody > tr,
#fwPr ul.review-wrap > li > table > tbody > tr > td:last-child { height: 100%; }
#fwPr ul.review-wrap .reply { margin-top: auto !important; }

/* 2026-08-20 (R10) : 상품명이 서버에서 잘려 오므로 한 줄에 4개씩 깝니다. 카드가 좁아진 만큼 글자·사진·버튼을 줄입니다. */
#fwPr ul.review-wrap { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
#fwPr ul.review-wrap > li { padding: 14px !important; }
#fwPr ul.review-wrap .product-name { font-size: 13px !important; }
#fwPr ul.review-wrap .content { font-size: 12.5px !important; }
#fwPr ul.review-wrap .content img.photo { width: 80px !important; height: 80px !important; }
#fwPr ul.review-wrap ul.desc { flex-wrap: wrap !important; gap: 0 8px !important; font-size: 11.5px !important; }
#fwPr ul.review-wrap .reply { flex-wrap: wrap !important; gap: 6px !important; font-size: 11.5px !important; }
#fwPr ul.review-wrap .reply a.yes, #fwPr ul.review-wrap .reply a.no { height: 28px !important; padding: 0 10px !important; font-size: 11.5px !important; }

/* BASIC css end */