/* a_bookshelf - 독서 기록 게시판
   사이트 전역 테마(:root)의 색상·폰트 토큰을 그대로 사용합니다.
   (accent-color, card-bg-color, content-font-family 등은 사이트 전역 CSS에서 정의됨)

   --rb-* 토큰은 :root에 정의합니다 (특정 요소에 scope하지 않음 — 다른 스킨(a_devlog)에서
   .rb-fab류 플로팅 요소가 wrap 바깥에 렌더링돼 변수를 못 물려받는 문제를 겪은 적이 있어 예방).

   이 style.css는 a_bookshelf 스킨(list/view/write.skin.php)에서만 불러오므로,
   여기서 숨기는 요소는 이 게시판 페이지에서만 숨겨지고 다른 게시판/페이지에는
   영향이 없습니다. */
#widget-toolbar { display: none !important; }

:root {
  --rb-accent: var(--accent-color, #00d643);
  --rb-accent-bg: var(--btn-accent-bg, #002b0f);
  --rb-accent-text: var(--btn-accent-text, #00d643);
  --rb-card: var(--card-bg-color, #111111);
  --rb-border: var(--card-border-color, #2e2e2e);
  --rb-radius: var(--card-border-radius, 10px);
  --rb-text: var(--content-font-color, #f4f4f4);
  --rb-title-font: var(--title-font-family, 'MissedSimsim', 'Chosunilbo_myungjo', serif);
  --rb-body-font: var(--content-font-family, 'Paperlogy-4Regular', 'Pretendard', sans-serif);
  --rb-sub: var(--gray-400, #a5a5a5);
  --rb-sub2: var(--gray-500, #767676);
  --rb-btn-bg: var(--btn-primary-bg, #1c1c1e);
  --rb-btn-text: var(--btn-primary-text, #949398);
  --rb-form-bg: var(--form-bg-color, #111111);
  --rb-form-border: var(--form-border-color, #2e2e2e);
}

.rb-write-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 110px;
  font-family: var(--rb-body-font);
  color: var(--rb-text);
  box-sizing: border-box;
}
/* .rb-shell은 사이드바 + 본문(.rb-main)을 가로로 나란히 두는 flex 컨테이너다.
   사이드바가 열리면(폭이 0→260px로 늘어나며) 실제로 그만큼 레이아웃 공간을
   차지해서 본문을 오른쪽으로 밀어낸다 — 화면 전체를 덮는 오버레이 드로어가
   아니라, 본문 옆에 자기 자리를 차지하는 패널로 "뜬다". */
.rb-shell { display: flex; align-items: flex-start; font-family: var(--rb-body-font); color: var(--rb-text); box-sizing: border-box; }
/* 책이 적어서(또는 문구·이미지가 적어서) 실제 콘텐츠가 짧으면 스크롤할 공간 자체가
   부족해져 인트로/히어로가 스크롤로 안 사라지는 문제가 생긴다 — 콘텐츠 길이와 무관하게
   항상 최소 한 화면 높이 이상은 스크롤할 수 있도록 보장한다. */
.rb-shell { min-height: 100vh; }
.rb-shell *, .rb-write-wrap *, .rb-view-wrap * { box-sizing: border-box; }

/* 리스트/플로팅메뉴/사이드바/글쓰기 안의 모든 input 계열 요소는 hover·focus 시 어떤
   시각효과(윤곽선, 그림자, 테두리색 변화)도 주지 않는다. */
.rb-shell input, .rb-shell textarea, .rb-shell select,
.rb-write-wrap input, .rb-write-wrap textarea, .rb-write-wrap select,
.rb-floating-menu input, .rb-sidebar input {
  outline: none;
}
.rb-shell input:hover, .rb-shell input:focus,
.rb-shell textarea:hover, .rb-shell textarea:focus,
.rb-shell select:hover, .rb-shell select:focus,
.rb-write-wrap input:hover, .rb-write-wrap input:focus,
.rb-write-wrap textarea:hover, .rb-write-wrap textarea:focus,
.rb-write-wrap select:hover, .rb-write-wrap select:focus,
.rb-floating-menu input:hover, .rb-floating-menu input:focus,
.rb-sidebar input:hover, .rb-sidebar input:focus {
  /* border-color는 일부러 안 건드린다 — "inherit"로 두면 부모 요소의 border-color를
     그대로 물려받아서 오히려 hover/focus 때 엉뚱한 테두리 색이 나타나는 원인이 됨.
     아무것도 지정하지 않으면 평소(resting) 규칙의 border-color가 그대로 유지된다. */
  outline: none !important; box-shadow: none !important;
}

/* 상세보기 본문 컨테이너 — 게시판 폭이 아니라 뷰포트 전체를 덮는 풀블리드 + 검정 배경.
   문구·서브이미지가 적어서 내용이 짧은 게시물도 항상 스크롤할 공간이 충분하도록
   min-height로 최소 한 화면 높이를 보장한다(짧은 글에서만 스크롤이 안 되던 문제 방지). */
.rb-view-wrap {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  font-family: var(--rb-body-font);
  padding-bottom: 110px;
}
/* 서브 이미지·문구 영역 뒤 배경 — 메인 이미지를 히어로의 이미지+텍스트 모드와 같은
   블러(5px, 1.08배 확대)로 깔고, 위에서 아래로 갈수록 짙어지는 그라데이션을 덮어
   글자 가독성을 유지한다. 화면에 고정(position:fixed)되어 스크롤해도 같이 움직이지
   않는다. 메인 이미지가 없으면 이 레이어의 배경이 비어서 원래대로 검정만 보인다. */
.rb-view-wrap-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--rb-hero-img) center/cover no-repeat;
  filter: blur(5px); transform: scale(1.08);
}
.rb-view-wrap-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.9) 75%, rgba(0,0,0,.8) 100%);
}
.rb-view-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 24px 16px 0; color: var(--rb-text); box-sizing: border-box; }
.rb-view-inner * { box-sizing: border-box; }

/* 히어로(인트로/메인이미지)가 사라진 뒤 목록/본문이 상단에 바로 붙지 않고 살짝
   여백을 두고 시작하도록 하는 작은 예약 공간(전체화면 크기가 아니라 소량만). */
.rb-intro-spacer { height: 100px; }

/* ── 전체화면 인트로 슬라이더 (목록의 이달의 책, 첫 진입 시) ── */
.rb-intro-hero { position: fixed; inset: 0; z-index: 999; overflow: hidden; background: #000; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.rb-intro-hero.is-dismissed { transform: translateY(-100%); }
.rb-intro-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: var(--rb-card) center/cover no-repeat; transition: opacity 1.1s ease;
}
.rb-intro-slide.is-active { opacity: 1; pointer-events: auto; }
.rb-intro-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.3) 100%); }
.rb-intro-info { position: absolute; left: 50px; right: 50px; bottom: 72px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.rb-intro-info-main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 35%; min-width: 0; }
.rb-intro-info-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rb-intro-cover { flex: none; width: 65px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.25); }
.rb-intro-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-intro-info-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rb-intro-title { font-family: var(--rb-title-font); font-size: clamp(28px, 5.5vw, 42px); font-weight: 700; color: #fff !important; line-height: 1.2; }
.rb-intro-subtitle { font-size: 14px; color: rgba(255,255,255,.8) !important; }
.rb-intro-synopsis { font-size: 13.5px; color: rgba(255,255,255,.75) !important; line-height: 1.6; }
.rb-intro-review { flex: none; max-width: 32%; text-align: right; font-size: 13px; color: rgba(255,255,255,.85) !important; line-height: 1.5; }
.rb-intro-cta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.4); color: #fff !important; text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.rb-intro-cta:hover { background: rgba(255,255,255,.28) !important; }
.rb-intro-scrolldown {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.35); color: #fff !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
  animation: rb-intro-bounce 1.8s ease-in-out infinite;
}
@keyframes rb-intro-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* ── 상세보기 메인 이미지 히어로 (view.skin.php, 게시물 첫 진입 시 전체화면) ── */
/* 히어로는 평범하게 클릭을 그대로 막는(pointer-events:auto, 기본값) 상태를 유지한다
   — 예전에 pointer-events:none을 줬더니 히어로가 화면을 덮고 있는 동안 그 뒤에
   숨어 있는 서브 이미지·문구를 클릭한 것처럼 씹혀서(라이트박스가 뜨는 등) 더 큰
   문제가 생겨 되돌렸다. 라이트박스가 닫혀 있어도 클릭을 가로채던 원인은 이미
   .rb-lightbox-slide.is-active 쪽에서 따로 고쳤으므로 이 히어로는 그냥 막아도 된다. */
.rb-view-hero { position: fixed; inset: 0; z-index: 999; overflow: hidden; background: #000; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.rb-view-hero.is-dismissed { transform: translateY(-100%); }
.rb-view-hero-media { position: absolute; inset: 0; background: var(--rb-hero-img) center/cover no-repeat; }
.rb-view-hero.has-quote .rb-view-hero-media { filter: blur(5px); transform: scale(1.08); }
.rb-view-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.3) 100%); pointer-events: none; }
.rb-view-hero-quote {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: fit-content; max-width: min(900px, 78%);
  font-family: 'KoPubWorldBatang'; font-size: 19.5px; font-weight: normal; line-height: 1.7; text-align: left; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.rb-view-hero-quote-source { margin-top: 50px; text-align: right; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.75); }
.rb-view-hero-topbar { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; }
.rb-view-hero-info { position: absolute; left: 50px; right: 50px; bottom: 72px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.rb-view-hero-info-main { display: flex; flex-direction: column; gap: 8px; max-width: 35%; min-width: 0; }
.rb-view-hero-title { font-family: var(--rb-title-font); font-size: clamp(28px, 6vw, 46px); font-weight: 700; color: #fff !important; line-height: 1.2; }
.rb-view-hero-subtitle { font-size: 14.5px; color: rgba(255,255,255,.8) !important; }
.rb-view-hero-synopsis {
  margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.75) !important;
}
.rb-view-hero-review {
  flex: none; max-width: 32%; text-align: right;
  font-size: 13px; color: rgba(255,255,255,.85) !important; line-height: 1.5;
}

/* ── 사이드바(보관함) — 플로팅 메뉴의 햄버거로 열고 닫는다. 전체화면을 덮는
   오버레이 드로어가 아니라, 본문 왼쪽에 자기 자리를 차지하는 패널로 폭이
   0↔292px로 접히고 펼쳐지며 본문(.rb-main)을 밀어낸다. .rb-sidebar는 폭
   애니메이션만 담당하는 투명한 그릇(flex 레이아웃에서 실제 공간을 차지)이고,
   실제로 보이는 박스는 .rb-sidebar-inner다.
   position:fixed로 해봤지만 "스크롤해도 안 움직임"과 "본문과 나란히 시작함"이
   서로 충돌했다 — 본문은 스크롤하면 움직이는데 fixed 박스는 안 움직이니
   스크롤하는 순간 바로 어긋난다. position:sticky를 쓰면 스크롤하기 전에는
   본문과 같은 위치에서 자연스럽게 시작하고, 화면 위로 벗어날 만큼 충분히
   스크롤하면 그때부터 화면 위쪽(top:0)에 붙어서 더 이상 안 움직인다.
   높이는 CSS 고정값 대신 JS(rbSyncSidebarHeight)가 스크롤할 때마다 이
   박스의 "현재" 화면상 top 위치를 실시간으로 재서 다시 계산한다 — 그래야
   스크롤 전(본문이 아래에서 시작해 top이 클 때)과 스크롤 후(top:0으로
   붙었을 때) 어느 경우에도 화면 아래로 넘치지 않는다. z-index는 이달의 책
   인트로 슬라이드(z-index:999)보다 낮게 둬서, 플로팅 메뉴와 마찬가지로
   인트로가 떠 있는 동안은 그 뒤에 가려져 안 보이다가 인트로가 사라지면
   자연스럽게 드러난다. */
.rb-sidebar {
  flex: none; width: 0; overflow: hidden; z-index: 1;
  position: sticky; top: 0; align-self: flex-start;
  transition: width .25s ease;
}
.rb-sidebar.is-open { width: min(292px, 84vw); }
.rb-sidebar-inner {
  /* height는 JS가 스크롤마다 인라인 스타일로 덮어쓴다. 아래 calc(...)는 JS가
     아직 안 돌았을 때를 위한 대략적인 기본값일 뿐이다. */
  width: 260px; height: calc(100vh - 32px); margin: 16px 16px 16px 16px;
  /* 불투명한 검정 대신 반투명 + 블러로 유리 재질(글래스모피즘) 느낌을 낸다 —
     뒤에 있는 배경(포스터 이미지 등)이 흐릿하게 비쳐 보인다. */
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--rb-radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 16px; overflow-y: auto; box-sizing: border-box;
}
.rb-sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rb-sidebar-search { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 14px; margin-bottom: 10px; }
.rb-sidebar-search i { color: var(--rb-sub2); font-size: 13px; }
.rb-sidebar-search input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--rb-text); font-size: 14px; }
.rb-sidebar-search input::placeholder { color: var(--rb-sub2); }
#rb-sidebar-search-input:focus, #rb-sidebar-search-input:hover { outline: none !important; border: none !important; box-shadow: none !important; }
.rb-sidebar-search:focus-within { border-color: rgba(255,255,255,.14) !important; }
/* 불투명한 초록 채우기 대신, 은은한 초록 톤이 도는 반투명 유리 버튼으로 —
   주요 액션이라는 정체성은 유지하되 사이드바의 유리 재질과 어울리게 한다.
   color-mix로 --rb-accent가 실제로 어떤 색이든(사이트 테마 커스터마이징)
   그 색을 기준으로 옅게 섞는다. */
.rb-sidebar-write-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--rb-accent) 16%, transparent) !important; color: var(--rb-accent) !important;
  border: 1px solid color-mix(in srgb, var(--rb-accent) 35%, transparent);
  border-radius: var(--rb-radius); padding: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; margin-bottom: 12px;
}
.rb-sidebar-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rb-sub2); margin: 10px 0 6px 10px; }
.rb-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 14px; color: var(--rb-sub); text-decoration: none; border-radius: var(--rb-radius); border-left: 2px solid transparent; transition: background .15s ease, color .15s ease; }
.rb-sidebar-item i { width: 16px; text-align: center; font-size: 13px; }
.rb-sidebar-item:hover { background: rgba(255,255,255,0.05); color: var(--rb-text) !important; }
.rb-sidebar-item.active { background: rgba(255,255,255,0.05); color: var(--rb-text) !important; font-weight: 600; }
/* 사이드바가 flex-column이라, margin-top:auto로 이 항목만 맨 아래로 밀어낸다
   (위쪽 내용이 적어도 항상 박스 맨 하단에 붙는다). */
.rb-sidebar-exit { margin-top: auto; }

.rb-main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 20px 16px 110px; box-sizing: border-box; }

/* ── 하단 플로팅 메뉴 ── */
/* .rb-floating-menu는 메인 알약(.rb-fmenu-pill)과 따로 떨어진 원형 버튼들
   (.rb-fmenu-extra: 검색·종료)을 나란히 두는 바깥 틀이다 — 배경/테두리 없이
   그냥 둘 사이 간격만 준다. 각각 자기 배경을 가진 별개의 유리 재질 조각으로
   보이게 하기 위함(참고 이미지처럼 메인 탭바와 검색 버튼이 따로 떨어져 있음). */
.rb-floating-menu {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 150;
  display: flex; align-items: center; gap: 10px;
  transition: opacity .2s ease, transform .2s ease;
}
.rb-floating-menu.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(24px); }
/* 불투명한 검정 대신 반투명 + 블러로 유리 재질(글래스모피즘) 느낌을 낸다 —
   뒤에 있는 배경이 흐릿하게 비쳐 보인다. */
.rb-fmenu-pill {
  display: flex; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.rb-fmenu-main { display: flex; align-items: center; gap: 2px; }
.rb-floating-menu.is-searching .rb-fmenu-main { display: none; }
.rb-fmenu-extra { display: flex; align-items: center; gap: 10px; }
.rb-fmenu-circle {
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  color: var(--rb-text); cursor: pointer; font-size: 17px; text-decoration: none;
  transition: color .15s ease;
}
.rb-fmenu-circle:hover { color: var(--rb-accent) !important; }
/* 아이콘 위·라벨 아래 세로 배치 + 둥근 알약 모양 하이라이트(현재 위치인 "홈"만
   .active로 표시) — tvOS 스타일 하단 탭바 참고. */
.rb-fmenu-btn {
  min-width: 58px; padding: 8px 12px 7px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; color: var(--rb-sub); cursor: pointer; font-size: 15px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rb-fmenu-btn span { font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.rb-fmenu-btn:hover { color: var(--rb-text) !important; }
.rb-fmenu-btn.active { background: rgba(255,255,255,.12); color: var(--rb-text) !important; }
.rb-fmenu-search { display: flex; align-items: center; width: 0; overflow: hidden; transition: width .25s ease; }
.rb-floating-menu.is-searching .rb-fmenu-search { width: min(75vw, 320px); }
.rb-fmenu-search-input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--rb-text); font-size: 14px; padding: 0 6px 0 16px; }
.rb-fmenu-search-input::placeholder { color: var(--rb-sub2); }
#rb-fmenu-search-input:focus, #rb-fmenu-search-input:hover { outline: none !important; border: none !important; box-shadow: none !important; }
.rb-fmenu-pill:focus-within { border-color: rgba(255,255,255,.14) !important; }

/* ── 검색 결과 배너 ── */
.rb-search-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--rb-sub); margin-bottom: 18px; }
.rb-search-banner a { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--rb-sub2); text-decoration: none; font-size: 13px; }
.rb-search-banner a:hover { color: var(--rb-text); }

/* ── 책장(선반) ── */
.rb-shelf { margin-bottom: 30px; scroll-margin-top: 16px; }
.rb-shelf-head { display: flex; align-items: center; gap: 6px; width: max-content; margin-bottom: 12px; text-decoration: none; color: var(--rb-text); }
.rb-shelf-head:hover { color: var(--rb-accent) !important; }
.rb-shelf-title { font-family: var(--rb-title-font); font-size: 16px; font-weight: 600; }
.rb-shelf-head i { font-size: 12px; }
/* .rb-shelf-carousel 자체를 좌우로 24px씩 넓혀서(음수 마진) 화살표 자리까지
   포함한 영역이 "마우스오버 대상"이 되게 한다 — 화살표만 박스 밖에 절대좌표로
   떠 있으면 카드에서 화살표로 마우스를 옮기는 순간 빈 틈에서 :hover가 끊겨
   화살표가 사라진다. .rb-shelfrow에는 반대 방향(+24px) 마진을 줘서 카드가
   보이는 실제 폭은 그대로 유지한다. */
.rb-shelf-carousel { position: relative; margin-left: -24px; margin-right: -24px; }
/* 화살표로만 넘기고 스크롤바는 안 보이게 한다(스크롤 자체는 그대로 살아있어서
   화살표 클릭 시 scrollBy가 정상 동작하고, 트랙패드/터치 스와이프도 여전히 된다). */
.rb-shelfrow { display: flex; gap: 16px; overflow-x: auto; margin: 0 24px; padding: 2px 2px 4px; scrollbar-width: none; -ms-overflow-style: none; }
.rb-shelfrow::-webkit-scrollbar { display: none; }
/* 마우스를 올렸을 때만 좌우 화살표가 나타나고, 맨 처음/맨 끝에서는 갈 수 없는
   방향의 화살표를 숨긴다(서브 이미지 캐러셀과 같은 방식/모양). */
.rb-shelf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 20px; height: 36px; padding: 0;
  background: none !important; border: none; color: var(--rb-text) !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.rb-shelf-carousel:hover .rb-shelf-arrow.is-visible { opacity: 1; pointer-events: auto; }
.rb-shelf-arrow-prev { left: 0; }
.rb-shelf-arrow-next { right: 0; }

/* ── 책 표지 카드 (책장 / 그리드 / 검색결과 공용) ── */
.rb-cover-card { flex: none; width: 148px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--rb-text) !important; }
.rb-grid .rb-cover-card { width: auto; }
.rb-cover-frame { position: relative; width: 100%; aspect-ratio: 2/3; border-radius: var(--rb-radius); overflow: hidden; background: hsla(0,0%,100%,.16); border: 1px solid hsla(0,0%,100%,.16); }
.rb-cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .18s ease; }
.rb-cover-card:hover .rb-cover-frame img { filter: brightness(.8); }
.rb-cover-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--rb-sub2); }
.rb-title { font-family: var(--rb-title-font); font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-subtitle { font-size: 12px; color: var(--rb-sub); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* "이달의 책" 별표 배지(목록 카드 우상단) — 수정 권한 있는 사용자는 클릭해서 지정/해제.
   클릭 가능한 버튼형은 평소엔 숨겨두고 카드에 마우스를 올렸을 때만 보인다(조작도 그때만
   가능). 권한이 없는 사용자에게 보이는 읽기전용 표시(span)는 항상 그대로 노출된다. */
.rb-month-star {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,.55) !important; border: none; color: rgba(255,255,255,.55) !important;
  display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
}
.rb-month-star.is-active { color: #ffd23f !important; }
button.rb-month-star:hover { color: #ffd23f !important; }
span.rb-month-star { cursor: default; }
button.rb-month-star { opacity: 0; transition: opacity .15s ease; }
.rb-cover-card:hover button.rb-month-star, button.rb-month-star:focus-visible { opacity: 1; }

/* ── 그리드 ── */
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 24px 16px; }

.rb-empty { text-align: center; color: var(--rb-sub2); font-size: 14px; padding: 70px 16px; line-height: 1.7; }

/* ── 페이지네이션 ── */
.rb-paging { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.rb-page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--rb-radius); background: var(--rb-card); border: 1px solid var(--rb-border); color: var(--rb-sub); font-size: 13px; text-decoration: none; }
.rb-page:hover { color: var(--rb-text) !important; border-color: var(--rb-accent) !important; }
.rb-page.active { background: var(--rb-accent-bg) !important; border-color: var(--rb-accent) !important; color: var(--rb-accent-text) !important; font-weight: 600; }

/* ── 상세보기 상단 바 (글쓰기 화면용 — 메인이미지 히어로 위 topbar는 rb-view-hero-topbar) ── */
.rb-write-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rb-write-topbar-title { font-family: var(--rb-title-font); font-size: 16px; font-weight: 600; }
.rb-nav-icon-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rb-card); border: 1px solid var(--rb-border); color: var(--rb-text); text-decoration: none; cursor: pointer; font-size: 14px; }
.rb-nav-icon-btn:hover { border-color: var(--rb-accent) !important; color: var(--rb-accent) !important; }
.rb-view-hero-topbar .rb-nav-icon-btn { background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.3); color: #fff; }
/* 사이드바 상단의 책장/그리드 전환·닫기 버튼도 불투명 배경 대신 유리 재질로 */
.rb-sidebar-top .rb-nav-icon-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.rb-more-wrap { position: relative; }
.rb-more-menu { position: absolute; right: 0; top: 42px; background: var(--rb-card); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); min-width: 130px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.rb-more-menu.open { display: flex; }
.rb-more-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--rb-text); text-decoration: none; font-size: 13px; }
.rb-more-menu a:hover { background: rgba(255,255,255,0.06); }

/* ── 서브 이미지 캐러셀 (상세보기, 문구 위쪽) — 클릭하면 라이트박스가 뜬다 ── */
/* 문구와 같은 본문 읽기 폭(.rb-view-inner, 760px) 안에 그대로 둔다 — 화면 전체
   폭으로 빠지면 아래 문구 컬럼과 좌우로 어긋나 보인다.
   .rb-gallery 자체를 좌우로 24px씩 넓혀서(음수 마진) 화살표가 놓일 자리까지
   포함한 영역이 "마우스오버 대상"이 되게 한다 — 화살표만 박스 밖(절대좌표)에
   따로 떠 있으면, 카드 위에서 화살표로 마우스를 옮기는 순간 두 영역 사이의
   빈 틈에서 :hover가 끊겨 화살표가 사라지는 문제가 생긴다. 대신 .rb-gallery-row
   에는 반대 방향(+24px) 마진을 줘서 카드가 보이는 실제 폭은 그대로 유지한다. */
.rb-gallery { position: relative; margin-left: -24px; margin-right: -24px; margin-bottom: 22px; }
/* 화살표로만 넘기고 스크롤바는 안 보이게 한다(스크롤 자체는 그대로 살아있어서
   화살표 클릭 시 scrollBy가 정상 동작하고, 트랙패드/터치 스와이프도 여전히 된다). */
.rb-gallery-row { display: flex; gap: 14px; overflow-x: auto; margin: 0 24px; padding: 2px 2px 4px; scrollbar-width: none; -ms-overflow-style: none; }
.rb-gallery-row::-webkit-scrollbar { display: none; }
.rb-gallery-item { flex: none; width: 168px; cursor: pointer; }
.rb-gallery-frame { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--rb-radius); overflow: hidden; background: var(--rb-card); border: 1px solid var(--rb-border); display: flex; align-items: center; justify-content: center; color: var(--rb-sub2); font-size: 22px; }
.rb-gallery-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 34px 8px 6px; font-size: 13.5px; font-weight: bold; color: #fff !important; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  /* backdrop-filter는 박스 모양 그대로 뚝 잘려서 적용되기 때문에 위쪽 경계선이
     또렷하게 보인다 — mask-image로 위쪽을 서서히 투명하게 지워서 블러 자체가
     자연스럽게 옅어지며 사라지도록 한다(그라데이션 배경도 같이 마스킹됨). */
  -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
}
/* 캐러셀에 마우스를 올렸을 때만 좌우 화살표가 나타나고, 맨 처음/맨 끝에서는
   갈 수 없는 방향의 화살표를 숨긴다(JS의 rbGalleryUpdateArrows가 is-visible을 토글).
   화살표는 이미지 위에 겹치지 않도록 행(row) 양옆에 여백을 두고 그 여백 안에만
   놓이며, 배경/테두리 없이 화살표 아이콘만 보이는 단순한 모양이다. */
.rb-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 20px; height: 36px; padding: 0;
  background: none !important; border: none; color: var(--rb-text) !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.rb-gallery:hover .rb-gallery-arrow.is-visible { opacity: 1; pointer-events: auto; }
.rb-gallery-arrow-prev { left: 0; }
.rb-gallery-arrow-next { right: 0; }

/* ── 서브 이미지 라이트박스 (화살표·점으로 넘기는 전체화면 슬라이더) ── */
.rb-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); opacity: 0; pointer-events: none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
}
.rb-lightbox.is-open { opacity: 1; pointer-events: auto; }
.rb-lightbox-stage { position: relative; width: 100%; height: 100%; }
.rb-lightbox-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; transform: scale(.96); pointer-events: none; padding: 64px 72px;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.rb-lightbox-slide.is-active { opacity: 1; transform: scale(1); }
/* 라이트박스가 닫혀 있을 때도 첫 번째 슬라이드는 항상 is-active 클래스를 갖고 있으므로,
   pointer-events:auto를 무조건 주면 라이트박스를 연 적이 없어도 화면 중앙 큰 영역이
   투명하게 클릭을 가로챈다 — 반드시 .is-open일 때만 클릭 가능하게 범위를 좁힌다. */
.rb-lightbox.is-open .rb-lightbox-slide.is-active { pointer-events: auto; }
.rb-lightbox-slide img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; }
.rb-lightbox-caption { color: #fff; font-size: 14px; text-align: center; }
/* 캐러셀 화살표와 같은 모양(배경/테두리 없는 단순한 화살표)으로 통일 */
.rb-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 48px; padding: 0;
  background: none !important; border: none; color: #fff !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px;
}
.rb-lightbox-prev { left: 16px; }
.rb-lightbox-next { right: 16px; }
.rb-lightbox-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; }
.rb-lightbox-dot { width: 7px; height: 7px; border-radius: 4px; padding: 0; border: none; background: rgba(255,255,255,.4) !important; cursor: pointer; transition: width .2s ease; }
.rb-lightbox-dot.is-active { width: 18px; background: #fff !important; }

/* ── 상세보기 본문 (문구) ── */
.rb-quote-list { margin-top: 6px; display: flex; flex-direction: column; }
.rb-quote { padding: 12px 0; border-bottom: 1px solid var(--rb-border); }
.rb-quote:last-child { border-bottom: none; }
.rb-quote-text { font-family: 'KoPubWorldBatang'; font-size: 14.5px; line-height: 1.6; color: var(--rb-text); white-space: pre-line; }
.rb-quote-comment { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--rb-sub); }
.rb-quote-comment i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--rb-form-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--rb-sub2); }
.rb-view-empty-quote { font-size: 13px; color: var(--rb-sub2); padding: 10px 0; }

.rb-view-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.rb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--rb-radius); background: var(--rb-btn-bg); color: var(--rb-btn-text); text-decoration: none; font-size: 13px; border: 1px solid var(--rb-border); }
.rb-btn:hover { color: var(--rb-text) !important; border-color: var(--rb-accent) !important; }

/* ── 글쓰기 폼 ── */
.rb-write-section { padding: 18px 0; border-bottom: 1px solid var(--rb-border); }
.rb-write-section:last-of-type { border-bottom: none; }
.rb-write-section-title { display: flex; align-items: center; gap: 8px; font-family: var(--rb-title-font); font-size: 14px; font-weight: 600; color: var(--rb-sub); margin-bottom: 14px; }
.rb-write-section-title i { color: var(--rb-accent) !important; }

.rb-field { margin-bottom: 16px; }
.rb-field:last-child { margin-bottom: 0; }
.rb-label { display: block; font-size: 13px; font-weight: 600; color: var(--rb-sub); margin-bottom: 8px; }
.rb-label-hint { font-weight: 400; color: var(--rb-sub2); }
.rb-input, .rb-textarea, .rb-select {
  width: 100%; background: var(--rb-form-bg); border: 1px solid var(--rb-form-border); border-radius: var(--rb-radius);
  padding: 11px 12px; font-size: 14px; color: var(--rb-text); font-family: inherit;
}
.rb-input::placeholder, .rb-textarea::placeholder { color: var(--rb-sub2); }
.rb-textarea { min-height: 70px; resize: vertical; line-height: 1.6; }
.rb-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a5a5a5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* 메인 이미지 미리보기(글쓰기) */
.rb-hero-preview {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--rb-radius); overflow: hidden; margin-bottom: 12px;
  background: var(--rb-form-bg) center/cover no-repeat; border: 1px solid var(--rb-form-border); display: flex; align-items: center; justify-content: center;
}
.rb-hero-preview #rb-hero-preview-icon, .rb-hero-preview .fa-book { font-size: 34px; color: var(--rb-sub2); }
.rb-hero-preview-quote {
  position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--rb-title-font); font-size: 15px; font-weight: 600; color: #fff; line-height: 1.5;
  background: rgba(0,0,0,.35); border-radius: calc(var(--rb-radius) - 2px); padding: 10px;
}

/* 목록 표지 사진 선택기(목록 전용, 작은 썸네일) */
.rb-cover-picker-row { display: flex; gap: 14px; align-items: flex-start; }
.rb-cover-picker {
  position: relative; flex: none; width: 100px; aspect-ratio: 2/3; border-radius: var(--rb-radius); overflow: hidden; cursor: pointer;
  background: var(--rb-form-bg) center/cover no-repeat; border: 1px solid var(--rb-form-border); display: flex; align-items: center; justify-content: center;
}
.rb-cover-photo-icon { font-size: 24px; color: var(--rb-sub2); pointer-events: none; }
.rb-cover-upload-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(0,0,0,.6) !important; color: #fff !important; width: 24px; height: 24px; border-radius: 50%; font-size: 10px;
}
.rb-cover-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rb-cover-picker-side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rb-upload-existing { font-size: 12.5px; color: var(--rb-sub2); }

/* 서브 이미지 편집 리스트(글쓰기) — 드래그로 순서 변경 + 위/아래/삭제 버튼 */
.rb-gallery-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rb-gallery-edit-item { display: flex; align-items: center; gap: 10px; background: var(--rb-form-bg); border: 1px solid var(--rb-form-border); border-radius: var(--rb-radius); padding: 8px; }
.rb-gallery-drag-handle { flex: none; width: 20px; text-align: center; color: var(--rb-sub2); cursor: grab; font-size: 13px; touch-action: none; }
.rb-gallery-edit-preview { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--rb-card); border: 1px solid var(--rb-border); }
.rb-gallery-edit-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-gallery-edit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-gallery-edit-fields .rb-input { padding: 7px 10px; font-size: 13px; }
.rb-gallery-edit-actions { flex: none; display: flex; flex-direction: column; gap: 2px; }
.rb-gallery-edit-actions button {
  width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--rb-sub2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; padding: 0;
}
.rb-gallery-edit-actions button:hover { background: rgba(255,255,255,0.08); color: var(--rb-text) !important; }

/* 인상 깊은 문구 입력(문구별 입력칸 + 짧은 코멘트 + 추가/삭제) — 다른 rb-input과 같은 박스 스타일 */
.rb-quote-items { display: flex; flex-direction: column; gap: 10px; }
.rb-quote-item { display: flex; align-items: flex-start; gap: 8px; }
.rb-quote-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-quote-item-input, .rb-quote-comment-input {
  width: 100%; background: var(--rb-form-bg); border: 1px solid var(--rb-form-border); border-radius: var(--rb-radius);
  padding: 11px 12px; font-family: inherit; color: var(--rb-text);
}
.rb-quote-item-input { resize: none; overflow: hidden; font-family: var(--rb-title-font); font-size: 14.5px; line-height: 1.6; min-height: 1.6em; }
.rb-quote-comment-input { font-size: 12.5px; color: var(--rb-sub); }
.rb-quote-item-input::placeholder, .rb-quote-comment-input::placeholder { color: var(--rb-sub2); }
.rb-quote-remove-btn {
  flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; border: none; background: transparent;
  color: var(--rb-sub2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; padding: 0;
}
.rb-quote-remove-btn:hover { background: rgba(255,255,255,0.08); color: var(--rb-text) !important; }
.rb-quote-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px 12px;
  border-radius: var(--rb-radius); border: 1px dashed var(--rb-form-border); background: transparent; color: var(--rb-sub); font-size: 13px; cursor: pointer;
}
.rb-quote-add-btn:hover { border-color: var(--rb-accent) !important; color: var(--rb-accent) !important; }
.rb-quotes-hidden { display: none; }

.rb-checkbox-option { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rb-text); cursor: pointer; }
.rb-checkbox-option input { width: 16px; height: 16px; accent-color: var(--rb-accent) !important; }
.rb-checkbox-option i { color: var(--rb-accent) !important; }

.rb-write-actions { display: flex; gap: 10px; margin-top: 24px; }
.rb-btn-write { flex: 1; padding: 13px; border-radius: var(--rb-radius); border: none; background: var(--rb-accent) !important; color: #06210f !important; font-size: 15px; font-weight: 700; cursor: pointer; }
.rb-btn-write:hover { opacity: .92; }

/* ── 반응형 ── */
@media (max-width: 640px) {
  .rb-view-hero-info { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rb-view-hero-info-main { max-width: 100%; }
  .rb-view-hero-review { max-width: 100%; text-align: left; }
  .rb-intro-info { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rb-intro-info-main { max-width: 100%; }
  .rb-intro-review { max-width: 100%; text-align: left; }
}
@media (max-width: 520px) {
  .rb-cover-card { width: 124px; }
  .rb-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .rb-gallery-item { width: 140px; }
}