/* ============================================================
   전체 상품 목록·가격표 (snspang all-products)
   ------------------------------------------------------------
   snspang 의 <style> 블록을 «순서 그대로» 이어 붙인 것이다.
   ⚠ 규칙 단위로 쪼개서 옮기면 안 된다. @media 안에 있던 규칙이
     밖으로 튀어나와 모바일 규칙이 데스크톱에도 걸린다 — 실제로 그렇게 깨졌다.
   ⚠ 화면마다 «한 파일»만 싣는다(x-layout 의 css 속성). 그래서 이 파일도
     머리줄·꼬리말 같은 공통 규칙을 스스로 갖고 있다. 합치지 말 것 —
     .trust 처럼 같은 이름이 화면마다 다른 뜻인 것이 있다.
   ============================================================ */


/* 웹폰트는 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */


  /* 기본값·리셋(:root·*·body·a·img·.wrap·머리띠)은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 머리줄(로고줄·메뉴줄·검색) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 메가 드롭다운(패널·카드·프로모) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* ===== 고객센터 ===== */
  .cshero{background:linear-gradient(120deg,#fff,#eef4ff);border-bottom:1px solid var(--line);padding:30px 0;cursor:default;}
  .cshero h1{font-size:26px;font-weight:900;letter-spacing:-.04em;color:#191c20;}
  .cshero p{font-size:14px;color:#667085;margin-top:5px;font-weight:600;}
  /* 이동 경로(.crumb) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  .cslayout{display:grid;grid-template-columns:232px 1fr;gap:36px;padding:28px 0 64px;}
  .csnav{border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start;}
  .csnav .hd{background:var(--accent-d);color:#fff;font-weight:800;font-size:16px;padding:16px 20px;}
  .csnav a{display:block;padding:13px 20px;font-size:14px;font-weight:600;color:#555;border-top:1px solid var(--line);transition:.12s;}
  .csnav a.on{color:var(--accent-d);font-weight:800;background:var(--soft);box-shadow:inset 3px 0 0 var(--accent-d);}
  .csnav a:hover{background:#f5f8ff;color:var(--accent-d);}
  .cscontact{margin-top:20px;padding:0 4px;font-size:13px;color:#8a9099;line-height:1.85;}
  .cscontact b{display:block;color:#333;font-weight:800;font-size:14px;margin-bottom:6px;}
  .cscontact .tel{font-size:20px;font-weight:900;color:#191c20;letter-spacing:-.02em;margin:2px 0 10px;}
  .csmain h2{font-size:20px;font-weight:800;letter-spacing:-.03em;color:#191c20;margin-bottom:4px;}
  .csmain .sub{font-size:13.5px;color:#8a9099;font-weight:600;margin-bottom:18px;}
  .board .brow{display:flex;align-items:center;gap:18px;padding:17px 6px;border-top:1px solid var(--line);cursor:pointer;}
  .board .brow:first-child{border-top:2px solid #333;}
  .board .no{width:30px;text-align:center;color:#c2c2c2;font-weight:700;font-size:13px;flex:none;}
  .board .ti{flex:1;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .board .ti .tag{color:var(--accent-d);font-weight:800;margin-right:7px;}
  .board .brow:hover .ti{color:var(--accent-d);}
  .board .dt{color:#aaa;font-size:13px;font-weight:600;flex:none;}
  /* FAQ 아코디언 */
  .faqsearch{margin-bottom:16px;} .faqsearch input{width:100%;border:1px solid #e5e7eb;border-radius:11px;padding:12px 15px;font-size:14px;outline:0;transition:.14s;} .faqsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
  .faqitem{border-bottom:1px solid var(--line);}
  .faqq{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;cursor:pointer;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .faqq:hover{color:var(--accent-d);} .faqq .qi{color:#c2c2c2;flex:none;transition:transform .2s,color .2s;}
  .faqitem.open .faqq{color:var(--accent-d);} .faqitem.open .faqq .qi{transform:rotate(90deg);color:var(--accent-d);}
  .faqa{display:none;padding:2px 4px 20px;font-size:14px;color:#53658a;line-height:1.8;white-space:pre-line;} .faqitem.open .faqa{display:block;}
  .faqnone{padding:30px 4px;color:#aaa;font-size:14px;}
  /* 링크입력가이드 */
  .guideplat{margin-bottom:28px;}
  .guideplat h3{font-size:15px;font-weight:800;color:#191c20;margin-bottom:13px;padding-bottom:9px;border-bottom:2px solid #eaeef5;}
  .guidegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .gcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);}
  .gcard.important{border-color:#fecdd3;}
  .gcard .gimg{background:#f7f8fa;border-bottom:1px solid var(--line);} .gcard .gimg img{width:100%;display:block;}
  .gcard .gbd{padding:12px 14px;} .gcard .gbd b{font-size:14px;font-weight:700;color:#222;display:block;line-height:1.4;}
  .gcard .gbd .note{font-size:12.5px;color:#e11d48;margin-top:7px;line-height:1.6;}
  .inqbox{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--soft);font-size:14px;color:#556;line-height:2;}
  @media(max-width:640px){.guidegrid{grid-template-columns:1fr;}}

  .pager{display:flex;justify-content:center;gap:6px;padding:26px 0 0;}
  .pager a{min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#555;cursor:pointer;}
  .pager a.on{background:#111;color:#fff;border-color:#111;} .pager a:hover{border-color:#999;}

  /* ===== 서비스 가격표 ===== */
  .prfilter{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 26px;}
  .prfilter a{border:1.5px solid var(--line);border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:700;color:#555;transition:.13s;}
  .prfilter a:hover{border-color:var(--accent);color:var(--accent-d);}
  .prfilter a.on{background:#111;border-color:#111;color:#fff;}
  .prnote{font-size:13px;color:#8a9099;font-weight:600;margin-bottom:24px;line-height:1.7;}
  .prnote b{color:var(--accent-d);}
  .prgroup{margin-bottom:34px;}
  .prg-hd{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
  /* ⚠ 선택자가 .ic 였다 — plat-icon 이 내는 것은 .ico 다. 아무 데도 안 걸리고 있었다(2026-09-13 고침) */
  .prg-hd .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;} .prg-hd .ico svg{width:19px;height:19px;}
  .prg-hd h2{font-size:18px;font-weight:900;letter-spacing:-.03em;}
  .prg-hd .cnt{font-size:12.5px;color:#aaa;font-weight:700;}
  table.prtable{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.04);}
  table.prtable th,table.prtable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);}
  table.prtable thead th{background:#f5f8ff;font-size:12.5px;font-weight:800;color:#66707c;letter-spacing:-.01em;}
  table.prtable th.r,table.prtable td.r{text-align:right;white-space:nowrap;}
  table.prtable th.c,table.prtable td.c{text-align:center;white-space:nowrap;}
  table.prtable tbody tr{cursor:pointer;transition:background .12s;}
  table.prtable tbody tr:hover{background:#f8faf7;}
  table.prtable tbody tr:last-child td{border-bottom:0;}
  .prtable .pnm{font-weight:700;color:#1b241a;letter-spacing:-.01em;}
  .pcell .bg{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;margin-left:8px;vertical-align:2px;letter-spacing:.04em;line-height:1.55;border:1px solid transparent;}
  .pcell .bg.best{background:#f2f5fb;color:#3a5a9a;border-color:#e2e8f3;}
  .pcell .bg.hot{background:#fdf1ec;color:#c9532f;border-color:#f5ddd2;}
  .prtable .price{font-size:16px;font-weight:900;color:#111;} .prtable .price .u{font-size:12px;font-weight:700;color:#999;margin-left:1px;}
  .prtable .st{color:#f5a623;font-weight:800;font-size:13px;}
  .prtable .go{color:var(--accent-d);font-weight:800;font-size:13px;white-space:nowrap;}
  @media(max-width:640px){table.prtable .hidem{display:none;}}

  /* 푸터 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

  @media(max-width:900px){.gnb{display:none;}.cslayout{grid-template-columns:1fr;}.board .dt{display:none;}}


/* ===== 서비스 가격표 프리미엄 (대기업 톤 / 이미지 썸네일) ===== */
.cshero{background:linear-gradient(120deg,#fafcff,#e8f0ff);padding:46px 0;}
.cshero h1{font-size:30px;letter-spacing:-.045em;color:#12180f;}
.cshero p{font-size:14.5px;margin-top:8px;color:#5f6b57;}
.prfilter{gap:9px;margin:26px 0 20px;}
.prfilter a{border:1px solid #e4e7e0;border-radius:999px;padding:10px 20px;font-size:14px;}
.prfilter a.on{background:#12180f;border-color:#12180f;}
.prnote{background:#f5f8ff;border:1px solid #e6ebf5;border-radius:12px;padding:14px 18px;font-size:13px;color:#6b7266;line-height:1.75;margin-bottom:28px;}
.prgroup{margin-bottom:40px;}
.prg-hd{gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid #12180f;}
.prg-hd .ico{width:38px;height:38px;border-radius:11px;}
.prg-hd h2{font-size:19px;letter-spacing:-.035em;color:#12180f;}
.prg-hd .cnt{margin-left:auto;font-size:12.5px;color:#98a09a;background:#f2f4ef;padding:4px 11px;border-radius:999px;}
.prtable{border:1px solid #e6ebf5;border-radius:16px;box-shadow:0 3px 16px rgba(16,24,40,.05);font-size:14.5px;}
.prtable thead th{background:#fafbf8;font-size:12.5px;color:#8a9089;padding:14px 18px;}
.prtable th,table.prtable td{padding:15px 18px;border-bottom-color:#f1f3ee;}
.prtable tbody tr:hover{background:#f5f8ff;}
.pcell{display:flex;align-items:center;gap:14px;}
.pcell .ptxt{display:block;min-width:0;}
.prtable .pmeta{display:none;}

/* ── 표 열두 개가 «같은 줄»에 서게 한다 (2026-09-16) ──────────────
   🔴 무엇이 문제였나 — 플랫폼마다 표가 하나씩, 이 화면에 표가 열두 개다.
     표는 기본(table-layout:auto)으로 «자기 안의 글자»를 보고 칸 폭을 정한다.
     그래서 「500명~」이 든 텔레그램 표와 「100회~」가 든 유튜브 표의 칸 자리가
     서로 달랐다 — 같은 「개당 단가」 제목이 표마다 52px 씩 어긋나 있었다.
     한 표만 보면 멀쩡한데 화면을 내리면 줄이 삐뚤빼뚤해 보이던 까닭이다.
   ★ 그래서 칸 폭을 «표 바깥»에서 정해 준다. 네 칸을 고정하고 남는 것을 전부
     상품 칸이 먹는다 — 표가 몇 개든, 안에 무슨 글자가 들었든 자리가 같아진다.
   ⚠ 좁은 화면(≤640px)은 건드리지 않는다. 거기서는 표를 아예 풀어 목록으로
     다시 세운다(아래 블록) — table-layout 이 걸리면 그 격자와 싸운다.
   ⚠ 640~900px 에서는 같은 폭을 쓸 수 없다. 「개당 단가」 다섯 글자가 제목
     칸을 넘겨 옆 칸 글자와 겹친다(th 에 nowrap 이 걸려 있어 줄바꿈으로 도망가지
     못한다). 그 구간만 좌우 여백과 칸 폭을 함께 줄인다. */
@media(min-width:641px){
  table.prtable{table-layout:fixed;}
  table.prtable th:nth-child(2),table.prtable td:nth-child(2){width:152px;}
  table.prtable th:nth-child(3),table.prtable td:nth-child(3){width:128px;}
  table.prtable th:nth-child(4),table.prtable td:nth-child(4){width:92px;}
  table.prtable th:nth-child(5),table.prtable td:nth-child(5){width:112px;}
  /* ⚠ 상품 이름이 길면 칸을 넘기지 말고 «…» 로 줄인다. 고정 폭에서는 넘친 글자가
       옆 칸 위로 올라탄다 — 줄을 맞추려다 더 지저분해진다.
     ⚠ 이름과 딱지(BEST·HOT)를 «한 줄»에 묶는다. 인라인으로 두면 자리가 모자랄 때
       딱지가 다음 줄로 떨어져 그 줄만 키가 21px 커진다 — 표에서 줄 키가 들쭉날쭉한
       것이 제일 눈에 띈다. 줄이는 쪽은 언제나 이름이고, 딱지는 안 줄인다. */
  .pcell .ptxt{display:flex;align-items:center;min-width:0;overflow:hidden;}
  .pcell .pnm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pcell .bg{flex:none;}
}
@media(min-width:641px) and (max-width:900px){
  .prtable thead th,.prtable th,table.prtable td{padding-left:12px;padding-right:12px;}
  /* ⚠ 여기서 1px 을 아끼면 그만큼 상품 이름이 덜 잘린다. 아래 값은 «제목 글자 +
       좌우 여백 24px» 이 겨우 들어가는 선이다 — 더 줄이면 제목이 옆 칸을 침범한다. */
  table.prtable th:nth-child(2),table.prtable td:nth-child(2){width:108px;}
  table.prtable th:nth-child(3),table.prtable td:nth-child(3){width:94px;}
  table.prtable th:nth-child(4),table.prtable td:nth-child(4){width:64px;}
  table.prtable th:nth-child(5),table.prtable td:nth-child(5){width:80px;}
}

/* ── 가격표: 좁은 화면에서는 «표»가 아니라 «목록»이다 (2026-09-11) ─────────
   🔴 왜 바꿨나 — 손님 화면을 390px 로 찍어 보니 표가 깨진 것처럼 보였다.
     칸 다섯 중 둘(최소 수량·A/S)을 숨겨 세 칸만 남는데, 상품 칸이 208px 이라
     이름이 두 줄·세 줄로 접히면서 «행 높이가 68 / 89 / 89 / 68» 로 들쭉날쭉했다.
     표는 칸이 줄 맞아야 표로 읽힌다 — 줄이 안 맞으면 「뭔가 이상한데 뭔지 모르겠는」 화면이 된다.
   ★ 그래서 좁은 화면에서는 표 구조를 풀고 한 줄을 «격자 두 칸»으로 다시 세운다.

        [썸40]  팔로워  BEST          13원/명
                최소 100명 · A/S 없음   주문 ›

     왼쪽은 무엇인지, 오른쪽은 얼마인지·어디로 가는지. 칸 제목(thead)은 숨긴다 —
     「13원/명」·「주문 ›」은 제목 없이도 무엇인지 안다.
   ★ 행 높이는 썸네일 40px 이 정한다. 이름이 길든 짧든 «모든 줄이 같은 높이»가 된다.
   ⚠ 넓은 화면은 한 픽셀도 안 건드린다 — 표는 표로 둔다. */
@media(max-width:640px){
  .prtable .pmeta{display:block;font-size:11.5px;font-weight:600;color:#7b8698;letter-spacing:-.01em;}

  /* 표 구조를 푼다. radius 가 살아 있으려면 넘치는 것을 잘라 줘야 한다. */
  table.prtable{display:block;overflow:hidden;}
  table.prtable thead{display:none;}
  table.prtable tbody{display:block;}

  table.prtable tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:10px;
    padding:11px 13px;border-bottom:1px solid #f1f3ee;}
  table.prtable tbody tr:last-child{border-bottom:0;}
  table.prtable tbody td{display:block;padding:0;border:0;}

  /* 1칸: 그림+이름+한 줄 설명 (두 줄을 세로로 관통한다) */
  table.prtable tbody td:nth-child(1){grid-column:1;grid-row:1/3;}
  /* 2칸: 단가 · 5칸: 주문 — 오른쪽에 위아래로 */
  table.prtable tbody td:nth-child(2){grid-column:2;grid-row:1;text-align:right;}
  table.prtable tbody td:nth-child(5){grid-column:2;grid-row:2;text-align:right;}

  /* 이름은 «한 줄»로 고정하고 넘치면 … — 이것이 줄 높이를 맞춘다 */
  .pcell .ptxt{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0;}
  .prtable .pnm{display:block;min-width:0;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;}
  .pcell .bg{margin-left:0;}
  .prtable .pmeta{flex:0 0 100%;margin-top:1px;}
  .prtable .price{font-size:16px;line-height:1.2;}
  /* 단가 바로 밑에 붙으면 단가의 일부로 읽힌다 */
  .prtable .go{font-size:12.5px;display:inline-block;margin-top:5px;}
}
.prthumb{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none;background:#f2f4ef;border:1px solid #edeee9;}
.prthumb.ph{display:grid;place-items:center;} .prthumb.ph svg{width:22px;height:22px;}
.prtable .pnm{font-size:14.5px;font-weight:700;color:#12180f;}
.prtable a.pnm{text-decoration:none;color:inherit;}  /* span→a 전환(크롤 가능) */
.prtable .price{font-size:17px;color:#12180f;}
.prtable .go{color:var(--accent-d);}
.prtable tbody tr:hover .go{text-decoration:underline;}
@media(max-width:640px){.prthumb{width:40px;height:40px;}.prtable th,table.prtable td{padding:13px 12px;}}




.seotext{max-width:980px;margin:34px auto 10px;padding:22px 24px;border:1px solid #e8eee6;border-radius:14px;background:#fbfdfa;line-height:1.75;color:#3d4a3a}
.seotext h2{font-size:18px;font-weight:800;color:#1e283e;margin:0 0 12px;border:0;padding:0}
.seotext h3{font-size:15px;font-weight:800;color:#22355e;margin:20px 0 8px;border:0;padding:0}
.seotext p{font-size:14px;margin:0 0 10px}
.seotext dl{margin:0}
.seotext dt{font-size:14px;font-weight:800;color:#1e283e;margin:12px 0 3px}
.seotext dd{font-size:13.5px;margin:0;color:#51624d}
.seotext ul{margin:0;padding-left:18px}
.seotext li{font-size:13.5px;margin:0 0 6px}
.seotext a{color:#244283;font-weight:700;text-decoration:underline}
@media(max-width:640px){.seotext{margin:24px 12px 10px;padding:18px 16px}}


.apgrp{margin:0 0 26px}
.apgrp h2{font-size:17px;font-weight:800;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid #eef1f5}
.aplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.aplist a{display:block;padding:10px 12px;border:1px solid #e5e7eb;border-radius:9px;color:#222;text-decoration:none;font-size:14px;line-height:1.45;background:#fff}
.aplist a:hover{border-color:#2563eb;color:#2563eb}
.apbadge{float:right;font-size:11px;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:6px}
.ap-on{background:#e8f6ec;color:#1c7a37}.ap-soon{background:#f3f4f6;color:#8a94a6}
@media(max-width:640px){.aplist{grid-template-columns:1fr 1fr}.aplist a{font-size:13px;padding:9px 10px}}





/* ── 갈래 화면 본문 (?goal=) ─────────────────────────────
   ★ 카드만 있는 화면은 본문이 400자 남짓이라 얇은 화면으로 묶인다.
     설명·문답·읽을거리를 얹어 「SNS 마케팅 가격」 같은 검색어를 받게 한다.
   ⚠ 문답을 <details> 로 접지 않는다 — 접힌 영역은 스니펫·AI 인용 자격을 얻기 어렵다. */
.goalcopy{margin:40px 0 8px;max-width:820px;}
.goalcopy .gclead{font-size:16px;font-weight:800;color:#2b3646;line-height:1.75;
  margin:0 0 14px;word-break:keep-all;letter-spacing:-.02em;}
.goalcopy p{font-size:14.5px;color:#5b6675;line-height:1.85;margin:0 0 12px;word-break:keep-all;}
.goalcopy>h2{font-size:17px;font-weight:800;color:#2b3646;margin:30px 0 12px;letter-spacing:-.02em;}
.gcqa{display:grid;gap:8px;}
.gcq{background:#fff;border:1px solid #e8ecef;border-radius:12px;padding:14px 16px;}
.gcq b{display:block;font-size:14.5px;font-weight:800;color:#2b3646;line-height:1.5;
  margin-bottom:6px;word-break:keep-all;}
.gcq p{margin:0;font-size:13.5px;line-height:1.75;color:#5b6675;}
@media(max-width:640px){.goalcopy{margin-top:28px;}.goalcopy .gclead{font-size:15px;}}
.pvarts{margin:44px 0 8px;}
.pvarts>h2{font-size:17px;font-weight:800;color:#2b3646;margin:0 0 12px;letter-spacing:-.02em;}
.pvarts-l{display:grid;gap:8px;}
.pvarts-l a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid #e8ecef;border-radius:12px;padding:13px 16px;}
.pvarts-l a b{font-size:14.5px;font-weight:700;color:#2b3646;line-height:1.5;word-break:keep-all;}
.pvarts-l a span{flex:none;font-size:12.5px;font-weight:700;color:#9aa4b2;}
.pvarts-l a:hover{border-color:var(--accent,#2563eb);}
.pvarts-l a:hover b{color:var(--accent,#2563eb);}

/* ── 이용후기 (2026-09-09) ────────────────────────────────────
   ⚠ 후기가 0건이면 요약(rvsum)이 아예 안 그려진다 — blade 가 그때만 넣는다. */
.rvsum{display:flex;gap:28px;align-items:center;flex-wrap:wrap;border:1px solid var(--line,#e6e9ef);border-radius:16px;padding:20px 24px;background:#fbfcfe;margin-top:18px}
.rvavg{display:flex;flex-direction:column;gap:2px;min-width:120px}
.rvavg b{font-size:38px;font-weight:900;letter-spacing:-.04em;line-height:1}
.rvavg em{font-style:normal;font-size:12.5px;color:#8a94a6;font-weight:700}
.rvstars{color:#f59e0b;letter-spacing:2px;font-size:15px}
.rvbars{flex:1;min-width:220px;display:grid;gap:5px}
.rvbar{display:grid;grid-template-columns:34px 1fr 40px;align-items:center;gap:9px;font-size:12px;color:#8a94a6}
.rvbar .b{height:7px;border-radius:999px;background:#eef1f6;overflow:hidden}
.rvbar .b i{display:block;height:100%;background:#f59e0b}
.rvbar .v{text-align:right;font-variant-numeric:tabular-nums}
.rvlist{display:grid;gap:12px;margin-top:18px}
.rv{border:1px solid var(--line,#e6e9ef);border-radius:14px;padding:16px 18px;background:#fff}
.rv-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rv-who{font-size:13.5px;font-weight:800}
.rv-when{font-size:12px;color:#9aa2b1;margin-left:auto}
.rv-what{margin-top:5px;font-size:12.5px;color:#8a94a6}
.rv-what a{color:#2563eb;font-weight:700}
.rv-b{margin:9px 0 0;font-size:14px;line-height:1.7;white-space:pre-line;word-break:break-word}
.rv-re{margin-top:12px;border-left:3px solid #dbe3f5;background:#f7f9fd;border-radius:0 10px 10px 0;padding:11px 14px}
.rv-re b{font-size:12.5px;font-weight:800;color:#2563eb}
.rv-re p{margin:4px 0 0;font-size:13.5px;line-height:1.65;white-space:pre-line}
.rvempty{margin-top:22px;padding:46px 24px;text-align:center;border:1px dashed #dfe4ee;border-radius:16px}
.rvempty b{display:block;font-size:16px;font-weight:900;margin-bottom:8px}
.rvempty p{margin:0 0 16px;font-size:13.5px;color:#8a94a6;line-height:1.7}

/* 상품 카드의 후기 지표 (2026-09-09)
   ⚠ 후기가 0건이면 blade 가 이 줄을 아예 안 그린다. */
.prod .rvchip{display:flex;align-items:baseline;gap:5px;margin-top:6px;font-size:11.5px;line-height:1}
.prod .rvchip b{color:#f59e0b;font-weight:800;font-size:12px}
.prod .rvchip span{color:#9aa2b1;font-weight:700}

/* ── 모바일 머리줄(검색·링크) 규칙은 «site.css» 한 곳에 있다 (2026-09-16) ──
   전에는 이 블록이 화면 CSS 일곱 벌에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만
   바뀌고 나머지 여섯은 옛 모양으로 남는다 — 실제로 그렇게 어긋났다. site.css 는 모든
   화면에 «화면 CSS 뒤에» 실리므로 거기 한 벌이면 족하다. */


/* ── 모바일 머리줄이 «붙어 있다» (2026-09-12) — home.css 와 같은 규칙 ──
   🔴 로그인하면 한 줄에 다섯이 들어가 서로 닿아 보였다(로고·잔액·마이페이지·로그아웃·⚙관리자).
   ⚠ 잔액 칸과 ⚙관리자는 숨기지 않는다. 「마이페이지」 글자만 뺀다 — 잔액 칸이 같은 곳으로 간다. */
/* ── 아코디언이 «툭» 튄다 (2026-09-12) ──────────────────────────
   🔴 <details> 는 브라우저가 즉시 열고 닫는다. 답이 길면 화면이 한 번 덜컹하고,
     닫을 때도 갑자기 사라져 어디가 접혔는지 눈이 못 따라간다.
   ★ 여는 «모양»만 부드럽게 한다 — 여닫는 «동작»은 브라우저에 그대로 둔다.
     JS 로 높이를 재서 여는 방식은 JS 가 막히면 답이 아예 안 열린다(snspang 이 그랬다).
   ⚠ display:none → block 은 전환이 안 먹는다. grid-template-rows 0fr→1fr 로 연다 —
     높이를 «몰라도» 전환되는 유일한 방법이다.
   ⚠ 움직임 줄이기를 켠 사람에게는 전환을 끈다(prefers-reduced-motion). */
details.faqitem > .faqa,
details.hfq > .a{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  padding-top:0;padding-bottom:0;opacity:0;
  transition:grid-template-rows .22s ease, opacity .18s ease,
             padding-top .22s ease, padding-bottom .22s ease;
}
details.faqitem > .faqa > *,
details.hfq > .a > *{min-height:0}
details.faqitem[open] > .faqa{grid-template-rows:1fr;opacity:1;padding-bottom:18px}
details.hfq[open] > .a{grid-template-rows:1fr;opacity:1;padding-bottom:17px}
/* 화살표도 같은 속도로 돈다 — 따로 놀면 더 어색하다 */
.faqq .qi,.hfq .i{transition:transform .22s ease,color .18s ease}
@media(prefers-reduced-motion:reduce){
  details.faqitem > .faqa,details.hfq > .a,.faqq .qi,.hfq .i{transition:none}
}


/* ⚠ 안쪽 감싼 것(.faqa-i)이 «반드시» 있어야 한다.
     grid-template-rows:0fr 는 «자식 요소»를 눌러 접는 방식이라,
     글자가 div 에 그대로 들어 있으면 접히지 않는다. */
.faqa-i{min-height:0;overflow:hidden}