/* 도서관 바구니 — 공통 스타일
   서체: 고운바탕(제목) + IBM Plex Sans KR(본문)
   모서리: 카드 14px / 버튼·칩 999px  (이 두 값 외에는 쓰지 않는다)
   포인트색: 주황 하나. 페이지 전체에서 이 색만 쓴다 */

:root{
  --paper:#FDFCFA;
  --card:#FFFFFF;
  --ink:#17171C;
  --body:#45454F;
  --muted:#78777F;
  --line:#E8E5DF;
  --wash:#F6F4F0;
  --accent:#C2410C;
  --accent-soft:#FDF3EC;
  --shadow:0 1px 2px rgba(60,50,40,.04), 0 8px 24px rgba(60,50,40,.06);
  --r-card:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141418;
    --card:#1D1D22;
    --ink:#F3F2EF;
    --body:#C5C4BF;
    --muted:#8C8B86;
    --line:#2E2E36;
    --wash:#1A1A1F;
    --accent:#FB923C;
    --accent-soft:#2A1A11;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--body);
  font-family:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}
b,strong{font-weight:600;color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}

/* ── 상단 메뉴 ── */
.nav{
  height:64px;display:flex;align-items:center;gap:28px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
}
.nav .brand{
  font-family:'Gowun Batang',serif;font-weight:700;color:var(--ink);
  font-size:17px;text-decoration:none;margin-right:auto;letter-spacing:-.01em;
}
.nav a.item{
  font-size:14px;color:var(--muted);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.nav a.item:hover,.nav a.item:focus-visible{color:var(--ink)}
.nav a.item[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ── 타이포 ── */
h1{
  font-family:'Gowun Batang',serif;font-weight:700;color:var(--ink);
  font-size:clamp(30px,5.2vw,48px);line-height:1.28;letter-spacing:-.015em;
}
h2{
  font-family:'Gowun Batang',serif;font-weight:700;color:var(--ink);
  font-size:clamp(22px,3.2vw,29px);line-height:1.35;letter-spacing:-.01em;
}
h3{font-size:16px;font-weight:600;color:var(--ink);line-height:1.5}
.lede{font-size:clamp(15px,1.8vw,17px);line-height:1.8;max-width:34em;margin-top:18px}
.eyebrow{
  font-size:12px;font-weight:500;color:var(--accent);
  letter-spacing:.06em;text-transform:uppercase;
}

/* ── 버튼 ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--accent);color:#fff;
  font-size:14.5px;font-weight:500;text-decoration:none;
  padding:11px 22px;border-radius:999px;border:0;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ── 섹션 ── */
section{padding:clamp(56px,9vw,96px) 0}
.rule{height:1px;background:var(--line);border:0}

/* ── 책 표지 ── */
.cover{
  border-radius:6px;
  box-shadow:var(--shadow);
  background:var(--wash);
  aspect-ratio:3/4;object-fit:cover;width:100%;
}
.shelf{display:flex;gap:14px;align-items:flex-end}
.shelf .cover{width:clamp(72px,13vw,124px)}

/* ── 푸터 ── */
footer{
  border-top:1px solid var(--line);
  padding:36px 0 64px;font-size:13px;color:var(--muted);
}
footer p+p{margin-top:10px}
footer a{color:var(--muted)}

/* ── 모바일 ── */
@media (max-width:767px){
  .wrap,.narrow{padding:0 18px}
  .nav{gap:18px}
  .nav .brand{font-size:16px}
  .shelf{gap:10px}
}