/* Hallmark · v2.0.0 · genre: editorial · theme: custom (by request: locked by mood/pro/DIRECTION.md) · shape: store catalogue · hero: oak table of new books · nav: search-first two rows · footer: black floor · posture: restrained · signature: new books lying flat on an oak table with paper labels */
/* critique: a type-led small-press catalogue grown into a full store; one yellow fill per screen for the main action; rules instead of cards */

/* Tokens matched to the app. Source: smalltalk-app/app/src/door/door.css (stage #1d1612, cream #f1e4c8, gold #f1c24a, glow #ffd98a), src/styles/tokens.css (--px-* 16-colour palette, reader muted #b3a690). Dark is the base here; the light scheme (system setting) is in s3-color.css. */
/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --paper: #1d1612;
  --wall: #271d17;
  --ink: #f1e4c8;
  --ink-2: #d9cbab;
  --ink-3: #b3a690;
  --rule: #46301f;
  --rule-strong: #f1e4c8;
  --accent: #f1c24a;
  --accent-press: #ffd98a;
  --on-accent: #1d1612;
  --btn-bg: #f1c24a;
  --btn-ink: #1d1612;
  --btn-hover: #ffd98a;
  --floor: #140e0a;
  --on-floor: #f1e4c8;
  --on-floor-2: #b3a690;
  --floor-rule: #3a2616;
  --label: #f7eedb;
  --label-ink: #2a2320;
  --label-ink-2: #4a3830;
  --notice-bg: #2b1f17;
  --table-base: #8a5a35;
  --table-edge: inset 0 0 0 1px rgba(0,0,0,.08);
  --label-shadow: 0 1px 2px rgba(0,0,0,.25);
  --cover-shadow: 0 0 0 1px rgba(241,228,200,.08), 0 6px 14px -6px rgba(0,0,0,.6);
  --cover-flat: 0 1px 1px rgba(0,0,0,.25), 0 10px 18px -8px rgba(30,15,0,.45);
  --cover-spine: inset 2px 0 0 rgba(255,255,255,.08);
  --progress: #f1c24a;

  --hl-yellow: rgba(242, 201, 76, .45);
  --hl-mint: rgba(98, 196, 160, .38);
  --hl-pink: rgba(240, 128, 160, .34);
  --ul-yellow: #a37b00;
  --ul-mint: #2f9a74;
  --ul-pink: #c94f78;
  --sw-yellow: #f2c94c; --sw-mint: #62c4a0; --sw-pink: #f080a0;
  --rd-light-bg: #fdfcf9; --rd-light-ink: #1f1d1a; --rd-light-ink-2: #5d5951; --rd-light-rule: #e4e0d6; --rd-light-chrome: #f7f5f0;
  --rd-sepia-bg: #f3ead7; --rd-sepia-ink: #3a2f20; --rd-sepia-ink-2: #6b5c45; --rd-sepia-rule: #dccfb3; --rd-sepia-chrome: #ece1ca;
  --rd-dark-bg: #1d1612; --rd-dark-ink: #d9cbab; --rd-dark-ink-2: #b3a690; --rd-dark-rule: #46301f; --rd-dark-chrome: #271d17;
  --rd-dark-hl-y: rgba(242, 201, 76, .30); --rd-dark-hl-m: rgba(98, 196, 160, .28); --rd-dark-hl-p: rgba(240, 128, 160, .28);
  --rd-pop-light: #1c1b18; --rd-pop-light-ink: #f7f5f0;
  --rd-select: rgba(80, 120, 200, .28);
  --rd-scrim: rgba(0, 0, 0, .18);
  --rd-pop-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45);
  --rd-panel-shadow: 0 18px 48px -18px rgba(0, 0, 0, .35);
  --rd-hover: rgba(127, 127, 127, .22);
  --swatch-edge: inset 0 0 0 1px rgba(0, 0, 0, .2);
  --myeongjo: "AppleMyungjo", "Noto Serif KR", serif;

  --serif: "Noto Serif KR", "AppleMyungjo", Georgia, serif;
  --sans: "Pretendard", "Apple SD Gothic Neo", system-ui, -apple-system, sans-serif;

  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-17: 17px; --fs-20: 20px;
  --fs-25: 25px; --fs-31: 31px; --fs-39: 39px;
  --fs-display: clamp(31px, 3.4vw, 44px);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 96px;
  --section-gap: var(--s-8);

  --max: 1200px;
  --margin: max(24px, calc((100% - var(--max)) / 2));
  --tap: 44px;
  --radius-btn: 2px;
  --radius-table: 14px;

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 720px) {
  :root { --section-gap: var(--s-7); --margin: 16px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font: 400 var(--fs-16)/1.6 var(--sans);
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rule-strong); outline-offset: 3px; border-radius: 1px;
}
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 50; background: var(--wall); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule-strong); }
.skip:focus { top: var(--s-4); }
.bar { color: var(--rule); padding: 0 .3em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- type roles ---------- */
.h-display { font: 600 var(--fs-display)/1.2 var(--serif); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.h-section { font: 600 var(--fs-25)/1.3 var(--serif); text-wrap: balance; }
.h-sub { font: 600 var(--fs-20)/1.35 var(--serif); }
.lede { font: 400 var(--fs-17)/1.7 var(--sans); color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.prose { font: 400 var(--fs-17)/1.8 var(--serif); max-width: 34em; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.meta { font: 400 var(--fs-14)/1.5 var(--sans); color: var(--ink-3); }
.book-title { font: 600 var(--fs-16)/1.4 var(--serif); color: var(--ink); text-wrap: balance; }
.book-author { font: 400 var(--fs-14)/1.5 var(--sans); color: var(--ink-2); }
.sign { font: 400 var(--fs-14)/1.5 var(--sans); color: var(--ink-3); margin-top: var(--s-3); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-5);
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid transparent;
  font: 600 var(--fs-16)/1.2 var(--sans); border-radius: var(--radius-btn);
  transition: background-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn-buy { background: var(--accent); color: var(--on-accent); }
.btn-buy:hover { background: var(--accent-press); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--notice-bg); }
.btn[disabled] { background: var(--rule); color: var(--ink-2); border-color: var(--rule); cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn-wide { width: 100%; }
.text-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-std);
}
.text-link:hover { text-decoration-color: currentColor; }


/* ---------- covers ---------- */
.cover { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 1px rgba(241, 228, 200, .28)) drop-shadow(0 6px 9px rgba(0, 0, 0, .45)); }
.cv { position: relative; display: block; }
.cv::after { content: ""; position: absolute; inset: 0; box-shadow: var(--cover-spine); pointer-events: none; }
.book-card .cv { transition: transform var(--dur-fast) var(--ease-std); }
.book-card:hover .cv { transform: translateY(-2px); }
.book-card:hover .book-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.book-card:active .cv { transform: translateY(0); }

/* ---------- header ---------- */
.site-head { background: var(--wall); border-bottom: 1px solid var(--rule); }
.head-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); min-height: 76px; }
.logo { gap: 10px; font: 600 var(--fs-25)/1 var(--serif); letter-spacing: -0.01em; min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap; }
.search { display: flex; max-width: 520px; width: 100%; border: 1px solid var(--ink); border-radius: var(--radius-btn); background: var(--paper); }
.search input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-4); border: 0; background: transparent; font-size: var(--fs-16); }
.search input::placeholder { color: var(--ink-3); }
.search input:focus-visible { outline: none; }
.search:focus-within { outline: 2px solid var(--rule-strong); outline-offset: 2px; }
.search button { border: 0; background: var(--btn-bg); color: var(--btn-ink); padding: 0 var(--s-4); font-weight: 600; font-size: var(--fs-14); }
.account { display: flex; gap: var(--s-1); }
.account a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-2); border-radius: var(--radius-btn); }
.account a:hover { color: var(--ink); background: var(--notice-bg); }
.account a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.account .cart-n { font-variant-numeric: tabular-nums; margin-left: 4px; color: var(--ink); }
.cats { border-top: 1px solid var(--rule); position: relative; }
.cats ul { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-3)); scroll-padding-inline: 48px; }
.cats ul::-webkit-scrollbar { display: none; }
.cats a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); white-space: nowrap; font: 500 var(--fs-16)/1 var(--sans); color: var(--ink-2); }
.cats a:hover { color: var(--ink); }
.cats a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.cats .sep { width: 1px; background: var(--rule); margin: var(--s-3) var(--s-2); flex: none; }
/* W13 scroll hint: decorative edge fade + arrow, shown by js/nav-hint.js only on a side that still has links; never takes clicks. */
.cats-hint { position: absolute; top: 1px; bottom: 0; width: 44px; display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity .2s ease; font: 600 var(--fs-20)/1 var(--sans); color: var(--ink); }
.cats-hint-end { right: 0; justify-content: flex-end; padding-right: 6px; background: linear-gradient(to left, var(--wall) 38%, transparent); }
.cats-hint-start { left: 0; justify-content: flex-start; padding-left: 6px; background: linear-gradient(to right, var(--wall) 38%, transparent); }
.cats[data-more-end] .cats-hint-end { opacity: 1; animation: cats-nudge 1.4s ease-in-out 2; }
.cats[data-more-start] .cats-hint-start { opacity: 1; }
@keyframes cats-nudge { 0%, 100% { padding-right: 6px; } 50% { padding-right: 1px; } }
@media (prefers-reduced-motion: reduce) { .cats-hint, .cats[data-more-end] .cats-hint-end { animation: none; transition: none; } }

@media (max-width: 720px) {
  .head-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); min-height: 0; padding-top: var(--s-2); }
  .logo { font-size: var(--fs-20); }
  .head-row .search { grid-row: 3; max-width: none; margin-bottom: var(--s-3); }
  .account { justify-self: start; grid-row: 2; margin-left: calc(-1 * var(--s-2)); }  /* W20: the 251px wordmark leaves no room for the links beside it at 390 */
  .account a { padding: 0 var(--s-2); }
  .account .hide-s { display: none; }
  .cats a { font-size: var(--fs-14); min-height: 44px; }
}

/* ---------- notice strip (fake data label, continue reading) ---------- */
.strip { background: var(--notice-bg); border-bottom: 1px solid var(--rule); }
.strip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; font-size: var(--fs-14); }
.strip-row .meta { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
@media (max-width: 720px) { .hide-s { display: none; } }

/* ---------- section ---------- */
.section { padding-top: var(--section-gap); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.section-head .meta { flex: 1 1 auto; }

/* ---------- oak table hero ---------- */
.hero { padding-top: var(--s-7); }
.hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5); margin-bottom: var(--s-5); }
.hero-text .lede { margin-top: var(--s-3); max-width: 48em; }
.table {
  border-radius: var(--radius-table);
  background: var(--table-base);
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px) clamp(20px, 3vw, 36px);
  box-shadow: var(--table-edge);
}
.table ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); align-items: start; }
.table .book-card { display: flex; flex-direction: column; gap: var(--s-3); }
.table .cover { box-shadow: var(--cover-flat); }
.label { background: var(--label); color: var(--label-ink); padding: var(--s-2) var(--s-3) var(--s-3); border-radius: 2px; box-shadow: var(--label-shadow); }
.label .book-title { color: var(--label-ink); font-size: var(--fs-14); }
.label .book-author { color: var(--label-ink-2); font-size: var(--fs-12); }
.label .price { display: block; margin-top: var(--s-1); font: 600 var(--fs-14)/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--label-ink); }
.label .rent { font-weight: 400; color: var(--label-ink-2); font-size: var(--fs-12); }
@media (max-width: 960px) { .table ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .table li:nth-child(n+4) { display: none; } }
@media (max-width: 720px) {
  .hero { padding-top: var(--s-5); }
  .hero-text { grid-template-columns: minmax(0, 1fr); }
  .table { padding: var(--s-5) var(--s-4) var(--s-4); }
  .table ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .table li:nth-child(n+3) { display: list-item; }
  .table li:nth-child(n+5) { display: none; }
}

/* ---------- pick ---------- */
.pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.pick .cv { max-width: 340px; }
.pick-body .h-display { margin: var(--s-2) 0 var(--s-1); }
.pick-body .prose { margin-top: var(--s-5); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
@media (max-width: 720px) { .pick { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .pick .cv { max-width: 200px; } }

/* ---------- ranking ---------- */
.rank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); counter-reset: r; }
.rank li { border-bottom: 1px solid var(--rule); }
.rank a { display: grid; grid-template-columns: 32px 52px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; }
.rank .r { font: 600 var(--fs-20)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: center; }
.rank li:first-child .r { font-weight: 700; }
.rank .price { font: 500 var(--fs-14)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rank a:hover .book-title { text-decoration: underline; text-underline-offset: 3px; }
.rank-list-2 { display: none; }
@media (max-width: 720px) { .rank { grid-template-columns: minmax(0, 1fr); } .rank li:nth-child(n+6) { display: none; } }

/* ---------- shelf row ---------- */
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); align-items: end; }
.shelf .book-card { display: flex; flex-direction: column; gap: var(--s-3); }
.shelf .book-card > div { min-height: 4.6em; }
.shelf .price { font: 500 var(--fs-14)/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); margin-top: 2px; display: block; }
@media (max-width: 960px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shelf li:nth-child(n+5) { display: none; } }
@media (max-width: 720px) {
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-4); margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); scrollbar-width: none; }
  .shelf li { flex: 0 0 38%; scroll-snap-align: start; display: block !important; }
}
.cat-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.cat-index a { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-4) 0; min-height: var(--tap); border-bottom: 1px solid var(--rule); }
.cat-index a:hover .h-sub { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 720px) { .cat-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- author of the month ---------- */
.author { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
.author blockquote { font: 400 var(--fs-25)/1.5 var(--serif); text-wrap: pretty; max-width: 24em; }
.author .books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 720px) { .author { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .author blockquote { font-size: var(--fs-20); } }

/* ---------- footer (black floor) ---------- */
.floor { margin-top: var(--s-9); background: var(--floor); color: var(--on-floor); padding: var(--s-7) 0 var(--s-6); }
.floor-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.floor .logo { color: var(--on-floor); }
.floor p, .floor li { font-size: var(--fs-14); color: var(--on-floor-2); }
.floor h2 { font: 600 var(--fs-14)/1.4 var(--sans); color: var(--on-floor); margin-bottom: var(--s-2); }
.floor a { display: inline-flex; min-height: 36px; align-items: center; }
.floor a:hover { color: var(--on-floor); text-decoration: underline; text-underline-offset: 3px; }
.floor a:focus-visible { outline-color: var(--on-floor); }
.honesty { border-top: 1px solid var(--floor-rule); margin-top: var(--s-6); padding-top: var(--s-4); font-size: var(--fs-14); color: var(--on-floor-2); }
@media (max-width: 720px) { .floor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .floor-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- breadcrumb ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-14); color: var(--ink-3); padding: var(--s-5) 0 var(--s-3); }
.crumb a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* ---------- browse (category / search) ---------- */
.browse { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.rail { position: sticky; top: var(--s-4); }
.rail section + section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.rail h2 { font: 600 var(--fs-14)/1.4 var(--sans); margin-bottom: var(--s-2); }
.rail a { display: flex; justify-content: space-between; min-height: 36px; align-items: center; font-size: var(--fs-14); color: var(--ink-2); }
.rail a:hover { color: var(--ink); }
.rail a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.rail label { display: flex; gap: var(--s-2); align-items: center; min-height: 36px; font-size: var(--fs-14); color: var(--ink-2); cursor: pointer; }
.rail input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--rule); border-radius: 20px; font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-2); background: transparent; white-space: nowrap; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-strong); }
.sort { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.sort a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-2); font-size: var(--fs-14); color: var(--ink-3); }
.sort a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.filter-btn { display: none; }
.rows > li { border-bottom: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; gap: var(--s-5); padding: var(--s-5) 0; align-items: start; }
.row .book-title { font-size: var(--fs-20); }
.row .book-author { margin-top: 2px; }
.row .desc { margin-top: var(--s-2); font-size: var(--fs-14); color: var(--ink-2); max-width: 40em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .facts { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-12); color: var(--ink-3); }
.row .facts span { border: 1px solid var(--rule); padding: 2px var(--s-2); border-radius: 2px; }
.prices { display: grid; gap: var(--s-1); justify-items: end; text-align: right; font-size: var(--fs-14); }
.prices dt { color: var(--ink-3); }
.prices div { display: flex; gap: var(--s-2); align-items: baseline; }
.prices dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.row:hover .book-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row mark { background: none; color: inherit; font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.pager { display: flex; gap: var(--s-1); justify-content: center; padding: var(--s-6) 0 0; }
.pager a { display: inline-flex; min-width: var(--tap); min-height: var(--tap); align-items: center; justify-content: center; font-size: var(--fs-14); color: var(--ink-2); border-radius: var(--radius-btn); }
.pager a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.pager a:hover:not([aria-current]) { background: var(--notice-bg); }
.group-h { padding: var(--s-6) 0 var(--s-2); border-bottom: 1px solid var(--rule-strong); display: flex; gap: var(--s-2); align-items: baseline; }
.group-h h2 { font: 600 var(--fs-17)/1.4 var(--sans); }
.empty-help { padding: var(--s-6) 0; color: var(--ink-2); font-size: var(--fs-14); }
@media (max-width: 960px) { .browse { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } .filter-btn { display: inline-flex; } }
@media (max-width: 720px) {
  .row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; }
  .row .book-title { font-size: var(--fs-17); }
  .row .prices { grid-column: 2; justify-items: start; text-align: left; display: flex; gap: var(--s-4); }
  .row .desc { -webkit-line-clamp: 2; }
}

/* ---------- book detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--s-7); align-items: start; padding-top: var(--s-3); }
.detail .cv { max-width: 380px; }
.detail .under-cover { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.facts-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-14); }
.facts-dl dt { color: var(--ink-3); }
.facts-dl dd { color: var(--ink); }
.buy { position: sticky; top: var(--s-4); border-top: 2px solid var(--rule-strong); padding-top: var(--s-4); }
.buy fieldset { border: 0; padding: 0; margin: 0; }
.buy legend { font: 600 var(--fs-14)/1.4 var(--sans); margin-bottom: var(--s-2); padding: 0; }
.opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.opt b { font: 600 var(--fs-16)/1.4 var(--sans); }
.opt .amount { font: 600 var(--fs-17)/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.opt small { grid-column: 2 / -1; font-size: var(--fs-12); color: var(--ink-3); line-height: 1.5; }
.buy .btn { width: 100%; margin-top: var(--s-3); }
.buy .btn-buy { margin-top: var(--s-4); }
.buy .text-link { width: 100%; justify-content: center; }
.buy-note { font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--s-2); line-height: 1.6; }
.d-nav { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); margin-top: var(--s-8); }
.d-nav ul { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
.d-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); white-space: nowrap; font-size: var(--fs-14); color: var(--ink-2); }
.d-nav a:hover { color: var(--ink); }
.d-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-6); max-width: 760px; }
.d-body h2 { margin-bottom: var(--s-4); }
.excerpt { border-left: 2px solid var(--ink); padding-left: var(--s-5); font: 400 var(--fs-20)/1.75 var(--serif); }
.excerpt + .meta { margin-top: var(--s-2); padding-left: calc(var(--s-5) + 2px); }
.toc li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-16); }
.toc li span:last-child { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-14); }
.mobile-buy { display: none; }
@media (max-width: 1100px) { .detail { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .buy { grid-column: 1 / -1; position: static; max-width: 520px; } }
@media (max-width: 720px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .detail .cv { max-width: 200px; margin: 0 auto; }
  .detail .under-cover { justify-content: center; }
  .buy .btn-buy { display: none; }
  .mobile-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-3) var(--margin) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--wall); border-top: 1px solid var(--rule); }
  .mobile-buy .amount { font: 600 var(--fs-17)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
  .mobile-buy .btn { flex: 0 0 auto; min-width: 150px; }
  body.has-mobile-buy { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .d-nav { margin-top: var(--s-7); }
}

/* ---------- checkout ---------- */
.fake-banner { background: var(--notice-bg); border: 1px solid var(--rule); padding: var(--s-3) var(--s-4); font-size: var(--fs-14); color: var(--ink-2); margin-top: var(--s-4); border-radius: 2px; }
.co { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-7); align-items: start; padding-top: var(--s-5); }
.co-step { border-top: 1px solid var(--rule-strong); padding: var(--s-4) 0 var(--s-6); }
.co-step h2 { font: 600 var(--fs-20)/1.4 var(--serif); margin-bottom: var(--s-4); }
.co-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.co-item .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.co-item .kind { font-size: var(--fs-12); color: var(--ink-3); }
.co-item button { border: 0; background: none; color: var(--ink-3); font-size: var(--fs-14); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); padding: 0; }
.field { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); max-width: 420px; }
.field label { font: 500 var(--fs-14)/1.4 var(--sans); }
.field input { height: 48px; padding: 0 var(--s-4); border: 1px solid var(--ink-3); border-radius: var(--radius-btn); background: var(--wall); font-size: var(--fs-16); }
.field .hint { font-size: var(--fs-12); color: var(--ink-3); }
.pay-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pay-opts label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; border: 1px solid var(--rule); border-radius: var(--radius-btn); font-size: var(--fs-14); cursor: pointer; padding: 0 var(--s-2); }
.pay-opts input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opts label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.pay-opts label:has(input:focus-visible) { outline: 2px solid var(--rule-strong); outline-offset: 2px; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-14); padding: var(--s-2) 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.policy { font-size: var(--fs-12); color: var(--ink-3); line-height: 1.7; margin: var(--s-1) 0 var(--s-3) 32px; }
.summary { position: sticky; top: var(--s-4); background: var(--wall); border: 1px solid var(--rule); padding: var(--s-5); border-radius: 2px; }
.summary h2 { font: 600 var(--fs-17)/1.4 var(--sans); margin-bottom: var(--s-3); }
.sum-row { display: flex; justify-content: space-between; padding: var(--s-1) 0; font-size: var(--fs-14); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule-strong); margin-top: var(--s-3); padding-top: var(--s-3); font-weight: 600; }
.sum-total .amount { font: 600 var(--fs-25)/1 var(--sans); font-variant-numeric: tabular-nums; }
.summary .btn { width: 100%; margin-top: var(--s-4); }
.summary .meta { margin-top: var(--s-3); font-size: var(--fs-12); line-height: 1.6; }
.done { display: none; padding: var(--s-8) 0; max-width: 560px; }
.done.on { display: block; }
.done .actions { margin-top: var(--s-5); }
@media (max-width: 960px) { .co { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } }
@media (max-width: 720px) { .pay-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- library ---------- */
.lib-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-6) 0 var(--s-4); }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-3); white-space: nowrap; font: 500 var(--fs-16)/1 var(--sans); color: var(--ink-3); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.tabs .n { font-size: var(--fs-14); font-variant-numeric: tabular-nums; font-weight: 400; }
.reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.reading-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.reading-item .book-title { font-size: var(--fs-20); }
.bar-track { height: 4px; background: var(--rule); margin-top: var(--s-4); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--progress); border-radius: 2px; }
.reading-item .meta { margin-top: var(--s-2); }
.reading-item .actions { margin-top: var(--s-4); }
.lib-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.lib-grid .book-card { display: flex; flex-direction: column; gap: var(--s-3); }
.state { font-size: var(--fs-12); color: var(--ink-3); margin-top: 2px; display: block; }
.state.warn { color: var(--ink); font-weight: 600; }
.mini-track { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-top: var(--s-1); }
.notes li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.notes q { font: 400 var(--fs-16)/1.7 var(--serif); quotes: none; }
.notes .hl-y { background: var(--hl-yellow); }
.notes .hl-m { background: var(--hl-mint); }
.notes .memo-q { border-bottom: 1.5px dotted var(--ink-3); }
.notes .ul-p { text-decoration: underline; text-decoration-color: var(--ul-pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.notes .memo { display: block; margin-top: var(--s-2); font-size: var(--fs-14); color: var(--ink-2); border-left: 2px solid var(--rule); padding-left: var(--s-3); }
.sync-note { font-size: var(--fs-14); color: var(--ink-3); }
@media (max-width: 960px) { .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .reading { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
  .lib-grid .book-title { font-size: var(--fs-14); }
  .reading-item { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-4); }
  .reading-item .book-title { font-size: var(--fs-17); }
  .notes li { grid-template-columns: 40px minmax(0, 1fr); }
  .notes li > a:last-child { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .book-card:hover .cv { transform: none; }
}

/* publisher distinction (placeholder data) */
.book-press{display:block;font:500 var(--fs-12)/1.4 var(--sans);color:var(--ink-3);letter-spacing:.01em;margin-top:2px}
.label .book-press{color:var(--label-ink-2)}
.press-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.press-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
.press-panel{border-top:1px solid var(--rule-strong);padding-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.press-panel .h-sub a{color:inherit;text-decoration:none}
.press-covers{display:flex;gap:var(--s-3);list-style:none;margin:0;padding:0}
.press-covers img{width:72px;height:auto;display:block;box-shadow:var(--cover-shadow)}
.press-sec{scroll-margin-top:96px}
@media (max-width:640px){.press-pair{grid-template-columns:1fr}}

/* logo slot: any inline svg/img placed by LOGO_SLOT in tools/build.py sits left of the wordmark */
/* W20: the wordmark is an alpha mask filled with currentColor, so light, dark and the always-dark footer need one file. Ratio 1884:165 from the original. */
.logo-img { display: block; flex: none; height: 22px; aspect-ratio: 1884 / 165; width: 251px; background: currentColor; -webkit-mask: url(../img/logo-mark.png) center / 100% 100% no-repeat; mask: url(../img/logo-mark.png) center / 100% 100% no-repeat; }
@media (min-width: 721px) { .logo-img { height: 24px; width: 274px; } }
@media (min-width: 960px) { .logo-img { height: 28px; width: 320px; } }
@media (forced-colors: active) { .logo-img { forced-color-adjust: none; background: CanvasText; } }
@supports not ((mask: url(x)) or (-webkit-mask: url(x))) { .logo-img { background: none; width: auto; height: auto; aspect-ratio: auto; font: 600 var(--fs-20)/1 var(--serif); } .logo-img::after { content: "스몰토크"; } }

/* cover missing: paper tile with the title in serif (no stock icon) */
.cv-none { aspect-ratio: 2 / 3; width: 100%; display: flex; align-items: center; justify-content: center; padding: 12%; text-align: center; background: var(--wall); border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--cover-shadow); font: 600 var(--fs-14)/1.5 var(--serif); color: var(--ink); }
.cv-none { overflow: hidden; } .cv-none > span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .cv-none::after { display: none; }
.sm .cv-none, .rank .cv-none { font-size: var(--fs-12); padding: 6%; }
/* pixel decoration (art copied from the app, scaled by integer 3x, never smoothed) */
.px-deco { image-rendering: pixelated; margin-top: var(--s-4); }


/* ---------- real-catalog additions (web-1105) ---------- */
.unset { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.price .price-k { color: var(--ink-3); font-weight: 400; }
.label .price .unset, .label .price .price-k { color: var(--label-ink-2); }
.edition { display: inline-block; font: 500 .78em/1.4 var(--sans); color: var(--ink-3); margin-left: 4px; white-space: nowrap; }
.label .edition { color: var(--label-ink-2); }
.cv-none { flex-direction: column; gap: var(--s-2); }
.cv-none small { font: 500 var(--fs-12)/1.3 var(--sans); color: var(--ink-3); }
.auth-short { display: none; }
@media (max-width: 720px) { .auth-long { display: none; } .auth-short { display: inline; } }
.notice-box { border: 1px solid var(--rule); background: var(--notice-bg); padding: var(--s-5); max-width: 44em; }
.notice-box p { margin-top: var(--s-2); color: var(--ink-2); }
.buy-state { margin: 0 0 var(--s-3); color: var(--ink-2); }
.buy-state b { color: var(--ink); margin-right: var(--s-1); }
.test-opts { margin-top: var(--s-4); }
.test-opts summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--ink-2); font-size: var(--fs-14); }
.test-opts select { min-height: var(--tap); padding: 0 var(--s-3); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius-btn); font: 400 var(--fs-16)/1 var(--sans); }
.login { max-width: 420px; display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.login-methods { display: grid; gap: var(--s-2); }
.login-methods .btn { width: 100%; margin-top: 0; justify-content: center; }
.login .btn { margin-top: var(--s-3); }
.lib-body { padding-top: var(--s-6); }
.lib-body .lede { margin-bottom: var(--s-4); }
.sync-note { margin-top: var(--s-7); max-width: 44em; }
.lib-grid .book-card > div { min-height: 0; }
.lib-grid .meta { margin-top: 2px; }
.lib-grid li p + p { margin-top: var(--s-1); }
.chips .chip, .chip { white-space: nowrap; }
.row .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
  .tabs a { padding: 0 var(--s-2); font-size: var(--fs-14); gap: var(--s-1); }
  .tabs { gap: 0; }
  .lib-head .meta { max-width: 100%; }
}

.pub-chips { display: none; margin-top: var(--s-2); }
@media (max-width: 960px) { .pub-chips { display: flex; } }
.plain { border: 0; padding: 0; margin: 0; min-width: 0; } .plain legend { padding: 0; }