/* 미간 MIGAN
   규칙은 하나: 로고의 두 획 사이에 난 빈 기둥이 사이트 전체의 가운데 여백이 됩니다.
   --mark: 첫 화면 심볼의 너비. 심볼 안의 빈 기둥은 그 너비의 18.66%이고,
   --gap(모든 좌우 나눔의 가운데 여백)이 정확히 그 폭과 같습니다. */
:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #6f6f6f;
  --hair: #d9d9d9;
  --mark: clamp(220px, 34vw, 440px);
  --gap: calc(var(--mark) * 0.1866);
  --edge: clamp(16px, 4vw, 48px);
  --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --caps: 'Montserrat', 'Noto Sans KR', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-inline: var(--edge);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; gap: clamp(96px, 14vw, 200px); padding-bottom: clamp(96px, 12vw, 160px); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
h1, h2, p, dl, dd, ul { margin: 0; }
img { display: block; max-width: 100%; }
.muted { color: var(--muted); }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caps {
  font-family: var(--caps);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* 좌우 나눔: [왼쪽] [미간] [오른쪽] */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr);
  align-items: start;
}
.split > :first-child { grid-column: 1; }
.split > :last-child { grid-column: 3; }

/* 머리 */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 28px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__mark { width: 30px; height: auto; }
.logo__word { font-family: var(--caps); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; }
.site-nav { display: flex; gap: 28px; font-weight: 500; font-size: 15px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* 첫 화면 */
.hero { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 5vw, 56px); padding-top: clamp(40px, 8vw, 96px); }
.hero__mark { width: var(--mark); height: auto; }
.hero__line { width: 100%; font-size: clamp(19px, 2.4vw, 32px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.hero__left { text-align: right; }
.hero__right { text-align: left; }

/* 다음 책 */
.feature { align-items: end; padding-top: clamp(24px, 5vw, 64px); }
.feature__cover { justify-self: end; width: min(100%, 360px); }
.feature__text { display: flex; flex-direction: column; gap: 6px; max-width: 30em; }
.feature__text h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.feature__when { margin-top: 10px; font-size: 14px; }
.feature__tagline { margin-top: 18px; gap: 12px; }
.more { align-self: flex-start; justify-self: start; margin-top: 18px; font-weight: 500; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* 표지 */
.cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 100%;
  padding: 8%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.cover:hover { color: var(--ink); }
.cover--dark { background: var(--ink); color: var(--paper); }
.cover--dark:hover { color: var(--paper); }
.cover--image { padding: 0; border: 0; background: none; }
.cover--image img { width: 100%; height: 100%; object-fit: cover; }
.cover__mark { position: absolute; top: 8%; left: 8%; width: 18%; height: auto; }
.cover__year { position: absolute; top: 8%; right: 8%; font-family: var(--caps); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; }
.cover--l .cover__year, .cover--xl .cover__year { font-size: 14px; }
.cover__title { font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; font-size: 20px; }
.cover__credit { display: flex; flex-direction: column; font-size: 12px; line-height: 1.5; }
.cover--l .cover__title, .cover--xl .cover__title { font-size: clamp(26px, 3vw, 36px); }
.cover--l .cover__credit, .cover--xl .cover__credit { font-size: 14px; }
.cover--xs { padding: 9%; }
.cover--xs .cover__title { font-size: 11px; line-height: 1.35; }
.cover--xs .cover__mark { display: none; }

/* 책 모음 */
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.shelf-head h2 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.01em; }
.shelf-head .more { margin-top: 0; }
.section-head { align-items: baseline; margin-bottom: 36px; }
.section-head > :first-child { justify-self: end; }
.works-block .section-head { display: block; }
.works-block .section-head > * { justify-self: start; }
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 56px;
}
.book-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.card { display: flex; flex-direction: column; gap: 14px; }
.card__text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.6; }
.card__title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }

/* 책 페이지 */
.page-head { align-items: end; padding-top: clamp(24px, 5vw, 64px); margin-bottom: -40px; }
.page-head h1 { justify-self: end; font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.view-toggle { display: flex; gap: 20px; }
.view-toggle button { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.books[data-current="grid"] .book-list { display: none; }
.books[data-current="list"] .book-grid { display: none; }

/* 목록 보기: 제목은 미간 왼쪽에, 지은이와 출간은 오른쪽에 */
.book-list { display: flex; flex-direction: column; }
.book-row { padding-block: 20px; border-top: 1px solid var(--hair); align-items: baseline; }
.book-row:last-child { border-bottom: 1px solid var(--hair); }
.book-row__title { text-align: right; font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -0.01em; }
.book-row__meta { display: flex; flex-direction: column; font-size: 14px; line-height: 1.6; }

/* 책 상세 */
.book {
  padding-top: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "cover . text" "meta . text";
  align-items: start;
}
.book__cover { grid-area: cover; justify-self: end; width: min(100%, 440px); }
.book__meta { grid-area: meta; justify-self: end; width: min(100%, 440px); margin-top: 28px; }
.book__text { grid-area: text; }
.book__text { display: flex; flex-direction: column; gap: 44px; max-width: 34em; }
.book__text header { display: flex; flex-direction: column; gap: 10px; }
.book__text h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.book__text h1 .sub { display: block; font-size: 0.5em; font-weight: 500; margin-top: 8px; letter-spacing: -0.01em; }
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose .lead { font-weight: 700; }
.prose strong { font-weight: 700; }
.more-intro { margin-top: 4px; }
.more-intro summary { cursor: pointer; font-weight: 500; list-style: none; display: inline-block; padding: 12px 0 2px; border-bottom: 1.5px solid currentColor; }
.more-intro summary::-webkit-details-marker { display: none; }
.more-intro summary::after { content: " +"; }
.more-intro[open] summary::after { content: " −"; }
.more-intro > .prose { margin-top: 20px; }
.book-section { display: flex; flex-direction: column; gap: 16px; }
.caps-ko { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin: 0; }
.praise figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.praise figure + figure { margin-top: 14px; }
.praise blockquote { margin: 0; font-size: inherit; line-height: inherit; }
.praise blockquote p::before { content: "“"; }
.praise blockquote p::after { content: "”"; }
.praise figcaption { font-size: 13px; color: var(--muted); }
.praise figcaption::before { content: "— "; }
.meta { font-size: 14px; display: flex; flex-direction: column; gap: 10px; }
.meta div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 12px; }
.meta dt { color: var(--muted); }
.meta a { border-bottom: 1px solid currentColor; }
.meta-note { margin-top: 20px; font-size: 12px; color: var(--muted); }
.pager { align-items: baseline; margin-top: -40px; }
.pager .back { justify-self: end; }
.pager .next { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 18px; }

/* 소개 */
.about-hero { padding-top: clamp(24px, 5vw, 64px); align-items: baseline; }
.about-hero__left { text-align: right; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.55; letter-spacing: -0.02em; }
.about-hero__right { max-width: 30em; }
.person__left { text-align: right; display: flex; flex-direction: column; gap: 8px; }
.person__left h2 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: 0.02em; }
.person__right { max-width: 30em; }
.works {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 32px;
}
.work { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.45; }
.work .cover { margin-bottom: 8px; }
.work__title { font-size: 12px; font-weight: 700; }
.contact { align-items: baseline; }
.contact__label { justify-self: end; }

/* 명함식 연락처: 한 글자 머리 + 값 */
.card-list { display: flex; flex-direction: column; gap: 4px; }
.card-list div { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; }
.card-list dt { font-family: var(--caps); font-weight: 700; font-size: 0.86em; }
.card-list--large { font-size: 18px; gap: 8px; }
.card-list dd a { white-space: nowrap; }

/* 꼬리 */
.site-footer { padding-block: 40px 48px; font-size: 13px; line-height: 1.7; align-items: end; }
.site-footer .card-list { justify-self: end; }
.site-footer__right { display: flex; flex-direction: column; gap: 4px; }
.credit { color: var(--muted); font-size: 12px; }
.credit a { border-bottom: 1px solid currentColor; }

@media (max-width: 1024px) {
  .book-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 휴대폰: 좌우 나눔은 첫 화면 문장과 목록에만 남기고, 나머지는 한 줄로 쌓습니다 */
@media (max-width: 720px) {
  :root { --mark: min(40vw, 160px); }
  body { font-size: 15px; }
  main { gap: 88px; }
  .site-header { padding-block: 20px; }
  .logo__mark { width: 26px; }

  .hero { padding-top: 32px; gap: 28px; }
  .hero__line { font-size: 19px; }

  .feature, .book, .about-hero, .person, .contact, .page-head, .pager, .section-head, .site-footer { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .feature > *, .book > *, .about-hero > *, .person > *, .contact > *, .page-head > *, .pager > *, .section-head > *, .site-footer > * { grid-column: 1 !important; justify-self: start !important; text-align: left; }
  .feature__cover { width: min(52%, 200px); }
  .feature .cover--l { padding: 10%; }
  .feature .cover--l .cover__title { font-size: 19px; }
  .feature .cover--l .cover__credit { font-size: 11px; }
  .feature .cover--l .cover__year { font-size: 11px; top: 10%; right: 10%; }
  .book { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "cover" "text" "meta"; row-gap: 20px; }
  .book__cover { position: static; width: min(52%, 200px); }
  .book__meta { width: 100%; margin-top: 24px; }
  .book .cover--xl { padding: 10%; }
  .book .cover--xl .cover__title { font-size: 19px; }
  .book .cover--xl .cover__credit { font-size: 11px; }
  .book .cover--xl .cover__year { font-size: 11px; top: 10%; right: 10%; }
  .page-head, .pager { margin-top: 0; margin-bottom: 0; }
  .about-hero__left, .person__left { text-align: left; }
  .section-head { margin-bottom: 20px; }

  .book-grid, .book-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 36px; }
  .works { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; row-gap: 20px; }
  .work { font-size: 10px; }
  .work__title { font-size: 11px; }
  .cover__title { font-size: 16px; }
  .cover--xs .cover__title { font-size: 9px; }
  .book-row__title { font-size: 16px; }
  .book-row__meta { font-size: 12px; }
  .card-list--large { font-size: 16px; }
  .site-footer .card-list, .contact .card-list { justify-self: stretch !important; width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  a, button { transition: color 0.15s ease; }
}