/* ═══════════════════════════════════════════════════════════
   품앗히 — 내돈내산 후기 상세 · 클린 에디션 · build 20260901a (본문 타이포)
   화이트 베이스 + 핑크 포인트. 장식(톱니·도장·바코드·손글씨) 제거.
   money1/money2 상세에서만 로드 (content.html 조건부)
   ═══════════════════════════════════════════════════════════ */
.pv-wrap{
  /* 2026-08-29 — --pvm 이 #ADB1B8 였습니다. 흰 배경 대비 2.15 로 읽기 기준(4.5)의 절반이라
     "도움 0 · 댓글 0", "개인정보는 가리고 올려요" 같은 글이 흐릿했습니다. #74777C 는 4.50 입니다. */
  --pvk:#191A1C; --pvs:#6B6F76; --pvm:#74777C; --pvl:#F1F2F4; --pvl2:#E8EAED;
  --pvp:#FF2E93; --pvpb:#FFF0F7; --pvpln:#FFC0DF;
  /* 장점 핀 배경. v3.css 의 .pvp-pin[data-t=good] 과 같은 색이어야 글 쓸 때와 읽을 때
     핀 색이 같습니다. v3.css 를 #097D57 로 바꾸었으므로 여기도 맞춥니다.
     흰 +기호 대비도 3.34 → 5.13 으로 좋아집니다. 단점 핀 #E8843C 는 양쪽이 이미 같습니다. */
  --pvmint:#097D57; --pvorg:#E8843C;
  max-width:720px;margin:0 auto;padding:4px 0 10px;
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  color:var(--pvk);letter-spacing:-.005em;
}

/* ── 상단 칩 ── */
.pv-chips{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 16px}
.pv-chip{font-size:12.5px;font-weight:600;color:var(--pvs);
  border:1px solid var(--pvl2);border-radius:99px;padding:6px 12px;background:#fff}
.pv-chip-vf{background:var(--pvpb);color:var(--pvp);border-color:var(--pvpln);font-weight:700}

/* ── 영수증(구매 인증) 카드 ── */
.pv-rcpwrap{margin:0 0 20px}
.pv-rcp{background:#fff;border:1px solid var(--pvl2);border-radius:14px;padding:14px 16px}
.pv-rcp-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pv-rcp-tt{font-size:13px;font-weight:700;color:var(--pvk);display:flex;align-items:center;gap:7px}
.pv-rcp-tt::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--pvp);flex:0 0 auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.pv-rcp-vf{margin-left:auto;font-size:12px;font-weight:700;color:var(--pvp)}
.pv-rcp-img{position:relative;border-radius:10px;overflow:hidden;background:#FAFAFB;cursor:zoom-in}
.pv-rcp-img img{display:block;width:100%;max-height:150px;object-fit:contain}
.pv-rcp-more{position:absolute;right:8px;bottom:8px;background:rgba(20,20,24,.55);color:#fff;
  font-size:11px;font-weight:600;border-radius:99px;padding:4px 9px;backdrop-filter:blur(4px)}
.pv-rcp-ft{display:flex;align-items:center;margin-top:9px}
.pv-rcp-note{font-size:12px;color:var(--pvm);font-weight:500}
.pv-stamp,.pv-rcp-bar{display:none}

/* ── 사진 캐러셀 ── */
.pv-car{margin:0 0 22px}
.pv-car-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0}
.pv-car-track::-webkit-scrollbar{display:none}
/* scroll-snap-stop:always — 한 번 스와이프에 딱 한 장만 넘어가게 (2026-09-15 대표님: 세게 밀면 여러 장이 지나가던 문제) */
.pv-car-item{flex:0 0 88%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;border:0;border-radius:14px;
  overflow:hidden;background:#F5F3F6;box-shadow:none;position:relative}
.pv-car-item:only-child{flex:0 0 100%}
.pv-car-item img{display:block;width:100%;height:300px;object-fit:contain;background:#F5F3F6}
.pv-car-item:only-child img{height:auto;max-height:560px;background:#F5F3F6}

/* ── 여러 장일 때: 첫 사진 비율로 높이를 통일하고, 어떤 사진도 자르지 않는다.
      남는 자리는 그 사진을 흐리게 확대해 채운다(포토핀이 잘리면 안 되므로 crop 금지).
      비율 계산·배경 주입은 v37read.js [F] ── */
.pv-car-track.pv-fit .pv-car-item{aspect-ratio:var(--pvr,1.333)}
.pv-car-track.pv-fit .pv-car-item img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:none;z-index:2}
.pv-car-track.pv-fit .pv-car-item .pv-bgb{position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.2) brightness(.94);transform:scale(1.28)}
.pv-car-track.pv-fit .pv-car-item .pvp-wrap{position:absolute;inset:0;z-index:2;display:block}
.pv-car-track.pv-fit .pv-car-item .pvp-wrap>img{position:absolute;inset:0}
.pv-car-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}
.pv-car-dots button{width:5px;height:5px;border-radius:99px;border:0;padding:0;
  background:var(--pvl2);cursor:pointer;transition:all .25s}
.pv-car-dots button.on{width:14px;background:var(--pvp)}

/* ◀ ▶ — 2026-09-14: PC에서 옆 사진 넘기기 (피드와 같은 모양). 세로 위치는 JS가 --pv-mid 로 준다 */
.pv-car{position:relative}
.pv-car-btn{position:absolute;top:var(--pv-mid,50%);z-index:4;width:34px;height:34px;margin-top:-17px;
  border:0;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.93);color:#241F2A;box-shadow:0 2px 8px rgba(0,0,0,.28);
  cursor:pointer;opacity:.78;transition:opacity .15s,transform .15s}
.pv-car:hover .pv-car-btn{opacity:1}
.pv-car-btn:hover{transform:scale(1.06)}
.pv-car-btn:active{transform:scale(.94)}
.pv-car-btn[hidden]{display:none !important}
.pv-car-prev{left:10px}
.pv-car-next{right:10px}
@media (hover:none) and (pointer:coarse){.pv-car-btn{display:none !important}}
.pv-car-item .pvp-wrap{display:block}
.pv-car-item .pvp-wrap>img{width:100%}

/* ── 섹션 라벨 (구 손글씨 → 클린 라벨) ── */
.pv-slab{display:flex;align-items:center;margin:24px 0 10px}
.pv-slab-hand{font-family:inherit;font-size:13px;font-weight:700;color:var(--pvp);letter-spacing:.02em}
.pv-slab-line{display:none}

/* ── 본문 (2026-09-01 타이포 개선) ──
   대표님 지적: 본문이 옛날 게시판처럼 보인다.
   무무즈(14/1.43)·에어비앤비(14/1.29)·오늘의집을 실측해 보니 글꼴은 우리와 같은
   Pretendard 계열이었고, 차이는 "행간과 문단 사이 숨통"이었다.
   후기는 캡션보다 길게 읽는 글이라 본문용으로 한 단계 키운다.
   15.5→16.5px / 행간 1.78→1.8 / 자간 -.012em / 문단 사이 12→15px.
   글자색도 순검정(#191A1C)보다 살짝 부드러운 #2A2C30 으로 — 장문 피로를 줄인다.
   ※ word-break 는 normal 유지(keep-all 은 짧은 줄에서 어절이 붕 뜬다 — 실측 확인). */
.pv-body{font-size:16.5px;line-height:1.8;letter-spacing:-.012em;color:#2A2C30;
  word-break:normal;overflow-wrap:break-word}
.pv-body p{margin:0 0 15px}
.pv-body p:last-child{margin-bottom:0}
.pv-body br + br{display:none}          /* 빈 줄 남발로 글이 흩어지는 것 방지 */
.pv-body b,.pv-body strong{font-weight:700;color:#191A1C}
.pv-body img{max-width:100%;height:auto;border-radius:12px}

/* ── 한 줄 정리 (리스트형) ── */
.pv-points{display:flex;flex-direction:column;gap:2px;margin:2px 0 0}
.pv-point{display:flex;gap:11px;align-items:flex-start;padding:8px 0;background:none;border:0}
.pv-pt-ic{flex:0 0 21px;width:21px;height:21px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;font-weight:800;margin-top:2px;font-style:normal}
.pv-point.good .pv-pt-ic{background:var(--pvmint)}
.pv-point.bad .pv-pt-ic{background:var(--pvorg)}
.pv-point.cmp .pv-pt-ic{background:var(--pvm)}
.pv-pt-tx{flex:1;min-width:0}
.pv-pt-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--pvm);margin:0 0 3px}
.pv-pt-tx p{margin:0;font-size:14.5px;line-height:1.6;color:var(--pvk)}
/* '·' 나열 → 세로 리스트 (v37read.js [G], 2026-08-31) */
.pv-pt-tx p.pv-pt-list{display:flex;flex-direction:column;gap:5px}
.pv-pt-li{position:relative;padding-left:13px}
.pv-pt-li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:99px;background:var(--pvl2)}
.pv-point.good .pv-pt-li::before{background:var(--pvmint)}
.pv-point.bad .pv-pt-li::before{background:var(--pvorg)}

/* ── NO AD — 조용한 한 줄 ── */
.pv-noad{display:block;background:#FAFAFB;border:0;border-radius:12px;padding:13px 15px;margin:22px 0 0}
.pv-noad-stamp{display:none}
.pv-noad p{margin:0;font-size:13px;line-height:1.6;color:var(--pvs)}
.pv-noad p b{color:var(--pvk);font-weight:700}

/* ── 반응바 ── */
/* 음수 여백(-2px) 때문에 버튼 줄이 왼쪽으로 밀려, 왼쪽은 붙고 오른쪽은 떠 보였다.
   좌우를 부모에 그대로 맞춘다. (2026-08-29) */
.pv-react{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--pvl);margin:24px 0 0;
  padding:11px 0 calc(11px + env(safe-area-inset-bottom));
  width:100%;box-sizing:border-box}
.pv-like{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--pvl2);border-radius:99px;
  padding:11px 18px;font-size:14px;font-weight:700;color:var(--pvk);text-decoration:none;background:#fff}
.pv-like-ic{color:var(--pvp);font-size:15px;line-height:1}
.pv-like.on{background:var(--pvpb);border-color:var(--pvpln);color:var(--pvp)}
.pv-like b{font-weight:700;color:var(--pvp)}
.pv-rbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--pvl2);border-radius:99px;
  padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--pvs);text-decoration:none;background:#fff}
.pv-rbtn b{color:var(--pvk);font-weight:700}
.pv-rbtn:last-child{margin-left:auto}
/* 글자 크기가 달라 추천 버튼만 1px 높았다 — 높이를 맞춘다 */
.pv-like,.pv-rbtn{min-height:44px;box-sizing:border-box;line-height:1.15}

/* ── 신고 ── */
.pv-report{margin:14px 0 4px;text-align:center}
.pv-report a{font-size:12px;color:var(--pvm);text-decoration:none;font-weight:500}
.pv-report a:hover{color:var(--pvs);text-decoration:underline;text-underline-offset:3px}

/* ── 라이트박스 (v37read.js: .pv-lb + .show) ── */
.pv-lb{position:fixed;inset:0;z-index:9000;background:rgba(12,12,16,.92);
  display:none;align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.pv-lb.show{display:flex}
.pv-lb img{max-width:100%;max-height:92vh;border-radius:10px}
.pv-lb-x{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;cursor:pointer}

/* ── 인스타 제스처 (v37read.js [E]) ── */
.pv-car-track,.pv-car-item,.pv-car-item img{touch-action:pan-x pan-y}
/* manipulation 은 더블탭 줌만 막고 핀치 줌은 브라우저에 넘긴다.
   그래서 안드로이드에서 페이지 자체가 확대되고 손을 떼도 돌아오지 않았다.
   pan-x pan-y 로 두면 스크롤은 되고 핀치만 우리 코드가 받는다. (2026-08-29) */
.pv-car-item{position:relative}
.pv-car-item img{cursor:default}
/* 줌 레이어·하트는 v3.css 로 옮김 (2026-09-02, pvfix [35]) */
.pv-like-pop{animation:pvlikepop .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes pvlikepop{40%{transform:scale(1.14)}}

/* ── PC ── */
@media (min-width:821px){
  .pv-wrap{padding-top:10px}
  .pv-car-item{flex:0 0 64%}
  .pv-car-item img{height:380px}
  .pv-car-item:only-child img{max-height:600px}
  .pv-car-track.pv-fit .pv-car-item img{height:100%}
}

/* ── 영수증 여러 장 (구매 횟수 = 신뢰도) · 2026-08-27 ── */
.pv-rcp-rep{background:var(--pvp);color:#fff !important;border-radius:99px;padding:4px 11px;font-size:11.5px;font-weight:800}
.pv-rcp-list{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px}
.pv-rcp-list::-webkit-scrollbar{display:none}
.pv-rcp-list .pv-rcp-img{position:relative;flex:0 0 auto;width:96px;height:112px;border-radius:10px;
  overflow:hidden;background:#FAFAFB;border:1px solid var(--pvl2);cursor:zoom-in}
.pv-rcp-list .pv-rcp-img img{width:100%;height:100%;object-fit:cover;max-height:none}
.pv-rcp-no{position:absolute;left:5px;top:5px;background:rgba(20,20,24,.62);color:#fff;font-size:10px;
  font-weight:800;border-radius:99px;padding:2px 7px;backdrop-filter:blur(3px)}


/* ══ 하단 '목록으로' · '추천' 버튼 정렬 (2026-08-29) ══
   두 버튼이 서로 다른 영역에 들어 있어 높이가 4px, 세로 위치가 8px 어긋나 있었다.
   같은 줄에서 가운데로 맞추고 높이를 통일한다.
   (이 파일은 글 상세에서만 불러오므로 글쓰기 화면에는 영향이 없다) */
.content_footer .ds-f.jc-c{align-items:center}
.bh_act_btn_warp,
.bh_act_btn_warp ul,
.act_vote,
.tool_wrap,
.bd_btn_wrap,
.bd_btn_wrap .etc{display:flex;align-items:center;margin-top:0;margin-bottom:0}
.bh_bd_btn,
.act_vote a.bh,
.act_vote > a{min-height:46px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;margin:0}

/* 두 버튼이 화면을 반반씩 나눠 쓰도록 — 정렬만 맞추니 폭이 제각각이 됐다 */
.content_footer .ds-f.jc-c{gap:8px;padding:0 12px;box-sizing:border-box}
.bh_act_btn_warp,.act_vote,.tool_wrap,.bd_btn_wrap .etc{flex:1 1 0;min-width:0}
.bh_act_btn_warp ul,.bd_btn_wrap{width:100%}
.bh_bd_btn,.act_vote a.bh,.act_vote > a{width:100%}

/* ══ 댓글 입력칸 (2026-08-29) ══
   높이가 26px 인데 위아래 여백만 26px 이라 글자가 들어갈 자리가 0 이었다.
   "내용을 입력하세요" 가 위아래로 잘려 보이던 원인.
   두 줄이 편하게 들어가도록 높이를 연다. */
.bh_comment textarea.comment_input{
  height:auto !important;min-height:56px !important;
  overflow-y:auto !important;box-sizing:border-box;line-height:1.6}
.bh_comment .comment_input_wrap,
.bh_comment .comment_write_wrap{height:auto !important;min-height:0 !important}
/* 입력칸이 커지면서 전송 버튼이 25px 어긋났다 — 세로 가운데로 맞춘다 */
.bh_comment .comment_write_wrap{align-items:center !important}
.bh_comment .comment_input_wrap{display:flex;align-items:center;gap:8px}
.bh_comment .comment_input_wrap textarea.comment_input{flex:1 1 auto}

/* ══ 모바일 글 좌우 숨통 — 인스타그램 방식 (2026-08-31) ══
   대표님 실폰 캡처 지적: 제목·본문·칩이 화면 양끝에 딱 붙어 있었다(전부 좌 0 실측).
   인스타그램을 375px 로 직접 재 보니 **사진은 0~375 꽉, 글은 16px 에서 시작**.
   같은 방식으로: 글 블록에 좌우 16px, 사진류만 음수 여백으로 도로 꽉 채운다.
   ·핀 사진은 핀 좌표가 래퍼 기준 %라서 img 가 아니라 래퍼째 넓힌다(핀 이탈 방지, 실측 확인)
   ·캐러셀(.pv-car)도 꽉 — 다음 장 살짝 보이는 디자인 유지
   ·인증카드·좋았던점·버튼은 글과 같은 16px 안쪽 (인스타의 캡션과 동일)
   2170(핀·일반사진)·2016(캐러셀) 두 유형 모두 가로스크롤 없음·핀 제자리 확인함. */
@media(max-width:520px){
  .content_header_wrap{padding-left:16px;padding-right:16px}
  .pv-wrap{padding-left:16px;padding-right:16px}
  .pv-car{width:calc(100% + 32px);max-width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  .pv-body .pvp-wrap{display:block;width:calc(100% + 32px);max-width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  .pv-body .pvp-wrap img{width:100%;max-width:100%}
  .pv-body p > img{width:calc(100% + 32px);max-width:calc(100% + 32px);margin-left:-16px}
}