/* ─── tokens ─────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #8a8a8a;
  --line: #ececec;
  --accent: #ff4d00;
  --display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 4px;
  --maxw: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ─── topbar ─────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 28px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nav { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--ink-soft); }
.nav a { transition: color .15s; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav .nav-icon { display: inline-flex; align-items: center; line-height: 0; }
.nav .nav-icon svg { display: block; }

/* ─── filters ────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 32px 8px;
  max-width: var(--maxw);
  margin: 0 auto 24px;
  font-size: 14px;
}
.chip {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 0;
  font: inherit;
  font-size: 14px;
  transition: color .15s;
}
.chip:hover { color: var(--ink); }
.chip.active { color: var(--accent); font-weight: 600; }

/* ─── shelf (web ≥ 768) ──────────────────────────── */
.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px;
  min-height: 60vh;
}
.shelf-wrap { position: relative; padding-bottom: 60px; }
.shelf {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 80px 8px 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.shelf::-webkit-scrollbar { height: 6px; }
.shelf::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.shelf-line {
  position: absolute;
  left: 8px; right: 8px; bottom: 60px;
  height: 1px;
  background: var(--ink);
  opacity: .35;
}

/* book-on-shelf */
.book {
  flex: 0 0 auto;
  width: 130px;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform .25s ease, filter .25s, opacity .25s;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
}
.book .cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.book .cover.no-img::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-family: var(--display);
  font-size: 14px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
}
.book:hover { transform: translateY(-10px); filter: drop-shadow(0 16px 18px rgba(0,0,0,.22)); }
.book.dim { opacity: .15; filter: grayscale(1); }
.book.dim:hover { transform: none; }

/* now-playing card under shelf */
.now-card {
  text-align: center;
  margin-top: 24px;
  padding: 0 16px;
  min-height: 100px;
  transition: opacity .2s;
}
.now-card .nc-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.now-card .nc-author { color: var(--ink-soft); font-size: 15px; margin-bottom: 14px; }
.now-card .nc-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.now-card .nc-link { color: var(--accent); font-size: 13px; }
.now-card .nc-link:hover { text-decoration: underline; }

/* ─── pockets (mobile < 768) ─────────────────────── */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .topbar { padding: 20px 20px; }
  .brand { font-size: 18px; }
  .filters {
    padding: 0 20px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .chip { white-space: nowrap; }

  .stage { padding: 12px 20px 40px; }
  .shelf-line { display: none; }
  .shelf {
    flex-direction: column;
    gap: 56px;
    overflow-x: visible;
    padding: 8px 0;
  }
  /* on filter, dimmed books sink to the bottom so matches bubble up */
  .shelf .book.dim { order: 1; }

  /* book = pocket scene. width here = pocket width.
     the cover inside is narrower (book is smaller than pocket). */
  .book {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    cursor: pointer;
    filter: none;
    padding-bottom: 24px;       /* room for the pocket bottom to extend below the book */
  }
  .book:hover { transform: none; }

  /* the book cover — narrower than the pocket, centered */
  .book .cover {
    width: 72%;
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,.15);
    position: relative;
    z-index: 1;
  }

  /* the frosted pocket: wider than the cover, covers the lower half + extends below */
  .book::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 48%;                   /* starts about halfway down the cover */
    bottom: 0;                  /* extends to bottom of .book (= past cover) */
    background: rgba(255,255,255,.32);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    z-index: 2;
    pointer-events: none;
  }

  /* the pocket lip — a thin highlight at the top edge of the pocket */
  .book::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 48%;
    height: 1px;
    background: rgba(255,255,255,.9);
    border-radius: 16px 16px 0 0;
    z-index: 3;
    pointer-events: none;
  }

  .book .pocket-meta {
    position: relative;
    z-index: 4;
    text-align: center;
    margin-top: 20px;
    padding: 0 12px;
  }
  .book .pm-title {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .book .pm-author { color: var(--ink-soft); font-size: 13px; }
  .book .pm-meta { color: var(--ink-soft); font-size: 12px; margin-top: 6px; }

  /* hide the desktop now-card on mobile (info already in pockets) */
  .now-card { display: none; }
}

/* on web, hide the in-book pocket meta (we use the now-card instead) */
@media (min-width: 768px) {
  .book .pocket-meta { display: none; }
}

/* ─── detail page ────────────────────────────────── */
.detail {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.back {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 40px;
  transition: color .15s;
}
.back:hover { color: var(--ink); }
.detail .d-cover {
  width: 200px;
  aspect-ratio: 2 / 3;
  margin: 0 auto 32px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  background-color: #f4f4f4;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail .d-cover.no-img::after {
  content: attr(data-title);
  font-family: var(--display);
  font-size: 16px;
  text-align: center;
  padding: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.detail .d-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.detail .d-author { text-align: center; color: var(--ink-soft); margin-bottom: 24px; }
.detail .d-divider {
  width: 40px;
  height: 1px;
  background: var(--ink);
  opacity: .35;
  margin: 0 auto 20px;
}
.detail .d-meta { text-align: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 48px; }
.detail .d-section-title {
  font-family: var(--display);
  font-style: italic;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.detail .d-summary {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 560px;
  margin: 0 auto;
  white-space: pre-line;
}
.detail .d-summary-none {
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}

/* ─── members page ───────────────────────────────── */
.members-stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.page-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 40px;
}
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.member-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 28px;
  transition: border-color .15s, box-shadow .15s;
}
.member-card:hover {
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.member-card .avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
}
.member-card .m-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.member-card .m-flag {
  font-size: 0.8em;
  margin-left: 4px;
  vertical-align: 0.05em;
}
.member-card .m-bio-line {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.member-card .m-section {
  margin-top: 20px;
}
.member-card .m-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.member-card .m-value {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.member-card .grail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}
.member-card .grail-list li {
  padding: 4px 0;
  line-height: 1.5;
}
.member-card .grail-num {
  color: var(--ink-soft);
  margin-right: 6px;
}
.member-card .grail-author {
  color: var(--ink-soft);
}

/* ─── EN/한 translation toggle chip ──────────────── */
.trans-btn {
  display: inline-block;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  margin-left: 12px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s;
}
.trans-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ─── status badges ──────────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.status-reading {
  background: var(--accent);
  color: #fff;
}
.status-upcoming {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* on shelf books — pin badge to top-right of cover */
.book .status-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 5;
}
.book { position: relative; }

/* on now-card */
.now-card .status-badge { margin-bottom: 12px; }

/* on detail page */
.d-badge-wrap {
  text-align: center;
  margin-bottom: 16px;
  min-height: 22px;
}

/* ─── footer ─────────────────────────────────────── */
.foot {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 40px 20px 24px;
}