/*
 * 문로사 「심야 서재」 — DESIGN.md가 기준
 * 따뜻한 먹색 #120E0F · 종이 #EDE3D2 · 말린 장미 #C97284
 * 호박금 #B99A62(재화) · 와인 #7E2D3C(감정 전용)
 */

/* ============================================
   Typography - 소설 읽기 최적화 (종이책 조판)
   ============================================ */
.story-text {
  font-family: 'MaruBuri', 'Gowun Batang', serif;
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: #EDE3D2;
  /* 이북처럼 한 줄 폭을 제한해 읽기 편하게. 모바일은 화면이 더 좁아 영향 없음 */
  max-width: 40rem;
  margin-inline: auto;
}

/* 회차 집중 — 현재 회차는 또렷하게, 지난 회차는 은은하게 물러난다 (다시 읽어도 무리 없는 정도) */
.story-card { transition: opacity 0.5s ease; }
.story-card.is-past { opacity: 0.72; }
.story-card.is-past:hover { opacity: 1; }

/* 힐링 장르 본문 대체 서체 */
.story-text-healing {
  font-family: 'Gowun Batang', 'MaruBuri', serif;
}

/* ============================================
   독자 폰트 설정 — playing 화면 컨테이너에 클래스 부여
   서체: 마루부리(기본) ↔ 고운바탕 / 크기: 15·17(기본)·19px
   ============================================ */
.reader-font-gowun .story-text,
.reader-font-gowun .choice-typeset {
  font-family: 'Gowun Batang', 'MaruBuri', serif;
}
.reader-size-sm .story-text { font-size: 15px; }
.reader-size-lg .story-text { font-size: 19px; }
.reader-size-sm .choice-typeset { font-size: 15px; }
.reader-size-lg .choice-typeset { font-size: 19px; }
/* 줄 간격 — 기본 1.95 (.story-text) */
.reader-lh-tight .story-text { line-height: 1.7; }
.reader-lh-loose .story-text { line-height: 2.2; }
/* 자간 — 기본 -0.01em (.story-text) */
.reader-ls-tight .story-text { letter-spacing: -0.03em; }
.reader-ls-loose .story-text { letter-spacing: 0.02em; }

/* ============================================
   종이 질감 (3% grain) — body.grain에 적용
   ============================================ */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ============================================
   잉크 페이드 — 스트리밍 텍스트 (스피너 대체)
   ============================================ */
@keyframes inkFade {
  from { opacity: 0; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}
.ink-fade { animation: inkFade 0.3s ease-out both; }

/* ============================================
   아래에 글이 더 있다는 표시 — 아이콘 없이 지면으로 알린다 (DESIGN.md)
   (1) 하단 잉크 페이드: 하단 패널 바로 위에서 글자가 배경으로 옅어짐
   (2) 진행 괘선: 우측 여백의 1px 세로선이 읽은 만큼 차오름
   ============================================ */
.read-fade {
  position: fixed;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
  z-index: 19; /* 하단 패널(z-20) 바로 아래 */
  background: linear-gradient(to top, #120E0F 30%, rgba(18, 14, 15, 0));
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.read-fade.is-visible { opacity: 1; }

.read-rail {
  position: fixed;
  top: 92px;
  right: 6px;
  width: 1px;
  pointer-events: none;
  z-index: 19;
  background: #2A211B; /* 괘선 */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.read-rail.is-visible { opacity: 1; }
.read-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #8C7F70; /* 재 */
  transition: height 0.15s linear;
}

@media (min-width: 768px) {
  .read-rail { right: 12px; }
}

/* 아래 방향 셰브런 — 지면 하단 가운데. 아이콘 자체는 절제, 재색. */
.read-chevron {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 20;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EDE3D2; /* 종이색 — 어두운 배경 위에서 또렷하게 */
  /* 먹색 원형 배경으로 본문 글자와 겹쳐도 보이게 (기능 인디케이터라 최소 장식) */
  background: rgba(12, 10, 9, 0.82);
  border: 1px solid #2A211B;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.read-chevron svg { width: 22px; height: 22px; }
.read-chevron.is-visible {
  opacity: 0.75;
  pointer-events: auto;
  animation: chevronNudge 1.8s ease-in-out infinite;
}
.read-chevron:hover { color: #C97284; opacity: 1; border-color: #C97284; }

/* 스피너가 아니라 살짝 위아래로 넌지시 움직이는 정도 (DESIGN.md 절제형 모션) */
@keyframes chevronNudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .read-chevron.is-visible { animation: none; }
}

/* ============================================
   회차 헤딩 (장표지 축소형) — 스토리 카드 상단
   ============================================ */
.chapter-head {
  font-family: 'Hahmlet', serif;
  font-weight: 200;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #8C7F70;
}

/* ============================================
   활자 선택지 — 버튼이 아니라 본문 여백의 문장
   ============================================ */
.choice-typeset {
  display: block;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 44px;
  text-align: left;
  font-family: 'MaruBuri', 'Gowun Batang', serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: #EDE3D2;
  background: none;
  border: none;
  border-bottom: 1px solid #C97284;
  border-radius: 0;
  padding: 0 0 3px;
  margin-left: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.choice-typeset:hover, .choice-typeset:active { color: #C97284; }
.choice-typeset:disabled { opacity: 0.4; cursor: default; }

.choices-lead {
  font-family: 'Pretendard', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #8C7F70;
}

.story-write-action {
  color: #8C7F70;
  background: none;
  border: none;
  min-height: 44px;
}
.story-write-action:hover, .story-write-action:focus-visible { color: #C97284; }
.story-write-action:disabled { opacity: 0.4; cursor: default; }

/* 입력 모드는 선택지·도구와 공간을 나눠 쓰지 않는다. */
[data-novel-target="bottomPanel"]:has([data-novel-target="inputArea"]:not(.hidden)) :is(.story-choices, [data-novel-target="mainButtonsContainer"], [data-novel-target="rpgBar"], [data-novel-target="skillBar"]) {
  display: none;
}
.playing-menu-secondary { display: none; }
@media (max-width: 639px) {
  .playing-header-secondary { display: none; }
  .playing-menu-secondary { display: block; }
  .playing-header-info { flex-direction: column; align-items: flex-start; gap: 2px; }
  .playing-header-info > span { max-width: 100%; }
  .playing-header-info > .text-zinc-700 { display: none; }
  [data-novel-target="playingHeader"] { gap: 8px; }
  [data-novel-target="playingHeader"] button { min-height: 44px; min-width: 36px; }
  [data-novel-target="playingHeader"] [data-novel-target="currentAiModel"] { min-height: 28px; }
}

/* 감정 전용 와인 라인 — 친밀도 상승 순간에만 */
.stat-moment {
  padding: 8px 0;
  border-top: 1px solid #2A211B;
  border-bottom: 1px solid #2A211B;
  color: #A64D5F;
  font-family: 'Hahmlet', serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-align: center;
}

/* ============================================
   Scrollbar - 로맨스 테마
   ============================================ */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 114, 132, 0.25);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 114, 132, 0.45);
}

/* ============================================
   Heart Gauge Animation
   ============================================ */
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes heartFill {
  from { width: 0%; }
  to { width: var(--fill-pct); }
}

.heart-gauge-fill {
  transition: width 0.7s ease-out;
  /* 친밀도 게이지: 말린 장미 → 와인. 감정 수치는 와인 계열이 담당 */
  background: linear-gradient(90deg, #C97284, #7E2D3C);
}

@keyframes heartShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================
   Stat Change Popup
   ============================================ */
@keyframes statPopupBottom {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(-16px); }
  100% { opacity: 0; transform: translateY(-24px); }
}

/* ============================================
   Phase Transition Effect
   ============================================ */
@keyframes phaseGlow {
  0% { box-shadow: 0 0 5px rgba(126, 45, 60, 0.35); }
  50% { box-shadow: 0 0 18px rgba(126, 45, 60, 0.55); }
  100% { box-shadow: 0 0 5px rgba(126, 45, 60, 0.35); }
}

@keyframes phaseFlash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes phaseBounce {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.95); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ============================================
   Story Card Animations
   ============================================ */
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Scene Info Card
   ============================================ */
@keyframes sceneInfoFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Stat Bar Glow
   ============================================ */
@keyframes statGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes achievementSlideIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes achievementSlideOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes criticalGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(185,154,98,0.25); }
  50% { box-shadow: 0 0 12px rgba(185,154,98,0.45); }
}

/* ============================================
   Loading Indicator
   ============================================ */
@keyframes gentlePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loading-dots span {
  animation: gentlePulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ============================================
   Genre Card Hover Effects
   ============================================ */
.genre-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.genre-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Mood Gradient Overlays
   ============================================ */
.mood-romantic {
  background: linear-gradient(180deg, transparent 0%, rgba(201, 114, 132, 0.04) 100%);
}
.mood-tense {
  background: linear-gradient(180deg, transparent 0%, rgba(176, 85, 63, 0.04) 100%);
}
.mood-healing {
  background: linear-gradient(180deg, transparent 0%, rgba(185, 154, 98, 0.04) 100%);
}
.mood-mysterious {
  background: linear-gradient(180deg, transparent 0%, rgba(138, 95, 112, 0.04) 100%);
}

/* ============================================
   Safe Area (Mobile Notch)
   ============================================ */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 기본 여백 16px + 노치 인셋. p-4와 pb-safe를 같이 쓰면 padding-bottom이 충돌하므로 이 클래스 사용 */
.pb-safe-4 {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ============================================
   상세 화면 CTA — 모바일 하단 고정 / 데스크톱 본문 인라인
   DOM은 하나(Stimulus 타깃 중복 방지), 위치만 화면 폭에 따라 바뀐다.
   ============================================ */
.detail-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #120E0F 72%, rgba(18, 14, 15, 0));
  backdrop-filter: blur(6px);
}
.detail-cta-inner {
  max-width: 32rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .detail-cta {
    position: static;
    padding: 0;
    margin-top: 1.75rem;
    background: none;
    backdrop-filter: none;
  }
  .detail-cta-inner { max-width: none; }
}

/* 데스크톱 히어로 높이 제한 — 커버 + CTA가 한 화면에 같이 들어와야 함 */
@media (min-width: 768px) {
  [data-novel-target="detailHero"] img { max-height: 56vh; object-fit: cover; }
  [data-novel-target="detailHero"] > button { top: 0.75rem !important; }
}

/* ============================================
   Input Range - Rose Accent
   ============================================ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #2A211B;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #C97284;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(201, 114, 132, 0.4);
}

/* ============================================
   Toggle Switch - Rose
   ============================================ */
.peer:checked ~ .peer-bg {
  background-color: #7E2D3C;
}

/* ============================================
   Scrollbar Hide (Filter Tabs)
   ============================================ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* A quiet, finite cue when exploring special items. */
.moon-item-icon { display: inline-block; }
@keyframes moon-item-glimmer {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: .6; filter: drop-shadow(0 0 5px rgba(185, 154, 98, .35)); }
}
@media (prefers-reduced-motion: no-preference) {
  .moon-item-toggle:focus-visible .moon-item-icon,
  .moon-item-toggle[aria-expanded="true"] .moon-item-icon {
    animation: moon-item-glimmer 2.8s ease-in-out 2;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .moon-item-toggle:hover .moon-item-icon {
    animation: moon-item-glimmer 2.8s ease-in-out 2;
  }
}

/* ============================================
   Image Skeleton Loading
   ============================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================
   Desktop Sidebar - 고정형 (lg+)
   ============================================ */
@media (min-width: 1024px) {
  #sidebar {
    display: flex !important;
    flex-direction: column;
    transform: translateX(0) !important;
  }
  #sidebar-overlay {
    display: none !important;
  }
  /*
   * 사이드바가 실제로 렌더링될 때만(로그인 상태) 본문·고정바를 밀어낸다.
   * 무조건 밀면 로그아웃 화면에 256px 빈 공간이 남고,
   * 화면 전체 기준으로 가운데 정렬되는 고정 바가 본문 열과 어긋난다.
   */
  body:has(#sidebar) #topbar,
  body:has(#sidebar) .app-fixed-x {
    left: 16rem;
  }
  body:has(#sidebar) main {
    margin-left: 16rem;
  }
}

/* Catalogue: touch shelves below 1024px, a wider desktop library above it. */
.library-home { max-width: 760px; padding-inline: 12px; }
.library-hero-frame { aspect-ratio: 1 / 1; max-height: 520px; }
.library-hero-copy { text-align: left; padding: 24px; }
.library-hero-cta { display: inline-flex; gap: 24px; margin-top: 16px; color: #EDE3D2; font-size: 13px; border-bottom: 1px solid #C97284; padding-bottom: 5px; }
.library-shelf { display: flex; gap: 12px; overflow-x: auto; margin-inline: -12px; padding: 4px 12px 12px; scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
.library-book { flex: 0 0 clamp(124px, 33vw, 180px); min-width: 0; scroll-snap-align: start; }
.library-book h4 { min-height: 2.7em; }
.library-section-heading { flex-wrap: wrap; gap: 8px; }
.library-genre-layout { min-width: 0; }
.library-genre-feature { display: block; width: 100%; margin-bottom: 12px; }
.library-feature-frame { aspect-ratio: 1 / 1; }
.library-feature-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.library-home button:focus-visible { outline: 2px solid #C97284; outline-offset: 3px; }
@media (min-width: 1024px) {
  .library-home { max-width: 1200px; padding-inline: 32px; }
  .library-hero-frame { aspect-ratio: 5 / 2; max-height: 420px; }
  .library-hero-copy { padding: 32px; max-width: 75%; }
  .library-discovery-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; margin: 0; padding: 4px 0 12px; }
  .library-genre-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
  .library-genre-feature { margin: 0; }
  .library-feature-frame { aspect-ratio: 3 / 4; }
  .library-genre-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1440px) {
  .library-discovery-shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .library-genre-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.menu-scroll-row { align-items: center; gap: 4px; padding: 0 8px 4px; }
.menu-scroll-row:not(.hidden) { display: flex; }
.menu-scroll-viewport { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; }
.menu-scroll-viewport > button { min-height: 40px; white-space: nowrap; }
.menu-scroll-arrow { flex: 0 0 36px; height: 40px; color: #EDE3D2; font: 26px/1 sans-serif; }
.menu-scroll-arrow:disabled { opacity: .2; cursor: default; }
.menu-scroll-arrow:focus-visible { outline: 1px solid #C97284; outline-offset: -2px; }
@media (min-width: 1024px) {
  .menu-scroll-row { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
}
.library-home > .pt-20 { padding-top: 100px; }
body:has(#genre-subtabs:not(.hidden)) .library-home > .pt-20 { padding-top: 144px; }
.menu-tag-label { align-self: center; flex-shrink: 0; padding-inline: 12px 4px; color: #8C7F70; font-size: 11px; }
.menu-scroll-viewport { cursor: grab; user-select: none; }
.menu-scroll-viewport.is-dragging, .menu-scroll-viewport.is-dragging > button { cursor: grabbing; }
.library-home .story-card.hidden { display: none; }
@media (min-width: 1024px) {
  .library-genre-layout:has(> .library-genre-feature.hidden) { grid-template-columns: minmax(0, 1fr); }
}

.external-browser-prompt { position: fixed; z-index: 90; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; right: 16px; max-width: 440px; margin-inline: auto; padding: 20px; background: #1D1715; border: 1px solid #5B4243; border-radius: 12px; color: #EDE3D2; font-family: 'Pretendard', sans-serif; box-shadow: 0 8px 32px #0006; }
.external-browser-prompt[hidden] { display: none; }
.external-browser-title { font-size: 15px; padding-right: 24px; }
.external-browser-description, .external-browser-help { margin-top: 8px; font-size: 12px; line-height: 1.7; color: #BDAF9F; }
.external-browser-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; align-items: center; font-size: 13px; }
.external-browser-actions a { padding: 12px 16px; background: #7E2D3C; border-radius: 6px; cursor: pointer; }
.external-browser-actions button { padding: 12px 4px; }
.external-browser-dismiss { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; font-size: 22px; }
.external-browser-link { width: 100%; margin-top: 8px; padding: 8px; font-size: 12px; background: #120E0F; }
.external-browser-prompt :focus-visible { outline: 2px solid #C97284; outline-offset: 2px; }

.site-header-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 8px 16px; min-height: 56px; }
.site-brand { justify-self: center; font-family: 'Hahmlet', serif; font-size: 19px; color: #EDE3D2; white-space: nowrap; }
.site-mobile-menu, .site-mobile-search { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; font-size: 16px; }
.site-desktop-nav, .site-account-actions, .site-search { display: none; }
.site-search { align-items: center; border: 1px solid #3C302A; border-radius: 8px; background: #171210; min-width: 0; }
.site-search input { width: 100%; min-width: 0; padding: 10px 12px; background: transparent; font: 13px 'Pretendard', sans-serif; }
.site-search button { padding: 10px; }
.site-header-row.search-open .site-search { display: flex; grid-row: 2; grid-column: 1 / -1; }
.site-credit-link { color: #B99A62; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sidebar-library-link { display: block; padding: 12px; font-size: 14px; color: #EDE3D2; }
#sidebar { overflow-y: auto; }
.sidebar-library { padding: 16px 24px; border-top: 1px solid #2A211B; }
.sidebar-library h2 { font-size: 12px; color: #8C7F70; margin-bottom: 12px; }
.sidebar-saved-story { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; border-bottom: 1px solid #2A211B; }
.sidebar-saved-story strong { font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-saved-story span { font-size: 11px; color: #8C7F70; }
.sidebar-footer { position: static; margin-top: auto; }
.catalog-search-status { padding: 20px 0; color: #EDE3D2; font-size: 15px; }
body:has(.site-header-row.search-open) .library-home > .pt-20 { padding-top: 160px; }
body:has(.site-header-row.search-open):has(#genre-subtabs:not(.hidden)) .library-home > .pt-20 { padding-top: 204px; }
@media (min-width: 1024px) {
  .site-header-row { display: flex; gap: 20px; padding: 12px 24px; min-height: 64px; }
  .site-mobile-menu, .site-mobile-search { display: none; }
  .site-desktop-nav { display: flex; gap: 16px; font-size: 13px; white-space: nowrap; }
  .site-account-actions { display: flex; gap: 16px; align-items: center; margin-left: auto; font-size: 13px; white-space: nowrap; }
  .site-search { display: flex; flex: 1; max-width: 360px; margin-left: auto; }
  .site-header-row.search-open .site-search { display: flex; }
  .library-home > .pt-20 { padding-top: 120px; }
  body:has(#genre-subtabs:not(.hidden)) .library-home > .pt-20 { padding-top: 164px; }
  #sidebar { flex-direction: column; }
}
@media (min-width: 1024px) {
  #sidebar { translate: 0 0 !important; }
}