/* shelf.css — 디지털 서재 v3, 모듈 A (서가 뷰)
   밝은 갤러리 벽(--wall) 위의 목재 선반. 모든 슬롯이 균일 높이(--spine-slot-h)라
   flex 행의 피치가 일정하고, 선반 보드는 그 피치에 정확히 맞춘
   repeating-linear-gradient로 행마다 전폭으로 그려진다.
   색/시간/이징은 tokens.css 변수만 사용, 애니메이션은 transform/opacity만. */

.v3-shelf {
  --spine-slot-h: 212px; /* 최대 책 높이(208px)보다 약간 큰 균일 슬롯 */
  --board-h: 9px;        /* 선반 보드 두께 */
  --shelf-gap: 46px;     /* 보드 아래 ~ 다음 단 책 위 여백 */
  background: var(--wall);
  padding: 72px 48px 96px;
}

/* 행 컨테이너: flex-wrap이 단을 만들고, 배경 그라디언트가 보드를 그린다.
   행 피치 = slot-h + row-gap = 그라디언트 주기 → 보드가 항상 책 발밑에 온다. */
.v3-shelf__rows {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 4px;
  row-gap: calc(var(--board-h) + var(--shelf-gap));
  padding-bottom: calc(var(--board-h) + 14px); /* 마지막 단 보드 + 그림자 자리 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--spine-slot-h),
    var(--board) var(--spine-slot-h),
    var(--board) calc(var(--spine-slot-h) + var(--board-h) - 2px),
    var(--board-shade) calc(var(--spine-slot-h) + var(--board-h) - 2px),
    var(--board-shade) calc(var(--spine-slot-h) + var(--board-h)),
    color-mix(in srgb, var(--board-shade) 28%, transparent) calc(var(--spine-slot-h) + var(--board-h)),
    transparent calc(var(--spine-slot-h) + var(--board-h) + 10px),
    transparent calc(var(--spine-slot-h) + var(--board-h) + var(--shelf-gap))
  );
}

/* 균일 높이 슬롯 — 책은 슬롯 바닥(= 보드 윗면)에 선다. */
.v3-shelf__slot {
  height: var(--spine-slot-h);
  display: flex;
  align-items: flex-end;
}

/* 책등 공통 */
.spine {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  touch-action: pan-y; /* 세로 = 서가 스크롤, 가로 = 책 뽑기 */
  -webkit-tap-highlight-color: transparent;
  border-radius: 2px 2px 0 0;
  box-shadow: var(--shadow-spine);
  font-family: var(--font-ui);
  user-select: none;
  transition:
    transform var(--dur-hover) var(--ease-settle),
    box-shadow var(--dur-hover) var(--ease-settle);
}

.spine:hover,
.spine:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-leaf);
}

.spine:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* 1순위: 실제 알라딘 책등 이미지 (폭이 이미 실측 비율로 계산됨 → 꽉 채움) */
.spine--image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: var(--page-cream); /* 로딩 전/실패 시 바탕 */
}

/* 2순위: 생성 책등 — 세로쓰기 제목(위) / 저자(아래) 스택 */
.spine--gen {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  overflow: hidden;
  background-color: var(--paper);
  color: var(--ink);
  /* 은은한 원기둥 라이팅 — 토큰 색만 섞어서 사용 */
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--paper) 26%, transparent),
    transparent 38%,
    color-mix(in srgb, var(--ink) 12%, transparent)
  );
}

.spine__title,
.spine__author {
  display: block;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spine__title {
  flex: 0 1 auto;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.spine__author {
  flex: 0 1 auto;
  max-height: 34%;
  font-size: 9px;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

/* 폭 20px 미만이면 저자 생략 (JS에서 클래스 부여) */
.spine--thin .spine__author {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .spine {
    transition: none;
  }
  .spine:hover,
  .spine:focus-visible {
    transform: none;
  }
}

/* ---------- 라이브: 자리 비움 · 거절 ---------- */

/* 누군가(원격 또는 나) 들고 나간 책 — 자리는 남고 존재감만 빠진다 */
.spine.is-away {
  opacity: 0.22;
  filter: grayscale(0.45);
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform var(--dur-hover) var(--ease-settle);
}

/* 남이 든 책을 잡으려 하면 — 고개 젓듯 짧은 쉐이크 */
.spine.is-refused {
  animation: spineRefuse 320ms ease;
}

@keyframes spineRefuse {
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .spine.is-refused {
    animation: none;
  }
}

/* ---------- 재배열: 롱프레스로 들린 책 ---------- */

.v3-shelf__slot.is-lifting {
  position: relative;
  z-index: 6;
}

.v3-shelf__slot.is-lifting .spine {
  cursor: grabbing;
  transition: none; /* 손을 따라다니는 동안 잔상 금지 — transform은 JS 인라인 */
  box-shadow:
    0 16px 30px rgba(40, 30, 18, 0.3),
    var(--shadow-spine);
}

/* ---------- ambient: 자율 배경 무대 (tvOS 등, 로컬 인터랙션 없음) ---------- */

.v3-shelf--ambient .spine {
  cursor: default;
  pointer-events: none; /* 방어적 — 리스너 자체를 안 붙이지만 이중 안전장치 */
}

.v3-shelf--ambient .spine:hover,
.v3-shelf--ambient .spine:focus-visible {
  transform: none;
  box-shadow: var(--shadow-spine);
  outline: none;
}

/* 폭 12px 미만 초박형 — 텍스트 없이 색·두께만 (레거시 v2.1의 문고본 감각) */
.spine--hairline .spine__title {
  display: none;
}

/* ---------- 정면 배치(is-face): 표지가 서가를 향한다 ---------- */
/* 들었다(롱프레스) 제자리에 놓으면 책등 ↔ 정면 토글. 폭은 커버 실측 비율. */

.spine.is-face {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: var(--page-cream);
}

.spine.is-face .spine__title,
.spine.is-face .spine__author {
  display: none;
}