/* 클럽슈터 회원전 E-book · 책 넘김 보기 (전시장 벽 느낌) */
.fb { position: relative; margin: 0 0 28px; padding: 46px 20px 26px; border-radius: 16px; overflow: hidden; user-select: none; -webkit-user-select: none; color: #1d1c1a; font-family: Pretendard, 'Noto Sans KR', sans-serif;
  background: radial-gradient(70% 60% at 50% 38%, #fbfaf7 0%, #efede8 55%, #e2dfd8 100%); }
.fb::before { content: ""; position: absolute; left: 50%; top: -30%; width: 70%; height: 80%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.75), transparent 70%); pointer-events: none; }
.fb:fullscreen { border-radius: 0; padding: 30px 24px 22px; display: flex; flex-direction: column; justify-content: center; }
.fb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 4px 0 30px; }
.fb-book { position: relative; perspective: 3200px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; }
.fb-book:active { cursor: grabbing; }
/* 책 아래 그림자 */
.fb-book::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -22px; height: 34px; background: radial-gradient(50% 50% at 50% 50%, rgba(40,30,20,.32), transparent 72%); filter: blur(6px); z-index: -1; pointer-events: none; }
.fb-slot { position: absolute; top: 0; height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 30px rgba(40,30,20,.14); }
.fb-slot.l { left: 0; }
.fb-slot:empty { box-shadow: none; }
.fb-under { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 30%, transparent 60%); z-index: 3; }
/* 쪽: 올린 이미지를 그대로 (디자인된 쪽은 여백 없이) */
.fb-pg { position: absolute; inset: 0; background: #fff; overflow: hidden; }
.fb-pg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.fb-pg.cover img { object-fit: cover; }
/* 가운데 접힘 · 종이 결 */
.fb-pg.right::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.05) 3%, rgba(255,255,255,.08) 6%, transparent 12%); }
.fb-pg.left::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,.05) 3%, rgba(255,255,255,.08) 6%, transparent 12%); }
.fb-pg.cover::before { background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(0,0,0,.12) 1.5%, transparent 5%); }
.fb-book.single .fb-pg.right::before { background: linear-gradient(90deg, rgba(0,0,0,.1), transparent 3%); }
.fb-pg.blank { background: #f6f4ef; }
.fb-pg.endpaper { background: #22313b; }
.fb-pg.endpaper .fin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.88); text-align: center; padding: 10%; }
.fb-pg.endpaper .fin b { font-size: 20px; letter-spacing: .16em; }
.fb-pg.endpaper .fin span { font-size: 13px; opacity: .7; }
/* 넘어가는 종이 (캔버스) */
.fb-fl { position: absolute; display: none; z-index: 5; pointer-events: none; }
/* 책 옆 넘김 자리 (PC는 책 바깥 빈 곳, 휴대폰은 가장자리) */
.fb-edge { position: absolute; top: 0; bottom: 30px; width: 64px; border: 0; background: none; cursor: pointer; z-index: 6; opacity: 0; transition: opacity .2s; }
.fb-edge::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-top: 2px solid #3a3733; border-right: 2px solid #3a3733; }
.fb-edge.p { left: 0; } .fb-edge.p::after { left: 26px; transform: translateY(-50%) rotate(-135deg); }
.fb-edge.n { right: 0; } .fb-edge.n::after { right: 26px; transform: translateY(-50%) rotate(45deg); }
.fb-stage:hover .fb-edge:not(:disabled) { opacity: .55; } .fb-edge:hover:not(:disabled) { opacity: 1 !important; }
.fb-edge:disabled { cursor: default; }
/* 아래 알약 모양 도구 막대 */
.fb-bar { position: relative; z-index: 7; margin: 0 auto; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px; background: #1f1e1c; color: #fff; box-shadow: 0 10px 30px rgba(30,25,20,.25); overflow: hidden; }
.fb-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.12); }
.fb-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd36b, #ff7a59); transition: width .5s ease; }
.fb-ib { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.fb-ib:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.fb-ib:disabled { opacity: .3; cursor: default; }
.fb-ib.on { background: #fff; color: #1f1e1c; }
.fb-ib svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb-cnt { min-width: 84px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fb-cnt b { font-weight: 700; } .fb-cnt span { opacity: .55; }
.fb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); margin: 0 6px; }
/* 전체 쪽 (목차) */
.fb-toc { position: absolute; inset: 0; z-index: 20; background: rgba(246,244,239,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 22px 22px 26px; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .25s; }
.fb-toc.on { opacity: 1; pointer-events: auto; }
.fb-toc-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.fb-toc-h b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-toc-h span { font-size: 13px; color: #8a857c; white-space: nowrap; margin-right: auto; }
.fb-toc-h .fb-ib { color: #1f1e1c; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.fb-thumbs { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; align-content: start; padding: 4px; }
.fb-thumbs button { border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.fb-thumbs img { width: 100%; aspect-ratio: var(--fb-ratio, .72); object-fit: contain; background: #fff; box-shadow: 0 4px 14px rgba(40,30,20,.14); border-radius: 2px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .2s; }
.fb-thumbs button:hover img { transform: translateY(-3px); }
.fb-thumbs button.on img { outline-color: #ff7a59; }
.fb-thumbs span { font-size: 12px; color: #8a857c; font-variant-numeric: tabular-nums; }
/* 크게 보기 */
.fb-zoom { position: fixed; inset: 0; z-index: 10000; background: rgba(20,19,17,.94); display: none; align-items: center; justify-content: center; }
.fb-zoom.on { display: flex; }
.fb-zoom img { max-width: 96vw; max-height: 92vh; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.fb-zoom button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; cursor: pointer; }
@media (max-width: 719px) {
  .fb { padding: 24px 6px 16px; border-radius: 12px; }
  .fb-edge { width: 44px; }
  .fb-bar { gap: 0; padding: 5px 6px; }
  .fb-ib { width: 36px; height: 36px; }
  .fb-cnt { min-width: 64px; font-size: 13px; }
  .fb-sep { margin: 0 2px; }
  .fb-thumbs { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

.fb-under.l { background: linear-gradient(270deg, rgba(0,0,0,.4), rgba(0,0,0,.1) 30%, transparent 65%); }
.fb-slot:not(:has(.fb-pg)) { box-shadow: none; }

/* 목록에서 바로 펼친 전체 화면 */
.eb-full { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: radial-gradient(70% 60% at 50% 38%, #fbfaf7 0%, #efede8 55%, #e2dfd8 100%); font-family: Pretendard, 'Noto Sans KR', sans-serif; animation: ebIn .35s ease; }
@keyframes ebIn { from { opacity: 0; } to { opacity: 1; } }
.eb-full-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 6px; color: #1d1c1a; }
.eb-full-top b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-full-top .sp { flex: 1; }
.eb-full-link { font-size: 13px; color: #6b665d; text-decoration: none; white-space: nowrap; border: 1px solid #d9d4ca; border-radius: 999px; padding: 6px 12px; }
.eb-full-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1f1e1c; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.eb-full-book { flex: 1; min-height: 0; display: flex; }
.eb-full-book.fb, .eb-full .fb { flex: 1; margin: 0; border-radius: 0; background: none; padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; }
.eb-full .fb::before { display: none; }