/*
 * 「북리뷰 MAIN」 (v1.40, 2026-10-30) — https://flos.gabia.io/reviews/
 * 이름표는 rv- 로만 쓴다(flos-board.css의 .board·.empty 등과 겹치지 않게).
 * 줄마다 다섯 빛깔이 차례로 돈다 — 첫 화면 NEW·BEST, 서평단 게시판과 같은 분홍·하늘·민트·보라·노랑
 */
.rv-main .shell{max-width:1120px}

/* ── 머리 ───────────────────────── */
.rv-head{
  position:relative;max-width:820px;margin:6px auto 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:26px 20px 22px;
  border-top:1px solid #d9cbaa;border-bottom:1px solid #d9cbaa;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,252,244,.75) 18%,rgba(255,252,244,.75) 82%,rgba(255,255,255,0) 100%);
}
.rv-head-text{text-align:center;min-width:0}
.rv-head-title{
  margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(28px,5.4vw,40px);line-height:1.2;letter-spacing:-.02em;color:#282118;
}
.rv-head-copy{
  margin:8px 0 16px;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(15px,2.6vw,18px);color:#8a5a6e;letter-spacing:-.01em;
}
.rv-head-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.rv-head-mascot{width:96px;height:auto;flex:none;align-self:flex-end;margin-bottom:-22px}
.rv-btn{
  display:inline-block;font-size:14px;font-weight:700;padding:9px 20px;border-radius:999px;
  border:1.5px solid #cdbb96;background:#fffdf8;color:var(--ink);white-space:nowrap;
  box-shadow:0 2px 0 rgba(135,101,49,.14);
}
.rv-btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 3px 0 #171511}
.rv-btn span{font-weight:400;opacity:.75}

/* ── 줄 세우기 ───────────────────── */
.rv-sort{display:flex;justify-content:center;gap:6px;margin:0 auto 18px}
.rv-sort a{
  padding:6px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  border:1.5px solid #d8c9a8;background:#fffdf8;color:var(--ink-soft);
}
.rv-sort a.on{background:#3a3128;border-color:#3a3128;color:#fff8ea}

/* ── 리뷰 줄 ─────────────────────── */
.rv-list,.rv-pages,.rv-note{max-width:820px;margin-left:auto;margin-right:auto}
.rv-row{
  --c:#ef4c68;--cl:#fff2f5;--cd:#cf3d58;--cs:rgba(236,67,96,.16);
  position:relative;
  padding:16px 18px 13px 22px;margin-bottom:16px;
  border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff);
  border-radius:16px;
  background:linear-gradient(150deg,var(--cl) 0%,#fff 45%,#fffdfa 100%);
  box-shadow:0 4px 0 color-mix(in srgb,var(--cd) 70%,#fff),0 12px 24px var(--cs);
}
.rv-row::before{
  content:"";position:absolute;left:8px;top:14px;bottom:14px;width:5px;border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,var(--c) 18%,var(--c) 82%,#fff 100%);
}
.rv-list > .rv-row:nth-child(5n+2){--c:#3b86ec;--cl:#eef6ff;--cd:#2e70c8;--cs:rgba(63,137,232,.16)}
.rv-list > .rv-row:nth-child(5n+3){--c:#28a77a;--cl:#ecfbf3;--cd:#218661;--cs:rgba(37,166,120,.15)}
.rv-list > .rv-row:nth-child(5n+4){--c:#8759d2;--cl:#f5f0ff;--cd:#7045ba;--cs:rgba(134,86,211,.15)}
.rv-list > .rv-row:nth-child(5n+5){--c:#dc8d18;--cl:#fff7e2;--cd:#bc7410;--cs:rgba(225,146,24,.16)}

/* 첫 줄: 닉네임 · 리뷰 제목(크게) · 『책』 저자 · 출판사(작게) */
.rv-line{margin:0;line-height:1.4;word-break:keep-all;font-weight:400}
.rv-nick{
  display:inline-block;margin-right:7px;padding:2px 9px 3px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--cd);
  font-family:var(--font-sans);font-size:12.5px;font-weight:700;vertical-align:3px;white-space:nowrap;
}
.rv-title{
  font-family:var(--font-serif);font-size:20.5px;font-weight:700;letter-spacing:-.03em;color:#24222a;
}
.rv-title:hover{color:var(--cd);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.rv-book{
  margin-left:8px;font-family:var(--font-sans);font-size:13px;font-weight:600;color:#7b7266;white-space:normal;
}
.rv-book span{font-weight:400;color:#9a9083}
.rv-book:hover{color:var(--cd)}

/* 모두에게 들려주고 싶은 한 마디 — 스크롤 밖, 제목보다 옅은 다른 빛깔 */
.rv-quote{
  margin:8px 0 0;font-family:var(--font-serif);font-size:15px;line-height:1.5;
  color:color-mix(in srgb,var(--cd) 62%,#a99aa6);opacity:.88;word-break:keep-all;
}

/* 본문 3줄 스크롤 (flos-board.js) */
.rv-row .row-preview{
  margin-top:10px;background:rgba(255,255,255,.75);
  border:1.5px solid rgba(60,48,39,.13);border-left:3px solid color-mix(in srgb,var(--c) 70%,#fff);
  border-radius:12px;padding:10px 9px 10px 12px;
}
.rv-row .row-body{font-size:14.5px;line-height:1.55;color:#413c42}
.rv-row .row-track{background:rgba(43,38,34,.11)}
.rv-row .row-thumb{background:var(--c)}

/* 맨 아래: 날짜 ······ CP · 보상 · 도움 */
.rv-meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:9px;font-size:12.5px;color:#8a8175;
}
.rv-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-cp{
  padding:2px 10px;border-radius:999px;font-weight:800;color:#8a5b07;
  background:linear-gradient(180deg,#fff3c9,#ffe39a);border:1px solid #f0cf73;
}

/* 비었을 때·쪽 넘기기·안내 */
.rv-empty{text-align:center;padding:30px 10px 10px;color:var(--ink-soft)}
.rv-empty img{width:150px;height:auto}
.rv-empty p{margin:6px 0 14px;font-family:var(--font-serif);font-size:16px}
.rv-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:4px}
.rv-pages a,.rv-pages strong,.rv-pages span{
  min-width:34px;padding:5px 10px;border-radius:999px;text-align:center;font-size:13.5px;
}
.rv-pages a{border:1.5px solid #d8c9a8;background:#fffdf8}
.rv-pages strong{background:#3a3128;color:#fff8ea}
.rv-note{margin-top:18px;text-align:center;font-size:12px;color:#9a9083;word-break:keep-all}

@media (min-width:760px){
  .rv-head-mascot{width:128px;position:absolute;right:max(8px,calc(50% - 400px));bottom:-2px;margin:0}
}
@media (max-width:759px){
  .rv-head{padding:20px 10px 18px;gap:6px}
  .rv-head-mascot{width:74px;margin-bottom:-18px}
  .rv-row{padding:13px 12px 11px 17px;margin-bottom:13px;border-radius:13px}
  .rv-row::before{left:6px;width:4px}
  .rv-title{font-size:17.5px}
  .rv-nick{font-size:11.5px;padding:1px 7px 2px;margin-right:5px}
  .rv-book{display:block;margin:3px 0 0;font-size:12px}
  .rv-quote{font-size:14px}
  .rv-row .row-body{font-size:13.5px}
}

/* ── 급상승 핫리뷰 (v1.41) ── 최근 24시간 반응이 몰린 리뷰 다섯 편까지. 번호 없이 ▲ 표시만 */
.rv-hot{max-width:820px;margin:0 auto 18px}
.rv-hot-head{
  margin:0 0 9px;font-family:var(--font-serif);font-size:18px;font-weight:700;color:#c2392f;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.rv-hot-head::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff5b45;box-shadow:0 0 0 4px rgba(255,91,69,.18);align-self:center}
.rv-hot-head span{font-family:var(--font-sans);font-size:12.5px;font-weight:400;color:#9a8b80}
.rv-hot-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rv-hot-card{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:11px 12px 10px;border-radius:13px;
  background:linear-gradient(160deg,#fff6f1 0%,#fff 55%);
  border:1.5px solid #f6b9a8;box-shadow:0 3px 0 #ee9a84,0 8px 16px rgba(240,108,80,.12);
  transition:transform .15s ease;
}
.rv-hot-card:hover{transform:translateY(-2px)}
.rv-hot-tag{align-self:flex-start;padding:1px 8px;border-radius:999px;background:#ff5b45;color:#fff;font-size:11px;font-weight:800}
.rv-hot-title{
  font-family:var(--font-serif);font-size:15px;line-height:1.35;color:#24222a;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rv-hot-book{font-size:12px;color:#7b7266;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-hot-by{margin-top:auto;font-size:11.5px;color:#b0473a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:759px){
  .rv-hot-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px}
  .rv-hot-card{flex:0 0 62%;scroll-snap-align:start}
  .rv-hot-head{font-size:16.5px}
}

/* ── v1.42 꾸밈 그림 (2026-10-30) ── 머리 배경·책 먼지 부는 챔순이(ChatGPT)·아이콘·따옴표·마무리 띠(제미나이) */
.rv-head{
  max-width:none;margin:6px 0 20px;min-height:clamp(250px,26vw,330px);
  padding:30px 20px 34px;border:0;border-radius:22px;overflow:hidden;
  background:#fdf3ea url(/assets/img/reviews-head-bg.webp?v=20261030-m1) center bottom/cover no-repeat;
  box-shadow:0 10px 26px rgba(214,140,160,.18);
}
.rv-head-text{position:relative;z-index:1;padding:6px 18px 10px;border-radius:18px;
  background:radial-gradient(closest-side,rgba(255,252,247,.82),rgba(255,252,247,0))}
.rv-head-copy{color:#a24f74}
@media (min-width:760px){
  .rv-head-mascot{width:auto;height:92%;right:7%;bottom:2px;filter:drop-shadow(0 8px 10px rgba(160,90,110,.18))}
}
.rv-hot-head::before{content:none}
.rv-hot-ico{width:30px;height:auto;align-self:center;margin-right:-2px}
.rv-sort a{display:inline-flex;align-items:center;gap:6px;padding:5px 15px 5px 9px}
.rv-sort a img{width:22px;height:22px;object-fit:contain}
.rv-quote{position:relative;padding-left:32px}
.rv-quote::before{
  content:"";position:absolute;left:0;top:-1px;width:26px;height:20px;
  background:url(/assets/img/reviews-quote.webp?v=20261030-m1) left center/contain no-repeat;
}
.rv-garland{
  max-width:620px;height:0;padding-bottom:min(130px,21%);margin:22px auto 0;
  background:url(/assets/img/reviews-garland.webp?v=20261030-m1) center/contain no-repeat;
}
@media (max-width:759px){
  .rv-head{min-height:220px;padding:22px 12px 26px;border-radius:16px;background-position:22% bottom;
    justify-content:flex-start}
  .rv-head-text{text-align:left;padding:4px 8px 8px;max-width:calc(100% - 110px)}
  .rv-head-actions{justify-content:flex-start}
  .rv-head-mascot{position:absolute;right:4px;bottom:2px;width:122px;margin:0}
  .rv-sort a{padding:4px 12px 4px 7px}
  .rv-sort a img{width:19px;height:19px}
  .rv-quote{padding-left:27px}
  .rv-quote::before{width:22px;height:17px}
  .rv-garland{margin-top:16px}
}

/* ── v1.44 급상승 핫리뷰 전광판 (이상준님 2026-10-30) ──
   카드가 오른쪽에서 왼쪽으로 천천히 계속 흐른다(flos-reviews-hot-v1.js). 손가락·마우스로 끌거나
   ‹ › 단추로 직접 넘길 수 있고, 손을 떼면 잠시 뒤 다시 흐른다. 마우스를 올려 두면 멈춘다 */
.rv-hot-ticker{position:relative}
.rv-hot-ticker .rv-hot-cards{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;
  padding:3px 2px 9px;margin:0;scrollbar-width:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
}
.rv-hot-ticker .rv-hot-cards::-webkit-scrollbar{display:none}
.rv-hot-ticker .rv-hot-cards.is-dragging{cursor:grabbing;user-select:none}
.rv-hot-ticker .rv-hot-card{flex:0 0 176px;scroll-snap-align:none;-webkit-user-drag:none}
.rv-hot-nav{
  position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-18px;border-radius:50%;
  border:1.5px solid #f6b9a8;background:#fff;color:#c2392f;font-size:20px;line-height:1;
  box-shadow:0 3px 8px rgba(240,108,80,.18);cursor:pointer;padding:0 0 2px;
}
.rv-hot-nav.prev{left:-8px}
.rv-hot-nav.next{right:-8px}
.rv-hot-nav:hover{background:#fff3ee}
.rv-hot-ticker:not(.is-on) .rv-hot-nav{display:none}
@media (max-width:759px){
  .rv-hot-ticker .rv-hot-card{flex:0 0 min(58vw,220px)}
  .rv-hot-nav{width:26px;height:26px;font-size:17px;margin-top:-16px}
  .rv-hot-nav.prev{left:-4px}
  .rv-hot-nav.next{right:-4px}
}
