/* v2.18 책 포털 (Claude, 2026-11-04) — 검색칸 + 찾은 책 + 두 칸(NEW 새 리뷰가 올라온 책 | 리뷰를 기다리는 책)
   두 칸의 틀은 북리뷰 MAIN(flos-reviews-split-v1.css)의 .rv2-* 를 그대로 쓰고, 여기서는 책 제목을 가장 크게 앞에 세운다
   (이상준님: 「책 제목이 가장 중요하니까 책 제목을 가장 크게 맨 앞에 내세우고 저자와 출판사는 작게 해」) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 머리 + 검색칸 */
.bp-head{
  max-width:1120px;margin:6px auto 18px;padding:28px 22px 26px;border-radius:22px;text-align:center;
  background:linear-gradient(135deg,#fff4f8 0%,#fffaf3 55%,#f3f8f1 100%);
  box-shadow:0 10px 26px rgba(214,140,160,.15);scroll-margin-top:10px;
}
.bp-head-title{margin:0;font-family:var(--font-serif);font-size:clamp(28px,4vw,38px);color:#2c2230;letter-spacing:-.02em}
.bp-head-copy{margin:6px 0 18px;color:#b0467a;font-size:15px}
.bp-search{display:flex;gap:8px;max-width:640px;margin:0 auto}
.bp-search input{
  flex:1;min-width:0;padding:13px 18px;border:2px solid #e9c7d6;border-radius:999px;background:#fff;
  font-size:16px;color:#2c2230;font-family:var(--font-sans);
}
.bp-search input:focus{outline:none;border-color:#e0457e;box-shadow:0 0 0 4px rgba(224,69,126,.12)}
.bp-search button{
  flex:none;padding:0 24px;border:0;border-radius:999px;background:#3a3128;color:#fff8ea;
  font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-sans);
}

.bp-flash{max-width:1120px;margin:0 auto 14px;padding:11px 16px;border-radius:12px;font-size:14px}
.bp-flash.ok{background:#eefaf3;border:1px solid #bfe6cf;color:#1f6d47}
.bp-flash.err{background:#fff2f2;border:1px solid #f1c4c4;color:#9b2d2d}

/* 후원 홍보 칸(ChatGPT 판 마크업) — app.css 없이도 보이게 간단히 */
.bp-main .promotion-section{max-width:1120px;margin:0 auto 16px;padding:12px 14px;border-radius:16px;background:#fffdf8;border:1px solid #efe4cc}
.bp-main .promotion-section-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.bp-main .promotion-section-head h2{margin:0;font-size:15px}
.bp-main .promotion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.bp-main .promotion-card{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #f0e6d2}
.bp-main .promotion-card h3{margin:4px 0;font-size:15px}
.bp-main .promotion-label{font-size:11px;color:#9a8b6c}
.bp-main .muted{color:#8a8175;font-size:12px;margin:2px 0}
.bp-main .promotion-card .btn{display:inline-block;margin-top:6px;padding:3px 10px;border:1px solid #d8c9a8;border-radius:999px;font-size:12px}

/* 찾은 책 */
.bp-results{max-width:1120px;margin:0 auto 18px;padding:14px 16px;border-radius:18px;background:#fff;border:1.5px solid #f1dfe6;box-shadow:0 8px 20px rgba(214,140,160,.10)}
.bp-results-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.bp-results-head h2{margin:0;font-size:17px;color:#3b2a3f}
.bp-clear{font-size:12.5px;color:#8a8175}
.bp-list{list-style:none;margin:0;padding:0}
.bp-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-top:1px dashed #efdfe6}
.bp-card:first-child{border-top:0}
.bp-card.is-added{background:#fff8e6;border-radius:12px;padding-left:10px;padding-right:10px}
.bp-card-main{min-width:0}
.bp-title{display:block;font-family:var(--font-serif);font-size:20px;font-weight:700;line-height:1.3;color:#2c2230;word-break:keep-all}
.bp-meta{margin:3px 0 0;font-size:12.5px;color:#9a8f80}
.bp-none{margin:6px 0 0;font-size:13.5px;color:#8a5b2a}
.bp-none b{color:#c23b6e}
.bp-has{margin:6px 0 0;font-size:13px}
.bp-has a{color:#2e70c8}
.bp-card-act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bp-wish-form{margin:0}
.bp-wish{
  display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid #f0b9cf;background:#fff4f8;color:#b0336a;font-size:13px;font-weight:700;font-family:var(--font-sans);white-space:nowrap;
}
.bp-wish b{font-weight:800}
.bp-wish.on{background:#e0457e;border-color:#e0457e;color:#fff}
.bp-write{font-size:12.5px;color:#6d6252;white-space:nowrap}
.bp-ext-link{margin:10px 0 0;font-size:13px}
.bp-ext-link a{color:#7045ba}
.bp-ext{margin-top:12px;padding:12px 14px;border-radius:14px;background:#faf7ff;border:1.5px dashed #d6c8f0}
.bp-ext h3{margin:0 0 4px;font-size:15.5px;color:#3b2a3f}
.bp-ext h3 b{color:#7045ba}
.bp-ext-note{margin:0 0 6px;font-size:12.5px;color:#7a7090}
.bp-ext-list .bp-card{border-top-color:#e6dcf6}
.bp-pick{padding:7px 16px;border:0;border-radius:999px;background:#7045ba;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.bp-ext-src{margin:6px 0 0;font-size:11.5px;color:#a39ab3;text-align:right}
.bp-ext-admin{margin:8px 0 0;padding:6px 10px;border-radius:8px;background:#fff;font-size:12px;color:#9b2d2d}

/* 두 칸 — 책 제목을 가장 크게 앞에 */
.bp-label{display:flex;align-items:center;gap:3px;margin:0 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.03em;line-height:1.3;color:#a3968a}
.bp-row-title{display:block;font-family:var(--font-serif);font-size:18px;font-weight:700;line-height:1.3;color:#2c2230;word-break:keep-all}
.bp-row-meta{margin:2px 0 6px;font-size:11.5px;color:#9a8f80}
.bp-row-review{margin:0 0 5px;font-size:13px;line-height:1.45;color:#5a5048;display:flex;gap:6px;align-items:baseline}
.bp-row-review a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a4048}
.bp-tag{flex:none;display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 6px;border-radius:999px;font-size:10.5px;font-weight:800;color:#fff;background:var(--c)}
.bp-row-wait{margin:0 0 6px;font-size:12.5px;color:#8a5b2a}
.bp-row-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bp-wished .bp-wish{padding:4px 11px;font-size:12px}
.bp-foot-note{max-width:1120px;margin:6px auto 14px;text-align:center;font-size:12.5px;color:#9a9083}

@media (max-width:759px){
  .bp-head{padding:20px 12px 18px;border-radius:18px}
  .bp-head-copy{font-size:13px;margin-bottom:12px}
  .bp-search input{padding:11px 14px;font-size:15px}
  .bp-search button{padding:0 16px;font-size:14px}
  .bp-results{padding:10px 10px;border-radius:14px}
  .bp-results-head h2{font-size:15px}
  .bp-card{flex-direction:column;align-items:stretch;gap:8px}
  .bp-card-act{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
  .bp-title{font-size:17.5px}
  .bp-row-title{font-size:14px}
  .bp-label{font-size:9.5px}
  .bp-row-meta{font-size:10px;margin-bottom:4px}
  .bp-row-review{font-size:11px;flex-direction:column;gap:2px}
  .bp-row-review a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .bp-tag{font-size:9.5px;align-self:flex-start}
  .bp-row-wait{font-size:10.5px}
  .bp-row-act{gap:4px 6px}
  .bp-wished .bp-wish{padding:3px 8px;font-size:10.5px}
  .bp-write{font-size:10.5px}
}

/* v2.20 이름표 아이콘 — 책제목엔 책, 리뷰제목엔 펜 */
.bp-ico-book{flex:none;display:inline-block;width:13px;height:13px;background:url(/assets/img/bp-icon-book.svg?v=20261104-i1) center/contain no-repeat}
.bp-tag::before{content:"";flex:none;width:10px;height:10px;background:currentColor;-webkit-mask:url(/assets/img/bp-icon-pen.svg?v=20261104-i1) center/contain no-repeat;mask:url(/assets/img/bp-icon-pen.svg?v=20261104-i1) center/contain no-repeat}
.bp-row-latest{margin:7px 0 0;padding-top:7px;border-top:1px dashed rgba(120,100,90,.22)}
.bp-row-latest .bp-tag{background:#8a7f74}
.bp-latest-ago{flex:none;font-size:11px;color:#a3968a}
@media (max-width:759px){
  .bp-ico-book{width:11px;height:11px}
  .bp-tag::before{width:9px;height:9px}
  .bp-latest-ago{font-size:10px}
}


/* Book discovery hero: independent artwork and accessible live search. */
.bp-head{position:relative;isolation:isolate;overflow:hidden;min-height:350px;box-sizing:border-box;display:flex;align-items:center;padding:40px 27% 40px 12%;background:#fff7f2 url('/assets/img/books-hero-bg-v1.webp?v=20261108') center/cover no-repeat}
.bp-head-content{position:relative;z-index:2;width:100%;min-width:0}
.bp-head-title{font-size:clamp(32px,3.4vw,44px)}
.bp-head-copy{line-height:1.8;margin:12px auto 24px;text-wrap:balance}
.bp-head-mascot{position:absolute;z-index:1;right:2%;bottom:10px;width:25%;height:calc(100% - 22px);object-fit:contain;object-position:center bottom;pointer-events:none}
.bp-head .bp-search{position:relative;gap:10px}
.bp-head .bp-search input{background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(154,93,114,.06)}
.bp-head .bp-search button{min-height:50px;box-shadow:0 3px 0 #211c17}
@media(max-width:759px){
 .bp-head{display:block;min-height:320px;padding:28px 18px 24px;background-position:43% center}
 .bp-head-content{display:grid;grid-template-columns:minmax(0,1fr) 34%;text-align:left}
 .bp-head-title{grid-column:1;font-size:30px;align-self:end;margin-top:18px}
 .bp-head-copy{grid-column:1;font-size:13px;line-height:1.8;margin:12px 8px 36px 0;min-height:70px;text-wrap:pretty}
 .bp-head .bp-search{grid-column:1/-1;width:100%;max-width:none;gap:7px;margin:8px 0 0}
 .bp-head-mascot{right:8px;top:12px;bottom:auto;width:35%;height:188px;object-position:center}
 .bp-head .bp-search input{width:0;padding:12px;font-size:14px}
 .bp-head .bp-search button{padding:0 18px;min-height:48px}
}
@media(prefers-reduced-motion:no-preference){.bp-head .bp-search button{transition:background .15s}.bp-head .bp-search button:hover{background:#544234}}

/* v2.21 (Claude, 2026-11-08) 새 히어로 — 그림 한 장(책 계단 위 챔순이·달님)을 통째로 깔고, 글·찾기칸은 왼쪽 빈 하늘에.
   이상준님: 「새히어로(그림2)로 바꿔」. 옛 배경·챔순이 그림(books-hero-bg-v1·books-hero-champsoon-v1)은 안 씀 */
.bp-head.bp-head-v2{
  min-height:0;aspect-ratio:2000/667;display:flex;align-items:flex-start;
  padding:4.2% 47% 0 5%;
  background:#e9d3ef url('/assets/img/books-hero-v2.webp?v=20261108-h2') center/cover no-repeat;
}
.bp-head-v2 .bp-head-content{text-align:center}
.bp-head-v2 .bp-head-title{text-shadow:0 2px 14px rgba(255,255,255,.85)}
.bp-head-v2 .bp-head-copy{margin:8px auto 18px;color:#a23a72;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.bp-head-v2 .bp-search input{border-color:#e6c3dd}
@media(max-width:759px){
  .bp-head.bp-head-v2{
    aspect-ratio:auto;display:block;padding:24px 16px calc(33.35vw + 2px);
    background:url('/assets/img/books-hero-v2.webp?v=20261108-h2') center bottom/100% auto no-repeat,
               linear-gradient(180deg,#fbeaf4 0%,#dcc2e7 52%,#dcc2e7 100%);
  }
  .bp-head.bp-head-v2::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;aspect-ratio:2000/667;
    background:linear-gradient(180deg,#dcc2e7 0%,rgba(220,194,231,0) 32%);pointer-events:none}
  .bp-head-v2 .bp-head-content{display:block;text-align:center}
  .bp-head-v2 .bp-head-title{margin-top:0;font-size:28px}
  .bp-head-v2 .bp-head-copy{min-height:0;margin:8px 0 14px;font-size:13px}
  .bp-head-v2 .bp-search{margin:0}
}

/* v2.22 — Thumbnail and publication date inside search result cards only. */
.bp-card-book{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0}
.bp-card-book .bp-card-main{flex:1;min-width:0}
.bp-cover{display:grid;place-items:center;flex:none;width:74px;height:104px;border:1px solid #e7dce9;
 border-radius:7px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(60,36,70,.09)}
.bp-cover img{display:block;width:100%;height:100%;object-fit:contain}
.bp-cover-missing{background:linear-gradient(145deg,#fffaf5,#f1eaf7)}
.bp-cover-missing span{font-size:11px;color:#988b9b;text-align:center}
.bp-pubdate{margin:5px 0 0;color:#86768b;font-size:12.5px;line-height:1.5}
@media(max-width:759px){
 .bp-card-book{gap:10px;width:100%}
 .bp-cover{width:58px;height:82px}
 .bp-pubdate{font-size:11.5px}
}

/* v2.24 (Claude, 2026-11-08) 표지 띠 — 관리자가 고른, 리뷰가 있는 책의 표지. 북리뷰 MAIN 급상승 띠처럼 처음 5초만 흐르고 멈춤
   (움직임은 assets/js/flos-reviews-hot-v1.js — data-hot-* 이름을 그대로 쓴다) */
.bp-shelf{max-width:1120px;margin:0 auto 18px}
.bp-shelf-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px 4px;font-family:var(--font-serif);font-size:19px;color:#2c2230}
.bp-shelf-head .bp-ico-book{width:17px;height:17px}
.bp-shelf-head span{font-family:var(--font-sans);font-size:12px;font-weight:400;color:#9a8f80}
.bp-shelf-ticker{position:relative}
.bp-shelf-track{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 10px;scrollbar-width:none;cursor:grab}
.bp-shelf-track::-webkit-scrollbar{display:none}
.bp-shelf-track.is-dragging{cursor:grabbing;user-select:none}
.bp-shelf-card{flex:0 0 124px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:#2c2230;-webkit-user-drag:none}
.bp-shelf-cover{display:block;width:124px;height:178px;border-radius:6px;overflow:hidden;background:#f4ede4;
  box-shadow:0 6px 14px rgba(90,60,70,.18),0 1px 0 rgba(0,0,0,.05);transition:transform .2s}
.bp-shelf-cover img{display:block;width:100%;height:100%;object-fit:cover}
.bp-shelf-card:hover .bp-shelf-cover{transform:translateY(-3px)}
.bp-shelf-title{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-shelf-count{font-size:11.5px;color:#b0467a}
.bp-shelf-nav{position:absolute;top:89px;z-index:2;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  border:1.5px solid #e9c7d6;background:#fff;color:#b0467a;font-size:20px;line-height:1;padding:0 0 2px;cursor:pointer;
  box-shadow:0 3px 8px rgba(214,140,160,.2)}
.bp-shelf-nav.prev{left:-8px}
.bp-shelf-nav.next{right:-8px}
.bp-shelf-ticker:not(.is-on) .bp-shelf-nav{display:none}
.bp-shelf-empty{max-width:1120px;margin:0 auto 14px;font-size:12.5px;color:#9a8f80}
.bp-shelf-form{display:inline;margin:0}
.bp-shelf-btn{border:1.5px solid #c9a24a;background:#fffaf0;color:#7a5a12;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer}
.bp-shelf-btn.off{border-color:#cfc6bb;background:#fff;color:#8a7f74}
.bp-shelf-note{font-size:11.5px;color:#a3968a}
.bp-head-title a{color:inherit;text-decoration:none}
@media (max-width:759px){
  .bp-shelf{margin:0 0 14px}
  .bp-shelf-head{font-size:16px}
  .bp-shelf-card{flex-basis:96px}
  .bp-shelf-cover{width:96px;height:138px}
  .bp-shelf-title{font-size:12px}
  .bp-shelf-nav{top:69px;width:28px;height:28px;font-size:17px}
}

/* v2.29 같은 책의 다른 판 — 한 묶음으로 */
.bp-family{margin:4px 0 6px;font-size:12px;line-height:1.6;color:#8a7f74}
.bp-family b{margin-right:4px;padding:1px 7px;border-radius:999px;background:#f3ecf7;color:#6b4f86;font-size:11px;font-weight:700}
.bp-family a{color:#5a4e7a;font-weight:600}
.bp-family span{color:#a3968a}
@media (max-width:759px){ .bp-family{font-size:11px} .bp-family b{font-size:10px} }