@charset "utf-8";
/* ============================================================================
   review_main_m.css v1.0.5 — 2026-09-04 신설 / 2026-09-05 §6 개정  (모바일 메인 후기 전용)
   ----------------------------------------------------------------------------
   팀장 지시(원문)
     · "메인에 있는 조합원의견 — 한살림 모바일 메인의 조합원의견 디자인처럼 변경"
   ----------------------------------------------------------------------------
   한살림 실측 (Playwright iPhone 13 · shop.hansalim.or.kr → /shopping/spMain.do · 2026-09-04)
     블록  : div.mainReview — 배경 #FCF6F2 · padding 40px 0 50px · 콘텐츠 좌우 16
     제목  : p.mainTit 20px/26 — 1줄 "조합원의 생생한"(400) + 2줄 "이용후기"(700), 아래 짧은 대시 1개
     부제  : p.sTit 14px/20 (mt 10 + pt 11 = 대시가 앉는 자리)
     레일  : ul(overflow-x auto · white-space nowrap) · margin 20 -16 0 · padding 0 16
     카드  : li 240.2 x 208 · inline-block · 흰 바탕 · 라운드 0 · 테두리 0 · 그림자 0 · padding 20/18/20/20 · 간격 15
             화면 390 → 1장(240) + 다음 카드 119 노출 = 1.5장
     카드 안: 상품명 16/500 1줄말줄임(pr 60px) + 우상단 상품썸네일 45x45
              → 별1 + "5.0" 14px #888 (pl 15 = 별 자리) → 인용문 14/21 -webkit-line-clamp:3 (mt 25)
              → 작성자 12px #666 "이*영 (한살림경인)" (mt 20)
     없는 것: 조합원 사진 · 가격 · 담기 · 더보기. 카드 전체 = 상품상세 후기탭 링크.
     한 줄 요약 = "커버 히어로 + 목록" 이 아니라 "같은 카드가 조용히 흐르는 레일. 인용문이 주인공."
   ----------------------------------------------------------------------------
   두레 번역 (톤 = 순백 · 1px #e9e4d8 · Pretendard · 딥그린 #3D6041)
     한살림의 문법(균일 카드 · 인용문 주인공 · 조용한 회색 메타 · 가로 레일)은 그대로 가져오고,
     규격은 오늘 두레 모바일 표준으로 갈아끼운다.
       · 카드 상자   = card_flat_m §8-1 두레추천 카드와 같은 값 (흰 바탕 · 1px #e9e4d8 · 8px 라운드 · 그림자 0)
       · 사진 라운드 = 8px (카드가 overflow:hidden 으로 클립 → 사진 모서리 = 카드 모서리)
       · 담기        = card_flat_m §4 실측 표준 (38px 원형 · rgba(0,0,0,.5) · 흰 카트 20px · 터치 44)
       · 레일 여백   = 좌 17 (사이트 표준 정렬선) · 카드간격 8 (card_flat_m §8-2 와 같은 값)
     두레만 더하는 것(팀장 지시) = 별점 · 하단 상품 줄(썸네일48+이름+가격+담기) · 좋아요 · 두레지기 답변 칩.
     두레만 버리는 것 = 커버 히어로 · 드롭캡 · 인용문 페이드아웃 · 앰버 연차 알약 배찌.
       (버린 이유 = 셋 다 "인용문보다 큰 소리"라 한살림 문법의 핵심인 '인용문이 주인공'을 깨고 있었다.)
   ----------------------------------------------------------------------------
   [여백 산술] 화면 W · 좌여백 17 · 카드간격 8 일 때  peek = W - 17 - 카드폭 - 8
     팀장 목표 "한 화면 1.15장" → 카드폭 = W - 74 로 두면 peek 이 항상 49px 이 되어
     390 화면에서 1 + 49/316 = 1.155 장. 화면 폭이 달라져도 peek 49 가 유지된다(360→1.17 / 430→1.14).
   ----------------------------------------------------------------------------
   스코프 = .rvmo_sec 안에서만. 이 클래스는 모바일 메인의 후기 섹션에만 붙는다
     (WEB-INF/jsp/mobile/main/main_home_rd.jsp · main_home.jsp).
     PC main_home.jsp 는 .main_section_review 만 있고 .rvmo_sec 가 없어 이 시트가 로드돼도 한 줄도 안 먹는다.
   로드  = include/comm/reviewMainAssets.jsp 의 링크 1줄 (review_list_v2.css 다음 = 마지막 로드라 동특이도에서 이긴다)
   롤백  = 그 링크 1줄 제거 + include/comm/reviewMainMo.jsp.bak_0904rvm 복원
   ============================================================================ */

/* ── 0) 섹션 — 배경·여백은 main_rd.css(.mrdz .rvmo_sec) 것을 그대로 쓰고 상하만 조인다 ──
   구판 섹션 높이 958px(커버 471 + 레일 312 + 제목·여백)이 메인 한 화면을 통째로 먹었다.
   커버를 걷어내면 그 자리가 비므로 padding 도 같이 줄여야 "빈 섹션"으로 안 보인다. */
.rvmo_sec{ padding:30px 0 14px; }

/* ── 1) 제목 — 한살림의 "가는 리드 / 굵은 제목 / 짧은 대시 / 부제" 4단 ────────
   두레는 리드를 에이브로우(.eb 딥그린 자간 .1em)로 이미 쓰고 있어 그 자리를 그대로 계승한다.
   바꾸는 건 대시 하나 : 구판은 딥그린 50px + 화면 끝까지 이어지는 회색 선이었는데(섹션을 가로지르는
   굵은 밑줄 = 제목보다 강했다) 한살림처럼 짧은 대시 하나만 남긴다. */
.rvmo_sec .rvmo_mast{ position:relative; text-align:left; margin:0 17px 16px; padding-bottom:13px; }
.rvmo_sec .rvmo_mast .eb{ font-size:12.5px; letter-spacing:.1em; font-weight:800; color:#3D6041; }
.rvmo_sec .rvmo_mast h3{ font-size:22px; font-weight:700; color:#1D271E; margin-top:5px; letter-spacing:-.02em; }
.rvmo_sec .rvmo_mast h3 b{ color:#3D6041; font-weight:700; }
/* 2026-09-04 B1 섹션 제목 통일: 짧은 대시 → 상품 레일과 같은 '전폭 얇은 선'(.mrdz .rule = 딥그린 50px + #EAEAEA 전폭).
   제목과 부제 사이 자리는 유지하되 선을 화면 전폭으로 늘려 급상승·베스트·두레추천 헤더와 같은 문법으로 맞춘다. */
.rvmo_sec .rvmo_mast .sub{ position:relative; font-size:13.5px; color:#8A8F86; margin-top:12px; padding-top:15px; }
.rvmo_sec .rvmo_mast .sub::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#3D6041 0 50px,#EAEAEA 50px); }
.rvmo_sec .rvmo_mast::after{ content:none; }

/* ── 2) 레일 — 가로 스와이프, 한 화면 1.15장 ────────────────────────────────
   scroll-padding-left 17 = 스냅이 걸린 카드의 좌측선이 제목 좌측선과 정확히 겹친다.
   구판은 margin:-14 / padding:14 조합이라 첫 카드가 x=-14 에서 시작해 화면 밖으로 잘려 있었다(실측). */
.rvmo_sec .rvmo_rest{
	display:flex; flex-wrap:nowrap; align-items:stretch;
	gap:8px; margin:0; padding:2px 17px 14px;
	overflow-x:auto; overflow-y:hidden;
	scroll-snap-type:x mandatory; scroll-padding-left:17px;
	-webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
	background:transparent; border:0; border-radius:0;
}
.rvmo_sec .rvmo_rest::-webkit-scrollbar{ display:none; width:0; height:0; }

/* ── 3) 카드 — 오늘 모바일 카드 표준(흰 바탕 · 1px #e9e4d8 · 8px · 그림자0) ──
   .rvmo_hide 해제 = 레일에서는 전 건이 흐른다(더 보기 버튼은 §9에서 숨긴다).
   overflow:hidden 이 사진 모서리를 카드 모서리로 클립한다 → 사진에 따로 라운드를 주지 않는다. */
.rvmo_sec .rvmo_row,
.rvmo_sec .rvmo_row:last-child{
	flex:0 0 calc(100vw - 74px); max-width:360px;
	scroll-snap-align:start;
	display:flex; flex-direction:column; gap:0;
	background:#fff; border:1px solid #e9e4d8; border-radius:8px;
	padding:0; overflow:hidden; box-shadow:none; cursor:pointer;
	-webkit-tap-highlight-color:rgba(61,96,65,.06);
}
.rvmo_sec .rvmo_row.rvmo_hide{ display:flex; }
.rvmo_sec .rvmo_row:active{ box-shadow:none; transform:none; }

/* ── 4) 1층 사진 — 전폭 148px. "인용문이 주인공"을 지키는 높이다 ────────────
   사진을 168 이상으로 키우면 사진(168) > 본문(140) 이 되어 카드가 다시 '사진 카드'로 읽힌다.
   148 이면 사진과 본문이 거의 같은 무게라 눈이 사진에서 글로 자연스럽게 넘어간다.
   구판 커버는 210, 구판 줄카드는 120 이었다(두 얼굴). 이제 한 값이다. */
.rvmo_sec .rvmo_ph{
	position:relative; display:block; width:100%; height:148px; flex:none;
	margin:0; padding:0; border:0; background:#f2f0ea; overflow:hidden; cursor:pointer;
}
.rvmo_sec .rvmo_ph img{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
/* 미디어 라벨(영상 후기 / 사진 N장) — 좌하단, 사진 위에서만 읽히면 되므로 최소 크기 */
.rvmo_sec .rvmo_mtag{
	position:absolute; left:8px; bottom:8px; z-index:2;
	font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,.52);
	border-radius:4px; padding:2px 7px; line-height:1.5; letter-spacing:0;
}
/* 재생 표시 = 담기 아이콘과 같은 문법(원형 · 반투명 검정 · 흰 글리프)으로 맞춘다 */
.rvmo_sec .rvmo_vp{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:46px; height:46px; border:0; border-radius:50%; background:rgba(0,0,0,.5); pointer-events:none;
}
.rvmo_sec .rvmo_vp::after{
	content:""; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
	border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff;
}

/* ── 5) 2층 본문 — 별점 → 인용문 3줄 → 작성자 한 줄 ────────────────────────
   flex:1 + 상품 줄 margin-top:auto = 레일이 카드 높이를 맞출 때(stretch) 생기는 여백이
   글과 상품 줄 사이가 아니라 인용문 아래에 모인다 → 상품 줄은 항상 카드 바닥에 정렬된다. */
.rvmo_sec .rvmo_col{ flex:1 1 auto; min-width:0; padding:12px 13px 10px; display:flex; flex-direction:column; }

/* 별점 = 사이트 별점 표준색(앰버 #F8A31E). 빈 별은 크림 회색이라 "몇 개인지"만 조용히 보인다 */
.rvmo_sec .rvmo_star{ display:flex; gap:1px; margin:0 0 5px; line-height:1; }
.rvmo_sec .rvmo_st{ font-size:12.5px; color:#ddd8cc; }
.rvmo_sec .rvmo_st.on{ color:#F8A31E; }

/* 인용문 = 카드의 주인공. 3줄 말줄임(한살림 -webkit-line-clamp:3 과 같은 규칙).
   구판은 4줄 + 흰색 그라디언트 페이드였는데, 페이드가 마지막 줄을 반쯤 지워 "덜 읽힌 글"처럼 보였다.
   말줄임(…)이 "여기서 잘렸다"를 정직하게 알려 준다. */
.rvmo_sec .rvmo_rq{
	font-family:'Pretendard','Noto Sans KR',sans-serif;
	font-size:15px; line-height:1.6; color:#33362f; letter-spacing:-.01em;
	margin:0; word-break:keep-all; overflow-wrap:break-word;
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
	max-height:none; position:static;
}
/* 구판 페이드아웃 제거 (review_list_v2.css v5.25 .rvmo_sec .rvmo_quote::after 대응) */
.rvmo_sec .rvmo_rq::after{ content:none; }

/* 작성자 한 줄 = "김*수 · 푸른두레 · 7년". 한살림 "이*영 (한살림경인)" 의 두레판.
   구판은 앰버 알약 배찌(16년/생협운동)가 카드에서 제일 큰 소리라 인용문을 눌렀다 → 같은 회색 줄에 눕힌다. */
.rvmo_sec .rvmo_rs{
	display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:9px;
	font-size:12.5px; color:#8A8F86;
}
.rvmo_sec .rvmo_rsl{
	flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	font-size:12.5px; color:#8A8F86; letter-spacing:-.01em;
}
.rvmo_sec .rvmo_rsl b{ color:#4A5147; font-size:12.5px; font-weight:700; }

/* 두레지기 답변 칩 = "답이 달린 후기"라는 사실만 알리면 되므로 가장 작게 */
.rvmo_sec .rvmo_replytag{
	flex:0 0 auto; margin:0; display:inline-flex; align-items:center; gap:2px;
	font-size:11px; font-weight:700; color:#3D6041; background:#EEF4EC; border:0;
	border-radius:999px; padding:2px 7px; line-height:1.5; white-space:nowrap; vertical-align:baseline;
}
.rvmo_sec .rvmo_replytag em{ font-style:normal; font-size:10px; line-height:1; }

/* 좋아요 = 상자 없는 아이콘+숫자. 구판의 흰 알약 버튼(테두리 1px)은 담기 버튼과 혼동됐다 */
.rvmo_sec .rv_like_btn.rvmo_like{
	flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
	position:relative; min-height:0; padding:2px 0 2px 4px; border:0; background:none; border-radius:0;
	font-size:12px; color:#8A8F86; font-family:inherit;
}
/* 2026-09-04 A4(c) 터치타깃 44 — 아이콘/글자 크기 유지, 투명 히트영역만 44×44 로 확장(절대배치라 행 높이·주변 무변) */
.rvmo_sec .rv_like_btn.rvmo_like::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; min-width:44px; height:44px; }
.rvmo_sec .rv_like_btn.rvmo_like .ic{ font-size:12.5px; color:#cfcabb; }
.rvmo_sec .rv_like_btn.rvmo_like .cnt{ font-size:12px; color:#8A8F86; }
.rvmo_sec .rv_like_btn.rvmo_like.on{ background:none; border:0; }
.rvmo_sec .rv_like_btn.rvmo_like.on .ic{ color:#D0342C; }
.rvmo_sec .rv_like_btn.rvmo_like.on .cnt{ color:#D0342C; }

/* ── 6) 첨부 없는 후기 = 사진 자리에 연차 배찌 (v1.0.3, 2026-09-05) ──────────
   팀장 지적 : "첨부 없는 카드는 상단이 너무 허전하다."
   팀장 결정 : 그 자리에 생협운동 배지를 보여준다.
   ----------------------------------------------------------------------------
   쓰는 것 = 이미 있는 조합원 연차 배찌 V3 「N년｜생협운동」 (.rvm_coop_badge + 티어 s1~s5).
     정의처 = review_list_v2.css 의 .main_section_review .rvm_coop_badge (구조·티어색·적록색약 대응)
     — 모바일 메인 섹션은 class="main_section_review rvmo_sec" 라 그 정의가 그대로 상속된다.
     PC 후기 카드(reviewMainCard.jsp)·상세 후기(goodsViewCommV2)·마이 히어로가 쓰는 바로 그 배찌다.
     ⚠ 새 색·새 그래픽을 만들지 않는다. 여기서 얹는 건 "이 자리에서의 크기" 하나뿐.
   ----------------------------------------------------------------------------
   [높이 산술] 배찌 블록을 사진과 같은 148px 로 두면 텍스트 카드와 사진 카드의 총높이가 같아진다
     (148 + 본문 + 상품줄 67). 그래서 v1.0.2 의 텍스트 전용 본문 규칙(인용문 7줄·16px·세로중앙·
     큰 따옴표 34px)은 여기서 전부 되돌린다 — 그대로 두면 텍스트 카드만 40px 넘게 길어지고,
     레일이 align-items:stretch 라 그 높이가 사진 카드 전부에 옮아붙는다.
     되돌림은 "값 복원"으로 적는다(삭제 아님) : review_list_v2.css v5.26 이 브라우저에 캐시로 남아
     이 시트만 먼저 갱신되는 경우에도 옛 인용문 카드 규칙이 배찌와 겹치지 않게 막아야 한다. */
.rvmo_sec .rvmo_ph--badge{
	display:flex; align-items:center; justify-content:center;
	background:#F6F8F3; border-bottom:1px solid #EFEBE0;
}
/* 배찌 크기 = 모바일 기본(.rvmo_sec .rvm_coop_badge = 12/10px)의 약 1.3배.
   이 자리에서만 커진다 — 서명줄 안 인라인 배찌(작성자 옆)는 건드리지 않는다. */
.rvmo_sec .rvmo_ph--badge .rvm_coop_badge{ top:0; border-radius:11px; box-shadow:0 1px 3px rgba(29,39,30,.08); }
.rvmo_sec .rvmo_ph--badge .rvm_coop_badge .n{ padding:0 12px; font-size:17px; }
.rvmo_sec .rvmo_ph--badge .rvm_coop_badge .lbl{ padding:5px 12px; font-size:13px; }

/* 본문 = 사진 카드와 같은 규칙(위 [높이 산술]). v1.0.2 인용문 카드 문법 되돌림. */
.rvmo_sec .rvmo_row--txt{ background:#fff; }
.rvmo_sec .rvmo_row--txt .rvmo_col{ padding:12px 13px 10px; justify-content:flex-start; }
.rvmo_sec .rvmo_row--txt .rvmo_col::before{ content:none; }
.rvmo_sec .rvmo_row--txt .rvmo_rs{ margin-top:auto; }
.rvmo_sec .rvmo_row--txt .rvmo_rq{ font-size:15px; line-height:1.6; -webkit-line-clamp:3; }
.rvmo_sec .rvmo_row--txt .rvmo_rq::before{ content:none; }

/* ── 7) 3층 상품 줄 — 썸네일 48 + 이름 + 가격 + 원형 담기 38 ────────────────
   카드 안에서 유일하게 바탕이 다른 띠(#FAF9F5). "여기부터는 후기가 아니라 생활재"라는 경계다.
   margin-top:auto 로 항상 카드 바닥. 카드 폭을 꽉 채우려고 좌우 -1px 은 쓰지 않는다(카드가 클립한다). */
.rvmo_sec .rvmo_prod{
	flex:none; display:flex; align-items:center; gap:9px;
	margin:0; padding:9px 11px 10px 11px;
	background:#FAF9F5; border-top:1px solid #EFEBE0; cursor:default;
}
.rvmo_sec .rvmo_prod .pim{
	width:48px; height:48px; flex:none; border-radius:6px; object-fit:cover;
	border:1px solid #EDE8DC; background:#fff; cursor:pointer;
}
.rvmo_sec .rvmo_prod .pcol{ min-width:0; flex:1 1 auto; cursor:pointer; }
.rvmo_sec .rvmo_prod .pnm{
	font-size:13.5px; font-weight:700; line-height:1.35; color:#1D271E; letter-spacing:-.01em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rvmo_sec .rvmo_prod .ppr{ font-size:14px; font-weight:800; color:#3D6041; margin-top:2px; line-height:1.2; }
.rvmo_sec .rvmo_prod .ppr .won{ font-size:12px; font-weight:700; margin-left:1px; }

/* 담기 = card_flat_m.css §4 실측 표준(오아시스 모바일 규격)과 같은 값.
   그쪽은 사진 우하단 absolute 이고 여기는 상품 줄 우측 static 이라 자리만 다르다.
   ⚠ 클래스명을 .rvmo_add 로 둔 이유 = card_flat_m.js 의 BTN 목록(.addbtn/.pc_cart/a.cart…)에 안 걸려야
      버튼이 사진 컨테이너 안으로 옮겨지지 않는다(카드 구조가 달라 옮기면 사진 위에 얹힌다). */
.rvmo_sec .rvmo_add{
	position:relative; flex:none; display:block;
	width:38px; height:38px; min-width:38px; margin:0; padding:0;
	border:0; border-radius:50%; box-shadow:none; cursor:pointer;
	font-size:0; line-height:0; text-indent:0; overflow:visible;
	-webkit-appearance:none; appearance:none;
	background-color:rgba(0,0,0,.5);
	background-repeat:no-repeat; background-position:50% 50%; background-size:20px 20px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.4' cy='20' r='1.4'/%3E%3C/svg%3E");
}
.rvmo_sec .rvmo_add:active{ background-color:rgba(0,0,0,.74); }
/* 터치타깃 44px = 시각 38 + 상하좌우 3 확장 (상품 줄 padding 안에서 끝나 카드 밖으로 안 번진다) */
.rvmo_sec .rvmo_add::after{ content:""; position:absolute; left:-3px; right:-3px; top:-3px; bottom:-3px; border-radius:50%; }

/* 판매중지·한정소진 = 담기 자리에 사유 칩(담기 버튼은 렌더 자체가 안 된다 — JSP stopYn 게이트) */
.rvmo_sec .rvmo_stop{
	flex:none; max-width:96px; font-size:11.5px; font-weight:700; color:#9A958A;
	background:#F1EFE8; border-radius:999px; padding:7px 10px; line-height:1.3;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── 8) 큰글씨 모드 — 담기 40px, 인용문 한 단계 위 ─────────────────────────── */
html.font_big .rvmo_sec .rvmo_add,
body.dcbig .rvmo_sec .rvmo_add{ width:40px; height:40px; min-width:40px; background-size:22px 22px; }
html.font_big .rvmo_sec .rvmo_rq,
body.dcbig .rvmo_sec .rvmo_rq{ font-size:16px; }
html.font_big .rvmo_sec .rvmo_prod .pnm,
body.dcbig .rvmo_sec .rvmo_prod .pnm{ font-size:14.5px; }

/* ── 9) 구판 잔재 접기 ────────────────────────────────────────────────────
   커버 카드 마크업은 reviewMainMo.jsp v2.0 에서 사라졌지만, ?rd=0 폴백처럼 구 include 가
   살아 있는 경로가 남아 있을 수 있어 CSS 로도 한 번 더 막는다(중복 커버 방지).
   더 보기 버튼 = 레일에 전 건이 이미 흐르므로 누를 것이 없다. */
.rvmo_sec .rvmo_cover{ display:none; }
.rvmo_sec .rvmo_all{ display:none; }
.rvmo_sec .rvmo_files{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   §10) [v1.0.4 · 2026-09-05] ?rv=2 시안 — 인용문 카드 1종 (.rvmo_v2 스코프)
   --------------------------------------------------------------------------
   팀장 지적 : "디자인이 깔끔하게 안 나온다."
   진단 : ① 사진/영상 카드(148px 히어로)와 글 카드(연차 배찌 상자)가 한 레일에 섞여 리듬이 깨진다
          ② 카드 하나가 별점·인용문·작성자·상품썸네일·가격·담기까지 다 져서 번잡하다
          ③ 그래서 주인공이 없다. 조합원 사진은 라벨 클로즈업이 많아 148 로 키우면 되레 지저분하다.
   답   : 한살림 문법을 끝까지 — 모든 카드를 같은 구조 하나로, 인용문이 주인공,
          사진은 56px 썸네일로 강등, 가격·담기 제거.
   --------------------------------------------------------------------------
   ⚠ 이 블록은 append 전용이다. §0~§9(현행 화면)는 한 줄도 건드리지 않는다.
     .rvmo_v2 는 ?rv=2 일 때만 레일 상자에 붙으므로(reviewMainMo2.jsp), 기본 화면에서는
     아래 규칙이 매칭될 요소 자체가 없다 = 렌더 무변경.
   [높이 산술] 16(pad) + 56(머리줄) + 12 + 105.6(인용문 4줄 = 16.5×1.6×4) + 14 + 18(작성자)
              + 12 + 1 + 10 + 18(상품줄) + 16(pad) ≒ 279 → min-height 280.
     인용문이 4줄보다 짧아도 작성자 줄의 margin-top:auto 가 남은 자리를 흡수해 상품 줄이 항상
     같은 높이에 앉는다. 레일 align-items:stretch 와 합쳐 전 카드 높이가 완전히 같아진다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 카드 상자 — 레일·스냅은 §2 를 그대로 쓰고 폭·패딩·라운드만 갈아끼운다(§3 는 100vw-74 / 8px / padding 0).
   :last-child 까지 함께 적는 이유 = §3 의 `.rvmo_sec .rvmo_row:last-child` 가 같은 특이도(0,3,0)라
   선택자 하나만으로는 "뒤에 온 쪽이 이긴다"에만 기대게 된다. 명시적으로 이겨 둔다. */
.rvmo_sec .rvmo_v2 .rvmo_row,
.rvmo_sec .rvmo_v2 .rvmo_row:last-child{
	flex:0 0 78vw; max-width:300px; min-height:280px;
	display:flex; flex-direction:column; gap:0;
	background:#fff; border:1px solid #e9e4d8; border-radius:12px;
	padding:16px; overflow:hidden; box-shadow:none;
}

/* ① 머리줄 : 좌 별점(12.5px) / 우 썸네일 56. 별점을 56 높이 안에서 세로 중앙에 둔다
   (위 정렬로 두면 별 아래로 45px 빈칸이 생겨 머리줄이 "덜 채워진 칸"으로 읽힌다). */
.rvmo_sec .rvmo_v2 .rvmo_c2hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rvmo_sec .rvmo_v2 .rvmo_star{ margin:0; min-height:13px; }
.rvmo_sec .rvmo_v2 .rvmo_st{ font-size:12.5px; }

/* 썸네일 슬롯 — 모든 카드에 있다(후기 사진 → 영상 포스터 → 상품 이미지). 이 "빈 적 없는 슬롯"이
   카드 구조를 하나로 묶는다. 56px 이라 터치타깃 44 를 이미 넘겨 확장 히트영역이 필요 없다. */
.rvmo_sec .rvmo_v2 .rvmo_c2th{
	position:relative; flex:0 0 56px; width:56px; height:56px;
	margin:0; padding:0; border:1px solid #EDE8DC; border-radius:10px;
	background:#f2f0ea; overflow:hidden; cursor:pointer; line-height:0;
	-webkit-appearance:none; appearance:none;
}
.rvmo_sec .rvmo_v2 .rvmo_c2th img{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
/* 생활재 사진은 대개 흰 배경 컷이라 회색 바탕이 비치면 테두리처럼 보인다 */
.rvmo_sec .rvmo_v2 .rvmo_c2th--gd{ background:#fff; }
/* 라벨(영상 / 사진 N장) = 9px 바닥 띠.
   ⚠ §10-2「12.5px 하한」의 유일한 예외(카드당 최대 1개). 사유 = 공간이 없다 — 폭 56px 안에
   「사진 3장」 4글자를 12.5px 로 넣으면 50px 넘게 먹어 썸네일 사진을 거의 덮는다. 내용은 사진
   장수의 보조 표시이고 같은 정보를 썸네일 자체와 재생 글리프가 이미 전달하므로 단독 정보원이
   아니다. 56px 안에서 읽히는 최소 크기로 둔다. */
.rvmo_sec .rvmo_v2 .rvmo_c2th .tg{
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	font-size:9px; font-weight:600; color:#fff; background:rgba(0,0,0,.55);
	text-align:center; line-height:1.55; padding:1px 0; letter-spacing:-.02em;
}
/* 재생 글리프 = §4 의 46px 원형을 22px 로 축소(같은 문법, 자리만 작다) */
.rvmo_sec .rvmo_v2 .rvmo_c2th .vp{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.5); pointer-events:none;
}
.rvmo_sec .rvmo_v2 .rvmo_c2th .vp::after{
	content:""; position:absolute; top:50%; left:57%; transform:translate(-50%,-50%);
	border-style:solid; border-width:4.5px 0 4.5px 7.5px; border-color:transparent transparent transparent #fff;
}

/* ② 인용문 = 카드의 주인공. 16.5/1.6 · 4줄 클램프 · keep-all.
   여는 따옴표 장식은 넣지 않는다 — 장식이 붙는 순간 "인용문보다 큰 소리"가 하나 더 생긴다. */
.rvmo_sec .rvmo_v2 .rvmo_c2q{
	font-family:'Pretendard','Noto Sans KR',sans-serif;
	font-size:16.5px; line-height:1.6; color:#33362f; letter-spacing:-.015em;
	margin:12px 0 0; padding:0; word-break:keep-all; overflow-wrap:break-word;
	display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
	max-height:none; position:static;
}
.rvmo_sec .rvmo_v2 .rvmo_c2q::before,
.rvmo_sec .rvmo_v2 .rvmo_c2q::after{ content:none; }

/* ③ 작성자 줄 : 이름·생협(좌, 말줄임) / 좋아요(아주 작게) / 연차 배찌(우측 끝).
   배찌는 review_list_v2.css 의 `.rvmo_sec .rvm_coop_badge` 원래 크기(12/10px) 그대로 쓴다
   — §6 처럼 이 자리에서 키우지 않는다. 작성자 줄의 주인공은 여전히 인용문이다. */
.rvmo_sec .rvmo_v2 .rvmo_c2s{
	display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px;
	font-size:12.5px; color:#8A8F86;
}
.rvmo_sec .rvmo_v2 .rvmo_c2nm{
	flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	font-size:12.5px; color:#8A8F86; letter-spacing:-.01em;
}
.rvmo_sec .rvmo_v2 .rvmo_c2nm b{ color:#4A5147; font-size:12.5px; font-weight:700; }
/* 연차를 모르는 후기(단체·어린이집·바우처) = 배찌 자리에 고객분류 텍스트 */
.rvmo_sec .rvmo_v2 .rvmo_c2gc{
	flex:0 0 auto; font-size:12.5px; font-weight:700; color:#7B8177;
	background:#F2F1EB; border-radius:999px; padding:3px 8px; line-height:1.4; white-space:nowrap;
}
/* 좋아요 = §5 의 상자 없는 아이콘+숫자를 한 단계 더 줄인다(히트영역 44 는 §5 그대로 유지) */
.rvmo_sec .rvmo_v2 .rv_like_btn.rvmo_like{ padding:2px 0 2px 2px; font-size:12.5px; }
.rvmo_sec .rvmo_v2 .rv_like_btn.rvmo_like .ic{ font-size:12.5px; }
.rvmo_sec .rvmo_v2 .rv_like_btn.rvmo_like .cnt{ font-size:12.5px; }

/* ④ 상품 줄 : 이름 1줄 + 작은 chevron. 가격·담기 없음.
   §7 의 크림 띠(#FAF9F5 + 썸네일48 + 원형 담기)를 쓰지 않는 이유 = 그 띠가 카드에서 두 번째로 큰
   덩어리라 인용문과 무게를 다툰다. 여기서는 머리카락 선 하나로만 경계를 긋는다. */
.rvmo_sec .rvmo_v2 .rvmo_c2p{
	display:flex; align-items:center; gap:6px;
	margin:12px 0 0; padding:10px 0 0;
	border-top:1px solid #F0ECE1; background:none; cursor:pointer;
}
.rvmo_sec .rvmo_v2 .rvmo_c2p .pnm{
	flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	font-size:13px; font-weight:600; color:#4A5147; line-height:1.4; letter-spacing:-.01em;
}
.rvmo_sec .rvmo_v2 .rvmo_c2p .chv{
	flex:0 0 auto; width:6px; height:6px; margin-right:2px;
	border-right:1.5px solid #B9B4A6; border-top:1.5px solid #B9B4A6; transform:rotate(45deg);
}

/* 큰글씨 모드 — 인용문만 한 단계 위(카드 min-height 는 stretch 가 알아서 맞춘다) */
html.font_big .rvmo_sec .rvmo_v2 .rvmo_c2q,
body.dcbig .rvmo_sec .rvmo_v2 .rvmo_c2q{ font-size:17.5px; }

/* ── §10-1) [v1.0.5 · 2026-09-05] v2 카드 안 연차 배찌 = 회녹 단색 (팀장 결정) ────────
   왜 : 티어색(s4·s5 골드, s3 최암초록)이 카드에서 채도가 가장 높은 요소라 "인용문이 주인공"을
        정면으로 깨고 있었다. 배찌는 작성자 줄의 각주지 카드의 헤드라인이 아니다.
   무엇 : 티어(s1~s5)와 무관하게 한 가지 회녹으로 눕힌다. 「N년｜생협운동」 두 칸 구조는 유지하되
        두 칸 색을 같게 해서 좌우 분할선(border 없음)이 눈에 띄지 않게 한다.
   대비 : 흰 카드(#fff) 위 rgba(61,96,65,.08) = #EFF2F0 합성, 글자 #4A5A4E → 명암비 6.5:1 (AA 4.5 이상).
   범위 : `.rvmo_sec .rvmo_v2` 안에서만. 후기 상세(goodsViewCommV2)·PC 후기 카드(reviewMainCard)·
        구 레일(?rv=0 의 .rvmo_ph--badge)의 배찌는 티어색 그대로다 — review_list_v2.css 무접촉.
   방법 : 티어 클래스를 셀렉터에 함께 적는다. review_list_v2.css 의 `.main_section_review
        .rvm_coop_badge.s4`(0,3,0)와 특이도가 같아지는 지점이 있어 "뒤에 로드된 시트가 이긴다"에만
        기대지 않고 명시적으로 이겨 둔다. */
.rvmo_sec .rvmo_v2 .rvm_coop_badge,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s1,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s2,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s3,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s4,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s5{
	border:1px solid #DFE5DC; border-radius:8px; box-shadow:none;
}
.rvmo_sec .rvmo_v2 .rvm_coop_badge .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge .lbl,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s1 .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s1 .lbl,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s2 .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s2 .lbl,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s3 .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s3 .lbl,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s4 .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s4 .lbl,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s5 .n,
.rvmo_sec .rvmo_v2 .rvm_coop_badge.s5 .lbl{
	background:rgba(61,96,65,.08); color:#4A5A4E;
}
/* 연차 숫자만 한 눈금 굵게 — 색이 같아진 만큼 두 칸을 가르는 단서는 굵기 하나로 충분하다 */
.rvmo_sec .rvmo_v2 .rvm_coop_badge .n{ font-weight:800; }
.rvmo_sec .rvmo_v2 .rvm_coop_badge .lbl{ font-weight:600; }

/* ── §10-2) [v1.0.6 · 2026-09-05] v2 카드 글자 12.5px 하한 (중장년 시인성) ────────────
   왜 : 시인성 0단계 실측에서 이 레일 안에만 12.5px 미만 텍스트 노드가 180개 있었다
        (별점 100 · 좋아요 40 · 배찌 36 · 고객분류 2 · 썸네일 라벨 2).
        본문(인용문 16.5px)은 크고 주변 메타만 작은 카드는 "읽히는 글자"와 "거의 안 보이는
        글자"가 한 줄에 섞여, 눈이 카드마다 초점을 다시 잡아야 한다.
   무엇 : `.rvmo_v2` 안 글자의 하한을 12.5px 로 올린다. 예외는 썸네일 바닥 띠(.tg 9px) 하나뿐이고
        사유는 위 §10 썸네일 블록에 적어 두었다.
   배찌 : review_list_v2.css 의 `.rvmo_sec .rvm_coop_badge .n/.lbl`(12px / 10px, 특이도 0,2,0)을
        `.rvmo_v2` 안에서만 덮는다(0,3,0). → 구 레일(?rv=0) · PC 후기 카드 · 상세 후기의 배찌는
        종전 크기 그대로 = review_list_v2.css 무접촉.
   높이 : 배찌가 약 2px 높아지고 약 11px 넓어지지만, 작성자 줄은 flex · 이름은 ellipsis 라
        줄바꿈이 없고, 카드 높이는 min-height:280 + 레일 stretch 가 흡수해 전 카드 단일값을 유지한다. */
.rvmo_sec .rvmo_v2 .rvm_coop_badge .n{ font-size:12.5px; }
.rvmo_sec .rvmo_v2 .rvm_coop_badge .lbl{ font-size:12.5px; }

/* ── [2026-09-06 팀장] v2 인용문 카드 순서 교정 ─────────────────────────────
   ① 머리줄: 상품(후기) 썸네일이 별점보다 앞(왼쪽). 사진이 먼저 눈에 들어와야 "무엇에 대한 후기"인지 읽힌다.
   ② 작성자 줄: 「N년｜생협운동」 배찌가 이름 앞. 마이두레 헤더(배찌 → 이름)와 같은 순서.
   마크업 무변경 — flex order 로만 바꾼다. */
.rvmo_sec .rvmo_v2 .rvmo_c2hd{ justify-content:flex-start; }
.rvmo_sec .rvmo_v2 .rvmo_c2hd .rvmo_c2th{ order:-1; }
.rvmo_sec .rvmo_v2 .rvmo_c2s .rvm_coop_badge,
.rvmo_sec .rvmo_v2 .rvmo_c2s .rvmo_c2gc{ order:-1; }